From 28dae728c97d938b2cd2918de9c22f710fc5d1d6 Mon Sep 17 00:00:00 2001
From: Jasmeen Kaur <u6871990@anu.edu.au>
Date: Fri, 14 Jul 2023 12:45:12 +1000
Subject: [PATCH] :art: (#416): CSS changes

---
 docs/css/access-nri.css | 15 +++++++--------
 docs/index.md           | 14 +++++++++-----
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css
index d20590637..09e3c6c6a 100644
--- a/docs/css/access-nri.css
+++ b/docs/css/access-nri.css
@@ -380,13 +380,13 @@ h3 {
 /* ===============================================================
   Model components cards
 */
-.squared-card-image {
+/* .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
@@ -438,15 +438,14 @@ 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 {
-  width: 80%
+  width: 80%;
 }
 
 .squared-card-text {
diff --git a/docs/index.md b/docs/index.md
index 9d6f6dffc..0e7eb65c5 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -16,23 +16,27 @@
 ## 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="home-page-sq-card"></img>
+        <div>
+            <img src="assets/ACCESS-MODEL.png" alt="Models" class="squared-card-image"></img>
+        </div>
         <div class="squared-card-text highlight-bg nav-tab-btn 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="home-page-sq-card"></img>
+        <div>
+            <img src="assets/get_started_example.png" alt="Run a Model" class="squared-card-image"></img>
+        </div>
         <div class="squared-card-text highlight-bg nav-tab-btn 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="home-page-sq-card"></img>
+        <img src="assets/resources_example.png" alt="Model Evaluation" class="squared-card-image"></img>
         <div class="squared-card-text highlight-bg nav-tab-btn 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="home-page-sq-card"></img>
+        <img src="assets/community-forum-homepage.png" alt="Community Resources" class="squared-card-image"></img>
         <div class="squared-card-text highlight-bg nav-tab-btn 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="home-page-sq-card"></img>
+        <img src="assets/forum_screenshot.png" alt="Community Forum" class="squared-card-image"></img>
         <div class="squared-card-text highlight-bg nav-tab-btn bold">Community Forum</div>
     </a>
 </div>