From c77a3511262a49355389b53137e4d0b8117fac8e Mon Sep 17 00:00:00 2001 From: atteggiani Date: Fri, 11 Aug 2023 19:04:12 +1000 Subject: [PATCH 01/19] - Coloured the buttons background\n- Added 'Hosted by ACCESS-NRI' at the bottom of website title --- docs/css/access-nri.css | 135 +++++++++++++++++++++------------ overrides/partials/header.html | 56 ++++++-------- 2 files changed, 112 insertions(+), 79 deletions(-) diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css index fa06846b7..14f738156 100644 --- a/docs/css/access-nri.css +++ b/docs/css/access-nri.css @@ -182,23 +182,6 @@ h3 { } -/* =============================================================== - Keep ACCESS-Hive title as it is, without changing when scrolling -*/ -.md-header__title--active .md-header__topic { - opacity: 1; - transform: none; - z-index: 0; - pointer-events: auto; - transition: none; -} - -.md-header__title--active .md-header__topic+.md-header__topic { - opacity: 0; - z-index: -1; -} - - /* =============================================================== Homepage */ @@ -335,15 +318,6 @@ h1.homepage { margin-top: 1em; } -/* =============================================================== - Img, main logo -*/ -.md-header__button.md-logo :-webkit-any(img,svg) { - fill: currentcolor; - display: block; - height: 2.5rem; - width: auto; -} /* =============================================================== Main body content @@ -421,6 +395,29 @@ h1.homepage { /* Main title */ .md-header__title { margin-left: 0.3em !important; + flex-shrink: 1; +} + +/* Hosted by ACCESS-NRI */ +.hostedby { + position: relative; + font-size: 0.55em; + color: var(--tab-text-light); + color: var(--nri-orange); + right: 8em; + top: 1.4em; + opacity: 0.9; +} +.hostedby:hover { + opacity: 1; +} + +/* Img, main logo */ +.md-header__button.md-logo :-webkit-any(img,svg) { + fill: currentcolor; + display: block; + height: 2.5rem; + width: auto; } /* Banner */ @@ -467,44 +464,82 @@ h1.homepage { /* =============================================================== Header Buttons CSS - "Hive Forum", "ACCESS-NRI", "Contribute" */ -.flex-container { +.btn-container { + flex-grow: 1; + flex-shrink: 1; + max-width: 20rem; display: flex; - justify-content: center; - align-items: center; - align-content: center; - gap: 0.6em; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: stretch; + gap: 1em; + margin: 0 .5rem; } .header-btn { + flex-basis: 33.333%; + flex-grow: 1; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: center; border-radius: 0.3em; - border: 0.1em solid; - padding: 0.5em 1em; - font-weight: 500; - margin: 0 0.5em 0 0.5em; - height: 1.7rem; + border: 1px solid; + padding: 0 0.4em; + height: 1.8rem; + color: var(--md-primary-fg-color); } .header-btn:hover { - background-color: var(--md-default-fg-color--lightest); - transition-duration: 0.4s; + opacity: 0.75; + transition-duration: 0.3s; transition-property: all; } - -.large-text { - font-size: 1.4em; -} - -.nri-orange-border { +/* Hive forum btn */ +.header-btn:first-child { + background-color: var(--nri-orange); border-color: var(--nri-orange); } - -.nri-blue-border { +/* ACCESS-NRI btn */ +.header-btn:nth-child(2) { + background-color: var(--nri-blue); border-color: var(--nri-blue); } +/* Contribute btn */ +.header-btn:last-child { + background-color: var(--md-primary-bg-color); + border-color: var(--md-primary-bg-color); +} +/* btn logo wrapper */ +.header-btn >:first-child { + flex-basis: 25%; + display: flex; + flex-direction: row; + justify-content: center; + align-self: center; +} -.icon-image { - height: 1.3em; +/* btn logo */ +.header-btn >:first-child > * { + font-size: 1.8em; +} + +/* btn logo */ +.header-btn:nth-child(-n + 2) >:first-child > * { + height: 1em; width: auto; + background-color: var(--md-primary-fg-color); + border-radius: 50%; + padding: 0.5px; +} + + +/* btn text */ +.header-btn >:last-child { + flex-basis: 75%; + text-align: center; } /* =============================================================== @@ -882,3 +917,7 @@ pre:has(code):hover > button { .img-contain { object-fit: contain; } + +.large-text { + font-size: 1.4em; +} \ No newline at end of file diff --git a/overrides/partials/header.html b/overrides/partials/header.html index 3cf967178..260e7cb40 100644 --- a/overrides/partials/header.html +++ b/overrides/partials/header.html @@ -34,23 +34,9 @@ -
-
-
- - {{ config.site_name }} - -
-
- - {% if page.meta and page.meta.title %} - {{ page.meta.title }} - {% else %} - {{ page.title }} - {% endif %} - -
-
+
+ {{ config.site_name }} + Hosted by ACCESS-NRI
{% if config.theme.palette %} {% if not config.theme.palette is mapping %} @@ -96,24 +82,32 @@ {% include "partials/search.html" %} {% endif %} - -
- - Hive Forum -
+
+ +
+ +
+
+ Hive Forum +
- -
- - ACCESS-NRI -
+ +
+ +
+
+ ACCESS-NRI +
- -
- - Contribute + +
+
+
+
+ Contribute
+
{% if config.repo_url %}
{% include "partials/source.html" %} From da025727eb6279414bf44b8e480f7c95a94e74da Mon Sep 17 00:00:00 2001 From: atteggiani Date: Sun, 13 Aug 2023 03:26:46 +1000 Subject: [PATCH 02/19] Added responsiveness to banner --- docs/css/access-nri.css | 59 ++++++++++++++++++++++++++++++----------- 1 file changed, 43 insertions(+), 16 deletions(-) diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css index 14f738156..ce87aeeb6 100644 --- a/docs/css/access-nri.css +++ b/docs/css/access-nri.css @@ -396,20 +396,23 @@ h1.homepage { .md-header__title { margin-left: 0.3em !important; flex-shrink: 1; + overflow: hidden; + position: relative; } /* Hosted by ACCESS-NRI */ .hostedby { - position: relative; - font-size: 0.55em; - color: var(--tab-text-light); + position: absolute; + font-size: 0.5em; + font-weight: 500; color: var(--nri-orange); - right: 8em; - top: 1.4em; - opacity: 0.9; + line-height: 1em; + white-space: nowrap; + bottom: 6px; + left: 30px; } .hostedby:hover { - opacity: 1; + opacity: 0.85; } /* Img, main logo */ @@ -419,7 +422,6 @@ h1.homepage { height: 2.5rem; width: auto; } - /* Banner */ .md-header__inner { padding: 0.5em 0; @@ -471,7 +473,7 @@ h1.homepage { display: flex; flex-direction: row; flex-wrap: nowrap; - justify-content: space-between; + justify-content: flex-start; align-items: stretch; gap: 1em; margin: 0 .5rem; @@ -487,8 +489,8 @@ h1.homepage { align-items: center; border-radius: 0.3em; border: 1px solid; - padding: 0 0.4em; - height: 1.8rem; + padding: 0 0.3em; + height: 1.5rem; color: var(--md-primary-fg-color); } @@ -523,19 +525,18 @@ h1.homepage { /* btn logo */ .header-btn >:first-child > * { - font-size: 1.8em; + font-size: 1.5em; } /* btn logo */ .header-btn:nth-child(-n + 2) >:first-child > * { height: 1em; width: auto; + border-radius: 100%; background-color: var(--md-primary-fg-color); - border-radius: 50%; - padding: 0.5px; + padding: 0.04em; } - /* btn text */ .header-btn >:last-child { flex-basis: 75%; @@ -857,7 +858,6 @@ pre:has(code):hover > button { transform: rotate(-45deg); } - /* =============================================================== Miscellaneous */ @@ -920,4 +920,31 @@ pre:has(code):hover > button { .large-text { font-size: 1.4em; +} + + +/* =============================================================== + Media queries for website responsiveness +*/ + +/* Banner content */ +@media (width <= 770px) { + /* Forum / ACCESS-NRI / Contribute Buttons */ + .header-btn { + flex-basis: 0; + flex-grow: 0; + aspect-ratio: 1; + justify-self: start; + } + /* Hide Button text */ + .header-btn >:last-child { + display: none; + } +} + +@media (width <= 420px) { +/* Hosted by ACCESS-NRI */ + .hostedby { + left: 0; + } } \ No newline at end of file From d5fee2cb69066e382200dd0e6766c1d146d34494 Mon Sep 17 00:00:00 2001 From: atteggiani Date: Sun, 13 Aug 2023 04:10:33 +1000 Subject: [PATCH 03/19] Fixed banner responsiveness --- docs/css/access-nri.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css index ce87aeeb6..d2d221d97 100644 --- a/docs/css/access-nri.css +++ b/docs/css/access-nri.css @@ -473,7 +473,7 @@ h1.homepage { display: flex; flex-direction: row; flex-wrap: nowrap; - justify-content: flex-start; + justify-content: flex-end; align-items: stretch; gap: 1em; margin: 0 .5rem; @@ -710,9 +710,8 @@ ul:not([class^='md-']) li ul li ul li { pre:has(code) { display: flow-root !important; text-align: left !important; - padding: 0 0 !important; - margin-top: 0.5em !important; - margin-bottom: 0.5em !important; + padding: 0 !important; + margin: 0.5em 0 !important; } pre>code { @@ -929,6 +928,10 @@ pre:has(code):hover > button { /* Banner content */ @media (width <= 770px) { + /* Buttons container */ + .btn-container { + flex-grow: 0; + } /* Forum / ACCESS-NRI / Contribute Buttons */ .header-btn { flex-basis: 0; From e01a812d3f32e2640619ca1dfd6fce6ebaf7a6c6 Mon Sep 17 00:00:00 2001 From: atteggiani Date: Tue, 15 Aug 2023 09:58:14 +1000 Subject: [PATCH 04/19] Added responsive root font-type --- docs/css/access-nri.css | 74 +++++++++++++++++------- docs/models/configurations/access-am.md | 2 +- docs/models/configurations/access-cm.md | 2 +- docs/models/configurations/access-esm.md | 2 +- docs/models/configurations/access-om.md | 2 +- overrides/partials/header.html | 2 +- 6 files changed, 58 insertions(+), 26 deletions(-) diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css index d2d221d97..41635fed2 100644 --- a/docs/css/access-nri.css +++ b/docs/css/access-nri.css @@ -165,6 +165,24 @@ --note-bg: rgba(var(--nri-orange-color),.05); /* Note background */ } +/* Set rem based on viewport width */ +@media (width > 2000px) { + :root { + font-size: 24px; + } +} +@media (500px < width <= 2000px) { + :root { + font-size: calc(14px + 10 * ((100vw - 500px) / (2000 - 500))); + } +} +@media (width <= 500px) { + :root { + font-size: 14px; + } +} + + /* =============================================================== Main headings */ @@ -260,7 +278,7 @@ h1.homepage { height: 10em !important; width: 100%; object-fit: cover; - border-radius: 8px; + border-radius: 0.6em; } .card-container.homepage-navigation { @@ -394,7 +412,7 @@ h1.homepage { */ /* Main title */ .md-header__title { - margin-left: 0.3em !important; + margin: 0 0.2em 0 0.3em !important; flex-shrink: 1; overflow: hidden; position: relative; @@ -404,12 +422,12 @@ h1.homepage { .hostedby { position: absolute; font-size: 0.5em; - font-weight: 500; + font-weight: 400; color: var(--nri-orange); line-height: 1em; white-space: nowrap; - bottom: 6px; - left: 30px; + bottom: 0.3rem; + left: 1.5rem; } .hostedby:hover { opacity: 0.85; @@ -572,7 +590,7 @@ h1.homepage { justify-content: center; align-items: center; border: 1.3px solid var(--card-borders); - border-radius: 15px; + border-radius: 0.6em; box-shadow: 6px 6px 10px var(--card-shadows); overflow: hidden; } @@ -599,7 +617,7 @@ h1.homepage { align-items: center; padding: 0.6em 0.6em 0.3em 0.6em; overflow: hidden; - border-radius: 8px; + border-radius: 0.6em; } .vertical-card-image-container > img { @@ -634,7 +652,7 @@ h1.homepage { align-items: center; padding: 0.6em 0 0.6em 0.6em; overflow: hidden; - border-radius: 8px; + border-radius: 0.6em; } .horizontal-card-image-container > img { @@ -655,7 +673,7 @@ h1.homepage { .horizontal-card-image-container > img, .vertical-card-image-container > img { - border-radius: 8px; + border-radius: 0.6em; } a.component-card { @@ -811,7 +829,7 @@ pre:has(code):hover > button { border-bottom: solid 2px currentColor; transition: border-bottom .2s; background-color: var(--md-accent-fg-color--transparent); - border-radius: 8px 8px 0 0; + border-radius: 0.6em 0.6em 0 0; } /* Style the tab content */ @@ -865,7 +883,7 @@ pre:has(code):hover > button { .example-img { width: 100% !important; height: auto !important; - border-radius: 8px; + border-radius: 0.6em; } /* Justified text */ @@ -889,7 +907,7 @@ pre:has(code):hover > button { /* With borders */ .with-border { - border-radius: 7px; + border-radius: 0.6em; border: 1.3px solid var(--card-borders); box-sizing: border-box; } @@ -926,28 +944,42 @@ pre:has(code):hover > button { Media queries for website responsiveness */ -/* Banner content */ -@media (width <= 770px) { - /* Buttons container */ +@media (width <= 500px) { .btn-container { flex-grow: 0; } - /* Forum / ACCESS-NRI / Contribute Buttons */ .header-btn { flex-basis: 0; flex-grow: 0; aspect-ratio: 1; justify-self: start; } - /* Hide Button text */ .header-btn >:last-child { display: none; } -} -@media (width <= 420px) { -/* Hosted by ACCESS-NRI */ .hostedby { left: 0; } -} \ No newline at end of file + + .introduction > :first-child { + font-size: 4vw; + } + .introduction > :first-child > :first-child { + font-size: 6vw; + } +} + +/*Alternative implementation*/ + /* .header-btn { + background-color: transparent !important; + color: var(--md-primary-bg-color); +} +.hostedby { + color: var(--tab-text-light); + left: 8px; +} +.hostedby:hover { + opacity: 1; + filter: brightness(130%); +} */ \ No newline at end of file diff --git a/docs/models/configurations/access-am.md b/docs/models/configurations/access-am.md index 474d90008..ea864ed01 100644 --- a/docs/models/configurations/access-am.md +++ b/docs/models/configurations/access-am.md @@ -2,7 +2,7 @@ -ACCESS AM model +ACCESS AM model The ACCESS Atmosphere Model (ACCESS-AM) is a global model with atmosphere and land surface components. It is often used in Atmospheric Model Intercomparison Project (AMIP) experiments where it is driven by historically observed sea surface temperature and sea ice data. diff --git a/docs/models/configurations/access-cm.md b/docs/models/configurations/access-cm.md index 1a381a77f..6e45ab47d 100644 --- a/docs/models/configurations/access-cm.md +++ b/docs/models/configurations/access-cm.md @@ -1,6 +1,6 @@ # ACCESS-CM -ACCESS CM model +ACCESS CM model The ACCESS Coupled Model (ACCESS-CM) is a fully-coupled global climate model that includes atmosphere, land, ocean and sea ice components, and produces physical climate simulations. Coupled models run by the Australian climate community are contributed to the Coupled Model Intercomparison Project (CMIP). diff --git a/docs/models/configurations/access-esm.md b/docs/models/configurations/access-esm.md index cd48ef109..c3a5a8aa7 100644 --- a/docs/models/configurations/access-esm.md +++ b/docs/models/configurations/access-esm.md @@ -2,7 +2,7 @@ -ACCESS ESM model +ACCESS ESM model The ACCESS Earth System Model (ACCESS-ESM) is a fully-coupled global climate model that also includes representations of land and ocean biogeochemisty. This means it can simulate both the physical climate and global biogeochemical cycles (the carbon cycle in particular). diff --git a/docs/models/configurations/access-om.md b/docs/models/configurations/access-om.md index 7a8aef3f2..31178c3c4 100644 --- a/docs/models/configurations/access-om.md +++ b/docs/models/configurations/access-om.md @@ -4,7 +4,7 @@ -ACCESS OM model +ACCESS OM model The ACCESS Ocean Model (ACCESS-OM) is a global coupled ocean and sea ice configuration with ocean and sea ice models connected via a coupler. The atmospheric fields that drive the model are provided by a data product, usually derived from reanalysis. diff --git a/overrides/partials/header.html b/overrides/partials/header.html index 260e7cb40..8e7f6320e 100644 --- a/overrides/partials/header.html +++ b/overrides/partials/header.html @@ -36,7 +36,7 @@
{{ config.site_name }} - Hosted by ACCESS-NRI + Hosted by ACCESS-NRI
{% if config.theme.palette %} {% if not config.theme.palette is mapping %} From 15e5fe349da4fb36374129fa55739733d51d2130 Mon Sep 17 00:00:00 2001 From: atteggiani Date: Fri, 18 Aug 2023 14:17:39 +1000 Subject: [PATCH 05/19] Responsiveness of homepage buttons after introduction --- docs/css/access-nri.css | 473 ++++++++++++++++++--------------- docs/index.md | 14 +- docs/js/miscellaneous.js | 10 + overrides/partials/header.html | 6 +- 4 files changed, 275 insertions(+), 228 deletions(-) diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css index 0d3abba79..c0b719c1e 100644 --- a/docs/css/access-nri.css +++ b/docs/css/access-nri.css @@ -5,11 +5,15 @@ /* Import medium-weight Roboto font for tabs */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'); +:root { + --border-width: 0.1rem; +} + [data-md-color-scheme="custom-dark"] { - --nri-green-color: 166, 206, 57; - --nri-orange-color: 250, 166, 25; - --nri-dark-blue-color: 17, 93, 151; - --nri-blue-color: 6, 174, 239; + --nri-green-color: 165, 205, 58; + --nri-orange-color: 249, 166, 28; + --nri-dark-blue-color: 0, 91, 148; + --nri-blue-color: 1, 173, 238; --nri-light-blue-color: 142, 215, 248; --nri-green: rgb(var(--nri-green-color)); /* rgb(166, 206, 57) */ --nri-orange: rgb(var(--nri-orange-color)); /* rgb(250, 166, 25) */ @@ -61,7 +65,7 @@ --md-typeset-kbd-accent-color: rgb(126, 126, 126, .16); /* keyboard key inner border ( tag) */ --md-typeset-kbd-border-color: rgb(30, 30, 30); /* text as keyboard outer border ( tag) */ --navigation-borders: rgba(var(--nri-orange-color),.2); /* Left border on the toc and navigation*/ - --card-borders: rgba(var(--nri-orange-color),.8); /* Borders of cards */ + --card-borders: rgba(var(--nri-green-color),.75); /* Borders of cards */ --md-typeset-table-color: var(--card-borders); /* table borders ( tag) */ --md-admonition-fg-color: var(--md-typeset-color); /* Main text warnings */ --md-admonition-bg-color: transparent; /* Background warnings */ @@ -81,15 +85,15 @@ --animated-terminal-buttons-hover: var(--nri-blue); --animated-terminal-text: rgb(235, 235, 235); --animated-terminal-background: var(--md-primary-fg-color); - --note: var(--card-borders); /* Note border and icon */ + --note: var(--nri-orange); /* Note border and icon */ --note-bg: rgba(var(--nri-orange-color),.05); /* Note background */ } [data-md-color-scheme="custom-light"] { - --nri-green-color: 166, 206, 57; - --nri-orange-color: 250, 166, 25; - --nri-dark-blue-color: 17, 93, 151; - --nri-blue-color: 6, 174, 239; + --nri-green-color: 165, 205, 58; + --nri-orange-color: 249, 166, 28; + --nri-dark-blue-color: 0, 91, 148; + --nri-blue-color: 1, 173, 238; --nri-light-blue-color: 142, 215, 248; --nri-green: rgb(var(--nri-green-color)); /* rgb(166, 206, 57) */ --nri-orange: rgb(var(--nri-orange-color)); /* rgb(250, 166, 25) */ @@ -141,7 +145,7 @@ --md-typeset-kbd-accent-color: rgb(255, 255, 255, .78); /* keyboard key inner border ( tag) */ --md-typeset-kbd-border-color: rgb(212, 212, 212); /* text as keyboard outer border ( tag) */ --navigation-borders: rgba(var(--nri-orange-color),.2); /* Left border on the toc and navigation*/ - --card-borders: rgba(var(--nri-orange-color),.8); /* Borders of cards */ + --card-borders: rgba(var(--nri-green-color),.755); /* Borders of cards */ --md-typeset-table-color: var(--card-borders); /* table borders (
tag) */ --md-admonition-fg-color: var(--md-typeset-color); /* Main text warnings */ --md-admonition-bg-color: transparent; /* Background warnings */ @@ -161,7 +165,7 @@ --animated-terminal-buttons-hover: var(--nri-blue); --animated-terminal-text: rgb(235, 235, 235); --animated-terminal-background: var(--md-primary-fg-color); - --note: var(--card-borders); /* Note border and icon */ + --note: var(--nri-orange); /* Note border and icon */ --note-bg: rgba(var(--nri-orange-color),.05); /* Note background */ } @@ -182,11 +186,136 @@ } } + /* =============================================================== - Main body grid + Cards for ACCESS-Hive navigation, model components, model tabs, MED stuff */ +/* Flexbox container for cards*/ +.card-container { + margin: 1em 0; + display: flex; + justify-content: left; + align-items: center; + align-content: center; + flex-wrap: wrap; + gap: 0.8em; +} + +/* Single card */ +.card-container > * { + display: flex; + justify-content: center; + align-items: center; + border: var(--border-width) solid var(--card-borders); + border-radius: 0.6em; + box-shadow: 6px 6px 10px var(--card-shadows); + overflow: hidden; +} + +/* Single card hover */ +.card-container > *:hover { + border-color: var(--md-accent-fg-color); + box-shadow: 10px 10px 10px var(--card-shadows-hover); + transition-property: all; + transition-duration: 0.4s; +} + +.vertical-card { + flex-direction: column; + max-width: 30%; + min-height: 0; +} + +.vertical-card-image-container { + flex-basis: 80%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 0.6em 0.6em 0.3em 0.6em; + overflow: hidden; + border-radius: 0.6em; +} + +.vertical-card-image-container > img { + width: 100%; + height: 100%; +} + +.vertical-card-text-container { + color: var(--md-default-fg-color); + flex-basis: 20%; + display: flex; + width: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + margin: 0.3em 0.6em 0.6em 0.6em; +} + +.horizontal-card { + flex-direction: row; + width: 100%; + height: 10em; + align-items: stretch; +} + +.horizontal-card-image-container { + flex-basis: 35%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 0.6em 0 0.6em 0.6em; + overflow: hidden; + border-radius: 0.6em; +} + +.horizontal-card-image-container > img { + height: 100%; + width: 100%; +} + +.horizontal-card-text-container { + color: var(--md-default-fg-color); + height: 100%; + flex-basis: 65%; + display: flex; + flex-direction: column; + padding: 0 1em; + justify-content: space-around; + align-items: center; +} + +.horizontal-card-image-container > img, +.vertical-card-image-container > img { + border-radius: 0.6em; +} + +a.component-card { + border: unset; + box-shadow: unset; + max-width: 22%; + min-height: 0; +} + +.component-card:hover { + background-color: var(--darker-background-hover); + box-shadow: unset; +} + + +/* =============================================================== + Main body +*/ +/* Grid */ .md-grid { - max-width: 70rem; + max-width: 68rem; +} +/* Article */ +.md-content__inner { + margin: 0 1.5rem 1rem; } @@ -222,59 +351,58 @@ h1.homepage { display: flex; flex-direction: row; justify-content: center; - align-items: center; - margin-bottom: 1rem; + align-items: stretch; + margin-bottom: 0.8rem; width: 100%; text-align: center; } - /* Text */ .introduction > :first-child { - flex-basis: 85%; - font-size: 1.5rem; + flex-basis: 80%; + font-size: 1.3rem; } .introduction > :first-child > :first-child { font-weight: 600; - font-size: 2rem; + font-size: 1.8rem; } - /* Logo */ .introduction > :last-child { - flex-basis: 15%; - align-self: center; + flex-basis: 20%; + display: flex; + align-items: center; } - .introduction > :last-child > img { max-height: 5rem; - padding: 0; + margin-left: 0.5rem; } /* Buttons After introductory paragraph */ -.card-container.homepage-buttons { +.homepage-buttons { justify-content: center; align-items: stretch; - gap: 1.2em + gap: 2.8rem; + flex-wrap: nowrap; } -.card-container.homepage-buttons > * { +.homepage-buttons > * { width: 100%; margin-bottom: 1.5em; } - -.card-container.homepage-buttons > .vertical-card > :first-child { +/* Upper Text */ +.homepage-buttons > .vertical-card > :first-child { color: var(--md-default-fg-color); - flex-basis: 35%; - margin: 1% 0; + flex-basis: 40%; + margin-top: 1%; display: flex; justify-content: center; flex-direction: column; } - -.card-container.homepage-buttons > .vertical-card > :last-child { - flex-basis: 65%; - margin: 3% 0; +/* Lower text */ +.homepage-buttons > .vertical-card > :last-child { + flex-basis: 60%; + margin: 1% 0; display: flex; justify-content: center; flex-direction: column; @@ -288,12 +416,12 @@ h1.homepage { border-radius: 0.6em; } -.card-container.homepage-navigation { +.homepage-navigation { justify-content: center; gap: 1.2em; } -.card-container.homepage-navigation > * { +.homepage-navigation > * { max-width: 22%; } @@ -425,22 +553,13 @@ h1.homepage { position: relative; } -/* Hosted by ACCESS-NRI */ -.hostedby { - position: absolute; - font-size: 0.5em; - font-weight: 400; - color: var(--nri-orange); - line-height: 1em; - white-space: nowrap; - bottom: 0.3rem; - left: 1.5rem; +/* Main logo */ +.md-header__button.md-logo { + cursor:default } -.hostedby:hover { - opacity: 0.85; +.md-header__button:hover { + opacity: 1; } - -/* Img, main logo */ .md-header__button.md-logo :-webkit-any(img,svg) { fill: currentcolor; display: block; @@ -450,6 +569,8 @@ h1.homepage { /* Banner */ .md-header__inner { padding: 0.5em 0; + min-height: 3.5rem; + margin: 0 0.8rem; } /* Tab section */ @@ -500,7 +621,7 @@ h1.homepage { flex-wrap: nowrap; justify-content: flex-end; align-items: stretch; - gap: 1em; + gap: 1rem; margin: 0 .5rem; } @@ -515,30 +636,35 @@ h1.homepage { border-radius: 0.3em; border: 1px solid; padding: 0 0.3em; - height: 1.5rem; - color: var(--md-primary-fg-color); + height: 1.6rem; + color: var(--md-primary-bg-color); } - .header-btn:hover { - opacity: 0.75; transition-duration: 0.3s; transition-property: all; } /* Hive forum btn */ .header-btn:first-child { - background-color: var(--nri-orange); border-color: var(--nri-orange); } +.header-btn:first-child:hover { + background-color: rgba(var(--nri-orange-color),0.14); +} /* ACCESS-NRI btn */ .header-btn:nth-child(2) { - background-color: var(--nri-blue); border-color: var(--nri-blue); } +.header-btn:nth-child(2):hover { + background-color: rgba(var(--nri-blue-color),0.14); +} /* Contribute btn */ .header-btn:last-child { - background-color: var(--md-primary-bg-color); border-color: var(--md-primary-bg-color); } +.header-btn:last-child:hover { + background-color: rgba(var(--primary-bg-color),0.14); +} + /* btn logo wrapper */ .header-btn >:first-child { flex-basis: 25%; @@ -557,9 +683,6 @@ h1.homepage { .header-btn:nth-child(-n + 2) >:first-child > * { height: 1em; width: auto; - border-radius: 100%; - background-color: var(--md-primary-fg-color); - padding: 0.04em; } /* btn text */ @@ -577,136 +700,6 @@ h1.homepage { border-radius: 0.6em; } -/* =============================================================== - Cards for ACCESS-Hive navigation, model components, model tabs, MED stuff -*/ -/* Flexbox container for cards*/ -.card-container { - margin: 1em 0; - display: flex; - justify-content: left; - align-items: center; - align-content: center; - flex-wrap: wrap; - gap: 0.8em; -} - -/* Single card */ -.card-container > * { - display: flex; - justify-content: center; - align-items: center; - border: 1.3px solid var(--card-borders); - border-radius: 0.6em; - box-shadow: 6px 6px 10px var(--card-shadows); - overflow: hidden; -} - -/* Single card hover */ -.card-container > *:hover { - border-color: var(--md-accent-fg-color); - box-shadow: 10px 10px 10px var(--card-shadows-hover); - transition-property: all; - transition-duration: 0.4s; -} - -.vertical-card { - flex-direction: column; - max-width: 30%; - min-height: 0; -} - -.vertical-card-image-container { - flex-basis: 80%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - padding: 0.6em 0.6em 0.3em 0.6em; - overflow: hidden; - border-radius: 0.6em; -} - -.vertical-card-image-container > img { - width: 100%; - height: 100%; -} - -.vertical-card-text-container { - color: var(--md-default-fg-color); - flex-basis: 20%; - display: flex; - width: 100%; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - margin: 0.3em 0.6em 0.6em 0.6em; -} - -.horizontal-card { - flex-direction: row; - width: 100%; - height: 10em; - align-items: stretch; -} - -.horizontal-card-image-container { - flex-basis: 35%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - padding: 0.6em 0 0.6em 0.6em; - overflow: hidden; - border-radius: 0.6em; -} - -.horizontal-card-image-container > img { - height: 100%; - width: 100%; -} - -.horizontal-card-text-container { - color: var(--md-default-fg-color); - height: 100%; - flex-basis: 65%; - display: flex; - flex-direction: column; - padding: 0 1em; - justify-content: space-around; - align-items: center; -} - -.horizontal-card-image-container > img, -.vertical-card-image-container > img { - border-radius: 0.6em; -} - -a.component-card { - border: unset; - box-shadow: unset; - max-width: 22%; - min-height: 0; -} - -.component-card:hover { - background-color: var(--darker-background-hover); - box-shadow: unset; -} - - -.aspect-ratio1to1 { - aspect-ratio: 1/1; -} - -.aspect-ratio2to1 { - aspect-ratio: 2/1; -} - -.aspect-ratio3to1 { - aspect-ratio: 3/1; -} /* =============================================================== References */ @@ -886,6 +879,15 @@ pre:has(code):hover > button { Miscellaneous */ +/* Aspect ratios */ +.aspect-ratio1to1 { + aspect-ratio: 1/1; +} + +.aspect-ratio2to1 { + aspect-ratio: 2/1; +} + /* Gifs, videos and example images (For example the ones in 'how to run' a model */ .example-img { width: 100% !important; @@ -902,9 +904,10 @@ pre:has(code):hover > button { .highlight-bg { background-color: var(--md-primary-fg-color--dark); color: var(--tab-text); - padding: 0.2em 0.6em; + padding: 0 0.3em; width: fit-content; border-radius: 0.3em; + /* max-height: 1.3em; */ } /* Image background */ @@ -915,7 +918,7 @@ pre:has(code):hover > button { /* With borders */ .with-border { border-radius: 0.6em; - border: 1.3px solid var(--card-borders); + border: var(--border-width) solid var(--card-borders); box-sizing: border-box; } @@ -951,42 +954,76 @@ pre:has(code):hover > button { Media queries for website responsiveness */ -@media (width <= 500px) { +/* Overwrite mkdocs default options */ +@media screen and (width >= 800px) { + /* hide burger menu */ + .md-header__button[for=__drawer] { + display: none; + } + /* show website logo */ + .md-header__button.md-logo { + display: inline-block; + } +} +@media screen and (width < 800px) { + /* show burger menu */ + .md-header__button[for=__drawer] { + display: inline-block; + } + /* hide website logo */ + .md-header__button.md-logo { + display: none; + } + /* Make gap scale with viewport width */ + .homepage-buttons { + gap: 5vw; + } + /* Hide upper text in homepage buttons */ + .homepage-buttons > .vertical-card > :first-child { + display: none; + } + /* Lower text in homepage buttons */ + .homepage-buttons > .vertical-card > :last-child { + background-color: unset; + font-size: 3.5vw; + } + /* Homepage buttons Cards */ + .homepage-buttons > .vertical-card { + background-color: var(--md-primary-fg-color--dark); + height: 8vw; + } +} + +@media screen and (width <= 550px) { + /* Forum, ACCESS-NRI and Github buttons */ .header-btn-container { flex-grow: 0; } + /* Make squared btn */ .header-btn { flex-basis: 0; flex-grow: 0; aspect-ratio: 1; justify-self: start; + height: 2rem; + } + /* Increase btn Logos */ + .header-btn > :first-child > * { + font-size: 1.8em; } + /* Hide btn Text */ .header-btn >:last-child { display: none; } - - .hostedby { - left: 0; - } - .introduction > :first-child { - font-size: 4vw; - } + /* Homepage introduction paragraph */ + /* Upper text */ .introduction > :first-child > :first-child { - font-size: 6vw; + font-size: 5.5vw; } + /* Lower text */ + .introduction > :first-child > :last-child { + font-size: 3.5vw; + } + } - -/*Alternative implementation*/ - /* .header-btn { - background-color: transparent !important; - color: var(--md-primary-bg-color); -} -.hostedby { - color: var(--tab-text-light); - left: 8px; -} -.hostedby:hover { - opacity: 1; - filter: brightness(130%); -} */ \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 11d36c084..3b8cf2a59 100644 --- a/docs/index.md +++ b/docs/index.md @@ -16,17 +16,17 @@ hide:
- +
New to ACCESS-Hive?
-
Get Started!
+
Get Started
 - +
Need help?
-
Get Support!
+
FAQ / Support
 - -
Want to contribute?
-
How to Contribute!
+ +
Want to collaborate?
+
Contribute
diff --git a/docs/js/miscellaneous.js b/docs/js/miscellaneous.js index d2fe514a0..24321bf0f 100644 --- a/docs/js/miscellaneous.js +++ b/docs/js/miscellaneous.js @@ -155,6 +155,15 @@ function toggleTerminalAnimations() { } } +/* + Add style equals to number of children to all card containers, used for styling the card gaps in CSS +*/ +function addCardContainerChildrenNumber() { + document.querySelectorAll(".grid-container").forEach(container => { + container.setAttribute("style",`--children: ${container.childElementCount}`); + }) +} + // Join all functions function main() { @@ -164,6 +173,7 @@ function main() { tabFunctionality(); addExternalLinkIcon(); toggleTerminalAnimations(); + addCardContainerChildrenNumber(); } // Run all functions diff --git a/overrides/partials/header.html b/overrides/partials/header.html index eaf909bb9..5bf97df33 100644 --- a/overrides/partials/header.html +++ b/overrides/partials/header.html @@ -28,15 +28,15 @@ {% endif %}
tag) */ - --md-admonition-fg-color: var(--md-typeset-color); /* Main text warnings */ - --md-admonition-bg-color: transparent; /* Background warnings */ --md-footer-fg-color: var(--md-primary-bg-color); /* footer link icon (social) */ --md-footer-fg-color--light: var(--md-primary-bg-color); /* Footer copyright text and social icons fill */ --md-footer-bg-color: var(--md-primary-fg-color); /* footer background color */ @@ -79,94 +55,77 @@ --card-shadows: #00000075; /* Shadows on cards and other elements */ --card-shadows-hover: #00000090; /* Shadows hover on cards and other elements */ --white-background: rgb(255, 255, 255); /* Background for transparent images */ - --darker-background-hover: rgba(28, 28, 28, 0.185); /* Darker background on hover */ + --animated-terminal-background: var(--md-primary-fg-color); --animated-terminal-directory: var(--nri-green); --animated-terminal-buttons: var(--nri-orange); --animated-terminal-buttons-hover: var(--nri-blue); --animated-terminal-text: rgb(235, 235, 235); - --animated-terminal-background: var(--md-primary-fg-color); --note: var(--nri-orange); /* Note border and icon */ + --border-width: 0.1rem; + --not-supported-color: 255, 23, 23; /* Color for not supported warnings */ + --not-supported: rgb(var(--not-supported-color)); /* Not supported warnings */ + --not-owned-color: var(--nri-orange-color); /* Color for not owned warnings */ + --not-owned: rgb(var(--not-owned-color)); /* Not supported warnings */ + --info-color: var(--nri-light-blue-color); /* Color for info warnings */ + --info: rgb(var(--info-color)); /* Info warnings */ +} + +[data-md-color-scheme="custom-dark"] { + --default-fg-color: 235, 235, 235; /* Color for main text in body, navigation, table of content*/ + --md-default-fg-color: rgb(var(--default-fg-color)); /* Main text in body, navigation, table of content*/ + --md-default-fg-color--light: rgba(var(--default-fg-color),.7); /* Back to top button text, inactive tab text */ + --md-default-fg-color--lighter: rgba(var(--default-fg-color),.4); /* pencil for editing page, passed toc items text */ + --md-default-fg-color--lightest: rgba(var(--default-fg-color),.07); + --md-typeset-color: var(--md-default-fg-color); /* Color for main text */ + --default-bg-color: 53, 54, 58; /* Color for main background */ + --md-default-bg-color: rgb(var(--default-bg-color)); /* Main background */ + --md-default-bg-color--light: rgba(var(--default-bg-color),.7); + --md-default-bg-color--lighter: rgba(var(--default-bg-color),.3); + --md-default-bg-color--lightest: rgba(var(--default-bg-color),.12); + --md-typeset-a-color: var(--nri-light-blue); /* link text */ + --md-accent-fg-color: var(--nri-blue); /* link text hover */ + --md-code-fg-color: var(--md-default-fg-color); /* code element text */ + --md-code-bg-color: rgb(41, 41, 41); /* code element background */ + --md-typeset-kbd-color: rgb(39, 39, 39); /* keyboard key background ( tag) */ + --md-typeset-kbd-accent-color: rgb(126, 126, 126, .16); /* keyboard key inner border ( tag) */ + --md-typeset-kbd-border-color: rgb(30, 30, 30); /* text as keyboard outer border ( tag) */ + --active-version-tab-color: var(--nri-green-color); /* Color for the Text and underline of active HTML tab */ + --active-version-tab: rgb(var(--active-version-tab-color)); /* Text and underline of active HTML tab */ + --active-version-tab-background: rgba(var(--active-version-tab-color),0.05); /* Text and underline of active HTML tab */ --note-bg: rgba(var(--nri-orange-color),.05); /* Note background */ + --md-admonition-fg-color: var(--md-typeset-color); /* Main text warnings */ + --not-supported-background: rgba(var(--not-supported-color),0.05); /* Not supported warnings background */ + --not-owned-background: rgba(var(--not-owned-color),0.05); /* Not owned warnings background */ + --info-background: rgba(var(--info-color),0.05); /* Info warnings background */ } [data-md-color-scheme="custom-light"] { - --nri-green-color: 165, 205, 58; - --nri-orange-color: 249, 166, 28; - --nri-dark-blue-color: 0, 91, 148; - --nri-blue-color: 1, 173, 238; - --nri-light-blue-color: 142, 215, 248; - --nri-green: rgb(var(--nri-green-color)); /* rgb(166, 206, 57) */ - --nri-orange: rgb(var(--nri-orange-color)); /* rgb(250, 166, 25) */ - --nri-dark-blue: rgb(var(--nri-dark-blue-color)); /* rgb(17, 93, 151) */ - --nri-blue: rgb(var(--nri-blue-color)); /* rgb(6, 174, 239) */ - --nri-light-blue: rgb(var(--nri-light-blue-color)); /* rgb(142, 215, 248) */ --default-fg-color: 10, 10, 10; /* Color for main text in body, navigation, table of content*/ --md-default-fg-color: rgb(var(--default-fg-color)); /* Main text in body, navigation, table of content*/ --md-default-fg-color--light: rgba(var(--default-fg-color),.7); /* Back to top button text, inactive tab text */ --md-default-fg-color--lighter: rgba(var(--default-fg-color),.4); /* pencil for editing page, passed toc items text */ --md-default-fg-color--lightest: rgba(var(--default-fg-color),.07); - --tab-text-color: 235, 235, 235; /* Color for text of top tab and back to top button */ - --tab-text: rgb(var(--tab-text-color)); /* Main text in navigation tab */ - --tab-text-light: rgba(var(--tab-text-color),.7); /* Main text in navigation tab inactive */ + --md-typeset-color: var(--md-default-fg-color); /* Color for main text */ --default-bg-color: 255, 255, 255; /* Color for main background */ --md-default-bg-color: rgb(var(--default-bg-color)); /* Main background */ --md-default-bg-color--light: rgba(var(--default-bg-color),.7); --md-default-bg-color--lighter: rgba(var(--default-bg-color),.3); --md-default-bg-color--lightest: rgba(var(--default-bg-color),.12); - --md-primary-fg-color: rgb(29, 29, 29); /* top banner background */ - --md-primary-fg-color--dark: var(--nri-dark-blue); /* top tab background */ - --primary-bg-color: var(--tab-text-color); /* Color for top banner text */ - --md-primary-bg-color: rgb(var(--primary-bg-color)); /* top banner text */ - --md-primary-bg-color--light: rgba(var(--primary-bg-color),0.5); /* search bar 'Search' text */ --md-typeset-a-color: var(--nri-dark-blue); /* link text */ --md-accent-fg-color: var(--nri-blue); /* link text hover */ - --md-accent-fg-color--transparent: rgba(var(--nri-blue-color),.05); /* navigation bar little arrows hover */ - --md-accent-bg-color: rgb(var(--tab-text-color)); /* back to top button text hover */ --md-code-fg-color: rgb(33, 36, 44); /* code element text */ --md-code-bg-color: #dedede; /* code element background */ - --md-code-hl-color: rgba(255,255,0,.5); - --md-code-hl-number-color: #d52a2a; - --md-code-hl-special-color: #db1457; - --md-code-hl-function-color: #a846b9; - --md-code-hl-constant-color: #6e59d9; - --md-code-hl-keyword-color: #3f6ec6; - --md-code-hl-string-color: #1c7d4d; - --md-code-hl-name-color: var(--md-code-fg-color); - --md-code-hl-operator-color: var(--md-default-fg-color--light); - --md-code-hl-punctuation-color: var(--md-default-fg-color--light); - --md-code-hl-comment-color: var(--md-default-fg-color--light); - --md-code-hl-generic-color: var(--md-default-fg-color--light); - --md-code-hl-variable-color: var(--md-default-fg-color--light); - --md-typeset-color: var(--md-default-fg-color); /* Color for text warnings */ - --md-typeset-mark-color: rgba(var(--nri-orange-color),.4); /* marked text ( tag)*/ - --md-typeset-del-color: rgba(245,80,61,.15); /* deleted text ( tag) */ - --md-typeset-ins-color: rgba(11,213,112,.15); /* inserted text ( tag) */ --md-typeset-kbd-color: rgb(226, 226, 226); /* keyboard key background ( tag) */ --md-typeset-kbd-accent-color: rgb(255, 255, 255, .78); /* keyboard key inner border ( tag) */ --md-typeset-kbd-border-color: rgb(212, 212, 212); /* text as keyboard outer border ( tag) */ - --navigation-borders: rgba(var(--nri-orange-color),.2); /* Left border on the toc and navigation*/ - --card-borders: rgba(var(--nri-green-color),.755); /* Borders of cards */ - --md-typeset-table-color: var(--card-borders); /* table borders (
tag) */ + --active-version-tab-color: var(--nri-dark-blue-color); /* Color for the Text and underline of active HTML tab */ + --active-version-tab: rgb(var(--active-version-tab-color)); /* Text and underline of active HTML tab */ + --active-version-tab-background: rgba(var(--active-version-tab-color),0.05); /* Text and underline of active HTML tab */ + --note-bg: rgba(var(--nri-orange-color),.1); /* Note background */ --md-admonition-fg-color: var(--md-typeset-color); /* Main text warnings */ - --md-admonition-bg-color: transparent; /* Background warnings */ - --md-footer-fg-color: var(--md-primary-bg-color); /* footer link icon (social) */ - --md-footer-fg-color--light: var(--md-primary-bg-color); /* Footer copyright text and social icons fill */ - --md-footer-bg-color: var(--md-primary-fg-color); /* footer background color */ - --md-footer-bg-color--dark: rgba(0,0,0,0); /* footer background color (on top of the --md-footer-bg-color) */ - --md-shadow-z1: 0 0.2rem 0.5rem rgba(0,0,0,.05),0 0 0.05rem rgba(0,0,0,.1); - --md-shadow-z2: 0 0.2rem 0.5rem rgba(0,0,0,.1),0 0 0.05rem rgba(0,0,0,.25); - --md-shadow-z3: 0 0.2rem 0.5rem rgba(0,0,0,.2),0 0 0.05rem rgba(0,0,0,.35); - --card-shadows: #00000075; /* Shadows on cards and other elements */ - --card-shadows-hover: #00000090; /* Shadows hover on cards and other elements */ - --white-background: rgb(255, 255, 255); /* Background for transparent images */ - --darker-background-hover: rgba(28, 28, 28, 0.185); /* Darker background on hover */ - --animated-terminal-directory: var(--nri-dark-blue); - --animated-terminal-buttons: var(--nri-orange); - --animated-terminal-buttons-hover: var(--nri-blue); - --animated-terminal-text: rgb(235, 235, 235); - --animated-terminal-background: var(--md-primary-fg-color); - --note: var(--nri-orange); /* Note border and icon */ - --note-bg: rgba(var(--nri-orange-color),.05); /* Note background */ + --not-supported-background: rgba(var(--not-supported-color),0.1); /* Not supported warnings background */ + --not-owned-background: rgba(var(--not-owned-color),0.1); /* Not owned warnings background */ + --info-background: rgba(var(--info-color),0.1); /* Info warnings background */ } /* Set rem based on viewport width */ @@ -293,18 +252,6 @@ border-radius: 0.6em; } -a.component-card { - border: unset; - box-shadow: unset; - max-width: 22%; - min-height: 0; -} - -.component-card:hover { - background-color: var(--darker-background-hover); - box-shadow: unset; -} - /* =============================================================== Main body @@ -436,13 +383,33 @@ h1.homepage { /* =============================================================== Warning windows */ -.warning, -.md-typeset :is(.warning,.caution,.attention)>:is(.admonition-title,summary):before { - border-color: var(--md-primary-fg-color--dark) !important; + +/* Not owned (Supported on gadi) warnings */ +.md-typeset :is(.admonition,details):is(.warning,.caution,.attention) { + border-color: var(--not-owned); + background-color: var(--not-owned-background); +} +.md-typeset :is(.warning,.caution,.attention)>:is(.admonition-title,summary) { + background-color: rgba(var(--not-owned-color),0.2); } -.md-typeset .warning>summary:after { - color: var(--md-primary-fg-color--dark); +/* Not supported warnings */ +.md-typeset :is(.admonition,details):is(.danger,.error) { + border-color: var(--not-supported); + background-color: var(--not-supported-background); +} +.md-typeset :is(.danger,.error)>:is(.admonition-title,summary) { + background-color: rgba(var(--not-supported-color),0.2); +} + + +/* Info warnings */ +.md-typeset :is(.admonition,details):is(.info,.todo) { + border-color: var(--info); + background-color: var(--info-background); +} +.md-typeset :is(.info,.todo)>:is(.admonition-title,summary) { + background-color: rgba(var(--info-color),0.2); } @@ -820,15 +787,15 @@ pre:has(code):hover > button { /* Change background color of buttons on hover */ .tabLabels button:hover { - color: var(--md-primary-fg-color--dark); + color: var(--active-version-tab); } /* Create an active/current tablink class */ .tabLabels button.activeTab { - color: var(--md-primary-fg-color--dark); + color: var(--active-version-tab); border-bottom: solid 2px currentColor; transition: border-bottom .2s; - background-color: var(--md-accent-fg-color--transparent); + background-color: var(--active-version-tab-background); border-radius: 0.6em 0.6em 0 0; } diff --git a/docs/index.md b/docs/index.md index 3b8cf2a59..9e5cd0a76 100644 --- a/docs/index.md +++ b/docs/index.md @@ -47,7 +47,7 @@ hide:
Model Evaluation
-
Model Evaluation
+
Data and Model Evaluation
diff --git a/docs/models/model_components/index.md b/docs/models/model_components/index.md index 09b97a1f8..d34b7f322 100644 --- a/docs/models/model_components/index.md +++ b/docs/models/model_components/index.md @@ -1,59 +1,59 @@ # Model Components ACCESS model components represent different chemical, physical or biological parts of the Earth System.
- +
Atmosphere
-
Atmosphere
+
Atmosphere
 - +
Land
-
Land
+
Land
 - +
Ocean
-
Ocean
+
Ocean
 - +
Sea Ice
-
Sea Ice
+
Sea Ice
 - +
Aerosols
-
Aerosols
+
Aerosols
 - +
Atmospheric Chemistry
-
Atmospheric Chemistry
+
Atmospheric Chemistry
 - +
Biogeochemistry Land
-
Biogeochemistry Land
+
Biogeochemistry Land
 - +
Biogeochemistry Ocean
-
Biogeochemistry Ocean
+
Biogeochemistry Ocean
 - +
Coupler
-
Coupler
+
Coupler
diff --git a/mkdocs.yml b/mkdocs.yml index c2e691857..7d42b2080 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -15,16 +15,18 @@ theme: name: material custom_dir: overrides palette: - # Palette toggle for light mode - media: "(prefers-color-scheme: light)" scheme: custom-light + primary: none + accent: none toggle: icon: material/theme-light-dark name: Switch to dark mode - # Palette toggle for dark mode - media: "(prefers-color-scheme: dark)" + primary: none + accent: none scheme: custom-dark toggle: icon: material/theme-light-dark From 7363537c7c8796918ca03bc826eaf01f66da0b7e Mon Sep 17 00:00:00 2001 From: atteggiani Date: Mon, 21 Aug 2023 17:35:37 +1000 Subject: [PATCH 07/19] Updated cards --- .../community_med/index.md | 16 +- docs/community_resources/events/index.md | 8 +- docs/community_resources/index.md | 12 +- docs/css/access-nri.css | 140 +++++++----------- docs/index.md | 38 +++-- docs/js/miscellaneous.js | 2 +- docs/model_evaluation/index.md | 48 +++--- .../model_evaluation_getting_started/index.md | 12 +- .../model_evaluation_model_catalogs/index.md | 4 +- ...model_evaluation_observational_catalogs.md | 4 +- .../model_evaluation_on_gadi/index.md | 16 +- .../model_evaluation_on_gadi_esmvaltool.md | 16 +- .../model_evaluation_on_gadi_metplus.md | 4 +- docs/models/configurations/index.md | 16 +- docs/models/index.md | 59 +++----- docs/models/model_components/index.md | 36 ++--- docs/models/run-a-model/index.md | 16 +- 17 files changed, 209 insertions(+), 238 deletions(-) diff --git a/docs/community_resources/community_med/index.md b/docs/community_resources/community_med/index.md index f8e1f5091..2b8b18a7a 100644 --- a/docs/community_resources/community_med/index.md +++ b/docs/community_resources/community_med/index.md @@ -5,29 +5,29 @@
-
+
Observational Catalogues
-
Observational Catalogues
+
Observational Catalogues
 -
+
Model Catalogues
-
Model Catalogues
+
Model Catalogues
-
+
Data Formatting
-
Data Formatting
+
Data Formatting
 -
+
Evaluation Recipes
-
Evaluation Recipes
+
Evaluation Recipes
diff --git a/docs/community_resources/events/index.md b/docs/community_resources/events/index.md index 30c6190e2..b7f6992ca 100644 --- a/docs/community_resources/events/index.md +++ b/docs/community_resources/events/index.md @@ -5,15 +5,15 @@
-
+
Events List
-
Click here to see upcoming events
+
Click here to see upcoming events
 -
+
Events Get in Touch
-
Want to advertise an event? Get in touch here
+
Want to advertise an event? Get in touch here
\ No newline at end of file diff --git a/docs/community_resources/index.md b/docs/community_resources/index.md index 455a83c64..d417b507f 100644 --- a/docs/community_resources/index.md +++ b/docs/community_resources/index.md @@ -6,21 +6,21 @@ In this area of the Hive, we collect content that is not currated by us, but may
-
+
Working Groups
-
Working Groups
+
Working Groups
 -
+
Events
-
Events
+
Events
 -
+
Model Evaluation Links
-
Model Evaluation Links
+
Model Evaluation Links
\ No newline at end of file diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css index f89c592be..87865f0bf 100644 --- a/docs/css/access-nri.css +++ b/docs/css/access-nri.css @@ -157,16 +157,14 @@ align-items: center; align-content: center; flex-wrap: wrap; - gap: 0.8em; + column-gap: 1.5rem; + row-gap: 0.8rem; } /* Single card */ .card-container > * { - display: flex; - justify-content: center; - align-items: center; border: var(--border-width) solid var(--card-borders); - border-radius: 0.6em; + border-radius: 0.6rem; box-shadow: 6px 6px 10px var(--card-shadows); overflow: hidden; } @@ -180,76 +178,63 @@ } .vertical-card { + display: flex; flex-direction: column; + justify-content: center; + align-items: center; max-width: 30%; min-height: 0; } -.vertical-card-image-container { - flex-basis: 80%; - width: 100%; +.horizontal-card { display: flex; + flex-direction: row; justify-content: center; - align-items: center; - padding: 0.6em 0.6em 0.3em 0.6em; - overflow: hidden; - border-radius: 0.6em; -} - -.vertical-card-image-container > img { + align-items: stretch; width: 100%; - height: 100%; } -.vertical-card-text-container { +.card-text-container { color: var(--md-default-fg-color); - flex-basis: 20%; + font-size: 1.4em; display: flex; - width: 100%; flex-direction: column; - justify-content: center; align-items: center; + justify-content: center; text-align: center; - margin: 0.3em 0.6em 0.6em 0.6em; -} - -.horizontal-card { - flex-direction: row; + padding: 0.4rem; width: 100%; - height: 10em; - align-items: stretch; + height: 100%; } -.horizontal-card-image-container { - flex-basis: 35%; - height: 100%; +.card-image-container { display: flex; justify-content: center; align-items: center; - padding: 0.6em 0 0.6em 0.6em; + padding: 0.4rem; overflow: hidden; - border-radius: 0.6em; + width: 100%; + height: 100%; } -.horizontal-card-image-container > img { - height: 100%; - width: 100%; +.vertical-card > .card-image-container { + flex-basis: 75%; +} +.vertical-card > .card-text-container { + flex-basis: 25%; } -.horizontal-card-text-container { - color: var(--md-default-fg-color); - height: 100%; - flex-basis: 65%; - display: flex; - flex-direction: column; - padding: 0 1em; - justify-content: space-around; - align-items: center; +.horizontal-card > .card-image-container { + flex-basis: 25%; +} +.horizontal-card > .card-text-container { + flex-basis: 75%; } -.horizontal-card-image-container > img, -.vertical-card-image-container > img { - border-radius: 0.6em; +.card-image-container > img { + width: 100%; + height: 100%; + border-radius: 0.35rem; } @@ -327,40 +312,26 @@ h1.homepage { Buttons After introductory paragraph */ .homepage-buttons { - justify-content: center; + justify-content: space-around; align-items: stretch; - gap: 2.8rem; + gap: 10%; flex-wrap: nowrap; + margin-bottom: 1.5rem; } - .homepage-buttons > * { width: 100%; - margin-bottom: 1.5em; } + /* Upper Text */ .homepage-buttons > .vertical-card > :first-child { color: var(--md-default-fg-color); - flex-basis: 40%; - margin-top: 1%; - display: flex; - justify-content: center; - flex-direction: column; } /* Lower text */ -.homepage-buttons > .vertical-card > :last-child { - flex-basis: 60%; - margin: 1% 0; - display: flex; - justify-content: center; - flex-direction: column; - font-size: 1.2em; -} - -.acknowledgement-img { - height: 10em !important; +:is(.homepage-buttons,.homepage-navigation) .card-text-container > * { + border-radius: 0.4rem; + background-color: var(--md-primary-fg-color--dark); width: 100%; - object-fit: cover; - border-radius: 0.6em; + height: 100% } .homepage-navigation { @@ -372,6 +343,13 @@ h1.homepage { max-width: 22%; } +.acknowledgement-img { + height: 10em !important; + width: 100%; + object-fit: cover; + border-radius: 0.6em; +} + /* =============================================================== Back to top button */ @@ -867,16 +845,6 @@ pre:has(code):hover > button { text-align: justify; } -/* Highlight the background */ -.highlight-bg { - background-color: var(--md-primary-fg-color--dark); - color: var(--tab-text); - padding: 0 0.3em; - width: fit-content; - border-radius: 0.3em; - /* max-height: 1.3em; */ -} - /* Image background */ .white-background { background-color: var(--white-background); @@ -894,11 +862,6 @@ pre:has(code):hover > button { padding: 0.5em; } -/* Typeset text color (even links) */ -.default-text-color { - color: var(--md-default-fg-color) !important; -} - .bold { font-weight: 600 !important; } @@ -931,14 +894,19 @@ pre:has(code):hover > button { .md-header__button.md-logo { display: inline-block; } + /* show top tabs */ + .md-tabs { + display: block; + } } @media screen and (width < 800px) { /* show burger menu */ .md-header__button[for=__drawer] { display: inline-block; } - /* hide website logo */ - .md-header__button.md-logo { + /* hide website logo and top tabs*/ + .md-header__button.md-logo, + .md-tabs { display: none; } /* Make gap scale with viewport width */ diff --git a/docs/index.md b/docs/index.md index 9e5cd0a76..a38fbf98e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -18,42 +18,56 @@ hide:
New to ACCESS-Hive?
-
Get Started
+
+
Get Started
+
Need help?
-
FAQ / Support
+
+
FAQ / Support
+
Want to collaborate?
-
Contribute
+
+
Contribute
+
-
+
-
+
Models
-
Models
+
+
Models
+
-
+
Run a Model
-
Run a Model
+
+
Run a Model
+
-
+
Model Evaluation
-
Data and Model Evaluation
+
+
Data and Model Evaluation
+
-
+
Community Resources
-
Community Resources
+
+
Community Resources
+
diff --git a/docs/js/miscellaneous.js b/docs/js/miscellaneous.js index 24321bf0f..859dc1b81 100644 --- a/docs/js/miscellaneous.js +++ b/docs/js/miscellaneous.js @@ -159,7 +159,7 @@ function toggleTerminalAnimations() { Add style equals to number of children to all card containers, used for styling the card gaps in CSS */ function addCardContainerChildrenNumber() { - document.querySelectorAll(".grid-container").forEach(container => { + document.querySelectorAll(".card-container").forEach(container => { container.setAttribute("style",`--children: ${container.childElementCount}`); }) } diff --git a/docs/model_evaluation/index.md b/docs/model_evaluation/index.md index 41ae7427c..f183f03a3 100644 --- a/docs/model_evaluation/index.md +++ b/docs/model_evaluation/index.md @@ -10,22 +10,22 @@ If you are new to MED and are wondering [*"What is Model Evaluation and Diagnost
-
+
Computing Access
-
Computing Access
+
Computing Access
 -
+
Model Evaluation on Gadi
-
Model Evaluation on Gadi
+
Model Evaluation on Gadi
 -
+
Model Variables
-
Model Variables
+
Model Variables
@@ -34,16 +34,16 @@ If you are new to MED and are wondering [*"What is Model Evaluation and Diagnost ### Data Catalogues
-
+
A picture of a seismograph recording seismic waves during an earthquake visualises the link to our Observational Data Catalogue. Image credit: Wf Sihardian—EyeEm/Getty Images
-
Observational Data Catalogue
+
Observational Data Catalogue
 -
+
MED Conda Environment
-
Model Data Catalogue
+
Model Data Catalogue
@@ -51,28 +51,28 @@ If you are new to MED and are wondering [*"What is Model Evaluation and Diagnost
-
+
ILAMB
-
ILAMB
+
ILAMB
 -
+
ESMValTool
-
ESMValTool
+
ESMValTool
 -
+
Pangeo/COSIMA
-
COSIMA cookbook
+
COSIMA cookbook
 -
+
METplus
-
METplus
+
METplus
@@ -93,22 +93,22 @@ While we are working on these, we have collected a number of links to existing t
-
+
Model Diagnostics
-
Model Diagnostics
+
Model Diagnostics
 -
+
A picture visualising the conversion of data in text columns into a useful python xarray data format. Image credit: https://support.solarwinds.com and https://i.stack.imgur.com/
-
Data Format Processing
+
Data Format Processing
 -
+
A code snippet from the COSIMA documented recipes. Image credit: https://github.com/COSIMA/cosima-recipes
-
Evaluation Recipe Gallery
+
Evaluation Recipe Gallery
--> diff --git a/docs/model_evaluation/model_evaluation_getting_started/index.md b/docs/model_evaluation/model_evaluation_getting_started/index.md index 11f402815..20ff3e60b 100644 --- a/docs/model_evaluation/model_evaluation_getting_started/index.md +++ b/docs/model_evaluation/model_evaluation_getting_started/index.md @@ -14,21 +14,21 @@ Here, we provide you the important information to give you access to the large d
-
+
Computing Access
-
Computing Access
+
Computing Access
 -
+
Model Evaluation on Gadi
-
Model Evaluation on Gadi
+
Model Evaluation on Gadi
 -
+
Model Variables
-
Model Variables
+
Model Variables
\ No newline at end of file diff --git a/docs/model_evaluation/model_evaluation_model_catalogs/index.md b/docs/model_evaluation/model_evaluation_model_catalogs/index.md index 2ac9b7a0e..34355c313 100644 --- a/docs/model_evaluation/model_evaluation_model_catalogs/index.md +++ b/docs/model_evaluation/model_evaluation_model_catalogs/index.md @@ -3,10 +3,10 @@ The ACCESS-NRI intake catalog aims to provide a way for Python users to discover and load data across a broad range of climate data products available on the Australian NCI supercomputer Gadi. For detailed information, tutorials and more, please go to the
-
+
ACCESS-NRI intake catalog documentation
-
Documentation
+
Documentation
diff --git a/docs/model_evaluation/model_evaluation_observational_catalogs.md b/docs/model_evaluation/model_evaluation_observational_catalogs.md index a091ef389..a61bd5334 100644 --- a/docs/model_evaluation/model_evaluation_observational_catalogs.md +++ b/docs/model_evaluation/model_evaluation_observational_catalogs.md @@ -6,10 +6,10 @@ You can search the available data collections on the NCI Data Collections websit
-
+
NCI Data Collections
-
NCI Data Collections
+
NCI Data Collections
 -
+
-
+
ACCESS-CM ACCESS-CM is a global climate model that includes the atmosphere, land, ocean and sea-ice components, and produces physical climate simulations. @@ -24,10 +24,10 @@
-
+
-
+
ACCESS-ESM ACCESS-ESM is a global climate model with additional land and ocean biogeochemical components to simulate both the physical climate and global biogeochemical cycles. @@ -35,10 +35,10 @@
-
+
-
+
ACCESS-OM ACCESS-OM is a global coupled ocean and sea ice model used to understand both physical and biogeochemical processes in the ocean. diff --git a/docs/models/index.md b/docs/models/index.md index 35d7587c1..81860b441 100644 --- a/docs/models/index.md +++ b/docs/models/index.md @@ -10,22 +10,11 @@ ACCESS models are computer codes comprising complex mathematical representations ## Supported ACCESS Model Configurations
- -
+
-
+
ACCESS-CM ACCESS-CM is a global climate model that includes the atmosphere, land, ocean and sea-ice components, and produces physical climate simulations. @@ -33,10 +22,10 @@ ACCESS models are computer codes comprising complex mathematical representations
-
+
-
+
ACCESS-ESM ACCESS-ESM is a global climate model with additional land and ocean biogeochemical components to simulate both the physical climate and global biogeochemical cycles. @@ -44,10 +33,10 @@ ACCESS models are computer codes comprising complex mathematical representations
-
+
-
+
ACCESS-OM ACCESS-OM is a global coupled ocean and sea ice model used to understand both physical and biogeochemical processes in the ocean. @@ -59,57 +48,57 @@ ACCESS models are computer codes comprising complex mathematical representations ## ACCESS Model Components
-
+
Atmosphere
-
Atmosphere
+
Atmosphere
 -
+
Land
-
Land
+
Land
 -
+
Ocean
-
Ocean
+
Ocean
 -
+
Sea Ice
-
Sea Ice
+
Sea Ice
 -
+
Aerosols
-
Aerosols
+
Aerosols
 -
+
Atmospheric Chemistry
-
Atmospheric Chemistry
+
Atmospheric Chemistry
 -
+
Biogeochemistry Land
-
Biogeochemistry Land
+
Biogeochemistry Land
 -
+
Biogeochemistry Ocean
-
Biogeochemistry Ocean
+
Biogeochemistry Ocean
 -
+
Coupler
-
Coupler
+
Coupler
diff --git a/docs/models/model_components/index.md b/docs/models/model_components/index.md index d34b7f322..b30457238 100644 --- a/docs/models/model_components/index.md +++ b/docs/models/model_components/index.md @@ -2,58 +2,58 @@ ACCESS model components represent different chemical, physical or biological parts of the Earth System.
-
+
Atmosphere
-
Atmosphere
+
Atmosphere
 -
+
Land
-
Land
+
Land
 -
+
Ocean
-
Ocean
+
Ocean
 -
+
Sea Ice
-
Sea Ice
+
Sea Ice
 -
+
Aerosols
-
Aerosols
+
Aerosols
 -
+
Atmospheric Chemistry
-
Atmospheric Chemistry
+
Atmospheric Chemistry
 -
+
Biogeochemistry Land
-
Biogeochemistry Land
+
Biogeochemistry Land
 -
+
Biogeochemistry Ocean
-
Biogeochemistry Ocean
+
Biogeochemistry Ocean
 -
+
Coupler
-
Coupler
+
Coupler
diff --git a/docs/models/run-a-model/index.md b/docs/models/run-a-model/index.md index 84e2acaf0..b1b42e41f 100644 --- a/docs/models/run-a-model/index.md +++ b/docs/models/run-a-model/index.md @@ -5,34 +5,34 @@ If you are unsure which ACCESS model is the right choice for your experiment, ta
-
+
ACCESS-CM
-
+
Run ACCESS-CM
-
+
ACCESS-ESM
-
+
Run ACCESS-ESM
-
+
ACCESS-OM
-
+
Run ACCESS-OM
From f2a6683b4c4ae424ee2f4303aa4617e1d8b80d6b Mon Sep 17 00:00:00 2001 From: atteggiani Date: Mon, 21 Aug 2023 17:59:56 +1000 Subject: [PATCH 08/19] Updated responsiveness of homepage-buttons --- docs/css/access-nri.css | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css index 87865f0bf..3855db119 100644 --- a/docs/css/access-nri.css +++ b/docs/css/access-nri.css @@ -327,11 +327,17 @@ h1.homepage { color: var(--md-default-fg-color); } /* Lower text */ +:is(.homepage-buttons,.homepage-navigation) .card-text-container { + padding-top: 0; +} :is(.homepage-buttons,.homepage-navigation) .card-text-container > * { border-radius: 0.4rem; background-color: var(--md-primary-fg-color--dark); width: 100%; - height: 100% + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; } .homepage-navigation { @@ -347,7 +353,7 @@ h1.homepage { height: 10em !important; width: 100%; object-fit: cover; - border-radius: 0.6em; + border-radius: 0.5rem; } /* =============================================================== @@ -578,7 +584,7 @@ h1.homepage { flex-wrap: nowrap; justify-content: center; align-items: center; - border-radius: 0.3em; + border-radius: 0.3rem; border: 1px solid; padding: 0 0.3em; height: 1.6rem; @@ -642,7 +648,7 @@ h1.homepage { .rectangular-img { width: 100%; height: 13em !important; - border-radius: 0.6em; + border-radius: 0.6rem; } /* =============================================================== @@ -774,7 +780,7 @@ pre:has(code):hover > button { border-bottom: solid 2px currentColor; transition: border-bottom .2s; background-color: var(--active-version-tab-background); - border-radius: 0.6em 0.6em 0 0; + border-radius: 0.6rem 0.6rem 0 0; } /* Style the tab content */ @@ -794,7 +800,7 @@ pre:has(code):hover > button { position: relative; border: solid 0.01em var(--note); background-color: var(--note-bg); - border-radius: 0.3em; + border-radius: 0.3rem; padding: 0.2em 0.3em 0.2em 1.5em; margin-bottom: 0.8em; } @@ -837,7 +843,7 @@ pre:has(code):hover > button { .example-img { width: 100% !important; height: auto !important; - border-radius: 0.6em; + border-radius: 0.6rem; } /* Justified text */ @@ -852,7 +858,7 @@ pre:has(code):hover > button { /* With borders */ .with-border { - border-radius: 0.6em; + border-radius: 0.6rem; border: var(--border-width) solid var(--card-borders); box-sizing: border-box; } @@ -919,13 +925,16 @@ pre:has(code):hover > button { } /* Lower text in homepage buttons */ .homepage-buttons > .vertical-card > :last-child { - background-color: unset; font-size: 3.5vw; } /* Homepage buttons Cards */ .homepage-buttons > .vertical-card { background-color: var(--md-primary-fg-color--dark); height: 8vw; + border-radius: 2vw; + } + .homepage-buttons .card-text-container { + padding: 0; } } From ce8eca1987d5f09a4c8a9af038492f3ed0371d7b Mon Sep 17 00:00:00 2001 From: atteggiani Date: Tue, 22 Aug 2023 16:22:15 +1000 Subject: [PATCH 09/19] Updated responsiveness for all vertical cards --- docs/css/access-nri.css | 73 +++++++++++++++++++++++++--------------- docs/index.md | 4 +-- docs/js/miscellaneous.js | 2 +- mkdocs.yml | 2 +- 4 files changed, 50 insertions(+), 31 deletions(-) diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css index 3855db119..90aded23a 100644 --- a/docs/css/access-nri.css +++ b/docs/css/access-nri.css @@ -182,8 +182,9 @@ flex-direction: column; justify-content: center; align-items: center; - max-width: 30%; + width: clamp(100px,30%,250px); min-height: 0; + container-type: inline-size; } .horizontal-card { @@ -203,8 +204,10 @@ justify-content: center; text-align: center; padding: 0.4rem; + line-height: 1.1em; width: 100%; height: 100%; + word-break: normal; } .card-image-container { @@ -218,10 +221,13 @@ } .vertical-card > .card-image-container { - flex-basis: 75%; + flex-basis: 70%; } .vertical-card > .card-text-container { - flex-basis: 25%; + height: 30%; + flex-grow: 0; + flex-shrink: 0; + font-size: 12cqi; } .horizontal-card > .card-image-container { @@ -237,6 +243,12 @@ border-radius: 0.35rem; } +.card-text-container:last-child { + padding-top: 0; +} +.card-text-container:first-child { + padding-bottom: 0; +} /* =============================================================== Main body @@ -308,9 +320,22 @@ h1.homepage { margin-left: 0.5rem; } -/* - Buttons After introductory paragraph -*/ + +/* Lower text on all homepage cards*/ +:is(.homepage-buttons,.homepage-navigation) .card-text-container { + color: var(--tab-text); +} +:is(.homepage-buttons,.homepage-navigation) .card-text-container > * { + border-radius: 0.4rem; + background-color: var(--md-primary-fg-color--dark); + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} + +/* Buttons After introductory paragraph */ .homepage-buttons { justify-content: space-around; align-items: stretch; @@ -322,31 +347,22 @@ h1.homepage { width: 100%; } -/* Upper Text */ .homepage-buttons > .vertical-card > :first-child { color: var(--md-default-fg-color); + font-size: 1.2em; } -/* Lower text */ -:is(.homepage-buttons,.homepage-navigation) .card-text-container { - padding-top: 0; -} -:is(.homepage-buttons,.homepage-navigation) .card-text-container > * { - border-radius: 0.4rem; - background-color: var(--md-primary-fg-color--dark); - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; +.homepage-buttons .card-text-container { + height: 1.8em; + font-size: 2em; } +/* Navigation cards in homepage */ .homepage-navigation { - justify-content: center; - gap: 1.2em; + justify-content: space-around; } .homepage-navigation > * { - max-width: 22%; + width: 21%; } .acknowledgement-img { @@ -885,7 +901,6 @@ pre:has(code):hover > button { font-size: 1.4em; } - /* =============================================================== Media queries for website responsiveness */ @@ -925,7 +940,7 @@ pre:has(code):hover > button { } /* Lower text in homepage buttons */ .homepage-buttons > .vertical-card > :last-child { - font-size: 3.5vw; + font-size: calc(2.9vw + 0.15rem); } /* Homepage buttons Cards */ .homepage-buttons > .vertical-card { @@ -939,6 +954,10 @@ pre:has(code):hover > button { } @media screen and (width <= 550px) { + .vertical-card { + width: 40%; + } + /* Forum, ACCESS-NRI and Github buttons */ .header-btn-container { flex-grow: 0; @@ -963,11 +982,11 @@ pre:has(code):hover > button { /* Homepage introduction paragraph */ /* Upper text */ .introduction > :first-child > :first-child { - font-size: 5.5vw; + font-size: calc(4.9vw + 0.15rem); } /* Lower text */ .introduction > :first-child > :last-child { - font-size: 3.5vw; - } + font-size: calc(2.9vw + 0.15rem); + } } diff --git a/docs/index.md b/docs/index.md index a38fbf98e..835a317b4 100644 --- a/docs/index.md +++ b/docs/index.md @@ -15,7 +15,7 @@ hide:
-
+
New to ACCESS-Hive?
@@ -36,7 +36,7 @@ hide:
-
+
Models diff --git a/docs/js/miscellaneous.js b/docs/js/miscellaneous.js index 859dc1b81..21834d5db 100644 --- a/docs/js/miscellaneous.js +++ b/docs/js/miscellaneous.js @@ -160,7 +160,7 @@ function toggleTerminalAnimations() { */ function addCardContainerChildrenNumber() { document.querySelectorAll(".card-container").forEach(container => { - container.setAttribute("style",`--children: ${container.childElementCount}`); + container.setAttribute("style",`--num-children: ${container.childElementCount}`); }) } diff --git a/mkdocs.yml b/mkdocs.yml index 7d42b2080..d727916ca 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -205,5 +205,5 @@ extra_css: extra_javascript: - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js # For tablesort functionality - - https://cdn.jsdelivr.net/gh/atteggiani/animated-terminal/animated-terminal.min.js + - https://cdn.jsdelivr.net/gh/atteggiani/animated-terminal/animated-terminal.min.js # Terminal animations - js/miscellaneous.js From b3327404e30e412f96d581c50f5fb5ef5fb94ad1 Mon Sep 17 00:00:00 2001 From: atteggiani Date: Tue, 22 Aug 2023 16:26:38 +1000 Subject: [PATCH 10/19] Updated responsiveness of vertical cards --- docs/css/access-nri.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css index 90aded23a..fc212e841 100644 --- a/docs/css/access-nri.css +++ b/docs/css/access-nri.css @@ -359,10 +359,7 @@ h1.homepage { /* Navigation cards in homepage */ .homepage-navigation { justify-content: space-around; -} - -.homepage-navigation > * { - width: 21%; + flex-wrap: nowrap; } .acknowledgement-img { @@ -957,6 +954,10 @@ pre:has(code):hover > button { .vertical-card { width: 40%; } + + .homepage-navigation { + flex-wrap: wrap; + } /* Forum, ACCESS-NRI and Github buttons */ .header-btn-container { From 7e4f9645aae15542ae0860cee2428ef9a18b28e4 Mon Sep 17 00:00:00 2001 From: atteggiani Date: Wed, 23 Aug 2023 16:57:09 +1000 Subject: [PATCH 11/19] Updated responsiveness for horizontal cards --- docs/css/access-nri.css | 47 ++++++++++++++++--- docs/getting_started/index.md | 69 ++++++++++++---------------- docs/models/configurations/index.md | 71 ++++++++++++----------------- docs/models/index.md | 6 +-- 4 files changed, 101 insertions(+), 92 deletions(-) diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css index fc212e841..f39e787c3 100644 --- a/docs/css/access-nri.css +++ b/docs/css/access-nri.css @@ -193,6 +193,7 @@ justify-content: center; align-items: stretch; width: 100%; + height: 8rem; } .card-text-container { @@ -217,7 +218,6 @@ padding: 0.4rem; overflow: hidden; width: 100%; - height: 100%; } .vertical-card > .card-image-container { @@ -243,13 +243,17 @@ border-radius: 0.35rem; } -.card-text-container:last-child { +.vertical-card > .card-text-container:last-child { padding-top: 0; } -.card-text-container:first-child { +.vertical-card > .card-text-container:first-child { padding-bottom: 0; } +.horizontal-card > .card-text-container > *:first-child:not(:only-child) { + margin-bottom: 0.5em; +} + /* =============================================================== Main body */ @@ -763,13 +767,14 @@ pre:has(code):hover > button { width: fit-content; overflow: auto; margin-top: 1em; + gap: 1px; } /* Style the buttons that are used to open the tab content */ .tabLabels button { color: var(--md-default-fg-color--light); border-bottom: 0.1rem solid transparent; - border-radius: 0.1rem 0.1rem 0 0; + border-radius: 0.6rem 0.6rem 0 0; cursor: pointer; flex-shrink: 0; font-size: .64rem; @@ -784,7 +789,7 @@ pre:has(code):hover > button { /* Change background color of buttons on hover */ .tabLabels button:hover { - color: var(--active-version-tab); + background-color: var(--active-version-tab-background); } /* Create an active/current tablink class */ @@ -793,7 +798,6 @@ pre:has(code):hover > button { border-bottom: solid 2px currentColor; transition: border-bottom .2s; background-color: var(--active-version-tab-background); - border-radius: 0.6rem 0.6rem 0 0; } /* Style the tab content */ @@ -955,7 +959,36 @@ pre:has(code):hover > button { width: 40%; } - .homepage-navigation { + /* Change the horizontal card to be rendered as a vertical one with aspect-ratio 1 */ + .horizontal-card { + flex-direction: column; + height: auto; + align-items: center; + width: 40%; + min-height: 0; + aspect-ratio: 1; + container-type: inline-size; + } + .horizontal-card > .card-text-container { + height: 30%; + flex: 0 0 auto; + font-size: 12cqi; + font-weight: 600; + } + .horizontal-card > .card-text-container:last-child { + padding-top: 0; + } + .horizontal-card > .card-text-container > *:last-child:not(:only-child) { + display: none; + } + .horizontal-card > .card-text-container > *:first-child:not(:only-child) { + margin-bottom: 0; + } + .horizontal-card > .card-image-container { + flex-basis: 70%; + } + /* Wrap homepage navigation cards */ + .homepage-navigation { flex-wrap: wrap; } diff --git a/docs/getting_started/index.md b/docs/getting_started/index.md index eb0616186..60ee989a2 100644 --- a/docs/getting_started/index.md +++ b/docs/getting_started/index.md @@ -125,26 +125,26 @@ To simplify the login and avoid being prompted every time to enter your NCI pass An SSH-agent is an SSH key manager that avoids you having to enter your passphrase every time you connect to a server.
To add the SSH key to the SSH-agent: - -
- - -
- -
- -
-
    -
  1. - On your local machine, start the SSH-agent by running: - 
    eval "$(ssh-agent -s)"
    - - eval "$(ssh-agent -s)" - Agent pid <agent-PID> - -
    2. -
  2. - Add your SSH key to the SSH-agent by running: +
      +
    1. + On your local machine, start the SSH-agent by running: + 
      eval "$(ssh-agent -s)"
      + + eval "$(ssh-agent -s)" + Agent pid <agent-PID> + +
      2. +
    2. + Add your SSH key to the SSH-agent by running: + +
      + + +
      + +
      + + 
      ssh-add --apple-use-keychain ~/.ssh/id_gadi
      You will be prompted to enter your SSH key passphrase, which will be stored inside the SSH-agent: @@ -155,22 +155,9 @@ To simplify the login and avoid being prompted every time to enter your NCI pass
      If you are using a MacOS version prior to Monterey (12.0), substitute the --apple-use-keychain flag with -K.
      -
      3. -
    -
- -
-
    -
  1. - On your local machine, start the SSH-agent by running: - 
    eval "$(ssh-agent -s)"
    - - eval "$(ssh-agent -s)" - Agent pid <agent-PID> - -
    2. -
  2. - Add your SSH key to the SSH-agent by running: +
+ + 
ssh-add ~/.ssh/id_gadi
You will be prompted to enter your SSH key passphrase, which will be stored inside the SSH-agent: @@ -178,11 +165,11 @@ To simplify the login and avoid being prompted every time to enter your NCI pass Enter passphrase for <$HOME>/.ssh/id_gadi: Identity added: <$HOME>/.ssh/id_gadi <$USER@hostname> - - -
-
- +
+
+ + +
  • Create/Update the SSH config file diff --git a/docs/models/configurations/index.md b/docs/models/configurations/index.md index a864ae6d0..6a9a0f622 100644 --- a/docs/models/configurations/index.md +++ b/docs/models/configurations/index.md @@ -1,48 +1,37 @@ # Supported ACCESS Model Configurations
    - - -
    - -
    -
    - ACCESS-CM - - ACCESS-CM is a global climate model that includes the atmosphere, land, ocean and sea-ice components, and produces physical climate simulations. - -
    +     +
    + +
    +
    + ACCESS-CM + + ACCESS-CM is a global climate model that includes the atmosphere, land, ocean and sea-ice components, and produces physical climate simulations. + +
    - -
    - -
    -
    - ACCESS-ESM - - ACCESS-ESM is a global climate model with additional land and ocean biogeochemical components to simulate both the physical climate and global biogeochemical cycles. - -
    +     +
    + +
    +
    + ACCESS-ESM + + ACCESS-ESM is a global climate model with additional land and ocean biogeochemical components to simulate both the physical climate and global biogeochemical cycles. + +
    - -
    - -
    -
    - ACCESS-OM - - ACCESS-OM is a global coupled ocean and sea ice model used to understand both physical and biogeochemical processes in the ocean. - -
    +     +
    + +
    +
    + ACCESS-OM + + ACCESS-OM is a global coupled ocean and sea ice model used to understand both physical and biogeochemical processes in the ocean. + +
    \ No newline at end of file diff --git a/docs/models/index.md b/docs/models/index.md index 81860b441..81ecbc697 100644 --- a/docs/models/index.md +++ b/docs/models/index.md @@ -10,7 +10,7 @@ ACCESS models are computer codes comprising complex mathematical representations ## Supported ACCESS Model Configurations
    - +
    @@ -21,7 +21,7 @@ ACCESS models are computer codes comprising complex mathematical representations
    - +
    @@ -32,7 +32,7 @@ ACCESS models are computer codes comprising complex mathematical representations
    • - +
    From 15467044277215c017f66684c993aa639a7c84c4 Mon Sep 17 00:00:00 2001 From: atteggiani Date: Wed, 23 Aug 2023 19:37:01 +1000 Subject: [PATCH 12/19] Added responsiveness footer --- docs/css/access-nri.css | 91 ++++++++++++++++++++------- docs/models/model_components/index.md | 18 +++--- mkdocs.yml | 2 +- overrides/partials/footer.html | 6 +- 4 files changed, 81 insertions(+), 36 deletions(-) diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css index f39e787c3..cdfa1aaf3 100644 --- a/docs/css/access-nri.css +++ b/docs/css/access-nri.css @@ -453,61 +453,87 @@ h1.homepage { */ .md-footer-meta.md-typeset.md-grid { color: var(--md-footer-fg-color--light); + padding: 0.2rem; display: flex; flex-direction: row; - flex-wrap: wrap; - align-items: center; + flex-wrap: nowrap; justify-content: center; + align-items: stretch; + gap: 0.1rem; + height: 7rem; } .md-footer-meta.md-typeset.md-grid > * { - color: var(--tab-text); + color: var(--md-footer-fg-color--light); display: inline-flex; flex-direction: column; } /* Funding */ -.md-footer-meta.md-typeset.md-grid :first-child { - flex-basis: 15%; +.funding { + flex-basis: 20%; } /* Partners */ -.md-footer-meta.md-typeset.md-grid :last-child { +.partners { flex-basis: 80%; } /* Text */ -.md-footer-meta.md-typeset.md-grid > * > :first-child { +:is(.funding,.partners) > *:first-child { font-size: 1.2em; font-weight: 500; - text-align: center; - padding: 0.2rem; - margin: 0.3rem 0; + display: flex; + justify-content: center; + align-items: center; + flex-grow: 0; + height: 20%; } /* Logos */ -.md-footer-meta.md-typeset.md-grid > * > :last-child { +:is(.funding,.partners) > *:last-child { display: flex; flex-wrap: wrap; - flex-direction: row; + justify-content: space-around; + align-items: center; + flex-grow: 0; + height: 80%; +} + +:is(.funding,.partners) > *:last-child a { + max-width: calc(3vw + 3rem); + max-height: 100%; + padding: 0.5rem; +} + +.md-footer-meta__inner > * { + display: flex; justify-content: center; align-items: center; - height: 100px; + margin: 0.5rem; + padding: 0; } -.md-footer-meta.md-typeset.md-grid > * > :last-child a { - max-width: 100px; - max-height: 100px; - margin: 0 auto; - padding: 0.2rem; +.md-copyright { + width: auto; } -.md-footer-meta.md-typeset.md-grid > :last-child > :last-child a { - padding: 0.5rem; +.md-social > * { + display: flex; + justify-content: center; + align-items: center; } -.md-footer-meta.md-typeset.md-grid > * > :last-child img { - object-fit: contain; - max-height: 100%; - max-width: 100%; +.md-footer hr { + border-bottom: 0.03rem solid rgba(var(--tab-text-color),0.5); + display: flow-root; + margin: 0 0.2rem; +} + +.separation { + height: 80%; + width: 0.1rem; + border-radius: 1rem; + background-color: var(--md-footer-fg-color--light); + align-self: center; } /* =============================================================== @@ -1023,4 +1049,21 @@ pre:has(code):hover > button { font-size: calc(2.9vw + 0.15rem); } + /* Footer */ + .md-footer-meta.md-typeset.md-grid { + height: 11rem; + } + :is(.funding,.partners) > *:first-child { + font-size: calc(1vw + 0.5rem); + } + :is(.funding,.partners) > *:last-child a { + max-width: calc(6vw + 2rem); + } + + .md-footer-meta__inner { + flex-direction: column; + } + .md-footer-meta__inner > * { + gap: 1rem; + } } diff --git a/docs/models/model_components/index.md b/docs/models/model_components/index.md index b30457238..e599976fd 100644 --- a/docs/models/model_components/index.md +++ b/docs/models/model_components/index.md @@ -1,55 +1,55 @@ # Model Components ACCESS model components represent different chemical, physical or biological parts of the Earth System.
    - +
    Atmosphere
    Atmosphere
     - +
    Land
    Land
     - +
    Ocean
    Ocean
     - +
    Sea Ice
    Sea Ice
     - +
    Aerosols
    Aerosols
     - +
    Atmospheric Chemistry
    Atmospheric Chemistry
     - +
    Biogeochemistry Land
    Biogeochemistry Land
     - +
    Biogeochemistry Ocean
    Biogeochemistry Ocean
     - +
    Coupler
    diff --git a/mkdocs.yml b/mkdocs.yml index d727916ca..bccfb69c5 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -60,7 +60,7 @@ copyright: Copyright © 2022 ACCESS-NRI plugins: - git-revision-date-localized: type: date - enable_creation_date: true + enable_creation_date: false - search: separator: '[\s\-,:!=\[\]()"/]+|(?!\b)(?=[A-Z][a-z])|\.(?!\d)|&[lg]t;' - macros diff --git a/overrides/partials/footer.html b/overrides/partials/footer.html index 933c70936..b071e57d0 100644 --- a/overrides/partials/footer.html +++ b/overrides/partials/footer.html @@ -19,7 +19,7 @@