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

Add featured post hero component

This commit is contained in:
Kyle Gordy 2019-11-24 22:59:45 -05:00
parent 6e2f8bfd83
commit 356c465f5d
16 changed files with 252 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
_includes/featured-post-hero.html Normal file
View File

@ -0,0 +1,101 @@
{% assign hero = page.hero %}
<div class="feat-post">
<div class="container">
<div class="feat-post__container">
<section class="feat-post__primary relative">
<h1 class="section-heading text-teal">Featured Post</h1>
{% assign featured = site.tags.featured | sort: 'date' | reverse %}
{% for post in featured limit: 1 %}
<h2 class="hero__title">
<a href="{{ post.url | relative_url }}" class="link-text-color">
{{ post.title | escape }}
</a>
</h2>
<ul class="hero__meta">
<!-- Post Author -->
{%- if post.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[post.author] -%}
{{ site.data.authors[post.author].name}}
{%- else -%}
{{ post.author }}
{%- endif -%}
</span>
</span>
</li>
{%- endif -%}
<!-- Post Date -->
{%- if post.date -%}
<li class="hero__meta-item published">
<strong>Published</strong><br>
<time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">
{%- assign date_format = site.date_format -%}
{{ post.date | date: date_format }}
</time>
</li>
{%- endif -%}
{%- if post.team -%}
<!-- Team Info -->
<li class="hero__meta-item category">
<strong>Category</strong><br>
<span>{{ post.team }}</span>
</li>
{%- endif -%}
</ul>
{% endfor %}
<div class="feat-post__separator"></div>
</section>
<section class="feat-post__secondary">
<h3 class="section-heading mb-0 text-plum">Featured Series</h3>
<ul class="post-list text-length-sm">
{% assign featured-series = site.tags.featured-series | sort: 'date' %}
{% for post in featured-series limit: 2 %}
<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 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 %}
</ul>
<!-- All posts button (if not on a blog page already) -->
{% unless page.url contains "blog" %}
<a href="{% link blog.html %}#all-posts" class="mt-4 btn btn-primary btn-icon-right">
All Posts
<svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
</a>
{% endunless %}
</section>
</div>
</div>
{% include logo-texture-solid.html %}
</div>

1
_includes/logo-texture-solid.html Normal file
View File

@ -0,0 +1 @@
<svg class="logo-texture-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 500" aria-hidden="true" preserveAspectRatio="xMidYMin slice"><path d="M1398.19 390.083a658.738 658.738 0 0 1 424.102 145.984l41.096 32.256L1735.8 750.385l-94.138-62.121 67.856-97.482a549.546 549.546 0 0 0-310.61-90.315 384.205 384.205 0 0 0-158.889 31.539 362.937 362.937 0 0 0-46.113 28.193c-51.29 36.954-76.936 81.156-76.936 132.604 0 30.583 12.663 45.874 37.99 45.874a179.44 179.44 0 0 0 34.167-6.45 221.253 221.253 0 0 1 42.769-5.496 145.988 145.988 0 0 1 98.2 40.857 143.355 143.355 0 0 1 46.114 112.534 167.248 167.248 0 0 1-47.786 119.464 170.837 170.837 0 0 1-130.218 50.174 198.314 198.314 0 0 1-159.605-71.678c-40.618-48.024-62.361-115.88-62.6-201.654v-15.53c0-218.38 173.703-370.815 422.19-370.815zm433.08-1517.333l53.867 306.207-154.522 31.662-29.297-163.5a768.534 768.534 0 0 0-396.465 217.846 537.306 537.306 0 0 0-125.934 188.31 507.562 507.562 0 0 0-17.721 73.48c-14.177 87.263 4.173 156.333 55.05 207.21 30.242 30.242 57.886 32.84 82.93 7.796a250.943 250.943 0 0 0 27.409-40.167 309.42 309.42 0 0 1 36.858-47.727 204.162 204.162 0 0 1 137.51-56.706 200.48 200.48 0 0 1 156.885 65.682 233.893 233.893 0 0 1 70.88 165.39 238.913 238.913 0 0 1-79.153 178.385c-58.64 62.865-143.119 94.981-228.711 86.95-87.657-7.324-176.258-52.923-261.315-137.508l-9.813-9.812-2.71-2.71-2.835-2.835c-40.77-40.77-73.093-85.338-97.052-132.47L1043.843-6.85 864.255-5.039l2.771-189.114a875.006 875.006 0 0 0-490.454 157.34 611.739 611.739 0 0 0-181.664 183.112 577.901 577.901 0 0 0-35.768 78.28c-34.801 94.456-29.295 175.644 16.519 243.566 27.233 40.375 57.566 49.286 91 26.735a285.706 285.706 0 0 0 39.358-38.939 352.28 352.28 0 0 1 51.565-45.336 232.45 232.45 0 0 1 166.015-33.501A228.29 228.29 0 0 1 684.68 484.61a266.339 266.339 0 0 1 43.297 200.262A272.015 272.015 0 0 1 600.758 867.06c-79.2 57.522-180.598 75.062-274.52 47.486-96.385-27.234-185.51-97.455-262.206-210.48l-11.276-16.718-2.553-3.785c-194.46-288.3-100.897-644.208 227.128-865.464a1048.87 1048.87 0 0 1 689.847-184.9l30.172 2.18c-14.487-161.182 52.24-333.464 197.638-478.861a921.236 921.236 0 0 1 563.746-275.025l72.535-8.742z" fill="#F8F9FD" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

