From a1e4167abf6d241094302c795004dd160a5e3b29 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Mon, 5 Sep 2016 06:28:22 -0400 Subject: [PATCH] feat: Styling home page --- _colors/site-colors.html | 4 + _i18n/cn/home/hero.html | 13 +- _i18n/en.yml | 2 +- _i18n/en/home/hero.html | 13 +- _i18n/es/home/hero.html | 13 +- _i18n/it/home/hero.html | 13 +- _i18n/pt/home/hero.html | 13 +- _i18n/ru/home/hero.html | 13 +- _sass/_1024.scss | 40 ------ _sass/_480.scss | 113 ---------------- _sass/_640.scss | 62 --------- _sass/_768.scss | 91 ------------- _sass/_colors.scss | 4 +- _sass/_grid.scss | 5 - _sass/_header.scss | 39 +++--- _sass/_home.scss | 162 ++++++++++++----------- _sass/_layout.scss | 4 + _sass/_reset.scss | 3 + _sass/_typography.scss | 1 + assets/css/style.scss | 7 - index.html | 276 +++++++++++++++++++++------------------ 21 files changed, 312 insertions(+), 579 deletions(-) delete mode 100644 _sass/_1024.scss delete mode 100644 _sass/_480.scss delete mode 100644 _sass/_640.scss delete mode 100644 _sass/_768.scss diff --git a/_colors/site-colors.html b/_colors/site-colors.html index 6ba4450..2122724 100644 --- a/_colors/site-colors.html +++ b/_colors/site-colors.html @@ -18,3 +18,7 @@ type: colors
$dark-blue
+ +
+ $gray-light +
diff --git a/_i18n/cn/home/hero.html b/_i18n/cn/home/hero.html index 736fb6d..498f658 100644 --- a/_i18n/cn/home/hero.html +++ b/_i18n/cn/home/hero.html @@ -11,11 +11,12 @@ {% include nav-desktop.html %} -

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

-

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

-
- {% t nav.get-dash %} +

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

+

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

+ +
+ {% t nav.get-dash %} +
- - \ No newline at end of file + diff --git a/_i18n/en.yml b/_i18n/en.yml index 24afb72..76a346c 100644 --- a/_i18n/en.yml +++ b/_i18n/en.yml @@ -52,7 +52,7 @@ pages: evolution-text: What's next? We are working on a new decentralized service hosted on the masternode network that will open up Dash to web and mobile while being as easy to use as PayPal but still fully decentralized. Stay tuned... evolution-btn: Learn More - news-heading: Lastest News + news-heading: Latest News news-btn: View All News get-started-heading: Get Started diff --git a/_i18n/en/home/hero.html b/_i18n/en/home/hero.html index 736fb6d..498f658 100644 --- a/_i18n/en/home/hero.html +++ b/_i18n/en/home/hero.html @@ -11,11 +11,12 @@ {% include nav-desktop.html %} -

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

-

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

-
- {% t nav.get-dash %} +

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

+

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

+ +
+ {% t nav.get-dash %} +
- - \ No newline at end of file + diff --git a/_i18n/es/home/hero.html b/_i18n/es/home/hero.html index 4a641ba..a64d784 100644 --- a/_i18n/es/home/hero.html +++ b/_i18n/es/home/hero.html @@ -11,11 +11,12 @@ {% include nav-desktop.html %} -

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

-

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

-
- {% t nav.get-dash %} +

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

+

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

+ +
+ {% t nav.get-dash %} +
- - \ No newline at end of file + diff --git a/_i18n/it/home/hero.html b/_i18n/it/home/hero.html index 736fb6d..498f658 100644 --- a/_i18n/it/home/hero.html +++ b/_i18n/it/home/hero.html @@ -11,11 +11,12 @@ {% include nav-desktop.html %} -

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

-

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

-
- {% t nav.get-dash %} +

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

+

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

+ +
+ {% t nav.get-dash %} +
- - \ No newline at end of file + diff --git a/_i18n/pt/home/hero.html b/_i18n/pt/home/hero.html index 736fb6d..498f658 100644 --- a/_i18n/pt/home/hero.html +++ b/_i18n/pt/home/hero.html @@ -11,11 +11,12 @@ {% include nav-desktop.html %} -

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

