feat: update for doks 0.3.4

assets/scss/components/_alerts.scss

@@ -7,7 +7,7 @@
   margin-right: 0.75rem;
 }
 
-.docs .alert {
+.docs main .alert {
   margin: 2rem -1.5rem;
 }
 
@@ -62,6 +62,28 @@
   text-decoration: none;
 }
 
+.alert-dismissible .btn-close {
+  position: absolute;
+
+  /*
+  top: 50%;
+  transform: translateY(-50%);
+  */
+  top: 0.75rem;
+  right: 1rem;
+  z-index: 2;
+  padding: 0.625rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  background-size: 1.5rem;
+  filter: invert(1) grayscale(100%) brightness(200%);
+}
+
+@include media-breakpoint-up(md) {
+  .alert-dismissible .btn-close {
+    background-size: 1.25rem;
+  }
+}
+
 .alert code {
   background: darken($beige, 5%);
   color: $black;

assets/scss/components/_buttons.scss

@@ -4,7 +4,9 @@
 }
 
 #mode {
-  margin-right: 1.25rem;
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
+  margin-right: -0.25rem;
 }
 
 .btn-link:focus {
@@ -18,7 +20,8 @@
 
 @include media-breakpoint-up(md) {
   #mode {
-    margin-right: 0.5rem;
+    margin-left: 1.125rem;
+    margin-right: -0.375rem;
   }
 
   .navbar .btn-link {
@@ -42,11 +45,11 @@ body .toggle-light {
   display: none;
 }
 
-body.dark .toggle-light {
+[data-dark-mode] body .toggle-light {
   display: block;
 }
 
-body.dark .toggle-dark {
+[data-dark-mode] body .toggle-dark {
   display: none;
 }
 
@@ -183,3 +186,26 @@ pre {
 .btn-toggle-nav a.active {
   color: $link-color;
 }
+
+.doks-navbar .dropdown-menu,
+.doks-subnavbar .dropdown-menu {
+  font-size: 0.875rem;
+}
+
+.doks-navbar .dropdown-item.current,
+.doks-subnavbar .dropdown-item.current {
+  font-weight: 600;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 1rem top 0.6rem;
+  background-size: 0.75rem 0.75rem;
+}
+
+.btn-close {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  background-size: 1.5rem;
+}
+
+.offcanvas-header .btn-close {
+  margin-right: 0 !important;
+}

assets/scss/components/_search.scss

@@ -4,9 +4,10 @@
 
 #suggestions {
   position: absolute;
-  right: 0;
+  left: 0;
   margin-top: 0.5rem;
   width: calc(100vw - 3rem);
+  z-index: $zindex-dropdown;
 }
 
 #suggestions a {
@@ -53,7 +54,7 @@
 
 @include media-breakpoint-up(sm) {
   #suggestions {
-    width: 30rem;
+    width: 31.125rem;
   }
 
   #suggestions a {

assets/scss/components/_syntax.scss

@@ -44,19 +44,19 @@ Based on Ascetic by (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
   font-style: italic;
 }
 
-body.dark .hljs {
+[data-dark-mode] body .hljs {
   background: $body-overlay-dark;
   color: $body-color-dark;
 }
 
-body.dark .hljs-string,
-body.dark .hljs-variable,
-body.dark .hljs-template-variable,
-body.dark .hljs-symbol,
-body.dark .hljs-bullet,
-body.dark .hljs-section,
-body.dark .hljs-addition,
-body.dark .hljs-attribute,
-body.dark .hljs-link {
+[data-dark-mode] body .hljs-string,
+[data-dark-mode] body .hljs-variable,
+[data-dark-mode] body .hljs-template-variable,
+[data-dark-mode] body .hljs-symbol,
+[data-dark-mode] body .hljs-bullet,
+[data-dark-mode] body .hljs-section,
+[data-dark-mode] body .hljs-addition,
+[data-dark-mode] body .hljs-attribute,
+[data-dark-mode] body .hljs-link {
   color: $blue-300;
 }