_sass/hima/main.scss in hima-1.0.5 vs _sass/hima/main.scss in hima-1.1.0

@@ -1,19 +1,8 @@
 @charset "utf-8";
 @import './fonts';
 
-$content-padding: 2rem;
-$content-padding-mobile: 1rem;
-$content-width: 60rem;
-
-$header-margin-top: 4rem;
-$header-height: 8rem;
-$header-pinned-height: 4rem;
-
-$on-mobile: 425px;
-$on-tablet: 800px;
-
 html {
   overflow-y: scroll;
 }
 
 body {
@@ -83,14 +72,19 @@
   display: flex;
   justify-content: center;
   align-items: end;
   margin-bottom: 2rem;
   position: sticky;
+  -webkit-font-smoothing: antialiased;
   top: -($header-height + $header-margin-top - $header-pinned-height);
   height: $header-height + $header-margin-top;
-  -webkit-font-smoothing: antialiased;
 
+  @media (max-width: $on-mobile) {
+    top: -($header-height + ($header-margin-top/2) - $header-pinned-height);
+    height: $header-height + ($header-margin-top/2);
+  }
+
   &__title {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 2.5rem;
@@ -98,10 +92,14 @@
     font-variation-settings: "wght" 700;
     text-transform: uppercase;
     text-align: center;
     line-height: 1.2;
 
+    @media (max-width: $on-mobile) {
+      font-size: 2rem;
+    }
+
     a {
       text-decoration: none;
       color: $foreground;
 
       &:hover {
@@ -120,11 +118,15 @@
 
   label[for="nav-toggle"] {
     display: none;
     margin-top: 0;
     height: 24px;
-    fill: $nav-menu-icon-fill;
+    width: 24px;
+    color: $nav-menu-icon-fill;
+    font-size: 1.33rem;
+    cursor: pointer;
+    user-select: none;
   }
 
   &__links {
     list-style-type: none;
     margin: 0;
@@ -136,10 +138,14 @@
 
   &__link {
     margin: 0 2rem;
   }
 
+  a.active {
+    border-bottom: .15rem solid $foreground;
+  }
+
   &--pinned {
     background: $header-pinned-background;
     box-shadow: 0 -1rem 2rem 0 $header-pinned-boxshadow;
   }
 
@@ -152,10 +158,16 @@
       position: relative;
     }
 
     &__title {
       font-size: 1.67rem;
+
+      &:only-child {
+        margin-left: auto;
+        margin-right: auto;
+      }
+
       @media (max-width: $on-mobile) {
         font-size: 1.33rem;
       }
     }
 
@@ -168,21 +180,34 @@
         background: $header-pinned-background;
         flex-direction: column;
         align-items:end;
         position: absolute;
         border: .2rem solid $nav-pinned-border;
-        border-radius: .25rem;
+        border-radius: $block-border-radius;
         right: $content-padding;
         top: .67rem;
         padding: .5rem;
       }
 
       @media (max-width: $on-mobile) {
         right: $content-padding-mobile;
       }
     }
 
+    &__nav-toggle {
+      display: block;
+      opacity: 0;
+      height: 0;
+      margin: 0;
+    }
+
+    &__nav-toggle:focus-visible + label {
+      border: .15rem solid $foreground;
+      border-radius: $block-border-radius;
+      box-sizing: border-box;
+    }
+
     &__link {
       margin: 0;
       margin-left: 3rem;
 
       @media (max-width: $on-tablet) {
@@ -192,11 +217,13 @@
       }
     }
 
     &__nav label[for="nav-toggle"] {
       @media (max-width: $on-tablet) {
-        display: block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
     }
 
     &__nav-toggle ~ .header__links {
       @media (max-width: $on-tablet) {
@@ -249,10 +276,15 @@
   display: flex;
   justify-content: center;
   margin-top: 4rem;
   margin-bottom: 8rem;
 
+  @media (max-width: $on-mobile) {
+    margin-bottom: 4rem;
+  }
+
+
   &__author {
     display: flex;
     align-items: center;
     flex-direction: column;
   }
@@ -309,12 +341,13 @@
 
 blockquote {
   background: $quote-background;
   margin: 0;
   padding: 1rem 2rem 1rem;
-  border-left: .3rem solid $quote-border;
-  border-radius: .25rem;
+  border: .1rem solid $quote-border;
+  border-left: .3rem solid $quote-border-accent;
+  border-radius: $block-border-radius;
   font-style: italic;
 
   p {
     margin: 0;
   }
@@ -329,18 +362,23 @@
   padding: 1rem;
 
   &.highlight {
     border: none;
   }
+
+  .highlight > & {
+    margin: 0;
+  }
 }
 
 .highlight {
   margin: 0;
   border: .1rem solid $codeblock-border;
   border-left: .3rem solid $codeblock-border-accent;
-  border-radius: .25rem;
+  border-radius: $block-border-radius;
   overflow-x: auto;
+  background: $codeblock-background;
 
   code {
     padding: 0;
     border: none;
   }
@@ -351,18 +389,19 @@
 }
 
 :not(pre) > code {
   background: $inline-code-background;
   padding: .2rem .25rem;
-  border-radius: .25rem;
-  border: .15rem solid $code-border;
+  border-radius: $block-border-radius;
+  border: .15rem solid $inline-code-border;
   overflow-x: auto;
 }
 
 table {
   width: 100%;
   border-collapse: collapse;
   background: $table-background;
+  border-radius: $block-border-radius;
 
   @media (max-width: $on-tablet) {
     display: block;
     overflow-x: auto;
   }