Add blog category navigation / index page support
This commit is contained in:
parent
7dfcb64930
commit
9b1b245e2f
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
team: Core Platform
|
||||||
|
permalink: "/blog/category/core-platform"
|
||||||
|
---
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
team: Data Science
|
||||||
|
permalink: "/blog/category/data-science"
|
||||||
|
---
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
team: iOS
|
||||||
|
permalink: "/blog/category/ios"
|
||||||
|
---
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
team: Web Development
|
||||||
|
permalink: "/blog/category/web-development"
|
||||||
|
---
|
31
_config.yml
31
_config.yml
|
@ -39,22 +39,15 @@ plugins:
|
||||||
- jekyll-feed
|
- jekyll-feed
|
||||||
- jekyll-paginate
|
- jekyll-paginate
|
||||||
|
|
||||||
# Exclude from processing.
|
# Blog categories
|
||||||
# The following items will not be processed, by default.
|
collections:
|
||||||
# Any item listed under the `exclude:` key here will be automatically added to
|
category:
|
||||||
# the internal "default list".
|
output: true
|
||||||
#
|
|
||||||
# Excluded items can be processed by explicitly listing the directories or
|
defaults:
|
||||||
# their entries' file path in the `include:` list.
|
-
|
||||||
#
|
scope:
|
||||||
# exclude:
|
path: ""
|
||||||
# - .sass-cache/
|
type: category
|
||||||
# - .jekyll-cache/
|
values:
|
||||||
# - gemfiles/
|
layout: "category"
|
||||||
# - Gemfile
|
|
||||||
# - Gemfile.lock
|
|
||||||
# - node_modules/
|
|
||||||
# - vendor/bundle/
|
|
||||||
# - vendor/cache/
|
|
||||||
# - vendor/gems/
|
|
||||||
# - vendor/ruby/
|
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
---
|
||||||
|
layout: post-index
|
||||||
|
title: page.team
|
||||||
|
---
|
||||||
|
|
||||||
|
<ul class="post-list text-length-lg">
|
||||||
|
|
||||||
|
<!-- Loop though posts -->
|
||||||
|
{% for post in site.posts %}
|
||||||
|
{% capture team %}{{post.team}}{% endcapture %}
|
||||||
|
{% if team == page.team %}
|
||||||
|
{% include post-list-item.html %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
</ul>
|
|
@ -0,0 +1,59 @@
|
||||||
|
---
|
||||||
|
layout: default
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- Featured post hero -->
|
||||||
|
{% include featured-post-hero.html %}
|
||||||
|
|
||||||
|
<div class="post-index" id="{{ site.post-id | remove: "#" }}">
|
||||||
|
|
||||||
|
<!-- Post catagory nav -->
|
||||||
|
<nav class="post-index__nav text-white" aria-label="Blog Categories">
|
||||||
|
|
||||||
|
<ul class="post-index__nav-list list--plain">
|
||||||
|
|
||||||
|
{% unless page.url contains "category" %}
|
||||||
|
{% assign class = 'active' %}
|
||||||
|
{% endunless %}
|
||||||
|
|
||||||
|
<!-- Blog home -->
|
||||||
|
<li class="post-index__nav-list-item {{ class }}">
|
||||||
|
<a class="post-index__nav-link" href="{% link blog/index.html %}{{ site.post-id }}">Latest</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Catagory loop -->
|
||||||
|
{% for category in site.category %}
|
||||||
|
{% assign class = nil %}
|
||||||
|
{% if page.url contains category.url or page.url contains category.title or page.url == "/blog/index.html" %}
|
||||||
|
{% assign class = 'active' %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<li class="post-index__nav-list-item {{ class }}">
|
||||||
|
<a class="post-index__nav-link" href="{{ category.url }}{{ site.post-id }}">{{ category.team }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="post-index__body">
|
||||||
|
|
||||||
|
<!-- Post catagory title -->
|
||||||
|
<div class="pb-2 border-bottom text-length-lg">
|
||||||
|
{% assign catagory-title = 'Latest' %}
|
||||||
|
{% if page.team %}
|
||||||
|
{% assign catagory-title = page.team %}
|
||||||
|
{% endif %}
|
||||||
|
<h1 class="section-heading text-teal">{{catagory-title}} Posts</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="text-length-lg">
|
||||||
|
{{ content }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
{% include pagination.html %}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
// Container padding
|
// Container padding
|
||||||
$cp-sm: rem-calc(15px);
|
$cp-sm: rem-calc(15px);
|
||||||
$cp-md: 5%;
|
$cp-md: 5vw;
|
||||||
$cp-lg: rem-calc(75px);
|
$cp-lg: rem-calc(75px);
|
||||||
$cp-offset-lg: 12%;
|
$cp-offset-lg: 12%;
|
||||||
$cp-offset-xl: rem-calc(175px);
|
$cp-offset-xl: rem-calc(175px);
|
||||||
|
|
|
@ -56,6 +56,7 @@
|
||||||
|
|
||||||
.feat-post__separator {
|
.feat-post__separator {
|
||||||
@extend .fancy-line;
|
@extend .fancy-line;
|
||||||
|
margin: 2em auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
// Vertical position line
|
// Vertical position line
|
||||||
|
|
|
@ -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 {
|
.post-index {
|
||||||
@media (min-width: $bp-md) {
|
@media (min-width: $bp-md) {
|
||||||
display: grid;
|
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;
|
@extend .section-container;
|
||||||
display: none;
|
}
|
||||||
|
.post-index__nav {
|
||||||
@media (min-width: $bp-md) {
|
grid-area: header;
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
background-image: linear-gradient(180deg, $slate-700 0%, $slate-800 100%);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-index__body {
|
.post-index__body {
|
||||||
@extend .section-container;
|
grid-area: body;
|
||||||
background-color: $white;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,32 +1,15 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: post-index
|
||||||
title: Blog
|
title: Blog
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- Featured post hero -->
|
{%- if site.posts.size > 0 -%}
|
||||||
{% include featured-post-hero.html %}
|
<ul class="post-list text-length-lg">
|
||||||
|
|
||||||
<div class="post-index">
|
<!-- Loop though posts -->
|
||||||
|
{%- for post in paginator.posts -%}
|
||||||
|
{% include post-list-item.html %}
|
||||||
|
{%- endfor -%}
|
||||||
|
|
||||||
<div class="post-index__header">
|
</ul>
|
||||||
<!-- future category nav will live here -->
|
{%- endif -%}
|
||||||
</div>
|
|
||||||
|
|
||||||
<section id="all-posts" class="post-index__body">
|
|
||||||
<!-- Loop though posts -->
|
|
||||||
{%- if site.posts.size > 0 -%}
|
|
||||||
<ul class="post-list text-length-md">
|
|
||||||
|
|
||||||
<!-- Post -->
|
|
||||||
{%- for post in paginator.posts -%}
|
|
||||||
{% include post-list-item.html %}
|
|
||||||
{%- endfor -%}
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
{%- endif -%}
|
|
||||||
|
|
||||||
<!-- pagination -->
|
|
||||||
{% include pagination.html %}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
Loading…
Reference in New Issue