From 9b1b245e2f164f8e3284402958de6f43c31d1f7d Mon Sep 17 00:00:00 2001 From: Kyle Gordy Date: Thu, 5 Dec 2019 11:33:01 -0500 Subject: [PATCH] Add blog category navigation / index page support --- _category/core-platform.md | 4 + _category/data-science.md | 4 + _category/ios.md | 4 + _category/web-development.md | 4 + _config.yml | 31 ++--- _layouts/category.html | 16 +++ _layouts/post-index.html | 59 ++++++++++ assets/_sass/base/_layout.scss | 2 +- .../_sass/component/_featured-post-hero.scss | 1 + assets/_sass/component/_post-index.scss | 111 ++++++++++++++++-- blog/index.html | 35 ++---- 11 files changed, 215 insertions(+), 56 deletions(-) create mode 100644 _category/core-platform.md create mode 100644 _category/data-science.md create mode 100644 _category/ios.md create mode 100644 _category/web-development.md create mode 100644 _layouts/category.html create mode 100644 _layouts/post-index.html diff --git a/_category/core-platform.md b/_category/core-platform.md new file mode 100644 index 0000000..db88fc8 --- /dev/null +++ b/_category/core-platform.md @@ -0,0 +1,4 @@ +--- +team: Core Platform +permalink: "/blog/category/core-platform" +--- diff --git a/_category/data-science.md b/_category/data-science.md new file mode 100644 index 0000000..aa400d2 --- /dev/null +++ b/_category/data-science.md @@ -0,0 +1,4 @@ +--- +team: Data Science +permalink: "/blog/category/data-science" +--- diff --git a/_category/ios.md b/_category/ios.md new file mode 100644 index 0000000..0f84531 --- /dev/null +++ b/_category/ios.md @@ -0,0 +1,4 @@ +--- +team: iOS +permalink: "/blog/category/ios" +--- diff --git a/_category/web-development.md b/_category/web-development.md new file mode 100644 index 0000000..2d5c5d3 --- /dev/null +++ b/_category/web-development.md @@ -0,0 +1,4 @@ +--- +team: Web Development +permalink: "/blog/category/web-development" +--- diff --git a/_config.yml b/_config.yml index 42b1cbe..4735496 100644 --- a/_config.yml +++ b/_config.yml @@ -39,22 +39,15 @@ plugins: - jekyll-feed - jekyll-paginate -# Exclude from processing. -# The following items will not be processed, by default. -# Any item listed under the `exclude:` key here will be automatically added to -# the internal "default list". -# -# Excluded items can be processed by explicitly listing the directories or -# their entries' file path in the `include:` list. -# -# exclude: -# - .sass-cache/ -# - .jekyll-cache/ -# - gemfiles/ -# - Gemfile -# - Gemfile.lock -# - node_modules/ -# - vendor/bundle/ -# - vendor/cache/ -# - vendor/gems/ -# - vendor/ruby/ +# Blog categories +collections: + category: + output: true + +defaults: + - + scope: + path: "" + type: category + values: + layout: "category" diff --git a/_layouts/category.html b/_layouts/category.html new file mode 100644 index 0000000..db47d5c --- /dev/null +++ b/_layouts/category.html @@ -0,0 +1,16 @@ +--- +layout: post-index +title: page.team +--- + + diff --git a/_layouts/post-index.html b/_layouts/post-index.html new file mode 100644 index 0000000..a359617 --- /dev/null +++ b/_layouts/post-index.html @@ -0,0 +1,59 @@ +--- +layout: default +--- + + +{% include featured-post-hero.html %} + +
+ + + + +
+ + +
+ {% assign catagory-title = 'Latest' %} + {% if page.team %} + {% assign catagory-title = page.team %} + {% endif %} +

{{catagory-title}} Posts

