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
+---
+
+
+
+
+
+
+
+
+
+
+ {% 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 -%}
+
-
+
+ {%- for post in paginator.posts -%}
+ {% include post-list-item.html %}
+ {%- endfor -%}
-
-
-
-
- {%- if site.posts.size > 0 -%}
-
-
-
- {%- for post in paginator.posts -%}
- {% include post-list-item.html %}
- {%- endfor -%}
-
-
- {%- endif -%}
-
-
- {% include pagination.html %}
-
-
-
+
+{%- endif -%}