Семантика для карточки пьесы

Добавил description lists, поправил стили, чтобы всё осталось так же
1640max · Feb 8, 2024 · acc0824 · acc0824
1 parent c825b10
commit acc0824
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 30 deletions.
diff --git a/_sass/_data.scss b/_sass/_data.scss
@@ -8,7 +8,7 @@
 }
 
 .data__value {
-  padding: 0 0 0 1rem;
+  margin: 0 0 0 1rem;
 
   &:only-of-type {
     /* Рядом с одинокими элементами интервал кажется больше. Компенсируем */
@@ -23,6 +23,6 @@
   align-items: baseline;
 
   > .data__value {
-    padding-left: .4rem;
+    margin-left: .4rem;
   }
 }
diff --git a/_sass/_piece-card.scss b/_sass/_piece-card.scss
@@ -96,6 +96,7 @@
   align-self: start;
   display: grid;
   gap: .75rem;
+  margin: 0;
 }
 
 .piece-card__button {

diff --git a/pieces.html b/pieces.html
@@ -31,48 +31,54 @@ <h2 class="piece-card__title">{{ piece.title }}</h2>
       </header>
       <p class="piece-card__description">{{ piece.description }}</p>
       <div class="delimiter piece-card__delimiter"></div>
-      <div class="piece-card__table">
+      <dl class="piece-card__table">
         {%- if piece.button-link %}
-          <section class="data data_inline">
-            <header class="data__key">Скачиваний:</header>
-            <div class="data__value" id="piece-{{ piece.order }}-counter"></div>
-          </section>
+          <div class="data data_inline">
+            <dt class="data__key">Скачиваний:</dt>
+            <dd class="data__value" id="piece-{{ piece.order }}-counter"></dd>
+          </div>
         {%- endif %}
         {%- if piece.characters %}
-        <section class="data data_inline">
-          <header class="data__key">Персонажей:</header>
-          <div class="data__value">{{ piece.characters }}</div>
-        </section>
+        <div class="data data_inline">
+          <dt class="data__key">Персонажей:</dt>
+          <dd class="data__value">{{ piece.characters }}</dd>
+        </div>
         {%- endif %}
         {%- if piece.client %}
-          <section class="data">
-            <header class="data__key">Заказчик:</header>
-            <a  class="link data__value"
-                href="{{ piece.client-link }}"
-                target="_blank">{{ piece.client }}</a>
-          </section>
+          <div class="data">
+            <dt class="data__key">Заказчик:</dt>
+            <dd class="data__value">
+              <a  class="link"
+                  href="{{ piece.client-link }}"
+                  target="_blank">{{ piece.client }}</a>
+            </dd>
+          </div>
         {%- endif %}
         {%- if piece.rewards.size %}
-          <section class="data">
-            <header class="data__key">Регалии:</header>
+          <div class="data">
+            <dt class="data__key">Регалии:</dt>
             {%- for reward in piece.rewards %}
-              <a  class="link data__value"
-                  href="{{ reward.link }}"
-                  target="_blank">{{ reward.name }}</a>
+              <dd class="data__value">
+                <a  class="link"
+                    href="{{ reward.link }}"
+                    target="_blank">{{ reward.name }}</a>
+              </dd>
             {%- endfor %}
-          </section>
+          </div>
         {%- endif %}
         {%- if piece.productions.size %}
-          <section class="data">
-            <header class="data__key">Постановки:</header>
+          <div class="data">
+            <dt class="data__key">Постановки:</dt>
             {%- for production in piece.productions %}
-              <a  class="link data__value"
-                  href="{{ production.link }}"
-                  target="_blank">{{ production.name }}</a>
+              <dd class="data__value">
+                <a  class="link"
+                    href="{{ production.link }}"
+                    target="_blank">{{ production.name }}</a>
+              </dd>
             {%- endfor %}
-          </section>
+          </div>
         {%- endif %}
-      </div>
+      </dl>
       {%- if piece.button-link %}
         <a  class="button link-reset piece-card__button"
             id="piece-{{ piece.order }}-button"