Обновляет доки <time>, <kbd> (#4775)

* Причёсывает демки * Увеличивает высоту демок * Форматирует текст, меняет высоту демки * Меняет структуру, дополняет тексты * Уточняет инфу про доступность * Улучшает предложение * Принимает правочку Co-authored-by: Alena Batitskaia <[email protected]> * Убирает плюс из примера и демки * Пытается сделать читаемее * Убирает ещё один плюс --------- Co-authored-by: Alena Batitskaia <[email protected]>
doka-guide · Oct 20, 2023 · 6ca944e · 6ca944e
1 parent e5e9d54
commit 6ca944e
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 109 deletions.
diff --git a/html/kbd/demos/complex-kbd/index.html b/html/kbd/demos/complex-kbd/index.html
@@ -6,28 +6,56 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap">
   <style>
-    html, body {
-      height: 100%;
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 24px;
     }
 
     body {
-      margin: 0;
+      min-height: 100vh;
+      padding: 50px;
       display: grid;
       place-content: center;
       background-color: #18191C;
-      color: #ffffff;
-      font-size: 18px;
-      font-family: "Roboto", sans-serif;
+      color: #000000;
     }
 
     pre {
       white-space: pre-wrap;
     }
+
+    code, kbd {
+      font-family: "Roboto Mono", monospace;
+      font-size: 1rem;
+    }
+
+    div {
+      padding: 55px 40px;
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      div {
+        width: 100%;
+        padding: 55px 30px;
+      }
+    }
   </style>
 </head>
 <body>
+<div>
 <pre><code>int main()
 {
   int <var>age</var>;
@@ -37,5 +65,6 @@
   std::cout &lt;&lt; "Укажите вес: ";
   std::cin &gt;&gt; <var><kbd>weight</kbd></var>;
 }</code></pre>
+</div>
 </body>
 </html>
diff --git a/html/kbd/demos/style-kbd/index.html b/html/kbd/demos/style-kbd/index.html
@@ -6,37 +6,67 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Mono&display=swap">
   <style>
-    html, body {
-      height: 100%;
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 24px;
     }
 
     body {
       margin: 0;
       display: grid;
       place-content: center;
       background-color: #18191C;
-      color: #ffffff;
-      font-size: 18px;
+      color: #000000;
       font-family: "Roboto", sans-serif;
     }
 
+    html, body {
+      height: 100%;
+    }
+
     p {
+      margin: 7px 0;
+      font-size: 1rem;
       line-height: 1.4;
-      text-align: center;
     }
 
     kbd {
       padding: 2px 3px 1px;
-      border: 1px solid #ffffff;
+      border: 1px solid #000000;
       border-radius: 3px;
+      font-family: "Roboto Mono", monospace;
+    }
+
+    .container {
+      padding: 55px 40px;
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: 100%;
+        padding: 55px 30px;
+      }
     }
   </style>
 </head>
 <body>
-  <p>
-    Для вставки текста нажмите <kbd>Ctrl</kbd> + <kbd>V</kbd>.
-  </p>
+  <div class="container">
+    <p>
+      Для вставки текста нажмите <kbd>Ctrl V</kbd>.
+    </p>
+  </div>
 </body>
 </html>
diff --git a/html/kbd/index.md b/html/kbd/index.md
@@ -3,6 +3,8 @@ title: "`<kbd>`"
 description: "Пользовательский ввод? Нет, не слышал! Лучше один раз увидеть, каких действий ждёт от вас компьютер."
 authors:
   - webdb81
+contributors:
+  - tatianafokina
 keywords:
   - клавиатура
   - клавиши
@@ -21,7 +23,7 @@ tags:
 
 По умолчанию браузеры выводят `<kbd>` моноширинным шрифтом.
 
-## Как пишется
+## Пример
 
 ```html
 <p>
@@ -30,94 +32,101 @@ tags:
 </p>
 ```
 
-## Как понять
+## Как пишется
 
