feat(mobile): Adds missing visuals

sass/css/_layout.scss

@@ -1,12 +1,70 @@
+.hero + main {
+  margin-top: -50px;
+}
+
 .hero {
-  height: 230px;
+  height: 330px;
-  background: none;
+  background: url("../images/hero-phone@2x.png") repeat-x top center;
+  -webkit-background-size: contain;
+  -moz-background-size: contain;
+  -o-background-size: contain;
+  background-size: contain;
+
+  h1 {
+    color: #fff;
+    margin-bottom: 30px;
+  }
 }
 .hero2, .hero3 {
   //height: 130px;
-  background: none;
+  //background: none;
 }
 
+.hero2 {
+  height: 230px;
+  background: url("../images/hero2-phone@2x.png") no-repeat top center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+.hero5 {
+  height: 230px;
+  background: url("../images/hero3-phone@2x.png") no-repeat top center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+.hero6 {
+  height: 230px;
+  background: url("../images/hero2-phone@2x.png") no-repeat top center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+
+.card-artiq {
+  background: #fff url("../images/artiq-phone@2x.png") no-repeat top center;
+  background-size: contain;
+}
+.card-artiq > div {
+  padding-top: 66.64%;
+}
+
+.card-gateware {
+  background: #fff url("../images/gateware-phone@2x.png") no-repeat top center;
+  background-size: contain;
+}
+.card-gateware > div {
+  padding-top: 81.64%;
+}
+
+
 .card h5,
 h5 {
   color: $brand-color;
@@ -47,6 +105,13 @@ p ~ h5 {
 // Small devices (landscape phones, 576px and up)
 @media (min-width: 576px) {
 
+  .card-artiq > div {
+    padding-top: 0;
+  }
+
+  .card-gateware > div {
+    padding-top: 0;
+  }
 }
 
 // Medium devices (tablets, 768px and up)

templates/_base.html

@@ -65,7 +65,7 @@
 
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
-            <ul class="navbar-nav ml-0 ml-md-auto text-right text-lg-left pt-2 pb-2 pt-md-0 pb-md-0">
+            <ul class="navbar-nav ml-0 ml-md-auto text-left text-lg-left pt-2 pb-2 pt-md-0 pb-md-0">
 
               {% set section = get_section(path='_index.md') %}
               {% for section in section.subsections %}
@@ -80,7 +80,7 @@
                     <a class="nav-link dropdown-toggle {% if current_path == subsection.path %}active{% endif %}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       {{ subsection.title }}
                     </a>
-                    <div class="dropdown-menu shadow-none shadow-lg text-right text-lg-left" aria-labelledby="navbarDropdown">
+                    <div class="dropdown-menu shadow-none shadow-lg text-left text-lg-left" aria-labelledby="navbarDropdown">
                       {% for page in subsection.pages %}
                         <a class="dropdown-item pt-2 pb-2 pt-sm-3 pb-sm-3 {% if current_path == page.path %}active{% endif %}" href="{{ page.permalink }}">{{ page.title }}</a>
                       {% endfor %}