From b4d70ce69d081fe9795cb8643fc48aab01e9989a Mon Sep 17 00:00:00 2001 From: Kyle Gordy Date: Tue, 19 Nov 2019 15:02:41 -0500 Subject: [PATCH] Add card component for projects page --- _includes/project-color-logic.html | 21 ++++++++ assets/_sass/base/_colors.scss | 28 +++++++++++ assets/_sass/base/_helpers.scss | 27 +++++++++- assets/_sass/base/_layout.scss | 6 ++- assets/_sass/component/_card.scss | 81 ++++++++++++++++++++++++++++++ assets/css/main.scss | 1 + assets/images/icons/icons.svg | 9 ++++ projects.html | 47 +++++++++++++---- 8 files changed, 209 insertions(+), 11 deletions(-) create mode 100644 _includes/project-color-logic.html create mode 100644 assets/_sass/component/_card.scss create mode 100644 assets/images/icons/icons.svg diff --git a/_includes/project-color-logic.html b/_includes/project-color-logic.html new file mode 100644 index 0000000..522dff8 --- /dev/null +++ b/_includes/project-color-logic.html @@ -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 %} diff --git a/assets/_sass/base/_colors.scss b/assets/_sass/base/_colors.scss index 3f8d89b..b2247e2 100644 --- a/assets/_sass/base/_colors.scss +++ b/assets/_sass/base/_colors.scss @@ -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); +} diff --git a/assets/_sass/base/_helpers.scss b/assets/_sass/base/_helpers.scss index f6091f5..db259e2 100644 --- a/assets/_sass/base/_helpers.scss +++ b/assets/_sass/base/_helpers.scss @@ -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; } diff --git a/assets/_sass/base/_layout.scss b/assets/_sass/base/_layout.scss index b35df58..0b1d928 100644 --- a/assets/_sass/base/_layout.scss +++ b/assets/_sass/base/_layout.scss @@ -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); + } } diff --git a/assets/_sass/component/_card.scss b/assets/_sass/component/_card.scss new file mode 100644 index 0000000..d9bdb49 --- /dev/null +++ b/assets/_sass/component/_card.scss @@ -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; +} diff --git a/assets/css/main.scss b/assets/css/main.scss index 5e9fd96..7030614 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -22,3 +22,4 @@ @import "component/footer"; @import "component/hero"; @import "component/section-heading"; +@import "component/card"; diff --git a/assets/images/icons/icons.svg b/assets/images/icons/icons.svg new file mode 100644 index 0000000..2231788 --- /dev/null +++ b/assets/images/icons/icons.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/projects.html b/projects.html index ff34205..468677b 100644 --- a/projects.html +++ b/projects.html @@ -12,17 +12,46 @@ hero:

Open Source Projects

-