From 80507a87514ccd86a25192b76d97fac2e585798c Mon Sep 17 00:00:00 2001 From: Andy Byers Date: Tue, 30 Sep 2025 13:19:30 +0100 Subject: [PATCH 01/45] check: This commit introduces changes for clarity against clean for sanity checks. --- src/themes/clean/assets/css/cardinal.css | 7 + src/themes/clean/assets/css/clean.css | 1603 +++++++++++------ src/themes/clean/assets/css/evergreen.css | 7 + src/themes/clean/assets/css/ocean.css | 7 + src/themes/clean/build_assets.py | 14 +- src/themes/clean/templates/core/base.html | 97 +- .../core/homepage_elements/search_bar.html | 29 +- src/themes/clean/templates/core/nav.html | 6 +- .../clean/templates/core/news/index.html | 30 +- .../clean/templates/core/news/item.html | 49 +- .../templates/elements/article_listing.html | 160 +- .../elements/journal/issue_block.html | 17 +- .../elements/journal/issue_list.html | 48 +- .../templates/elements/journal/issue_top.html | 6 +- .../clean/templates/elements/sorting.html | 57 +- .../clean/templates/journal/article.html | 475 ++--- .../templates/journal/become_reviewer.html | 1 + .../clean/templates/journal/collections.html | 4 +- .../journal/homepage_elements/about.html | 12 +- src/themes/clean/templates/journal/index.html | 3 +- 20 files changed, 1647 insertions(+), 985 deletions(-) create mode 100644 src/themes/clean/assets/css/cardinal.css create mode 100644 src/themes/clean/assets/css/evergreen.css create mode 100644 src/themes/clean/assets/css/ocean.css diff --git a/src/themes/clean/assets/css/cardinal.css b/src/themes/clean/assets/css/cardinal.css new file mode 100644 index 0000000000..70b8a14c14 --- /dev/null +++ b/src/themes/clean/assets/css/cardinal.css @@ -0,0 +1,7 @@ +:root { + /* Brand & Theme Colors */ + --brand-primary: #9b2c2c; + --brand-secondary: #c05555; + --text-link-alt: #7c2d2d; + --focus-shadow: #5a1515; +} \ No newline at end of file diff --git a/src/themes/clean/assets/css/clean.css b/src/themes/clean/assets/css/clean.css index 61e2530377..cd2b1792d0 100644 --- a/src/themes/clean/assets/css/clean.css +++ b/src/themes/clean/assets/css/clean.css @@ -1,545 +1,897 @@ -/* stylelint-disable selector-list-comma-newline-after */ +@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap'); +/* Palette Selection - Use only one palette */ +@import url('/static/clean/css/evergreen.css'); +/* @import url('/static/clean/css/ocean.css'); */ +/* @import url('/static/clean/css/cardinal.css'); */ + +:root { + /* Highlight color (shared across themes) */ + --highlight-color: #FFEB3B; + + /* Text Colors */ + --text-primary: #212529; + --text-muted: #4a4a4a; + --text-on-dark: white; + --text-link: var(--body-text); + --text-black: #000; + --text-white: #fff; + --text-header: var(--text-black); + --body-text: oklch(0.556 0 0); + --nav-text: #636363; + --nav-text-active: var(--brand-primary); + + /* Link Decoration */ + --link-decoration: underline; + --link-decoration-hover: underline; + --nav-link-decoration: none; + --nav-link-decoration-hover: underline; + --link-hover-color: var(--brand-primary); + --link-transition: color 0.2s ease; + + /* Background Colors */ + --bg-body: #fff; + --bg-content: white; + --bg-footer: #FCFCFC; + --bg-card-alt: #f8f9fa; + --bg-blockquote: #F0F0F0; + --bg-overlay: rgba(55, 55, 55, 0.8); + + /* UI State Colors */ + --color-success: green; + --color-danger: darkred; + + /* Border Colors */ + --border-light: #e5e5e5; + --border-medium: #6c757d; + --border-gray-200: rgb(229, 231, 235); + + /* Header & Navigation */ + --header-bg: var(--brand-primary); + --bg-nav: #fefeff; + + /* Button Colors */ + --btn-primary-bg: var(--brand-primary); + --btn-primary-border: var(--brand-primary); + --btn-primary-text: white; + + /* Focus & Accessibility */ + --focus-outline: #F9F9F9; + --focus-ring-size: 4px; + + /* Typography */ + --main-font: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + + /* Spacing */ + --spacing-xs: 4px; + --spacing-sm: 8px; + --spacing-md: 15px; + --spacing-lg: 20px; + --spacing-xl: 30px; + + /* Sizes */ + --border-radius: 3px; + --border-radius-lg: 2rem; + --header-height: 120px; + --card-image-height: 250px; + --carousel-min-height: 500px; + --icon-size: 16px; + + /* Transitions */ + --transition-standard: all 1s ease; +} + +/* ======================================================================== + Base Styles + ======================================================================== */ +html, body { - background-color: #F0F0F0; - margin-top: 20px; + height: 100%; } -.container { - background-color: white; - padding-left: 0; - padding-right: 0; +body { + background-color: var(--bg-body); + font-family: var(--main-font); + font-weight: 400; + color: var(--body-text); + display: flex; + flex-direction: column; } -.site-header { - background-color: #1C304A; - line-height: 1; - border-bottom: 1px solid #e5e5e5; - padding: 15px; - color: #FFF; +a { + overflow-wrap: break-word; + text-decoration: var(--link-decoration); + transition: var(--link-transition); } -h1, h2, h3, h4, h5, h6 { - font-family: "Playfair Display", Georgia, "Times New Roman", serif; +a:hover, +a:focus { + text-decoration: var(--link-decoration-hover); + color: var(--link-hover-color); } -.article-title { - font-size: 1.7em; +/* ======================================================================== + Typography + ======================================================================== */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--main-font); + color: var(--text-header); } +h1 { font-size: 2rem; } +h2 { font-size: 1.5rem; } +h3 { font-size: 1.25rem; } +h4 { font-size: 1.125rem; } +h5 { font-size: 1rem; } +h6 { font-size: 0.875rem; } + .display-4 { - font-size: 2.5rem; + font-size: 2.5rem; } -@media (min-width: 768px) { - .display-4 { - font-size: 3rem; - } +.editor-name { + font-size: 1.25rem; +} + +.byline { + font-size: 1rem; + font-family: var(--main-font); + margin-bottom: 0.5rem; + font-weight: 400; + line-height: 1.2; +} + +/* ======================================================================== + Layout Components + ======================================================================== */ +main.container { + padding-left: 0; + padding-right: 0; +} + +.site-header .container, +.navbar .container { + padding-inline: 0; +} + +.site-header { + background-color: var(--header-bg); + line-height: 1; + border-bottom: 1px solid var(--border-light); + padding: var(--spacing-md); + color: var(--text-on-dark); } main { - margin-top: 20px; - padding-left: 20px; - padding-right: 20px; + margin-top: var(--spacing-lg); + padding-left: var(--spacing-lg); + padding-right: var(--spacing-lg); } main a { - color: #4F637D; - text-decoration: underline; + color: var(--text-link); } -main a:focus, -main a:hover { - color: #4F637D; +#footer { + margin-top: auto; } +/* ======================================================================== + Navigation + ======================================================================== */ .navbar { - padding: 0; + padding: 0; + border-bottom: 1px solid var(--border-gray-200); } -.card-img-right { - height: 100%; - border-radius: 0 3px 3px 0; +.navbar-custom .navbar-nav .nav-link, +.navbar-custom .nav-link.dropdown-toggle { + color: var(--nav-text); + text-decoration: var(--nav-link-decoration); } -.flex-auto { - -ms-flex: 0 0 auto; - -webkit-box-flex: 0; - flex: 0 0 auto; +.navbar-custom .navbar-nav .nav-link:hover, +.navbar-custom .navbar-nav .nav-link:focus, +.navbar-custom .nav-link.dropdown-toggle:hover, +.navbar-custom .nav-link.dropdown-toggle:focus { + text-decoration: var(--nav-link-decoration-hover); } -.h-250 { - height: 250px; +.navbar-custom .nav-item.active .nav-link, +.navbar-custom .nav-item:hover .nav-link, +.navbar-custom .nav-item:focus-visible .nav-link { + color: var(--nav-text-active); } -@media (min-width: 768px) { - .h-md-250 { - height: 250px; - } +.dropdown-toggle::after { + display: inline-block; + margin-left: .255em; + vertical-align: .255em; + content: ""; + border: none; + width: 0.4em; + height: 0.4em; + border-right: 2px solid currentColor; + border-bottom: 2px solid currentColor; + transform: rotate(45deg); + margin-top: -0.1em; +} + +/* ======================================================================== + Cards + ======================================================================== */ +.card { + margin-bottom: var(--spacing-md) !important; + display: flex; + flex-direction: column; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + border-radius: 8px; + border: 1px solid rgba(0, 0, 0, 0.06); + transition: box-shadow 0.3s ease; } -.border-top { - border-top: 1px solid #e5e5e5; +.card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } -.border-bottom { - border-bottom: 1px solid #e5e5e5; +.card-link { + text-decoration: none; } -.box-shadow { - box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); +.card-link:hover { + text-decoration: var(--link-decoration-hover); } -/* Pagination */ -.site-pagination { - margin-bottom: 4rem; +.card img { + max-height: var(--card-image-height); + object-fit: cover; } -.site-pagination .btn { - text-decoration: none; +.card-img-top { + height: 200px; + object-fit: cover; + width: 100%; } -.news-post { - margin-bottom: 4rem; +.card-body { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: space-between; } -.news-post-title { - margin-bottom: .25rem; - font-size: 2.5rem; +.card-footer { + background: none; } -.news-post-meta { - margin-bottom: 1.25rem; - color: #999; +.card.no-image { + min-height: 200px; + background-color: var(--bg-card-alt); } -/* - * Footer - */ -.site-footer { - padding: 2.5rem 15px; - color: #5E5E5E; - text-align: center; - background-color: #FCFCFC; - border-top: .05rem solid #e5e5e5; +.card.no-image .card-img-overlay { + position: relative; + background-color: var(--bg-card-alt); + padding: 1.25rem; } -.site-footer a { - color: #00688B; - text-decoration: underline; +.card.no-image .card-img-overlay.white-text { + color: var(--text-primary); } -.site-footer p:last-child { - margin-bottom: 0; +.card.no-image .card-img-overlay.white-text a { + color: var(--text-link); } -.navbar-custom { - background-color: #1C304A; +.card.no-image .card-img-overlay.white-text a:hover, +.card.no-image .card-img-overlay.white-text a:focus { + color: var(--brand-primary); } -/* change the brand and text color */ -.navbar-custom .navbar-brand, -.navbar-custom .navbar-text { - color: rgba(255, 255, 255, .8); +.card-img-right { + height: 100%; + border-radius: 0 var(--border-radius) var(--border-radius) 0; } -/* change the link color */ -.navbar-custom .navbar-nav .nav-link { - color: rgba(255, 255, 255, .8); +.card-block { + padding: var(--spacing-lg); } -/* change the color of active or hovered links */ -.navbar-custom .nav-item.active .nav-link, -.navbar-custom .nav-item:hover .nav-link, -.navbar-custom .nav-item:focus .nav-link { - color: #ffffff; - text-decoration: underline; +.card-deck { + padding-left: var(--spacing-md); + padding-right: var(--spacing-md); } -.fa-check { - color: green; +.card-title { + font-size: 1.5rem; } -.fa-times { - color: darkred; +.full-width-card { + min-width: 100%; } -.btn-primary, .btn-primary:active, .btn-primary:visited { - background-color: #1C304A; - border-color: #1C304A; - color: white; +/* ======================================================================== + Buttons + ======================================================================== */ +.btn-primary, +.btn-primary:active, +.btn-primary:visited { + background-color: var(--btn-primary-bg); + border-color: var(--btn-primary-border); + color: var(--btn-primary-text); } .btn-primary:hover, -.bn-primary:focus { - color: white; - background-color: #1C304A; - border-color: #1C304A; - transition: all 1s ease; - -webkit-transition: all 1s ease; - -moz-transition: all 1s ease; - -o-transition: all 1s ease; - -ms-transition: all 1s ease; +.btn-primary:focus { + color: var(--btn-primary-text); + background-color: var(--btn-primary-bg); + border-color: var(--btn-primary-border); + transition: var(--transition-standard); +} + +.btn-background, +.btn-background:active, +.btn-background:visited { + background-color: inherit; + color: inherit; + border: 1px solid var(--brand-primary); + padding: 0 10px; + min-width: 7rem; + white-space: nowrap; + vertical-align: middle; + line-height: 1; } -.skipnav { - text-align: left; +.btn-background:not(:first-child) { + margin-left: 0.5rem; } -.skipnav a { - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; - color: #4F637D; - text-decoration: underline; +.btn-background:hover { + color: var(--text-on-dark); + background-color: var(--brand-primary); + border-color: var(--brand-primary); + transition: var(--transition-standard); } -.skipnav a:focus, .skipnav a:active { - position: static; - left: 0; - width: auto; - height: auto; - overflow: visible; - text-decoration: underline; +a.btn { + text-decoration: none; } -.contact h3 { - font-size: 1.6rem; +.dropdown-button { + background: inherit; + font-family: inherit; + font-weight: inherit; + border: 0; } -.contact h4 { - font-size: 1.3rem; +.background-button { + border: 0; + background: transparent; } -.card { - margin-bottom: 15px !important; +.social-share-btn { + border: 1px black solid; } -.full-width-card { - min-width: 100%; +/* ======================================================================== + Carousel + ======================================================================== */ +.carousel { + height: var(--carousel-min-height); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + border-radius: 8px; + overflow: hidden; + margin-bottom: 2rem; } -.card img { - max-height: 250px; - object-fit: cover; +.carousel-inner { + height: 100%; + border-radius: 8px; } -.footer-img { - max-width: 100%; - height: auto; +.carousel-item { + height: 100%; } .carousel-min { - min-width: 100%; - min-height: 500px; + min-width: 100%; + height: var(--carousel-min-height); +} + +.carousel-min img { + width: 100%; + height: 100%; + object-fit: cover; } .carousel-caption { - left: 0px; - bottom: 0px; - background-color: rgba(55, 55, 55, .8); + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); + padding: 2rem; + text-align: center; } +.carousel-caption a, .carousel-caption h2 a { - color: white; + color: var(--text-on-dark); } -.row-eq-height { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; +.carousel-caption h3 a { + color: var(--text-on-dark); + font-size: 1.5rem; + font-weight: 500; } -.article-thumbnail { - object-fit: cover; +.carousel-caption p { + color: var(--text-on-dark); + margin-bottom: 1rem; } -.card-block { - padding: 20px; +.carousel-control-next, +.carousel-control-prev { + top: 40px; } #carousel-buttons { - margin-left: 100px; - position: absolute; - top: 5px; - right: 5px; + margin-left: 100px; + position: absolute; + top: 5px; + right: 5px; } -.carousel-control-next { - top: 40px; +/* ======================================================================== + Article Styles + ======================================================================== */ +.article-title { + font-size: 1.25rem; + margin-bottom: 0.25rem; + font-weight: 500; + line-height: 1.3; + color: var(--text-header); } -.carousel-control-prev { - top: 40px; +.article-thumbnail { + object-fit: cover; } -footer svg { - height: 100px; - width: 100%; +.article-img { + filter: brightness(50%); } -@media screen and (max-width: 990px) { - .article-title { - font-size: 1.1em !important; - } +.article-menu h2 { + font-size: 1.5rem; } -@media screen and (max-width: 764px) { - .article-title { - font-size: 0.9em !important; - } +.article-authors { + color: var(--text-muted); + margin-bottom: 0.5rem; + font-weight: 400; +} - p { - font-size: 0.7em !important; - margin-bottom: 8px; - } +.article-meta { + display: flex; + flex-wrap: wrap; + gap: 1rem; + color: var(--text-muted); + margin-top: 0.5rem; +} - .card-img-overlay { - padding: 10px; - } +.meta-item { + display: inline-flex; + align-items: center; + gap: 0.25rem; +} - .card img { - min-height: 220px; - object-fit: cover; - } +.article-item { + padding: 1.25rem 0; + border-bottom: 1px solid var(--border-light); } -.card-deck { - padding-left: 15px; - padding-right: 15px; +.article-item:last-child { + border-bottom: none; + padding-bottom: 0; } -.article-title { - font-size: 1.5rem; +.article-link { + color: inherit; } -.editor-name { - font-size: 1.25rem; +.article-link:hover .article-title { + color: var(--link-hover-color); + transition: var(--link-transition); } -.article-menu h2 { - font-size: 1.5rem; +.article-table { + display: block; + overflow-x: scroll; + width: 100%; + margin-bottom: 1rem; + color: var(--text-primary); } -.white-text { - color: white; +.article-table th, +.article-table td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid var(--border-medium); } -.white-text a { - color: white; +.article-table thead th { + vertical-align: bottom; + border-bottom: 2px solid var(--border-medium); } -.white-text a:hover, -.white-text a:focus { - color: white; +.article-table tbody + tbody { + border-top: 2px solid var(--border-medium); } -.article-img { - filter: brightness(50%); +.article-table-sm th, +.article-table-sm td { + padding: 0.3rem; } -.journal-name { - font-size: 2.5rem; - margin-bottom: .5rem; - font-weight: 500; - line-height: 1.2; +#main_article { + margin-top: var(--spacing-xl); } -.header-image { - max-height: 120px; +#main_article img { + max-width: 100%; } -.orcid-img { - height: 16px; - width: 16px; - display: inline-block; +#article blockquote { + background: var(--bg-blockquote); + border-left: 10px solid var(--brand-primary); + margin: 1.5em 10px; + padding: 0.5em 10px; } +#article iframe { + max-width: 100%; + height: auto; + aspect-ratio: 16/9; + margin: 1rem 0; +} -.table-foot .table-footnotes li.fn { - list-style-type: none; +#reflist ul { + padding-left: 0; } -.article-table { +#reflist li { + word-wrap: break-word; + list-style-type: none; + padding-bottom: var(--spacing-sm); +} + +/* ======================================================================== + Thumbnail Styles + ======================================================================== */ +.thumbnail-container { + position: relative; + width: 80px; + height: 80px; + flex-shrink: 0; +} + +.article-thumbnail { + width: 100%; + height: 100%; + border-radius: 8px; + object-fit: cover; display: block; - overflow-x: scroll; } -.table-caption { - margin-bottom: 8px; +.article-thumbnail[src*="journal_cover_download"], +.article-thumbnail[src*="article.png"] { + object-fit: contain; } -.math-formulae { - overflow-x: auto; - padding-bottom: 1rem; +.thumbnail-fallback { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 8px; + background-color: var(--brand-primary); + color: white; + display: none; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 1.2rem; + text-transform: uppercase; } -.journal-card-title { - margin-bottom: 0; - font-size: 13px; +.thumbnail-container.fallback-active .article-thumbnail { + display: none !important; } -.row-smaller-gutters { - margin-left: -9px; - margin-right: -9px; +.thumbnail-container.fallback-active .thumbnail-fallback { + display: flex !important; } -.row-smaller-gutters > div[class^="col"] { - padding-left: 9px; - padding-right: 9px; + +/* ======================================================================== + News & Blog + ======================================================================== */ +.news-post { + margin-bottom: 4rem; } -header svg { - max-height: 120px; - max-width: 100%; + +.news-post-title { + margin-bottom: 0.25rem; + font-size: 2.5rem; } -.journal-div { - padding-bottom:15px; + +.news-post-meta { + margin-bottom: 1.25rem; + color: var(--text-muted); } + +/* ======================================================================== + Journal Styles + ======================================================================== */ .journal-name { - font-size: 1.4rem; + font-size: 2.5rem; + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; } + +.journal-card-title { + margin-bottom: 0; + font-size: 13px; +} + +.journal-div { + padding-bottom: var(--spacing-md); +} + .journal-button-block { - margin-top: 4px; - margin-bottom: 4px; + margin-top: var(--spacing-xs); + margin-bottom: var(--spacing-xs); } -.responsive-img { - max-width: 100%; +/* ======================================================================== + Issue & Content Sections + ======================================================================== */ +.homepage-element-wrapper:not(:first-child) { + margin-block: 2rem; } -.article-table { - width: 100%; - margin-bottom: 1rem; - color: #212529; +.issue-section { + background: var(--bg-content); + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.06); + margin-bottom: 2rem; + padding: 2rem; } -.article-table th, -.article-table td { - padding: 0.75rem; - vertical-align: top; - border-top: 1px solid #6c757d; +.section-title { + margin-bottom: 1.5rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--border-light); + color: var(--text-header); + font-weight: 600; } -.article-table thead th { - vertical-align: bottom; - border-bottom: 2px solid #6c757d; +.additional-issues { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--border-light); } -.article-table tbody + tbody { - border-top: 2px solid #6c757d; +.also-part-of { + font-weight: 400; + font-size: 0.9rem; + margin-bottom: 0.25rem; + color: var(--text-muted); } -.article-table-sm th, -.article-table-sm td { - padding: 0.3rem; +.additional-issue-link { + display: block; + margin-bottom: 0.25rem; + font-size: 0.9rem; + color: var(--text-muted); + opacity: 0.8; +} + +.search-results .article-item, +section[aria-label*="Results"] .article-item { + background: var(--bg-content); + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.06); + padding: 2rem; + margin-bottom: 1.5rem; +} + +/* ======================================================================== + Footer + ======================================================================== */ +.site-footer { + padding: 2.5rem var(--spacing-md); + color: var(--text-muted); + text-align: center; + background-color: var(--bg-footer); + border-top: 0.05rem solid var(--border-light); +} + +.site-footer a { + color: var(--text-link-alt); +} + +.site-footer p:last-child { + margin-bottom: 0; +} + +footer svg { + height: 100px; + width: 100%; } +header svg { + max-height: var(--header-height); + max-width: 100%; +} +/* ======================================================================== + Form Elements + ======================================================================== */ .homepage-element-search-bar input[type="text"] { - font-size: 1.5rem; + font-size: 1.5rem; } .homepage-element-search-bar .input-group-text { - font-size: 1.5rem; + font-size: 1.5rem; } -#main_article { - margin-top: 30px; +.input-group .form-control, +.input-group .custom-select, +.input-group .input-group-text { + margin: 0 !important; + border-radius: 0; } -.page-link, -.page-link:hover, -.page-link:focus { - color: #4F637D; +.input-group > .custom-select:last-child { + border-top-right-radius: .25rem; + border-bottom-right-radius: .25rem; } -.page-item.active .page-link { - background-color: #4F637D; +.input-group-prepend > .input-group-text { + border-top-left-radius: .25rem; + border-bottom-left-radius: .25rem; } -.social-share-btn{ - border: 1px black solid; +.input-group .btn { + margin: 0; + height: 100%; + border-radius: 0 .25rem .25rem 0; } -#article blockquote { - background: #F0F0F0; - border-left: 10px solid #1C304A; - margin: 1.5em 10px; - padding: 0.5em 10px; +.badge-secondary { + background-color: var(--brand-secondary); + color: #fff; } -#reflist ul{ - padding-left: 0; +input + .btn-background { + height: 2.4375rem; } -#reflist li { - word-wrap: break-word; - list-style-type: none; - padding-bottom: 8px; +span + .btn-background { + height: auto; + min-height: 1.8rem; } -.sticky-toc { - position: sticky; - max-height: 100vh; - overflow-y: auto; - top: 60px; - z-index: 999; +/* ======================================================================== + Utility Classes + ======================================================================== */ +.flex-auto { + flex: 0 0 auto; } -.card.no-image { - min-height: 200px; - background-color: #f8f9fa; +.h-250 { + height: var(--card-image-height); } -.card.no-image .card-img-overlay { - position: relative; - background-color: #f8f9fa; - padding: 1.25rem; +.border-top { + border-top: 1px solid var(--border-light); } -.card.no-image .card-img-overlay.white-text { - color: #212529; +.border-bottom { + border-bottom: 1px solid var(--border-light); } -.card.no-image .card-img-overlay.white-text a { - color: #4F637D; +.box-shadow { + box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05); } -.card.no-image .card-img-overlay.white-text a:hover, -.card.no-image .card-img-overlay.white-text a:focus { - color: #1C304A; +.white-text { + color: var(--text-on-dark); } -#article iframe { - max-width: 100%; - height: auto; - aspect-ratio: 16/9; - margin: 1rem 0; +.white-text a { + color: var(--text-on-dark); } -a { - overflow-wrap: break-word; + +.white-text a:hover, +.white-text a:focus { + color: var(--text-on-dark); } -.section-link { - white-space: nowrap; +.responsive-img { + max-width: 100%; } -.section-link:not(:first-of-type) { - margin-left: 0.5rem; +.header-image { + max-height: var(--header-height); } -:root { - --draw-attention: #FFEB3B; +.footer-img { + max-width: 100%; + height: auto; } -.draw-attention{ - background-color: var(--draw-attention); - transition: background-color 2s ease-out; +.draw-attention { + background-color: var(--highlight-color); + transition: background-color 2s ease-out; +} + +.sticky-top { + max-height: 100vh; + overflow-y: auto; +} + +.table-caption { + margin-bottom: var(--spacing-sm); +} + +.math-formulae { + overflow-x: auto; + padding-bottom: 1rem; +} + +/* ======================================================================== + Icons + ======================================================================== */ +.fa-check { + color: var(--color-success); +} + +.fa-times { + color: var(--color-danger); +} + +.orcid-img { + height: var(--icon-size); + width: var(--icon-size); + display: inline-block; +} + +/* ======================================================================== + Lists + ======================================================================== */ +.no-bullet-list { + list-style-type: none; + padding-left: 0; + margin-left: 0; } -.back-links-list{ +.keywords-list { + list-style: none; + padding-left: 0; + margin: 0; + white-space: normal; + margin-bottom: 1rem; +} + +.keywords-list li { + display: inline-block; +} + +.back-links-list { list-style: none; padding-left: 0.2rem; margin: 0; @@ -558,254 +910,441 @@ a { content: " "; } -.byline { - font-size: 1rem; - font-family: "Playfair Display", Georgia, "Times New Roman", serif; - margin-bottom: .5rem; - font-weight: 500; - line-height: 1.2; +.section-link { + white-space: nowrap; } -.card-title{ - font-size: 1.5rem; +.section-link:not(:first-of-type) { + margin-left: 0.5rem; } -.superscript-icon { - vertical-align: super; - font-size: 0.7em !important; +/* ======================================================================== + Grid Utilities + ======================================================================== */ +.row-eq-height { + display: flex; } -.pad-icon { - padding-left: 0.4rem; - padding-right: 0.4rem; +.row-smaller-gutters { + margin-left: -9px; + margin-right: -9px; } -.dropdown-button{ - background: inherit; - font-family: inherit; - font-weight: inherit; - border: 0; +.row-smaller-gutters > div[class^="col"] { + padding-left: 9px; + padding-right: 9px; } - -.background-button{ - border: 0; - background: transparent; + +/* ======================================================================== + Pagination + ======================================================================== */ +.site-pagination { + margin-bottom: 4rem; } -.icon-recede{ - opacity: 70%; +.site-pagination > .btn { + border-radius: var(--border-radius-lg); } -.keywords-list { - list-style: none; - padding-left: 0; +.page-link, +.page-link:hover, +.page-link:focus { + color: var(--text-link); +} + +.page-item.active .page-link { + background-color: var(--text-link); +} + +/* ======================================================================== + Contact + ======================================================================== */ +.contact h3 { + font-size: 1.6rem; +} + +.contact h4 { + font-size: 1.3rem; +} + +/* ======================================================================== + Table Footnotes + ======================================================================== */ +.table-foot .table-footnotes li.fn { + list-style-type: none; +} + +/* ======================================================================== + Modal + ======================================================================== */ +.modal-sticky-close { + position: sticky; + top: 0.2rem; + right: 0.2rem; + z-index: 1050; + float: right; + margin-bottom: 0.2rem; + min-width: 24px; + min-height: 24px; +} + +/* ======================================================================== + Accessibility & Skip Navigation + ======================================================================== */ +.skipnav { + text-align: left; +} + +.skipnav a { + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + overflow: hidden; + color: var(--text-link); +} + +.skipnav a:focus, +.skipnav a:active { + position: static; + left: 0; + width: auto; + height: auto; + overflow: visible; +} + +/* Focus Management */ +button, input, select, textarea, [tabindex]:not([tabindex="-1"]), +.dropdown-menu, .dropdown-item, .nav-link, .nav-link a, .btn { + margin: var(--focus-ring-size); +} + +p a, span a, li a { + margin: calc(-1 * var(--focus-ring-size)); + padding: var(--focus-ring-size); + box-sizing: border-box; +} + +.dropdown-menu a, +.dropdown-menu button, +.dropdown-menu .dropdown-item { margin: 0; +} + +.article-block a, +.site-header a, +.site-footer a, +p a, +li a { + display: inline-block; +} + +.dropdown-item:focus { + white-space: nowrap; +} + +.dropdown-menu { + padding: var(--focus-ring-size); +} + +.form-check:has(input:focus-visible), +.form-check:has(select:focus-visible), +.form-check:has(textarea:focus-visible) { + outline: 2px var(--focus-outline) solid; + outline-offset: 0; + box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-shadow); + display: block; white-space: normal; } -.keywords-list li{ + +.form-check input:focus-visible { + outline: none; + box-shadow: none; +} + +/* Universal Focus Styles - Only show on keyboard navigation */ +*:focus-visible { + outline: 2px var(--focus-outline) solid; + outline-offset: 0; + box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-shadow); +} + +a:focus-visible { + outline: 2px var(--focus-outline) solid; + outline-offset: 0; + box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-shadow); display: inline-block; + white-space: normal; } -.btn-background, .btn-background:active, .btn-background:visited { - background-color: inherit; - color: inherit; - border: 1px, solid, #1C304A; - padding: 0 10px; - min-width: 7rem; - white-space: nowrap; - vertical-align: middle; - line-height: 1; +main a:focus-visible, +.site-footer a:focus-visible, +#lightbox a:focus-visible, +.navbar-custom .nav-link:focus-visible, +.navbar-custom .navbar-brand:focus-visible, +.btn:focus-visible, +.btn-primary:focus-visible, +.btn-secondary:focus-visible, +.btn-success:focus-visible, +.btn-danger:focus-visible, +.btn-warning:focus-visible, +.btn-info:focus-visible, +.btn-light:focus-visible, +.btn-dark:focus-visible, +.site-pagination > .btn:focus-visible, +.pagination button:focus-visible, +input[type="text"]:focus-visible, +input[type="email"]:focus-visible, +input[type="password"]:focus-visible, +input[type="search"]:focus-visible, +input[type="number"]:focus-visible, +input[type="date"]:focus-visible, +input[type="datetime-local"]:focus-visible, +input[type="file"]:focus-visible, +input[type="submit"]:focus-visible, +.form-control.is-valid:focus-visible, +.form-control.is-invalid:focus-visible, +textarea.tinymce:focus-visible, +.custom-select:focus-visible { + outline: 2px var(--focus-outline) solid; + outline-offset: 0; + box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-shadow); +} + +/* ======================================================================== + Media Queries + ======================================================================== */ +@media (min-width: 768px) { + .display-4 { + font-size: 3rem; + } + + .h-md-250 { + height: var(--card-image-height); + } } -.btn-background:not(:first-child) { - margin-left: 0.5rem; +@media screen and (max-width: 990px) { + .article-title { + font-size: 1.1em !important; + } } -input + .btn-background { - height: 2.4375rem; +@media screen and (max-width: 764px) { + .article-title { + font-size: 0.9em !important; + } + + p { + font-size: 0.7em !important; + margin-bottom: var(--spacing-sm); + } + + .card-img-overlay { + padding: 10px; + } + + .card img { + min-height: 220px; + object-fit: cover; + } + + .journal-name { + font-size: 1.4rem; + } } -span + .btn-background { - height: auto; - min-height: 1.8rem; +/* ======================================================================== + Issue Cards - Horizontal Layout + ======================================================================== */ +.issues-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 1.5rem; + margin-top: 2rem; + margin-bottom: 2rem; } -.btn-background:hover { - color: white; - background-color: #1C304A; - border-color: #1C304A; - transition: all 1s ease; - -webkit-transition: all 1s ease; - -moz-transition: all 1s ease; - -o-transition: all 1s ease; - -ms-transition: all 1s ease; -} - -.modal-sticky-close{ - position: sticky; - top: 0.2rem; - right: 0.2rem; - z-index: 1050; - float: right; - margin-bottom: 0.2rem; - min-width: 24px; - min-height: 24px; -} - -#reading-options{ +.issue-card { + background: white; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.06); + overflow: hidden; + transition: box-shadow 0.3s ease; +} + +.issue-card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); +} + +.issue-card-inner { display: flex; - gap: 1rem; - margin: 0; - padding: 0; - justify-content: flex-end; - min-height: fit-content; - box-sizing: border-box; - position: sticky; - top: 0; - z-index: 1000; - width: fit-content; - margin-left: auto; + height: 195px; } -.btn-opt { - border: 1px solid #1C304A; - background: #f1f1f1; +.issue-cover { + width: 40%; + overflow: hidden; } -.dyslexia-friendly { - font-family: Verdana !important; - color: #4c4c4c; - background-color: #F5F5DC; +.issue-cover img, +.issue-cover svg { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; } -.dyslexia-friendly em, -.dyslexia-friendly i { - background-color: #FAFAC8; - font-style: normal; +.issue-content { + width: 60%; + padding: 1.5rem; + display: flex; + flex-direction: column; + justify-content: space-between; } -.dyslexia-friendly a { - font-family: inherit; - color: inherit; - text-decoration: underline; +.issue-title { + font-size: 1.1rem; + font-weight: 600; + color: var(--text-header); + margin-bottom: 0.5rem; + line-height: 1.3; } -/* - * WCAG 2.4.7 Focus Visible - Two-Color Focus Indicator (Technique C40) - * Requires at least 1:9 contrast ratio between the two focus colours. - */ -:root { - --focus-light: #F9F9F9; - --focus-dark: #193146; - --focus-ring-size: 4px; -} - -/* Prevent layout shifts */ - button, input, select, textarea, [tabindex]:not([tabindex="-1"]), - .dropdown-menu, .dropdown-item, .nav-link, .nav-link a, .btn { - margin: var(--focus-ring-size); - } - - /* Inline links override to prevent layout shifts without affecting typography */ - p a, - span a, - li a { - margin: calc(-1 * var(--focus-ring-size)); - padding: var(--focus-ring-size); - box-sizing: border-box; - } - - /* Remove margin from elements that shouldn't have it */ - .dropdown-menu a, - .dropdown-menu button, - .dropdown-menu .dropdown-item { - margin: 0; - } - - /*individual workarounds */ - .article-block a, - .site-header a , - .site-footer a, - p a , - li a { - display: inline-block; - } - - .dropdown-item:focus{ - white-space: nowrap; - } - - /* Ensure dropdown containers have enough space */ - .dropdown-menu { - padding: var(--focus-ring-size); - } - -/* General */ -*:focus { - outline: 2px var(--focus-light) solid; - outline-offset: 0; - box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark); -} - -/* focus bounding boxes */ -a:focus { - outline: 2px var(--focus-light) solid; - outline-offset: 0; - box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark); - display: inline-block; - white-space: normal; -} - -.form-check:has(input:focus), -.form-check:has(select:focus), -.form-check:has(textarea:focus) { - outline: 2px var(--focus-light) solid; - outline-offset: 0; - box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark); - display: block; - white-space: normal; -} - -/* Alternative approach for browsers that don't support :has() */ -.form-check input:focus{ - /* Remove individual focus styles when inside form-check */ - outline: none; - box-shadow: none; -} - -/* Specificity overrides for other elements */ -main a:focus, -.site-footer a:focus, -#lightbox a:focus, -.navbar-custom .nav-link:focus, -.navbar-custom .navbar-brand:focus, -.btn:focus, -.btn-primary:focus, -.btn-secondary:focus, -.btn-success:focus, -.btn-danger:focus, -.btn-warning:focus, -.btn-info:focus, -.btn-light:focus, -.btn-dark:focus, -.site-pagination > .btn:focus, -.pagination button:focus, -input[type="text"]:focus, -input[type="email"]:focus, -input[type="password"]:focus, -input[type="search"]:focus, -input[type="number"]:focus, -input[type="date"]:focus, -input[type="datetime-local"]:focus, -input[type="file"]:focus, -input[type="submit"]:focus, -.form-control.is-valid:focus, -.form-control.is-invalid:focus, -textarea.tinymce:focus, -.custom-select:focus { - outline: 2px var(--focus-light) solid; - outline-offset: 0; - box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark); -} - -/* end of WCAG 2.4.7 Focus Visible - Two-Color Focus Indicator (Technique C40) */ \ No newline at end of file +.issue-date { + color: var(--text-muted); + font-size: 0.9rem; + margin-bottom: 0.25rem; +} + +.issue-count { + color: var(--text-muted); + font-size: 0.9rem; + margin-bottom: 1rem; +} + +.no-issues { + grid-column: 1 / -1; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .issues-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .issue-card-inner { + height: 200px; + } + + .issue-content { + padding: 1rem; + } + + .issue-title { + font-size: 1rem; + } +} + +/* ======================================================================== + Article Share Section + ======================================================================== */ +.share-section { + background: var(--bg-card-alt); + border-radius: 8px; + padding: 1rem; + margin-bottom: 1.5rem; +} + +.share-section h2 { + margin-bottom: 0.75rem; + font-size: 1rem; + font-weight: 600; +} + +.share-url-container { + display: flex; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.share-url-input { + flex: 1; + padding: 0.5rem; + border: 1px solid var(--border-light); + border-radius: 4px; + font-size: 0.9rem; + background: var(--bg-content); +} + +.copy-button { + padding: 0.5rem 1rem; + background: var(--brand-primary); + color: white; + border: none; + border-radius: 4px; + font-size: 0.9rem; + cursor: pointer; +} + +/* ======================================================================== + Article Sidebar Lists + ======================================================================== */ +.article-menu ul { + padding-left: 20px; +} + +.article-menu ul li { + position: relative; +} + +.article-menu ul li a { + color: var(--text-link); +} + +.article-menu ul li a:hover { + color: var(--brand-primary); +} + +/* ======================================================================== + Article Tables + ======================================================================== */ +#main_article table { + width: 100%; + margin-bottom: 1rem; + background-color: transparent; + border-collapse: collapse; +} + +#main_article table th, +#main_article table td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid var(--border-light); +} + +#main_article table thead th { + vertical-align: bottom; + border-bottom: 2px solid var(--border-medium); + background-color: var(--bg-card-alt); + font-weight: bold; + color: var(--text-header); +} + +#main_article table tbody tr:hover { + background-color: rgba(0, 0, 0, 0.02); +} + +#main_article table tbody + tbody { + border-top: 2px solid var(--border-medium); +} + +/* Responsive table wrapper */ +#main_article .table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} \ No newline at end of file diff --git a/src/themes/clean/assets/css/evergreen.css b/src/themes/clean/assets/css/evergreen.css new file mode 100644 index 0000000000..ccb1ac0e27 --- /dev/null +++ b/src/themes/clean/assets/css/evergreen.css @@ -0,0 +1,7 @@ +:root { + /* Brand & Theme Colors */ + --brand-primary: #047a59; + --brand-secondary: #4F637D; + --text-link-alt: #00688B; + --focus-shadow: #193146; +} \ No newline at end of file diff --git a/src/themes/clean/assets/css/ocean.css b/src/themes/clean/assets/css/ocean.css new file mode 100644 index 0000000000..2e1061d894 --- /dev/null +++ b/src/themes/clean/assets/css/ocean.css @@ -0,0 +1,7 @@ +:root { + /* Brand & Theme Colors */ + --brand-primary: #1e3a5f; + --brand-secondary: #5a7a9e; + --text-link-alt: #2563a8; + --focus-shadow: #2a4a6e; +} \ No newline at end of file diff --git a/src/themes/clean/build_assets.py b/src/themes/clean/build_assets.py index cf5948d3c4..545b350380 100644 --- a/src/themes/clean/build_assets.py +++ b/src/themes/clean/build_assets.py @@ -39,7 +39,7 @@ def process_journals(): for file in journal.scss_files: if file.endswith("clean_override.css"): print( - "Copying material override file for {name}".format( + "Copying clean override file for {name}".format( name=journal.name ) ) @@ -65,6 +65,18 @@ def build(): "themes/clean/assets/css/clean.css", "static/clean/css/clean.css", ) + copy_file( + "themes/clean/assets/css/evergreen.css", + "static/clean/css/evergreen.css", + ) + copy_file( + "themes/clean/assets/css/ocean.css", + "static/clean/css/ocean.css", + ) + copy_file( + "themes/clean/assets/css/cardinal.css", + "static/clean/css/cardinal.css", + ) copy_file( "themes/clean/assets/js/tooltip-init.js", "static/clean/js/tooltip-init.js", diff --git a/src/themes/clean/templates/core/base.html b/src/themes/clean/templates/core/base.html index 14d19be1b3..d4203a6d82 100644 --- a/src/themes/clean/templates/core/base.html +++ b/src/themes/clean/templates/core/base.html @@ -34,59 +34,58 @@ {% include "common/elements/skip_to_main_content.html" %} -
-
-
-
- {% if request.journal and request.journal.header_image %} -
- - {{ request.journal.name }} logo - -
- {% if journal_settings.styling.display_journal_title %} -
-

{{ request.journal.name }}

-
+
+
+
+ {% if request.journal and request.journal.header_image %} +
+ + {{ request.journal.name }} logo + +
+ + {% if journal_settings.styling.display_journal_title %} +
+

{{ request.journal.name }}

+
+ {% endif %} + {% elif request.press and not request.journal %} +
+ {% if 'svg' in request.press_cover %} + {% svg request.press_cover %} + {% else %} + {{ request.press.name }} logo {% endif %} - {% elif request.press and not request.journal %} -
- {% if 'svg' in request.press_cover %} - {% svg request.press_cover %} - {% else %} - {{ request.press.name }} logo - {% endif %} -
- {% endif %} -
+
+ {% endif %} +
+
+
+{% if request.journal %} + {% include "core/nav.html" %} +{% elif request.press %} + {% include "press/nav.html" %} +{% endif %} +
+ {% for message in messages %} +
+ + {{ message|linebreaksbr }}
- {% if request.journal %} - {% include "core/nav.html" %} - {% elif request.press %} - {% include "press/nav.html" %} - {% endif %} - -
- {% for message in messages %} -
- - {{ message|linebreaksbr }} -
- {% endfor %} - {% block body %}{% endblock body %} -
-
- {% include "core/footer.html" %} -
-
+ {% endfor %} + {% block body %}{% endblock body %} + + {% include "common/elements/analytics.html" %} From 90a233f126d85f20e5d48e8836393d8539cb5f1e Mon Sep 17 00:00:00 2001 From: StephDriver <5330770+StephDriver@users.noreply.github.com> Date: Fri, 3 Oct 2025 08:50:34 +0100 Subject: [PATCH 13/45] a11y: clarity reading options buttons distinguisable when sticky --- src/themes/clean/assets/css/clean.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/themes/clean/assets/css/clean.css b/src/themes/clean/assets/css/clean.css index b2137dc315..0a8363bdb1 100644 --- a/src/themes/clean/assets/css/clean.css +++ b/src/themes/clean/assets/css/clean.css @@ -571,7 +571,7 @@ a.btn { display: flex; gap: 1rem; margin: 0; - padding: 0; + padding: 9; justify-content: flex-end; min-height: fit-content; box-sizing: border-box; @@ -580,6 +580,7 @@ a.btn { z-index: 1000; width: fit-content; margin-left: auto; + background-color: var(--bg-body); } .btn-opt { From 03e27df2bd19f7c5a3ba329258499d1b82149a4e Mon Sep 17 00:00:00 2001 From: StephDriver <5330770+StephDriver@users.noreply.github.com> Date: Fri, 3 Oct 2025 09:15:05 +0100 Subject: [PATCH 14/45] revert: #4890 non-visible list syntax as breaks copy button --- .../elements/journal/citation_modals.html | 38 ++++++++----------- 1 file changed, 15 insertions(+), 23 deletions(-) diff --git a/src/themes/clean/templates/elements/journal/citation_modals.html b/src/themes/clean/templates/elements/journal/citation_modals.html index 349ddf25d4..2f925e8c6b 100644 --- a/src/themes/clean/templates/elements/journal/citation_modals.html +++ b/src/themes/clean/templates/elements/journal/citation_modals.html @@ -10,14 +10,12 @@