+
+ + +
+ {{ content }} +
+ + + {% include pagination.html %} +
+ +
diff --git a/assets/_sass/base/_layout.scss b/assets/_sass/base/_layout.scss index 88058b9..bcd2a0b 100644 --- a/assets/_sass/base/_layout.scss +++ b/assets/_sass/base/_layout.scss @@ -4,7 +4,7 @@ // Container padding $cp-sm: rem-calc(15px); -$cp-md: 5%; +$cp-md: 5vw; $cp-lg: rem-calc(75px); $cp-offset-lg: 12%; $cp-offset-xl: rem-calc(175px); diff --git a/assets/_sass/component/_featured-post-hero.scss b/assets/_sass/component/_featured-post-hero.scss index a782650..12bacfc 100644 --- a/assets/_sass/component/_featured-post-hero.scss +++ b/assets/_sass/component/_featured-post-hero.scss @@ -56,6 +56,7 @@ .feat-post__separator { @extend .fancy-line; + margin: 2em auto; width: 100%; // Vertical position line diff --git a/assets/_sass/component/_post-index.scss b/assets/_sass/component/_post-index.scss index 8d6c3cb..b997700 100644 --- a/assets/_sass/component/_post-index.scss +++ b/assets/_sass/component/_post-index.scss @@ -1,22 +1,113 @@ +//////////////////// +// Variables +//////////////////// + +$index-nav-gradient-sm: linear-gradient(180deg, $slate-700 0%, $slate-800 100%); +$index-nav-gradient-lg: linear-gradient(180deg, $slate-700 0px, $slate-800 800px); + +//////////////////// +// Layout +//////////////////// + .post-index { @media (min-width: $bp-md) { display: grid; - grid-template-columns: 1fr 2fr; + grid-template-columns: auto 1fr; + grid-template-areas: + "header body"; + } + + @media (min-width: $bp-xl) { + grid-template-columns: 1fr minmax(auto, ($max-width * .25)) minmax(0, ($max-width * .75)) 1fr; + grid-template-areas: + ". header body ."; + // Hack to fake header gradient bleed off the left side + background-image: $index-nav-gradient-lg; + background-repeat: no-repeat; + background-size: 50% 100%; } } -.post-index__header { +.post-index__nav, +.post-index__body { + margin: 0; @extend .section-container; - display: none; - - @media (min-width: $bp-md) { - display: block; - margin: 0; - background-image: linear-gradient(180deg, $slate-700 0%, $slate-800 100%); - } +} +.post-index__nav { + grid-area: header; } .post-index__body { - @extend .section-container; + grid-area: body; background-color: $white; + + @media (min-width: $bp-md) { + min-height: 85vh; + } +} + +//////////////////// +// Navigation Styles +//////////////////// + +.post-index__nav { + background-image: $index-nav-gradient-lg; + + // Mobile only tweaks + @media (max-width: $bp-md - 1px) { + padding-top: rem-calc(20px); + padding-bottom: rem-calc(15px); + background-image: $index-nav-gradient-sm; + } +} + +.post-index__nav-list { + display: grid; + grid-gap: 0 rem-calc(10px); + grid-template-columns: 1fr 1fr; + margin-left: 1em; + font-size: rem-calc(14px); + color: rgba($white, .75); + @extend .monospace; + + @media (min-width: $bp-md) { + display: block; + margin-left: 0; + font-size: rem-calc(18px); + } +} + +.post-index__nav-list-item { + margin: 0 0 .5em 0; +} + +// Active link styles +.post-index__nav-list .active { + position: relative; + color: $white; + + // Indicator Dot + &::before { + content: ''; + display: block; + position: absolute; + top: 50%; + left: -.65em; + transform: translate(-50%, -50%); + width: 5px; + height: 5px; + background-color: $teal; + border-radius: 100%; + z-index: 2; + } +} + +// Link styles +.post-index__nav-link { + @extend .link-text-color; + + &:hover, + &:focus { + color: $white; + } } diff --git a/blog/index.html b/blog/index.html index 61eb1a1..0e705fd 100644 --- a/blog/index.html +++ b/blog/index.html @@ -1,32 +1,15 @@ --- -layout: default +layout: post-index title: Blog --- - -{% include featured-post-hero.html %} +{%- if site.posts.size > 0 -%} + +{%- endif -%}