mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
[Refactor] Blog/Post: Use hero instead of (duplicate) header, update post templates with page module
This commit is contained in:
0xfff
parent
d7a13d8c9a
commit
61a012ac30
15 changed files with 201 additions and 215 deletions
|
|
@ -1,12 +0,0 @@
|
||||||
<div id="header">
|
|
||||||
|
|
||||||
<!-- Navigation -->
|
|
||||||
{% include nav-desktop.html logo-color="blue" %}
|
|
||||||
|
|
||||||
<!-- Hero content -->
|
|
||||||
<div class="page-info">
|
|
||||||
<h1 class="content">{% t pages.blog.title %}</h1>
|
|
||||||
<p class="content">{% t pages.blog.description %}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
<div id="header">
|
|
||||||
|
|
||||||
<!-- Navigation -->
|
|
||||||
{% include nav-desktop.html logo-color="blue" %}
|
|
||||||
|
|
||||||
<!-- Hero content -->
|
|
||||||
<div class="page-info">
|
|
||||||
<h1 class="content">{% t pages.blog.title %}</h1>
|
|
||||||
<p class="content">{% t pages.blog.description %}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
<div id="hero">
|
|
||||||
|
|
||||||
<!-- Navigation -->
|
|
||||||
{% include nav-desktop.html %}
|
|
||||||
|
|
||||||
<!-- Hero content -->
|
|
||||||
<h1 class="content">{% t pages.blog.title %}</h1>
|
|
||||||
<p class="content">{% t pages.blog.description %}</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
<div id="header">
|
|
||||||
|
|
||||||
<!-- Navigation -->
|
|
||||||
{% include nav-desktop.html logo-color="blue" %}
|
|
||||||
|
|
||||||
<!-- Hero content -->
|
|
||||||
<div class="page-info">
|
|
||||||
<h1 class="content">{% t pages.blog.title %}</h1>
|
|
||||||
<p class="content">{% t pages.blog.description %}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
<div id="header">
|
|
||||||
|
|
||||||
<!-- Navigation -->
|
|
||||||
{% include nav-desktop.html logo-color="blue" %}
|
|
||||||
|
|
||||||
<!-- Hero content -->
|
|
||||||
<div class="page-info">
|
|
||||||
<h1 class="content">{% t pages.blog.title %}</h1>
|
|
||||||
<p class="content">{% t pages.blog.description %}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
<div id="header">
|
|
||||||
|
|
||||||
<!-- Navigation -->
|
|
||||||
{% include nav-desktop.html logo-color="blue" %}
|
|
||||||
|
|
||||||
<!-- Hero content -->
|
|
||||||
<div class="page-info">
|
|
||||||
<h1 class="content">{% t pages.blog.title %}</h1>
|
|
||||||
<p class="content">{% t pages.blog.description %}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
21
_includes/hero/blog.html
Normal file
21
_includes/hero/blog.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<div class="hero hero--blog" id="hero">
|
||||||
|
<div id="background-video">
|
||||||
|
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.blog.hero-image %}" class="background-video">
|
||||||
|
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4">
|
||||||
|
<source src="assets/videos/Home-BG.webm" type="video/webm">
|
||||||
|
<source src="assets/videos/Home-BG" type="video/ogg"> -->
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
{% include nav-desktop.html %}
|
||||||
|
|
||||||
|
<!-- Hero content -->
|
||||||
|
<div class="hero__content">
|
||||||
|
<h1 class="hero__title">{% t pages.blog.title %}</h1>
|
||||||
|
<p class="hero__lead">{% t pages.blog.description %}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero stripe -->
|
||||||
|
<div class="hero__stripe"></div>
|
||||||
|
</div>
|
||||||
24
_includes/hero/post.html
Normal file
24
_includes/hero/post.html
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<div class="hero hero--post" id="hero">
|
||||||
|
<div id="background-video">
|
||||||
|
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.blog.hero-image %}" class="background-video">
|
||||||
|
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4">
|
||||||
|
<source src="assets/videos/Home-BG.webm" type="video/webm">
|
||||||
|
<source src="assets/videos/Home-BG" type="video/ogg"> -->
|
||||||
|
</video>
|
||||||
|
<!-- {% if page.image %}
|
||||||
|
<img src="{{ page.image }}" class="hero-image">
|
||||||
|
{% endif %} -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
{% include nav-desktop.html %}
|
||||||
|
|
||||||
|
<!-- Hero content -->
|
||||||
|
<div class="hero__content">
|
||||||
|
<h1 class="hero__title">{% if page.title %}{{ page.title }}{% endif %}</h1>
|
||||||
|
<p class="hero__lead">{{ page.date | date: "%b %d, %Y" }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero stripe -->
|
||||||
|
<div class="hero__stripe"></div>
|
||||||
|
</div>
|
||||||
|
|
@ -2,35 +2,31 @@
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
{% tf blog/header.html %}
|
{% include hero/post.html %}
|
||||||
|
|
||||||
<div id="title">
|
<div class="page page--post">
|
||||||
<h1 class="content">{% if page.title %}{{ page.title }}{% endif %}</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
<section class="section section--post">
|
||||||
|
<div class="section__content content">
|
||||||
<div class="main-col post">
|
<div class="main-col post">
|
||||||
{% if page.image %}
|
{{ content }}
|
||||||
<img src="{{ page.image }}" class="hero-image">
|
|
||||||
{% endif %}
|
|
||||||
<em>{{ page.date | date: "%b %d, %Y" }}</em>
|
|
||||||
{{ content }}
|
|
||||||
|
|
||||||
{% include author.html %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidebar">
|
|
||||||
{% for post in site.related_posts limit:5 %}
|
|
||||||
<!-- limit:4 -->
|
|
||||||
<div class="feature">
|
|
||||||
|
|
||||||
<h3><a href="{{ basenav }}{{ post.url }}">{{ post.title }}</a></h3>
|
|
||||||
|
|
||||||
<p><em>{{ post.date | date: "%b %d, %Y" }}</em><br />{{ post.excerpt | strip_html | truncatewords: 10 }}</p>
|
|
||||||
|
|
||||||
|
{% include author.html %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endfor %}
|
<div class="sidebar">
|
||||||
</div>
|
{% for post in site.related_posts limit:5 %}
|
||||||
|
<!-- limit:4 -->
|
||||||
|
<div class="feature">
|
||||||
|
|
||||||
|
<h3><a href="{{ basenav }}{{ post.url }}">{{ post.title }}</a></h3>
|
||||||
|
|
||||||
|
<p><em>{{ post.date | date: "%b %d, %Y" }}</em><br />{{ post.excerpt | strip_html | truncatewords: 10 }}</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ title: pages.blog.title
|
||||||
description: pages.blog.description
|
description: pages.blog.description
|
||||||
---
|
---
|
||||||
|
|
||||||
{% tf blog/header.html %}
|
{% include hero/blog.html %}
|
||||||
|
|
||||||
<div class="content post">
|
<div class="content post">
|
||||||
<div class="single-col">
|
<div class="single-col">
|
||||||
|
|
|
||||||
|
|
@ -15,109 +15,3 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
|
||||||
position: relative;
|
|
||||||
min-height: 600px;
|
|
||||||
color: $color-white;
|
|
||||||
background-image: $gradient-dash-sky;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
|
|
||||||
&__stripe {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
transform: skewY(-5deg);
|
|
||||||
transform-origin: 0;
|
|
||||||
background: $color-white;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
// TODO: Make this dependent on hero modifier not a separate modifier for stripe
|
|
||||||
&--grey {
|
|
||||||
background: $color-gray-light;
|
|
||||||
}
|
|
||||||
&--grey-blue {
|
|
||||||
background: $color-gray-light-blueish;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#background-video {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
@extend .content; // DEV: Todo
|
|
||||||
padding: 60px 0 120px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
z-index: 3;
|
|
||||||
@include mq($from: large) {
|
|
||||||
padding-bottom: 140px;
|
|
||||||
}
|
|
||||||
@include mq($from: 1600px) {
|
|
||||||
padding-bottom: 180px;
|
|
||||||
}
|
|
||||||
@include mq($from: 1920px) {
|
|
||||||
padding-bottom: 240px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__buttons {
|
|
||||||
margin-bottom: 20px; /*optical*/
|
|
||||||
&--get-dash {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title, &__lead, &__text {
|
|
||||||
text-shadow: 2px 2px 5px rgba(black, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
@include font-title-xxlarge();
|
|
||||||
margin-bottom: 15px; /*optical*/
|
|
||||||
margin-left: -7px; /*optical*/
|
|
||||||
}
|
|
||||||
|
|
||||||
&__lead {
|
|
||||||
@include font-lead();
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
background: rgba(0,0,0,0.05);
|
|
||||||
border-radius: 17px;
|
|
||||||
padding: 1px 10px;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__lead,
|
|
||||||
&__text {
|
|
||||||
& + * {
|
|
||||||
margin-top: 20px; /*optical*/
|
|
||||||
}
|
|
||||||
& + .hero__buttons {
|
|
||||||
margin-top: 34px; /*optical*/
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--light {
|
|
||||||
color: $color-black;
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
&__title, &__lead, &__text {
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#background-video::after {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--space {
|
|
||||||
background: $gradient-atmosphere-blue-violet;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
118
src/scss/_hero.scss
Normal file
118
src/scss/_hero.scss
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
min-height: 600px;
|
||||||
|
color: $color-white;
|
||||||
|
background-image: $gradient-dash-sky;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
|
||||||
|
&__stripe {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
transform: skewY(-5deg);
|
||||||
|
transform-origin: 0;
|
||||||
|
background: $color-white;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
// TODO: Make this dependent on hero modifier not a separate modifier for stripe
|
||||||
|
&--grey {
|
||||||
|
background: $color-gray-light;
|
||||||
|
}
|
||||||
|
&--grey-blue {
|
||||||
|
background: $color-gray-light-blueish;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#background-video {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
@extend .content; // DEV: Todo
|
||||||
|
padding: 60px 0 120px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
@include mq($from: large) {
|
||||||
|
padding-bottom: 140px;
|
||||||
|
}
|
||||||
|
@include mq($from: 1600px) {
|
||||||
|
padding-bottom: 180px;
|
||||||
|
}
|
||||||
|
@include mq($from: 1920px) {
|
||||||
|
padding-bottom: 240px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
margin-bottom: 20px; /*optical*/
|
||||||
|
&--get-dash {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title, &__lead, &__text {
|
||||||
|
text-shadow: 2px 2px 5px rgba(black, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
@include font-title-xxlarge();
|
||||||
|
margin-bottom: 15px; /*optical*/
|
||||||
|
margin-left: -7px; /*optical*/
|
||||||
|
}
|
||||||
|
|
||||||
|
&__lead {
|
||||||
|
@include font-lead();
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
background: rgba(0,0,0,0.05);
|
||||||
|
border-radius: 17px;
|
||||||
|
padding: 1px 10px;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__lead,
|
||||||
|
&__text {
|
||||||
|
& + * {
|
||||||
|
margin-top: 20px; /*optical*/
|
||||||
|
}
|
||||||
|
& + .hero__buttons {
|
||||||
|
margin-top: 34px; /*optical*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--blog {
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--post {
|
||||||
|
min-height: 420px;
|
||||||
|
.hero__title {
|
||||||
|
@include font-title-xlarge();
|
||||||
|
margin-bottom: 9px; /*optical*/
|
||||||
|
margin-left: -1px; /*optical*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--light {
|
||||||
|
color: $color-black;
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
&__title, &__lead, &__text {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#background-video::after {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--space {
|
||||||
|
background: $gradient-atmosphere-blue-violet;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -29,7 +29,7 @@ iframe {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.feature {
|
.feature {
|
||||||
margin: 40px 0 40px 0;
|
margin: 0 0 40px 0;
|
||||||
img {
|
img {
|
||||||
width: 75px;
|
width: 75px;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,16 @@
|
||||||
$m: 'page';
|
$m: 'page';
|
||||||
|
|
||||||
.#{$m} {
|
.#{$m} {
|
||||||
&--home {
|
padding-top: 70px;
|
||||||
|
|
||||||
|
&--post {
|
||||||
|
@include clearfix();
|
||||||
|
}
|
||||||
|
&--home {
|
||||||
}
|
}
|
||||||
&--get-dash {
|
&--get-dash {
|
||||||
background-color: $color-gray-light-blueish;
|
background-color: $color-gray-light-blueish;
|
||||||
padding-top: 70px;
|
|
||||||
}
|
}
|
||||||
&--participate {
|
&--participate {
|
||||||
padding-top: 70px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
|
|
||||||
//stuff every page needss
|
//stuff every page needss
|
||||||
@import "nav";
|
@import "nav";
|
||||||
|
@import "hero";
|
||||||
@import "header";
|
@import "header";
|
||||||
@import "logo";
|
@import "logo";
|
||||||
@import "buttons";
|
@import "buttons";
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue