Merge pull request #431 from ACCESS-Hive/davide/fixes

Davide/fixes

docs/css/access-nri.css

@@ -11,9 +11,9 @@
   --nri-dark-blue: #115D97;
   --nri-blue: #06AEEF;
   --nri-light-blue: #8ED7F8;
-  --default-fg-color: 255, 255, 255;  /* Color for main text in body, navigation, table of content*/
+  --default-fg-color: 230, 230, 230;  /* 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--light: rgba(var(--default-fg-color),.7); /* Inactive tabs */
   --md-default-fg-color--lighter: rgba(var(--default-fg-color),.3); /* pencil for editing page, passed toc items text */
   --md-default-fg-color--lightest: rgba(var(--default-fg-color),.07);
   --default-bg-color: 46, 51, 62; /* Color for main background */
@@ -172,7 +172,7 @@ h3 {
 */
 .introduction {
   font-size: 1.2em;
-  padding: 1em;
+  padding: .7em;
   display: flex;
   align-items: center;
 }
@@ -396,11 +396,16 @@ h3 {
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid var(--card-borders);
+  border: 1.3px solid var(--card-borders);
   border-radius: 15px;
   box-shadow: 6px 6px 10px var(--card-shadows);
 }
 
+.card-container > * > * {
+  flex-grow: 1;
+}
+
+
 /* Single card hover */
 .card-container > *:hover {
   border-color: var(--md-accent-fg-color);
@@ -413,21 +418,24 @@ h3 {
   flex-direction: column;
   max-width: 30%;
   aspect-ratio: 1;
-  flex-grow: 1;
 }
 
-.squared-card-image {
-  flex: 1;
+.squared-card-image-container {
+  height: 75%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0.6em 0.6em 0 0.6em;
   overflow: hidden;
-  border-radius: 15px 15px 0 0;
-  object-fit: cover;
+  border-radius: 8px;
 }
 
-.squared-card-image >img {
-  width: 80%
+.squared-card-image-container > img {
+  width: 100%;
+  height: 100%;
 }
 
-.squared-card-text {
+.squared-card-text-container {
   height: 25%;
   display: flex;
   flex-direction: column;
@@ -441,25 +449,32 @@ h3 {
   width: 100%;
   height: 10em;
   overflow: hidden;
+  align-items: stretch;
 }
 
-.rectangular-card-image {
-  height: 100%;
+.rectangular-card-image-container {
+  width: 35%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0.6em 0 0.6em 0.6em;
+  overflow: hidden;
+  border-radius: 8px;
 }
 
-.rectangular-card-image > img {
-  height: inherit;
+.rectangular-card-image-container > img {
+  height: 100%;
+  width: 100%;
 }
 
-.rectangular-card-text {
+.rectangular-card-text-container {
   padding: 0 1em;
   height: 100%;
   width: 65%;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
-  text-align: justify;
 }
 
 .configuration-card {
@@ -634,7 +649,7 @@ pre>code {
 /* With borders */
 .with-border {
   border-radius: 7px;
-  border: 1px solid var(--card-borders);
+  border: 1.3px solid var(--card-borders);
   box-sizing: border-box;
 }
 
@@ -645,4 +660,9 @@ pre>code {
 
 .bold {
   font-weight: 600 !important;
+}
+
+/* image cover */
+.img-cover {
+  object-fit: cover;
 }

docs/index.md

@@ -16,24 +16,34 @@
 ## Navigating ACCESS-Hive
 <div class="card-container">
     <a href="models" class="squared-card default-text-color">
-        <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>
+        <div class="squared-card-image-container">
+            <img class="img-cover" src="assets/ACCESS-MODEL.png" alt="Models">
+        </div>
+        <div class="squared-card-text-container highlight-bg bg-color-like-tab bold">Models</div>
     </a>
     <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>
+        <div class="squared-card-image-container">
+            <img class="img-cover" src="assets/get_started_example.png" alt="Run a Model">
+        </div>
+        <div class="squared-card-text-container highlight-bg bg-color-like-tab bold">Run a Model</div>
     </a>
     <a href="model_evaluation" class="squared-card default-text-color">
-        <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>
+        <div class="squared-card-image-container">
+            <img class="img-cover" src="assets/resources_example.png" alt="Model Evaluation">
+        </div>
+        <div class="squared-card-text-container highlight-bg bg-color-like-tab bold">Model Evaluation</div>
     </a>
     <a href="community_resources" class="squared-card default-text-color">
-        <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>
+        <div class="squared-card-image-container">
+            <img class="img-cover" src="assets/community-forum-homepage.png" alt="Community Resources">
+        </div>
+        <div class="squared-card-text-container 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">
-        <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>
+        <div class="squared-card-image-container">
+            <img class="img-cover" src="assets/forum_screenshot.png" alt="Community Forum">
+        </div>
+        <div class="squared-card-text-container highlight-bg bg-color-like-tab bold">Community Forum</div>
     </a>
 </div>
 
@@ -43,10 +53,10 @@
 ## Contribute to ACCESS-Hive [^1]
 <div class="card-container">
     <a href="contribute/" target="_blank" class="rectangular-card default-text-color">
-        <div class="rectangular-card-image">
+        <div class="rectangular-card-image-container">
             <img src="assets/how-to-contribute-img.jpg" class="cover"></img>
         </div>
-        <div class="rectangular-card-text">
+        <div class="rectangular-card-text-container">
             <span class="highlight-bg bg-color-like-tab bold">Contribute</span>
             <span class="">Join the ACCESS-Hive team and have your contributions onboard!</span>
         </div>

docs/model_evaluation/index.md

@@ -17,61 +17,61 @@ If you are new to model evaluation and diagnostics, we recommend you read our [G
 ### Getting Started
 <div class="card-container">
     <a href="./model_evaluation_getting_started/access_to_gadi_at_nci" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="..//assets/model_evaluation/Gadi-19-2.jpg" alt="Computing Access"></img>
         </div>
-        <div class="squared-card-text bold">Computing Access</div>
+        <div class="squared-card-text-container bold">Computing Access</div>
     </a>
     <a href="./model_evaluation_getting_started/model_evaluation_getting_started" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../assets/model_evaluation/model_evaluation_conda.png" alt="MED Conda Environment"></img>
         </div>
-        <div class="squared-card-text bold">MED Conda Environment</div>
+        <div class="squared-card-text-container bold">MED Conda Environment</div>
     </a>
     <a href="./model_evaluation_getting_started/model_variables" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../assets/model_evaluation/model_evaluation_variables.png" alt="Model Variables"></img>
         </div>
-        <div class="squared-card-text bold">Model Variables</div>
+        <div class="squared-card-text-container bold">Model Variables</div>
     </a>
 </div>
 
 ### Data Catalogs
 <div class="card-container">
     <a href="./model_evaluation_observational_catalogs" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../assets/model_evaluation/model_evaluation_obs_catalog.jpg" alt="A picture of a seismograph recording seismic waves during an earthquake visualises the link to our Observational Data Catalog. Image credit: Wf Sihardian—EyeEm/Getty Images" title="Image credit: Wf Sihardian—EyeEm/Getty Images"></img>
         </div>
-        <div class="squared-card-text bold">Observational Data Catalog</div>
+        <div class="squared-card-text-container bold">Observational Data Catalog</div>
     </a>
     <a href="./model_evaluation_model_catalogs" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../assets/model_evaluation/model_evaluation_model_catalog.jpg" alt="MED Conda Environment"></img>
         </div>
-        <div class="squared-card-text bold">Model Data Catalog</div>
+        <div class="squared-card-text-container bold">Model Data Catalog</div>
     </a>
 </div>
 
 ### Supported Community Frameworks on Gadi
 
 <div class="card-container">
     <a href="./model_evaluation_on_gadi/model_evaluation_on_gadi_ilamb" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../assets/model_evaluation/logo_ilamb.png" alt="ILAMB"></img>
         </div>
-        <div class="squared-card-text bold">ILAMB</div>
+        <div class="squared-card-text-container bold">ILAMB</div>
     </a>
     <a href="./model_evaluation_on_gadi/model_evaluation_on_gadi_esmvaltool" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../assets/model_evaluation/logo_esmvaltool.png" alt="ESMValTool"></img>
         </div>
-        <div class="squared-card-text bold">ESMValTool</div>
+        <div class="squared-card-text-container bold">ESMValTool</div>
     </a>
     <a href="./model_evaluation_on_gadi/model_evaluation_on_gadi_pangeo_cosima" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../assets/model_evaluation/logo_cosima.png" alt="Pangeo/COSIMA"></img>
         </div>
-        <div class="squared-card-text bold">COSIMA cookbook</div>
+        <div class="squared-card-text-container bold">COSIMA cookbook</div>
     </a>
 </div>
 
@@ -90,22 +90,22 @@ While we are working on these, we have collected a number of links to existing t
 
 <div class="card-container">
     <a href="./model_evaluation_getting_started/access_to_gadi_at_nci.md" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="..//assets/model_evaluation/Gadi-19-2.jpg" alt="Model Diagnostics"></img>
         </div>
-        <div class="squared-card-text bold">Model Diagnostics</div>
+        <div class="squared-card-text-container bold">Model Diagnostics</div>
     </a>
     <a href="./model_evaluation_data_processing.md" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../assets/model_evaluation/model_evaluation_formatting.jpg" alt="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/" title="Image credit: https://support.solarwinds.com and https://i.stack.imgur.com/"></img>
         </div>
-        <div class="squared-card-text bold">Data Format Processing</div>
+        <div class="squared-card-text-container bold">Data Format Processing</div>
     </a>
     <a href="./model_evaluation_recipe_gallery.md" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../assets/model_evaluation/model_evaluation_recipe.jpg" alt="A code snippet from the COSIMA documented recipes. Image credit: https://github.com/COSIMA/cosima-recipes" title="Image credit: https://github.com/COSIMA/cosima-recipes"></img>
         </div>
-        <div class="squared-card-text bold">Evaluation Recipe Gallery</div>
+        <div class="squared-card-text-container bold">Evaluation Recipe Gallery</div>
     </a>
 </div> -->
 

docs/model_evaluation/model_evaluation_getting_started/index.md

@@ -6,21 +6,21 @@ Here, we provide you the important information to give you access to the large d
 
 <div class="card-container">
     <a href="./access_to_gadi_at_nci" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../../assets/model_evaluation/Gadi-19-2.jpg" alt="Computing Access"></img>
         </div>
-        <div class="squared-card-text bold">Computing Access</div>
+        <div class="squared-card-text-container bold">Computing Access</div>
     </a>
     <a href="./model_evaluation_getting_started" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../../assets/model_evaluation/model_evaluation_conda.png" alt="MED Conda Environment"></img>
         </div>
-        <div class="squared-card-text bold">MED Conda Environment</div>
+        <div class="squared-card-text-container bold">MED Conda Environment</div>
     </a>
     <a href="./model_variables" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../../assets/model_evaluation/model_evaluation_variables.png" alt="Model Variables"></img>
         </div>
-        <div class="squared-card-text bold">Model Variables</div>
+        <div class="squared-card-text-container bold">Model Variables</div>
     </a>
 </div>

docs/model_evaluation/model_evaluation_on_gadi/index.md

@@ -6,22 +6,22 @@ At the moment, we are actively supporting:
 
 <div class="card-container">
     <a href="../model_evaluation_on_gadi/model_evaluation_on_gadi_ilamb" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../../assets/model_evaluation/logo_ilamb.png" alt="ILAMB"></img>
         </div>
-        <div class="squared-card-text bold">ILAMB</div>
+        <div class="squared-card-text-container bold">ILAMB</div>
     </a>
     <a href="../model_evaluation_on_gadi/model_evaluation_on_gadi_esmvaltool" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../../assets/model_evaluation/logo_esmvaltool.png" alt="ESMValTool"></img>
         </div>
-        <div class="squared-card-text bold">ESMValTool</div>
+        <div class="squared-card-text-container bold">ESMValTool</div>
     </a>
     <a href="../model_evaluation_on_gadi/model_evaluation_on_gadi_pangeo_cosima" class="squared-card default-text-color">
-        <div class="squared-card-image">
+        <div class="squared-card-image-container">
             <img src="../../assets/model_evaluation/logo_cosima.png" alt="Pangeo/COSIMA"></img>
         </div>
-        <div class="squared-card-text bold">COSIMA cookbook</div>
+        <div class="squared-card-text-container bold">COSIMA cookbook</div>
     </a>
 </div>