mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
[Feature] Mobile Nav + Burger / CTA on Home
This commit is contained in:
0xfff
parent
c2c4e509d8
commit
3685f559fd
15 changed files with 307 additions and 503 deletions
|
|
@ -19,7 +19,7 @@ pages:
|
|||
|
||||
video-heading: Dash is Digital Cash You Can Spend Online
|
||||
video-text: Use Dash to make instant, anonymous payments online or in-store using our secure open-source platform hosted by thousands of users around the world.
|
||||
video-btn: Watch Overview Video
|
||||
video-btn: Overview Video
|
||||
|
||||
feature-private-heading: Private
|
||||
feature-private-text: Dash is private.
|
||||
|
|
|
|||
|
|
@ -9,10 +9,11 @@
|
|||
{% assign logo-color = include.logo-color %}
|
||||
{% endif %}
|
||||
|
||||
<button class="burger" type="button" data-js-open-menu aria-label="Menu" aria-controls="overlaynavigation" aria-expanded="false"><div class="burger__burger"></div></button>
|
||||
|
||||
<header id="top" class="content">
|
||||
|
||||
<a href="{{ basenav }}/" class="logo"><img class="logo__img" src="/assets/img/logo-{{ logo-color }}.png" alt="Dash"></a>
|
||||
|
||||
<nav class="nav nav--{{ logo-color }}">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item"><a href="{{ basenav }}/" class="nav__link">{% t nav.what-is-dash %}</a></li>
|
||||
|
|
@ -51,7 +52,7 @@
|
|||
</li>
|
||||
{% endif %}
|
||||
|
||||
<li class="nav__item"><a href="{{ basenav }}" class="nav__link" title="{% t nav.search %}">S</a></li>
|
||||
<li class="nav__item nav__item--search"><a href="{{ basenav }}" class="nav__link" title="{% t nav.search %}">S</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% include base.html %}
|
||||
|
||||
<nav class="overlay-menu">
|
||||
<nav class="overlay-menu" id="overlaynavigation" aria-hidden="true">
|
||||
<ul>
|
||||
<li><a href="{{ basenav }}/">{% t nav.what-is-dash %}</a></li>
|
||||
<li><a href="{{ basenav }}/get-dash/">{% t nav.get-dash %}</a></li>
|
||||
|
|
@ -9,10 +9,14 @@
|
|||
<li><a href="{{ basenav }}/community/">{% t nav.community %}</a></li>
|
||||
<li><a href="{{ basenav }}/blog/">{% t nav.blog %}</a></li>
|
||||
<li><a href="{{ basenav }}">{% t nav.project %}</a></li>
|
||||
</ul>
|
||||
<!-- Secondary Navigation Languages-->
|
||||
<!-- {% if page.layout != 'post' %}
|
||||
<ul>
|
||||
|
||||
{% if page.layout != 'post' %}
|
||||
<li><a href="{{ basenav }}{{ page.url }}">{% t global.english %}</a></li>
|
||||
<li><a href="{{ basenav }}{{ page.url }}">{% t global.spanish %}</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
-->
|
||||
</nav>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</footer>
|
||||
|
||||
<!-- Mobile Nav -->
|
||||
<div class="overlay" id="overlay">
|
||||
<div class="overlay" id="overlay" data-js-overlay-menu>
|
||||
<a href="/"><img src="/assets/img/logo-white.png" alt="Dash" class="logo"></a>
|
||||
{% include nav-mobile.html %}
|
||||
</div>
|
||||
|
|
|
|||
11
index.html
11
index.html
|
|
@ -13,12 +13,15 @@ description: pages.home.description
|
|||
WHAT IS DASH?
|
||||
LINK TO VIDEO.
|
||||
-->
|
||||
<section>
|
||||
<div class="content">
|
||||
<h2>{% t pages.home.video-heading %}</h2>
|
||||
<section class="section section--home-cta">
|
||||
<div class="section__content">
|
||||
<h2 class="section__title">{% t pages.home.video-heading %}</h2>
|
||||
{% tmd pages.home.video-text %}
|
||||
|
||||
<a href="https://www.youtube.com/watch?v=S0oNO3mbBE8" class="btn-blue" target="_blank" data-js-popup="video">{% t pages.home.video-btn %}</a>
|
||||
<div class="section__btn-grp">
|
||||
<a href="https://www.youtube.com/watch?v=S0oNO3mbBE8" class="btn-blue btn-large" target="_blank" data-js-popup="video">{% t pages.home.video-btn %}</a>
|
||||
<a href="#" class="btn-blue-solid btn-large">{% t nav.download %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -52,5 +52,8 @@
|
|||
"uglify-js": "2.7.3",
|
||||
"watch": "0.19.2"
|
||||
},
|
||||
"dependencies": {}
|
||||
"dependencies": {
|
||||
"no-scroll": "^2.0.0",
|
||||
"sass-burger": "^1.3.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
|
||||
/*eslint-enable */
|
||||
|
||||
if (document.getElementById('boids')) {
|
||||
|
||||
window.particlesJS('boids', {
|
||||
'particles': {
|
||||
'number': {
|
||||
|
|
@ -129,5 +131,6 @@
|
|||
'background_size': 'cover'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -2,9 +2,27 @@
|
|||
|
||||
$(function() {
|
||||
|
||||
$('#toggle').click(function() {
|
||||
$(this).toggleClass('active');
|
||||
$('#overlay').toggleClass('open');
|
||||
var isOpen = false,
|
||||
$overlay = $('[data-js-overlay-menu]'),
|
||||
$burger = $('[data-js-open-menu]');
|
||||
|
||||
$burger.click(function() {
|
||||
var $this = $(this);
|
||||
|
||||
isOpen = !isOpen;
|
||||
|
||||
$this.toggleClass('is-active', isOpen);
|
||||
$overlay.toggleClass('is-open', isOpen);
|
||||
|
||||
if (isOpen) {
|
||||
window.noScroll.on();
|
||||
$overlay.attr('aria-hidden', 'false');
|
||||
$burger.attr('aria-expanded', 'true');
|
||||
} else {
|
||||
window.noScroll.off();
|
||||
$overlay.attr('aria-hidden', 'true');
|
||||
$burger.attr('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
65
src/js/no-scroll.js
Normal file
65
src/js/no-scroll.js
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/**
|
||||
* no-scroll 2.0.0
|
||||
* github.com/davidtheclark/no-scroll
|
||||
* @license MIT
|
||||
**/
|
||||
|
||||
/*eslint-disable */
|
||||
|
||||
(function(root) {
|
||||
var scrollbarSize;
|
||||
var scrollTop;
|
||||
|
||||
function getScrollbarSize() {
|
||||
if (typeof scrollbarSize !== 'undefined') return scrollbarSize;
|
||||
|
||||
var doc = document.documentElement;
|
||||
var dummyScroller = document.createElement('div');
|
||||
dummyScroller.setAttribute('style', 'width:99px;height:99px;' + 'position:absolute;top:-9999px;overflow:scroll;');
|
||||
doc.appendChild(dummyScroller);
|
||||
scrollbarSize = dummyScroller.offsetWidth - dummyScroller.clientWidth;
|
||||
doc.removeChild(dummyScroller);
|
||||
return scrollbarSize;
|
||||
}
|
||||
|
||||
function hasScrollbar() {
|
||||
return document.documentElement.scrollHeight > window.innerHeight;
|
||||
}
|
||||
|
||||
function on(options) {
|
||||
if (typeof document === 'undefined') return;
|
||||
var doc = document.documentElement;
|
||||
scrollTop = window.pageYOffset;
|
||||
if (hasScrollbar()) {
|
||||
doc.style.width = 'calc(100% - '+ getScrollbarSize() +'px)';
|
||||
} else {
|
||||
doc.style.width = '100%';
|
||||
}
|
||||
doc.style.position = 'fixed';
|
||||
doc.style.top = -scrollTop + 'px';
|
||||
doc.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function off() {
|
||||
if (typeof document === 'undefined') return;
|
||||
var doc = document.documentElement;
|
||||
doc.style.width = '';
|
||||
doc.style.position = '';
|
||||
doc.style.top = '';
|
||||
doc.style.overflow = '';
|
||||
window.scroll(0, scrollTop);
|
||||
}
|
||||
|
||||
var noScroll = {
|
||||
on: on,
|
||||
off: off,
|
||||
};
|
||||
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||
module.exports = noScroll;
|
||||
} else {
|
||||
root.noScroll = noScroll;
|
||||
}
|
||||
})(this);
|
||||
|
||||
/*eslint-enable */
|
||||
|
|
@ -32,13 +32,13 @@
|
|||
|
||||
&__content {
|
||||
@extend .content; // DEV: Todo
|
||||
padding: 30px 0 120px;
|
||||
padding: 30px 0 100px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
@include mq($from: large) {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 140px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
@include mq($from: 1600px) {
|
||||
padding-bottom: 180px;
|
||||
|
|
|
|||
|
|
@ -1,234 +0,0 @@
|
|||
$homeSectionPaddingTop: 40px;
|
||||
|
||||
|
||||
.page--home {
|
||||
> section {
|
||||
padding: $homeSectionPaddingTop 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: $color-gray-light;
|
||||
}
|
||||
|
||||
.row {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 50em;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.features-collection {
|
||||
text-align: center;
|
||||
h2 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
p {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
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 $color-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, $color-gray-light, rgba($color-gray-light, 0.5) 33%, rgba($color-gray-light, 0) 75%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-evolution-graphic {
|
||||
@media (min-width: 768px) {
|
||||
z-index: 1;
|
||||
> img {
|
||||
top: -$homeSectionPaddingTop;
|
||||
bottom: -$homeSectionPaddingTop;
|
||||
max-width: none;
|
||||
max-height: calc(100% + 80px);
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -$homeSectionPaddingTop;
|
||||
bottom: -$homeSectionPaddingTop;
|
||||
width: 200%;
|
||||
background: linear-gradient(to left, $color-white 50%, rgba($color-white, 0) 87.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-get-started-cta {
|
||||
background-color: $color-blue;
|
||||
color: white;
|
||||
padding-bottom: 0;
|
||||
|
||||
h1, h2, h3 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 30px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.btn-white-solid {
|
||||
color: $color-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.home-latest-news {
|
||||
.btn-blue {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-collection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__logo {
|
||||
flex: 1 1 auto;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
&__image {
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.news-post {
|
||||
background-color: $color-white;
|
||||
box-shadow: 0 1px 4px rgba($color-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-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 {
|
||||
font-size: 18px;
|
||||
color: $color-blue;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.date {
|
||||
color: lighten($color-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,10 @@ $nav-height: 90px;
|
|||
float: right;
|
||||
text-align: right;
|
||||
|
||||
@include mq($to: large) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__list {
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,129 +1,37 @@
|
|||
.container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
top: 40%;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
p {
|
||||
font-size: 18px;
|
||||
}
|
||||
a {
|
||||
@import "../../node_modules/sass-burger/burger";
|
||||
|
||||
.burger {
|
||||
/* DEV: reset styles */
|
||||
border:none;
|
||||
background-image:none;
|
||||
background-color:transparent;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
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%;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transition: .35s ease;
|
||||
}
|
||||
.a:hover:after, a:focus:after, a:active:after {
|
||||
width: 100%;
|
||||
}
|
||||
z-index: 105;
|
||||
top: 23px;
|
||||
right: 25px;
|
||||
height: 45px;
|
||||
width: 50px;
|
||||
padding: 5px;
|
||||
|
||||
@include mq($from: large) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#hero{
|
||||
.button_container {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 30px;
|
||||
height: 23px;
|
||||
width: 32px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
transition: opacity .25s ease;
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
span {
|
||||
background: $color-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;
|
||||
}
|
||||
span:nth-of-type(3) {
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.button_container.active .top {
|
||||
transform: translateY(8px) translateX(0) rotate(45deg);
|
||||
background: $color-white;
|
||||
}
|
||||
.button_container.active .middle {
|
||||
opacity: 0;
|
||||
background: $color-white;
|
||||
}
|
||||
.button_container.active .bottom {
|
||||
transform: translateY(-8px) translateX(0) rotate(-45deg);
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.button_container {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
height: 23px;
|
||||
width: 32px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
transition: opacity .25s ease;
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
span {
|
||||
background: $color-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;
|
||||
}
|
||||
span:nth-of-type(3) {
|
||||
top: 16px;
|
||||
&__burger {
|
||||
@include burger(40px, 3px, 7px, #fff);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.button_container.active .top {
|
||||
transform: translateY(8px) translateX(0) rotate(45deg);
|
||||
background: $color-blue;
|
||||
.burger.is-active {
|
||||
.burger__burger {
|
||||
@include burger-to-cross;
|
||||
}
|
||||
.button_container.active .middle {
|
||||
opacity: 0;
|
||||
background: $color-blue;
|
||||
}
|
||||
.button_container.active .bottom {
|
||||
transform: translateY(-8px) translateX(0) rotate(-45deg);
|
||||
background: $color-blue;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
|
@ -134,6 +42,7 @@
|
|||
width: 100%;
|
||||
height: 0%;
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
visibility: hidden;
|
||||
transition: opacity .35s, visibility .35s, height .35s;
|
||||
overflow: hidden;
|
||||
|
|
@ -142,15 +51,14 @@
|
|||
width: 180px;
|
||||
height: auto;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: relative;
|
||||
height: 70%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
top: 150px;
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
|
|
@ -166,9 +74,6 @@
|
|||
height: 50%;
|
||||
li {
|
||||
display: block;
|
||||
height: 16%;
|
||||
height: calc(100% / 6);
|
||||
min-height: 50px;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -178,8 +83,6 @@
|
|||
color: $color-white;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
a:hover:after, a:focus:after, a:active:after {
|
||||
width: 100%;
|
||||
|
|
@ -196,7 +99,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.overlay.open {
|
||||
.overlay.is-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
height: 100%;
|
||||
|
|
@ -204,15 +107,12 @@
|
|||
animation: fadeInRight .5s ease forwards;
|
||||
animation-delay: .35s;
|
||||
}
|
||||
li:nth-of-type(2) {
|
||||
animation-delay: .4s;
|
||||
@for $i from 1 through 10 {
|
||||
li:nth-of-type($i) {
|
||||
animation-delay: (0.4s + 0.05s * $i);
|
||||
}
|
||||
li:nth-of-type(3) {
|
||||
animation-delay: .45s;
|
||||
}
|
||||
li:nth-of-type(4) {
|
||||
animation-delay: .50s;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,14 @@ $m: 'section';
|
|||
|
||||
.#{$m} {
|
||||
padding-bottom: 100px;
|
||||
width: 100%;
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
max-width: $content-max-width;
|
||||
padding: 0 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&--claim {
|
||||
text-align: center;
|
||||
|
|
@ -12,7 +20,7 @@ $m: 'section';
|
|||
|
||||
&__title {
|
||||
@include font-title-xxlarge();
|
||||
margin-bottom: 17px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&__lead {
|
||||
@include font-title-xlarge-subline();
|
||||
|
|
@ -21,4 +29,27 @@ $m: 'section';
|
|||
}
|
||||
}
|
||||
|
||||
&--home-cta {
|
||||
text-align: center;
|
||||
padding-bottom: 60px;
|
||||
width: 100%;
|
||||
|
||||
.#{$m} {
|
||||
&__title {
|
||||
@include font-title-large();
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&__btn-grp {
|
||||
margin: 25px 0;
|
||||
@include mq($to: 600px) { // optical
|
||||
& > * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,19 @@
|
|||
$homeSectionPaddingTop: 40px;
|
||||
$homeSectionPaddingTop: 80px;
|
||||
|
||||
|
||||
.page--home {
|
||||
> section {
|
||||
> section:not(.section) { // TEMP
|
||||
padding: ($homeSectionPaddingTop/2) 0;
|
||||
|
||||
@include mq($from: small) {
|
||||
padding: $homeSectionPaddingTop 0;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: $color-gray-light;
|
||||
}
|
||||
|
|
@ -69,7 +75,7 @@ $homeSectionPaddingTop: 40px;
|
|||
.home-architecture-graphic {
|
||||
> img {
|
||||
max-width: 100%;
|
||||
box-shadow: -5px 0 10px $color-black;
|
||||
box-shadow: -5px 0 10px transparentize($color-black,0.8);
|
||||
border-radius: 8px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -84,7 +90,7 @@ $homeSectionPaddingTop: 40px;
|
|||
}
|
||||
|
||||
.home-network-graphic {
|
||||
min-height: 250px;
|
||||
min-height: 150px;
|
||||
max-width: none;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue