(Update) GetDash: Add module infogrid / refactor page scss / add inverted navigation style 'black'

_includes/hero/get-dash.html

@@ -1,4 +1,4 @@
-<div class="hero" id="hero">
+<div class="hero hero--light" id="hero">
 	<div id="background-video">
 		<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.get-dash.hero-image %}" class="background-video">
 		<!--  <source src="assets/videos/Home-BG.m4v" type="video/mp4">
@@ -8,14 +8,14 @@
 	</div>
 
 	<!-- Navigation -->
-	{% include nav-desktop.html %}
+	{% include nav-desktop.html logo-color='black' %}
 
 	<!-- Hero content -->
 	<div class="hero__content">
 		<h1 class="hero__title">{% t pages.get-dash.hero-heading %}</h1>
 		<p class="hero__lead">{% t pages.get-dash.hero-text %}</p>
 
-		<div class="hero__buttons">
+		<div class="hero__buttons hero__buttons--get-dash">
 			<a href="#" class="btn-blue-solid btn-large">{% t pages.get-dash.hero-download-btn %}</a>
 		</div>
 		<p class="hero__text">{% t pages.get-dash.hero-wallet-version %} – (<a href="#" class="hero__link">{% t pages.get-dash.hero-wallet-version-select %}</a>)</p>
@@ -26,4 +26,7 @@
 			<a href="#getdash-trade" class="btn-white-solid">{% t pages.get-dash.hero-trade-btn %}</a>
 		</div>
 	</div>
+
+	<!-- Hero stripe -->
+	<div class="hero__stripe hero__stripe--grey-blue"></div>
 </div>

_includes/hero/home.html

@@ -19,4 +19,7 @@
 			<a href="#" class="btn-blue-solid btn-large">{% t nav.get-dash %}</a>
 		</div>
 	</div>
+
+	<!-- Hero stripe -->
+	<div class="hero__stripe"></div>
 </div>

_includes/nav-desktop.html

@@ -13,7 +13,7 @@
 
     <a href="{{ basenav }}" class="logo"><img class="logo__img" src="/assets/img/logo-{{ logo-color }}.png" alt="Dash"></a>
 
-    <nav class="nav">
+    <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>
             <li class="nav__item"><a href="{{ basenav }}/get-dash/" class="nav__link">{% t nav.get-dash %}</a></li>

index.html

@@ -7,7 +7,7 @@ description: pages.home.description
 
 {% include hero/home.html %}
 
-<div class="page-home">
+<div class="page page--home">
 
 	<!--
 		WHAT IS DASH?

src/scss/_header.scss

@@ -1,12 +1,53 @@
 #top {
-	border-bottom: 1px solid rgba($color-white, 0.35);
+	// border-bottom: 1px solid rgba($color-white, 0.35);
 	margin-bottom: 20px;
+	position: relative;
+	z-index: 2;
 }
 
 .hero {
 	position: relative;
 	min-height: 600px;
 	color: $color-white;
+	overflow: hidden;
+
+	&__stripe {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		transform: skewY(-5deg);
+		transform-origin: 0;
+		background: $color-white;
+		z-index: 2;
+
+		// TODO: Make this dependent on hero modifier not a separate modifier for stripe
+		&--grey {
+			background: $color-gray-light;
+		}
+		&--grey-blue {
+			background: $color-gray-light-blueish;
+		}
+	}
+
+	#background-video {
+		z-index: 1;
+	}
+
+	&__content {
+		@extend .content; // DEV: Todo
+		padding: 60px 0 120px;
+		margin: 0 auto;
+		position: relative;
+		z-index: 3;
+	}
+
+	&__buttons {
+		margin-bottom: 20px; /*optical*/
+		&--get-dash {
+			margin-bottom: 0;
+		}
+	}
 
 	&__title, &__lead, &__text {
 		text-shadow: 2px 2px 5px rgba(black, 0.2);
@@ -23,7 +64,11 @@
 	}
 
 	&__text {
-		opacity: 0.8;
+		background: rgba(0,0,0,0.05);
+		border-radius: 17px;
+		padding: 1px 10px;
+		display: inline-block;
+		font-size: 15px;
 	}
 
 	&__lead,
@@ -36,13 +81,16 @@
 		}
 	}
 
-	&__content {
-		@extend .content; // DEV: Todo
-		padding: ($size-gutter * 4) 0 ($size-gutter * 5);
-		margin: 0 auto;
-	}
+	&--light {
+		color: $color-black;
 
-	&__buttons {
-		margin-bottom: 20px; /*optical*/
+		.hero {
+			&__title, &__lead, &__text {
+				text-shadow: none;
+			}
+		}
+		#background-video::after {
+			background: none;
+		}
 	}
 }

src/scss/_home.scss

@@ -1,7 +1,7 @@
 $homeSectionPaddingTop: 40px;
 
 
-.page-home {
+.page--home {
 	> section {
 		padding: $homeSectionPaddingTop 0;
 		overflow: hidden;

src/scss/_info-grid.scss

@@ -0,0 +1,56 @@
+$m: 'info-grid';
+
+.#{$m} {
+	&__content {
+		@include clearfix();
+	}
+	&__item {
+		@extend .col-md-4;
+		@extend .col-sm-6;
+		margin-bottom: 70px;
+
+
+		@include mq($to: small) {
+			width: 100%;
+			max-width: 400px;
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+		&-icon {
+			position: relative;
+			width: 120px;
+			height: 120px;
+			border-radius: 50%;
+			// border: 1px solid rgba($color-gray-dark, 0.1);
+			background-color: rgba($color-white, 0.5);
+			margin-bottom: 40px;
+
+			svg {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translateX(-50%) translateY(-50%);
+			}
+			@include mq($to: small) {
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+		&-title {
+			@include font-title-small();
+			text-transform: none;
+			margin-bottom: 0.5em;
+		}
+		&-text {
+			color: $color-gray-dark;
+			margin-bottom: 0.5em;
+		}
+		&-link {
+			&::after {
+				content: '→';
+				margin-left: 0.5em;
+			}
+		}
+	}
+}

src/scss/_nav.scss

@@ -1,6 +1,8 @@
+$m: 'nav';
+
 $nav-height: 90px;
 
-.nav {
+.#{$m} {
 	float: right;
 	text-align: right;
 
@@ -55,6 +57,18 @@ $nav-height: 90px;
 			$active: rgba($color-white, 1));
 		letter-spacing: -0.008em;
 	}
+
+	&--black {
+		.#{$m} {
+			&__link {
+				@include link-style(
+					$link: rgba($color-black, 1),
+					$visited: rgba($color-black, 1),
+					$hover: rgba($color-black, 1),
+					$active: rgba($color-black, 1));
+			}
+		}
+	}
 }
 
 

src/scss/_page.scss

@@ -0,0 +1,11 @@
+$m: 'page';
+
+.#{$m} {
+	&--home {
+
+	}
+	&--get-dash {
+		background-color: $color-gray-light-blueish;
+		padding-top: 70px;
+	}
+}

src/scss/_section.scss

@@ -0,0 +1,25 @@
+$m: 'section';
+
+.#{$m} {
+	padding-bottom: 100px;
+
+	&--claim {
+		text-align: center;
+		.#{$m} {
+			&__icon {
+				display: inline-block;
+				margin-bottom: 50px;
+			}
+
+			&__title {
+				@include font-claim();
+				margin-bottom: 17px;
+			}
+			&__lead {
+				@include font-lead();
+				color: $color-gray-dark;
+			}
+		}
+	}
+
+}

src/scss/global/_colors.scss

@@ -3,6 +3,7 @@ $color-black: 		#131415;
 $color-black-light: #353535;
 $color-gray:		#f0f0f0;
 $color-gray-light: 	#f7f9fa;
+$color-gray-light-blueish: #e8eef2;
 $color-gray-dark: 	#555555;
 $color-white:		#ffffff;
 

src/scss/global/_typography.scss

@@ -39,9 +39,10 @@ $line-height-heading: 1.2;
 	font-size: pxToRem($font-size-medium);
 }
 @mixin font-claim() {
-	font-weight: $font-weight-light;
+	font-weight: $font-weight-regular;
 	font-size: pxToRem($font-size-medium);
 	letter-spacing: 0.017em;
+	text-transform: uppercase;
 }
 @mixin font-title-small() {
 	font-weight: $font-weight-regular;

src/scss/main.scss

@@ -17,16 +17,19 @@
 @import "buttons";
 @import "forms";
 @import "footer";
+@import "page";
+@import "section";
 
 //stuff most pages need
 @import "overlay-menu";
 @import "video";
 @import "magnific-popup";
+@import "info-grid";
 
 //styles for specific pages
-@import "home";
+@import "pages/home";
 @import "interior";
 @import "post";
 @import "junk-drawer";
-@import "styleguide";
+@import "pages/styleguide";
 @import "code-highlight";

src/scss/pages/_home.scss

@@ -0,0 +1,234 @@
+$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;
+		}
+	}
+}