Обновляет футер на сайте (#1161)

* Растягивает футер по ширине страницы * Осмысливает имеющиеся бордеры * Добавляет рамку и отступы * Добавляет ссылки и стили * Приводит в чувства переключатель на странице поиска * Удаляет дублёра * Добавляет соцсети * Просит скринридер не читать SVG * Направленные --> Логические * Убирает order * Добавляет ховер по образу и подобию * Прибавляет паддинги
doka-guide · Jun 30, 2023 · d98f755 · d98f755
1 parent f241f2d
commit d98f755
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 66 deletions.
diff --git a/src/includes/blocks/footer.njk b/src/includes/blocks/footer.njk
@@ -5,16 +5,68 @@
       <span class="footer__theme-toggle-label" aria-hidden="true">Тема:</span>
       {% include "blocks/theme-toggle.njk" %}
     </fieldset>
-    <ul class="footer__list footer-list font-theme font-theme--code base-list">
-      <li class="footer-list__item">
-        <a class="footer-list__link link" href="{{ constants.dokaOrgLink }}">GitHub</a>
-      </li>
-      <li class="footer-list__item">
-        <a class="footer-list__link link" href="/about/">О проекте</a>
-      </li>
-      <li class="footer-list__item">
-        <a class="footer-list__link link" href="/licenses/">Лицензии</a>
-      </li>
-    </ul>
+    <div class="footer__lists">
+      <ul class="footer__list footer-list footer__list_social font-theme font-theme--code base-list">
+        <li class="footer-list__item">
+          <a class="footer-list__link footer-list__link_social link" href="https://www.youtube.com/@doka-guide">
+            <svg aria-hidden="true" class="footer-list__icon footer-list__icon--invertible" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 14" width="19" height="14">
+              <path fill="#000" fill-rule="evenodd" d="M18.6031 2.43813c-.2185-.81747-.8623-1.461255-1.6797-1.679702C15.4415.361328 9.5.361328 9.5.361328s-5.94146 0-7.42335.3971C1.25933.976875.615442 1.62066.396942 2.43813 3.1e-7 3.91987 0 7.01143 0 7.01143s3.1e-7 3.09147.396942 4.57307c.2185.8175.862388 1.4614 1.679708 1.6799 1.48189.3969 7.42335.3969 7.42335.3969s5.9415 0 7.4234-.3969c.8174-.2185 1.4612-.8624 1.6797-1.6799C19 10.1029 19 7.01143 19 7.01143s0-3.09156-.3969-4.5733ZM7.59989 9.86149V4.16138l4.93631 2.85005-4.93631 2.85006Z" clip-rule="evenodd"/>
+            </svg>
+            <span class="visually-hidden">YouTube</span>
+          </a>
+        </li>
+        <li class="footer-list__item">
+          <a class="footer-list__link footer-list__link_social link" href="https://t.me/doka_guide">
+            <svg aria-hidden="true" class="footer-list__icon footer-list__icon--invertible" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 17" width="18" height="17">
+              <path fill="#000" d="M14.2812 15.5523c.2041.0182.4076-.0416.5695-.1673s.2702-.308.3031-.5103l2.8438-13.60292c.0081-.08767-.0043-.17604-.0364-.25804-.0321-.081997-.0829-.155355-.1484-.214212-.114-.108125-.2639-.170288-.4209-.174528-.0548 0-5.7115 2.09091-16.970301 6.27274-.127057.04053-.237183.12187-.31329.23139-.0761071.10952-.11394078.2411-.10763026.37432.00716485.12439.05384586.24324.13324626.33926.0794.09602.187376.16419.308207.19459L4.54867 9.31033 6.20155 14.269c.04319.1351.13029.2519.24747.3319.11718.08.25772.1185.39931.1095.07663-.0002.15243-.0158.22295-.0458.07052-.0299.13434-.0737.1877-.1287l2.33046-2.2175 4.19896 3.0799c.1463.0971.3172.1505.4928.154Zm-7.50473-2.505L5.53424 8.94074C11.5024 5.14219 14.507 3.24292 14.5481 3.24292c.154 0 .2361 0 .2361.16426.0035.02039.0035.04121 0 .0616 0 0-2.5768 2.36126-7.72028 6.98112l-.28745 2.5974Z"/>
+            </svg>
+            <span class="visually-hidden">Telegram</span>
+          </a>
+        </li>
+        <li class="footer-list__item">
+          <a class="footer-list__link footer-list__link_social link" href="https://twitter.com/doka_guide">
+            <svg aria-hidden="true" class="footer-list__icon footer-list__icon--invertible" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 16" width="19" height="16">
+              <path fill="#000" fill-rule="evenodd" d="M6.1475 15.4241c6.7969 0 10.5134-5.63216 10.5134-10.51341 0-.1609 0-.32185-.0077-.4751.7203-.52105 1.3487-1.1724 1.8468-1.9157-.659.2912-1.3717.49045-2.1226.5824.7663-.4598 1.3486-1.1801 1.6245-2.046-.7126.42145-1.5019.728-2.3448.89655-.6744-.7203-1.6322-1.164754-2.6973-1.164754-2.0384 0-3.6935 1.655204-3.6935 3.693504 0 .2912.03065.5747.0996.8429-3.0728-.15325-5.7931-1.6245-7.61685-3.86205-.3142.54405-.4981 1.18005-.4981 1.8544 0 1.2797.65135 2.4138 1.6475 3.0728-.60535-.01535-1.1724-.1839-1.6705-.4598v.046c0 1.7931 1.27205 3.2797 2.96555 3.6245-.3065.0843-.636.1303-.9732.1303-.23755 0-.4674-.023-.6973-.069.46745 1.47126 1.8314 2.53636 3.44825 2.56706-1.26435.9885-2.8582 1.5785-4.59 1.5785-.29885 0-.59005-.0153-.88125-.0536 1.61685 1.0575 3.5632 1.6705 5.6475 1.6705Z" clip-rule="evenodd"/>
+            </svg>
+            <span class="visually-hidden">Twitter</span>
+          </a>
+        </li>
+        <li class="footer-list__item">
+          <a class="footer-list__link footer-list__link_social link" href="https://discord.gg/NjaevcW8k8">
+            <svg aria-hidden="true" class="footer-list__icon footer-list__icon--invertible" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16" width="20" height="16">
+              <path fill="#000" d="M6.85916 7.48759c.9489 0 1.7175.71082 1.70011 1.57961 0 .86878-.74963 1.5796-1.70011 1.5796-.93307 0-1.70168-.71082-1.70168-1.5796 0-.86879.75121-1.57961 1.70168-1.57961Zm6.08554 0c.9505 0 1.7017.71082 1.7017 1.57961 0 .86878-.7512 1.5796-1.7017 1.5796-.933 0-1.7001-.71082-1.7001-1.5796 0-.86879.7497-1.57961 1.7001-1.57961Zm1.5768 7.44471c3.5947-.1153 4.9785-2.5211 4.9785-2.5211 0-5.34063-2.3438-9.67034-2.3438-9.67034-2.3406-1.789696-4.5705-1.74073-4.5705-1.74073l-.2277.26538c2.766.86246 4.0502 2.1072 4.0502 2.1072-1.5102-.84985-3.1746-1.39111-4.8963-1.59225-1.0921-.1232-2.19521-.11259-3.28475.03159-.09805 0-.18029.01738-.27676.03317-.56933.05055-1.95314.26538-3.69277 1.0457-.60097.28118-.95997.48179-.95997.48179s1.3506-1.31108 4.27793-2.17355l-.1629-.19903S5.18437.951164 2.84218 2.74244c0 0-2.34218 4.32813-2.34218 9.66876 0 0 1.36641 2.4042 4.96113 2.5211 0 0 .60096-.7456 1.09123-1.3758-2.06701-.6319-2.84668-1.9588-2.84668-1.9588s.16131.1169.45388.2828c.01582.0158.03163.0332.06484.049.04903.0347.09806.0505.14708.0837.40645.2322.81289.4138 1.18612.5639.66739.2654 1.46446.5307 2.39279.714 1.39063.2722 2.82041.2776 4.21311.0158.8111-.1446 1.6025-.3837 2.358-.7124.5693-.2164 1.2035-.5324 1.8709-.9794 0 0-.8129 1.3601-2.9448 1.9745.4887.6303 1.0755 1.3427 1.0755 1.3427h-.0016Z"/>
+            </svg>
+            <span class="visually-hidden">Discord</span>
+          </a>
+        </li>
+      </ul>
+      <ul class="footer__list footer-list font-theme font-theme--code base-list">
+        <li class="footer-list__item">
+          <a class="footer-list__link link" href="{{ constants.dokaOrgLink }}">GitHub</a>
+        </li>
+        <li class="footer-list__item">
+          <a class="footer-list__link link" href="/subscribe/">Рассылка</a>
+        </li>
+      </ul>
+      <ul class="footer__list footer-list font-theme font-theme--code base-list">
+        <li class="footer-list__item">
+          <a class="footer-list__link link" href="/about/">О проекте</a>
+        </li>
+        <li class="footer-list__item">
+          <a class="footer-list__link link" href="https://dream-job.doka.guide">Спецпроекты</a>
+        </li>
+        <li class="footer-list__item">
+          <a class="footer-list__link link" href="/people/">Участники</a>
+        </li>
+      </ul>
+      <ul class="footer__list footer-list font-theme font-theme--code base-list">
+        <li class="footer-list__item">
+          <a class="footer-list__link link" href="/licenses/">Лицензии</a>
+        </li>
+        <li class="footer-list__item">
+          <a class="footer-list__link link" href="https://github.com/doka-guide/content/tree/main/docs">Документация</a>
+        </li>
+      </ul>
+    </div>
   </footer>
 {% endmacro %}
diff --git a/src/styles/blocks/doc.css b/src/styles/blocks/doc.css
@@ -58,19 +58,9 @@
   max-width: 672px;
 }
 
