mirror of
https://github.com/seigler/dash-website
synced 2025-07-26 23:06:09 +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,19 +2,13 @@
|
|||
layout: default
|
||||
---
|
||||
|
||||
{% tf blog/header.html %}
|
||||
{% include hero/post.html %}
|
||||
|
||||
<div id="title">
|
||||
<h1 class="content">{% if page.title %}{{ page.title }}{% endif %}</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="page page--post">
|
||||
|
||||
<section class="section section--post">
|
||||
<div class="section__content content">
|
||||
<div class="main-col post">
|
||||
{% if page.image %}
|
||||
<img src="{{ page.image }}" class="hero-image">
|
||||
{% endif %}
|
||||
<em>{{ page.date | date: "%b %d, %Y" }}</em>
|
||||
{{ content }}
|
||||
|
||||
{% include author.html %}
|
||||
|
|
@ -33,4 +27,6 @@ layout: default
|
|||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: pages.blog.title
|
|||
description: pages.blog.description
|
||||
---
|
||||
|
||||
{% tf blog/header.html %}
|
||||
{% include hero/blog.html %}
|
||||
|
||||
<div class="content post">
|
||||
<div class="single-col">
|
||||
|
|
|
|||
|
|
@ -15,109 +15,3 @@
|
|||
bottom: 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;
|
||||
}
|
||||
.feature {
|
||||
margin: 40px 0 40px 0;
|
||||
margin: 0 0 40px 0;
|
||||
img {
|
||||
width: 75px;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
$m: 'page';
|
||||
|
||||
.#{$m} {
|
||||
&--home {
|
||||
padding-top: 70px;
|
||||
|
||||
&--post {
|
||||
@include clearfix();
|
||||
}
|
||||
&--home {
|
||||
}
|
||||
&--get-dash {
|
||||
background-color: $color-gray-light-blueish;
|
||||
padding-top: 70px;
|
||||
}
|
||||
&--participate {
|
||||
padding-top: 70px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
|
||||
//stuff every page needss
|
||||
@import "nav";
|
||||
@import "hero";
|
||||
@import "header";
|
||||
@import "logo";
|
||||
@import "buttons";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue