💄 (#416): Added the home page squared card imgs

ACCESS-NRI · Jul 12, 2023 · ca361c4 · ca361c4
1 parent 38183f3
commit ca361c4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git 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
@@ -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>