Update PROTEUS schematic

docs/proteus_framework.md

@@ -1,3 +1,7 @@
+---
+title: MORS in the PROTEUS framework
+---
+
 <h1 align="center">
     <a href="https://proteus-framework.org">
     <div>
@@ -7,14 +11,11 @@
     </a>
 </h1>
 
-MORS is the stellar rotation and evolution module of <b>PROTEUS</b> (/ˈproʊtiəs, PROH-tee-əs), a modular Python framework that simulates the coupled evolution of the atmospheres and interiors of rocky planets and exoplanets. A schematic of PROTEUS components and corresponding modules can be found below. Its coupling to MORS is explained [here](Explanations/proteus.md).
-<br>
-<br>
-You can find the <b>documentation of each PROTEUS module</b> in the sidebar.
-<br>
+
+MORS is the **stellar rotation and evolution module** of [PROTEUS](https://proteus-framework.org/PROTEUS) (/ˈproʊtiəs/, PROH-tee-əs), a modular Python framework for the coupled evolution of the atmospheres and interiors of rocky planets and exoplanets. A schematic of PROTEUS components and corresponding modules can be found below. Click any module in the diagram to open its documentation, or navigate to it from the sidebar.
 <br>
 
-<p align="center">
-    <img src="assets/PROTEUS_schematic_lightmode.png#only-light" style="max-width: 90%; height: auto;" alt="PROTEUS schematic"><img src="assets/PROTEUS_schematic_darkmode.png#only-dark" style="max-width: 90%; height: auto;" alt="PROTEUS schematic"><br>
-    <b>Schematic of PROTEUS components and corresponding modules.</b>
-</p>
+<object type="image/svg+xml" data="https://cdn.jsdelivr.net/gh/FormingWorlds/PROTEUS@main/docs/assets/proteus_modules_schematic.svg" class="mod-diagram mod-diagram--light" aria-label="PROTEUS module schematic (light mode)">PROTEUS module schematic (light mode)</object>
+<object type="image/svg+xml" data="https://cdn.jsdelivr.net/gh/FormingWorlds/PROTEUS@main/docs/assets/proteus_modules_schematic_darkmode.svg" class="mod-diagram mod-diagram--dark" aria-label="PROTEUS module schematic (dark mode)">PROTEUS module schematic (dark mode)</object>
+
+<p style="text-align: center;"><strong>Schematic of PROTEUS components and corresponding modules.</strong></p>

docs/stylesheets/extra.css

@@ -0,0 +1,20 @@
+.mod-diagram {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 12.1 / 9;  /* specific aspect ratio for the module diagram */
+  display: none;
+}
+/* Light mode: show light diagram */
+[data-md-color-scheme="default"] .mod-diagram--light {
+  display: block;
+}
+
+/* Dark mode: show dark diagram (Material's default dark scheme is "slate") */
+[data-md-color-scheme="slate"] .mod-diagram--dark {
+  display: block;
+}
+
+/* Remove underline from links that contain only an image */
+.md-typeset p a:has(> img) {
+  text-decoration: none;
+}

docs/stylesheets/footnotes.css

@@ -18,12 +18,4 @@
   font-size: 1em !important;
 }
 
-/* reduce space under the page title */
-.md-typeset h1 {
-  margin-bottom: 0.2rem;  /* try 0, 0.2rem, 0.5rem */
-}
 
-/* optionally reduce any top margin on the first image */
-.md-typeset h1 + p img {
-  margin-top: 0;
-}

mkdocs.yml

@@ -78,10 +78,9 @@ nav:
       - 🔗 Zalmoxis: https://proteus-framework.org/Zalmoxis/
       - 🔗 Aragog: https://proteus-framework.org/aragog/
       - 🔗 SPIDER:  https://proteus-framework.org/SPIDER/
-      - 🔗 Atmodeller: https://atmodeller.readthedocs.io/en/latest/
-      - 🔗 FastChem: https://newstrangeworlds.github.io/FastChem/
-      - 🔗 PLATON: https://platon.readthedocs.io/en/latest/
-      - 🔗 SOCRATES: https://github.com/FormingWorlds/SOCRATES/
+      - 🔗 Atmodeller: https://github.com/FormingWorlds/Atmodeller/
+      - 🔗 FastChem: https://github.com/FormingWorlds/FastChem/
+      - 🔗 SOCRATES: https://proteus-framework.org/SOCRATES/
 
 # footer:
 extra:
@@ -139,6 +138,7 @@ theme:
 extra_css:
   - stylesheets/proteus_theme.css
   - stylesheets/footnotes.css
+  - stylesheets/extra.css
 
 markdown_extensions:
   - admonition