Рестайлинг рубрики "На собесе" (#1170)

* Пересматривает отступы * Сжимает всё жёстко, категорично * В легком замешательстве отключает гриды * Раскатывает те же стили на Практику * Причёсывает код * Задумчиво отключает гриды и в Практике тоже * Приводит цвет рамок в ~соответствие макету * Устанавливает для практик такие же отступы, как для ответов * Воспитывает отступы * Докидывает класс в шаблон * Устраняет недостатки * Добавляет рамку для тогглов * Уравнивает отступы 170px > 190px * Ублажает линтер --------- Co-authored-by: Igor Korovchenko <[email protected]>
doka-guide · Feb 23, 2024 · 296b7f0 · 296b7f0
1 parent 18d2f70
commit 296b7f0
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 78 deletions.
diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml
@@ -22,7 +22,11 @@ jobs:
           repository: doka-guide/content
           path: content
       - name: Загрузка кеша
-        uses: actions/checkout@v4
+        uses: actions/checkout@v2
+        with:
+          repository: doka-guide/cache
+          path: cache
+      - uses: actions/setup-node@v2
         with:
           repository: doka-guide/cache
           path: cache

diff --git a/src/includes/practices.njk b/src/includes/practices.njk
@@ -27,7 +27,7 @@
           советует
         </h3>
         <div class="practices__content {% if not practice.isLong %}practices__content--short{% endif %} content">
-          <div class="practices__summary">
+          <div class="practices__summary content">
             {{ practice.templateContent | safe }}
             {% if practice.isLong %}
               <button class="practices__toggler" type="button" aria-live="polite" data-collapsed>

diff --git a/src/styles/blocks/answer.css b/src/styles/blocks/answer.css
@@ -1,5 +1,8 @@
 .answer {
-  counter-increment: answer;
+  --stroke-opacity: 0.3;
+  --stroke-color: hsl(var(--color-base-text) / var(--stroke-opacity));
+  border: 1px solid var(--stroke-color);
+  border-radius: 6px;
 }
 
 .answer__author {
@@ -53,8 +56,6 @@
 .answer__content {
   position: relative;
   overflow: hidden;
-  border: 1px solid var(--color-fade);
-  border-radius: 6px;
 }
 
 .answer__content::after {
@@ -68,42 +69,23 @@
 }
 
 .answer__content > .answer__summary {
-  grid-row-start: 2;
-  grid-row-end: 4;
-  display: grid;
-  grid-template-rows: 30px calc(var(--font-size) * 2) var(--font-size);
   height: 110px;
   padding: var(--offset);
   background-color: var(--color-background);
 }
 
-.answer__content > .answer__summary::before {
-  grid-row-start: 1;
-  content: counter(answer);
-  display: flex;
-  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;
-}
-
 .answer__content .answer__toggler {
   appearance: none;
   display: block;
   position: absolute;
-  margin-top: 170px;
+  top: 0;
+  margin-block-start: 190px;
   justify-self: start;
   font-size: var(--font-size-m, 100%);
   font-family: var(--font-family);
   padding: 4px 15px;
   box-shadow: 0 0 10px 5px rgb(0 0 0 / 0.1);
-  border: none;
+  border: 1px solid var(--stroke-color);
   border-radius: 5px;
   background-color: var(--color-background);
   z-index: 1;
@@ -128,7 +110,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/article-heading.css b/src/styles/blocks/article-heading.css
@@ -121,14 +121,14 @@
 
 .article-heading--level-2 {
   margin-top: 40px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .article-heading--level-3,
 .article-heading--level-4,
 .article-heading--level-5 {
   margin-top: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .article-heading + .article-heading {
@@ -148,41 +148,41 @@
 @media (width >= 768px) {
   .article-heading--level-2 {
     margin-top: 70px;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
 
   .article-heading--level-3,
   .article-heading--level-4,
   .article-heading--level-5 {
     margin-top: 24px;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
 }
 
 @media (width >= 1024px) {
   .article-heading--level-2 {
     margin-top: 60px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
   }
 
   .article-heading--level-3,
   .article-heading--level-4,
   .article-heading--level-5 {
     margin-top: 40px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
   }
 }
 
 @media (width >= 1680px) {
   .article-heading--level-2 {
     margin-top: 70px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
   }
 
   .article-heading--level-3,
   .article-heading--level-4,
   .article-heading--level-5 {
     margin-top: 50px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
   }
 }
diff --git a/src/styles/blocks/practices.css b/src/styles/blocks/practices.css
@@ -1,14 +1,20 @@
 .practices > article {
-  display: grid;
-  grid-gap: 1em;
+  --stroke-opacity: 0.3;
+  --stroke-color: hsl(var(--color-base-text) / var(--stroke-opacity));
+  border: 1px solid var(--stroke-color);
+  border-radius: 6px;
+  margin-block-start: 10px;
 }
 
 .practices > article > .article-heading {
-  margin-bottom: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding: var(--offset);
+  padding-block-end: 0;
 }
 
 .practices__author-name > * {
-  font-family: 'Spot Mono', monospace;
+  font-family: "Spot Mono", monospace;
   font-weight: 300;
   font-size: var(--font-size-l);
   line-height: var(--font-line-height-l);
@@ -18,59 +24,42 @@
 
 .practices__content {
   position: relative;
-  counter-increment: practices__content;
   overflow: hidden;
-  border: 1px solid var(--color-fade);
-  border-radius: 6px;
 }
 
 .practices__content::after {
-  content: ' ';
+  content: " ";
   display: block;
   position: relative;
   height: 100px;
-  background: linear-gradient(180deg, hsla(var(--color-base-background) / 0) 0%, hsla(var(--color-base-background) / 0.67) 100%);
+  background:
+    linear-gradient(
+      180deg,
+      hsla(var(--color-base-background) / 0) 0%,
+      hsla(var(--color-base-background) / 0.67) 100%
+    );
   border-radius: 8px;
   z-index: 0;
 }
 
 .practices__content > .practices__summary {
-  grid-row-start: 2;
-  grid-row-end: 4;
-  display: grid;
-  grid-gap: var(--font-size-l);
-  grid-template-rows: 30px calc(var(--font-size) * 2) var(--font-size);
   height: 110px;
   padding: var(--offset);
   background-color: var(--color-background);
 }
 
-.practices__content > .practices__summary::before {
-  grid-row-start: 1;
-  content: counter(practices__content);
-  display: flex;
-  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;
-}
-
 .practices__content .practices__toggler {
   appearance: none;
   display: block;
   position: absolute;
-  margin-top: 170px;
+  top: 0;
+  margin-block-start: 190px;
   justify-self: start;
   font-size: var(--font-size-m, 100%);
   font-family: var(--font-family);
   padding: 4px 15px;
   box-shadow: 0 0 10px 5px rgb(0 0 0 / 0.1);
-  border: none;
+  border: 1px solid var(--stroke-color);
   border-radius: 5px;
   background-color: var(--color-background);
   z-index: 1;
@@ -95,7 +84,7 @@
   position: sticky;
   grid-row-start: unset;
   bottom: 1em;
-  margin-top: unset;
+  margin-block-start: unset;
 }
 
 .practices__content--short > .practices__summary {
@@ -105,3 +94,19 @@
 .practices__content--short::after {
   height: unset;
 }
+
+@media (width >= 768px) {
+  .practices > article {
+    margin-block-start: 14px;
+  }
+}
+
+@media (width >= 1024px) {
+  .practices > article {
+    margin-block-start: 16px;
+  }
+
+  .practices__content > .practices__summary {
+    grid-gap: 20px;
+  }
+}
diff --git a/src/styles/blocks/questions.css b/src/styles/blocks/questions.css
@@ -4,12 +4,26 @@
 }
 
 .question__request {
-  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-block-start: 40px;
+}
+
+.question__request .callout {
+  align-self: stretch;
 }
 
 .content p.question__response-placeholder {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-block-start: 4px;
+  margin-block-end: 4px;
+}
+
+.question__answer > .article-heading {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding: var(--offset);
+  padding-block-end: 0;
 }
 
 .questions__edit-button {
@@ -18,27 +32,49 @@
 }
 
 .question__request .questions__edit-button {
-  margin-top: 10px;
+  margin-block-start: 10px;
+}
+
+.question__answer {
+  margin-block-start: 10px;
 }
 
 @media (width >= 768px) {
   .content p.question__response-placeholder {
-    margin-top: 16px;
-    margin-bottom: 16px;
+    margin-block-start: 7px;
+    margin-block-end: 7px;
   }
 
   .question__request .questions__edit-button {
-    margin-top: 16px;
+    margin-block-start: 14px;
+  }
+
+  .question__answer {
+    margin-block-start: 14px;
   }
 }
 
 @media (width >= 1024px) {
+  .question__request {
+    margin-block-start: 50px;
+  }
+
   .content p.question__response-placeholder {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin-block-start: 10px;
+    margin-block-end: 10px;
   }
 
   .question__request .questions__edit-button {
-    margin-top: 20px;
+    margin-block-start: 16px;
+  }
+
+  .question__answer {
+    margin-block-start: 16px;
+  }
+}
+
+@media (width >= 1680px) {
+  .question__request {
+    margin-block-start: 60px;
   }
 }