added responsive rules

eea · Apr 15, 2020 · fbf5958 · fbf5958
1 parent 827ca06
commit fbf5958
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 85 deletions.
diff --git a/theme/themes/pastanaga/collections/menu.overrides b/theme/themes/pastanaga/collections/menu.overrides
@@ -1,7 +1,6 @@
 /*******************************
          Theme Overrides
 *******************************/
-
 .ui.menu .item.personal-bar {
   position: fixed;
   bottom: 68px;
@@ -37,8 +36,7 @@
   margin: 4px -14px 0;
   background-repeat: no-repeat;
   background-size: 64px 18px;
-  transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
-    margin 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045), margin 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
 }
 
 .ui.menu.collapsed .item.logo > .image {
@@ -104,22 +102,29 @@
 
 .navigation,
 .tools {
-  .menu {
-    margin-top: 0;
+  margin-left: 40px;
+  @media only screen and (max-width: @largestTabletScreen) {
+    margin-left: 0;
+    margin-top: 0.5rem;
+  }
+
+  .ui.pointing.secondary.stackable.computer.large.screen.widescreen.only.menu {
+    @media only screen and (max-width: 1071px) and (min-width:992px) {
+      display: flex !important;
+    }
   }
-  margin: 0 0 0 40px;
-    .ui.secondary.pointing.menu {
-    border: 0;
 
+  .ui.secondary.pointing.menu {
+    border: 0;
     @media only screen and (max-width: @largestTabletScreen) {
       margin-bottom: 20px;
       margin-left: 0;
     }
 
     a {
       &:hover {
-      color: rgba(white, .5);
-      border-color: transparent;
+        color: rgba(white, .5);
+        border-color: transparent;
       }
     }
 
@@ -128,22 +133,22 @@
       font-size: 14px;
       text-transform: uppercase;
       color: rgba(white, .8);
-      padding-top: @relativeBig;
+      //padding-top: @relativeBig;
       margin: 0;
 
       &.active {
         font-weight: 700;
         color: white;
         border-color: transparent;
+
         &:hover {
           color: rgba(white, .8);
         }
       }
-
-      @media only screen and (min-width: @largestTabletScreen) {
-        padding: 1.7em 0 @relativeBig;
-        margin: 0 unit(@relativeLarge * 2, em) 0 0;
-      }
+      /*@media only screen and (min-width: @largestTabletScreen) {
+            padding: 1.7em 0 @relativeBig;
+            margin: 0 unit(@relativeLarge * 2, em) 0 0;
+          }*/
     }
   }
 }
@@ -177,14 +182,12 @@
     color: @black;
   }
 }
-
 @media only screen and (max-width: 767px) {
   .ui.menu.stackable > .menu,
   .ui.menu.stackable > .menu.right {
     display: block;
   }
 }
-
 /* Pagination */
 .pagination-wrapper {
   text-align: center;
@@ -204,6 +207,8 @@
 
   .active.item {
     background: none;
-    color: @textColor;
+    color: @linkColor;
+    font-weight: 700;
+    border-bottom: 2px solid @linkColor;
   }
 }
diff --git a/theme/themes/pastanaga/elements/header.overrides b/theme/themes/pastanaga/elements/header.overrides
@@ -1,7 +1,6 @@
 /*******************************
          Theme Overrides
 *******************************/
-
 .ui.basic.segment.header-wrapper {
   margin-bottom: 0;
   background-color: @primaryColor;
@@ -15,39 +14,49 @@
   .logo-nav-wrapper {
     display: flex;
     flex-grow: 2;
+    @media only screen and (max-width: @largestTabletScreen) {
+      align-items: initial;
+      justify-content: start;
+      flex-direction: row-reverse;
+      flex-grow: 0;
+    }
 
     .logo {
       flex: 0 0 auto;
+      @media only screen and (max-width: @largestTabletScreen) {
+        margin-left: 2rem;
+      }
     }
 
     .navigation {
+      .hamburger-inner {
+        background: white;
+
+        &:after,
+        &:before {
+          background: white;
+        }
+      }
       // -ms-overflow-style: none; /* IE 10+ */
       // overflow-x: auto;
-
       &::-webkit-scrollbar {
-        height: 0; /* remove scrollbar space */
-        background: transparent; /* optional: just make scrollbar invisible */
+        height: 0;
+        /* remove scrollbar space */
+        background: transparent;
+        /* optional: just make scrollbar invisible */
       }
-
       /* optional: show position indicator in red */
       &::-webkit-scrollbar-thumb {
         background: #f00;
       }
-
       @media only screen and (max-width: @largestTabletScreen) {
         overflow-x: initial;
       }
     }
   }
-
   @media only screen and (max-width: @largestTabletScreen) {
-    flex-direction: column;
+    //flex-direction: initial;
     align-items: initial;
-
-    .logo-nav-wrapper {
-      align-items: initial;
-      justify-content: space-between;
-    }
   }
 
   .tools-search-wrapper {
@@ -58,6 +67,15 @@
     align-items: center;
     justify-content: flex-end;
     margin-left: @huge;
+    width: 20%;
+    /* @media only screen and (max-width: 560px){
+
+    } */
+    @media only screen and (max-width: @largestTabletScreen) {
+      width: 20%;
+      height: 20%;
+      justify-content: end;
+    }
 
     & > * {
       display: flex;
@@ -73,9 +91,11 @@
   }
 }
 
-
 .header-container {
   width: 80%;
   margin: 0 auto;
-  max-width: 1600px;
-}
+  //max-width: 1600px;
+  @media only screen and (max-width: 982px) {
+    width: auto;
+  }
+}