-.doc__footer {
-  position: relative;
-  z-index: 0;
-  margin-top: 50px;
-  margin-top: clamp(20px, 4.5%, 50px);
-  padding-left: 0;
-  padding-right: 0;
-  max-width: 100%;
-}
-
 .doc__linked-articles {
-  margin-block-start: 102px;
   margin-block-start: min(102px, 26%);
+  margin-block-end: min(102px, 26%);
   display: flex;
   gap: var(--offset, 20px);
 }
@@ -86,6 +76,8 @@
   .doc__linked-articles {
     flex-direction: column;
     gap: 13px;
+    margin-block-start: 30px;
+    margin-block-end: 0;
   }
 }
 

diff --git a/src/styles/blocks/footer.css b/src/styles/blocks/footer.css
@@ -1,8 +1,9 @@
 .footer {
+  border-block-start: 1px solid hsl(var(--color-base-text) / 0.3);
   padding: 20px 10px;
   display: flex;
   gap: 30px;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   flex-wrap: wrap;
 }
@@ -18,16 +19,44 @@
   border: 0;
 }
 
-.footer__list {
+.footer__lists {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
+}
+
+.footer__list {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 5px;
   font-family: var(--font-family);
-  font-size: var(--font-size-m);
-  line-height: var(--font-line-height-m);
+  font-size: var(--font-size-s);
+  line-height: var(--font-line-height-s);
   letter-spacing: var(--letter-spacing);
 }
 
+.footer__list_social {
+  flex-direction: row;
+  gap: 5px;
+}
+
+.footer-list__icon {
+  vertical-align: middle;
+}
+
+.footer-list__link_social {
+  padding: 5px;
+}
+
+.footer-list__link_social:hover {
+  opacity: 0.7;
+}
+
+.footer-list__icon--invertible {
+  filter: invert(var(--is-dark-theme-on));
+}
+
 @media (min-width: 1024px) {
   .footer {
     padding: 20px;
@@ -38,6 +67,11 @@
   .footer {
     align-items: flex-start;
     flex-direction: column;
+    padding-block-start: 30px;
+  }
+
+  .footer__lists {
+    flex-direction: column;
   }
 
   .footer__theme-toggle,
@@ -46,11 +80,22 @@
   }
 
   .footer__list {
-    gap: 8px;
+    gap: 11px;
   }
 
   .footer__theme-toggle {
     gap: 4px;
     order: 1;
   }
+
+  .footer__list_social {
+    flex-direction: row;
+    gap: 10px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1366px) {
+  .footer__list {
+    line-height: 18px;
+  }
 }
diff --git a/src/styles/blocks/index-block.css b/src/styles/blocks/index-block.css
@@ -64,7 +64,7 @@
     align-items: center;
     justify-content: center;
     gap: var(--offset, 20px);
-    border-top: 1px solid;
+    border-block-start: 1px solid hsl(var(--color-base-text) / 0.3);
     font-size: var(--font-size-m);
     line-height: var(--font-line-height-m);
   }
@@ -118,9 +118,4 @@
     grid-column: 2;
     grid-row: 1;
   }
-
-  .index-block__footer {
-    grid-column: 2;
-    align-self: end;
-  }
 }
diff --git a/src/styles/blocks/person-page.css b/src/styles/blocks/person-page.css
@@ -98,11 +98,6 @@
   padding-bottom: 30px;
 }
 
-.person-page__footer {
-  grid-area: footer;
-  align-self: end;
-}
-
 @media (min-width: 320px) {
   .person-page__main {
     grid-template-columns: 100%;

diff --git a/src/styles/blocks/search-page.css b/src/styles/blocks/search-page.css
@@ -80,10 +80,6 @@
 
 .search-page__empty {}
 
-.search-page__footer {
-  align-self: end;
-}
-
 @media not all and (min-width: 1024px) {
   .search-page {
     display: grid;
@@ -118,10 +114,6 @@
     grid-area: main;
     margin-inline: auto;
   }
-
-  .search-page__footer {
-    grid-area: footer;
-  }
 }
 
 @media not all and (min-width: 768px) {
@@ -240,11 +232,6 @@
     grid-column: 2/-1;
     justify-self: center;
   }
-
-  .search-page__footer {
-    grid-column-start: 2;
-    grid-column-end: -1;
-  }
 }
 
 @media (min-width: 1240px) {

diff --git a/src/styles/blocks/search-tag.css b/src/styles/blocks/search-tag.css
@@ -4,14 +4,13 @@
   border: 0;
   display: flex;
   justify-content: center;
+  font-size: var(--font-size-s);
+  line-height: var(--font-line-height-s);
 }
 
 .search-tag__legend {}
 
-.search-tag__switch {
-  font-size: var(--font-size-s);
-  line-height: var(--font-line-height-s);
-}
+.search-tag__switch {}
 
 @media not all and (min-width: 1024px) {
   .search-tag__legend {

diff --git a/src/styles/blocks/standalone-page.css b/src/styles/blocks/standalone-page.css
@@ -12,7 +12,7 @@
 .standalone-page__header {
   padding: var(--offset);
   padding-top: clamp(20px, 8%, 130px);
-  border-bottom: 1px solid;
+  border-bottom: 1px solid hsl(var(--color-base-text) / 0.3);
 }
 
 .standalone-page__title {

diff --git a/src/views/article-index.njk b/src/views/article-index.njk
@@ -101,6 +101,7 @@
     </main>
   </div>
 
-  {{ footer(class="index-block__footer") }}
-  {% include "subscribe-popup.njk" %}
 </div>
+
+{{ footer() }}
+{% include "subscribe-popup.njk" %}
diff --git a/src/views/doc.njk b/src/views/doc.njk
@@ -142,8 +142,7 @@
     </div>
   </main>
 
-  <div class="doc__footer doc__wrapper">
-    {{ footer() }}
-  </div>
-  {% include "subscribe-popup.njk" %}
 </div>
+
+{{ footer() }}
+{% include "subscribe-popup.njk" %}
diff --git a/src/views/person.njk b/src/views/person.njk
@@ -234,10 +234,9 @@
         {% endfor %}
       {% endif %}
     </div>
-
-    {{ footer(class="person-page__footer") }}
-    {% include "subscribe-popup.njk" %}
   </main>
 
 </div>
 
+{{ footer() }}
+{% include "subscribe-popup.njk" %}
diff --git a/src/views/search.njk b/src/views/search.njk
@@ -72,5 +72,6 @@ title: 'Поиск'
     </div>
   </main>
 
-  {{ footer(class="search-page__footer") }}
 </div>
+
+{{ footer() }}