Added banner for training/worshop 2024. Minor restructure to CSS to a…

…void duplication of padding in cards. Same rendering. (#763)

Co-authored-by: Felicity Chun <[email protected]>

docs/css/access-nri.css

@@ -223,6 +223,8 @@
   width: clamp(100px,30%,250px);
   min-height: 0;
   container-type: inline-size;
+  padding: 0.4rem;
+  gap: 0.2rem;
 }
 
 .horizontal-card {
@@ -232,6 +234,8 @@
   align-items: stretch;
   width: 100%;
   height: 8rem;
+  padding: 0.4rem;
+  gap: 0.2rem;
 }
 
 .card-text-container {
@@ -258,23 +262,19 @@
 
 .vertical-card > .card-image-container {
   flex-basis: 70%;
-  padding: 3.5%;
 }
 .vertical-card > .card-text-container {
   height: 30%;
   flex-grow: 0;
   flex-shrink: 0;
   font-size: 10cqi;
-  padding: 3.5%;
 }
 
 .horizontal-card > .card-image-container {
   flex-basis: 25%;
-  padding: 0.4rem;
 }
 .horizontal-card > .card-text-container {
   flex-basis: 75%;
-  padding: 0.4rem;
 }
 
 .card-image-container > img {
@@ -283,13 +283,6 @@
   border-radius: 0.35rem;
 }
 
-.vertical-card > .card-text-container:last-child {
-  padding-top: 0;
-}
-.vertical-card > .card-text-container:first-child {
-  padding-bottom: 0;
-}
-
 .horizontal-card > .card-text-container > *:first-child:not(:only-child) {
   margin-bottom: 0.5em;
 }
@@ -421,7 +414,6 @@ h1.homepage {
 .homepage-buttons .card-text-container {
   height: 1.8em;
   font-size: 2em;
-  padding: 2.5%;
 }
 
 /* Navigation cards in homepage */
@@ -1326,9 +1318,6 @@ img.intro-img {
     height: 8vw;
     border-radius: 2vw;
   }
-  .homepage-buttons .card-text-container {
-    padding: 0;
-  }
 }
 
 
@@ -1358,13 +1347,6 @@ img.intro-img {
     flex: 0 0 auto;
     font-size: 10cqi;
     font-weight: 600;
-    padding: 3.5%;
-  }
-  .horizontal-card > .card-image-container {
-    padding: 3.5%;
-  }
-  .horizontal-card > .card-text-container:last-child {
-    padding-top: 0;
   }
   .horizontal-card > .card-text-container > *:last-child:not(:only-child) {
     display: none;
@@ -1460,7 +1442,6 @@ img.intro-img {
 }
 .card-container.homepage-buttons.workshop .card-text-container {
   height: 100%;
-  padding: 0.4rem 0.4rem 0.4rem 0;
 }
 .card-container.homepage-buttons.workshop .card-text-container > span {
   background-color: var(--nri-orange);
@@ -1494,7 +1475,6 @@ img.intro-img {
   }
   .card-container.homepage-buttons.workshop .card-text-container {
     flex-basis: 100%;
-    padding: 0;
   }
 }
 @media screen and (width <= 550px) {

docs/index.md

@@ -16,7 +16,20 @@ hide:
         <img src="assets/ACCESS_icon_HIVE.png">
     </div>
 </div>
-
+<!-- TEMPORARY for workshop -->
+<div class="card-container homepage-buttons workshop">
+    <a href="/community_resources/access_workshop_2024" class="horizontal-card" style="height: 3rem;">
+        <div class="card-image-container" style="flex-basis: 20%">
+            <img src="/assets/ACCESS_NRI_full_logo.png" class="white-background img-contain"></img>
+        </div>
+        <div class="card-text-container" style="flex-grow: 1;">
+            <span class="bold small-text">
+                ACCESS Training Day and Workshop 2024
+            </span>
+        </div>
+    </a>
+</div>
+<!-- TEMPORARY for workshop -->
 <div class="card-container homepage-buttons">
     <a href="/getting_started" class="vertical-card">
         <div class="bold">New ACCESS user?</div>

docs/model_evaluation/evaluation_on_gadi/model_live_diagnostics.md

@@ -10,7 +10,7 @@ Below, we show an example of the Model Live Diagnostics Tool. For more informati
 <!-- <div class="card-container">
     <a href="https://med-live-diagnostics.readthedocs.io/en/latest/index.html" class="vertical-card aspect-ratio2to1" target="_blank">
         <div class="card-image-container">
-            <img src="../../../assets/access_logo_rgb.svg" alt="ACCESS-NRI Model Diagnostics Documentation" class="img-contain white-background with-padding"></img>
+            <img src="../../../assets/ACCESS_NRI_full_logo.png" alt="ACCESS-NRI Model Diagnostics Documentation" class="img-contain white-background with-padding"></img>
         </div>
         <div class="card-text-container bold ">Model Diagnostics Documentation</div>
     </a>

docs/model_evaluation/model_diagnostics/index.md

@@ -12,7 +12,7 @@ For more information and tutorials, please visit <a href="https://med-live-diagn
 <!-- <div class="card-container">
     <a href="https://med-live-diagnostics.readthedocs.io/en/latest/index.html" class="vertical-card aspect-ratio2to1" target="_blank">
         <div class="card-image-container">
-            <img src="../../../assets/access_logo_rgb.svg" alt="ACCESS-NRI Model Diagnostics Documentation" class="img-contain white-background with-padding"></img>
+            <img src="../../../assets/ACCESS_NRI_full_logo.png" alt="ACCESS-NRI Model Diagnostics Documentation" class="img-contain white-background with-padding"></img>
         </div>
         <div class="card-text-container bold ">Model Diagnostics Documentation</div>
     </a>