diff --git a/src/themes/clean/assets/css/cardinal.css b/src/themes/clean/assets/css/cardinal.css
new file mode 100644
index 0000000000..b132ab7c33
--- /dev/null
+++ b/src/themes/clean/assets/css/cardinal.css
@@ -0,0 +1,98 @@
+:root {
+ /* Brand & Theme Colors */
+ --brand-primary: #9b2c2c;
+ --brand-secondary: #c05555;
+ --text-link-alt: #7c2d2d;
+ --focus-shadow: #5a1515;
+ --color-success: #5cb85c;
+ /* Highlight color (shared across themes) */
+ --highlight-color: #FFEB3B;
+
+ /* Text Colors */
+ /* Must pass WCAG color contrast at --recede-opacity */
+ --text-primary: #212529;
+ --text-muted: #747474;
+ --text-on-dark: white;
+ --text-link: var(--body-text);
+ --text-black: #000;
+ --text-white: #fff;
+ --text-header: var(--text-black);
+ --body-text: #525252;
+ --nav-text: #636363;
+ --nav-text-active: var(--brand-primary);
+ --recede-opacity: 70%;
+
+ /* Link Decoration */
+ --link-decoration: underline;
+ --link-decoration-hover: underline;
+ --nav-link-decoration: none;
+ --nav-link-decoration-hover: underline;
+ --dropdown-item-decoration: none;
+ --dropdown-item-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;
+ --btn-outline-secondary: #6c757d;
+
+ /* 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;
+ --footer-height: 70px;
+ --card-image-height: 250px;
+ --carousel-min-height: 500px;
+ --icon-size: 16px;
+
+ /* Transitions */
+ --transition-standard: all 1s ease;
+
+ /* Pagination Colors - Light Mode */
+ --pagination-color: var(--body-text);
+ --pagination-bg: var(--bg-content);
+ --pagination-border: var(--border-light);
+ --pagination-hover-color: var(--brand-primary);
+ --pagination-hover-bg: var(--bg-card-alt);
+ --pagination-active-color: var(--btn-primary-text);
+ --pagination-active-bg: var(--btn-primary-bg);
+ --pagination-active-border: var(--btn-primary-border);
+ --pagination-disabled-color: var(--text-muted);
+}
\ 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..f093c0c9c3 100644
--- a/src/themes/clean/assets/css/clean.css
+++ b/src/themes/clean/assets/css/clean.css
@@ -1,434 +1,518 @@
-/* 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/evergreen.css'); */
+/* @import url('/static/clean/css/ocean.css'); */
+/* @import url('/static/clean/css/cardinal.css'); */
+
+/* ========================================================================
+ Base Styles
+ ======================================================================== */
+html,
+body {
+ height: 100%;
+}
body {
- background-color: #F0F0F0;
- margin-top: 20px;
+ background-color: var(--bg-body);
+ font-family: var(--main-font);
+ font-weight: 400;
+ color: var(--body-text);
+ display: flex;
+ flex-direction: column;
}
-.container {
- background-color: white;
- padding-left: 0;
- padding-right: 0;
+a {
+ overflow-wrap: break-word;
+ text-decoration: var(--link-decoration);
+ transition: var(--link-transition);
}
-.site-header {
- background-color: #1C304A;
- line-height: 1;
- border-bottom: 1px solid #e5e5e5;
- padding: 15px;
- color: #FFF;
+a:hover,
+a:focus {
+ text-decoration: var(--link-decoration-hover);
+ color: var(--link-hover-color);
}
+/* ========================================================================
+ Typography
+ ======================================================================== */
h1, h2, h3, h4, h5, h6 {
- font-family: "Playfair Display", Georgia, "Times New Roman", serif;
+ font-family: var(--main-font);
+ color: var(--text-header);
}
-.article-title {
- font-size: 1.7em;
-}
+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;
}
-main {
- margin-top: 20px;
- padding-left: 20px;
- padding-right: 20px;
+.byline {
+ font-size: 1rem;
+ font-family: var(--main-font);
+ margin-bottom: 0.5rem;
+ font-weight: 400;
+ line-height: 1.2;
}
-main a {
- color: #4F637D;
- text-decoration: underline;
+.text-muted {
+ color: var(--text-muted) !important;
}
-main a:focus,
-main a:hover {
- color: #4F637D;
+/* ========================================================================
+ Layout Components
+ ======================================================================== */
+main.container {
+ padding-left: 0;
+ padding-right: 0;
}
-.navbar {
- padding: 0;
+.site-header .container,
+.navbar .container {
+ padding-inline: 0;
}
-.card-img-right {
- height: 100%;
- border-radius: 0 3px 3px 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);
}
-.flex-auto {
- -ms-flex: 0 0 auto;
- -webkit-box-flex: 0;
- flex: 0 0 auto;
+main {
+ margin-top: var(--spacing-lg);
+ padding-left: var(--spacing-lg);
+ padding-right: var(--spacing-lg);
}
-.h-250 {
- height: 250px;
+main a {
+ color: var(--text-link);
}
-@media (min-width: 768px) {
- .h-md-250 {
- height: 250px;
- }
+#footer {
+ margin-top: auto;
}
-.border-top {
- border-top: 1px solid #e5e5e5;
+/* ========================================================================
+ Navigation
+ ======================================================================== */
+.navbar {
+ padding: 0;
+ border-bottom: 1px solid var(--border-gray-200);
}
-.border-bottom {
- border-bottom: 1px solid #e5e5e5;
+.navbar-custom .navbar-nav .nav-link,
+.navbar-custom .nav-link.dropdown-toggle,
+.navbar-dark.navbar-custom .navbar-nav .nav-link,
+.navbar-dark.navbar-custom .nav-link.dropdown-toggle {
+ color: var(--nav-text);
+ text-decoration: var(--nav-link-decoration);
}
-.box-shadow {
- box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
+.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,
+.navbar-dark.navbar-custom .navbar-nav .nav-link:hover,
+.navbar-dark.navbar-custom .navbar-nav .nav-link:focus,
+.navbar-dark.navbar-custom .nav-link.dropdown-toggle:hover,
+.navbar-dark.navbar-custom .nav-link.dropdown-toggle:focus {
+ text-decoration: var(--nav-link-decoration-hover);
+ color: var(--nav-text-active);
}
-/* Pagination */
-.site-pagination {
- margin-bottom: 4rem;
+.navbar-custom .nav-item.active .nav-link,
+.navbar-custom .nav-item:hover .nav-link,
+.navbar-custom .nav-item:focus-visible .nav-link,
+.navbar-dark.navbar-custom .nav-item.active .nav-link,
+.navbar-dark.navbar-custom .nav-item:hover .nav-link,
+.navbar-dark.navbar-custom .nav-item:focus-visible .nav-link {
+ color: var(--nav-text-active);
}
-.site-pagination .btn {
- text-decoration: none;
+.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;
}
-.news-post {
- margin-bottom: 4rem;
+/* Dropdown menu container */
+.dropdown-menu {
+ padding: var(--focus-ring-size);
+ background-color: var(--bg-content);
+ border: 1px solid var(--border-light);
}
-.news-post-title {
- margin-bottom: .25rem;
- font-size: 2.5rem;
+/* Dropdown item styles - standardized with nav-link behavior */
+.dropdown-item {
+ color: var(--nav-text);
+ text-decoration: var(--dropdown-item-decoration);
+ transition: var(--link-transition);
}
-.news-post-meta {
- margin-bottom: 1.25rem;
- color: #999;
+.dropdown-item:hover,
+.dropdown-item:focus {
+ color: var(--nav-text-active);
+ text-decoration: var(--dropdown-item-decoration-hover);
+ 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;
+.dropdown-divider {
+ border-top-color: var(--border-light);
}
-.site-footer a {
- color: #00688B;
- text-decoration: underline;
+/* ========================================================================
+ 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;
+ background-color: var(--bg-content);
}
-.site-footer p:last-child {
- margin-bottom: 0;
+.card:hover {
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
-.navbar-custom {
- background-color: #1C304A;
+.card-link {
+ text-decoration: none;
}
-/* change the brand and text color */
-.navbar-custom .navbar-brand,
-.navbar-custom .navbar-text {
- color: rgba(255, 255, 255, .8);
+.card-link:hover {
+ text-decoration: var(--link-decoration-hover);
}
-/* change the link color */
-.navbar-custom .navbar-nav .nav-link {
- color: rgba(255, 255, 255, .8);
+.card img {
+ max-height: var(--card-image-height);
+ object-fit: cover;
}
-/* 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-img-top {
+ height: 200px;
+ object-fit: cover;
+ width: 100%;
}
-.fa-check {
- color: green;
+.card-body {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
}
-.fa-times {
- color: darkred;
+.card-footer {
+ background: none;
}
-.btn-primary, .btn-primary:active, .btn-primary:visited {
- background-color: #1C304A;
- border-color: #1C304A;
- color: white;
+.card.no-image {
+ min-height: 200px;
+ background-color: var(--bg-card-alt);
}
-.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;
-}
-
-.skipnav {
- text-align: left;
-}
-
-.skipnav a {
- position: absolute;
- left: -10000px;
- width: 1px;
- height: 1px;
- overflow: hidden;
- color: #4F637D;
- text-decoration: underline;
+.card.no-image .card-img-overlay {
+ position: relative;
+ background-color: var(--bg-card-alt);
+ padding: 1.25rem;
}
-.skipnav a:focus, .skipnav a:active {
- position: static;
- left: 0;
- width: auto;
- height: auto;
- overflow: visible;
- text-decoration: underline;
+.card.no-image .card-img-overlay.white-text {
+ color: var(--text-primary);
}
-.contact h3 {
- font-size: 1.6rem;
+.card.no-image .card-img-overlay.white-text a {
+ color: var(--text-link);
}
-.contact h4 {
- font-size: 1.3rem;
+.card.no-image .card-img-overlay.white-text a:hover,
+.card.no-image .card-img-overlay.white-text a:focus {
+ color: var(--brand-primary);
}
-.card {
- margin-bottom: 15px !important;
+.card-img-right {
+ height: 100%;
+ border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
-.full-width-card {
- min-width: 100%;
+.card-block {
+ padding: var(--spacing-lg);
}
-.card img {
- max-height: 250px;
- object-fit: cover;
+.card-deck {
+ padding-left: var(--spacing-md);
+ padding-right: var(--spacing-md);
}
-.footer-img {
- max-width: 100%;
- height: auto;
+.card-title {
+ font-size: 1.5rem;
}
-.carousel-min {
- min-width: 100%;
- min-height: 500px;
+.full-width-card {
+ min-width: 100%;
}
-.carousel-caption {
- left: 0px;
- bottom: 0px;
- background-color: rgba(55, 55, 55, .8);
+/* ========================================================================
+ 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);
}
-.carousel-caption h2 a {
- color: white;
+.btn-primary:hover,
+.btn-primary:focus {
+ color: var(--btn-primary-text);
+ background-color: var(--btn-primary-bg);
+ border-color: var(--btn-primary-border);
+}
+
+.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;
+ min-height: 2rem;
+ white-space: nowrap;
+ vertical-align: middle;
+ line-height: 1;
}
-.row-eq-height {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
+.btn-background:not(:first-child) {
+ margin-left: 0.5rem;
}
-.article-thumbnail {
- object-fit: cover;
+.btn-background:hover {
+ color: var(--text-on-dark);
+ background-color: var(--brand-primary);
+ border-color: var(--brand-primary);
+ transition: var(--transition-standard);
}
-.card-block {
- padding: 20px;
+a.btn {
+ text-decoration: none;
}
-#carousel-buttons {
- margin-left: 100px;
- position: absolute;
- top: 5px;
- right: 5px;
+.dropdown-button {
+ background: inherit;
+ font-family: inherit;
+ font-weight: inherit;
+ border: 0;
}
-.carousel-control-next {
- top: 40px;
+.background-button {
+ border: 0;
+ background: transparent;
}
-.carousel-control-prev {
- top: 40px;
+.social-share-btn {
+ border: 1px black solid;
}
-footer svg {
- height: 100px;
- width: 100%;
+.alert .close {
+ color: var(--color-danger);
+ opacity: var(--recede-opacity);
}
-@media screen and (max-width: 990px) {
- .article-title {
- font-size: 1.1em !important;
- }
+.btn-outline-secondary {
+ color: var(--btn-outline-secondary);
+ border-color: var(--btn-outline-secondary);
+ background-color: transparent;
}
-@media screen and (max-width: 764px) {
- .article-title {
- font-size: 0.9em !important;
- }
-
- p {
- font-size: 0.7em !important;
- margin-bottom: 8px;
- }
-
- .card-img-overlay {
- padding: 10px;
- }
-
- .card img {
- min-height: 220px;
- object-fit: cover;
- }
+.btn-outline-secondary:hover,
+.btn-outline-secondary:focus {
+ color: var(--brand-primary);
+ background-color: transparent;
+ border-color: var(--brand-primary);
}
-.card-deck {
- padding-left: 15px;
- padding-right: 15px;
+.btn-outline-secondary:focus {
+ box-shadow: 0 0 0 var(--focus-ring-size) rgba(167, 172, 177, 0.25);
}
-.article-title {
- font-size: 1.5rem;
+/* ========================================================================
+ 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;
}
-.editor-name {
- font-size: 1.25rem;
+.carousel-inner {
+ height: 100%;
+ border-radius: 8px;
}
-.article-menu h2 {
- font-size: 1.5rem;
+.carousel-item {
+ height: 100%;
}
-.white-text {
- color: white;
+.carousel-min {
+ min-width: 100%;
+ height: var(--carousel-min-height);
}
-.white-text a {
- color: white;
+.carousel-min img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
}
-.white-text a:hover,
-.white-text a:focus {
- color: white;
+.carousel-caption {
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(transparent, rgba(0, 0, 0, var(--recede-opacity)) 20%);
+ padding: 2rem;
+ text-align: center;
}
-.article-img {
- filter: brightness(50%);
+.carousel-caption a,
+.carousel-caption h2 a {
+ color: var(--text-on-dark);
}
-.journal-name {
- font-size: 2.5rem;
- margin-bottom: .5rem;
- font-weight: 500;
- line-height: 1.2;
+.carousel-caption h3 a {
+ color: var(--text-on-dark);
+ font-size: 1.5rem;
+ font-weight: 500;
}
-.header-image {
- max-height: 120px;
+.carousel-caption p {
+ color: var(--text-on-dark);
+ margin-bottom: 1rem;
}
-.orcid-img {
- height: 16px;
- width: 16px;
- display: inline-block;
+.carousel-control-next,
+.carousel-control-prev {
+ top: 40px;
+ opacity: var(--recede-opacity);
}
-
-.table-foot .table-footnotes li.fn {
- list-style-type: none;
+#carousel-buttons {
+ margin-left: 100px;
+ position: absolute;
+ top: 5px;
+ right: 5px;
}
-.article-table {
- display: block;
- overflow-x: scroll;
+/* ========================================================================
+ Article Styles
+ ======================================================================== */
+.article-title {
+ font-size: 1.25rem;
+ margin-bottom: 0.25rem;
+ font-weight: 500;
+ line-height: 1.3;
+ color: var(--text-white);
}
-.table-caption {
- margin-bottom: 8px;
+.article-thumbnail {
+ object-fit: cover;
}
-.math-formulae {
- overflow-x: auto;
- padding-bottom: 1rem;
+.article-img {
+ filter: brightness(50%);
}
-.journal-card-title {
- margin-bottom: 0;
- font-size: 13px;
+.article-menu h2 {
+ font-size: 1.5rem;
}
-.row-smaller-gutters {
- margin-left: -9px;
- margin-right: -9px;
+.article-authors {
+ color: var(--text-muted);
+ margin-bottom: 0.5rem;
+ font-weight: 400;
}
-.row-smaller-gutters > div[class^="col"] {
- padding-left: 9px;
- padding-right: 9px;
+
+.article-meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ color: var(--text-muted);
+ margin-top: 0.5rem;
}
-header svg {
- max-height: 120px;
- max-width: 100%;
+
+.meta-item {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
}
-.journal-div {
- padding-bottom:15px;
+
+.article-item {
+ padding: 1.25rem 0;
+ border-bottom: 1px solid var(--border-light);
}
-.journal-name {
- font-size: 1.4rem;
+
+.article-item:last-child {
+ border-bottom: none;
+ padding-bottom: 0;
}
-.journal-button-block {
- margin-top: 4px;
- margin-bottom: 4px;
+
+.article-link {
+ color: inherit;
}
-.responsive-img {
- max-width: 100%;
+.article-link:hover .article-title {
+ color: var(--link-hover-color);
+ transition: var(--link-transition);
}
.article-table {
+ display: block;
+ overflow-x: scroll;
width: 100%;
margin-bottom: 1rem;
- color: #212529;
+ color: var(--text-primary);
}
.article-table th,
.article-table td {
padding: 0.75rem;
vertical-align: top;
- border-top: 1px solid #6c757d;
+ border-top: 1px solid var(--border-medium);
}
.article-table thead th {
vertical-align: bottom;
- border-bottom: 2px solid #6c757d;
+ border-bottom: 2px solid var(--border-medium);
}
.article-table tbody + tbody {
- border-top: 2px solid #6c757d;
+ border-top: 2px solid var(--border-medium);
}
.article-table-sm th,
@@ -436,376 +520,983 @@ header svg {
padding: 0.3rem;
}
+#main_article {
+ margin-top: var(--spacing-xl);
+}
-.homepage-element-search-bar input[type="text"] {
- font-size: 1.5rem;
+#main_article img {
+ max-width: 100%;
}
-.homepage-element-search-bar .input-group-text {
- font-size: 1.5rem;
+#article blockquote {
+ background: var(--bg-blockquote);
+ border-left: 10px solid var(--brand-primary);
+ margin: 1.5em 10px;
+ padding: 0.5em 10px;
}
-#main_article {
- margin-top: 30px;
+#article iframe {
+ max-width: 100%;
+ height: auto;
+ aspect-ratio: 16/9;
+ margin: 1rem 0;
}
-.page-link,
-.page-link:hover,
-.page-link:focus {
- color: #4F637D;
+#reflist ul {
+ padding-left: 0;
}
-.page-item.active .page-link {
- background-color: #4F637D;
+#reflist li {
+ word-wrap: break-word;
+ list-style-type: none;
+ padding-bottom: var(--spacing-sm);
}
-.social-share-btn{
- border: 1px black solid;
+#reading-options{
+ display: flex;
+ gap: 1rem;
+ margin: 0;
+ padding: 9px;
+ 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;
+ background-color: var(--bg-body);
}
-#article blockquote {
- background: #F0F0F0;
- border-left: 10px solid #1C304A;
- margin: 1.5em 10px;
- padding: 0.5em 10px;
+.btn-opt {
+ border: 1px solid #1C304A;
+ background: #f1f1f1;
}
-#reflist ul{
- padding-left: 0;
+.dyslexia-friendly {
+ font-family: Verdana !important;
+ color: #4c4c4c;
+ background-color: #F5F5DC;
}
-#reflist li {
- word-wrap: break-word;
- list-style-type: none;
- padding-bottom: 8px;
+.dyslexia-friendly em,
+.dyslexia-friendly i {
+ background-color: #FAFAC8;
+ font-style: normal;
}
-.sticky-toc {
- position: sticky;
- max-height: 100vh;
- overflow-y: auto;
- top: 60px;
- z-index: 999;
+.dyslexia-friendly a {
+ font-family: inherit;
+ color: inherit;
+ text-decoration: underline;
}
-.card.no-image {
- min-height: 200px;
- background-color: #f8f9fa;
+/* ========================================================================
+ Thumbnail Styles
+ ======================================================================== */
+.thumbnail-container {
+ position: relative;
+ width: 80px;
+ height: 80px;
+ flex-shrink: 0;
}
-.card.no-image .card-img-overlay {
- position: relative;
- background-color: #f8f9fa;
- padding: 1.25rem;
+.article-thumbnail {
+ width: 100%;
+ height: 100%;
+ border-radius: 8px;
+ object-fit: cover;
+ display: block;
}
-.card.no-image .card-img-overlay.white-text {
- color: #212529;
+.article-thumbnail[src*="journal_cover_download"],
+.article-thumbnail[src*="article.png"] {
+ object-fit: contain;
}
-.card.no-image .card-img-overlay.white-text a {
- color: #4F637D;
+.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;
}
-.card.no-image .card-img-overlay.white-text a:hover,
-.card.no-image .card-img-overlay.white-text a:focus {
- color: #1C304A;
+.thumbnail-container.fallback-active .article-thumbnail {
+ display: none !important;
}
-#article iframe {
- max-width: 100%;
- height: auto;
- aspect-ratio: 16/9;
- margin: 1rem 0;
+.thumbnail-container.fallback-active .thumbnail-fallback {
+ display: flex !important;
}
-a {
- overflow-wrap: break-word;
+
+/* ========================================================================
+ News & Blog
+ ======================================================================== */
+.news-post {
+ margin-bottom: 4rem;
}
-.section-link {
- white-space: nowrap;
+.news-post-title {
+ margin-bottom: 0.25rem;
+ font-size: 2.5rem;
}
-.section-link:not(:first-of-type) {
- margin-left: 0.5rem;
+.news-post-meta {
+ margin-bottom: 1.25rem;
+ color: var(--text-muted);
}
-:root {
- --draw-attention: #FFEB3B;
+/* ========================================================================
+ Journal Styles
+ ======================================================================== */
+.journal-name {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+ line-height: 1.2;
}
-.draw-attention{
- background-color: var(--draw-attention);
- transition: background-color 2s ease-out;
+.journal-card-title {
+ margin-bottom: 0;
+ font-size: 13px;
}
-.back-links-list{
- list-style: none;
- padding-left: 0.2rem;
- margin: 0;
- display: inline;
- white-space: normal;
+.journal-div {
+ padding-bottom: var(--spacing-md);
}
-.back-links-list li {
- margin: 0;
- padding-left: 0.1rem;
- display: inline;
- white-space: normal;
+.journal-button-block {
+ margin-top: var(--spacing-xs);
+ margin-bottom: var(--spacing-xs);
}
-.back-links-list li:not(:last-child)::after {
- content: " ";
+/* ========================================================================
+ Issue & Content Sections
+ ======================================================================== */
+.homepage-element-wrapper:not(:first-child) {
+ margin-block: 2rem;
}
-.byline {
- font-size: 1rem;
- font-family: "Playfair Display", Georgia, "Times New Roman", serif;
- margin-bottom: .5rem;
- font-weight: 500;
- line-height: 1.2;
+.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;
}
-.card-title{
- font-size: 1.5rem;
+.section-title {
+ margin-bottom: 1.5rem;
+ padding-bottom: 0.5rem;
+ border-bottom: 2px solid var(--border-light);
+ color: var(--text-header);
+ font-weight: 600;
}
-.superscript-icon {
- vertical-align: super;
- font-size: 0.7em !important;
+.additional-issues {
+ margin-top: 1rem;
+ padding-top: 1rem;
+ border-top: 1px solid var(--border-light);
}
-.pad-icon {
- padding-left: 0.4rem;
- padding-right: 0.4rem;
+.also-part-of {
+ font-weight: 400;
+ font-size: 0.9rem;
+ margin-bottom: 0.25rem;
+ color: var(--text-muted);
}
-.dropdown-button{
- background: inherit;
- font-family: inherit;
- font-weight: inherit;
- border: 0;
+.additional-issue-link {
+ display: block;
+ margin-bottom: 0.25rem;
+ font-size: 0.9rem;
+ color: var(--text-muted);
}
-
-.background-button{
- border: 0;
- background: transparent;
+
+.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;
}
-.icon-recede{
- opacity: 70%;
+.sticky-top {
+ max-height: 100vh;
+ overflow-y: auto;
}
-.keywords-list {
- list-style: none;
- padding-left: 0;
- margin: 0;
- white-space: normal;
+/* ========================================================================
+ 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);
}
-.keywords-list li{
- display: inline-block;
+
+.site-footer a {
+ color: var(--text-link-alt);
}
-.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;
+.site-footer p:last-child {
+ margin-bottom: 0;
}
-.btn-background:not(:first-child) {
- margin-left: 0.5rem;
+footer svg,
+footer img,
+footer .img-fluid{
+ max-height: var(--footer-height);
+ max-width: 100%;
}
-input + .btn-background {
- height: 2.4375rem;
+header svg {
+ max-height: var(--header-height);
+ max-width: 100%;
}
-span + .btn-background {
- height: auto;
- min-height: 1.8rem;
+/* ========================================================================
+ Form Elements
+ ======================================================================== */
+.homepage-element-search-bar input[type="text"] {
+ font-size: 1.5rem;
}
-.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;
+.homepage-element-search-bar .input-group-text {
+ font-size: 1.5rem;
}
-.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;
+.input-group .form-control,
+.input-group .custom-select,
+.input-group .input-group-text {
+ margin: 0 !important;
+ border-radius: 0;
}
-#reading-options{
- display: flex;
- gap: 1rem;
+.input-group > .custom-select:last-child {
+ border-top-right-radius: .25rem;
+ border-bottom-right-radius: .25rem;
+}
+
+.input-group-prepend > .input-group-text {
+ border-top-left-radius: .25rem;
+ border-bottom-left-radius: .25rem;
+}
+
+.input-group {
+ align-items: stretch;
+}
+
+.input-group .custom-select,
+.input-group .input-group-text {
+ height: 2.5rem;
+ display: flex;
+ align-items: center;
+}
+
+.input-group{
+ display: flex;
+ flex-wrap: nowrap;
+}
+
+.input-group > input {
+ flex: 1;
+ min-width: 0;
+}
+
+.input-group > input.group-append{
+ flex-shrink: 0;
+ align-items: center;
+ display: flex;
+}
+
+.input-group .btn {
margin: 0;
- padding: 0;
- justify-content: flex-end;
- min-height: fit-content;
- box-sizing: border-box;
+ height: 100%;
+ border-radius: 0 .25rem .25rem 0;
+}
+
+.badge-secondary {
+ background-color: var(--brand-secondary);
+ color: #fff;
+}
+
+input + .btn-background {
+ height: 2.4375rem;
+}
+
+span + .btn-background {
+ height: auto;
+ min-height: 1.8rem;
+}
+
+/* ========================================================================
+ Utility Classes
+ ======================================================================== */
+.flex-auto {
+ flex: 0 0 auto;
+}
+
+.h-250 {
+ height: var(--card-image-height);
+}
+
+.border-top {
+ border-top: 1px solid var(--border-light);
+}
+
+.border-bottom {
+ border-bottom: 1px solid var(--border-light);
+}
+
+.box-shadow {
+ box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
+}
+
+.white-text {
+ color: var(--text-on-dark);
+}
+
+.white-text a {
+ color: var(--text-on-dark);
+}
+
+.white-text a:hover,
+.white-text a:focus {
+ color: var(--text-on-dark);
+}
+
+.responsive-img {
+ max-width: 100%;
+}
+
+.header-image {
+ max-height: var(--header-height);
+}
+
+.footer-img {
+ max-width: 100%;
+ height: auto;
+}
+
+.draw-attention {
+ background-color: var(--highlight-color);
+ transition: background-color 2s ease-out;
+}
+
+.sticky-toc {
+ position: sticky;
+ max-height: 100vh;
+ overflow-y: auto;
+ top: 60px;
+ z-index: 999;
+}
+
+.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;
+}
+
+.icon-recede{
+ opacity: var(--recede-opacity);
+}
+
+.superscript-icon {
+ vertical-align: super;
+ font-size: 0.7em !important;
+}
+
+.pad-icon {
+ padding-left: 0.4rem;
+ padding-right: 0.4rem;
+}
+
+
+/* ========================================================================
+ Lists
+ ======================================================================== */
+.no-bullet-list {
+ list-style-type: none;
+ padding-left: 0;
+ margin-left: 0;
+}
+
+.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;
+ display: inline;
+ white-space: normal;
+}
+
+.back-links-list li {
+ margin: 0;
+ padding-left: 0.1rem;
+ display: inline;
+ white-space: normal;
+}
+
+.back-links-list li:not(:last-child)::after {
+ content: " ";
+}
+
+.section-link {
+ white-space: nowrap;
+}
+
+.section-link:not(:first-of-type) {
+ margin-left: 0.5rem;
+}
+
+/* ========================================================================
+ Grid Utilities
+ ======================================================================== */
+.row-eq-height {
+ display: flex;
+}
+
+.row-smaller-gutters {
+ margin-left: -9px;
+ margin-right: -9px;
+}
+
+.row-smaller-gutters > div[class^="col"] {
+ padding-left: 9px;
+ padding-right: 9px;
+}
+
+/* ========================================================================
+ Pagination
+ ======================================================================== */
+.site-pagination {
+ margin-bottom: 4rem;
+}
+
+.site-pagination > .btn {
+ border-radius: var(--border-radius-lg);
+}
+
+.pagination {
+ display: flex;
+ padding-left: 0;
+ list-style: none;
+ gap: 4px;
+}
+
+.page-item {
+ margin: 0;
+}
+
+.page-link {
+ position: relative;
+ display: block;
+ padding: 0.5rem 0.75rem;
+ color: var(--pagination-color);
+ background-color: var(--pagination-bg);
+ border: 1px solid var(--pagination-border);
+ border-radius: var(--border-radius);
+ transition: var(--link-transition);
+ cursor: pointer;
+ text-decoration: none;
+}
+
+.page-link:hover,
+.page-link:focus {
+ color: var(--pagination-hover-color);
+ background-color: var(--pagination-hover-bg);
+ border-color: var(--border-medium);
+}
+
+.page-link:focus {
+ z-index: 2;
+ outline: 2px solid var(--focus-outline);
+ outline-offset: 2px;
+}
+
+.page-item.active .page-link {
+ color: var(--pagination-active-color);
+ background-color: var(--pagination-active-bg);
+ border-color: var(--pagination-active-border);
+ font-weight: 600;
+}
+
+.page-item.active .page-link:hover {
+ background-color: var(--pagination-active-bg);
+ border-color: var(--pagination-active-border);
+}
+
+.page-link[disabled],
+.page-link:disabled {
+ color: var(--pagination-disabled-color);
+ pointer-events: none;
+ background-color: transparent;
+ border-color: var(--pagination-border);
+ cursor: not-allowed;
+ opacity: 0.6;
+}
+
+/* ========================================================================
+ 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;
- z-index: 1000;
- width: fit-content;
- margin-left: auto;
+ top: 0.2rem;
+ right: 0.2rem;
+ z-index: 1050;
+ float: right;
+ margin-bottom: 0.2rem;
+ min-width: 24px;
+ min-height: 24px;
}
-.btn-opt {
- border: 1px solid #1C304A;
- background: #f1f1f1;
+/* ========================================================================
+ Accessibility & Skip Navigation
+ ======================================================================== */
+.skip-container {
+ text-align: left;
}
-.dyslexia-friendly {
- font-family: Verdana !important;
- color: #4c4c4c;
- background-color: #F5F5DC;
+.skip-container a {
+ position: absolute;
+ left: -10000px;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ color: var(--text-link);
}
-.dyslexia-friendly em,
-.dyslexia-friendly i {
- background-color: #FAFAC8;
- font-style: normal;
+.skip-container a:focus,
+.skip-container a:active {
+ position: static;
+ left: 0;
+ width: auto;
+ height: auto;
+ overflow: visible;
}
-.dyslexia-friendly a {
- font-family: inherit;
- color: inherit;
- text-decoration: underline;
+/* 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);
}
-/*
- * 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;
+p a, span a, li a {
+ margin: calc(-1 * var(--focus-ring-size));
+ padding: var(--focus-ring-size);
+ box-sizing: border-box;
}
-/* 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);
- }
+.dropdown-menu a,
+.dropdown-menu button,
+.dropdown-menu .dropdown-item {
+ margin: 0;
+}
- /* 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;
- }
+.article-block a,
+.site-header a,
+.site-footer a,
+.article-item a,
+.carousel-caption a,
+p a,
+li a {
+ display: inline-block;
+}
- /* Remove margin from elements that shouldn't have it */
- .dropdown-menu a,
- .dropdown-menu button,
- .dropdown-menu .dropdown-item {
- margin: 0;
- }
+.dropdown-item:focus {
+ white-space: nowrap;
+}
- /*individual workarounds */
- .article-block a,
- .site-header a ,
- .site-footer a,
- p a ,
- li a {
- display: inline-block;
- }
+.dropdown-menu {
+ padding: var(--focus-ring-size);
+}
- .dropdown-item:focus{
- white-space: nowrap;
- }
+.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;
+}
+
+.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;
+}
+
+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,
+.navbar-dark.navbar-custom .nav-link: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,
+.modal-sticky-close:focus-visible {
+ outline: 2px var(--focus-outline) solid;
+ outline-offset: 0;
+ box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-shadow);
+}
+
+.carousel-control-next:focus-visible,
+.carousel-control-prev:focus-visible{
+ outline: 2px var(--focus-outline) solid;
+ outline-offset: 0;
+ box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-shadow);
+ opacity: 1;
+}
+
+/* ========================================================================
+ Media Queries
+ ======================================================================== */
+@media (min-width: 768px) {
+ .display-4 {
+ font-size: 3rem;
+ }
+
+ .h-md-250 {
+ height: var(--card-image-height);
+ }
+}
+
+@media screen and (max-width: 990px) {
+ .article-title {
+ font-size: 1.1em !important;
+ }
+}
+
+@media screen and (max-width: 764px) {
+ .article-title {
+ font-size: 0.9em !important;
+ }
- /* Ensure dropdown containers have enough space */
- .dropdown-menu {
- padding: var(--focus-ring-size);
+ 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;
+ }
+}
+
+@media (min-width: 768px) {
+ .row {
+ display: flex;
+ flex-direction: row;
+ }
+ .journal-container {
+ order: 1;
+ }
+ .col-lg-4.col-md-2 {
+ order: 2;
}
-
-/* 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 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;
+}
+
+.issue-card {
+ 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);
+ 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;
+ height: 195px;
+}
+
+.issue-cover {
+ width: 40%;
+ overflow: hidden;
+}
+
+.issue-cover img,
+.issue-cover svg {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s ease;
+}
+
+.issue-content {
+ width: 60%;
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.issue-title {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: var(--text-header);
+ margin-bottom: 0.5rem;
+ line-height: 1.3;
+}
+
+.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;
+}
diff --git a/src/themes/clean/assets/css/evergreen.css b/src/themes/clean/assets/css/evergreen.css
new file mode 100644
index 0000000000..a12a25c8d3
--- /dev/null
+++ b/src/themes/clean/assets/css/evergreen.css
@@ -0,0 +1,98 @@
+:root {
+ /* Brand & Theme Colors */
+ --brand-primary: #047a59;
+ --brand-secondary: #4F637D;
+ --text-link-alt: #00688B;
+ --focus-shadow: #193146;
+ --color-success: #5cb85c;
+ /* Highlight color (shared across themes) */
+ --highlight-color: #FFEB3B;
+
+ /* Text Colors */
+ /* Must pass WCAG color contrast at --recede-opacity */
+ --text-primary: #212529;
+ --text-muted: #747474;
+ --text-on-dark: white;
+ --text-link: var(--body-text);
+ --text-black: #000;
+ --text-white: #fff;
+ --text-header: var(--text-black);
+ --body-text: #525252;
+ --nav-text: #636363;
+ --nav-text-active: var(--brand-primary);
+ --recede-opacity: 70%;
+
+ /* Link Decoration */
+ --link-decoration: underline;
+ --link-decoration-hover: underline;
+ --nav-link-decoration: none;
+ --nav-link-decoration-hover: underline;
+ --dropdown-item-decoration: none;
+ --dropdown-item-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;
+ --btn-outline-secondary: #6c757d;
+
+ /* 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;
+ --footer-height: 70px;
+ --card-image-height: 250px;
+ --carousel-min-height: 500px;
+ --icon-size: 16px;
+
+ /* Transitions */
+ --transition-standard: all 1s ease;
+
+ /* Pagination Colors - Light Mode */
+ --pagination-color: var(--body-text);
+ --pagination-bg: var(--bg-content);
+ --pagination-border: var(--border-light);
+ --pagination-hover-color: var(--brand-primary);
+ --pagination-hover-bg: var(--bg-card-alt);
+ --pagination-active-color: var(--btn-primary-text);
+ --pagination-active-bg: var(--btn-primary-bg);
+ --pagination-active-border: var(--btn-primary-border);
+ --pagination-disabled-color: var(--text-muted);
+}
\ No newline at end of file
diff --git a/src/themes/clean/assets/css/midnight.css b/src/themes/clean/assets/css/midnight.css
new file mode 100644
index 0000000000..4ad24d9508
--- /dev/null
+++ b/src/themes/clean/assets/css/midnight.css
@@ -0,0 +1,95 @@
+:root {
+ /* Brand & Theme Colors */
+ --brand-primary: #0a0f1a;
+ --brand-secondary: #7eb3ff;
+ --color-success: #5cb85c;
+ --text-link-alt: #6ba3ff;
+ --focus-shadow: #2563a8;
+ --highlight-color: #ffd93d;
+
+ /* Text Colors */
+ --text-primary: #e4e6eb;
+ --text-muted: #b0b3b8;
+ --text-on-dark: white;
+ --text-link: #9bb1d4;
+ --text-black: #e4e6eb;
+ --text-white: #0a0f1a;
+ --text-header: #ffffff;
+ --body-text: #e4e6eb;
+ --nav-text: #b0b3b8;
+ --nav-text-active: #4d9fff;
+ --recede-opacity: 70%;
+
+ /* Link Decoration */
+ --link-decoration: underline;
+ --link-decoration-hover: underline;
+ --nav-link-decoration: none;
+ --nav-link-decoration-hover: underline;
+ --link-hover-color: #4d9fff;
+ --link-transition: color 0.2s ease;
+ --dropdown-item-decoration: none;
+ --dropdown-item-decoration-hover: underline;
+
+ /* Background Colors */
+ --bg-body: #0a0f1a;
+ --bg-content: #151b2b;
+ --bg-footer: #0d1219;
+ --bg-card-alt: #1a2235;
+ --bg-blockquote: #1a2235;
+ --bg-overlay: rgba(10, 15, 26, 0.9);
+
+ /* UI State Colors */
+ --color-danger: #ff6b6b;
+
+ /* Border Colors */
+ --border-light: #2d3748;
+ --border-medium: #4a5568;
+ --border-gray-200: #2d3748;
+
+ /* Header & Navigation */
+ --header-bg: #0a0f1a;
+ --bg-nav: #0d1219;
+
+ /* Button Colors */
+ --btn-primary-bg: #4d9fff;
+ --btn-primary-border: #4d9fff;
+ --btn-primary-text: #0a0f1a;
+ --btn-outline-secondary: #a7acb1;
+
+ /* Focus & Accessibility */
+ --focus-outline: #4d9fff;
+ --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;
+ --footer-height: 70px;
+ --card-image-height: 250px;
+ --carousel-min-height: 500px;
+ --icon-size: 16px;
+
+ /* Transitions */
+ --transition-standard: all 1s ease;
+
+ /* Pagination Colors - Dark Mode */
+ --pagination-color: #a7acb1;
+ --pagination-bg: transparent;
+ --pagination-border: var(--border-light);
+ --pagination-hover-color: var(--text-on-dark);
+ --pagination-hover-bg: var(--bg-card-alt);
+ --pagination-active-color: var(--btn-primary-text);
+ --pagination-active-bg: var(--btn-primary-bg);
+ --pagination-active-border: var(--btn-primary-border);
+ --pagination-disabled-color: var(--text-muted);
+}
diff --git a/src/themes/clean/assets/css/ocean.css b/src/themes/clean/assets/css/ocean.css
new file mode 100644
index 0000000000..27ec91358d
--- /dev/null
+++ b/src/themes/clean/assets/css/ocean.css
@@ -0,0 +1,98 @@
+:root {
+ /* Brand & Theme Colors */
+ --brand-primary: #1e3a5f;
+ --brand-secondary: #5a7a9e;
+ --text-link-alt: #2563a8;
+ --focus-shadow: #2a4a6e;
+ --color-success: #5cb85c;
+ /* Highlight color (shared across themes) */
+ --highlight-color: #FFEB3B;
+
+ /* Text Colors */
+ /* Must pass WCAG color contrast at --recede-opacity */
+ --text-primary: #212529;
+ --text-muted: #747474;
+ --text-on-dark: white;
+ --text-link: var(--body-text);
+ --text-black: #000;
+ --text-white: #fff;
+ --text-header: var(--text-black);
+ --body-text: #525252;
+ --nav-text: #636363;
+ --nav-text-active: var(--brand-primary);
+ --recede-opacity: 70%;
+
+ /* Link Decoration */
+ --link-decoration: underline;
+ --link-decoration-hover: underline;
+ --nav-link-decoration: none;
+ --nav-link-decoration-hover: underline;
+ --dropdown-item-decoration: none;
+ --dropdown-item-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;
+ --btn-outline-secondary: #6c757d;
+
+ /* 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;
+ --footer-height: 70px;
+ --card-image-height: 250px;
+ --carousel-min-height: 500px;
+ --icon-size: 16px;
+
+ /* Transitions */
+ --transition-standard: all 1s ease;
+
+ /* Pagination Colors - Light Mode */
+ --pagination-color: var(--body-text);
+ --pagination-bg: var(--bg-content);
+ --pagination-border: var(--border-light);
+ --pagination-hover-color: var(--brand-primary);
+ --pagination-hover-bg: var(--bg-card-alt);
+ --pagination-active-color: var(--btn-primary-text);
+ --pagination-active-bg: var(--btn-primary-bg);
+ --pagination-active-border: var(--btn-primary-border);
+ --pagination-disabled-color: var(--text-muted);
+}
\ No newline at end of file
diff --git a/src/themes/clean/build_assets.py b/src/themes/clean/build_assets.py
index cf5948d3c4..3b7b2b493f 100644
--- a/src/themes/clean/build_assets.py
+++ b/src/themes/clean/build_assets.py
@@ -12,11 +12,8 @@ def copy_file(source, destination):
:param destination: The destination folder for the file
:return:
"""
-
destination_folder = os.path.join(settings.BASE_DIR, os.path.dirname(destination))
-
- if not os.path.exists(destination_folder):
- os.mkdir(destination_folder)
+ os.makedirs(destination_folder, exist_ok=True)
shutil.copy(
os.path.join(settings.BASE_DIR, source),
@@ -26,7 +23,7 @@ def copy_file(source, destination):
def create_paths():
base_path = os.path.join(settings.BASE_DIR, "static", "clean")
- folders = ["css"]
+ folders = ["css", "js"]
for folder in folders:
os.makedirs(os.path.join(base_path, folder), exist_ok=True)
@@ -38,35 +35,42 @@ def process_journals():
for journal in journals:
for file in journal.scss_files:
if file.endswith("clean_override.css"):
- print(
- "Copying material override file for {name}".format(
- name=journal.name
- )
- )
- override_css_dir = os.path.join(
- settings.BASE_DIR, "static", "clean", "css"
- )
+ print(f"Copying clean override file for {journal.name}")
+
override_css_file = os.path.join(
- override_css_dir, "journal{0}_override.css".format(str(journal.id))
+ settings.BASE_DIR,
+ "static",
+ "clean",
+ "css",
+ f"journal{journal.id}_override.css",
)
- # test if the journal CSS directory exists and create it if not
- os.makedirs(override_css_dir, exist_ok=True)
-
- # copy file to static
copy_file(file, override_css_file)
+def copy_theme_files():
+ """Copy theme CSS and JS files to static directory."""
+ theme_files = [
+ ("css", "clean.css"),
+ ("css", "evergreen.css"),
+ ("css", "ocean.css"),
+ ("css", "cardinal.css"),
+ ("css", "midnight.css"),
+ ("js", "tooltip-init.js"),
+ ]
+
+ for file_type, filename in theme_files:
+ source = os.path.join("themes", "clean", "assets", file_type, filename)
+ destination = os.path.join("static", "clean", file_type, filename)
+ copy_file(source, destination)
+
+
def build():
print("Creating folders")
create_paths()
- print("Copying CSS")
- copy_file(
- "themes/clean/assets/css/clean.css",
- "static/clean/css/clean.css",
- )
- copy_file(
- "themes/clean/assets/js/tooltip-init.js",
- "static/clean/js/tooltip-init.js",
- )
+
+ print("Copying theme files")
+ copy_theme_files()
+
+ print("Processing journal overrides")
process_journals()
diff --git a/src/themes/clean/templates/cms/page.html b/src/themes/clean/templates/cms/page.html
index a4b3b04be7..3254de5ffc 100644
--- a/src/themes/clean/templates/cms/page.html
+++ b/src/themes/clean/templates/cms/page.html
@@ -15,12 +15,16 @@ {{ page.display_name }}
{% if page.display_toc %}
-
-
-
{% trans "Table of Contents" %}
-
-
+
+
+
+
+
{% trans "Table of Contents" %}
+
+
+
+
-
-
- 
{% endif %}
- {% elif request.press and not request.journal %}
- 
{% trans issue_type.plural_name %}
>