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 -%}