From d98f75588ef2e9dae58b0968a8d92182874e3fa1 Mon Sep 17 00:00:00 2001 From: Svetlana Korobtseva Date: Fri, 30 Jun 2023 19:45:07 +0600 Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D1=84=D1=83=D1=82=D0=B5=D1=80=20=D0=BD=D0=B0=20?= =?UTF-8?q?=D1=81=D0=B0=D0=B9=D1=82=D0=B5=20(#1161)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Растягивает футер по ширине страницы * Осмысливает имеющиеся бордеры * Добавляет рамку и отступы * Добавляет ссылки и стили * Приводит в чувства переключатель на странице поиска * Удаляет дублёра * Добавляет соцсети * Просит скринридер не читать SVG * Направленные --> Логические * Убирает order * Добавляет ховер по образу и подобию * Прибавляет паддинги --- src/includes/blocks/footer.njk | 74 +++++++++++++++++++++++---- src/styles/blocks/doc.css | 14 ++--- src/styles/blocks/footer.css | 55 ++++++++++++++++++-- src/styles/blocks/index-block.css | 7 +-- src/styles/blocks/person-page.css | 5 -- src/styles/blocks/search-page.css | 13 ----- src/styles/blocks/search-tag.css | 7 ++- src/styles/blocks/standalone-page.css | 2 +- src/views/article-index.njk | 5 +- src/views/doc.njk | 7 ++- src/views/person.njk | 5 +- src/views/search.njk | 3 +- 12 files changed, 131 insertions(+), 66 deletions(-) diff --git a/src/includes/blocks/footer.njk b/src/includes/blocks/footer.njk index 863a7761b..908eee3dd 100644 --- a/src/includes/blocks/footer.njk +++ b/src/includes/blocks/footer.njk @@ -5,16 +5,68 @@ {% include "blocks/theme-toggle.njk" %} - +
+ + + + +
{% endmacro %} diff --git a/src/styles/blocks/doc.css b/src/styles/blocks/doc.css index 588062327..26ee0ddd9 100644 --- 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 index ef8a7597d..1ca36dfec 100644 --- 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 index 722b6aa18..93629c2de 100644 --- 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 index b3fd25ee0..57e415509 100644 --- 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 index e4dd2a1b0..13cce65cc 100644 --- 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 index 72eae5f15..adaf609f7 100644 --- 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 index b73fe12e1..1110c8b30 100644 --- 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 index 1d24cf4aa..594108894 100644 --- a/src/views/article-index.njk +++ b/src/views/article-index.njk @@ -101,6 +101,7 @@ - {{ footer(class="index-block__footer") }} - {% include "subscribe-popup.njk" %} + +{{ footer() }} +{% include "subscribe-popup.njk" %} diff --git a/src/views/doc.njk b/src/views/doc.njk index 3a7bee336..f7c8fed08 100644 --- a/src/views/doc.njk +++ b/src/views/doc.njk @@ -142,8 +142,7 @@ -
- {{ footer() }} -
- {% include "subscribe-popup.njk" %} + +{{ footer() }} +{% include "subscribe-popup.njk" %} diff --git a/src/views/person.njk b/src/views/person.njk index 138a1d898..d4c779724 100644 --- a/src/views/person.njk +++ b/src/views/person.njk @@ -234,10 +234,9 @@ {% endfor %} {% endif %} - - {{ footer(class="person-page__footer") }} - {% include "subscribe-popup.njk" %} +{{ footer() }} +{% include "subscribe-popup.njk" %} diff --git a/src/views/search.njk b/src/views/search.njk index 99f203ed0..1e0c53adf 100644 --- a/src/views/search.njk +++ b/src/views/search.njk @@ -72,5 +72,6 @@ title: 'Поиск' - {{ footer(class="search-page__footer") }} + +{{ footer() }}