From 356c465f5de0619c569016bcbc008fd489bc3c1c Mon Sep 17 00:00:00 2001 From: Kyle Gordy Date: Sun, 24 Nov 2019 22:59:45 -0500 Subject: [PATCH] Add featured post hero component --- _includes/featured-post-hero.html | 101 ++++++++++++++++++ _includes/logo-texture-solid.html | 1 + _includes/post-hero.html | 2 + _layouts/home.html | 6 +- ...0-24-dependency-injection-with-weaver-1.md | 1 + ...dependency-injection-with-weaver-part-2.md | 1 + _posts/2019-08-28-real-time-data-platform.md | 1 + assets/_sass/base/_typography.scss | 4 +- .../_sass/component/_featured-post-hero.scss | 80 ++++++++++++++ assets/_sass/component/_hero.scss | 5 +- assets/_sass/component/_post-content.scss | 35 +----- assets/_sass/component/_post-list.scss | 6 +- assets/_sass/component/_section-split.scss | 4 - assets/_sass/utilities/_text.scss | 45 ++++++++ assets/css/main.scss | 3 +- blog.html | 5 +- 16 files changed, 252 insertions(+), 48 deletions(-) create mode 100644 _includes/featured-post-hero.html create mode 100644 _includes/logo-texture-solid.html create mode 100644 assets/_sass/component/_featured-post-hero.scss diff --git a/_includes/featured-post-hero.html b/_includes/featured-post-hero.html new file mode 100644 index 0000000..7a7007f --- /dev/null +++ b/_includes/featured-post-hero.html @@ -0,0 +1,101 @@ + {% assign hero = page.hero %} +
+
+
+ +
+

Featured Post

+ + {% assign featured = site.tags.featured | sort: 'date' | reverse %} + {% for post in featured limit: 1 %} +

+ + {{ post.title | escape }} + +

+ +
    + + {%- if post.author -%} +
  • + Author
    + +
    • + {%- endif -%} + + + {%- if post.date -%} +
  • + Published
    + +
    • + {%- endif -%} + + {%- if post.team -%} + +
  • + Category
    + {{ post.team }} +
    • + {%- endif -%} +
+ {% endfor %} + +
+
+ +
+

Featured Series

+
    + {% assign featured-series = site.tags.featured-series | sort: 'date' %} + {% for post in featured-series limit: 2 %} +
  • + + +

    + + {{ post.title | escape }} + +

    + + + + + {%- if site.data.authors[post.author] -%} + {{ site.data.authors[post.author].name}} + {%- else -%} + {{ post.author }} + {%- endif -%} + + +
    • + {% endfor %} +
