From ca361c494e07602840da6721ed09746d4fecacbf Mon Sep 17 00:00:00 2001
From: Jasmeen Kaur <u6871990@anu.edu.au>
Date: Wed, 12 Jul 2023 13:46:51 +1000
Subject: [PATCH] :lipstick: (#416): Added the home page squared card imgs

---
 docs/css/access-nri.css | 30 ++++++++++++++++++++++++++----
 docs/index.md           | 10 +++++-----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css
index 5f60f9b56..a126cc98e 100644
--- a/docs/css/access-nri.css
+++ b/docs/css/access-nri.css
@@ -377,6 +377,27 @@ h3 {
   border-radius: 0.6em;
 }
 
+/* ===============================================================
+  Model components cards
+*/
+.squared-card-image {
+  height: 75%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5em 0.5em 0 0.5em;
+}
+
+/* ===============================================================
+  Home page navigation cards
+*/
+.home-page-sq-card {
+  flex: 1;
+  overflow: hidden;
+  border-radius: 15px 15px 0 0;
+  object-fit: cover;
+}
+
 /* =============================================================== 
   Model configuration images 
 */
@@ -431,10 +452,11 @@ h3 {
 }
 
 .squared-card-image {
-  flex: 1;
-  overflow: hidden;
-  border-radius: 15px 15px 0 0;
-  object-fit: cover;
+  height: 75%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5em 0.5em 0 0.5em;
 }
 
 .squared-card-image >img {
diff --git a/docs/index.md b/docs/index.md
index d8145bca5..2a3b97dc7 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -16,23 +16,23 @@
 ## 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>
+        <img src="assets/ACCESS-MODEL.png" alt="Models" class="home-page-sq-card"></img>
         <div class="squared-card-text 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>
+        <img src="assets/get_started_example.png" alt="Run a Model" class="home-page-sq-card"></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">
-        <img src="assets/resources_example.png" alt="Model Evaluation" class="squared-card-image"></img>
+        <img src="assets/resources_example.png" alt="Model Evaluation" class="home-page-sq-card"></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">
-        <img src="assets/community-forum-homepage.png" alt="Community Resources" class="squared-card-image"></img>
+        <img src="assets/community-forum-homepage.png" alt="Community Resources" class="home-page-sq-card"></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">
-        <img src="assets/forum_screenshot.png" alt="Community Forum" class="squared-card-image"></img>
+        <img src="assets/forum_screenshot.png" alt="Community Forum" class="home-page-sq-card"></img>
         <div class="squared-card-text highlight-bg bg-color-like-tab bold">Community Forum</div>
     </a>
 </div>