From 61a012ac30a069aa5057340ea53dc35e68ca978b Mon Sep 17 00:00:00 2001 From: 0xfff <0xfff@protonmail.com> Date: Sat, 8 Oct 2016 21:50:59 +0200 Subject: [PATCH] [Refactor] Blog/Post: Use hero instead of (duplicate) header, update post templates with page module --- _i18n/cn/blog/header.html | 12 ---- _i18n/en/blog/header.html | 12 ---- _i18n/es/blog/header.html | 10 ---- _i18n/it/blog/header.html | 12 ---- _i18n/pt/blog/header.html | 12 ---- _i18n/ru/blog/header.html | 12 ---- _includes/hero/blog.html | 21 +++++++ _includes/hero/post.html | 24 ++++++++ _layouts/post.html | 48 +++++++--------- blog/index.html | 18 +++--- src/scss/_header.scss | 106 ---------------------------------- src/scss/_hero.scss | 118 ++++++++++++++++++++++++++++++++++++++ src/scss/_interior.scss | 2 +- src/scss/_page.scss | 8 ++- src/scss/main.scss | 1 + 15 files changed, 201 insertions(+), 215 deletions(-) delete mode 100644 _i18n/cn/blog/header.html delete mode 100644 _i18n/en/blog/header.html delete mode 100644 _i18n/es/blog/header.html delete mode 100644 _i18n/it/blog/header.html delete mode 100644 _i18n/pt/blog/header.html delete mode 100644 _i18n/ru/blog/header.html create mode 100644 _includes/hero/blog.html create mode 100644 _includes/hero/post.html create mode 100644 src/scss/_hero.scss diff --git a/_i18n/cn/blog/header.html b/_i18n/cn/blog/header.html deleted file mode 100644 index f4dc13c..0000000 --- a/_i18n/cn/blog/header.html +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/_i18n/en/blog/header.html b/_i18n/en/blog/header.html deleted file mode 100644 index f4dc13c..0000000 --- a/_i18n/en/blog/header.html +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/_i18n/es/blog/header.html b/_i18n/es/blog/header.html deleted file mode 100644 index 7e96aad..0000000 --- a/_i18n/es/blog/header.html +++ /dev/null @@ -1,10 +0,0 @@ -
- - - {% include nav-desktop.html %} - - -

{% t pages.blog.title %}

-

{% t pages.blog.description %}

- -
\ No newline at end of file diff --git a/_i18n/it/blog/header.html b/_i18n/it/blog/header.html deleted file mode 100644 index f4dc13c..0000000 --- a/_i18n/it/blog/header.html +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/_i18n/pt/blog/header.html b/_i18n/pt/blog/header.html deleted file mode 100644 index f4dc13c..0000000 --- a/_i18n/pt/blog/header.html +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/_i18n/ru/blog/header.html b/_i18n/ru/blog/header.html deleted file mode 100644 index f4dc13c..0000000 --- a/_i18n/ru/blog/header.html +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/_includes/hero/blog.html b/_includes/hero/blog.html new file mode 100644 index 0000000..dbbcfbb --- /dev/null +++ b/_includes/hero/blog.html @@ -0,0 +1,21 @@ +
+
+ +
+ + + {% include nav-desktop.html %} + + +
+

{% t pages.blog.title %}

+

{% t pages.blog.description %}

+
+ + +
+
diff --git a/_includes/hero/post.html b/_includes/hero/post.html new file mode 100644 index 0000000..8322f44 --- /dev/null +++ b/_includes/hero/post.html @@ -0,0 +1,24 @@ +
+
+ + +
+ + + {% include nav-desktop.html %} + + +
+

{% if page.title %}{{ page.title }}{% endif %}

+

{{ page.date | date: "%b %d, %Y" }}

+
+ + +
+
diff --git a/_layouts/post.html b/_layouts/post.html index 4c7cae2..5dbc4e7 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -2,35 +2,31 @@ layout: default --- -{% tf blog/header.html %} +{% include hero/post.html %} -
-

{% if page.title %}{{ page.title }}{% endif %}

-
+
-
- -
- {% if page.image %} - - {% endif %} - {{ page.date | date: "%b %d, %Y" }} - {{ content }} - - {% include author.html %} -
- -
- {% for post in site.related_posts limit:5 %} - -
- -

{{ post.title }}

- -

{{ post.date | date: "%b %d, %Y" }}
{{ post.excerpt | strip_html | truncatewords: 10 }}

+
+
+
+ {{ content }} + {% include author.html %}
- {% endfor %} -
+
+ {% for post in site.related_posts limit:5 %} + +
+ +

{{ post.title }}

+ +

{{ post.date | date: "%b %d, %Y" }}
{{ post.excerpt | strip_html | truncatewords: 10 }}

+ +
+ + {% endfor %} +
+
+
diff --git a/blog/index.html b/blog/index.html index 0381d39..fe655ef 100644 --- a/blog/index.html +++ b/blog/index.html @@ -4,33 +4,33 @@ title: pages.blog.title description: pages.blog.description --- -{% tf blog/header.html %} +{% include hero/blog.html %}
{% include pagination_navigation_all.html %} - - {% for post in paginator.posts %} - + + {% for post in paginator.posts %} +
{% if post.image %} {% endif %} - +

{{ post.title }}

- +

{{ post.date | date: "%b %d, %Y" }}
{{ post.excerpt | strip_html | truncatewords: 50 }}

- +
- +
{% endfor %} {% include pagination_navigation_all.html %}
-
\ No newline at end of file +
diff --git a/src/scss/_header.scss b/src/scss/_header.scss index 0f98f7d..954c037 100644 --- a/src/scss/_header.scss +++ b/src/scss/_header.scss @@ -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; - } -} diff --git a/src/scss/_hero.scss b/src/scss/_hero.scss new file mode 100644 index 0000000..f5a014d --- /dev/null +++ b/src/scss/_hero.scss @@ -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; + } +} diff --git a/src/scss/_interior.scss b/src/scss/_interior.scss index 8332bae..802f964 100644 --- a/src/scss/_interior.scss +++ b/src/scss/_interior.scss @@ -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; diff --git a/src/scss/_page.scss b/src/scss/_page.scss index 3d9f0ce..1aa499d 100644 --- a/src/scss/_page.scss +++ b/src/scss/_page.scss @@ -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; } } diff --git a/src/scss/main.scss b/src/scss/main.scss index 4076d63..1ece04b 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -12,6 +12,7 @@ //stuff every page needss @import "nav"; +@import "hero"; @import "header"; @import "logo"; @import "buttons";