nicer layout for model_evaluation/index.md

docs/model_evaluation/index.md

@@ -1,46 +1,111 @@
-# Model Evaluation and Diagnostics (MED)
+# <div class="highlight-bg"> Model Evaluation and Diagnostics (MED) </div>
 
-Model evaluation is about measuring how fit for purpose a particular model is.
+Model evaluation is about measuring how fit for purpose a particular model is. If you are new to model evaluation and diagnostics, we recommend you read our [Getting Started with MED page](./model_evaluation_getting_started/index.md). Here, we provide catalogs and pointers to [observational data](./model_evaluation_observational_catalogs.md) as well as [model data](./model_evaluation_model_catalogs/index.md) that can be used for evaluation. We provide [tools to process such data](./model_evaluation_data_processing.md) into a comparable format and a [gallery of recipes to evaluate](https://medportal.herokuapp.com/models/published) the formatted data.
 
-If you are new to model evaluation and diagnostics, we recommend you read our [Getting Started with MED page](./model_evaluation_getting_started/index.md).
+## Getting Started
+<div class="card-container">
+    <a href="./model_evaluation_getting_started/access_to_gadi_at_nci.md" class="squared-card default-text-color">
+        <div class="squared-card-image">
+            <img src="..//assets/model_evaluation/Gadi-19-2.jpg" alt="Computing Access"></img>
+        </div>
+        <div class="squared-card-text bold">Computing Access</div>
+    </a>
+    <a href="./model_evaluation_getting_started/model_evaluation_getting_started.md" class="squared-card default-text-color">
+        <div class="squared-card-image">
+            <img src="../assets/model_evaluation/model_evaluation_conda.png" alt="MED Conda Environment"></img>
+        </div>
+        <div class="squared-card-text bold">MED Conda Environment</div>
+    </a>
+    <a href="./model_evaluation_getting_started/model_variables/index.md" class="squared-card default-text-color">
+        <div class="squared-card-image">
+            <img src="../assets/model_evaluation/model_evaluation_variables.png" alt="Model Variables"></img>
+        </div>
+        <div class="squared-card-text bold">Model Variables</div>
+    </a>
+</div>
 
-Here, we provide catalogs and pointers to [observational data](./model_evaluation_observational_catalogs.md) as well as [model data](./model_evaluation_model_catalogs/index.md) that can be used for evaluation. We provide [tools to process such data](./model_evaluation_data_processing.md) into a comparable format and a [gallery of recipes to evaluate](https://medportal.herokuapp.com/models/published) the formatted data.
+## Data Catalogs
+<div class="card-container">
+    <a href="./model_evaluation_observational_catalogs.md" class="squared-card default-text-color">
+        <div class="squared-card-image">
+            <img src="../assets/model_evaluation/model_evaluation_obs_catalog.jpg" alt="A picture of a seismograph recording seismic waves during an earthquake visualises the link to our Observational Data Catalog. Image credit: Wf Sihardian—EyeEm/Getty Images" title="Image credit: Wf Sihardian—EyeEm/Getty Images"></img>
+        </div>
+        <div class="squared-card-text bold">Observational Data Catalog</div>
+    </a>
+    <a href="./model_evaluation_model_catalogs/index.md" class="squared-card default-text-color">
+        <div class="squared-card-image">
+            <img src="../assets/model_evaluation/model_evaluation_model_catalog.jpg" alt="MED Conda Environment"></img>
+        </div>
+        <div class="squared-card-text bold">Model Data Catalog</div>
+    </a>
+</div>
 
-<!-- THIS NEEDS TO BE DONE -->
-## TBD: FRAMEWORKS AND RECIPES
+## Evaluation Tools
+
+### Frameworks on Gadi
+
+<div class="card-container">
+    <a href="./model_evaluation_getting_started/access_to_gadi_at_nci.md" class="squared-card default-text-color">
+        <div class="squared-card-image">
+            <img src="../assets/model_evaluation/logo_ilamb.png" alt="ILAMB"></img>
+        </div>
+        <div class="squared-card-text bold">ILAMB</div>
+    </a>
+    <a href="./model_evaluation_getting_started/model_evaluation_getting_started.md" class="squared-card default-text-color">
+        <div class="squared-card-image">
+            <img src="../assets/model_evaluation/logo_esmvaltool.png" alt="ESMValTool"></img>
+        </div>
+        <div class="squared-card-text bold">ESMValTool</div>
+    </a>
+    <a href="./model_evaluation_getting_started/model_variables/index.md" class="squared-card default-text-color">
+        <div class="squared-card-image">
+            <img src="../assets/model_evaluation/logo_pangeo.png" alt="Pangeo/COSIMA"></img>
+        </div>
+        <div class="squared-card-text bold">Pangeo/COSIMA</div>
+    </a>
+</div>
+
+### What is to come: Diagnostics, Recipe Gallery and more
+
+{% include "call_contribute.md" %}
+
+<div class="card-container">
+    <a href="./model_evaluation_getting_started/access_to_gadi_at_nci.md" class="squared-card default-text-color">
+        <div class="squared-card-image">
+            <img src="..//assets/model_evaluation/Gadi-19-2.jpg" alt="Computing Access"></img>
+        </div>
+        <div class="squared-card-text bold">Computing Access</div>
+    </a>
+    <a href="./model_evaluation_data_processing.md" class="squared-card default-text-color">
+        <div class="squared-card-image">
+            <img src="../assets/model_evaluation/model_evaluation_formatting.jpg" alt="A picture visualising the conversion of data in text columns into a useful python xarray data format. Image credit: https://support.solarwinds.com and https://i.stack.imgur.com/" title="Image credit: https://support.solarwinds.com and https://i.stack.imgur.com/"></img>
+        </div>
+        <div class="squared-card-text bold">Data Format Processing</div>
+    </a>
+    <a href="./model_evaluation_recipe_gallery.md" class="squared-card default-text-color">
+        <div class="squared-card-image">
+            <img src="../assets/model_evaluation/model_evaluation_recipe.jpg" alt="A code snippet from the COSIMA documented recipes. Image credit: https://github.com/COSIMA/cosima-recipes" title="Image credit: https://github.com/COSIMA/cosima-recipes"></img>
+        </div>
+        <div class="squared-card-text bold">Evaluation Recipe Gallery</div>
+    </a>
+</div>
 
+
+<!-- THIS NEEDS TO BE DONE
+
+## TBD: FRAMEWORKS AND RECIPES
 TBD: ILAMB, ESMVALTOOL, COSMIA -> Pangeo (extended COSIMA)
 
 ## TBD: COMMUNITY MED
 
 TBD: Mention Community MED in our curated MED
-<!-- THIS NEEDS TO BE DONE -->
+
 
 ## TBD: CMORisation
 
 TBD: Raw data vs. curated data: CMORized vs. not! What does CMORized actually mean (look at ESMValTool documentation)?
-
 TBD: Add APP4 to navigation (replace **Model Format Processing**?)
 TBD: Tools to check if data is CMOR-compliant (raise issue)
 TBD: Discuss with Dougie: How can we identify what is CMORized and what is not?
 
-<!-- THIS NEEDS TO BE DONE -->
-
-<table class="center">
-<tr>
-<td width="24%">
-    <div align='center' width="100%" ><a href="./model_evaluation_observational_catalogs.md"><img align="center" width="90%" src="../assets/model_evaluation/model_evaluation_obs_catalog.jpg" alt="A picture of a seismograph recording seismic waves during an earthquake visualises the link to our Observational Data Catalog. Image credit: Wf Sihardian—EyeEm/Getty Images" title="Image credit: Wf Sihardian—EyeEm/Getty Images">Observational Data Catalog</img></a>
-</td>
-<td width="24%">
-    <div align='center' width="100%" ><a href="./model_evaluation_model_catalogs/index.md"><img align="center" width="90%" src="../assets/model_evaluation/model_evaluation_model_catalog.jpg" alt="" >Model Data Catalog</img></a>
-</td>
-<td width="24%">
-    <div align='center' width="100%" ><a href="./model_evaluation_data_processing.md"><img align="center" width="90%" src="../assets/model_evaluation/model_evaluation_formatting.jpg" alt="A picture visualising the conversion of data in text columns into a useful python xarray data format. Image credit: https://support.solarwinds.com and https://i.stack.imgur.com/" title="Image credit: https://support.solarwinds.com and https://i.stack.imgur.com/">Data Format Processing</img></a>
-</td>
-<td width="24%">
-    <div align='center' width="100%" ><a href="./model_evaluation_recipe_gallery.md"><img align="center" width="90%" src="../assets/model_evaluation/model_evaluation_recipe.jpg" alt="A code snippet from the COSIMA documented recipes. Image credit: https://github.com/COSIMA/cosima-recipes" title="Image credit: https://github.com/COSIMA/cosima-recipes">Evaluation Recipe Gallery</img></a>
-</td>
-</tr>
-</table>
-
-Our vision: PLACEHOLDER FOR OUTCOME OF STAFF RETREAT
+-->

docs/model_evaluation/model_evaluation_getting_started/model_evaluation_getting_started.md

@@ -11,9 +11,17 @@ Note: You do not automatically have access to all of Gadi's storage at `/g/data/
 To avoid running multiple (different) versions of code on Gadi, we provide you with a `conda` environment called `access-med` that we actually curate for you (version 0.1 is from June 2023).
 
 In order to change to this environment, please execute the following commands after loggin onto Gadi (and as part of your PBS scripts):
+<terminal-animation>
+    <terminal-line data="input">module use /g/data/xp65/public/modules</terminal-line>
+    <terminal-line data="input">module load conda/access-med</terminal-line>
+    <terminal-line>Loading conda/access-med-0.1</terminal-line>
+    <terminal-line>   Loading requirement: singularity</terminal-line>
+    <terminal-line data="input">esmvaltool recipes list</terminal-line>
+</terminal-animation>
+
 ```
 $ module use /g/data/xp65/public/modules
-$ module load conda/access-med-0.1
+$ module load conda/access-med
 ```
 
 If you are planning to run your code through JupyterLab on [NCI's ARE](https://are.nci.org.au), you need to use `/g/data/xp65/public/modules` as **Module directories** and `conda/are` as **Modules** when launching a JupyterLab session.

docs/model_evaluation/model_evaluation_getting_started/model_variables/index.md

@@ -4,5 +4,4 @@ Speaking a common language and using the same variables is key for a united clim
 
 Here, we are collating lists of different widely used variable formats:  
 1) CMIP6 : Coupled Model Intercomparison Project (CMIP) Version 6  
-2) ERA5 : fifth generation ECMWF atmospheric reanalysis of the global climate  
-3) UM : Unified Model  
+2) ERA5 : fifth generation ECMWF atmospheric reanalysis of the global climate