[Feature] Mobile Nav + Burger / CTA on Home

_i18n/en.yml

@@ -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.

_includes/nav-desktop.html

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

_includes/nav-mobile.html

@@ -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>
+        </ul>
         {% endif %}
-    </ul>
+    -->
 </nav>

_layouts/default.html

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

index.html

@@ -13,12 +13,15 @@ description: pages.home.description
 		WHAT IS DASH?
 		LINK TO VIDEO.
 	-->
-	<section>
+	<section class="section section--home-cta">
-		<div class="content">
+		<div class="section__content">
-		<h2>{% t pages.home.video-heading %}</h2>
+				<h2 class="section__title">{% t pages.home.video-heading %}</h2>
-		{% tmd pages.home.video-text %}
+				{% 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>
 

package.json

@@ -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"
+  }
 }

src/js/boids.js

@@ -14,120 +14,123 @@
 
 	/*eslint-enable */
 
-	window.particlesJS('boids', {
+	if (document.getElementById('boids')) {
-		'particles': {
+
-			'number': {
+		window.particlesJS('boids', {
-				'value': 80,
+			'particles': {
-				'density': {
+				'number': {
-					'enable': true,
+					'value': 80,
-					'value_area': 800
+					'density': {
-				}
+						'enable': true,
-			},
+						'value_area': 800
-			'color': {
-				'value': '#ffffff'
-			},
-			'shape': {
-				'type': 'circle',
-				'stroke': {
-					'width': 0,
-					'color': '#000000'
-				},
-				'polygon': {
-					'nb_sides': 5
-				},
-				'image': {
-					'src': 'img/github.svg',
-					'width': 100,
-					'height': 100
-				}
-			},
-			'opacity': {
-				'value': 0.8,
-				'random': false,
-				'anim': {
-					'enable': false,
-					'speed': 1,
-					'opacity_min': 0.1,
-					'sync': false
-				}
-			},
-			'size': {
-				'value': 1.5,
-				'random': true,
-				'anim': {
-					'enable': false,
-					'speed': 40,
-					'size_min': 0.1,
-					'sync': false
-				}
-			},
-			'line_linked': {
-				'enable': true,
-				'distance': 150,
-				'color': '#ffffff',
-				'opacity': 0.5,
-				'width': 1
-			},
-			'move': {
-				'enable': true,
-				'direction': 'none',
-				'random': false,
-				'straight': false,
-				'out_mode': 'out',
-				'attract': {
-					'enable': false,
-					'rotateX': 600,
-					'rotateY': 1200
-				}
-			}
-		},
-		'interactivity': {
-			'detect_on': '#hero',
-			'events': {
-				'onhover': {
-					'enable': false,
-					'mode': 'grab'
-				},
-				'onclick': {
-					'enable': false,
-					'mode': 'push'
-				},
-				'resize': true
-			},
-			'modes': {
-				'grab': {
-					'distance': 200,
-					'line_linked': {
-						'opacity': 1
 					}
 				},
-				'bubble': {
+				'color': {
-					'distance': 400,
+					'value': '#ffffff'
-					'size': 40,
-					'duration': 2,
-					'opacity': 8,
-					'speed': 3
 				},
-				'repulse': {
+				'shape': {
-					'distance': 200
+					'type': 'circle',
+					'stroke': {
+						'width': 0,
+						'color': '#000000'
+					},
+					'polygon': {
+						'nb_sides': 5
+					},
+					'image': {
+						'src': 'img/github.svg',
+						'width': 100,
+						'height': 100
+					}
 				},
-				'push': {
+				'opacity': {
-					'particles_nb': 4
+					'value': 0.8,
+					'random': false,
+					'anim': {
+						'enable': false,
+						'speed': 1,
+						'opacity_min': 0.1,
+						'sync': false
+					}
 				},
-				'remove': {
+				'size': {
-					'particles_nb': 2
+					'value': 1.5,
+					'random': true,
+					'anim': {
+						'enable': false,
+						'speed': 40,
+						'size_min': 0.1,
+						'sync': false
+					}
+				},
+				'line_linked': {
+					'enable': true,
+					'distance': 150,
+					'color': '#ffffff',
+					'opacity': 0.5,
+					'width': 1
+				},
+				'move': {
+					'enable': true,
+					'direction': 'none',
+					'random': false,
+					'straight': false,
+					'out_mode': 'out',
+					'attract': {
+						'enable': false,
+						'rotateX': 600,
+						'rotateY': 1200
+					}
 				}
+			},
+			'interactivity': {
+				'detect_on': '#hero',
+				'events': {
+					'onhover': {
+						'enable': false,
+						'mode': 'grab'
+					},
+					'onclick': {
+						'enable': false,
+						'mode': 'push'
+					},
+					'resize': true
+				},
+				'modes': {
+					'grab': {
+						'distance': 200,
+						'line_linked': {
+							'opacity': 1
+						}
+					},
+					'bubble': {
+						'distance': 400,
+						'size': 40,
+						'duration': 2,
+						'opacity': 8,
+						'speed': 3
+					},
+					'repulse': {
+						'distance': 200
+					},
+					'push': {
+						'particles_nb': 4
+					},
+					'remove': {
+						'particles_nb': 2
+					}
+				}
+			},
+			'retina_detect': true,
+			'config_demo': {
+				'hide_card': false,
+				'background_color': 'none',
+				'background_image': '',
+				'background_position': '50% 50%',
+				'background_repeat': 'no-repeat',
+				'background_size': 'cover'
 			}
-		},
+		});
-		'retina_detect': true,
+	}
-		'config_demo': {
-			'hide_card': false,
-			'background_color': 'none',
-			'background_image': '',
-			'background_position': '50% 50%',
-			'background_repeat': 'no-repeat',
-			'background_size': 'cover'
-		}
-	});
 
 }());

src/js/full-menu.js

@@ -2,9 +2,27 @@
 
 	$(function() {
 
-		$('#toggle').click(function() {
+		var isOpen = false,
-			$(this).toggleClass('active');
+			$overlay = $('[data-js-overlay-menu]'),
-			$('#overlay').toggleClass('open');
+			$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');
+			}
 		});
 
 	});

src/js/no-scroll.js

@@ -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 */

src/scss/_hero.scss

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

src/scss/_home.scss

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

src/scss/_nav.scss

@@ -6,6 +6,10 @@ $nav-height: 90px;
 	float: right;
 	text-align: right;
 
+	@include mq($to: large) {
+		display: none;
+	}
+
 	&__list {
 		list-style: none;
 	}

src/scss/_overlay-menu.scss

@@ -1,129 +1,37 @@
-.container {
+@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: absolute;
-	width: 100%;
+	z-index: 105;
-	height: 100%;
+	top: 23px;
-	text-align: center;
+	right: 25px;
-	top: 40%;
+    height: 45px;
-	left: 0;
+    width: 50px;
-	margin: 0 auto;
+    padding: 5px;
-	p {
-		font-size: 18px;
-	}
-	a {
-		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%;
-	}
-}
 
-#hero{
+	@include mq($from: large) {
-	.button_container {
+		display: none;
-		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 {
+	&__burger {
-		transform: translateY(8px) translateX(0) rotate(45deg);
+		@include burger(40px, 3px, 7px, #fff);
-		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;
 	}
 
 }
 
-.button_container.active .top {
+.burger.is-active {
-		transform: translateY(8px) translateX(0) rotate(45deg);
+	.burger__burger {
-		background: $color-blue;
+		@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%;
+		top: 150px;
-		transform: translateY(-50%);
 		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) {
+	@for $i from 1 through 10 {
-		animation-delay: .4s;
+		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 {

src/scss/_section.scss

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

src/scss/pages/_home.scss

@@ -1,13 +1,19 @@
-$homeSectionPaddingTop: 40px;
+$homeSectionPaddingTop: 80px;
 
 
 .page--home {
-	> section {
+	> section:not(.section) { // TEMP
-		padding: $homeSectionPaddingTop 0;
+		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) {