2
_includes/post-hero.html
View File

@ -26,6 +26,7 @@
{%- endif -%}
<!-- Post Date -->
{%- if page.date -%}
<li class="hero__meta-item published">
<strong>Published</strong><br>
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
@ -33,6 +34,7 @@
{{ page.date | date: date_format }}
</time>
</li>
{%- endif -%}
{%- if page.team -%}
<!-- Team Info -->

6
_layouts/home.html
View File

@ -2,7 +2,10 @@
layout: default
---
<!-- Featured post hero -->
{% include featured-post-hero.html %}
<!-- Featured projects -->
<section class="section-container">
<h2 id="featured-projects" class="section-heading pb-3">Featured Projects</h2>
{% include project-list.html limit="3" %}
@ -12,7 +15,8 @@ layout: default
</a>
</section>
<section class="bg-slate-100 border-top border-thick">
<!-- Careers teaser -->
<section class="bg-slate-100 border-top">
<div class="section-container section-split">
<div class="section-split__item">
<h2 id="featured-jobs" class="section-heading text-plum pb-3">We’re Hiring</h2>

1
_posts/2018-10-24-dependency-injection-with-weaver-1.md
View File

@ -5,6 +5,7 @@ author: theo
tags:
- swift
- weaver
- featured-series
team: iOS
---

1
_posts/2019-01-30-dependency-injection-with-weaver-part-2.md
View File

@ -5,6 +5,7 @@ author: theo
tags:
- swift
- weaver
- featured-series
team: iOS
---

1
_posts/2019-08-28-real-time-data-platform.md
View File

@ -5,6 +5,7 @@ author: rtyler
tags:
- kafka
- aws
- featured
team: Core Platform
---

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

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

80
assets/_sass/component/_featured-post-hero.scss Normal file
View File

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

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

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

35
assets/_sass/component/_post-content.scss
View File

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

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

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

4
assets/_sass/component/_section-split.scss
View File

@ -19,7 +19,3 @@
.section-split-align-top {
align-items: flex-start;
}
.section-split-reverse {
}

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

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

3
assets/css/main.scss
View File

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

5
blog.html
View File

@ -4,13 +4,16 @@ title: Blog
permalink: /blog/
---
<!-- Featured post hero -->
{% include featured-post-hero.html %}
<div class="post-index">
<div class="post-index__header">
<!-- future category nav will live here -->
</div>
<section class="post-index__body">
<section id="all-posts" class="post-index__body">
<!-- Loop though posts -->
{%- if site.posts.size > 0 -%}
<ul class="post-list text-length-md">