feat(homepage): Adds responsiveness

sass/css/_base.scss

@@ -115,4 +115,12 @@ a {
 .btn-lg {
   font-size: 1rem;
   padding: 1rem 1.25rem;
+}
+.navbar-toggler {
+  outline: none;
+
+  &:focus,
+  &:hover {
+    outline: none;
+  }
 }

sass/css/_layout.scss

@@ -1,28 +1,6 @@
 .hero {
-  height: 692px;
+  height: 230px;
-  background: url("../images/hero@2x.png") repeat-x top center;
+  background: none;
-  -webkit-background-size: contain;
-  -moz-background-size: contain;
-  -o-background-size: contain;
-  background-size: contain;
-
-  h1 {
-    color: $background-color;
-    margin-bottom: 30px;
-    margin-top: -100px;
-  }
-}
-
-main {
-  margin-top: -150px;
-}
-
-.card-artiq {
-  background: #fff url("../images/artiq@2x.png") no-repeat top right;
-}
-
-.card-gateware {
-  background: #fff url("../images/gateware@2x.png") no-repeat top right;
 }
 
 .card h5,
@@ -36,4 +14,53 @@ h3 {
 
 .shadow.sticky-top {
   background: #fff;
+}
+
+
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) {
+
+}
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) {
+}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) {
+  .hero {
+    // height: 692px;
+    height: calc(100vh - 300px);
+    background: url("../images/hero@2x.png") repeat-x top center;
+    -webkit-background-size: contain;
+    -moz-background-size: contain;
+    -o-background-size: contain;
+    background-size: contain;
+
+    h1 {
+      color: $background-color;
+      margin-bottom: 30px;
+      margin-top: -100px;
+    }
+  }
+
+  main {
+    margin-top: -150px;
+  }
+
+  .shadow-lg {
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
+  }
+
+  .card-artiq {
+    background: #fff url("../images/artiq@2x.png") no-repeat top right;
+  }
+
+  .card-gateware {
+    background: #fff url("../images/gateware@2x.png") no-repeat top right;
+  }
+}
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {
 }

templates/index.html

@@ -39,7 +39,7 @@
 
       <header class="container">
 
-        <nav class="navbar navbar-expand-lg navbar-light bg-th-1 justify-content-center justify-content-md-between pt-3 pb-3" role="navigation">
+        <nav class="navbar navbar-expand-lg navbar-light bg-th-1 justify-content-center justify-content-between pt-3 pb-3" role="navigation">
 
           <a class="navbar-brand logo mr-0" href="/">
             <img src="{{ get_url(path='images/logo@2x.png') }}" height="25" alt="logo">
@@ -51,7 +51,7 @@
 
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
-            <ul class="navbar-nav ml-md-auto text-center text-md-left pt-2 pb-2 pt-md-0 pb-md-0">
+            <ul class="navbar-nav ml-0 ml-md-auto text-right 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 %}
@@ -60,11 +60,11 @@
 
                 {% if subsection.pages|length > 0 %}
 
-                  <li class="nav-item ml-4 dropdown {% if current_path == subsection.path %}active{% endif %}">
+                  <li class="nav-item ml-0 ml-md-4 dropdown {% if current_path == subsection.path %}active{% endif %}">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       {{ subsection.title }}
                     </a>
-                    <div class="dropdown-menu shadow" aria-labelledby="navbarDropdown">
+                    <div class="dropdown-menu shadow-none shadow-lg text-right text-lg-left" aria-labelledby="navbarDropdown">
                       {% for page in subsection.pages %}
                         <a class="dropdown-item pt-3 pb-3" href="{{ page.permalink }}">{{ page.title }}</a>
                       {% endfor %}
@@ -73,7 +73,7 @@
 
                 {% else %}
 
-                  <li class="nav-item ml-4 {% if current_path == subsection.path %}active{% endif %}">
+                  <li class="nav-item ml-0 ml-md-4 {% if current_path == subsection.path %}active{% endif %}">
                     <a class="nav-link" href="{{ subsection.permalink }}">{{ subsection.title }}</a>
                   </li>
 
@@ -131,7 +131,7 @@
 
             <div class="card-body p-5 card-artiq">
 
-              <div class="col-12 col-md-6">
+              <div class="col-12 col-md-6 pl-0 pr-0">
 
                 <h5 class="card-title">ARTIQ</h5>
 
@@ -164,7 +164,7 @@
 
             <div class="card-body p-5 card-gateware">
 
-              <div class="col-12 col-md-6">
+              <div class="col-12 col-md-6 pl-0 pr-0">
 
                 <h5 class="card-title">Gateware and system-on-chip design</h5>
 
@@ -206,15 +206,15 @@
 
     <!-- FOOTER -->
 
-    <footer class="container">
+    <footer class="container text-center text-md-left">
 
       <div class="row pt-5 pb-5">
 
-        <div class="col-12 col-md-6">
+        <div class="col-12 col-md-6 pb-5 pb-md-0">
 
           <h5 class="pb-3">Sales inquiries</h5>
 
-          <table class="w-50">
+          <table class="w-100 col-12 col-lg-8">
 
             <tbody>
 
@@ -260,7 +260,7 @@
 
       <div class="row pb-5">
 
-        <div class="col-12 col-md-6">
+        <div class="col-12 col-md-6 pb-5 pb-md-0">
 
           <h5 class="pb-3">Office</h5>