feat(homepage): Adds responsiveness

sass/css/_base.scss

@@ -116,3 +116,11 @@ a {
   font-size: 1rem;
   padding: 1rem 1.25rem;
 }
+.navbar-toggler {
+  outline: none;
+
+  &:focus,
+  &:hover {
+    outline: none;
+  }
+}

sass/css/_layout.scss

@@ -1,5 +1,36 @@
 .hero {
-  height: 692px;
+  height: 230px;
+  background: none;
+}
+
+.card h5,
+h5 {
+  color: $brand-color;
+}
+
+h3 {
+  color: $color-secondary;
+}
+
+.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;
@@ -17,6 +48,10 @@ 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;
   }
@@ -24,16 +59,8 @@ main {
   .card-gateware {
     background: #fff url("../images/gateware@2x.png") no-repeat top right;
   }
-
-.card h5,
-h5 {
-  color: $brand-color;
 }
 
-h3 {
+// Extra large devices (large desktops, 1200px and up)
-  color: $color-secondary;
+@media (min-width: 1200px) {
-}
-
-.shadow.sticky-top {
-  background: #fff;
 }

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>