First pass at styling blog posts
This commit is contained in:
parent
f085e36102
commit
03ab9c4b31
|
@ -1,10 +1,8 @@
|
||||||
{% assign hero = page.hero %}
|
{% assign hero = page.hero %}
|
||||||
<section class="hero theme-{{ hero.theme | default: "white" }}">
|
<section class="hero theme-{{ hero.theme | default: "white" }}">
|
||||||
<div class="hero__container container container-offset">
|
<div class="hero__container container container-offset">
|
||||||
|
|
||||||
{% assign hero = page.hero %}
|
|
||||||
<header class="hero__header">
|
<header class="hero__header">
|
||||||
|
|
||||||
{% if hero.label %}
|
{% if hero.label %}
|
||||||
<h1 class="hero__section-heading">{{ hero.label }}</h1>
|
<h1 class="hero__section-heading">{{ hero.label }}</h1>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
<section class="hero theme-{{ hero.theme | default: "midnight" }}">
|
||||||
|
<div class="hero__container container container-offset">
|
||||||
|
|
||||||
|
<header class="hero__header">
|
||||||
|
|
||||||
|
<!-- Post Title -->
|
||||||
|
<h1 class="hero__title" itemprop="name headline">{{ page.title | escape }}</h1>
|
||||||
|
|
||||||
|
<!-- Post Metadata -->
|
||||||
|
<ul class="hero__meta">
|
||||||
|
|
||||||
|
<!-- Post Author -->
|
||||||
|
{%- if page.author -%}
|
||||||
|
<li class="hero__meta-item author">
|
||||||
|
<strong>Author</strong><br>
|
||||||
|
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||||||
|
<span itemprop="name">
|
||||||
|
{%- if site.data.authors[page.author] -%}
|
||||||
|
{{ site.data.authors[page.author].name}}
|
||||||
|
{%- else -%}
|
||||||
|
{{ page.author }}
|
||||||
|
{%- endif -%}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
<!-- Post Date -->
|
||||||
|
<li class="hero__meta-item published">
|
||||||
|
<strong>Published</strong><br>
|
||||||
|
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
|
||||||
|
{%- assign date_format = site.date_format -%}
|
||||||
|
{{ page.date | date: date_format }}
|
||||||
|
</time>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{%- if page.team -%}
|
||||||
|
<!-- Team Info -->
|
||||||
|
<li class="hero__meta-item category">
|
||||||
|
<strong>Category</strong><br>
|
||||||
|
<span>{{ page.team }}</span>
|
||||||
|
</li>
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{% include logo-texture.html %}
|
||||||
|
</section>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<div class="post__sidebar monospace">
|
||||||
|
<!-- Tags -->
|
||||||
|
{%- if page.tags -%}
|
||||||
|
<ul class="list--inline mb-2 pl-0">
|
||||||
|
<li><strong>Tags: </strong></li>
|
||||||
|
{% for tag in page.tags %}
|
||||||
|
<li>{{ tag }}</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
<!-- Sharing / RSS -->
|
||||||
|
<ul class="list--inline mb-4 pl-0">
|
||||||
|
<li>
|
||||||
|
<strong>Subscribe: </strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="no-underline" href="{{ "/feed.xml" | relative_url }}">
|
||||||
|
<svg class="svg-icon" aria-label="Subscribe via RSS"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#rss' | relative_url }}"></use></svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
|
@ -0,0 +1,20 @@
|
||||||
|
{%- if page.team and site.data.teams[page.team] -%}
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<h5 class="mb-3">Related Jobs
|
||||||
|
<a href="{% link careers.html %}#open-positions" class="float-right monospace fs-md fw-normal no-underline">
|
||||||
|
View All <span class="visually-hidden">Jobs</span>
|
||||||
|
<svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
|
||||||
|
</a>
|
||||||
|
</h5>
|
||||||
|
<ul class="card-grid card-grid-sm" id="jobs"></ul>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
<!--
|
||||||
|
window.onload = () =>{
|
||||||
|
renderJobs(document.getElementById('jobs'), "{{ site.data.teams[page.team].lever }}", 3);
|
||||||
|
};
|
||||||
|
-->
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
{%- endif -%}
|
|
@ -3,45 +3,27 @@ layout: default
|
||||||
---
|
---
|
||||||
<article itemscope itemtype="http://schema.org/BlogPosting">
|
<article itemscope itemtype="http://schema.org/BlogPosting">
|
||||||
|
|
||||||
<header>
|
<!-- Post hero -->
|
||||||
<h1 itemprop="name headline">{{ page.title | escape }}</h1>
|
{% include post-hero.html %}
|
||||||
|
|
||||||
<p>
|
<div class="section-container" itemprop="articleBody">
|
||||||
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
|
|
||||||
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
|
|
||||||
{{ page.date | date: date_format }}
|
|
||||||
</time>
|
|
||||||
|
|
||||||
{%- if page.author -%}
|
<!-- Post sidebar -->
|
||||||
• <span itemprop="author" itemscope itemtype="http://schema.org/Person">
|
{% include post-sidebar.html %}
|
||||||
<span itemprop="name">
|
|
||||||
{%- if site.data.authors[page.author] -%}
|
|
||||||
{{ site.data.authors[page.author].name}}
|
|
||||||
{%- else -%}
|
|
||||||
{{ page.author }}
|
|
||||||
{%- endif -%}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
{%- endif -%}
|
|
||||||
</p>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<ul class="card-grid card-grid-sm" id="jobs">
|
<div class="text-length-lg">
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div itemprop="articleBody">
|
<!-- Post content -->
|
||||||
{{ content }}
|
<div class="post-content">
|
||||||
|
{{ content }}
|
||||||
|
<!-- Post separator line -->
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Related jobs -->
|
||||||
|
{% include related-jobs.html %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="{{ page.url | relative_url }}" hidden></a>
|
<a href="{{ page.url | relative_url }}" hidden></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
{%- if page.team and site.data.teams[page.team] -%}
|
|
||||||
<script type="text/javascript">
|
|
||||||
<!--
|
|
||||||
window.onload = () =>{
|
|
||||||
renderJobs(document.getElementById('jobs'), "{{ site.data.teams[page.team].lever }}", 3);
|
|
||||||
};
|
|
||||||
-->
|
|
||||||
</script>
|
|
||||||
{%- endif -%}
|
|
||||||
|
|
|
@ -49,14 +49,6 @@ ul {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body-lg {
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
@media (min-width: $bp-md) {
|
|
||||||
font-size: rem-calc(18px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
////////////////////
|
////////////////////
|
||||||
// Headings
|
// Headings
|
||||||
////////////////////
|
////////////////////
|
||||||
|
@ -69,7 +61,7 @@ h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1.25em;
|
line-height: 1.25em;
|
||||||
margin: 0 0 0.3em 0;
|
margin: 0 0 .5em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
|
|
|
@ -5,10 +5,12 @@
|
||||||
:root {
|
:root {
|
||||||
--hero-margin: 60px;
|
--hero-margin: 60px;
|
||||||
--hero-overlap: -45px;
|
--hero-overlap: -45px;
|
||||||
|
--hero-meta-padding: 15px;
|
||||||
|
|
||||||
@media (min-width: $bp-lg) {
|
@media (min-width: $bp-lg) {
|
||||||
--hero-margin: 100px;
|
--hero-margin: 100px;
|
||||||
--hero-overlap: -75px;
|
--hero-overlap: -75px;
|
||||||
|
--hero-meta-padding: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -73,3 +75,48 @@
|
||||||
margin-top: var(--hero-overlap);
|
margin-top: var(--hero-overlap);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
////////////////////
|
||||||
|
// Hero Meta List
|
||||||
|
////////////////////
|
||||||
|
|
||||||
|
.hero__meta {
|
||||||
|
display: inline-grid;
|
||||||
|
grid-gap: var(--hero-meta-padding);
|
||||||
|
grid-template-columns: auto auto auto;
|
||||||
|
grid-template-areas:
|
||||||
|
"author author author"
|
||||||
|
"published category .";
|
||||||
|
margin: rem-calc(20px) 0 0 0;
|
||||||
|
font-size: rem-calc(14px);
|
||||||
|
@extend .list--plain;
|
||||||
|
|
||||||
|
@media (min-width: $bp-sm) {
|
||||||
|
font-size: rem-calc(16px);
|
||||||
|
grid-template-areas: "author published category";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__meta-item {
|
||||||
|
@extend .monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Item Borders
|
||||||
|
.hero__meta-item {
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-left: var(--hero-meta-padding);
|
||||||
|
border-left: 2px solid var(--theme-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $bp-sm) {
|
||||||
|
&:not(:first-child) {
|
||||||
|
padding-left: var(--hero-meta-padding);
|
||||||
|
border-left: 2px solid var(--theme-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__meta-item.author { grid-area: author }
|
||||||
|
.hero__meta-item.published { grid-area: published }
|
||||||
|
.hero__meta-item.category { grid-area: category }
|
||||||
|
|
|
@ -0,0 +1,137 @@
|
||||||
|
////////////////////
|
||||||
|
// Post Typography
|
||||||
|
////////////////////
|
||||||
|
|
||||||
|
// Bump of base font size for a comfortable reading experience
|
||||||
|
.post-content {
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
@media (min-width: $bp-sm) {
|
||||||
|
font-size: rem-calc(18px);
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $bp-lg) {
|
||||||
|
font-size: rem-calc(20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Links
|
||||||
|
// Make sure all links have visible underlines
|
||||||
|
.post-content a {
|
||||||
|
@extend.link-inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Unordered list
|
||||||
|
.post-content ul,
|
||||||
|
.post-content ol {
|
||||||
|
padding-left: 1.5em;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Blockquote
|
||||||
|
.post-content blockquote {
|
||||||
|
margin: 0 0 2em 0;
|
||||||
|
padding: 1.25em;
|
||||||
|
font-size: .85em;
|
||||||
|
line-height: 1.7;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
@extend .monospace;
|
||||||
|
@extend .rounded;
|
||||||
|
@extend .shadow;
|
||||||
|
|
||||||
|
p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
////////////////////
|
||||||
|
// Post Images
|
||||||
|
////////////////////
|
||||||
|
|
||||||
|
.post-content img {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 1.5em auto;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
@extend .shadow;
|
||||||
|
@extend .rounded;
|
||||||
|
}
|
||||||
|
|
||||||
|
////////////////////
|
||||||
|
// Code Highlighter
|
||||||
|
////////////////////
|
||||||
|
|
||||||
|
// Inline code
|
||||||
|
.post-content code.highlighter-rouge {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 .25em;
|
||||||
|
padding: 0 .5em;
|
||||||
|
font-size: .75em;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: $border-radius-sm;
|
||||||
|
@extend .monospace;
|
||||||
|
@extend .shadow-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Full width code boxes
|
||||||
|
.post-content div.highlight {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
padding: 1em;
|
||||||
|
font-size: .75em;
|
||||||
|
line-height: 1.5;
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch; // for iOS momentum scrolling
|
||||||
|
@extend .rounded;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
////////////////////
|
||||||
|
// Horizontal Rule
|
||||||
|
////////////////////
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -21,10 +21,14 @@
|
||||||
|
|
||||||
.post-list__date,
|
.post-list__date,
|
||||||
.post-list__author {
|
.post-list__author {
|
||||||
font-size: rem-calc(14px);
|
font-size: rem-calc(13px);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@extend .monospace;
|
@extend .monospace;
|
||||||
@extend .text-muted;
|
@extend .text-muted;
|
||||||
|
|
||||||
|
@media (min-width: $bp-md) {
|
||||||
|
font-size: rem-calc(14px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Bullet before post date
|
// Bullet before post date
|
||||||
|
|
|
@ -32,6 +32,7 @@ $border-color: $slate-300;
|
||||||
// Border Radius
|
// Border Radius
|
||||||
////////////////////
|
////////////////////
|
||||||
|
|
||||||
|
$border-radius-sm: 3px;
|
||||||
$border-radius: 6px;
|
$border-radius: 6px;
|
||||||
|
|
||||||
.rounded {
|
.rounded {
|
||||||
|
|
|
@ -26,3 +26,17 @@
|
||||||
.logo__wordmark { fill: $white; }
|
.logo__wordmark { fill: $white; }
|
||||||
.logo__subhead { fill: rgba($white, .70) }
|
.logo__subhead { fill: rgba($white, .70) }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
////////////////////
|
||||||
|
// Shadows
|
||||||
|
////////////////////
|
||||||
|
|
||||||
|
$shadow-color: $slate-200;
|
||||||
|
|
||||||
|
.shadow-sm {
|
||||||
|
box-shadow: .15em .15em 0 $shadow-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow {
|
||||||
|
box-shadow: .5em .5em 0 $shadow-color;
|
||||||
|
}
|
||||||
|
|
|
@ -28,6 +28,14 @@
|
||||||
font-size: rem-calc(18px);
|
font-size: rem-calc(18px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.body-lg {
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
@media (min-width: $bp-md) {
|
||||||
|
font-size: rem-calc(18px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
////////////////////
|
////////////////////
|
||||||
// Font Weights
|
// Font Weights
|
||||||
////////////////////
|
////////////////////
|
||||||
|
|
|
@ -39,6 +39,7 @@
|
||||||
@import "component/section-split";
|
@import "component/section-split";
|
||||||
@import "component/post-list";
|
@import "component/post-list";
|
||||||
@import "component/post-index";
|
@import "component/post-index";
|
||||||
|
@import "component/post-content";
|
||||||
|
|
||||||
// Import the syntax highlighting theme, see:
|
// Import the syntax highlighting theme, see:
|
||||||
// https://richleland.github.io/pygments-css/
|
// https://richleland.github.io/pygments-css/
|
||||||
|
|
|
@ -97,7 +97,7 @@ function renderJobs(elem, team, randomLimit) {
|
||||||
li.className = 'card theme-midnight';
|
li.className = 'card theme-midnight';
|
||||||
li.innerHTML = `
|
li.innerHTML = `
|
||||||
<div class="card__body">
|
<div class="card__body">
|
||||||
<h5 class="clamp-2">
|
<h5 class="mb-1 clamp-2">
|
||||||
<a href="${job.hostedUrl}" target="_blank" class="stretched-link link-text-color">${job.text}</a>
|
<a href="${job.hostedUrl}" target="_blank" class="stretched-link link-text-color">${job.text}</a>
|
||||||
</h5>
|
</h5>
|
||||||
<p class="m-0 fs-md monospace text-truncate">${job.categories.location}</p>
|
<p class="m-0 fs-md monospace text-truncate">${job.categories.location}</p>
|
||||||
|
@ -120,4 +120,3 @@ function shuffleArray(array) {
|
||||||
[array[i], array[j]] = [array[j], array[i]];
|
[array[i], array[j]] = [array[j], array[i]];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
36
blog.html
36
blog.html
|
@ -19,25 +19,25 @@ permalink: /blog/
|
||||||
{%- for post in site.posts -%}
|
{%- for post in site.posts -%}
|
||||||
<li class="post-list__item">
|
<li class="post-list__item">
|
||||||
|
|
||||||
<!-- Post title -->
|
<!-- Post title -->
|
||||||
<h4 class="post-list__heading">
|
<h4 class="post-list__heading">
|
||||||
<a href="{{ post.url | relative_url }}" class="link-text-color">
|
<a href="{{ post.url | relative_url }}" class="link-text-color">
|
||||||
{{ post.title | escape }}
|
{{ post.title | escape }}
|
||||||
</a>
|
</a>
|
||||||
</h4>
|
</h4>
|
||||||
|
|
||||||
<!-- Post metadata -->
|
<!-- Post metadata -->
|
||||||
<span class="post-list__author">
|
<span class="post-list__author">
|
||||||
<span class="visually-hidden">Author:</span>
|
<span class="visually-hidden">Author:</span>
|
||||||
{%- if site.data.authors[post.author] -%}
|
{%- if site.data.authors[post.author] -%}
|
||||||
{{ site.data.authors[post.author].name}}
|
{{ site.data.authors[post.author].name}}
|
||||||
{%- else -%}
|
{%- else -%}
|
||||||
{{ post.author }}
|
{{ post.author }}
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
</span>
|
</span><!--
|
||||||
<time class="post-list__date" datetime="{{ post.date | date_to_xmlschema }}">
|
--><time class="post-list__date" datetime="{{ post.date | date_to_xmlschema }}">
|
||||||
{%- assign date_format = site.date_format -%}
|
{%- assign date_format = site.date_format -%}
|
||||||
{{ post.date | date: date_format }}</time>
|
{{ post.date | date: date_format }}</time>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
{%- endfor -%}
|
{%- endfor -%}
|
||||||
|
|
Loading…
Reference in New Issue