-

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

-
- {% t nav.get-dash %} +

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

+

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

+ +
+ {% t nav.get-dash %} +
- - \ No newline at end of file + diff --git a/_i18n/ru/home/hero.html b/_i18n/ru/home/hero.html index 736fb6d..498f658 100644 --- a/_i18n/ru/home/hero.html +++ b/_i18n/ru/home/hero.html @@ -11,11 +11,12 @@ {% include nav-desktop.html %} -

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

-

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

-
- {% t nav.get-dash %} +

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

+

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

+ +
+ {% t nav.get-dash %} +
- - \ No newline at end of file + diff --git a/_sass/_1024.scss b/_sass/_1024.scss deleted file mode 100644 index d8f7398..0000000 --- a/_sass/_1024.scss +++ /dev/null @@ -1,40 +0,0 @@ -@media (max-width: 1279px) { - .content { - width: 1000px; - margin: 0 auto; - } - h1 { - font-size: 34px; - } - - h2 { - font-size: 20px; - } - #background-video { - top: -40px; - max-height: 600px; - } - #key-features { - padding: 0 30px 0 30px; - .col { - width: 50%; - } - .feature { - margin-right: 0px; - .icon { - width: 40px; - height: auto; - margin: 0 30px 100px 0; - } - } - .screenshot { - padding: 40px 30px 30px 10px; - } - } - .feature { - img { - width: 60px; - height: auto; - } - } -} diff --git a/_sass/_480.scss b/_sass/_480.scss deleted file mode 100644 index 7a22580..0000000 --- a/_sass/_480.scss +++ /dev/null @@ -1,113 +0,0 @@ -@media (max-width: 600px) { - .content { - width: 100%; - margin: 0 auto; - padding: 0; - } - h1 { - font-size: 30px; - } - - h2 { - font-size: 18px; - } - #hero { - padding-left: 30px; - padding-right: 30px; - } - #sign-in-cta { - form { - input { - display: block; - width: 100%; - margin-bottom: 10px; - } - } - } - #info { - .col { - width: 100%; - box-sizing: border-box; - margin-top: 10px; - margin-bottom: 20px; - border-right: none; - h2 { - font-size: 24px; - margin-bottom: 10px; - } - span { - color: #999999; - text-transform: uppercase; - font-weight: bold; - font-size: 12px; - } - } - } - #key-features { - padding: 30px; - .col { - width: 100%; - box-sizing: border-box; - } - .feature { - margin-bottom: 50px; - margin-right: 20px; - text-align: center; - .icon { - float: none; - width: 55px; - height: auto; - margin: 0; - } - p { - text-align: left; - } - } - } - #news { - padding: 30px 0 30px 0; - .news-post { - width: 100%; - img { - width: 100%; - max-width: 600px; - height: auto; - } - } - } - #get-started-cta { - padding: 50px 30px; - .col { - width: 100%; - padding: 0px; - margin-top: 20px; - margin-bottom: 20px; - } - } - iframe { - min-height: 300px; - } - .feature { - text-align: center; - img { - width: 75px; - height: auto; - } - .col { - float: none; - display: inline-block; - width: 100%; - p { - text-align: left; - } - ul { - text-align: left; - } - - ol { - text-align: left; - } - } - } - -} diff --git a/_sass/_640.scss b/_sass/_640.scss deleted file mode 100644 index a2a5e32..0000000 --- a/_sass/_640.scss +++ /dev/null @@ -1,62 +0,0 @@ -@media (max-width: 760px) { - .content { - width: 600px; - margin: 0 auto; - } - h1 { - font-size: 32px; - } - - h2 { - font-size: 18px; - } - .second-line{ - display: block; - } - #info { - .col { - width: 33%; - box-sizing: border-box; - padding: 0 10px; - h2 { - font-size: 18px; - margin-bottom: 10px; - } - span { - font-size: 10px; - } - } - } - footer { - padding-top: 0px; - text-align: center; - .nav { - float: none; - text-align: center; - li { - display: block; - margin-left: 0px; - padding-top: 10px; - padding-bottom: 10px; - border-bottom: 1px solid $gray; - } - } - .social { - float: none; - text-align: center; - margin-top: 15px; - } - .logo { - margin-top: 20px; - float: none; - width: 56px; - height: auto; - } - .copyright { - margin-top: 13px; - float: none; - font-size: 12px; - color: #999; - } - } -} \ No newline at end of file diff --git a/_sass/_768.scss b/_sass/_768.scss deleted file mode 100644 index 86623e5..0000000 --- a/_sass/_768.scss +++ /dev/null @@ -1,91 +0,0 @@ -@media (max-width: 1020px) { - .content { - width: 750px; - margin: 0 auto; - } - h1 { - font-size: 34px; - } - - h2 { - font-size: 20px; - } - .desktop { - display: none; - width: 0; - height: 0; - } - .button_container { - display: inline-block; - } - #hero { - #top { - margin-bottom: 100px; - padding: 0 !important; - } - } - #info { - .col { - padding: 0px 20px; - h2 { - font-size: 20px; - } - span { - font-size: 12px; - } - } - } - #key-features { - .col { - width: 100%; - } - .screenshot { - text-align: center !important; - padding: 0; - } - } - #news { - .news-post { - width: 50%; - } - } - #get-started-cta { - .col { - width: 50%; - } - } - #top{ - padding: 0 30px 0 30px; - } - #title{ - padding: 0 30px 0 30px; - } - .main-col { - float: none; - width: 100%; - padding: 0 30px 0 30px; - } - .sidebar { - float: none; - width: 100%; - padding: 0 30px 0 30px; - } - .single-col { - padding: 0 30px 0 30px; - } - .feature { - img { - margin-top: 10px; - width: 40px; - height: auto; - } - } - - .col-2{ - .col { - width: 100%; - border-right: none !important; - padding: 0; - } - } -} \ No newline at end of file diff --git a/_sass/_colors.scss b/_sass/_colors.scss index 023e904..924602d 100644 --- a/_sass/_colors.scss +++ b/_sass/_colors.scss @@ -8,6 +8,7 @@ $red: #ec2227; $green: #1dd68a; $gray: #f0f0f0; $dark-blue: #0b3b5a; +$gray-light: #f7f9fa; // for the style guide: @@ -28,7 +29,8 @@ $color: ('green', $green), ('gray', $gray), - ('dark-blue', $dark-blue); + ('dark-blue', $dark-blue), + ('gray-light', $gray-light); @each $name, $bgcolor in $color { .color__tile--#{$name}-bg { diff --git a/_sass/_grid.scss b/_sass/_grid.scss index 0104d7e..ce3dd0c 100644 --- a/_sass/_grid.scss +++ b/_sass/_grid.scss @@ -904,8 +904,3 @@ .pull-left { float: left !important; } -*, -*:before, -*:after { - box-sizing: border-box; -} diff --git a/_sass/_header.scss b/_sass/_header.scss index 8c01bf2..ae1ef63 100644 --- a/_sass/_header.scss +++ b/_sass/_header.scss @@ -1,6 +1,7 @@ #hero { height: 600px; color: $white; + position: relative; #top { border-bottom: 1px solid rgba($white, 0.35); @@ -12,24 +13,26 @@ } } } - - > h1, > p { - text-shadow: 2px 2px 2px rgba(black, 0.4); - } - > h1 { - margin-top: 2.5em; - font-size: 56px; - line-height: 1.2; - } - > p { - font-family: $font-heading; - font-size: 35px; - line-height: 1.25; - margin-bottom: 0.5em; - } - .btn-blue-solid { - font-size: 20px; - padding: 5px 25px; + > .content { + > h1, > p { + text-shadow: 2px 2px 2px rgba(black, 0.4); + } + > h1 { + margin-top: 2.5em; + font-size: 56px; + line-height: 1.2; + } + > p { + font-family: $font-heading; + font-size: 35px; + line-height: 1.25; + margin-bottom: 0.5em; + } + + .btn-blue-solid { + font-size: 20px; + padding: 5px 25px; + } } } diff --git a/_sass/_home.scss b/_sass/_home.scss index 0418936..67119a0 100644 --- a/_sass/_home.scss +++ b/_sass/_home.scss @@ -1,93 +1,103 @@ -#info { - .col { - width: 33%; - box-sizing: border-box; - margin-top: 50px; - margin-bottom: 70px; +#page-home { + > section { + padding: 40px 0; + overflow: hidden; + position: relative; text-align: center; - border-right: 2px solid $gray; - h2 { - font-size: 26px; - margin-bottom: 10px; - span { - font-family: inherit; - font-size: inherit; - margin-bottom: inherit; - color: inherit; + + &:nth-child(2n) { + background-color: $gray-light; + } + + .row { + text-align: left; + } + + .features-collection { + text-align: center; + } + + .logo-collection { + margin: 20px 0; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + + > .logo { + flex: 1 1 auto; } } - span { - color: #999999; - text-transform: uppercase; - font-weight: bold; - font-size: 14px; - } - } - .last { - border-right: none !important; - } -} -#key-features { - background-color: $gray; - padding: 50px 0 30px 0; - .col { - width: 50%; - box-sizing: border-box; - } - .feature { - margin-bottom: 50px; - margin-right: 20px; - .icon { - float: left; - width: 55px; - height: auto; - margin: 0 40px 50px 0; + p { + max-width: 60em; + margin: 20px auto; } - } - .screenshot { - text-align: right; + img { - width: 100%; - max-width: 600px; - height: auto; + max-width: 100%; } } -} -#news { - padding: 50px 0 0 0; .news-post { - width: 25%; - padding: 30px; - float: left; - box-sizing: border-box; - div.news-image { - line-height:310px; - height:180px; - img { + background-color: $white; + box-shadow: 0 1px 4px rgba($black, 0.25); + margin: 20px 0; + .news-image { + position: relative; + overflow: hidden; + padding-bottom: 60%; + background-color: #999; + > img { + position: absolute; + top: 0; + left: 0; width: 100%; - max-width: 310px; - max-height:205px; - height: auto; + @supports (object-fit: cover) { + height: 100%; + object-fit: cover; + object-position: 50% 50%; + } } } - .news-title { - height: 60px; + .news-body { + position: relative; + padding: 20px; + height: 220px; overflow: hidden; - } - h3 { - margin-bottom: 10px; - } - .date { - font-style: italic; - font-size: 14px; - } - a { - color: $blue; - text-decoration: none; - &:hover { - text-decoration: underline; + &:after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 90px; + background: linear-gradient(to top, white 50%, rgba(white, 0)); + pointer-events: none; + } + h3 { + font-size: 18px; + color: $blue; + line-height: 1.2; + } + .date { + color: lighten($black, 50%); + font-size: 14px; + } + p { + margin: 0; + position: absolute; + left: 20px; + right: 20px; + overflow: hidden; + } + a.read-more { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: 20px; + z-index: 1; } } } diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 95d14a1..6ea724c 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -7,6 +7,10 @@ body { .content { width: 1280px; + max-width: calc(100% - 40px); + @media (max-width: 1024px) { + max-width: 96.1%; // at 1024px 40px is 3.9% of screen width + } margin: 0 auto; } diff --git a/_sass/_reset.scss b/_sass/_reset.scss index ade5c33..d7f8e37 100644 --- a/_sass/_reset.scss +++ b/_sass/_reset.scss @@ -52,3 +52,6 @@ border-spacing: 0; *,*:after,*:before { box-sizing: inherit; } +body { + box-sizing: border-box; +} diff --git a/_sass/_typography.scss b/_sass/_typography.scss index 78d2e1b..eb50e7f 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -25,6 +25,7 @@ p { h1, h2, h3 { font-family: $font-heading; + font-weight: bold; } h1 { diff --git a/assets/css/style.scss b/assets/css/style.scss index 71a4b14..a1861ed 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -28,10 +28,3 @@ @import "post"; @import "junk-drawer"; @import "styleguide"; - -//responsive overrides -//TODO merge these back into the rest of the SCSS files -@import "1024"; -@import "768"; -@import "640"; -@import "480"; diff --git a/index.html b/index.html index 930c92b..853e9ff 100644 --- a/index.html +++ b/index.html @@ -4,182 +4,200 @@ title: pages.home.title description: pages.home.description --- - + {% tf home/hero.html %} -
- - -
+
+

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

{% tmd pages.home.video-text %} {% t pages.home.video-btn %} -
+
+ - -
-
- {% t pages.home.feature-private-heading %} -

{% t pages.home.feature-private-heading %}

- {% tmd pages.home.feature-private-text %} -
-
- {% t pages.home.feature-instant-heading %} -

{% t pages.home.feature-instant-heading %}

- {% tmd pages.home.feature-instant-text %} +
+
+
+ {% t pages.home.feature-private-heading %} +

{% t pages.home.feature-private-heading %}

+ {% tmd pages.home.feature-private-text %} +
+
+ {% t pages.home.feature-instant-heading %} +

{% t pages.home.feature-instant-heading %}

+ {% tmd pages.home.feature-instant-text %} +
+
+ {% t pages.home.feature-secure-heading %} +

{% t pages.home.feature-secure-heading %}

+ {% tmd pages.home.feature-secure-text %} +
-
- {% t pages.home.feature-secure-heading %} -

{% t pages.home.feature-secure-heading %}

- {% tmd pages.home.feature-secure-text %} -
-
+ - -
-

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

+
+
+
+

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

- {% tmd pages.home.merchants-text %} -
+ {% tmd pages.home.merchants-text %} +
-
-
- -
-
- -
-
- -
-
- -
-
+
+ + + + +
-
- {% t pages.home.merchants-btn %} - {% t pages.home.merchants-join-btn %} -
- - -
-
-

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

+
+
+
+

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

- {% tmd pages.home.architecture-text %} + {% tmd pages.home.architecture-text %} - {% t pages.home.architecture-btn %} + {% t pages.home.architecture-btn %} +
+
+ {% t pages.home.architecture-heading %} +
-
- {% t pages.home.architecture-heading %} -
-
- - -
-
- {% t pages.home.governance-heading%} +
+
+
+

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

+ + {% tmd pages.home.governance-text %} + + {% t pages.home.proposal-btn %} + + {% t pages.home.proposal-submit-btn %} +
+
+ {% t pages.home.governance-heading%} +
-
-

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

+
- {% tmd pages.home.governance-text %} - - {% t pages.home.proposal-btn %} - - {% t pages.home.proposal-submit-btn %} -
-
- - -
-
-

{% t pages.home.network-growth-heading %}

+
+
+
+

{% t pages.home.network-growth-heading %}

- {% tmd pages.home.network-growth-text %} + {% tmd pages.home.network-growth-text %} - {% t pages.home.network-growth-btn %} + {% t pages.home.network-growth-btn %} +
+
+ {% t pages.home.network-growth-heading %} +
-
- {% t pages.home.network-growth-heading %} -
-
+
- -
-
- +
+
+
+

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

+ + {% tmd pages.home.evolution-text %} + + {% t pages.home.evolution-btn %} +
+
+ +
-
-

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

+
- {% tmd pages.home.evolution-text %} - - {% t pages.home.evolution-btn %} -
-
- - -
-

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

-
+
+
+

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

-
- {% for post in site.posts limit:4 %} -
-
-
- {% if post.image %} - - {% endif %} +
+ {% for post in site.posts limit:4 %} +
+
+
+ {% if post.image %} + + {% endif %} +
+
+

{{ post.title }}

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

{{ post.excerpt | strip_html | truncate: 250 }}

+ Read More... +
+
-
-

{{ post.title }}

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

{{ post.excerpt | strip_html | truncatewords: 20 }}

- Read More... -
+ {% endfor %} +
+ +
- {% endfor %} -
+
-
- {% t pages.home.news-btn %} -
- - - -
-

{% t pages.home.get-started-heading %}

+
+
+

{% t pages.home.get-started-heading %}

- {% tmd pages.home.get-started-text %} + {% tmd pages.home.get-started-text %} - {% t pages.home.get-started-btn %} -
- - -
\ No newline at end of file + {% t pages.home.get-started-btn %} +
+ + +