From 69d9d2c1d19b12770561b978cafc968ccd2d1afe Mon Sep 17 00:00:00 2001 From: 0xfff <0xfff@protonmail.com> Date: Mon, 26 Sep 2016 01:40:16 +0200 Subject: [PATCH] (Refactor) Hero: Markup / BEM / Spacing / Responsive Height / Variables (#20) * (Refactor) Hero: Markup / BEM / Spacing / Responsive Height / Variables * (Fix) Header: adjust spacing with padding --- _includes/hero/community.html | 36 +++++++++---------- _includes/hero/currency.html | 23 ++++++------ _includes/hero/get-dash.html | 36 +++++++++---------- _includes/hero/home.html | 14 ++++---- _includes/hero/participate.html | 21 +++++------ _includes/hero/team.html | 9 ++--- get-dash/index.html | 54 ++++++++++++++-------------- src/scss/_buttons.scss | 3 +- src/scss/_header.scss | 63 ++++++++++++++++++++------------- src/scss/_layout.scss | 4 +-- src/scss/_nav.scss | 4 ++- src/scss/_variables.scss | 6 ++++ src/scss/_video.scss | 6 ++-- src/scss/main.scss | 4 +-- 14 files changed, 151 insertions(+), 132 deletions(-) create mode 100644 src/scss/_variables.scss diff --git a/_includes/hero/community.html b/_includes/hero/community.html index b789255..631b7c9 100644 --- a/_includes/hero/community.html +++ b/_includes/hero/community.html @@ -1,4 +1,4 @@ -
+
- + {% include nav-desktop.html %} -

{% t pages.community.hero-heading %}

-

{% t pages.community.hero-text %}

+
+

{% t pages.community.hero-heading %}

+

{% t pages.community.hero-text %}

-
- {% t pages.community.hero-forum-btn %} +
+ {% t pages.community.hero-forum-btn %} +
+
+ {% t pages.community.hero-discussion-btn %} + {% t pages.community.hero-social-btn %} + {% t pages.community.hero-news-btn %} + {% t pages.community.hero-development-btn %} + {% t pages.community.hero-masternodes-btn %} + {% t pages.community.hero-video-btn %} +
- -
- -
- {% t pages.community.hero-discussion-btn %} - {% t pages.community.hero-social-btn %} - {% t pages.community.hero-news-btn %} - {% t pages.community.hero-development-btn %} - {% t pages.community.hero-masternodes-btn %} - {% t pages.community.hero-video-btn %} -
- -
\ No newline at end of file +
diff --git a/_includes/hero/currency.html b/_includes/hero/currency.html index d03705c..5dddddd 100644 --- a/_includes/hero/currency.html +++ b/_includes/hero/currency.html @@ -1,4 +1,4 @@ -
+
- + {% include nav-desktop.html %} -

{% t pages.currency.hero-heading %}

+
+

{% t pages.currency.hero-heading %}

-

Visualizer Goes Here

+

Visualizer Goes Here

-
- {% t pages.currency.hero-markets-btn %} - {% t pages.currency.hero-governance-btn %} - {% t pages.currency.hero-network-btn %} - {% t pages.currency.hero-blockchain-btn %} +
+ {% t pages.currency.hero-markets-btn %} + {% t pages.currency.hero-governance-btn %} + {% t pages.currency.hero-network-btn %} + {% t pages.currency.hero-blockchain-btn %} +
- -
\ No newline at end of file +
diff --git a/_includes/hero/get-dash.html b/_includes/hero/get-dash.html index ab09017..1dba504 100644 --- a/_includes/hero/get-dash.html +++ b/_includes/hero/get-dash.html @@ -1,4 +1,4 @@ -
+
- + {% include nav-desktop.html %} -

{% t pages.get-dash.hero-heading %}

-

{% t pages.get-dash.hero-text %}
- {% t pages.get-dash.hero-wallet-version %}
- {% t pages.get-dash.hero-wallet-version-select %} -

+
+

{% t pages.get-dash.hero-heading %}

+

{% t pages.get-dash.hero-text %}

-
- {% t pages.get-dash.hero-download-btn %} +
+ {% t pages.get-dash.hero-download-btn %} +
+

{% t pages.get-dash.hero-wallet-version %} – ({% t pages.get-dash.hero-wallet-version-select %})

+
+ {% t pages.get-dash.hero-guide-btn %} + {% t pages.get-dash.hero-buy-btn %} + {% t pages.get-dash.hero-spend-btn %} + {% t pages.get-dash.hero-trade-btn %} +
- -
- -
- {% t pages.get-dash.hero-guide-btn %} - {% t pages.get-dash.hero-buy-btn %} - {% t pages.get-dash.hero-spend-btn %} - {% t pages.get-dash.hero-trade-btn %} -
- -
\ No newline at end of file +
diff --git a/_includes/hero/home.html b/_includes/hero/home.html index 498f658..6eff4e0 100644 --- a/_includes/hero/home.html +++ b/_includes/hero/home.html @@ -1,4 +1,4 @@ -
+
- + {% include nav-desktop.html %} -
-

{% t pages.home.hero-heading %}

-

{% t pages.home.hero-text %}

+
+

{% t pages.home.hero-heading %}

+

{% t pages.home.hero-text %}

-
diff --git a/_includes/hero/participate.html b/_includes/hero/participate.html index e00e67c..8cb1015 100644 --- a/_includes/hero/participate.html +++ b/_includes/hero/participate.html @@ -1,4 +1,4 @@ -
+
- + {% include nav-desktop.html %} -

{% t pages.participate.hero-heading %}

-

{% t pages.participate.hero-text %}

+
+

{% t pages.participate.hero-heading %}

+

{% t pages.participate.hero-text %}

-
- {% t pages.participate.hero-masternodes-btn %} - {% t pages.participate.hero-mining-btn %} - {% t pages.participate.hero-funding-btn %} +
+ {% t pages.participate.hero-masternodes-btn %} + {% t pages.participate.hero-mining-btn %} + {% t pages.participate.hero-funding-btn %} +
- -
\ No newline at end of file +
diff --git a/_includes/hero/team.html b/_includes/hero/team.html index b14d710..78ac52a 100644 --- a/_includes/hero/team.html +++ b/_includes/hero/team.html @@ -1,4 +1,4 @@ -
+
- + {% include nav-desktop.html %} - -
\ No newline at end of file +
+
+
diff --git a/get-dash/index.html b/get-dash/index.html index a308bdf..62dba84 100644 --- a/get-dash/index.html +++ b/get-dash/index.html @@ -8,27 +8,27 @@ description: pages.get-dash.description
- -
+

{% t pages.get-dash.setup-heading %}

{% tmd pages.get-dash.setup-text %} - - {% t pages.get-dash.setup-btn %} + + {% t pages.get-dash.setup-btn %}
- +
- @@ -36,7 +36,7 @@ description: pages.get-dash.description
- +

{% t pages.get-dash.buy-heading %}

@@ -47,8 +47,8 @@ description: pages.get-dash.description
- - @@ -62,21 +62,21 @@ description: pages.get-dash.description {% t pages.get-dash.trade-btn %}
- +
- -
- +

{% t pages.get-dash.atm-heading %}

@@ -87,9 +87,9 @@ description: pages.get-dash.description
- -
@@ -99,16 +99,16 @@ description: pages.get-dash.description

{% t pages.get-dash.shop-heading %}

{% tmd pages.get-dash.shop-text %} - {% t pages.get-dash.shop-btn %} + {% t pages.get-dash.shop-btn %}
- +
- - @@ -125,8 +125,8 @@ description: pages.get-dash.description
- - @@ -138,13 +138,13 @@ description: pages.get-dash.description {% tmd pages.get-dash.need-text %} {% t pages.get-dash.need-btn %} - {% tmd pages.get-dash.need-input %} + {% tmd pages.get-dash.need-input %}
- +
- - \ No newline at end of file + + diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss index ab0cbfc..66b0b39 100644 --- a/src/scss/_buttons.scss +++ b/src/scss/_buttons.scss @@ -2,6 +2,7 @@ border-radius: 4px; border: 0px solid; padding: 5px 15px; + margin-right: 10px; line-height: 30px; height: 40px; display: inline-block; @@ -16,7 +17,7 @@ box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); } } -.btn.btn-large { +.btn-large { font-size: 24px; padding: 10px 25px; height: 50px; diff --git a/src/scss/_header.scss b/src/scss/_header.scss index 0d06e72..d3d68ec 100644 --- a/src/scss/_header.scss +++ b/src/scss/_header.scss @@ -3,34 +3,47 @@ margin-bottom: 20px; } -#hero { - height: 600px; - color: $white; +.hero { position: relative; + min-height: 500px; + padding: 0 $size-gutter; + color: $white; - > .content { - > h1, > p { - text-shadow: 2px 2px 5px rgba(black, 0.2); - } - > h1 { - margin-top: 2.5em; - margin-bottom: 20px; /*optical*/ - font-size: 60px; - line-height: 1.2; - letter-spacing: -0.01em; - } - > p { - font-family: $font-heading; - font-weight: 200; - font-size: 24px; - line-height: 1.25; - margin-bottom: 34px; /*optical*/ - } + &__title, &__lead, &__text { + text-shadow: 2px 2px 5px rgba(black, 0.2); + } - .btn-blue-solid { - font-size: 24px; - padding: 10px 25px; - height: 50px; + &__title { + margin-bottom: 15px; /*optical*/ + font-size: 60px; + line-height: 1.2; + letter-spacing: -0.01em; + } + + &__lead { + font-family: $font-heading; + font-weight: 200; + font-size: 24px; + line-height: 1.25; + } + + &__lead, + &__text { + & + * { + margin-top: 34px; /*optical*/ + } + & + .hero__buttons { + margin-top: 20px; /*optical*/ } } + + &__content { + max-width: $content-max-width; + padding: ($size-gutter * 4) 0 ($size-gutter * 5); + margin: 0 auto; + } + + &__buttons { + margin-bottom: 20px; /*optical*/ + } } diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss index 6ea724c..a8b8f36 100644 --- a/src/scss/_layout.scss +++ b/src/scss/_layout.scss @@ -6,8 +6,8 @@ body { } .content { - width: 1280px; - max-width: calc(100% - 40px); + width: $content-max-width; + padding: 0 $size-gutter; @media (max-width: 1024px) { max-width: 96.1%; // at 1024px 40px is 3.9% of screen width } diff --git a/src/scss/_nav.scss b/src/scss/_nav.scss index 628c66b..12324db 100644 --- a/src/scss/_nav.scss +++ b/src/scss/_nav.scss @@ -1,3 +1,5 @@ +$nav-height: 90px; + .nav { float: right; text-align: right; @@ -12,7 +14,7 @@ text-transform: uppercase; font-size: 14px; letter-spacing: 0.02em; - line-height: 90px; + line-height: $nav-height; &:last-child > .nav__link { padding-right: 0; } diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..5b12095 --- /dev/null +++ b/src/scss/_variables.scss @@ -0,0 +1,6 @@ +/** + * Global Variables + **/ + +$content-max-width: 1280px; +$size-gutter: 20px; diff --git a/src/scss/_video.scss b/src/scss/_video.scss index be92054..c17d67f 100644 --- a/src/scss/_video.scss +++ b/src/scss/_video.scss @@ -6,7 +6,7 @@ left: 0; overflow: hidden; z-index: -100; - height: 600px; + height: 100%; overflow: hidden; &:after { content: ''; @@ -19,8 +19,8 @@ } .background-video { position: relative; - top: 40%; - transform: translateY(-40%); + top: 20%; + transform: translateY(-20%); width: 100%; height: auto; min-height: 100%; diff --git a/src/scss/main.scss b/src/scss/main.scss index 349d6f1..4fbf177 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -1,16 +1,16 @@ - // stuff every page really needs @import "reset"; @import "grid"; @import "colors"; +@import "variables"; @import "typography"; @import "mediaqueries"; @import "layout"; @import "directives"; //stuff every page needss -@import "header"; @import "nav"; +@import "header"; @import "logo"; @import "buttons"; @import "forms";