Шлифует поле поиска

Придумала назвать горячую клавишу словом клавиша, вау
doka-guide · May 21, 2024 · e0c80bb · e0c80bb
1 parent 10255ab
commit e0c80bb
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/src/includes/blocks/header.njk b/src/includes/blocks/header.njk
@@ -2,7 +2,7 @@
 
 {% macro devider() %}
   <span
-    class="header__devider font-theme font-theme--code"
+    class="header__divider font-theme font-theme--code"
     aria-hidden="true"
   >
   </span>
@@ -68,7 +68,7 @@
       {% if not isMainPage %}
         <div class="header__hamburger">
           <span class="hotkey hotkey--search font-theme font-theme--code">
-            Поиск <kbd class="hotkey__key">/</kbd>
+            Клавиша <kbd class="hotkey__key">/</kbd>
           </span>
           <span class="hotkey hotkey--close font-theme font-theme--code">
             <kbd class="hotkey__key">esc</kbd>

diff --git a/src/includes/blocks/search.njk b/src/includes/blocks/search.njk
@@ -17,7 +17,7 @@
       id="search-field"
       type="text"
       name="query"
-      placeholder="Что ищете?"
+      placeholder="Поиск"
       aria-keyshortcuts="&#47;"
       autocomplete="off"
       {% if permalink == isSearchPage %}aria-describedby="search-hint"{% endif %}
@@ -26,7 +26,7 @@
     {# TODO: перенести в header.njk? #}
     {% if isMainPage %}
       <span class="search__key hotkey hotkey--search">
-        Поиск <kbd class="hotkey__key">/</kbd>
+        Клавиша <kbd class="hotkey__key">/</kbd>
       </span>
     {% endif %}
 

diff --git a/src/styles/blocks/header.css b/src/styles/blocks/header.css
@@ -79,15 +79,16 @@
   background-color: var(--color-background);
 }
 
-.header__devider {
+.header__divider {
   margin-left: 0.2em;
   margin-right: 0.2em;
   font-family: var(--font-family);
+  font-size: 0.85em;
   letter-spacing: var(--letter-spacing);
   opacity: 0.3;
 }
 
-.header__devider::before {
+.header__divider::before {
   content: "/";
 }
 
@@ -119,7 +120,7 @@
 }
 
 .hotkey--search {
-  display: inline;
+  display: none;
 }
 
 .header--open .hotkey--search {
@@ -138,7 +139,7 @@
 }
 
 @media (width >= 1024px) {
-  .hotkey__key {
+  .hotkey--search, .hotkey__key {
     display: inline;
   }
 }

diff --git a/src/styles/blocks/hotkey.css b/src/styles/blocks/hotkey.css
@@ -12,6 +12,12 @@
   user-select: none;
 }
 
+@media (width <= 1366px) {
+  .hotkey {
+    font-size: 18px;
+  }
+}
+
 @media not all and (width >= 768px) {
   .hotkey {
     display: none;

diff --git a/src/styles/blocks/search.css b/src/styles/blocks/search.css
@@ -42,20 +42,28 @@
   border: 0;
   padding: 0 100px 0 10px;
   font: inherit;
-  letter-spacing: inherit;
+  line-height: calc(1em + 1px);
+  letter-spacing: -0.08em;
   color: inherit;
   outline: none;
   border-bottom: 2px solid hsl(0 0% 70%);
   background-color: transparent;
 }
 
+@media (width >= 1024px) {
+  .search__input {
+    padding-inline-start: 0;
+  }
+}
+
 .search__input:focus {
   border-bottom-color: var(--color-text);
 }
 
 .search__control {
   position: relative;
   display: grid;
+  font-size: var(--font-size-l);
 }
 
 .search__control > * {