Media queries & responsiveness

Author: mnau23

dist/css/main.css

@@ -151,3 +151,50 @@ main {
     overflow: hidden; }
     main#home h1 {
       margin-top: 20vh; }
+
+@media screen and (min-width: 501px) and (max-width: 768px) {
+  main {
+    align-items: center;
+    text-align: center; }
+    main .lg-heading {
+      line-height: 1;
+      margin-bottom: 1rem; }
+  ul.menu-nav, div.menu-photo {
+    float: none;
+    width: 100%;
+    min-height: 0; }
+    ul.menu-nav.show, div.menu-photo.show {
+      transform: translate3d(0, 0, 0); }
+  .menu-nav {
+    height: 70vh;
+    transform: translate3d(-100%, 0, 0);
+    font-size: 24px; }
+  .menu-photo {
+    height: 30vh;
+    transform: translate3d(100%, 0, 0); }
+    .menu-photo .portrait {
+      background: url("../img/portrait_small.jpg");
+      width: 150px;
+      height: 150px; } }
+
+@media screen and (max-width: 500px) {
+  main#home h1 {
+    margin-top: 10vh;
+    text-align: center; }
+  ul.menu-nav, div.menu-photo {
+    float: none;
+    width: 100%;
+    min-height: 0; }
+    ul.menu-nav.show, div.menu-photo.show {
+      transform: translate3d(0, 0, 0); }
+  .menu-nav {
+    height: 70vh;
+    transform: translate3d(-100%, 0, 0);
+    font-size: 24px; }
+  .menu-photo {
+    height: 30vh;
+    transform: translate3d(100%, 0, 0); }
+    .menu-photo .portrait {
+      background: url("../img/portrait_small.jpg");
+      width: 150px;
+      height: 150px; } }

scss/_config.scss

@@ -36,3 +36,28 @@ $background-opacity: 0.7;
         @return #fff;
     }
 }
+
+// Media query mixins
+@mixin mediaSm {
+    @media screen and (max-width: 500px) {
+        @content;
+    }
+}
+
+@mixin mediaMd {
+    @media screen and (min-width: 501px) and (max-width: 768px) {
+        @content;
+    }
+}
+
+@mixin mediaLg {
+    @media screen and (min-width: 769px) and (max-width: 1170px) {
+        @content;
+    }
+}
+
+@mixin mediaXl {
+    @media screen and (min-width: 1171px) {
+        @content;
+    }
+}

scss/_mobile.scss

@@ -0,0 +1,71 @@
+// Wide screens
+@include mediaXl {
+}
+
+// Desktops & laptops
+@include mediaLg {
+}
+
+// Tablets & small laptops
+@include mediaMd {
+    main {
+        align-items: center;
+        text-align: center;
+        .lg-heading {
+            line-height: 1;
+            margin-bottom: 1rem;
+        }
+    }
+    ul.menu-nav, div.menu-photo {
+        float: none;
+        width: 100%;
+        min-height: 0;
+        &.show {
+            transform: translate3d(0, 0, 0);
+        }
+    }
+    .menu-nav {
+        height: 70vh;
+        transform: translate3d(-100%, 0, 0);
+        font-size: 24px;
+    }
+    .menu-photo {
+        height: 30vh;
+        transform: translate3d(100%, 0, 0);
+        .portrait {
+            background: url('../img/portrait_small.jpg');
+            width: 150px;
+            height: 150px;
+        }
+    }
+}
+
+// Smartphones
+@include mediaSm {
+    main#home h1 {
+        margin-top: 10vh;
+        text-align: center;
+    }
+    ul.menu-nav, div.menu-photo {
+        float: none;
+        width: 100%;
+        min-height: 0;
+        &.show {
+            transform: translate3d(0, 0, 0);
+        }
+    }
+    .menu-nav {
+        height: 70vh;
+        transform: translate3d(-100%, 0, 0);
+        font-size: 24px;
+    }
+    .menu-photo {
+        height: 30vh;
+        transform: translate3d(100%, 0, 0);
+        .portrait {
+            background: url('../img/portrait_small.jpg');
+            width: 150px;
+            height: 150px;
+        }
+    }
+}

scss/main.scss

@@ -67,3 +67,5 @@ main {
         }
     }
 }
+
+@import 'mobile';