nav

baiddd · Feb 12, 2024 · bb4ec69 · bb4ec69
1 parent 638733b
commit bb4ec69
Showing 1 changed file with 34 additions and 53 deletions.
diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss
@@ -51,11 +51,10 @@
      ========================================================================== */
 
 .pagination {
+  @include full();
   @include clearfix();
-  float: left;
   margin-top: 1em;
   padding-top: 1em;
-  width: 100%;
 
   ul {
     margin: 0;
@@ -70,7 +69,6 @@
     margin-left: -1px;
 
     a {
-      display: block;
       margin-bottom: 0.25em;
       padding: 0.5em 1em;
       font-family: $sans-serif;
@@ -87,7 +85,11 @@
         color: $link-color-hover;
       }
 
-      &.current,
+      &.current{
+        color: #fff;
+        background: $primary-color;
+      }
+
       &.current.disabled {
         color: #fff;
         background: $primary-color;
@@ -170,68 +172,52 @@
 
 .greedy-nav {
   position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: $nav-height;
+  min-height: 250px;
   background: $background-color;
 
   a {
     display: block;
     margin: 0 1rem;
+    padding: 0.5rem 0;
     color: $masthead-link-color;
     text-decoration: none;
-    -webkit-transition: none;
-    transition: none;
 
     &:hover {
       color: $masthead-link-color-hover;
     }
-
-    &.site-logo {
-      margin-left: 0;
-      margin-right: 0.5rem;
-    }
-
-    &.site-title {
-      margin-left: 0;
-    }
-  }
-
-  img {
-    -webkit-transition: none;
-    transition: none;
   }
 
-  &__toggle {
-    -ms-flex-item-align: center;
-    align-self: center;
-    height: $nav-toggle-height;
+  button {
+    position: absolute;
+    height: 100%;
+    right: 0;
+    padding: 0 0.5rem;
     border: 0;
     outline: none;
-    background-color: transparent;
+    background-color: $primary-color;
+    color: #fff;
     cursor: pointer;
   }
 
   .visible-links {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-    -webkit-box-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-    overflow: hidden;
+    display: table;
 
     li {
-      -webkit-box-flex: 0;
-      -ms-flex: none;
-      flex: none;
+      display: table-cell;
+      vertical-align: middle;
+
+      &:first-child {
+        font-weight: bold;
+
+        a {
+          margin-left: 0;
+        }
+      }
+      &:last-child {
+        a {
+          margin-right: 0;
+        }
+      }
     }
 
     a {
@@ -247,8 +233,9 @@
         width: 100%;
         -webkit-transition: $global-transition;
         transition: $global-transition;
-        -webkit-transform: scaleX(0) translate3d(0, 0, 0);
-        transform: scaleX(0) translate3d(0, 0, 0); // hide
+        -webkit-transform: scaleX(0);
+            -ms-transform: scaleX(0);
+                transform: scaleX(0);
       }
 
       &:hover:before {
@@ -268,14 +255,8 @@
     border: 1px solid $border-color;
     border-radius: $border-radius;
     background: $background-color;
-    -webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16),
-      0 2px 10px 0 rgba(#000, 0.12);
     box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
 
-    &.hidden {
-      display: none;
-    }
-
     a {
       margin: 0;
       padding: 10px 20px;