From b2e46d62154faf28c3c17e2b775c47d11e38ee56 Mon Sep 17 00:00:00 2001 From: maTh Date: Sun, 17 Jul 2022 22:54:24 +0200 Subject: Improved: Article header (#4101) * First draft for normal view * Revert changes on the entry header * Update normal.phtml * Update normal.phtml * RTL CSS * CSS fixes * Better tags style * fix * Update swage.scss * fix * Update swage.scss * fixed .content header * font-size in rem * improved template * dropdown menu if more than 7 tags * configuration: show tags in topline * Simplify loop logic * Minor space * config tags via reading (i18n still missed) * fixed the whitespaces * optimizations * optimize header+footer * Update normal.phtml * fix css * new config: show author+date in footer * config feed name display * improve HTML * fix whitespaces * i18n * i18n: German translations * fix i18n German * fixed: uncouple from bottomline config * reverted: tobline_tags * equalities * fixed: author in footer * fixed data-leave-validation * improved max numbers i18n label * Config works now also in the reader view * fix: footer border * reader view: style article-header-topline * fixed whitespace * i18n fr * Minor i18n fr * Fix mistake i18n fr * i18n fr more precise expression * Fix JavaScript * removed the link icon in the title * clean CSS Co-authored-by: Alexandre Alapetite --- p/themes/Ansum/_layout.scss | 5 +-- p/themes/Mapco/_layout.scss | 5 +-- p/themes/Origine/origine.css | 2 +- p/themes/Origine/origine.rtl.css | 2 +- p/themes/base-theme/template.css | 74 ++++++++++++++++++++++++++++++++++-- p/themes/base-theme/template.rtl.css | 74 ++++++++++++++++++++++++++++++++++-- 6 files changed, 146 insertions(+), 16 deletions(-) (limited to 'p/themes') diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss index b94097f16..727ebecd4 100644 --- a/p/themes/Ansum/_layout.scss +++ b/p/themes/Ansum/_layout.scss @@ -143,10 +143,6 @@ text-align: center; } -#new-article:hover { - background: variables.$main-first-alt; -} - #new-article > a { line-height: 3em; font-weight: bold; @@ -155,6 +151,7 @@ #new-article > a:hover { text-decoration: none; + background: variables.$main-first-alt; } /*=== Day indication */ diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss index 8e7c7aa98..0b37153a8 100644 --- a/p/themes/Mapco/_layout.scss +++ b/p/themes/Mapco/_layout.scss @@ -146,10 +146,6 @@ text-align: center; } -#new-article:hover { - background: variables.$main-first-alt; -} - #new-article > a { line-height: 3em; font-weight: bold; @@ -158,6 +154,7 @@ #new-article > a:hover { text-decoration: none; + background: variables.$main-first-alt; } /*=== Day indication */ diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index 636789c3f..4752159fc 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -844,7 +844,7 @@ a.btn { padding: 20px 10px; } -.content > h1.title > a { +.content h1.title > a { color: #000; } diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css index f3905b069..0961a2e24 100644 --- a/p/themes/Origine/origine.rtl.css +++ b/p/themes/Origine/origine.rtl.css @@ -844,7 +844,7 @@ a.btn { padding: 20px 10px; } -.content > h1.title > a { +.content h1.title > a { color: #000; } diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css index 6ed321114..a51735dd8 100644 --- a/p/themes/base-theme/template.css +++ b/p/themes/base-theme/template.css @@ -1149,9 +1149,77 @@ a.website:hover .favicon { max-width: 550px; } -.content ul, -.content ol, -.content dd { +.content .article-header-topline { + margin-bottom: 0.75rem; +} + +.content > header, +.content > footer { + color: #666; + font-size: .9rem; +} + +.content > footer { + margin: 2rem 0 2rem; + padding-top: 1rem; + border-top: 2px solid #ccc; + clear: both; +} + +.content > footer .subtitle { + padding-bottom: 1rem; +} + +.content > header a, +.content > footer a { + color: #666; + text-decoration: none; +} + +.content > header a:hover, +.content > footer a:hover { + color: #0062be; + text-decoration: underline; +} + +.content > header .tags, +.content > footer .tags { + display: flex; + line-height: 1; +} + +.content > header .tags .icon, +.content > footer .tags .icon { + padding: 2px 10px 0 0; +} + +.content > header .tags .list-tags, +.content > footer .tags .list-tags { + margin: 0; + padding: 0; + display: inline-block; + list-style: none; +} + +.content > header .tags .list-tags .item.tag, +.content > footer .tags .list-tags .item.tag { + display: inline-block; + padding-right: 0.75em; + line-height: normal; +} + +.content > header .tags .list-tags .item.tag a.link-tag, +.content > footer .tags .list-tags .item.tag a.link-tag { + display: inline; +} + +.content > header h1 { + margin: 0.5em 0; +} + +.content .text ul, +.content .text ol, +.content .text dd { margin: 0 0 0 15px; padding: 0 0 5px 15px; } diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css index df46eff21..9d52dac07 100644 --- a/p/themes/base-theme/template.rtl.css +++ b/p/themes/base-theme/template.rtl.css @@ -1149,9 +1149,77 @@ a.website:hover .favicon { max-width: 550px; } -.content ul, -.content ol, -.content dd { +.content .article-header-topline { + margin-bottom: 0.75rem; +} + +.content > header, +.content > footer { + color: #666; + font-size: .9rem; +} + +.content > footer { + margin: 2rem 0 2rem; + padding-top: 1rem; + border-top: 2px solid #ccc; + clear: both; +} + +.content > footer .subtitle { + padding-bottom: 1rem; +} + +.content > header a, +.content > footer a { + color: #666; + text-decoration: none; +} + +.content > header a:hover, +.content > footer a:hover { + color: #0062be; + text-decoration: underline; +} + +.content > header .tags, +.content > footer .tags { + display: flex; + line-height: 1; +} + +.content > header .tags .icon, +.content > footer .tags .icon { + padding: 2px 0 0 10px; +} + +.content > header .tags .list-tags, +.content > footer .tags .list-tags { + margin: 0; + padding: 0; + display: inline-block; + list-style: none; +} + +.content > header .tags .list-tags .item.tag, +.content > footer .tags .list-tags .item.tag { + display: inline-block; + padding-left: 0.75em; + line-height: normal; +} + +.content > header .tags .list-tags .item.tag a.link-tag, +.content > footer .tags .list-tags .item.tag a.link-tag { + display: inline; +} + +.content > header h1 { + margin: 0.5em 0; +} + +.content .text ul, +.content .text ol, +.content .text dd { margin: 0 15px 0 0; padding: 0 15px 5px 0; } -- cgit v1.2.3