chore: update docs and style (#269)

assets/css/_partial/_header.scss

@@ -3,7 +3,7 @@ header {
   z-index: 150;
   background-color: $header-background-color;
 
-  .dark & {
+  [theme=dark] & {
     background-color: $header-background-color-dark;
   }
 
@@ -66,7 +66,7 @@ header {
     vertical-align: baseline !important;
     @include transition(width 0.3s ease);
 
-    .dark & {
+    [theme=dark] & {
       background-color: $header-background-color-dark;
     }
   }
@@ -100,7 +100,7 @@ header {
       padding: 0 2rem 0 2rem;
     }
 
-    .dark & {
+    [theme=dark] & {
       input {
         color: $global-font-color-dark;
         background-color: $search-background-color-dark;
@@ -114,7 +114,7 @@ header {
     .search-button {
       color: $global-font-secondary-color;
 
-      .dark & {
+      [theme=dark] & {
         color: $global-font-secondary-color-dark;
       }
     }
@@ -140,7 +140,7 @@ header {
   line-height: $header-height;
 
   .header-wrapper {
-    padding: 0 10vw;
+    padding: 0 2rem 0 10vh;
 
     .header-title {
       font-size: $header-title-font-size;
@@ -160,7 +160,7 @@ header {
         &.delimiter {
           border-left: 1.5px solid $global-font-color;
 
-          .dark & {
+          [theme=dark] & {
             border-left-color: $global-border-color-dark;
           }
         }
@@ -178,7 +178,7 @@ header {
         font-weight: 900;
         color: $header-hover-color;
 
-        .dark & {
+        [theme=dark] & {
           color: $header-hover-color-dark;
         }
       }
@@ -227,7 +227,7 @@ header {
           @include border-radius(3px);
           @include transition(all 0.3s ease-in-out);
 
-          .dark & {
+          [theme=dark] & {
             background: $global-font-color-dark;
           }
         }
@@ -295,7 +295,7 @@ header {
         display: block;
       }
 
-      .dark & {
+      [theme=dark] & {
         background: $header-background-color-dark;
         border-top-color: $global-border-color-dark;
       }
@@ -329,7 +329,7 @@ header {
   @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
 
   &.desktop {
-    right: 10vw;
+    right: 2rem;
     width: 30rem;
   }
 
@@ -342,7 +342,7 @@ header {
     right: 0 !important;
     background-color: $global-background-color;
 
-    .dark & {
+    [theme=dark] & {
       background-color: $global-background-color-dark;
     }
 
@@ -369,7 +369,7 @@ header {
           text-align: right;
           color: $global-font-secondary-color;
 
-          .dark & {
+          [theme=dark] & {
             color: $global-font-secondary-color-dark;
           }
         }
@@ -383,7 +383,7 @@ header {
           overflow-wrap: break-word;
           color: $global-font-secondary-color;
 
-          .dark & {
+          [theme=dark] & {
             color: $global-font-secondary-color-dark;
           }
         }
@@ -392,7 +392,7 @@ header {
           font-style: normal;
           background-color: $selection-color;
 
-          .dark & {
+          [theme=dark] & {
             background-color: $selection-color-dark;
           }
         }
@@ -400,7 +400,7 @@ header {
         &.cursor {
           background: darken($code-background-color, 5%);
 
-          .dark & {
+          [theme=dark] & {
             background: lighten($code-background-color-dark, 5%);
           }
         }
@@ -418,7 +418,7 @@ header {
       .search-query {
         font-weight: bold;
 
-        .dark & {
+        [theme=dark] & {
           color: #ddd;
         }
       }
@@ -430,7 +430,7 @@ header {
       font-size: .8rem;
       color: $global-font-secondary-color;
 
-      .dark {
+      [theme=dark] {
         color: $global-font-secondary-color-dark;
       }