Mobile

_includes/page/header.html

@@ -5,7 +5,10 @@
         <img src="{{ "/assets/img/brand/header-logo.svg" | relative_url }}" alt="TEDxWarwick">
       </a>
     </div>
-    <div class="nav">
+    <button id="navbar-toggler" type="button">
+      <i class="fas fa-bars"></i>
+    </button>
+    <div class="nav" id="nav">
       <div class="cta">
         {% include components/cta.html %}
       </div>

_includes/page/links.html

@@ -3,7 +3,7 @@
     Metadata
 {% endcomment %}
 <meta charset="utf-8">
-<meta name="viewport" content="width=960">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="canonical" href="{{ site.url }}{{ page.url | relative_url }}">
 <meta name="description" content="{{ page.description | strip | default: "An annual conference on the University of Warwick campus, bringing inspiring speakers and ground-breaking ideas to the West Midlands and beyond." }}">
 {%- comment %}
@@ -34,6 +34,7 @@
 {%- comment %}
     Site resources
 {% endcomment %}
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 <link type="text/css" rel="prefetch" href="//fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i|Source+Sans+Pro:600,600i|Fira+Mono:400,700">
 <link type="text/css" rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
 <script type="application/javascript" src="{{ "/assets/js/init.js" | relative_url }}"></script>

_sass/_cards.scss

@@ -53,6 +53,10 @@
     }
   }
 
+  @media (max-width: 960px) {
+    margin: 17px 0;
+  }
+
   // .content {
   //   flex: 1;
   //   position: relative;

_sass/_event.scss

@@ -11,6 +11,10 @@
       @include elevate(8);
     }
   }
+
+  .container{
+    padding: 0;
+  }
 }
 
 .card.event-card {
@@ -24,6 +28,16 @@
   img {
     flex: 0 0 ($card-height * (1920 / 1080));
   }
+  @media (max-width: 960px) {
+    & {
+      flex-direction: column;
+      height: 100%;
+    }
+    img {
+      flex: auto;
+    }
+
+  }
 }
 
 .speakers {
@@ -32,4 +46,13 @@
   grid-gap: 40px;
   justify-content: space-between;
   margin: 1rem 0;
+
+  @media (max-width: 960px) {
+    & {
+      display: flex;
+      flex-direction: column;
+      margin: 14px 0;
+    }
+
+  }
 }

_sass/_header.scss

@@ -8,10 +8,22 @@ header {
   transition: hover-transition(border-bottom),
               hover-transition(box-shadow);
 
+  @media (max-width: 960px){
+    & {
+      height: inherit;
+    }
+  }
+
   .container {
     height: 100%;
     display: flex;
     flex-direction: row;
+
+    @media (max-width: 960px) {
+      & {
+        flex-direction: column;
+      }
+    }
   }
 
   .brand {
@@ -28,6 +40,32 @@ header {
       // MS Edge doesn't like unbounded SVG images.
       // This value was derived empirically using Chrome 69.
       max-width: 501px;
+
+      @media (max-width: 960px) {
+        & {
+          height: 38px;
+          margin: 12px 0;
+          max-width: initial;
+        }
+      }
+    }
+  }
+
+  button {
+    border: transparent;
+    font-size: 1.4em;
+    position: absolute;
+    right: 1.2em;
+    top: 0.7em;
+    padding: 0px;
+    display: none;
+    cursor: pointer;
+    background-color: transparent;
+
+    @media (max-width: 960px){
+      & {
+        display: block;
+      }
     }
   }
 
@@ -36,6 +74,17 @@ header {
     display: flex;
     flex-direction: column;
     margin-left: 2em;
+
+    @media (max-width: 960px){
+      & {
+        margin-left: 0px;
+        display: none;
+      }
+    }
+  }
+
+  .nav-show {
+    display: block;
   }
 
   .cta {
@@ -47,17 +96,34 @@ header {
     flex-direction: column;
     justify-content: center;
     padding-right: 1rem;
+
+    @media (max-width: 960px){
+      text-align: left;
+    }
   }
 
   nav {
     @include font(menu);
 
     text-align: right;
 
+    @media (max-width: 960px){
+      & {
+        text-align: left;
+        margin-left: 0em;
+      }
+    }
+
     ul {
       display: flex;
       flex-direction: row;
       justify-content: flex-end;
+
+      @media (max-width: 960px){
+        & {
+          flex-direction: column;
+        }
+      }
     }
 
     li {

_sass/_home.scss

@@ -42,5 +42,9 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+
+    @media (max-width: 960px){
+      padding: 0px 20px;
+    }
   }
 }

_sass/_layout.scss

@@ -9,6 +9,10 @@ header, main, footer {
 .container {
   width: 960px;
   margin: 0 auto;
+
+  @media (max-width: 960px){
+    padding: 0px 20px;
+  }
 }
 
 section {
@@ -32,3 +36,9 @@ main {
 footer {
   margin-top: 5em;
 }
+
+@media (max-width: 960px){
+  .container {
+    width: 100%;
+  }
+}

_sass/_partners.scss

@@ -4,7 +4,19 @@
   img {
     width: auto;
     margin: 10px;
+
+    @media (max-width: 960px){
+      width: max-content;
+    }
+  }
+
+  @media (max-width: 960px){
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: 11px 0px;
   }
+
 }
 
 .partners {
@@ -13,6 +25,11 @@
   grid-gap: 40px;
   justify-content: space-between;
   margin: 1rem 0;
+
+  @media (max-width: 960px){
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .partner-large {
@@ -23,4 +40,4 @@
     height: 9rem;
     margin: 0.25rem 0.5rem 0.25rem 0;
   }
-}
+}

_sass/_text.scss

@@ -49,6 +49,10 @@ p {
   letter-spacing: rem(-0.5);
   margin: line-steps(4) 0;
   font-weight: 300;
+
+  @media (max-width: 960px){
+    font-size: rem(35)
+  }
 }
 
 @mixin h3 {
@@ -59,6 +63,10 @@ p {
   letter-spacing: 0;
   margin: line-steps(4) 0;
   font-weight: 400;
+
+  @media (max-width: 960px){
+    font-size: rem(30)
+  }
 }
 
 @mixin h4 {
@@ -69,6 +77,10 @@ p {
   letter-spacing: rem(0.25);
   margin: line-steps(3) 0;
   font-weight: 400;
+
+  @media (max-width: 960px){
+    font-size: rem(30)
+  }
 }
 
 @mixin h5 {

assets/js/init.js

@@ -72,6 +72,8 @@ const x = {
       const threshold = document.querySelector('header .cta').clientHeight;
       const content = document.getElementById('content');
       const padding = header.offsetHeight - threshold;
+      const toggler = document.getElementById('navbar-toggler');
+      const nav     = document.getElementById('nav');
 
       x.extend({ headerOverlap: threshold });
 
@@ -80,7 +82,7 @@ const x = {
       let wasSmallHeader = false;
 
       window.addEventListener('scroll', e => {
-        smallHeader = window.scrollY >= threshold;
+        smallHeader = window.scrollY >= threshold && window.outerWidth > 960;
 
         if (!ticking) {
           window.requestAnimationFrame(() => {
@@ -104,6 +106,15 @@ const x = {
           ticking = true;
         }
       });
+
+      // Toggle between display none and block for mobile navbar
+      toggler.addEventListener('click', () => {
+        if (nav.classList.contains('nav-show')) {
+          nav.classList.remove('nav-show');
+        } else {
+          nav.classList.add('nav-show');
+        }
+      })
     },
   ],
 };