Bump Hugo theme and add dark mode (#672)

Author: t-sommer

config.yaml

@@ -2,10 +2,11 @@ baseURL: https://fmi-standard.org
 title: Functional Mock-up Interface
 theme: ma-hugo-theme
 params:
-  logo: /assets/images/FMI_bare.svg
+  logo: /images/ma-logos/dark/FMI-bare.svg
   github: modelica/fmi-standard
   email: [email protected]
   gtag: G-TJX9TPG2XT
+  darkMode: true
 menu:
   main:
     - pageRef: "tools"

content/_index.html

@@ -1,6 +1,5 @@
 ---
 aliases: [/downloads/]
-contactFooter: true
 ---
 
 <style>
@@ -17,6 +16,8 @@
   </div>
 </div>
 
+<script src="/js/jquery-3.7.1.min.js"></script>
+
 <script>
   var playerModal = document.getElementById('playerModal');
 
@@ -37,7 +38,7 @@
 
       {{< latest-news >}}
 
-      <img src="/assets/images/FMI.svg" width="450" alt="Functional Mock-up Interface" class="d-block mx-auto mb-5" style="max-width: 80%;">
+      <div class="fmi-masthead-logo d-block mx-auto" style="width: 450px; max-width: 80%;"></div>
 
       <h1 class="mb-4">The leading standard to exchange dynamic simulation models</h1>
 
@@ -48,7 +49,7 @@ <h1 class="mb-4">The leading standard to exchange dynamic simulation models</h1>
 
       <div class="d-grid gap-3 d-lg-flex justify-content-center">
 
-        <button type="button" class="btn btn-lg btn-primary text-nowrap" data-bs-toggle="modal" data-bs-target="#playerModal">
+        <button type="button" class="btn btn-lg btn-primary btn-ma-primary text-nowrap" data-bs-toggle="modal" data-bs-target="#playerModal">
           <i class="fa-solid fa-circle-play me-2"></i>Why FMI
         </button>
 
@@ -115,7 +116,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Getting started</h2>
   </div>
 
   <div class="col-lg-8 mx-auto">
-    <img src="/assets/images/Jupyter_BouncingBall.png" class="p-3 rounded shadow img-fluid">
+    <img src="/assets/images/Jupyter_BouncingBall.png" class="p-3 rounded shadow img-fluid bg-white">
   </div>
 
 </div>
@@ -150,15 +151,15 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Implement the FMI</h2>
         </figcaption>
     </div>
     <div class="col-md-6 text-center">
-      <div style="background-image: url(/assets/images/bosch-logo.png); background-position: center; /* Center the image */
+      <div class="ma-quote-logo" style="background-image: url(/assets/images/bosch-logo.png); background-position: center; /* Center the image */
       background-repeat: no-repeat;
       background-size: contain; height: 100%; min-height: 10em; max-width: 17em; margin: auto;"></div>
     </div>
   </div>
 
   <div class="row featurette justify-content-md-center p-4">
     <div class="col-md-6 text-center order-2 order-md-1">
-      <div style="background-image: url(/assets/images/haldex-logo.jpg); background-position: center; /* Center the image */
+      <div class="ma-quote-logo" style="background-image: url(/assets/images/Haldex.svg); background-position: center; /* Center the image */
       background-repeat: no-repeat;
       background-size: contain; height: 100%; min-height: 10em; max-width: 12em; margin: auto;"></div>
     </div>
@@ -182,15 +183,15 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Implement the FMI</h2>
         </figcaption>
     </div>
     <div class="col-md-6 text-center">
-      <div style="background-image: url(/assets/images/siemens-logo.png); background-position: center; /* Center the image */
+      <div class="ma-quote-logo" style="background-image: url(/assets/images/siemens-logo.png); background-position: center; /* Center the image */
       background-repeat: no-repeat;
       background-size: contain; height: 100%; min-height: 10em; max-width: 14em; margin: auto;"></div>
     </div>
   </div>
 
   <div class="row featurette justify-content-md-center p-4">
     <div class="col-md-6 text-center order-2 order-md-1">
-      <div style="background-image: url(/assets/images/saab-logo.png); background-position: center; /* Center the image */
+      <div class="ma-quote-logo" style="background-image: url(/assets/images/saab-logo.png); background-position: center; /* Center the image */
       background-repeat: no-repeat;
       background-size: contain; height: 100%; min-height: 10em; max-width: 14em; margin: auto;"></div>
     </div>
@@ -211,27 +212,27 @@ <h2 class="text-center display-6 fw-normal">Merchandising</h2>
     <div class="row">
 
       <div class="col-lg-2 col-4">
-        <img src="/assets/images/merch/fmi-hoodie.jpg">
+        <img class="rounded-3" src="/assets/images/merch/fmi-hoodie.jpg">
       </div>
 
       <div class="col-lg-2 col-4">
-        <img src="/assets/images/merch/m-hoodie.jpg">
+        <img class="rounded-3" src="/assets/images/merch/m-hoodie.jpg">
       </div>
 
       <div class="col-lg-2 col-4">
-        <img src="/assets/images/merch/fmi-womens-t-shirt.jpg">
+        <img class="rounded-3" src="/assets/images/merch/fmi-womens-t-shirt.jpg">
       </div>
 
       <div class="col-lg-2 col-4">
-        <img src="/assets/images/merch/modelica-t-shirt.jpg">
+        <img class="rounded-3" src="/assets/images/merch/modelica-t-shirt.jpg">
       </div>
 
       <div class="col-lg-2 col-4">
-        <img src="/assets/images/merch/fmi-mug.jpg">
+        <img class="rounded-3" src="/assets/images/merch/fmi-mug.jpg">
       </div>
 
       <div class="col-lg-2 col-4">
-        <img src="/assets/images/merch/fmi-sticker.jpg">
+        <img class="rounded-3" src="/assets/images/merch/fmi-sticker.jpg">
       </div>
 
     </div>

content/tools.html

@@ -83,7 +83,7 @@
   <div class="container mt-4">
     <div v-for="tool in filteredTools" class="row justify-content-center mt-4">
       <div class="col-sm-4 col-lg-3 text-end">
-        <img v-if="tool.hasOwnProperty('logo')" :src="imageURL(tool.logo)" style="margin-top: 7px; max-height: 46px; max-width: 140px;"/>
+        <img v-if="tool.hasOwnProperty('logo')" :src="imageURL(tool.logo)" class="bg-white rounded-1" style="margin-top: 7px; max-height: 76px; max-width: 170px; padding: 5px;"/>
       </div>
       <div class="col-sm-8 col-lg-6">
         <div><a :href="tool.url" style="font-size: 20px; font-weight: 500;">{{ tool.name }}</a></div>