Merge pull request #418 from ACCESS-Hive/jasmeen/minor-hive-ui-tweaks…

…-394

Jasmeen/minor hive UI tweaks 394

docs/about/contact.md

@@ -29,5 +29,5 @@ ACCESS-Hive is an open community supported effort. The underpinning infrastructu
 [access-about]: https://www.access-nri.org.au/about/what-is-access-nri/
 [access-contact]: https://www.access-nri.org.au/contact/
 [issues]: https://github.com/ACCESS-Hive/access-hive.github.io/issues
-[support]: support.md
+[support]: user_support.md
 [access-hive-forum]: https://forum.access-hive.org.au

docs/community_resources/index.md

@@ -10,4 +10,4 @@ Currently, we provide pointers to the following categories:
 - [Variables](./glossaries/glossary_cmip.md)  
 - [Model Evaluation Links](community_model_catalogs)  
 - [Training](training/)  
-- [Events](./events/index.md)  
+- [Events](./events/index.md)  

docs/css/access-nri.css

@@ -11,7 +11,7 @@
   --nri-dark-blue: #115D97;
   --nri-blue: #06AEEF;
   --nri-light-blue: #8ED7F8;
-  --default-fg-color: 220, 220, 220;  /* Color for main text in body, navigation, table of content*/
+  --default-fg-color: 255, 255, 255;  /* 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),.65); /* Inactive tabs */
   --md-default-fg-color--lighter: rgba(var(--default-fg-color),.3); /* pencil for editing page, passed toc items text */
@@ -26,7 +26,7 @@
   --md-primary-fg-color--dark: var(--nri-dark-blue); /* top tab background */
   --primary-bg-color: 237, 237, 237;
   --md-primary-bg-color: rgb(var(--primary-bg-color)); /* top banner text */
-  --md-primary-bg-color--light: rgba(var(--primary-bg-color),0.3); /* search bar 'Search' text */
+  --md-primary-bg-color--light: rgba(var(--primary-bg-color),0.5); /* search bar 'Search' text */
   --md-accent-fg-color: var(--nri-orange); /* link text hover */
   --md-accent-fg-color--transparent: #FAA61916;  /* navigation bar little arrows hover */
   --md-accent-bg-color: var(--nri-dark-blue); /* back to top button text hover */
@@ -172,8 +172,7 @@ h3 {
 */
 .introduction {
   font-size: 1.2em;
-  text-align: justify;
-  padding: 0.3em 0.5em;
+  padding: 1em;
   display: flex;
   align-items: center;
 }
@@ -209,8 +208,7 @@ h3 {
 }
 
 .md-nav:not(.md-nav--primary) {
-  border-left: 1px solid;
-  border-color: var(--navigation-borders);
+  border-left: 1px solid var(--navigation-borders);
 }
 
 /* Make passed items lighter */
@@ -223,7 +221,7 @@ h3 {
   margin-top: 1em;
 }
 
-/* Make toc ligher */
+/* Make toc lighter */
 /* .md-nav--secondary .md-nav__item {
   color: #949db2;
 } */
@@ -419,12 +417,10 @@ h3 {
 }
 
 .squared-card-image {
-  height: 75%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0.5em 0.5em 0 0.5em;
+  flex: 1;
   overflow: hidden;
+  border-radius: 15px 15px 0 0;
+  object-fit: cover;
 }
 
 .squared-card-image >img {
@@ -618,8 +614,8 @@ pre>code {
 /* Highlight the background */
 .highlight-bg {
   background-color: var(--highlight-bg);
-  padding: 0.2em 0.4em;
-  margin: 0.5em 0;
+  padding: 0.2em 0.6em;
+  margin: 0.6em 0;
   width: fit-content;
   height: fit-content;
   border-radius: 0.3em;

docs/index.md

@@ -16,23 +16,23 @@
 ## Navigating ACCESS-Hive
 <div class="card-container">
     <a href="models" class="squared-card default-text-color">
-        <div class="squared-card-image"><img src="assets/ACCESS-MODEL.png" alt="Models"></img></div>
+        <img src="assets/ACCESS-MODEL.png" alt="Models" class="squared-card-image"></img>
         <div class="squared-card-text highlight-bg bg-color-like-tab bold">Models</div>
     </a>
-    <a href="models/running-a-model" class="squared-card default-text-color">
-        <div class="squared-card-image"><img src="assets/get_started_example.png" alt="Run a Model"></img></div>
+    <a href="models/run-a-model" class="squared-card default-text-color">
+        <img src="assets/get_started_example.png" alt="Run a Model" class="squared-card-image"></img>
         <div class="squared-card-text highlight-bg bg-color-like-tab bold">Run a Model</div>
     </a>
     <a href="model_evaluation" class="squared-card default-text-color">
-        <div class="squared-card-image"><img src="assets/resources_example.png" alt="Model Evaluation"></img></div>
+        <img src="assets/resources_example.png" alt="Model Evaluation" class="squared-card-image"></img>
         <div class="squared-card-text highlight-bg bg-color-like-tab bold">Model Evaluation</div>
     </a>
     <a href="community_resources" class="squared-card default-text-color">
-        <div class="squared-card-image"><img src="assets/community-forum-homepage.png" alt="Community Resources"></img></div> 
+        <img src="assets/community-forum-homepage.png" alt="Community Resources" class="squared-card-image"></img>
         <div class="squared-card-text highlight-bg bg-color-like-tab bold">Community Resources</div>
     </a>
     <a href="https://forum.access-hive.org.au" target="_blank" class="squared-card default-text-color">
-        <div class="squared-card-image"><img src="assets/forum_screenshot.png" alt="Community Forum"></img></div> 
+        <img src="assets/forum_screenshot.png" alt="Community Forum" class="squared-card-image"></img>
         <div class="squared-card-text highlight-bg bg-color-like-tab bold">Community Forum</div>
     </a>
 </div>

mkdocs.yml

@@ -15,14 +15,14 @@ theme:
   name: material
   custom_dir: overrides
   palette:
-    - scheme: custom-light
-      toggle:
-        icon: material/theme-light-dark
-        name: Switch to dark mode
     - scheme: custom-dark
       toggle:
         icon: material/theme-light-dark
         name: Switch to light mode
+    - scheme: custom-light
+      toggle:
+        icon: material/theme-light-dark
+        name: Switch to dark mode
 
   features:
     - navigation.top