Пытается починить отступы в меню

doka-guide · May 3, 2024 · a20aad4 · a20aad4
1 parent c9b1b26
commit a20aad4
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 25 deletions.
diff --git a/src/includes/blocks/header.njk b/src/includes/blocks/header.njk
@@ -68,10 +68,10 @@
       {% if not isMainPage %}
         <div class="header__hamburger">
           <span class="hotkey hotkey--search font-theme font-theme--code">
-            Поиск <kbd>/</kbd>
+            Поиск <kbd class="hotkey__key">/</kbd>
           </span>
           <span class="hotkey hotkey--close font-theme font-theme--code">
-            esc
+            <kbd class="hotkey__key">esc</kbd>
           </span>
 
           <button

diff --git a/src/includes/blocks/search.njk b/src/includes/blocks/search.njk
@@ -22,9 +22,10 @@
       {% if permalink == isSearchPage %}aria-describedby="search-hint"{% endif %}
     >
 
+    {# TODO: перенести в header.njk? #}
     {% if isMainPage %}
       <span class="search__key search__key--activate hotkey">
-        Поиск <kbd>/</kbd>
+        Поиск <kbd class="hotkey__key">/</kbd>
       </span>
     {% endif %}
 

diff --git a/src/styles/blocks/header.css b/src/styles/blocks/header.css
@@ -72,7 +72,8 @@
 }
 
 .header__devider {
-  margin: 0 0.2em;
+  margin-left: 0.2em;
+  margin-right: 0.2em;
   font-family: var(--font-family);
   letter-spacing: var(--letter-spacing);
   opacity: 0.3;
@@ -100,7 +101,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  margin-inline-start: 20px;
+  margin-left: 20px;
   gap: 16px;
 }
 
@@ -109,16 +110,33 @@
   display: none;
 }
 
+.hotkey--search {
+  display: inline;
+}
+
 .header--open .hotkey--search {
   display: none;
 }
 
+.hotkey__key {
+  font-family: inherit;
+  display: none;
+}
+
 @media (width >= 768px) {
   .header--open .hotkey--close {
     display: inherit;
   }
 }
 
+@media (width >= 1024px) {
+  .hotkey__key {
+    display: inline;
+  }
+}
+
+/* TODO: хранить стили из .header__menu в .nav-list (в одном месте) */
+
 /* дропдаун с разделами */
 .header__menu {
   height: 0;
@@ -148,18 +166,6 @@
   filter: grayscale(100%) brightness(45%);
 }
 
-/* список разделов */
-.header__menu-list {
-  padding: 0 var(--menu-padding-min) var(--menu-padding-min);
-  background: var(--color-background);
-}
-
-@media (width >= 1024px) {
-  .header__menu-list {
-    padding: 0 var(--menu-padding-max) var(--menu-padding-max) calc(40*var(--gap, 16px));
-  }
-}
-
 /* скрываем крошки, когда меню открыто */
 .header--open .header__category {
   display: none;

diff --git a/src/styles/blocks/nav-list.css b/src/styles/blocks/nav-list.css
@@ -1,31 +1,44 @@
+:root {
+  --list-padding-min: 10px;
+  --list-padding-max: 20px;
+  --gap: 16px;
+}
+
 .nav-list {
   --stroke-size: calc(6 / 48 * 1em);
   --transition: 150ms ease-in-out;
   display: grid;
+  padding-top: var(--list-padding-min);
+  padding-bottom: var(--list-padding-min);
+  padding-right: var(--list-padding-min);
+  padding-left: var(--list-padding-min);
   gap: 16px;
+  background: var(--color-background);
 }
 
 @media (width >= 768px) {
   .nav-list {
-    --gap: 14px;
+    --block-padding: 1px;
+    gap:14px;
     line-height: calc(42 / 36);
   }
 }
 
+/* TODO: рассчитать отступ слева более элегантно */
+
 @media (width >= 1024px) {
   .nav-list {
+    --block-padding: 6px;
     --gap: 6px;
+    padding-top: 0;
+    padding-bottom: var(--list-padding-max);
+    padding-right: var(--list-padding-max);
+    padding-left: calc(40*var(--gap));
+    gap: 6px;
     line-height: inherit;
   }
 }
 
-@media (width >= 1680px) {
-  .nav-list {
-    --gap: 9px;
-    line-height: 1;
-  }
-}
-
 .nav-list__item {
   position: relative;
   z-index: 0;