From ad86c3a55ea3b923a881bb8d6576a82217a0acff Mon Sep 17 00:00:00 2001 From: "E. S." Date: Fri, 2 May 2025 17:15:59 +0300 Subject: [PATCH] 4in1: design changes --- htdocs/scss/app/blog.scss | 17 +++++++--- htdocs/scss/app/head.scss | 21 +++++++++--- htdocs/scss/app/mobile.scss | 51 +++++++++++++++++++----------- htdocs/scss/colors/dark.scss | 2 ++ htdocs/scss/colors/light.scss | 2 ++ src/skins/foreignone/articles.twig | 2 +- src/skins/foreignone/header.twig | 21 ++++++++---- src/strings/main.yaml | 4 +-- 8 files changed, 82 insertions(+), 38 deletions(-) diff --git a/htdocs/scss/app/blog.scss b/htdocs/scss/app/blog.scss index 6327441..0c6ffe5 100644 --- a/htdocs/scss/app/blog.scss +++ b/htdocs/scss/app/blog.scss @@ -387,12 +387,21 @@ body.wide .blog-post { } .blog-expl { - border-radius: 4px; - padding: $base-padding - 3px; - background-color: $hover-hl; - line-height: 140%; + //padding: $base-padding - 3px 0 + line-height: 130%; margin-bottom: 15px; + margin-top: 2px; font-size: $fs - 2px; + p { + margin: 7px 0; + line-height: 140%; + &:first-child { + margin-top: 0; + } + &:last-child { + margin-top: 0; + } + } } .blog-list {} diff --git a/htdocs/scss/app/head.scss b/htdocs/scss/app/head.scss index f13ca88..30a405a 100644 --- a/htdocs/scss/app/head.scss +++ b/htdocs/scss/app/head.scss @@ -79,17 +79,23 @@ padding-top: 15px; } a.head-item { - @include no-underline(); + border: 1px $border-color solid !important; + border-radius: 6px; color: $fg; font-size: $fs; display: inline-block; - padding: 8px 12px; + padding: 6px 10px; + margin: 0 0 0 5px; vertical-align: middle; &.is-ic { color: $link-color; padding-right: 9px; + &:hover { + border-color: $head-ic-hover-border !important; + } + > svg { position: relative; top: -1px; @@ -97,10 +103,15 @@ a.head-item { } } - &:hover, &.is-selected { - border-radius: 4px; - background-color: $hover-hl; + &:hover { + border-color: $head-ic-hover-border !important; + color: $link-color; + } + &.is-selected { text-decoration: none; + color: $fg; + border-color: $border-color-selected !important; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04) inset; } //&:last-child > span { diff --git a/htdocs/scss/app/mobile.scss b/htdocs/scss/app/mobile.scss index 592436d..9b3b9eb 100644 --- a/htdocs/scss/app/mobile.scss +++ b/htdocs/scss/app/mobile.scss @@ -5,7 +5,7 @@ textarea { } .page-content { - padding: 0 15px; + padding: 0 0; } .head, .head-inner, .head-logo-wrap, .head-items, .head-logo { @@ -13,22 +13,29 @@ textarea { } .head { overflow: hidden; + border-bottom: 1px $border-color solid; + margin-bottom: 15px; } .head-logo-wrap { - margin-left: -20px; - margin-right: -20px; - padding-top: 5px; + padding-top: 0; padding-bottom: 0; } .head-logo { margin: 0; display: block; - text-align: center; + text-align: left; font-size: $fs; box-sizing: border-box; - padding-top: 14px; + padding-top: 13px; padding-bottom: 0; - //padding-bottom: 14px; + + &-title { + padding-bottom: 0; + } + &-subtitle { + padding-top: 5px; + padding-bottom: 1px; + } > a:hover { border-bottom-color: transparent !important; @@ -36,17 +43,19 @@ textarea { } .head-items { - text-align: center; - padding: 10px 0 15px 0; - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - //margin-left: -10px; - //margin-right: -10px; + text-align: left; max-width: 100%; box-sizing: border-box; - //border-bottom: 1px $border-color solid; - //margin-bottom: $base-padding; + padding: 0 12px; + margin: 6px 0 12px; +} +a.head-item { + padding: 5px 9px; + margin: 3px; +} + +a.head-item.is-selected { + background-color: $bg; } a.head-item:hover, a.head-item:active { @@ -94,7 +103,6 @@ a.head-item:last-child > span { padding: 0; background: none; text-align: left; - //@include no-underline(); > b { border-bottom: 1px $link-color-underline solid; } > b:hover { border-bottom-color: $link-color-underline-hover; } @@ -109,8 +117,13 @@ a.head-item:last-child > span { } } +.page-content-inner { + padding-left: 15px; + padding-right: 15px; +} + .footer { - padding: 20px 0; + padding: 20px 15px; &-left { text-align: left; @@ -119,4 +132,4 @@ a.head-item:last-child > span { clear: none; text-align: right; } -} \ No newline at end of file +} diff --git a/htdocs/scss/colors/dark.scss b/htdocs/scss/colors/dark.scss index f2b222b..a8144b4 100644 --- a/htdocs/scss/colors/dark.scss +++ b/htdocs/scss/colors/dark.scss @@ -32,6 +32,7 @@ $input-border-focused: lighten($input-border, 7%); $input-bg: #30373b; $border-color: #48535a; +$border-color-selected: #aaa; $error-block-bg: #882b2b; $error-block-fg: $fg; @@ -49,6 +50,7 @@ $pn-button-border: #92bae2; $pn-button-current-text-color: $bg; $head-items-separator: #5e6264; +$head-ic-hover-border: #83aad2; $blog-ref-color: $dark-grey; $blog-ref-color-hover: #8c9aab; diff --git a/htdocs/scss/colors/light.scss b/htdocs/scss/colors/light.scss index e140325..ef4df82 100644 --- a/htdocs/scss/colors/light.scss +++ b/htdocs/scss/colors/light.scss @@ -34,6 +34,7 @@ $input-border-focused: darken($input-border, 7%); $input-bg: #f7f7f7; $border-color: #e0e0e0; +$border-color-selected: #aaa; $error-block-bg: #f9eeee; $error-block-fg: #d13d3d; @@ -51,6 +52,7 @@ $pn-button-border: #92bae2; $pn-button-current-text-color: $fg; $head-items-separator: #d0d0d0; +$head-ic-hover-border: #83aad2; $blog-ref-color: #888; $blog-ref-color-hover: #6a88ab; diff --git a/src/skins/foreignone/articles.twig b/src/skins/foreignone/articles.twig index b0ee01b..4b3ecd7 100644 --- a/src/skins/foreignone/articles.twig +++ b/src/skins/foreignone/articles.twig @@ -5,7 +5,7 @@ {% else %}
- {{ ("blog_expl_"~selected_lang)|lang|nl2br }} + {{ ("blog_expl_"~selected_lang)|lang|raw }}
diff --git a/src/skins/foreignone/header.twig b/src/skins/foreignone/header.twig index af2ca00..c6d2bec 100644 --- a/src/skins/foreignone/header.twig +++ b/src/skins/foreignone/header.twig @@ -28,13 +28,20 @@
- articles - files - wiki - about - {% if is_admin %} - invisible college {{ svgInPlace('college_20') }} - {% endif %} + + articles + + files + + wiki + + about + + {%- if is_admin -%} + + invisible college {{ svgInPlace('college_20') }} + + {%- endif -%}
diff --git a/src/strings/main.yaml b/src/strings/main.yaml index 0e8632c..c09bbd9 100644 --- a/src/strings/main.yaml +++ b/src/strings/main.yaml @@ -39,8 +39,8 @@ meta_files_mdf_description: "Searchable archive of all Mercure de France issues meta_files_baconiana_description: "Searchable archive of Baconiana almanac." # blog -blog_expl_en: "Here you can find new episodes of the \"4in1\" investigation that were published after book's initial release in 2022 and throughout the preparation of its 2nd edition and English translation in 2023.\n\nSince the main purpose of this section is publishing English translations of articles from the kiwi arXiv website, they appear here with a slight delay caused by the translation." -blog_expl_ru: "Здесь находятся новые эпизоды расследования, опубликованные после первоначального выхода книги «4в1» в 2022-м году и во время и после подготовки её 2-го издания и перевода его на английский язык в 2023-м.\n\nПоскольку основная цель этого раздела – публикация английских переводов статей с киви-архива, здесь они появляются с небольшой задержкой, этим переводом вызванной." +blog_expl_en: "

Here you can find new episodes of the \"4in1\" investigation that were published after book's initial release in 2022 and throughout the preparation of its 2nd edition and English translation in 2023.

" +blog_expl_ru: "

Здесь находятся новые эпизоды расследования, опубликованные после первоначального выхода книги «4в1» в 2022-м году и во время и после подготовки её 2-го издания и перевода его на английский язык в 2023-м.

" blog_new_post: New post blog_view_post: View post