Skip to content

Commit b4d70ce

Browse files
kylegordykylegordy
committed
Add card component for projects page
1 parent d71e1f3 commit b4d70ce

File tree

8 files changed

+209
-11
lines changed

8 files changed

+209
-11
lines changed

‎_includes/project-color-logic.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{% assign theme = nil %}
2+
3+
{% if repository.language == "Go" %}
4+
{% assign theme = 'teal' %}
5+
6+
{% elsif repository.language == "Swift" %}
7+
{% assign theme = 'cabernet' %}
8+
9+
{% elsif repository.language == "JavaScript" %}
10+
{% assign theme = 'slate' %}
11+
12+
{% elsif repository.language == "HTML" %}
13+
{% assign theme = 'midnight' %}
14+
15+
{% elsif repository.language == "JSON" %}
16+
{% assign theme = 'rust' %}
17+
18+
{% elsif repository.language == "Python" %}
19+
{% assign theme = 'grass' %}
20+
21+
{% endif %}

‎assets/_sass/base/_colors.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ $white: #fff;
4646
// Color Themes
4747
////////////////////
4848

49+
// Brand Themes
50+
4951
.theme-white {
5052
--theme-primary-color: #{$white};
5153
--theme-secondary-color: var(--theme-primary-color);
@@ -93,3 +95,29 @@ $white: #fff;
9395
--theme-accent-color: #{$white};
9496
--theme-text-color: var(--theme-accent-color);
9597
}
98+
99+
// Custom Themes
100+
101+
.theme-rust {
102+
--theme-primary-color: hsl(18, 84%, 28%);
103+
--theme-secondary-color: hsl(18, 84%, 22%);
104+
--theme-border-color: var(--theme-primary-color);
105+
--theme-accent-color: #{$white};
106+
--theme-text-color: var(--theme-accent-color);
107+
}
108+
109+
.theme-royal {
110+
--theme-primary-color: hsl(254, 100%, 28%);
111+
--theme-secondary-color: hsl(254, 100%, 22%);
112+
--theme-border-color: var(--theme-primary-color);
113+
--theme-accent-color: #{$white};
114+
--theme-text-color: var(--theme-accent-color);
115+
}
116+
117+
.theme-grass {
118+
--theme-primary-color: hsl(161, 100%, 20%);
119+
--theme-secondary-color: hsl(161, 100%, 16%);
120+
--theme-border-color: var(--theme-primary-color);
121+
--theme-accent-color: #{$white};
122+
--theme-text-color: var(--theme-accent-color);
123+
}

‎assets/_sass/base/_helpers.scss

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,23 @@
2020
text-decoration: none !important;
2121
}
2222

23+
.stretched-link::after {
24+
content: '';
25+
position: absolute;
26+
top: 0;
27+
right: 0;
28+
bottom: 0;
29+
left: 0;
30+
z-index: 1;
31+
pointer-events: auto;
32+
background-color: rgba(0,0,0,0);
33+
}
34+
35+
.stretched-link-secondary {
36+
position: relative;
37+
z-index: 2;
38+
}
39+
2340
////////////////////
2441
// List
2542
////////////////////
@@ -87,6 +104,14 @@
87104
margin: 0 !important;
88105
}
89106

107+
////////////////////
108+
// Radius
109+
////////////////////
110+
111+
.rounded {
112+
border-radius: 6px;
113+
}
114+
90115
////////////////////
91116
// Truncation
92117
////////////////////
@@ -131,5 +156,5 @@
131156
width: 1em;
132157
height: 1em;
133158
fill: currentColor;
134-
vertical-align: text-bottom;
159+
vertical-align: -.125em;
135160
}

‎assets/_sass/base/_layout.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,11 @@ $bp-xl: $max-width;
4343
////////////////////
4444

