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/_config.yml b/_config.yml index d499b3f..5d903f8 100644 --- a/_config.yml +++ b/_config.yml @@ -15,11 +15,16 @@ languages: ["en", "es", "cn", "pt", "ru", "it"] exclude_from_localizations: ["assets"] sass: - style: compressed - cache: false + style: compressed + cache: false -gems: +autoprefixer: + browsers: + - last 2 versions + +gems: - jekyll-paginate + - jekyll-autoprefixer collections: components: # style guide 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 87662fd..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; - } - } -} \ No newline at end of file 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 73bc7ad..924602d 100644 --- a/_sass/_colors.scss +++ b/_sass/_colors.scss @@ -8,32 +8,34 @@ $red: #ec2227; $green: #1dd68a; $gray: #f0f0f0; $dark-blue: #0b3b5a; +$gray-light: #f7f9fa; // for the style guide: @function contrast-color($color, $dark, $light, $threshold: 50) { - @if (lightness(scale-color($color, $green: 30%, $blue: -6%, $red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm - @return $dark; // Lighter background, return dark color - } @else { - @return $light; // Darker background, return light color - } + @if (lightness(scale-color($color, $green: 30%, $blue: -6%, $red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm + @return $dark; // Lighter background, return dark color + } @else { + @return $light; // Darker background, return light color + } } $color: - ('black', $black), - ('white', $white), + ('black', $black), + ('white', $white), - ('blue', $blue), - ('red', $red), - ('green', $green), + ('blue', $blue), + ('red', $red), + ('green', $green), - ('gray', $gray), - ('dark-blue', $dark-blue); + ('gray', $gray), + ('dark-blue', $dark-blue), + ('gray-light', $gray-light); @each $name, $bgcolor in $color { - .color__tile--#{$name}-bg { - background-color: $bgcolor; - color: contrast-color($bgcolor, #000, #fff); - box-shadow: 0 0 10px -4px contrast-color($bgcolor, black, transparent, 80) inset; - } + .color__tile--#{$name}-bg { + background-color: $bgcolor; + color: contrast-color($bgcolor, #000, #fff); + box-shadow: 0 0 10px -4px contrast-color($bgcolor, black, transparent, 80) inset; + } } diff --git a/_sass/_directives.scss b/_sass/_directives.scss index 51e43a0..57b5f2c 100644 --- a/_sass/_directives.scss +++ b/_sass/_directives.scss @@ -3,9 +3,9 @@ This is for time-saving base classes that get @extend -ed */ %clearfix { - &:after { - content: ""; - display: table; - clear: both; - } + &:after { + content: ""; + display: table; + clear: both; + } } diff --git a/_sass/_footer.scss b/_sass/_footer.scss index 43febab..66997b1 100644 --- a/_sass/_footer.scss +++ b/_sass/_footer.scss @@ -1,46 +1,44 @@ /* footer - nav.content - section x5 - - ul - li - .footer--menu.content - .footer--languagePicker - a x3 - .footer--legal - .content - .footer--copyright - a + nav.content + section x5 + + ul + li + .footer--menu.content + .footer--languagePicker + a x3 + .footer--legal + .content + .footer--copyright + a */ footer { - background-color: #333333; - color: #717171; - padding-top: 4em; + background-color: #333333; + color: #717171; + padding-top: 4em; - a { - color: $white; - } + a { + color: $white; + } - > nav { - display: table; - table-layout: fixed; - > section { - display: table-cell; - > ul { - margin: 1em 0 0; - padding: 0; - > li { - list-style: none; - } - } - } - } + > nav { + display: table; + table-layout: fixed; + > section { + display: table-cell; + > ul { + margin: 1em 0 0; + padding: 0; + > li { + list-style: none; + } + } + } + } } .footer--social { - -moz-column-count: 2; - -webkit-column-count: 2; - column-count: 2; + column-count: 2; } diff --git a/_sass/_forms.scss b/_sass/_forms.scss index 6e6656c..fc40cb3 100644 --- a/_sass/_forms.scss +++ b/_sass/_forms.scss @@ -4,7 +4,7 @@ form { padding: 10px 5px 10px 5px; border: 2px solid $black; box-sizing: border-box; - -webkit-appearance: none; + appearance: none; } .username { background-image: url(../images/icon-username.png); @@ -22,4 +22,4 @@ form { padding-left: 40px; color: #ccc; } -} \ No newline at end of file +} diff --git a/_sass/_grid.scss b/_sass/_grid.scss index 340b90a..ce3dd0c 100644 --- a/_sass/_grid.scss +++ b/_sass/_grid.scss @@ -1,11 +1,11 @@ @-ms-viewport { - width: device-width; + width: device-width; } .visible-xs, .visible-sm, .visible-md, .visible-lg { - display: none !important; + display: none !important; } .visible-xs-block, .visible-xs-inline, @@ -19,861 +19,861 @@ .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { - display: none !important; + display: none !important; } @media (max-width: 767px) { - .visible-xs { - display: block !important; - } - table.visible-xs { - display: table; - } - tr.visible-xs { - display: table-row !important; - } - th.visible-xs, - td.visible-xs { - display: table-cell !important; - } + .visible-xs { + display: block !important; + } + table.visible-xs { + display: table; + } + tr.visible-xs { + display: table-row !important; + } + th.visible-xs, + td.visible-xs { + display: table-cell !important; + } } @media (max-width: 767px) { - .visible-xs-block { - display: block !important; - } + .visible-xs-block { + display: block !important; + } } @media (max-width: 767px) { - .visible-xs-inline { - display: inline !important; - } + .visible-xs-inline { + display: inline !important; + } } @media (max-width: 767px) { - .visible-xs-inline-block { - display: inline-block !important; - } + .visible-xs-inline-block { + display: inline-block !important; + } } @media (min-width: 768px) and (max-width: 991px) { - .visible-sm { - display: block !important; - } - table.visible-sm { - display: table; - } - tr.visible-sm { - display: table-row !important; - } - th.visible-sm, - td.visible-sm { - display: table-cell !important; - } + .visible-sm { + display: block !important; + } + table.visible-sm { + display: table; + } + tr.visible-sm { + display: table-row !important; + } + th.visible-sm, + td.visible-sm { + display: table-cell !important; + } } @media (min-width: 768px) and (max-width: 991px) { - .visible-sm-block { - display: block !important; - } + .visible-sm-block { + display: block !important; + } } @media (min-width: 768px) and (max-width: 991px) { - .visible-sm-inline { - display: inline !important; - } + .visible-sm-inline { + display: inline !important; + } } @media (min-width: 768px) and (max-width: 991px) { - .visible-sm-inline-block { - display: inline-block !important; - } + .visible-sm-inline-block { + display: inline-block !important; + } } @media (min-width: 992px) and (max-width: 1199px) { - .visible-md { - display: block !important; - } - table.visible-md { - display: table; - } - tr.visible-md { - display: table-row !important; - } - th.visible-md, - td.visible-md { - display: table-cell !important; - } + .visible-md { + display: block !important; + } + table.visible-md { + display: table; + } + tr.visible-md { + display: table-row !important; + } + th.visible-md, + td.visible-md { + display: table-cell !important; + } } @media (min-width: 992px) and (max-width: 1199px) { - .visible-md-block { - display: block !important; - } + .visible-md-block { + display: block !important; + } } @media (min-width: 992px) and (max-width: 1199px) { - .visible-md-inline { - display: inline !important; - } + .visible-md-inline { + display: inline !important; + } } @media (min-width: 992px) and (max-width: 1199px) { - .visible-md-inline-block { - display: inline-block !important; - } + .visible-md-inline-block { + display: inline-block !important; + } } @media (min-width: 1200px) { - .visible-lg { - display: block !important; - } - table.visible-lg { - display: table; - } - tr.visible-lg { - display: table-row !important; - } - th.visible-lg, - td.visible-lg { - display: table-cell !important; - } + .visible-lg { + display: block !important; + } + table.visible-lg { + display: table; + } + tr.visible-lg { + display: table-row !important; + } + th.visible-lg, + td.visible-lg { + display: table-cell !important; + } } @media (min-width: 1200px) { - .visible-lg-block { - display: block !important; - } + .visible-lg-block { + display: block !important; + } } @media (min-width: 1200px) { - .visible-lg-inline { - display: inline !important; - } + .visible-lg-inline { + display: inline !important; + } } @media (min-width: 1200px) { - .visible-lg-inline-block { - display: inline-block !important; - } + .visible-lg-inline-block { + display: inline-block !important; + } } @media (max-width: 767px) { - .hidden-xs { - display: none !important; - } + .hidden-xs { + display: none !important; + } } @media (min-width: 768px) and (max-width: 991px) { - .hidden-sm { - display: none !important; - } + .hidden-sm { + display: none !important; + } } @media (min-width: 992px) and (max-width: 1199px) { - .hidden-md { - display: none !important; - } + .hidden-md { + display: none !important; + } } @media (min-width: 1200px) { - .hidden-lg { - display: none !important; - } + .hidden-lg { + display: none !important; + } } .visible-print { - display: none !important; + display: none !important; } @media print { - .visible-print { - display: block !important; - } - table.visible-print { - display: table; - } - tr.visible-print { - display: table-row !important; - } - th.visible-print, - td.visible-print { - display: table-cell !important; - } + .visible-print { + display: block !important; + } + table.visible-print { + display: table; + } + tr.visible-print { + display: table-row !important; + } + th.visible-print, + td.visible-print { + display: table-cell !important; + } } .visible-print-block { - display: none !important; + display: none !important; } @media print { - .visible-print-block { - display: block !important; - } + .visible-print-block { + display: block !important; + } } .visible-print-inline { - display: none !important; + display: none !important; } @media print { - .visible-print-inline { - display: inline !important; - } + .visible-print-inline { + display: inline !important; + } } .visible-print-inline-block { - display: none !important; + display: none !important; } @media print { - .visible-print-inline-block { - display: inline-block !important; - } + .visible-print-inline-block { + display: inline-block !important; + } } @media print { - .hidden-print { - display: none !important; - } + .hidden-print { + display: none !important; + } } .container { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; } @media (min-width: 768px) { - .container { - width: 750px; - } + .container { + width: 750px; + } } @media (min-width: 992px) { - .container { - width: 970px; - } + .container { + width: 970px; + } } @media (min-width: 1200px) { - .container { - width: 1170px; - } + .container { + width: 1170px; + } } .container-fluid { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; } .row { - margin-left: -15px; - margin-right: -15px; + margin-left: -15px; + margin-right: -15px; } .col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { - position: relative; - min-height: 1px; - padding-left: 15px; - padding-right: 15px; + position: relative; + min-height: 1px; + padding-left: 15px; + padding-right: 15px; } .col, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { - float: left; + float: left; } .col-xs-12 { - width: 100%; + width: 100%; } .col-xs-11 { - width: 91.66666667%; + width: 91.66666667%; } .col-xs-10 { - width: 83.33333333%; + width: 83.33333333%; } .col-xs-9 { - width: 75%; + width: 75%; } .col-xs-8 { - width: 66.66666667%; + width: 66.66666667%; } .col-xs-7 { - width: 58.33333333%; + width: 58.33333333%; } .col-xs-6 { - width: 50%; + width: 50%; } .col-xs-5 { - width: 41.66666667%; + width: 41.66666667%; } .col-xs-4 { - width: 33.33333333%; + width: 33.33333333%; } .col-xs-3 { - width: 25%; + width: 25%; } .col-xs-2 { - width: 16.66666667%; + width: 16.66666667%; } .col-xs-1 { - width: 8.33333333%; + width: 8.33333333%; } .col-xs-pull-12 { - right: 100%; + right: 100%; } .col-xs-pull-11 { - right: 91.66666667%; + right: 91.66666667%; } .col-xs-pull-10 { - right: 83.33333333%; + right: 83.33333333%; } .col-xs-pull-9 { - right: 75%; + right: 75%; } .col-xs-pull-8 { - right: 66.66666667%; + right: 66.66666667%; } .col-xs-pull-7 { - right: 58.33333333%; + right: 58.33333333%; } .col-xs-pull-6 { - right: 50%; + right: 50%; } .col-xs-pull-5 { - right: 41.66666667%; + right: 41.66666667%; } .col-xs-pull-4 { - right: 33.33333333%; + right: 33.33333333%; } .col-xs-pull-3 { - right: 25%; + right: 25%; } .col-xs-pull-2 { - right: 16.66666667%; + right: 16.66666667%; } .col-xs-pull-1 { - right: 8.33333333%; + right: 8.33333333%; } .col-xs-pull-0 { - right: auto; + right: auto; } .col-xs-push-12 { - left: 100%; + left: 100%; } .col-xs-push-11 { - left: 91.66666667%; + left: 91.66666667%; } .col-xs-push-10 { - left: 83.33333333%; + left: 83.33333333%; } .col-xs-push-9 { - left: 75%; + left: 75%; } .col-xs-push-8 { - left: 66.66666667%; + left: 66.66666667%; } .col-xs-push-7 { - left: 58.33333333%; + left: 58.33333333%; } .col-xs-push-6 { - left: 50%; + left: 50%; } .col-xs-push-5 { - left: 41.66666667%; + left: 41.66666667%; } .col-xs-push-4 { - left: 33.33333333%; + left: 33.33333333%; } .col-xs-push-3 { - left: 25%; + left: 25%; } .col-xs-push-2 { - left: 16.66666667%; + left: 16.66666667%; } .col-xs-push-1 { - left: 8.33333333%; + left: 8.33333333%; } .col-xs-push-0 { - left: auto; + left: auto; } .col-xs-offset-12 { - margin-left: 100%; + margin-left: 100%; } .col-xs-offset-11 { - margin-left: 91.66666667%; + margin-left: 91.66666667%; } .col-xs-offset-10 { - margin-left: 83.33333333%; + margin-left: 83.33333333%; } .col-xs-offset-9 { - margin-left: 75%; + margin-left: 75%; } .col-xs-offset-8 { - margin-left: 66.66666667%; + margin-left: 66.66666667%; } .col-xs-offset-7 { - margin-left: 58.33333333%; + margin-left: 58.33333333%; } .col-xs-offset-6 { - margin-left: 50%; + margin-left: 50%; } .col-xs-offset-5 { - margin-left: 41.66666667%; + margin-left: 41.66666667%; } .col-xs-offset-4 { - margin-left: 33.33333333%; + margin-left: 33.33333333%; } .col-xs-offset-3 { - margin-left: 25%; + margin-left: 25%; } .col-xs-offset-2 { - margin-left: 16.66666667%; + margin-left: 16.66666667%; } .col-xs-offset-1 { - margin-left: 8.33333333%; + margin-left: 8.33333333%; } .col-xs-offset-0 { - margin-left: 0%; + margin-left: 0%; } @media (min-width: 768px) { - .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { - float: left; - } - .col-sm-12 { - width: 100%; - } - .col-sm-11 { - width: 91.66666667%; - } - .col-sm-10 { - width: 83.33333333%; - } - .col-sm-9 { - width: 75%; - } - .col-sm-8 { - width: 66.66666667%; - } - .col-sm-7 { - width: 58.33333333%; - } - .col-sm-6 { - width: 50%; - } - .col-sm-5 { - width: 41.66666667%; - } - .col-sm-4 { - width: 33.33333333%; - } - .col-sm-3 { - width: 25%; - } - .col-sm-2 { - width: 16.66666667%; - } - .col-sm-1 { - width: 8.33333333%; - } - .col-sm-pull-12 { - right: 100%; - } - .col-sm-pull-11 { - right: 91.66666667%; - } - .col-sm-pull-10 { - right: 83.33333333%; - } - .col-sm-pull-9 { - right: 75%; - } - .col-sm-pull-8 { - right: 66.66666667%; - } - .col-sm-pull-7 { - right: 58.33333333%; - } - .col-sm-pull-6 { - right: 50%; - } - .col-sm-pull-5 { - right: 41.66666667%; - } - .col-sm-pull-4 { - right: 33.33333333%; - } - .col-sm-pull-3 { - right: 25%; - } - .col-sm-pull-2 { - right: 16.66666667%; - } - .col-sm-pull-1 { - right: 8.33333333%; - } - .col-sm-pull-0 { - right: auto; - } - .col-sm-push-12 { - left: 100%; - } - .col-sm-push-11 { - left: 91.66666667%; - } - .col-sm-push-10 { - left: 83.33333333%; - } - .col-sm-push-9 { - left: 75%; - } - .col-sm-push-8 { - left: 66.66666667%; - } - .col-sm-push-7 { - left: 58.33333333%; - } - .col-sm-push-6 { - left: 50%; - } - .col-sm-push-5 { - left: 41.66666667%; - } - .col-sm-push-4 { - left: 33.33333333%; - } - .col-sm-push-3 { - left: 25%; - } - .col-sm-push-2 { - left: 16.66666667%; - } - .col-sm-push-1 { - left: 8.33333333%; - } - .col-sm-push-0 { - left: auto; - } - .col-sm-offset-12 { - margin-left: 100%; - } - .col-sm-offset-11 { - margin-left: 91.66666667%; - } - .col-sm-offset-10 { - margin-left: 83.33333333%; - } - .col-sm-offset-9 { - margin-left: 75%; - } - .col-sm-offset-8 { - margin-left: 66.66666667%; - } - .col-sm-offset-7 { - margin-left: 58.33333333%; - } - .col-sm-offset-6 { - margin-left: 50%; - } - .col-sm-offset-5 { - margin-left: 41.66666667%; - } - .col-sm-offset-4 { - margin-left: 33.33333333%; - } - .col-sm-offset-3 { - margin-left: 25%; - } - .col-sm-offset-2 { - margin-left: 16.66666667%; - } - .col-sm-offset-1 { - margin-left: 8.33333333%; - } - .col-sm-offset-0 { - margin-left: 0%; - } + .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { + float: left; + } + .col-sm-12 { + width: 100%; + } + .col-sm-11 { + width: 91.66666667%; + } + .col-sm-10 { + width: 83.33333333%; + } + .col-sm-9 { + width: 75%; + } + .col-sm-8 { + width: 66.66666667%; + } + .col-sm-7 { + width: 58.33333333%; + } + .col-sm-6 { + width: 50%; + } + .col-sm-5 { + width: 41.66666667%; + } + .col-sm-4 { + width: 33.33333333%; + } + .col-sm-3 { + width: 25%; + } + .col-sm-2 { + width: 16.66666667%; + } + .col-sm-1 { + width: 8.33333333%; + } + .col-sm-pull-12 { + right: 100%; + } + .col-sm-pull-11 { + right: 91.66666667%; + } + .col-sm-pull-10 { + right: 83.33333333%; + } + .col-sm-pull-9 { + right: 75%; + } + .col-sm-pull-8 { + right: 66.66666667%; + } + .col-sm-pull-7 { + right: 58.33333333%; + } + .col-sm-pull-6 { + right: 50%; + } + .col-sm-pull-5 { + right: 41.66666667%; + } + .col-sm-pull-4 { + right: 33.33333333%; + } + .col-sm-pull-3 { + right: 25%; + } + .col-sm-pull-2 { + right: 16.66666667%; + } + .col-sm-pull-1 { + right: 8.33333333%; + } + .col-sm-pull-0 { + right: auto; + } + .col-sm-push-12 { + left: 100%; + } + .col-sm-push-11 { + left: 91.66666667%; + } + .col-sm-push-10 { + left: 83.33333333%; + } + .col-sm-push-9 { + left: 75%; + } + .col-sm-push-8 { + left: 66.66666667%; + } + .col-sm-push-7 { + left: 58.33333333%; + } + .col-sm-push-6 { + left: 50%; + } + .col-sm-push-5 { + left: 41.66666667%; + } + .col-sm-push-4 { + left: 33.33333333%; + } + .col-sm-push-3 { + left: 25%; + } + .col-sm-push-2 { + left: 16.66666667%; + } + .col-sm-push-1 { + left: 8.33333333%; + } + .col-sm-push-0 { + left: auto; + } + .col-sm-offset-12 { + margin-left: 100%; + } + .col-sm-offset-11 { + margin-left: 91.66666667%; + } + .col-sm-offset-10 { + margin-left: 83.33333333%; + } + .col-sm-offset-9 { + margin-left: 75%; + } + .col-sm-offset-8 { + margin-left: 66.66666667%; + } + .col-sm-offset-7 { + margin-left: 58.33333333%; + } + .col-sm-offset-6 { + margin-left: 50%; + } + .col-sm-offset-5 { + margin-left: 41.66666667%; + } + .col-sm-offset-4 { + margin-left: 33.33333333%; + } + .col-sm-offset-3 { + margin-left: 25%; + } + .col-sm-offset-2 { + margin-left: 16.66666667%; + } + .col-sm-offset-1 { + margin-left: 8.33333333%; + } + .col-sm-offset-0 { + margin-left: 0%; + } } @media (min-width: 992px) { - .col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { - float: left; - } - .col-md-12 { - width: 100%; - } - .col-md-11 { - width: 91.66666667%; - } - .col-md-10 { - width: 83.33333333%; - } - .col-md-9 { - width: 75%; - } - .col-md-8 { - width: 66.66666667%; - } - .col-md-7 { - width: 58.33333333%; - } - .col-md-6 { - width: 50%; - } - .col-md-5 { - width: 41.66666667%; - } - .col-md-4 { - width: 33.33333333%; - } - .col-md-3 { - width: 25%; - } - .col-md-2 { - width: 16.66666667%; - } - .col-md-1 { - width: 8.33333333%; - } - .col-md-pull-12 { - right: 100%; - } - .col-md-pull-11 { - right: 91.66666667%; - } - .col-md-pull-10 { - right: 83.33333333%; - } - .col-md-pull-9 { - right: 75%; - } - .col-md-pull-8 { - right: 66.66666667%; - } - .col-md-pull-7 { - right: 58.33333333%; - } - .col-md-pull-6 { - right: 50%; - } - .col-md-pull-5 { - right: 41.66666667%; - } - .col-md-pull-4 { - right: 33.33333333%; - } - .col-md-pull-3 { - right: 25%; - } - .col-md-pull-2 { - right: 16.66666667%; - } - .col-md-pull-1 { - right: 8.33333333%; - } - .col-md-pull-0 { - right: auto; - } - .col-md-push-12 { - left: 100%; - } - .col-md-push-11 { - left: 91.66666667%; - } - .col-md-push-10 { - left: 83.33333333%; - } - .col-md-push-9 { - left: 75%; - } - .col-md-push-8 { - left: 66.66666667%; - } - .col-md-push-7 { - left: 58.33333333%; - } - .col-md-push-6 { - left: 50%; - } - .col-md-push-5 { - left: 41.66666667%; - } - .col-md-push-4 { - left: 33.33333333%; - } - .col-md-push-3 { - left: 25%; - } - .col-md-push-2 { - left: 16.66666667%; - } - .col-md-push-1 { - left: 8.33333333%; - } - .col-md-push-0 { - left: auto; - } - .col-md-offset-12 { - margin-left: 100%; - } - .col-md-offset-11 { - margin-left: 91.66666667%; - } - .col-md-offset-10 { - margin-left: 83.33333333%; - } - .col-md-offset-9 { - margin-left: 75%; - } - .col-md-offset-8 { - margin-left: 66.66666667%; - } - .col-md-offset-7 { - margin-left: 58.33333333%; - } - .col-md-offset-6 { - margin-left: 50%; - } - .col-md-offset-5 { - margin-left: 41.66666667%; - } - .col-md-offset-4 { - margin-left: 33.33333333%; - } - .col-md-offset-3 { - margin-left: 25%; - } - .col-md-offset-2 { - margin-left: 16.66666667%; - } - .col-md-offset-1 { - margin-left: 8.33333333%; - } - .col-md-offset-0 { - margin-left: 0%; - } + .col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { + float: left; + } + .col-md-12 { + width: 100%; + } + .col-md-11 { + width: 91.66666667%; + } + .col-md-10 { + width: 83.33333333%; + } + .col-md-9 { + width: 75%; + } + .col-md-8 { + width: 66.66666667%; + } + .col-md-7 { + width: 58.33333333%; + } + .col-md-6 { + width: 50%; + } + .col-md-5 { + width: 41.66666667%; + } + .col-md-4 { + width: 33.33333333%; + } + .col-md-3 { + width: 25%; + } + .col-md-2 { + width: 16.66666667%; + } + .col-md-1 { + width: 8.33333333%; + } + .col-md-pull-12 { + right: 100%; + } + .col-md-pull-11 { + right: 91.66666667%; + } + .col-md-pull-10 { + right: 83.33333333%; + } + .col-md-pull-9 { + right: 75%; + } + .col-md-pull-8 { + right: 66.66666667%; + } + .col-md-pull-7 { + right: 58.33333333%; + } + .col-md-pull-6 { + right: 50%; + } + .col-md-pull-5 { + right: 41.66666667%; + } + .col-md-pull-4 { + right: 33.33333333%; + } + .col-md-pull-3 { + right: 25%; + } + .col-md-pull-2 { + right: 16.66666667%; + } + .col-md-pull-1 { + right: 8.33333333%; + } + .col-md-pull-0 { + right: auto; + } + .col-md-push-12 { + left: 100%; + } + .col-md-push-11 { + left: 91.66666667%; + } + .col-md-push-10 { + left: 83.33333333%; + } + .col-md-push-9 { + left: 75%; + } + .col-md-push-8 { + left: 66.66666667%; + } + .col-md-push-7 { + left: 58.33333333%; + } + .col-md-push-6 { + left: 50%; + } + .col-md-push-5 { + left: 41.66666667%; + } + .col-md-push-4 { + left: 33.33333333%; + } + .col-md-push-3 { + left: 25%; + } + .col-md-push-2 { + left: 16.66666667%; + } + .col-md-push-1 { + left: 8.33333333%; + } + .col-md-push-0 { + left: auto; + } + .col-md-offset-12 { + margin-left: 100%; + } + .col-md-offset-11 { + margin-left: 91.66666667%; + } + .col-md-offset-10 { + margin-left: 83.33333333%; + } + .col-md-offset-9 { + margin-left: 75%; + } + .col-md-offset-8 { + margin-left: 66.66666667%; + } + .col-md-offset-7 { + margin-left: 58.33333333%; + } + .col-md-offset-6 { + margin-left: 50%; + } + .col-md-offset-5 { + margin-left: 41.66666667%; + } + .col-md-offset-4 { + margin-left: 33.33333333%; + } + .col-md-offset-3 { + margin-left: 25%; + } + .col-md-offset-2 { + margin-left: 16.66666667%; + } + .col-md-offset-1 { + margin-left: 8.33333333%; + } + .col-md-offset-0 { + margin-left: 0%; + } } @media (min-width: 1200px) { - .col, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { - float: left; - } - .col-lg-12 { - width: 100%; - } - .col-lg-11 { - width: 91.66666667%; - } - .col-lg-10 { - width: 83.33333333%; - } - .col-lg-9 { - width: 75%; - } - .col-lg-8 { - width: 66.66666667%; - } - .col-lg-7 { - width: 58.33333333%; - } - .col-lg-6 { - width: 50%; - } - .col-lg-5 { - width: 41.66666667%; - } - .col-lg-4 { - width: 33.33333333%; - } - .col-lg-3 { - width: 25%; - } - .col-lg-2 { - width: 16.66666667%; - } - .col-lg-1 { - width: 8.33333333%; - } - .col-lg-pull-12 { - right: 100%; - } - .col-lg-pull-11 { - right: 91.66666667%; - } - .col-lg-pull-10 { - right: 83.33333333%; - } - .col-lg-pull-9 { - right: 75%; - } - .col-lg-pull-8 { - right: 66.66666667%; - } - .col-lg-pull-7 { - right: 58.33333333%; - } - .col-lg-pull-6 { - right: 50%; - } - .col-lg-pull-5 { - right: 41.66666667%; - } - .col-lg-pull-4 { - right: 33.33333333%; - } - .col-lg-pull-3 { - right: 25%; - } - .col-lg-pull-2 { - right: 16.66666667%; - } - .col-lg-pull-1 { - right: 8.33333333%; - } - .col-lg-pull-0 { - right: auto; - } - .col-lg-push-12 { - left: 100%; - } - .col-lg-push-11 { - left: 91.66666667%; - } - .col-lg-push-10 { - left: 83.33333333%; - } - .col-lg-push-9 { - left: 75%; - } - .col-lg-push-8 { - left: 66.66666667%; - } - .col-lg-push-7 { - left: 58.33333333%; - } - .col-lg-push-6 { - left: 50%; - } - .col-lg-push-5 { - left: 41.66666667%; - } - .col-lg-push-4 { - left: 33.33333333%; - } - .col-lg-push-3 { - left: 25%; - } - .col-lg-push-2 { - left: 16.66666667%; - } - .col-lg-push-1 { - left: 8.33333333%; - } - .col-lg-push-0 { - left: auto; - } - .col-lg-offset-12 { - margin-left: 100%; - } - .col-lg-offset-11 { - margin-left: 91.66666667%; - } - .col-lg-offset-10 { - margin-left: 83.33333333%; - } - .col-lg-offset-9 { - margin-left: 75%; - } - .col-lg-offset-8 { - margin-left: 66.66666667%; - } - .col-lg-offset-7 { - margin-left: 58.33333333%; - } - .col-lg-offset-6 { - margin-left: 50%; - } - .col-lg-offset-5 { - margin-left: 41.66666667%; - } - .col-lg-offset-4 { - margin-left: 33.33333333%; - } - .col-lg-offset-3 { - margin-left: 25%; - } - .col-lg-offset-2 { - margin-left: 16.66666667%; - } - .col-lg-offset-1 { - margin-left: 8.33333333%; - } - .col-lg-offset-0 { - margin-left: 0%; - } + .col, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { + float: left; + } + .col-lg-12 { + width: 100%; + } + .col-lg-11 { + width: 91.66666667%; + } + .col-lg-10 { + width: 83.33333333%; + } + .col-lg-9 { + width: 75%; + } + .col-lg-8 { + width: 66.66666667%; + } + .col-lg-7 { + width: 58.33333333%; + } + .col-lg-6 { + width: 50%; + } + .col-lg-5 { + width: 41.66666667%; + } + .col-lg-4 { + width: 33.33333333%; + } + .col-lg-3 { + width: 25%; + } + .col-lg-2 { + width: 16.66666667%; + } + .col-lg-1 { + width: 8.33333333%; + } + .col-lg-pull-12 { + right: 100%; + } + .col-lg-pull-11 { + right: 91.66666667%; + } + .col-lg-pull-10 { + right: 83.33333333%; + } + .col-lg-pull-9 { + right: 75%; + } + .col-lg-pull-8 { + right: 66.66666667%; + } + .col-lg-pull-7 { + right: 58.33333333%; + } + .col-lg-pull-6 { + right: 50%; + } + .col-lg-pull-5 { + right: 41.66666667%; + } + .col-lg-pull-4 { + right: 33.33333333%; + } + .col-lg-pull-3 { + right: 25%; + } + .col-lg-pull-2 { + right: 16.66666667%; + } + .col-lg-pull-1 { + right: 8.33333333%; + } + .col-lg-pull-0 { + right: auto; + } + .col-lg-push-12 { + left: 100%; + } + .col-lg-push-11 { + left: 91.66666667%; + } + .col-lg-push-10 { + left: 83.33333333%; + } + .col-lg-push-9 { + left: 75%; + } + .col-lg-push-8 { + left: 66.66666667%; + } + .col-lg-push-7 { + left: 58.33333333%; + } + .col-lg-push-6 { + left: 50%; + } + .col-lg-push-5 { + left: 41.66666667%; + } + .col-lg-push-4 { + left: 33.33333333%; + } + .col-lg-push-3 { + left: 25%; + } + .col-lg-push-2 { + left: 16.66666667%; + } + .col-lg-push-1 { + left: 8.33333333%; + } + .col-lg-push-0 { + left: auto; + } + .col-lg-offset-12 { + margin-left: 100%; + } + .col-lg-offset-11 { + margin-left: 91.66666667%; + } + .col-lg-offset-10 { + margin-left: 83.33333333%; + } + .col-lg-offset-9 { + margin-left: 75%; + } + .col-lg-offset-8 { + margin-left: 66.66666667%; + } + .col-lg-offset-7 { + margin-left: 58.33333333%; + } + .col-lg-offset-6 { + margin-left: 50%; + } + .col-lg-offset-5 { + margin-left: 41.66666667%; + } + .col-lg-offset-4 { + margin-left: 33.33333333%; + } + .col-lg-offset-3 { + margin-left: 25%; + } + .col-lg-offset-2 { + margin-left: 16.66666667%; + } + .col-lg-offset-1 { + margin-left: 8.33333333%; + } + .col-lg-offset-0 { + margin-left: 0%; + } } .clearfix, .clearfix:before, @@ -884,30 +884,23 @@ .container-fluid:after, .row:before, .row:after { - content: " "; - display: table; + content: " "; + display: table; } .clearfix:after, .container:after, .container-fluid:after, .row:after { - clear: both; + clear: both; } .center-block { - display: block; - margin-left: auto; - margin-right: auto; + display: block; + margin-left: auto; + margin-right: auto; } .pull-right { - float: right !important; + float: right !important; } .pull-left { - float: left !important; + float: left !important; } -*, -*:before, -*:after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} \ No newline at end of file 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..b6c9fb7 100644 --- a/_sass/_home.scss +++ b/_sass/_home.scss @@ -1,94 +1,212 @@ -#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; + + &:nth-child(2n) { + background-color: $gray-light; + } + + .row { + text-align: left; + } + + .features-collection { + text-align: center; + } + h2 { - font-size: 26px; - margin-bottom: 10px; - span { - font-family: inherit; - font-size: inherit; - margin-bottom: inherit; - color: inherit; - } + margin-top: 40px; } - 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%; + @media (min-width: 768px) { + max-width: calc(100% - 20px); + } + } + } + + .col-sm-6 { + z-index: 2; // Lets me use z-index:1 for columns that underlap + } + + .home-architecture-graphic, + .home-budgets-graphic, + .home-network-graphic, + .home-evolution-graphic { + min-height: 350px; + @media (min-width: 768px) { + > img { + position: absolute; + } + } + @media (max-width: 767px) { + text-align: center; + > img { + margin-top: 20px; + } + } + } + + .home-architecture-graphic { + > img { + max-width: 100%; + box-shadow: -5px 0 10px $black; + border-radius: 8px 0 0 0; + } + } + + .home-budgets-graphic { + @media (min-width: 768px) { + min-height: 385px; + > img { + bottom: 10px; + } + } + } + + .home-network-graphic { + min-height: 250px; + max-width: none; + + @media (min-width: 768px) { + z-index: 1; + > img { + right: -20px; + bottom: -50px; + max-width: 150%; + } + &:after { + content: ''; + position: absolute; + right: -20px; + bottom: -50px; + width: 819px; + height: 339px; + max-width: 150%; + background: linear-gradient(to right, $gray-light, rgba($gray-light, 0.5) 33%, rgba($gray-light, 0) 75%); + } + } + } + + .home-evolution-graphic { + @media (min-width: 768px) { + z-index: 1; + > img { + top: -40px; + bottom: -40px; + max-width: none; + max-height: calc(100% + 80px); + } + &:after { + content: ''; + position: absolute; + top: -40px; + bottom: -40px; + width: 200%; + background: linear-gradient(to left, $white 50%, rgba($white, 0) 87.5%); + } + } + } + + .home-get-started-cta { + background-color: $blue; + color: white; + padding-bottom: 0; + + h1, h2, h3 { + color: white; + } + + img { + vertical-align: text-top; + } + + .btn-white-solid { + color: $blue; } } } -#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 { - width: 100%; - max-width: 310px; - max-height:205px; - height: auto; +.logo-collection { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + + > .logo { + flex: 1 1 auto; + margin: 20px 10px; + } +} + +.news-post { + 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%; + @supports (object-fit: cover) { + height: 100%; + object-fit: cover; + object-position: 50% 50%; } } - .news-title { - height: 60px; - overflow: hidden; + } + .news-body { + position: relative; + padding: 20px; + height: 220px; + overflow: hidden; + &: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 { - margin-bottom: 10px; + font-size: 18px; + color: $blue; + line-height: 1.2; } .date { - font-style: italic; + color: lighten($black, 50%); font-size: 14px; } - a { - color: $blue; - text-decoration: none; - &:hover { - text-decoration: underline; - } + 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/_junk-drawer.scss b/_sass/_junk-drawer.scss index cab345a..7fb6bf7 100644 --- a/_sass/_junk-drawer.scss +++ b/_sass/_junk-drawer.scss @@ -16,11 +16,9 @@ a.blog_link { } .img-circle { - margin: 1px; - border:1px solid #dddddd; - border-radius: 50%; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; + margin: 1px; + border:1px solid #dddddd; + border-radius: 50%; } .background-title { 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/_overlay-menu.scss b/_sass/_overlay-menu.scss index 2d4e53f..6c893ae 100644 --- a/_sass/_overlay-menu.scss +++ b/_sass/_overlay-menu.scss @@ -1,210 +1,191 @@ .container { - position: absolute; - width: 100%; - height: 100%; - text-align: center; - top: 40%; - left: 0; - margin: 0 auto; + position: absolute; + width: 100%; + height: 100%; + text-align: center; + top: 40%; + left: 0; + margin: 0 auto; p { - font-size: 18px; + font-size: 18px; } a { - display: inline-block; - position: relative; - text-align: center; - color: #FF5252; - text-decoration: none; - font-size: 18px; - overflow: hidden; - top: 5px; + display: inline-block; + position: relative; + text-align: center; + color: #FF5252; + text-decoration: none; + font-size: 18px; + overflow: hidden; + top: 5px; } a:after { - content: ''; - position: absolute; - background: #FF5252; - height: 2px; - width: 0%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); - left: 50%; - bottom: 0; - -webkit-transition: .35s ease; - transition: .35s ease; + content: ''; + position: absolute; + background: #FF5252; + height: 2px; + width: 0%; + transform: translateX(-50%); + left: 50%; + bottom: 0; + transition: .35s ease; } .a:hover:after, a:focus:after, a:active:after { - width: 100%; + width: 100%; } } #hero{ .button_container { - position: absolute; - top: 40px; - right: 30px; - height: 23px; - width: 32px; - cursor: pointer; - z-index: 100; - -webkit-transition: opacity .25s ease; - transition: opacity .25s ease; - &:hover { - opacity: .7; - } + position: absolute; + top: 40px; + right: 30px; + height: 23px; + width: 32px; + cursor: pointer; + z-index: 100; + transition: opacity .25s ease; + &:hover { + opacity: .7; + } span { - background: $white; - border: none; - height: 4px; - width: 100%; - position: absolute; - top: 0; - left: 0; - -webkit-transition: all .35s ease; - transition: all .35s ease; - cursor: pointer; + background: $white; + border: none; + height: 4px; + width: 100%; + position: absolute; + top: 0; + left: 0; + transition: all .35s ease; + cursor: pointer; } span:nth-of-type(2) { - top: 8px; + top: 8px; } span:nth-of-type(3) { - top: 16px; + top: 16px; } - } - + .button_container.active .top { - -webkit-transform: translateY(8px) translateX(0) rotate(45deg); - -ms-transform: translateY(8px) translateX(0) rotate(45deg); - transform: translateY(8px) translateX(0) rotate(45deg); - background: $white; + transform: translateY(8px) translateX(0) rotate(45deg); + background: $white; } .button_container.active .middle { - opacity: 0; - background: $white; + opacity: 0; + background: $white; } .button_container.active .bottom { - -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); - -ms-transform: translateY(-8px) translateX(0) rotate(-45deg); - transform: translateY(-8px) translateX(0) rotate(-45deg); - background: $white; + transform: translateY(-8px) translateX(0) rotate(-45deg); + background: $white; } } .button_container { - position: absolute; - top: 30px; - right: 30px; - height: 23px; - width: 32px; - cursor: pointer; - z-index: 100; - -webkit-transition: opacity .25s ease; - transition: opacity .25s ease; - &:hover { - opacity: .7; - } + position: absolute; + top: 30px; + right: 30px; + height: 23px; + width: 32px; + cursor: pointer; + z-index: 100; + transition: opacity .25s ease; + &:hover { + opacity: .7; + } span { - background: $blue; - border: none; - height: 4px; - width: 100%; - position: absolute; - top: 0; - left: 0; - -webkit-transition: all .35s ease; - transition: all .35s ease; - cursor: pointer; + background: $blue; + border: none; + height: 4px; + width: 100%; + position: absolute; + top: 0; + left: 0; + transition: all .35s ease; + cursor: pointer; } span:nth-of-type(2) { - top: 8px; + top: 8px; } span:nth-of-type(3) { - top: 16px; + top: 16px; } } .button_container.active .top { - -webkit-transform: translateY(8px) translateX(0) rotate(45deg); - -ms-transform: translateY(8px) translateX(0) rotate(45deg); - transform: translateY(8px) translateX(0) rotate(45deg); - background: $blue; + transform: translateY(8px) translateX(0) rotate(45deg); + background: $blue; } .button_container.active .middle { - opacity: 0; - background: $blue; + opacity: 0; + background: $blue; } .button_container.active .bottom { - -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); - -ms-transform: translateY(-8px) translateX(0) rotate(-45deg); - transform: translateY(-8px) translateX(0) rotate(-45deg); - background: $blue; + transform: translateY(-8px) translateX(0) rotate(-45deg); + background: $blue; } .overlay { - position: fixed; - background: $black; - top: 0; - left: 0; - width: 100%; - height: 0%; - opacity: 0; - visibility: hidden; - -webkit-transition: opacity .35s, visibility .35s, height .35s; - transition: opacity .35s, visibility .35s, height .35s; - overflow: hidden; - - .logo { + position: fixed; + background: $black; + top: 0; + left: 0; + width: 100%; + height: 0%; + opacity: 0; + visibility: hidden; + transition: opacity .35s, visibility .35s, height .35s; + overflow: hidden; + + .logo { width: 180px; height: auto; top: 30px; left: 30px; position: absolute; } - - nav { - position: relative; - height: 70%; - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - font-size: 36px; - font-weight: 200; - text-align: center; + + nav { + position: relative; + height: 70%; + top: 50%; + transform: translateY(-50%); + font-size: 36px; + font-weight: 200; + text-align: center; } - - ul { - list-style: none; - padding: 0; - margin: 0 auto; - margin-top: 0px; - display: inline-block; - position: relative; - height: 50%; + + ul { + list-style: none; + padding: 0; + margin: 0 auto; + margin-top: 0px; + display: inline-block; + position: relative; + height: 50%; li { - display: block; - height: 16%; - height: calc(100% / 6); - min-height: 50px; - position: relative; - opacity: 0; + display: block; + height: 16%; + height: calc(100% / 6); + min-height: 50px; + position: relative; + opacity: 0; } a { - display: block; - position: relative; - color: $white; - text-decoration: none; - overflow: hidden; - padding-bottom: 15px; - padding-top: 5px; + display: block; + position: relative; + color: $white; + text-decoration: none; + overflow: hidden; + padding-bottom: 15px; + padding-top: 5px; } a:hover:after, a:focus:after, a:active:after { width: 100%; } } - + .sign-up-btn { border: none; padding: 30px; @@ -216,47 +197,31 @@ } } .overlay.open { - opacity: 1; - visibility: visible; - height: 100%; - li { - -webkit-animation: fadeInRight .5s ease forwards; - animation: fadeInRight .5s ease forwards; - -webkit-animation-delay: .35s; - animation-delay: .35s; + opacity: 1; + visibility: visible; + height: 100%; + li { + animation: fadeInRight .5s ease forwards; + animation-delay: .35s; } li:nth-of-type(2) { - -webkit-animation-delay: .4s; - animation-delay: .4s; + animation-delay: .4s; } li:nth-of-type(3) { - -webkit-animation-delay: .45s; - animation-delay: .45s; + animation-delay: .45s; } li:nth-of-type(4) { - -webkit-animation-delay: .50s; - animation-delay: .50s; + animation-delay: .50s; } } -@-webkit-keyframes fadeInRight { - 0% { - opacity: 0; - left: 20%; - } - 100% { - opacity: 1; - left: 0; - } -} - @keyframes fadeInRight { - 0% { - opacity: 0; - left: 20%; - } - 100% { - opacity: 1; - left: 0; - } + 0% { + opacity: 0; + left: 20%; + } + 100% { + opacity: 1; + left: 0; + } } 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/_styleguide.scss b/_sass/_styleguide.scss index acd4a6c..ed967b3 100644 --- a/_sass/_styleguide.scss +++ b/_sass/_styleguide.scss @@ -1,20 +1,20 @@ #styleguide { - .component { - &:after { // TODO clearfix mixin - content: ''; - display: table; - clear: both; - } - } - .component + .component { - margin-top: 10px; - } + .component { + &:after { // TODO clearfix mixin + content: ''; + display: table; + clear: both; + } + } + .component + .component { + margin-top: 10px; + } - .color__tile { - display: inline-block; - padding: 20px; - text-align: center; - width: 10em; - border-radius: 10px; - } + .color__tile { + display: inline-block; + padding: 20px; + text-align: center; + width: 10em; + border-radius: 10px; + } } diff --git a/_sass/_typography.scss b/_sass/_typography.scss index b3fd7c3..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 { @@ -34,7 +35,7 @@ h1 { } h2 { - font-size: 22px; + font-size: 28px; color: $blue; } 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/assets/img/home/code.png b/assets/img/home/code.png index 76279e1..daf4cdf 100644 Binary files a/assets/img/home/code.png and b/assets/img/home/code.png differ diff --git a/assets/img/home/macbook.png b/assets/img/home/macbook.png new file mode 100644 index 0000000..9bea2fd Binary files /dev/null and b/assets/img/home/macbook.png differ diff --git a/index.html b/index.html index 930c92b..afecded 100644 --- a/index.html +++ b/index.html @@ -4,182 +4,206 @@ 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 %} +
+
+ Merchant using a laptop +
-
-

{% 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 %} + + +
+ + +