Причёсывает код

doka-guide · Dec 7, 2023 · ee44cce · ee44cce
1 parent 801829e
commit ee44cce
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 52 deletions.
diff --git a/src/styles/blocks/answer.css b/src/styles/blocks/answer.css
@@ -1,5 +1,4 @@
 .answer {
-  counter-increment: answer;
   border: 1px solid var(--color-fade);
   border-radius: 6px;
 }
@@ -73,28 +72,12 @@
   background-color: var(--color-background);
 }
 
-.answer__content > .answer__summary::before {
-  grid-row-start: 1;
-  content: counter(answer);
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  width: 30px;
-  height: 30px;
-  margin-block-end: var(--font-size-l);
-  border: 1px solid var(--color-text);
-  font-family: 'Spot Mono', monospace;
-  font-size: 30px;
-  font-weight: 400;
-  display: none;
-}
-
 .answer__content .answer__toggler {
   appearance: none;
   display: block;
   position: absolute;
   top: 0;
-  margin-top: 170px;
+  margin-block-start: 190px;
   justify-self: start;
   font-size: var(--font-size-m, 100%);
   font-family: var(--font-family);
@@ -125,7 +108,7 @@
   position: sticky;
   grid-row-start: unset;
   bottom: 1em;
-  margin-top: unset;
+  margin-block-start: unset;
 }
 
 .answer__content--short > .answer__summary {

diff --git a/src/styles/blocks/practices.css b/src/styles/blocks/practices.css
@@ -1,7 +1,7 @@
 .practices > article {
   border: 1px solid var(--color-fade);
   border-radius: 6px;
-  margin-top: 40px;
+  margin-block-start: 40px;
 }
 
 .practices > article > .article-heading {
@@ -21,7 +21,6 @@
 
 .practices__content {
   position: relative;
-  counter-increment: practices__content;
   overflow: hidden;
 }
 
@@ -46,26 +45,11 @@
   background-color: var(--color-background);
 }
 
-.practices__content > .practices__summary::before {
-  grid-row-start: 1;
-  content: counter(practices__content);
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  width: 30px;
-  height: 30px;
-  border: 1px solid var(--color-text);
-  font-family: 'Spot Mono', monospace;
-  font-size: 30px;
-  font-weight: 400;
-  display: none;
-}
-
 .practices__content .practices__toggler {
   appearance: none;
   display: block;
   position: absolute;
-  margin-top: 170px;
+  margin-block-start: 170px;
   justify-self: start;
   font-size: var(--font-size-m, 100%);
   font-family: var(--font-family);
@@ -96,7 +80,7 @@
   position: sticky;
   grid-row-start: unset;
   bottom: 1em;
-  margin-top: unset;
+  margin-block-start: unset;
 }
 
 .practices__content--short > .practices__summary {
@@ -109,7 +93,7 @@
 
 @media (min-width: 1024px) {
   .practices > article {
-    margin-top: 50px;
+    margin-block-start: 50px;
   }
 
   .practices__content > .practices__summary {
@@ -119,6 +103,6 @@
 
 @media (min-width: 1680px) {
   .practices > article {
-    margin-top: 60px;
+    margin-block-start: 60px;
   }
 }
diff --git a/src/styles/blocks/questions.css b/src/styles/blocks/questions.css
@@ -7,12 +7,16 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-top: 40px;
+  margin-block-start: 40px;
+}
+
+.question__request .callout {
+  align-self: stretch;
 }
 
 .content p.question__response-placeholder {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-block-start: 10px;
+  margin-block-end: 10px;
 }
 
 .question__answer > .article-heading {
@@ -27,7 +31,7 @@
 }
 
 .question__request .questions__edit-button {
-  margin-top: 10px;
+  margin-block-start: 10px;
 }
 
 .question__answer {
@@ -36,12 +40,12 @@
 
 @media (min-width: 768px) {
   .content p.question__response-placeholder {
-    margin-top: 16px;
-    margin-bottom: 16px;
+    margin-block-start: 16px;
+    margin-block-end: 16px;
   }
 
   .question__request .questions__edit-button {
-    margin-top: 14px;
+    margin-block-start: 14px;
   }
 
   .question__answer {
@@ -51,16 +55,16 @@
 
 @media (min-width: 1024px) {
   .question__request {
-    margin-top: 50px;
+    margin-block-start: 50px;
   }
 
   .content p.question__response-placeholder {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin-block-start: 20px;
+    margin-block-end: 20px;
   }
 
   .question__request .questions__edit-button {
-    margin-top: 16px;
+    margin-block-start: 16px;
   }
 
   .question__answer {
@@ -70,6 +74,6 @@
 
 @media (min-width: 1680px) {
   .question__request {
-    margin-top: 60px;
+    margin-block-start: 60px;
   }
 }