Merge pull request #557 from ACCESS-Hive/fixes

Fixed working groups icons

docs/community_resources/community_working_groups.md

@@ -1,75 +1,46 @@
 # Community Working Groups
 
-The ACCESS Community and the ACCESS-NRI have established [Community Working Groups](https://www.access-nri.org.au/working-groups/) to assess and prioritise the needs of the modelling community as well as encourage collaboration within. These working groups are open to the community and welcome new members.
+The ACCESS Community and the ACCESS-NRI have established <a href="https://www.access-nri.org.au/working-groups/" target="_blank">Community Working Groups</a> to assess and prioritise the needs of the modelling community as well as encourage collaboration within. These working groups are open to the community and welcome new members.
 
-The working group activities are coordinated through the [ACCESS Hive Community Forum](https://forum.access-hive.org.au/):
+The working group activities are coordinated through the <a href="https://forum.access-hive.org.au/" target="_blank">ACCESS Hive Community Forum</a>.
+To join a working group follow the <a href="https://www.access-nri.org.au/how-to-join-a-working-group/" target="_blank">instructions on the ACCESS-NRI website</a>.
 
-<table class="center">
-<tr>
-<td width="33%">
-    <a href="https://forum.access-hive.org.au/c/atmosphere/working-group/41">
-        <div align='center' width="100%" >
-            <img align="center" width="60%" src="../../assets/component-logos/components-without-titles/ACCESS icon ATMOSPHERE.png" />
-        </div>
-        <div align='center' width="100%" >
-            Atmospheric Modelling
+<div class="card-container">
+    <a href="https://forum.access-hive.org.au/c/atmosphere/working-group/41" class="vertical-card aspect-ratio1to1">
+        <div class="card-image-container">
+            <img class="img-contain" src="/assets/working_groups_icons/atmosphere.png" alt="Atmosphere"></img>
         </div>
+        <div class="card-text-container bold">Atmospheric Modelling</div>
     </a>
-</td>
-<td width="33%">
-    <a href="https://forum.access-hive.org.au/c/land/working-group/47">
-        <div align='center' width="100%" >
-            <img align="center" width="60%" src="../../assets/component-logos/components-without-titles/ACCESS icon LAND SURFACE.png" />
-        </div>
-        <div align='center' width="100%" >
-            Land Surface Modelling
+    <a href="https://forum.access-hive.org.au/c/land/working-group/47" class="vertical-card aspect-ratio1to1">
+        <div class="card-image-container">
+            <img class="img-contain" src="/assets/working_groups_icons/land.png" alt="Atmosphere"></img>
         </div>
+        <div class="card-text-container bold">Land Surface Modelling</div>
     </a>
-</td>
-<td width="33%">
-    <a href="https://forum.access-hive.org.au/c/cosima/working-group/42">
-        <div align='center' width="100%" >
-            <img align="center" width="60%" src="../../assets/component-logos/COSIMA-icon-300x300.png" />
-        </div>
-        <div align='center' width="100%" >
-            COSIMA<br>(Ocean and Sea-Ice)
+    <a href="https://forum.access-hive.org.au/c/cosima/working-group/42" class="vertical-card aspect-ratio1to1">
+        <div class="card-image-container">
+            <img class="img-contain" src="/assets/working_groups_icons/cosima.png" alt="Atmosphere"></img>
         </div>
+        <div class="card-text-container bold">COSIMA<br>(Ocean and Sea-Ice)</div>
     </a>
-</td>
-</tr>
-<tr>
-<td width="33%">
-    <a href="https://forum.access-hive.org.au/c/forecasting-and-prediction/working-group/46">
-        <div align='center' width="100%" >
-            <img align="center" width="60%" src="../../assets/component-logos/Forecasting-icon-300x300.png" />
-        </div>
-        <div align='center' width="100%" >
-            Forecasting and Prediction
+    <a href="https://forum.access-hive.org.au/c/forecasting-and-prediction/working-group/46" class="vertical-card aspect-ratio1to1">
+        <div class="card-image-container">
+            <img class="img-contain" src="/assets/working_groups_icons/forecasting.png" alt="Atmosphere"></img>
         </div>
+        <div class="card-text-container bold">Forecasting and Prediction</div>
     </a>
-</td>
-<td width="33%">
-    <a href="https://forum.access-hive.org.au/c/esm/esm-working-group/43">
-        <div align='center' width="100%" >
-            <img align="center" width="60%" src="../../assets/component-logos/components-without-titles/ACCESS icon COUPLER.png"/>
-        </div>
-        <div align='center' width="100%" >
-            Earth System Modelling
+    <a href="https://forum.access-hive.org.au/c/esm/esm-working-group/43" class="vertical-card aspect-ratio1to1">
+        <div class="card-image-container">
+            <img class="img-contain" src="/assets/working_groups_icons/earth_system_modelling.png" alt="Atmosphere"></img>
         </div>
+        <div class="card-text-container bold">Earth System Modelling</div>
     </a>
-</td>
-<td width="33%">
-    <a href="https://forum.access-hive.org.au/c/cryosphere/working-group/45">
-        <div align='center' width="100%" >
-            <img align="center" width="60%" src="../../assets/component-logos/ACCESS-icon-CRYOSPHERE-300x300.png"/>
-        </div>
-        <div align='center' width="100%" >
-            Cryosphere
+    <a href="https://forum.access-hive.org.au/c/cryosphere/working-group/45" class="vertical-card aspect-ratio1to1">
+        <div class="card-image-container">
+            <img class="img-contain" src="/assets/working_groups_icons/cryosphere.png" alt="Atmosphere"></img>
         </div>
+        <div class="card-text-container bold">Cryosphere</div>
     </a>
-</td>
-</tr>
-</table>
-
+</div>
 
-To join a working group follow the [instructions on the ACCESS-NRI website](https://www.access-nri.org.au/how-to-join-a-working-group/), and to participate in the activities of the working group visit the [ACCESS-hive forum](https://forum.access-hive.org.au/).

docs/js/miscellaneous.js

@@ -168,7 +168,7 @@ function addCardContainerChildrenNumber() {
   Fit text to div if overflowing (for 'card-text-container' and 'fitText' class)
 */
 function fitText() {
-  const coeff = 0.98;
+  const coeff = 0.9;
   function isOverflowing(el) {
     return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
   }