Add card component for projects page
This commit is contained in:
Kyle Gordy
parent
d71e1f3543
commit
b4d70ce69d
|
|
@ -0,0 +1,21 @@
|
|||
{% assign theme = nil %}
|
||||
|
||||
{% if repository.language == "Go" %}
|
||||
{% assign theme = 'teal' %}
|
||||
|
||||
{% elsif repository.language == "Swift" %}
|
||||
{% assign theme = 'cabernet' %}
|
||||
|
||||
{% elsif repository.language == "JavaScript" %}
|
||||
{% assign theme = 'slate' %}
|
||||
|
||||
{% elsif repository.language == "HTML" %}
|
||||
{% assign theme = 'midnight' %}
|
||||
|
||||
{% elsif repository.language == "JSON" %}
|
||||
{% assign theme = 'rust' %}
|
||||
|
||||
{% elsif repository.language == "Python" %}
|
||||
{% assign theme = 'grass' %}
|
||||
|
||||
{% endif %}
|
||||
|
|
@ -46,6 +46,8 @@ $white: #fff;
|
|||
// Color Themes
|
||||
////////////////////
|
||||
|
||||
// Brand Themes
|
||||
|
||||
.theme-white {
|
||||
--theme-primary-color: #{$white};
|
||||
--theme-secondary-color: var(--theme-primary-color);
|
||||
|
|
@ -93,3 +95,29 @@ $white: #fff;
|
|||
--theme-accent-color: #{$white};
|
||||
--theme-text-color: var(--theme-accent-color);
|
||||
}
|
||||
|
||||
// Custom Themes
|
||||
|
||||
.theme-rust {
|
||||
--theme-primary-color: hsl(18, 84%, 28%);
|
||||
--theme-secondary-color: hsl(18, 84%, 22%);
|
||||
--theme-border-color: var(--theme-primary-color);
|
||||
--theme-accent-color: #{$white};
|
||||
--theme-text-color: var(--theme-accent-color);
|
||||
}
|
||||
|
||||
.theme-royal {
|
||||
--theme-primary-color: hsl(254, 100%, 28%);
|
||||
--theme-secondary-color: hsl(254, 100%, 22%);
|
||||
--theme-border-color: var(--theme-primary-color);
|
||||
--theme-accent-color: #{$white};
|
||||
--theme-text-color: var(--theme-accent-color);
|
||||
}
|
||||
|
||||
.theme-grass {
|
||||
--theme-primary-color: hsl(161, 100%, 20%);
|
||||
--theme-secondary-color: hsl(161, 100%, 16%);
|
||||
--theme-border-color: var(--theme-primary-color);
|
||||
--theme-accent-color: #{$white};
|
||||
--theme-text-color: var(--theme-accent-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,23 @@
|
|||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.stretched-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
pointer-events: auto;
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.stretched-link-secondary {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
////////////////////
|
||||
// List
|
||||
////////////////////
|
||||
|
|
@ -87,6 +104,14 @@
|
|||
margin: 0 !important;
|
||||
}
|
||||
|
||||
////////////////////
|
||||
// Radius
|
||||
////////////////////
|
||||
|
||||
.rounded {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
////////////////////
|
||||
// Truncation
|
||||
////////////////////
|
||||
|
|
@ -131,5 +156,5 @@
|
|||
width: 1em;
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: -.125em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,11 @@ $bp-xl: $max-width;
|
|||
////////////////////
|
||||
|
||||
.container-offset {
|
||||
@media (min-width: $bp-lg) {
|
||||
@media (min-width: $bp-md) {
|
||||
padding-left: ($cp-md + 7%);
|
||||
}
|
||||
|
||||
@media (min-width: $bp-xl) {
|
||||
padding-left: rem-calc(175px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
////////////////////
|
||||
// Variables
|
||||
////////////////////
|
||||
|
||||
$card-padding-sm: rem-calc(15px);
|
||||
$card-padding-lg: rem-calc(20px);
|
||||
|
||||
////////////////////
|
||||
// Card Grid
|
||||
////////////////////
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-gap: $card-padding-sm;
|
||||
grid-template-columns: 1fr;
|
||||
margin-bottom: rem-calc(50px);
|
||||
@extend .list--plain;
|
||||
|
||||
@media (min-width: $bp-sm) {
|
||||
grid-gap: $card-padding-lg;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-bottom: rem-calc(75px);
|
||||
}
|
||||
|
||||
@media (min-width: $bp-lg) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////
|
||||
// Card
|
||||
////////////////////
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
border: 1px solid $slate-300;
|
||||
overflow: hidden;
|
||||
@extend .rounded;
|
||||
transition: all .2s ease;
|
||||
transition-property: border-color, box-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: var(--theme-border-color);
|
||||
box-shadow: 10px 10px 0 $slate-200;
|
||||
}
|
||||
}
|
||||
|
||||
.card__header,
|
||||
.card__body {
|
||||
padding: $card-padding-sm;
|
||||
|
||||
@media (min-width: $bp-md) {
|
||||
padding: $card-padding-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.card__header {
|
||||
width: 100%;
|
||||
background-color: var(--theme-primary-color);
|
||||
border-bottom: 1px solid $slate-300;
|
||||
}
|
||||
|
||||
.card__header,
|
||||
.card__header-link {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
.card__header-title {
|
||||
padding-top: 1em;
|
||||
font-size: rem-calc(18px);
|
||||
|
||||
@media (min-width: $bp-md) {
|
||||
font-size: rem-calc(22px);
|
||||
}
|
||||
}
|
||||
|
||||
.card__header .svg-icon {
|
||||
margin-right: rem-calc(4px);
|
||||
opacity: .6;
|
||||
}
|
||||
|
|
@ -22,3 +22,4 @@
|
|||
@import "component/footer";
|
||||
@import "component/hero";
|
||||
@import "component/section-heading";
|
||||
@import "component/card";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
||||
<!-- code -->
|
||||
<symbol id="code" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8.46153846,4 L14,7.15020946 L14,8.85058847 L8.46153846,12 L8.46153846,10.2206264 L12.3661538,8 L8.46153846,5.77378815 L8.46153846,4 Z M2,4 L7.53846154,7.15020946 L7.53846154,8.85058847 L2,12 L2,10.2206264 L5.90461538,8 L2,5.77378815 L2,4 Z" fill-rule="nonzero"/></symbol>
|
||||
|
||||
<!-- license -->
|
||||
<symbol id="license" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M3.96825397,5.1875 L3.96825397,3.5 L11.968254,3.5 L11.968254,5.1875 L8.88888889,5.1875 L8.88888889,12.5 L7.11111111,12.5 L7.11111111,5.1875 L3.96825397,5.1875 Z M2.85714286,6.875 L5.71428571,10.25 L0,10.25 L2.85714286,6.875 Z M13.1428571,6.875 L16,10.25 L10.2857143,10.25 L13.1428571,6.875 Z" fill-rule="nonzero"/></symbol>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1016 B |
|
|
@ -12,17 +12,46 @@ hero:
|
|||
<div class="container">
|
||||
<h2>Open Source Projects</h2>
|
||||
|
||||
<ul>
|
||||
<ul class="card-grid">
|
||||
{% assign public_repositories = site.github.public_repositories | where:'archived', false | where:'fork', false | sort: 'stargazers_count' | reverse %}
|
||||
{% for repository in public_repositories %}
|
||||
<li>
|
||||
<h2>
|
||||
<a href='{{ repository.html_url }}'>{{ repository.name }}</a>
|
||||
</h2>
|
||||
<p>{{ repository.description }}</p>
|
||||
<p>{{ repository.language }}</p>
|
||||
<p>{{ repository.license.spdx_id }}</p>
|
||||
</li>
|
||||
|
||||
<!-- Assign theme colors based of off the project language -->
|
||||
<!-- See include below for logic and color.scss for available themes -->
|
||||
{% include project-color-logic.html %}
|
||||
|
||||
<li class="card theme-{{ theme | default: "white" }}">
|
||||
<header class="card__header">
|
||||
|
||||
<!-- Project title -->
|
||||
<h2 class="card__header-title m-0">
|
||||
<a class="card__header-link stretched-link" href='{{ repository.html_url }}'>{{ repository.name }}</a>
|
||||
</h2>
|
||||
|
||||
<!-- Project metadata -->
|
||||
<ul class="list--inline fs-md monospace">
|
||||
{% if repository.language %}
|
||||
<li>
|
||||
<svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icons.svg#code' | relative_url }}"></use></svg><span class="visually-hidden">Language: </span>{{ repository.language }}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if repository.license.spdx_id %}
|
||||
<li>
|
||||
<svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icons.svg#license' | relative_url }}"></use></svg><span class="visually-hidden">License: </span>{{ repository.license.spdx_id }}
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<!-- Project description -->
|
||||
<div class="card__body fs-md monospace">
|
||||
{% if repository.description %}
|
||||
<p class="m-0 clamp-3">{{ repository.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue