feat: Styling home page

_colors/site-colors.html

@@ -18,3 +18,7 @@ type: colors
 <div class="color__tile color__tile--dark-blue-bg">
   <code class="color__name">$dark-blue</code>
 </div>
+
+<div class="color__tile color__tile--gray-light-bg">
+  <code class="color__name">$gray-light</code>
+</div>

_i18n/cn/home/hero.html

@@ -11,11 +11,12 @@
 	{% include nav-desktop.html %}
 
 	<!-- Hero content -->
-	<h1 class="content">{% t pages.home.hero-heading %}</h1>
-	<p class="content">{% t pages.home.hero-text %}</p>
-
 	<div class="content">
+		<h1>{% t pages.home.hero-heading %}</h1>
+		<p>{% t pages.home.hero-text %}</p>
+
+		<div>
 			<a href="#" class="btn-blue-solid">{% t nav.get-dash %}</a>
 		</div>
-  
+	</div>
 </div>

_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

_i18n/en/home/hero.html

@@ -11,11 +11,12 @@
 	{% include nav-desktop.html %}
 
 	<!-- Hero content -->
-	<h1 class="content">{% t pages.home.hero-heading %}</h1>
-	<p class="content">{% t pages.home.hero-text %}</p>
-
 	<div class="content">
+		<h1>{% t pages.home.hero-heading %}</h1>
+		<p>{% t pages.home.hero-text %}</p>
+
+		<div>
 			<a href="#" class="btn-blue-solid">{% t nav.get-dash %}</a>
 		</div>
-  
+	</div>
 </div>

_i18n/es/home/hero.html

@@ -11,11 +11,12 @@
 	{% include nav-desktop.html %}
 
 	<!-- Hero content -->
-	<h1 class="content">{% t pages.home.hero-heading %}</h1>
-	<p class="content">{% t pages.home.hero-text %}</p>
-
 	<div class="content">
+		<h1>{% t pages.home.hero-heading %}</h1>
+		<p>{% t pages.home.hero-text %}</p>
+
+		<div>
 			<a href="#" class="btn-blue-solid">{% t nav.get-dash %}</a>
 		</div>
-  
+	</div>
 </div>

_i18n/it/home/hero.html

@@ -11,11 +11,12 @@
 	{% include nav-desktop.html %}
 
 	<!-- Hero content -->
-	<h1 class="content">{% t pages.home.hero-heading %}</h1>
-	<p class="content">{% t pages.home.hero-text %}</p>
-
 	<div class="content">
+		<h1>{% t pages.home.hero-heading %}</h1>
+		<p>{% t pages.home.hero-text %}</p>
+
+		<div>
 			<a href="#" class="btn-blue-solid">{% t nav.get-dash %}</a>
 		</div>
-  
+	</div>
 </div>

_i18n/pt/home/hero.html

@@ -11,11 +11,12 @@
 	{% include nav-desktop.html %}
 
 	<!-- Hero content -->
-	<h1 class="content">{% t pages.home.hero-heading %}</h1>
-	<p class="content">{% t pages.home.hero-text %}</p>
-
 	<div class="content">
+		<h1>{% t pages.home.hero-heading %}</h1>
+		<p>{% t pages.home.hero-text %}</p>
+
+		<div>
 			<a href="#" class="btn-blue-solid">{% t nav.get-dash %}</a>
 		</div>
-  
+	</div>
 </div>

_i18n/ru/home/hero.html

@@ -11,11 +11,12 @@
 	{% include nav-desktop.html %}
 
 	<!-- Hero content -->
-	<h1 class="content">{% t pages.home.hero-heading %}</h1>
-	<p class="content">{% t pages.home.hero-text %}</p>
-
 	<div class="content">
+		<h1>{% t pages.home.hero-heading %}</h1>
+		<p>{% t pages.home.hero-text %}</p>
+
+		<div>
 			<a href="#" class="btn-blue-solid">{% t nav.get-dash %}</a>
 		</div>
-  
+	</div>
 </div>

_sass/_1024.scss

@@ -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;
-		}
-	}
-}

_sass/_480.scss

@@ -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;
-			}
-		}
-	}
-
-}

_sass/_640.scss

@@ -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;
-		}
-	}
-}

_sass/_768.scss

@@ -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;
-		}
-	}
-}

_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 {

_sass/_grid.scss

@@ -904,8 +904,3 @@
 .pull-left {
 	float: left !important;
 }
-*,
-*:before,
-*:after {
-	box-sizing: border-box;
-}

_sass/_header.scss

@@ -1,6 +1,7 @@
 #hero {
 	height: 600px;
 	color: $white;
+	position: relative;
 
 	#top {
 		border-bottom: 1px solid rgba($white, 0.35);
@@ -13,6 +14,7 @@
 		}
 	}
 	
+	> .content {
 		> h1, > p {
 			text-shadow: 2px 2px 2px rgba(black, 0.4);
 		}
@@ -33,3 +35,4 @@
 			padding: 5px 25px;
 		}
 	}
+}

_sass/_home.scss

@@ -1,93 +1,103 @@
-#info {
+#page-home {
-	.col {
+	> section {
-		width: 33%;
+		padding: 40px 0;
-		box-sizing: border-box;
-		margin-top: 50px;
-		margin-bottom: 70px;
-		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;
-			}
-		}
-		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;
-		}
-	}
-	.screenshot {
-		text-align: right;
-		img {
-			width: 100%;
-			max-width: 600px;
-			height: auto;
-		}
-	}
-}
-
-#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;
-			}
-		}
-		.news-title {
-			height: 60px;
 		overflow: hidden;
+		position: relative;
+		text-align: center;
+
+		&: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;
+			}
+		}
+
+		p {
+			max-width: 60em;
+			margin: 20px auto;
+		}
+
+		img {
+			max-width: 100%;
+		}
+	}
+
+	.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-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 {
+			p {
-			color: $blue;
+				margin: 0;
-			text-decoration: none;
+				position: absolute;
-			&:hover {
+				left: 20px;
-				text-decoration: underline;
+				right: 20px;
+				overflow: hidden;
+			}
+			a.read-more {
+				position: absolute;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				padding: 20px;
+				z-index: 1;
 			}
 		}
 	}

_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;
 }
 

_sass/_reset.scss

@@ -52,3 +52,6 @@ border-spacing: 0;
 *,*:after,*:before {
 	box-sizing: inherit;
 }
+body {
+	box-sizing: border-box;
+}

_sass/_typography.scss

@@ -25,6 +25,7 @@ p {
 
 h1, h2, h3 {
 	font-family: $font-heading;
+	font-weight: bold;
 }
 
 h1 {

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";

index.html

@@ -7,24 +7,27 @@ description: pages.home.description
 
 {% tf home/hero.html %}
 
-<div class="content">
+<div id="page-home">
 
     <!--
         WHAT IS DASH?
         LINK TO VIDEO.
     -->
-    <div class="row" style="text-align:center;">
+    <section>
+        <div class="content">
         <h2>{% t pages.home.video-heading %}</h2>
         {% tmd pages.home.video-text %}
 
         <a href="#" class="btn-blue">{% t pages.home.video-btn %}</a>
         </div>
+    </section>
 
     <!--
         DASH FEATURES
         PRIVATE | INSTANT | SECURE
     -->
-    <div class="row" style="text-align:center;">
+    <section>
+        <div class="content row features-collection">
             <div class="col-sm-4">
                 <img src="/assets/img/home/icon_private.png" alt="{% t pages.home.feature-private-heading %}">
                 <h2>{% t pages.home.feature-private-heading %}</h2>
@@ -42,40 +45,46 @@ description: pages.home.description
                 {% tmd pages.home.feature-secure-text %}
             </div>
         </div>
+    </section>
 
     <!--
         MERCHANTS
     -->
-    <div class="row" style="text-align:center;">
+    <section>
+        <div class="content">
+            <div>
                 <h2>{% t pages.home.merchants-heading %}</h2>
 
                 {% tmd pages.home.merchants-text %}
             </div>
 
-    <div class="row" style="text-align:center;">
+            <div class="logo-collection">
-        <div class="col-sm-3">
+                <div class="logo">
                     <img src="/assets/img/home/bolehvpn.png">
                 </div>
-        <div class="col-sm-3">
+                <div class="logo">
                     <img src="/assets/img/home/node40.png">
                 </div>
-        <div class="col-sm-3">
+                <div class="logo">
                     <img src="/assets/img/home/protonmail.png">
                 </div>
-        <div class="col-sm-3">
+                <div class="logo">
                     <img src="/assets/img/home/qhoster.png">
                 </div>
             </div>
 
-    <div class="row" style="text-align:center;">
+            <div>
                 <a href="#" class="btn-blue">{% t pages.home.merchants-btn %}</a>
                 <a href="#" class="btn-blue">{% t pages.home.merchants-join-btn %}</a>
             </div>
+        </div>
+    </section>
 
     <!--
         NETWORK ARCHITECTURE
     -->
-    <div class="row">
+    <section>
+        <div class="content row">
             <div class="col-sm-6">
                 <h2>{% t pages.home.architecture-heading %}</h2>
 
@@ -87,15 +96,14 @@ description: pages.home.description
                 <img src="/assets/img/home/code.png" alt="{% t pages.home.architecture-heading %}">
             </div>
         </div>
+    </section>
 
     <!--
         SELF GOVERNING | SELF FUNDING
     -->
-    <div class="row">
+    <section>
-        <div class="col-sm-6">
+        <div class="content row">
-            <img src="/assets/img/home/budgets.png" alt="{% t pages.home.governance-heading%}">
+            <div class="col-sm-6 col-sm-push-6">
-        </div>
-        <div class="col-sm-6">
                 <h2>{% t pages.home.governance-heading%}</h2>
 
                 {% tmd pages.home.governance-text %}
@@ -104,12 +112,17 @@ description: pages.home.description
 
                 <a href="#" class="btn-blue">{% t pages.home.proposal-submit-btn %}</a>
             </div>
+            <div class="col-sm-6 col-sm-pull-6">
+                <img src="/assets/img/home/budgets.png" alt="{% t pages.home.governance-heading%}">
             </div>
+        </div>
+    </section>
 
     <!--
         FASTEST GROWING NETWORK
     -->
-    <div class="row">
+    <section>
+        <div class="content row">
             <div class="col-sm-6">
                 <h2>{% t pages.home.network-growth-heading %}</h2>
 
@@ -121,65 +134,70 @@ description: pages.home.description
                 <img src="/assets/img/home/graph.png" alt="{% t pages.home.network-growth-heading %}">
             </div>
         </div>
+    </section>
 
     <!--
         EVOLUTION
     -->
-    <div class="row">
+    <section>
-        <div class="col-sm-6">
+        <div class="content row">
-            
+            <div class="col-sm-6 col-sm-push-6">
-        </div>
-        <div class="col-sm-6">
                 <h2>{% t pages.home.evolution-heading %}</h2>
 
                 {% tmd pages.home.evolution-text %}
 
                 <a href="#" class="btn-blue">{% t pages.home.evolution-btn %}</a>
             </div>
+            <div class="col-sm-6 col-sm-pull-6">
+
             </div>
+        </div>
+    </section>
 
     <!--
         LATEST NEWS
     -->
-    <div class="row" style="text-align:center;">
+    <section>
+        <div class="content">
             <h2>{% t pages.home.news-heading %}</h2>
-    </div>
 
             <div class="row">
                 {% for post in site.posts limit:4 %}
-        <div class="col-sm-3">
+                <div class="col-sm-6 col-md-3">
                     <div class="news-post">
                         <div class="news-image">
                             {% if post.image %}
                                 <img src="{{ post.image }}">
                             {% endif %}
                         </div>
-                <div class="news-title">
+                        <div class="news-body">
-                    <h3>{{ post.title }}</h3>
+                            <h3 class="news-title">{{ post.title }}</h3>
+                            <div class="date">{{ post.date | date: "%b %d, %Y" }}</div>
+                            <p>{{ post.excerpt | strip_html | truncate: 250 }}</p>
+                            <a class="read-more" href="{{ post.url }}">Read More...</a>
                         </div>
-                    <span class="date">{{ post.date | date: "%b %d, %Y" }}</span>
-                    <p>{{ post.excerpt | strip_html | truncatewords: 20 }}</p>
-                    <a href="{{ post.url }}">Read More...</a>
                     </div>
                 </div>
                 {% endfor %}
             </div>
 
-    <div class="row" style="text-align:center;">
+            <div>
                 <a href="#" class="btn-blue">{% t pages.home.news-btn %}</a>
             </div>
-
+        </div>
+    </section>
 
     <!--
         GET STARTED
     -->
-   <div class="row" style="text-align:center;">
+    <section>
+        <div class="content">
             <h2>{% t pages.home.get-started-heading %}</h2>
 
             {% tmd pages.home.get-started-text %}
 
             <a href="#" class="btn-blue">{% t pages.home.get-started-btn %}</a>
         </div>
-   
+    </section>
 
 </div>