added horizontal transition on mobile @media-query

ganesh-deshmukh · Aug 7, 2018 · db74046 · db74046
1 parent 0252748
commit db74046
Show file tree

Hide file tree

Showing 10 changed files with 263 additions and 164 deletions.
diff --git a/.sass-cache/8a167a46b14e7f5344346ab0bec9947b8bba6506/_config.scssc b/.sass-cache/8a167a46b14e7f5344346ab0bec9947b8bba6506/_config.scssc
diff --git a/.sass-cache/8a167a46b14e7f5344346ab0bec9947b8bba6506/_mobile.scssc b/.sass-cache/8a167a46b14e7f5344346ab0bec9947b8bba6506/_mobile.scssc
diff --git a/.sass-cache/8a167a46b14e7f5344346ab0bec9947b8bba6506/main.scssc b/.sass-cache/8a167a46b14e7f5344346ab0bec9947b8bba6506/main.scssc
diff --git a/dist/css/main.css b/dist/css/main.css
diff --git a/dist/css/main.css.map b/dist/css/main.css.map
diff --git a/dist/images/portrait-small.jpg b/dist/images/portrait-small.jpg
diff --git a/scss/_config.scss b/scss/_config.scss
@@ -46,7 +46,7 @@ $background-opacity: 0.8;
     @content;
   }
 }
-@mixin mediaXL {
+@mixin mediaXl {
   @media screen and (min-width: 1171px) {
     @content;
   }

diff --git a/scss/_menu.scss b/scss/_menu.scss
@@ -113,6 +113,7 @@
       color: $secondary-color;
     }
   }
+
   .nav-link {
     display: inline-block;
     position: relative;

diff --git a/scss/_mobile.scss b/scss/_mobile.scss
@@ -1,11 +1,11 @@
-// WideScreens
-@include mediaXL {
+@include mediaXl {
 }
 
 // Desktops & Laptops
 @include mediaLg {
 }
-// Tablets and Netbooks
+
+// Tablets & Small Laptops
 @include mediaMd {
   main {
     align-items: center;
@@ -15,32 +15,38 @@
       line-height: 1;
       margin-bottom: 1rem;
     }
-    ul.menu-nav,
-    div.menu-branding {
-      float: none;
-      width: 100%;
-      min-height: 0;
-
-      &.show {
-        transform: translate3d(0, 0, 0);
-      }
-    }
+  }
 
-    .menu-nav {
-      height: 75vh;
-      transform: translate3d(-100%, 0, 0);
-      font-size: 24px;
+  ul.menu-nav,
+  div.menu-branding {
+    float: none;
+    width: 100%;
+    min-height: 0;
+
+    &.show {
+      transform: translate3d(0, 0, 0);
     }
-    .menu-branding {
-      height: 25vh;
-      transform: translate3d(100%, 0, 0);
+  }
 
-      background: url(../dist/images/background.jpg);
+  .menu-nav {
+    height: 75vh;
+    transform: translate3d(-100%, 0, 0);
+    font-size: 24px;
+  }
+
+  .menu-branding {
+    height: 25vh;
+    transform: translate3d(100%, 0, 0);
+
+    .portrait {
+      background: url("../images/portrait-small.jpg");
       width: 150px;
       height: 150px;
+      padding: 50px;
     }
   }
 }
+
 // Smartphones
 @include mediaSm {
   main#home h1 {

diff --git a/scss/main.scss b/scss/main.scss
@@ -1,6 +1,7 @@
 @import "config";
 @import "menu";
 @import "mobile";
+@import "_mobile.scss";
 
 * {
   box-sizing: border-box;