Automatically merge 'development' to 'main'.

Merge commit issued by the automatic_merge workflow.
ACCESS-NRI · Sep 22, 2024 · b62ac97 · b62ac97
2 parents bb47525 + de486b2
commit b62ac97
Show file tree

Hide file tree

Showing 17 changed files with 312 additions and 360 deletions.
diff --git a/README.md b/README.md
@@ -97,7 +97,7 @@ The following custom tags are available:
 |**Code block**|\```<br>&emsp;code block<br>```|\<pre><br>&emsp;\<code>code block\</code><br>\</pre>|<pre><code>code block</code></pre>|
 |**[Admonition](https://squidfunk.github.io/mkdocs-material/reference/admonitions/#usage) (not collapsible)**|!!! warning<br>&emsp;this is a warning admonition|\<div class="admonition warning"><br>&emsp;this is a warning<br>&emsp;admonition<br>\<div>|![warning admonition](docs/assets/assets_for_readme/warning_admonition.png)|
 |**Collapsible [Admonition](https://squidfunk.github.io/mkdocs-material/reference/admonitions/#usage)**|??? warning title<br>&emsp;this is a collapsible warning admonition|\<details class="warning"><br>&emsp;\<summary><br>&emsp;&emsp;\<p><br>&emsp;&emsp;&emsp;this is a collapsible<br>&emsp;&emsp;&emsp;warning admonition<br>&emsp;&emsp;\</p><br>&emsp;\</summary><br>\</details>|![collapsible warning admonition](docs/assets/assets_for_readme/collapsible_warning_admonition.gif)|
-|**Tabs**|N/A|\<div class="tabLabels" label="your-tab-label"><br>&emsp;\<button>Tab1\</button><br>&emsp;\<button>Tab2\</button><br>\</div><br>\<div class="tabContents" label="your-tab-label"><br>&emsp;\<div><br>&emsp;&emsp;Content for tab1<br>&emsp;\</div><br>&emsp;\<div><br>&emsp;&emsp;Content for tab2<br>&emsp;\</div><br>\</div>|![tabs](docs/assets/assets_for_readme/tabs.gif)|
+|**Tabs**|N/A|\<div class="tabLabels" label="your-tab-label"><br>&emsp;\<button id="id-tab1">Tab1\</button id="id-tab2"><br>&emsp;\<button>Tab2\</button><br>\</div><br>\<div contentfor="id-tab1"><br>&emsp;&emsp;Content for tab1<br>&emsp;\</div><br>&emsp;\<div contentfor="id-tab2"><br>&emsp;&emsp;Content for tab2<br>&emsp;\</div>|![tabs](docs/assets/assets_for_readme/tabs.gif)|
 
 
 # License

diff --git a/docs/community_resources/access_workshop_2024/index.md b/docs/community_resources/access_workshop_2024/index.md
@@ -6,16 +6,16 @@
 
 Setup requirements can be found on the Training Materials page linked below.
 
-<div class="card-container workshop-page">
-    <a href="https://www.access-nri.org.au/wp-content/uploads/2024/08/Schedule_and_session_details_with_hackathon.pdf" class="horizontal-card" target="_blank">
+<div class="card-container">
+    <a href="https://www.access-nri.org.au/wp-content/uploads/2024/08/Schedule_and_session_details_with_hackathon.pdf" class="horizontal-card small-card" target="_blank">
         <div class="card-image-container">
             <img src="/assets/ACCESS_icon_case_studies.png" class="img-contain"></img> 
         </div>
         <div class="card-text-container">
             <span class="bold" >Training Day Program<br>(2 Sep 2024)</span>
         </div>
     </a>
-    <a href="/community_resources/access_workshop_2024/training_materials" class="horizontal-card">
+    <a href="/community_resources/access_workshop_2024/training_materials" class="horizontal-card small-card">
         <div class="card-image-container">
             <img src="/assets/ACCESS_icon_training.png" class="img-contain"></img> 
         </div>
@@ -25,8 +25,8 @@ Setup requirements can be found on the Training Materials page linked below.
     </a>
 </div>
 <br>
-<div class="card-container workshop-page">
-    <a href="https://www.access-nri.org.au/access-community-workshop-2024-program/" class="horizontal-card" target="_blank">
+<div class="card-container">
+    <a href="https://www.access-nri.org.au/access-community-workshop-2024-program/" class="horizontal-card small-card" target="_blank">
         <div class="card-image-container">
             <img src="/assets/ACCESS_icon_publications.png" class="img-contain"></img> 
         </div>

diff --git a/docs/community_resources/index.md b/docs/community_resources/index.md
@@ -1,14 +1,12 @@
 # Community Resources
 
 <div class="card-container">
-    <!-- TEMPORARY for Workshop -->
     <a href="/community_resources/workshops_events_archive" class="vertical-card aspect-ratio1to1">
         <div class="card-image-container">
             <img class="white-background" src="/assets/workshop_and_events.jpeg" alt="ACCESS Workshop 2023">
         </div>
         <div class="card-text-container bold">Workshops and Events Archive</div>
     </a>
-    <!-- TEMPORARY for Workshop -->
     <a href="https://forum.access-hive.org.au/" class="vertical-card aspect-ratio1to1" target="_blank">
         <div class="card-image-container">
             <img class="img-contain white-background" src="/assets/access_hive_forum_icon.png" alt="ACCESS-Hive Forum">

diff --git a/docs/community_resources/workshops_events_archive/access_workshop_2023/index.md b/docs/community_resources/workshops_events_archive/access_workshop_2023/index.md
@@ -1,15 +1,15 @@
 # ACCESS Community Workshop 2023
 
-<div class="card-container workshop-page">
-    <a href="https://www.access-nri.org.au/access-training-day-program/" class="horizontal-card" target="_blank">
+<div class="card-container">
+    <a href="https://www.access-nri.org.au/access-training-day-program/" class="horizontal-card small-card" target="_blank">
         <div class="card-image-container">
             <img src="/assets/ACCESS_icon_case_studies.png" class="img-contain"></img> 
         </div>
         <div class="card-text-container">
             <span class="bold" >Training Day Program<br>(4 Sep 2023)</span>
         </div>
     </a>
-    <a href="/community_resources/workshops_events_archive/access_workshop_2023/training_materials" class="horizontal-card">
+    <a href="/community_resources/workshops_events_archive/access_workshop_2023/training_materials" class="horizontal-card small-card">
         <div class="card-image-container">
             <img src="/assets/ACCESS_icon_training.png" class="img-contain"></img> 
         </div>
@@ -19,16 +19,16 @@
     </a>
 </div>
 <br>
-<div class="card-container workshop-page">
-    <a href="https://www.access-nri.org.au/access-workshop-2023-program/" class="horizontal-card" target="_blank">
+<div class="card-container">
+    <a href="https://www.access-nri.org.au/access-workshop-2023-program/" class="horizontal-card small-card" target="_blank">
         <div class="card-image-container">
             <img src="/assets/ACCESS_icon_publications.png" class="img-contain"></img> 
         </div>
         <div class="card-text-container">
             <span class="bold" >Main Workshop Program<br>(5-6 Sep 2023)</span>
         </div>
     </a>
-    <a href="https://forum.access-hive.org.au/c/access-workshop-2023/61/none" class="horizontal-card" target="_blank">
+    <a href="https://forum.access-hive.org.au/c/access-workshop-2023/61/none" class="horizontal-card small-card" target="_blank">
         <div class="card-image-container">
             <img src="/assets/access_hive_forum_icon.png" class="img-contain" style="padding: 0;"></img> 
         </div>

diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css
@@ -233,9 +233,9 @@
   justify-content: center;
   align-items: stretch;
   width: 100%;
-  height: 8rem;
+  height: 6rem;
   padding: 0.4rem;
-  gap: 0.2rem;
+  gap: 0.4rem;
 }
 
 .card-text-container {
@@ -308,6 +308,7 @@
   transition-property: all;
   transition-duration: 0.4s;
 }
+
 /* =============================================================== 
   Main body
 */
@@ -1096,6 +1097,7 @@ img.terminalSwitch {
 img.terminalSwitch:hover {
   cursor: pointer;
 }
+
 /* =============================================================== 
   General styling for html tabs
 */
@@ -1141,18 +1143,11 @@ img.terminalSwitch:hover {
 }
 
 /* Style the tab content */
-.tabContents > * {
+[tabcontentfor] {
   display: none;
 }
-
-.tabContents > .activeTabContent {
-  display: block;
-}
-
-.version-tabs {
-  margin-bottom: 0.3rem;
-  font-size: 1.2em;
-  width: 100%;
+[tabcontentfor].activeTab {
+  display: contents;
 }
 
 /* =============================================================== 
@@ -1323,19 +1318,26 @@ img.intro-img {
     height: 11rem;
   }
 }
+
+@media screen and (width > 600px) {
+  .small-card {
+    max-height: 5rem;
+    max-width: 40%;
+  }
+}
+
 @media screen and (width <= 600px) {
   .vertical-card {
     width: 40%;
   }
 
   /* Change the horizontal card to be rendered as a vertical one with aspect-ratio 1 */
   .horizontal-card {
+    align-items: center;
     flex-direction: column;
     height: auto;
-    align-items: center;
-    width: 40%;
-    min-height: 0;
     aspect-ratio: 1;
+    width: 40%;
     container-type: inline-size;
   }
   .horizontal-card > .card-text-container {
@@ -1421,73 +1423,4 @@ img.intro-img {
   .md-header__img {
     display: flex;
   }
-}
-
-
-/* =============================================================== 
-  TEMPORARY for workshop
-*/
-
-/* Homepage button */
-.card-container.homepage-buttons.workshop {
-  max-width: 60%;
-  margin: 1.5rem auto;
-}
-.card-container.homepage-buttons.workshop > .horizontal-card {
-  max-height: 5rem;
-}
-.card-container.homepage-buttons.workshop .card-text-container {
-  height: 100%;
-}
-.card-container.homepage-buttons.workshop .card-text-container > span {
-  background-color: var(--nri-orange);
-  color: rgb(10,10,10);
-}
-
-/* Workshop page */
-.card-container.workshop-page {
-  justify-content: space-around;
-}
-
-/* Training materials page */
-.workshop-training {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-.workshop-training > * {
-  width: fit-content;
-}
-
-@media screen and (width > 550px) {
-  .card-container.workshop-page > .horizontal-card {
-    max-width: 40%;
-    max-height: 5rem;
-  }
-}
-@media screen and (width < 800px) {
-  .card-container.homepage-buttons.workshop > .horizontal-card > :first-child {
-    display: none;
-  }
-  .card-container.homepage-buttons.workshop .card-text-container {
-    flex-basis: 100%;
-  }
-}
-@media screen and (width <= 550px) {
-  .homepage-buttons.workshop > .horizontal-card {
-    flex-direction: row;
-    height: 15vw;
-    width: 100%;
-    align-items: stretch;
-    min-height: 0;
-    aspect-ratio: unset;
-    container-type: inline-size;
-  }
-  .homepage-buttons.workshop > .horizontal-card > .card-text-container {
-    font-size: 10cqi;
-    font-weight: 600;
-  }
-  .card-container.workshop-page img {
-    padding: 0.4rem;
-  }
-}
+}