4545
.container-offset {
46-
@media (min-width: $bp-lg) {
46+
@media (min-width: $bp-md) {
4747
padding-left: ($cp-md + 7%);
4848
}
49+
50+
@media (min-width: $bp-xl) {
51+
padding-left: rem-calc(175px);
52+
}
4953
}

‎assets/_sass/component/_card.scss

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
////////////////////
2+
// Variables
3+
////////////////////
4+
5+
$card-padding-sm: rem-calc(15px);
6+
$card-padding-lg: rem-calc(20px);
7+
8+
////////////////////
9+
// Card Grid
10+
////////////////////
11+
12+
.card-grid {
13+
display: grid;
14+
grid-gap: $card-padding-sm;
15+
grid-template-columns: 1fr;
16+
margin-bottom: rem-calc(50px);
17+
@extend .list--plain;
18+
19+
@media (min-width: $bp-sm) {
20+
grid-gap: $card-padding-lg;
21+
grid-template-columns: 1fr 1fr;
22+
margin-bottom: rem-calc(75px);
23+
}
24+
25+
@media (min-width: $bp-lg) {
26+
grid-template-columns: 1fr 1fr 1fr;
27+
}
28+
}
29+
30+
////////////////////
31+
// Card
32+
////////////////////
33+
34+
.card {
35+
position: relative;
36+
border: 1px solid $slate-300;
37+
overflow: hidden;
38+
@extend .rounded;
39+
transition: all .2s ease;
40+
transition-property: border-color, box-shadow;
41+
42+
&:hover,
43+
&:focus {
44+
border-color: var(--theme-border-color);
45+
box-shadow: 10px 10px 0 $slate-200;
46+
}
47+
}
48+
49+
.card__header,
50+
.card__body {
51+
padding: $card-padding-sm;
52+
53+
@media (min-width: $bp-md) {
54+
padding: $card-padding-sm;
55+
}
56+
}
57+
58+
.card__header {
59+
width: 100%;
60+
background-color: var(--theme-primary-color);
61+
border-bottom: 1px solid $slate-300;
62+
}
63+
64+
.card__header,
65+
.card__header-link {
66+
color: var(--theme-text-color);
67+
}
68+
69+
.card__header-title {
70+
padding-top: 1em;
71+
font-size: rem-calc(18px);
72+
73+
@media (min-width: $bp-md) {
74+
font-size: rem-calc(22px);
75+
}
76+
}
77+
78+
.card__header .svg-icon {
79+
margin-right: rem-calc(4px);
80+
opacity: .6;
81+
}

‎assets/css/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,4 @@
2222
@import "component/footer";
2323
@import "component/hero";
2424
@import "component/section-heading";
25+
@import "component/card";

‎assets/images/icons/icons.svg

Lines changed: 9 additions & 0 deletions
Loading

‎projects.html

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,46 @@
1212
<div class="container">
1313
<h2>Open Source Projects</h2>
1414

15-
<ul>
15+
<ul class="card-grid">
1616
{% assign public_repositories = site.github.public_repositories | where:'archived', false | where:'fork', false | sort: 'stargazers_count' | reverse %}
1717
{% for repository in public_repositories %}
18-
<li>
19-
<h2>
20-
<a href='{{ repository.html_url }}'>{{ repository.name }}</a>
21-
</h2>
22-
<p>{{ repository.description }}</p>
23-
<p>{{ repository.language }}</p>
24-
<p>{{ repository.license.spdx_id }}</p>
25-
</li>
18+
19+
<!-- Assign theme colors based of off the project language -->
20+
<!-- See include below for logic and color.scss for available themes -->
21+
{% include project-color-logic.html %}
22+
23+
<li class="card theme-{{ theme | default: "white" }}">
24+
<header class="card__header">
25+
26+
<!-- Project title -->
27+
<h2 class="card__header-title m-0">
28+
<a class="card__header-link stretched-link" href='{{ repository.html_url }}'>{{ repository.name }}</a>
29+
</h2>
30+
31+
<!-- Project metadata -->
32+
<ul class="list--inline fs-md monospace">
33+
{% if repository.language %}
34+
<li>
35+
<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 }}
36+
</li>
37+
{% endif %}
38+
39+
{% if repository.license.spdx_id %}
40+
<li>
41+
<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 }}
42+
</li>
43+
{% endif %}
44+
</ul>
45+
</header>
46+
47+
<!-- Project description -->
48+
<div class="card__body fs-md monospace">
49+
{% if repository.description %}
50+
<p class="m-0 clamp-3">{{ repository.description }}</p>
51+
{% endif %}
52+
</div>
53+
</li>
54+
2655
{% endfor %}
2756
</ul>
2857
</div>

0 commit comments

Comments
 (0)