+ + + {% unless page.url contains "blog" %} + + All Posts + + + {% endunless %} +
+ +
+
+ {% include logo-texture-solid.html %} +
diff --git a/_includes/logo-texture-solid.html b/_includes/logo-texture-solid.html new file mode 100644 index 0000000..84733bb --- /dev/null +++ b/_includes/logo-texture-solid.html @@ -0,0 +1 @@ + diff --git a/_includes/post-hero.html b/_includes/post-hero.html index d3ea66f..9760fdb 100644 --- a/_includes/post-hero.html +++ b/_includes/post-hero.html @@ -26,6 +26,7 @@ {%- endif -%} + {%- if page.date -%}
  • Published
    • + {%- endif -%} {%- if page.team -%} diff --git a/_layouts/home.html b/_layouts/home.html index dc13602..b92aa95 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -2,7 +2,10 @@ layout: default --- + +{% include featured-post-hero.html %} +
    {% include project-list.html limit="3" %} @@ -12,7 +15,8 @@ layout: default
    -
    + +

    We’re Hiring

    diff --git a/_posts/2018-10-24-dependency-injection-with-weaver-1.md b/_posts/2018-10-24-dependency-injection-with-weaver-1.md index a83ff6b..043be35 100644 --- a/_posts/2018-10-24-dependency-injection-with-weaver-1.md +++ b/_posts/2018-10-24-dependency-injection-with-weaver-1.md @@ -5,6 +5,7 @@ author: theo tags: - swift - weaver +- featured-series team: iOS --- diff --git a/_posts/2019-01-30-dependency-injection-with-weaver-part-2.md b/_posts/2019-01-30-dependency-injection-with-weaver-part-2.md index 0994d4f..38c85e5 100644 --- a/_posts/2019-01-30-dependency-injection-with-weaver-part-2.md +++ b/_posts/2019-01-30-dependency-injection-with-weaver-part-2.md @@ -5,6 +5,7 @@ author: theo tags: - swift - weaver +- featured-series team: iOS --- diff --git a/_posts/2019-08-28-real-time-data-platform.md b/_posts/2019-08-28-real-time-data-platform.md index 6a0286a..ff725a2 100644 --- a/_posts/2019-08-28-real-time-data-platform.md +++ b/_posts/2019-08-28-real-time-data-platform.md @@ -5,6 +5,7 @@ author: rtyler tags: - kafka - aws +- featured team: Core Platform --- diff --git a/assets/_sass/base/_typography.scss b/assets/_sass/base/_typography.scss index d18e0f6..0e7ec76 100644 --- a/assets/_sass/base/_typography.scss +++ b/assets/_sass/base/_typography.scss @@ -44,7 +44,8 @@ body { // body text reset p, address, -ul { +ul, +ol { margin: 0 0 1em 0; font-style: normal; } @@ -62,6 +63,7 @@ h6 { font-weight: 700; line-height: 1.25em; margin: 0 0 .5em 0; + letter-spacing: -0.005em; } h1, diff --git a/assets/_sass/component/_featured-post-hero.scss b/assets/_sass/component/_featured-post-hero.scss new file mode 100644 index 0000000..a782650 --- /dev/null +++ b/assets/_sass/component/_featured-post-hero.scss @@ -0,0 +1,80 @@ +//////////////////// +// Variables +//////////////////// + +.feat-post { + --hero-margin: 40px; + --hero-gap: 0; + + @media (min-width: 1200px) { + --hero-margin: 75px; + --hero-gap: 100px; + } + +} + +//////////////////// +// Featured Post +//////////////////// + +.feat-post { + position: relative; + padding: var(--hero-margin) 0; + background-color: $white; + background-image: linear-gradient(180deg, $white 0%, $slate-100 100%); + overflow: hidden; + border-bottom: 1px solid $border-color; + z-index: 2; +} + +.feat-post .logo-texture-solid { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + opacity: .35; + z-index: -1; + + path { + fill: $slate-200; + } +} + +.feat-post__container { + position: relative; + display: grid; + grid-gap: var(--hero-gap); + + @media (min-width: 1200px) { + display: inline-grid; + grid-template-columns: auto 1fr; + align-items: center; + } +} + +.feat-post__separator { + @extend .fancy-line; + width: 100%; + + // Vertical position line + @media (min-width: 1200px) { + position: absolute; + top: 50%; + right: -50px; + margin: 0; + transform: translate(0,-50%); + width: 1px; + height: rem-calc(285px); + } +} + +//////////////////// +// Post List Tweaks +//////////////////// + +.feat-post .post-list__item:last-child { + padding-bottom: 0; + border-bottom: none; +} diff --git a/assets/_sass/component/_hero.scss b/assets/_sass/component/_hero.scss index efc052f..c8ba7b0 100644 --- a/assets/_sass/component/_hero.scss +++ b/assets/_sass/component/_hero.scss @@ -20,7 +20,6 @@ .hero { position: relative; - // margin-bottom: var(--hero-margin); padding: var(--hero-margin) 0; background-color: var(--theme-primary-color); background-image: linear-gradient(180deg, var(--theme-primary-color) 0%, var(--theme-secondary-color) 100%); @@ -29,7 +28,7 @@ z-index: 2; } -.logo-texture { +.hero .logo-texture { position: absolute; top: 0; left: 0; @@ -87,7 +86,7 @@ grid-template-areas: "author author author" "published category ."; - margin: rem-calc(20px) 0 0 0; + margin: .5em 0 0 0; font-size: rem-calc(14px); @extend .list--plain; diff --git a/assets/_sass/component/_post-content.scss b/assets/_sass/component/_post-content.scss index ac05079..31b04bc 100644 --- a/assets/_sass/component/_post-content.scss +++ b/assets/_sass/component/_post-content.scss @@ -100,38 +100,5 @@ //////////////////// .post-content hr { - position: relative; - display: block; - margin: 2em auto; - width: 250px; - height: 1px; - border: none; - - &:before, - &:after { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - } - - // Line - &:before { - content: ''; - width: 100%; - height: 100%; - background-color: $border-color; - } - - // Dot - &:after { - content: ''; - width: 7px; - height: 7px; - background-color: $white; - border-radius: 1px; - border: 1px solid $border-color; - box-shadow: 0 0 0 2px $white; - z-index: 2; - } + @extend .fancy-line; } diff --git a/assets/_sass/component/_post-list.scss b/assets/_sass/component/_post-list.scss index b27b0fe..41ac371 100644 --- a/assets/_sass/component/_post-list.scss +++ b/assets/_sass/component/_post-list.scss @@ -7,16 +7,16 @@ } .post-list__item { - padding: 15px 0; + padding: rem-calc(15px) 0; border-bottom: 1px solid $border-color; @media (min-width: $bp-md) { - padding-right: rem-calc(40px); + padding: rem-calc(20px 40px 20px 0); } } .post-list__heading { - margin-bottom: rem-calc(5px); + margin-bottom: rem-calc(2px); } .post-list__date, diff --git a/assets/_sass/component/_section-split.scss b/assets/_sass/component/_section-split.scss index d894975..debdfb4 100644 --- a/assets/_sass/component/_section-split.scss +++ b/assets/_sass/component/_section-split.scss @@ -19,7 +19,3 @@ .section-split-align-top { align-items: flex-start; } - -.section-split-reverse { - -} diff --git a/assets/_sass/utilities/_text.scss b/assets/_sass/utilities/_text.scss index 8cf2eda..896ff45 100644 --- a/assets/_sass/utilities/_text.scss +++ b/assets/_sass/utilities/_text.scss @@ -75,6 +75,10 @@ max-width: rem-calc(550px); } +.text-length-sm { + max-width: rem-calc(450px); +} + //////////////////// // Truncation //////////////////// @@ -112,3 +116,44 @@ margin: 0; padding: 0; } + +//////////////////// +// Horizontal Rule +//////////////////// + +.fancy-line { + position: relative; + display: block; + margin: 3em auto; + width: 250px; + height: 1px; + border: none; + + &:before, + &:after { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + } + + // Line + &:before { + content: ''; + width: 100%; + height: 100%; + background-color: $border-color; + } + + // Dot + &:after { + content: ''; + width: 7px; + height: 7px; + background-color: $white; + border-radius: 1px; + border: 1px solid $border-color; + box-shadow: 0 0 0 2px $white; + z-index: 2; + } +} diff --git a/assets/css/main.scss b/assets/css/main.scss index 2b55b4d..46683f0 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -15,11 +15,11 @@ @import "base/layout"; @import "base/typography"; +@import "utilities/borders"; @import "utilities/text"; @import "utilities/links"; @import "utilities/visibility"; @import "utilities/spacing"; -@import "utilities/borders"; @import "utilities/images"; @import "utilities/position"; @@ -40,6 +40,7 @@ @import "component/post-list"; @import "component/post-index"; @import "component/post-content"; +@import "component/featured-post-hero"; // Import the syntax highlighting theme, see: // https://richleland.github.io/pygments-css/ diff --git a/blog.html b/blog.html index 7a7850e..95ccd46 100644 --- a/blog.html +++ b/blog.html @@ -4,13 +4,16 @@ title: Blog permalink: /blog/ --- + +{% include featured-post-hero.html %} +
    -
    +
    {%- if site.posts.size > 0 -%}