-Для вывода сложных комбинаций клавиш, каждая отдельная клавиша оборачивается в свой тег `<kbd>`. При желании, всю комбинацию можно обернуть в ещё один `<kbd>` для группировки.
+При создании справочной информации по компьютерной тематике, часто бывает необходимо показать пользователю, как будет выглядеть программный код. В таких случаях на помощь приходят теги [`<code>`](/html/code/), [`<samp>`](/html/samp/), [`<var>`](/html/var/) и [`<pre>`](/html/pre/) в сочетании с `<kbd>`.
+
+Например, в ходе выполнения программы надо подсказать пользователю о вводе переменной. Для отображения выходных данных используется тег [`<samp>`](/html/samp/), а для переменной внутри него — теги [`<var>`](/html/var/) и `<kbd>`:
 
 ```html
 <p>
-  Эту страницу можно
-  распечатать, если нажать
-  <kbd>
-    <kbd>Ctrl</kbd> + <kbd>P</kbd>
-  </kbd>.
+  В ходе работы программы вам надо указать необходимое количество итераций:
+</p>
+<p>
+  <samp>Укажите значение переменной <var><kbd>TmplRepeat</kbd></var>:</samp>
 </p>
 ```
 
-В этом примере символ плюса не является клавишей, которую нужно нажать, поэтому он не обёрнут в `<kbd>`.
+Листинг программы является распространённым вариантом совместного использования нескольких тегов для оформления кода:
 
-Также `<kbd>` используется для вывода команд в интерфейсе:
+<iframe title="Пример использования с code, pre и var" src="demos/complex-kbd/" height="500"></iframe>
+
+Разметка в этом случае будет выглядеть следующим образом:
 
 ```html
-<p>
-  Для поиска по проекту откройте меню
-  <kbd>
-    Edit > Find in Files…
-  </kbd>.
-</p>
+<pre><code>int main()
+{
+  int <var>age</var>;
+  double <var><kbd>weight</kbd></var>;
+  std::cout &lt;&lt; "Укажите возраст: ";
+  std::cin &gt;&gt; <var><kbd>age</kbd></var>;
+  std::cout &lt;&lt; "Укажите вес: ";
+  std::cin &gt;&gt; <var><kbd>weight</kbd></var>;
+}</code></pre>
 ```
 
-## Атрибуты
+### Атрибуты
 
 К тегу `<kbd>` применяются все [глобальные атрибуты](/html/global-attrs/).
 
-## Оформление
+### Оформление
 
 Содержимое тега `<kbd>` можно визуально оформлять с помощью [CSS-правил](/css/css-rule/). Например, для обрамления комбинаций клавиш рамкой определим такое правило:
 
 ```css
 kbd {
   padding: 2px 3px 1px;
-  border: 1px solid #ffffff;
+  border: 1px solid #000000;
   border-radius: 3px;
+  font-family: "Roboto Mono", monospace;
 }
 ```
 
 Затем обернём значения клавиш в `<kbd>`:
 
 ```html
 <p>
-  Для вставки текста нажмите <kbd>Ctrl</kbd> + <kbd>V</kbd>.
+  Для вставки текста нажмите <kbd>Ctrl V</kbd>.
 </p>
 ```
 
 Результат будет выглядеть так:
 
-<iframe title="Стилизация тега kbd" src="demos/style-kbd/" height="100"></iframe>
+<iframe title="Стилизация тега kbd" src="demos/style-kbd/" height="220"></iframe>
 
-## Использование
+### Доступность
 
-При создании справочной информации по компьютерной тематике, часто бывает необходимо показать пользователю, как будет выглядеть программный код. В таких случаях на помощь приходят теги [`<code>`](/html/code/), [`<samp>`](/html/samp/), [`<var>`](/html/var/) и [`<pre>`](/html/pre/) в сочетании с `<kbd>`.
+`<kbd>` никак не влияет на [скринридеры](/a11y/screenreaders/) и другие вспомогательные технологии. Они рассказывают о содержимом тега как об обычном тексте без роли.
 
-Например, в ходе выполнения программы надо подсказать пользователю о вводе переменной. Для отображения выходных данных используется тег [`<samp>`](/html/samp/), а для переменной внутри него — теги [`<var>`](/html/var/) и `<kbd>`:
+Если нужно рассказать о сочетании клавиш только пользователям скринридеров, используйте специальный атрибут [`aria-keyshortcuts`](/a11y/aria-keyshortcuts/).
+
+## Как понять
+
+Для вывода сложных комбинаций клавиш, каждая отдельная клавиша оборачивается в свой тег `<kbd>`. При желании, всю комбинацию можно обернуть в ещё один `<kbd>` для группировки.
 
 ```html
 <p>
-  В ходе работы программы вам надо указать необходимое количество итераций:
-</p>
-<p>
-  <samp>Укажите значение переменной <var><kbd>TmplRepeat</kbd></var>:</samp>
+  Эту страницу можно
+  распечатать, если нажать
+  <kbd>
+    <kbd>Ctrl</kbd> <kbd>P</kbd>
+  </kbd>.
 </p>
 ```
 
-Листинг программы является распространённым вариантом совместного использования нескольких тегов для оформления кода:
-
-<iframe title="Пример использования с code, pre и var" src="demos/complex-kbd/" height="280"></iframe>
+В этом примере символ плюса не является клавишей, которую нужно нажать, поэтому он не обёрнут в `<kbd>`.
 
-Разметка в этом случае будет выглядеть следующим образом:
+Также `<kbd>` используется для вывода команд в интерфейсе:
 
 ```html
-<pre><code>int main()
-{
-  int <var>age</var>;
-  double <var><kbd>weight</kbd></var>;
-  std::cout &lt;&lt; "Укажите возраст: ";
-  std::cin &gt;&gt; <var><kbd>age</kbd></var>;
-  std::cout &lt;&lt; "Укажите вес: ";
-  std::cin &gt;&gt; <var><kbd>weight</kbd></var>;
-}</code></pre>
+<p>
+  Для поиска по проекту откройте меню
+  <kbd>
+    Edit > Find in Files…
+  </kbd>.
+</p>
 ```
 
-## Подсказка
+## Подсказки
 
 💡 При совместном использовании тегов [`<code>`](/html/code/) и [`<pre>`](/html/pre/) необходимо соблюдать порядок вложенности: тег [`<code>`](/html/code/) можно размещать внутри тега [`<pre>`](/html/pre/). А вот [`<pre>`](/html/pre/) внутри тега [`<code>`](/html/code/) — это уже нарушение правила вложенности, в чём можно убедиться на сайте [Can I Include](https://caninclude.glitch.me/caninclude?child=pre&parent=code).
diff --git a/html/time/demos/basic/index.html b/html/time/demos/basic/index.html
@@ -13,24 +13,27 @@
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 24px;
+    }
+
     body {
       min-height: 100vh;
+      padding: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: "Roboto", sans-serif;
-      font-size: 18px;
-      background-color: #1F2937;
+      background-color: #18191C;
+      color: #000000;
     }
 
     .person {
       padding: 16px 24px;
       display: flex;
       align-items: center;
-      background-color: rgba(75, 85, 99, 0.7);
-      border: 1px solid #6B7280;
-      border-radius: 8px;
-      box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
+      background-color: #FF8630;
     }
 
     .profile-photo-section {
@@ -44,38 +47,42 @@
     }
 
     .profile-info {
-      margin-left: 12px;
+      margin-left: 25px;
     }
 
     .profile-name {
-      font-size: 22px;
+      margin-bottom: 8px;
+      font-size: 1.2rem;
       font-weight: 500;
-      color: #D1D5DB;
     }
 
     .last-visit {
       display: flex;
       align-items: baseline;
-      font-size: 18px;
-      line-height: 20px;
+      font-size: 1rem;
+      line-height: 1.4;
     }
 
     .last-visit-datetime {
-      color: #F4F4F5;
       text-decoration: underline;
     }
 
     .last-visit-label {
       margin-left: 5px;
-      color: #E5E7EB;
-      font-size: 18px;
+      font-size: 1rem;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
     }
   </style>
 </head>
 <body>
   <article class="person">
     <div class="profile-photo-section">
-      <img class="profile-photo" src="images/profile-photo.jpg" alt="Билл Джобс">
+      <img class="profile-photo" src="images/profile-photo.jpg" alt="">
     </div>
     <div class="profile-info">
       <header class="profile-name">