Fixed

ACCESS-NRI · Jul 13, 2023 · 4efeda9 · 4efeda9
1 parent e2d7908
commit 4efeda9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css
@@ -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,7 +418,6 @@ h3 {
   flex-direction: column;
   max-width: 30%;
   aspect-ratio: 1;
-  flex-grow: 1;
 }
 
 .squared-card-image-container {
@@ -445,14 +449,22 @@ h3 {
   width: 100%;
   height: 10em;
   overflow: hidden;
+  align-items: stretch;
 }
 
 .rectangular-card-image-container {
-  height: 100%;
+  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-container > img {
-  height: inherit;
+  height: 100%;
+  width: 100%;
 }
 
 .rectangular-card-text-container {
@@ -463,7 +475,6 @@ h3 {
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
-  text-align: justify;
 }
 
 .configuration-card {
@@ -638,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;
 }
 

diff --git a/docs/models/index.md b/docs/models/index.md
@@ -2,7 +2,7 @@
 
 ACCESS is a family of related computer models or components that represent
 different parts of the Earth system. ACCESS links various model components through
-software called **couplers** to form different Model Configurations.
+software called couplers to form different Model Configurations.
 
 <div class="with-border image-background">
     <img src="../assets/ACCESS-MODEL.png" style="padding: 2em;" alt="Atmosphere"></img>
@@ -68,9 +68,9 @@ software called **couplers** to form different Model Configurations.
 
 ## ACCESS Model Configurations
 <div class="card-container" style="flex-direction: column">
-    <a href="configurations/access-cm/" class="rectangular-card configuration-card default-text-color">
+    <a href="configurations/access-cm/" class="justified rectangular-card configuration-card default-text-color">
             <div class="rectangular-card-image-container">
-                <img src="../assets/model-config-logos/access-cm2-config-4.png" class="image-background"></img> 
+                <img src="../assets/model-config-logos/access-cm2-config-4.png" class="image-background img-cover"></img> 
             </div>
             <div class="rectangular-card-text-container">
                 <span class="bold" >ACCESS-CM</span>
@@ -79,9 +79,9 @@ software called **couplers** to form different Model Configurations.
                 </span>
             </div>
     </a>
-    <a href="configurations/access-esm/" class="rectangular-card configuration-card default-text-color">
+    <a href="configurations/access-esm/" class="justified rectangular-card configuration-card default-text-color">
             <div class="rectangular-card-image-container">
-                <img src="../assets/model-config-logos/access-esm-config.png" class="image-background"></img> 
+                <img src="../assets/model-config-logos/access-esm-config.png" class="image-background img-cover"></img> 
             </div>
             <div class="rectangular-card-text-container">
                 <span class="bold" >ACCESS-ESM</span>
@@ -90,9 +90,9 @@ software called **couplers** to form different Model Configurations.
                 </span>
             </div>
     </a>
-    <a href="configurations/access-om/" class="rectangular-card configuration-card default-text-color">
+    <a href="configurations/access-om/" class="justified rectangular-card configuration-card default-text-color">
             <div class="rectangular-card-image-container">
-                <img src="../assets/model-config-logos/access-om2-config.png" class="image-background"></img> 
+                <img src="../assets/model-config-logos/access-om2-config.png" class="image-background img-cover"></img> 
             </div>
             <div class="rectangular-card-text-container">
                 <span class="bold" >ACCESS-OM</span>