scribd
/
scribd.github.io
mirror of https://github.com/scribd/scribd.github.io
1
0
Fork 0
Code Issues Releases Wiki Activity

First pass at styling blog posts

This commit is contained in:
Kyle Gordy 2019-11-24 14:37:49 -05:00
parent f085e36102
commit 03ab9c4b31
15 changed files with 343 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/hero.html
View File

@ -1,10 +1,8 @@
{% assign hero = page.hero %}
{% assign hero = page.hero %}
<section class="hero theme-{{ hero.theme | default: "white" }}">
<div class="hero__container container container-offset">
{% assign hero = page.hero %}
<header class="hero__header">
{% if hero.label %}
<h1 class="hero__section-heading">{{ hero.label }}</h1>
{% endif %}

50
_includes/post-hero.html Normal file
View File

@ -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>

23
_includes/post-sidebar.html Normal file
View File

@ -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>

20
_includes/related-jobs.html Normal file
View File

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

50
_layouts/post.html
View File

@ -3,45 +3,27 @@ layout: default
---
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="name headline">{{ page.title | escape }}</h1>
<!-- Post hero -->
{% include post-hero.html %}
<p>
<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>
<div class="section-container" itemprop="articleBody">
{%- if page.author -%}
• <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>
{%- endif -%}
</p>
</header>
<!-- Post sidebar -->
{% include post-sidebar.html %}
<ul class="card-grid card-grid-sm" id="jobs">
</ul>
<div class="text-length-lg">
<div itemprop="articleBody">
{{ content }}
<!-- Post content -->
<div class="post-content">
{{ content }}
<!-- Post separator line -->
<hr>
</div>
<!-- Related jobs -->
{% include related-jobs.html %}
</div>
</div>
<a href="{{ page.url | relative_url }}" hidden></a>
</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 -%}

10
assets/_sass/base/_typography.scss
View File

@ -49,14 +49,6 @@ ul {
font-style: normal;
}
.body-lg {
font-size: 1rem;
@media (min-width: $bp-md) {
font-size: rem-calc(18px);
}
}
////////////////////
// Headings
////////////////////
@ -69,7 +61,7 @@ h5,
h6 {
font-weight: 700;
line-height: 1.25em;
margin: 0 0 0.3em 0;
margin: 0 0 .5em 0;
}
h1,

47
assets/_sass/component/_hero.scss
View File

@ -5,10 +5,12 @@
:root {
--hero-margin: 60px;
--hero-overlap: -45px;
--hero-meta-padding: 15px;
@media (min-width: $bp-lg) {
--hero-margin: 100px;
--hero-overlap: -75px;
--hero-meta-padding: 20px;
}
}
@ -73,3 +75,48 @@
margin-top: var(--hero-overlap);
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 }

137
assets/_sass/component/_post-content.scss Normal file
View File

@ -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;
}
}

6
assets/_sass/component/_post-list.scss
View File

@ -21,10 +21,14 @@
.post-list__date,
.post-list__author {
font-size: rem-calc(14px);
font-size: rem-calc(13px);
line-height: 1;
@extend .monospace;
@extend .text-muted;
@media (min-width: $bp-md) {
font-size: rem-calc(14px);
}
}
// Bullet before post date

1
assets/_sass/utilities/_borders.scss
View File

@ -32,6 +32,7 @@ $border-color: $slate-300;
// Border Radius
////////////////////
$border-radius-sm: 3px;
$border-radius: 6px;
.rounded {

14
assets/_sass/utilities/_images.scss
View File

@ -26,3 +26,17 @@
.logo__wordmark { fill: $white; }
.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;
}

8
assets/_sass/utilities/_text.scss
View File

@ -28,6 +28,14 @@
font-size: rem-calc(18px);
}
.body-lg {
font-size: 1rem;
@media (min-width: $bp-md) {
font-size: rem-calc(18px);
}
}
////////////////////
// Font Weights
////////////////////

1
assets/css/main.scss
View File

@ -39,6 +39,7 @@
@import "component/section-split";
@import "component/post-list";
@import "component/post-index";
@import "component/post-content";
// Import the syntax highlighting theme, see:
// https://richleland.github.io/pygments-css/

3
assets/js/jobs.js
View File

@ -97,7 +97,7 @@ function renderJobs(elem, team, randomLimit) {
li.className = 'card theme-midnight';
li.innerHTML = `
<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>
</h5>
<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]];
}
}

36
blog.html
View File

@ -19,25 +19,25 @@ permalink: /blog/
{%- for post in site.posts -%}
<li class="post-list__item">
<!-- Post title -->
<h4 class="post-list__heading">
<a href="{{ post.url | relative_url }}" class="link-text-color">
{{ post.title | escape }}
</a>
</h4>
<!-- Post title -->
<h4 class="post-list__heading">
<a href="{{ post.url | relative_url }}" class="link-text-color">
{{ post.title | escape }}
</a>
</h4>
<!-- Post metadata -->
<span class="post-list__author">
<span class="visually-hidden">Author:</span>
{%- if site.data.authors[post.author] -%}
{{ site.data.authors[post.author].name}}
{%- else -%}
{{ post.author }}
{%- endif -%}
</span>
<time class="post-list__date" datetime="{{ post.date | date_to_xmlschema }}">
{%- assign date_format = site.date_format -%}
{{ post.date | date: date_format }}</time>
<!-- Post metadata -->
<span class="post-list__author">
<span class="visually-hidden">Author:</span>
{%- if site.data.authors[post.author] -%}
{{ site.data.authors[post.author].name}}
{%- else -%}
{{ post.author }}
{%- endif -%}
</span><!--
--><time class="post-list__date" datetime="{{ post.date | date_to_xmlschema }}">
{%- assign date_format = site.date_format -%}
{{ post.date | date: date_format }}</time>
</li>
{%- endfor -%}