Add Solar-Dashboard

assets/css/style.css

@@ -1066,3 +1066,14 @@ link:focus,
   overflow: hidden;
 }
 
+.grafana-dashboard {
+  width: 100%;
+  height: 100%;
+  min-height: 25vh;
+  max-height: 30vh;
+}
+
+.pinguin {
+  max-height: 35vh;
+  object-fit: contain;
+}

data/homepage.yml

@@ -89,6 +89,7 @@ about:
   enable: true
   title: Herzlich willkommen auf der Homepage des Georg-Cantor-Gymnasiums!
   image: media/home/pinguin-bg.webp
+  dashboard: https://grafana.cantorgymnasium.de/d-solo/ce8eeq1ebqhvkb/solaranlage?orgId=2&timezone=browser&panelId=1&theme=light&__feature.dashboardSceneSolo
   content: >
     Wir sind eine Schule mit mathematisch-naturwissenschaftlich-technischem
     Schwerpunkt und möchten interessierte und begabte Schülerinnen und Schüler
@@ -97,6 +98,9 @@ about:
 
 
     Informieren Sie sich über unser vielfältiges wissenschaftliches, kulturelles und soziales Angebot. Georg Πinguin, unser Schulmaskottchen, begleitet Sie dabei!
+
+
+    **_Wussten Sie schon? Unsere Schülerinnen und Schüler haben für das GCG eine Mini-Solaranlage gewonnen!_**
   button:
     enable: false
     label: Digitale Führung durch das Schulhaus

layouts/index.html

@@ -72,8 +72,8 @@
 {{ with $data.homepage.about }}
 <section class="section">
   <div class="container">
-    <div class="row align-items-center">
+    <div class="row align-items-stretch">
-      <div class="col-md-10 order-2 order-md-1">
+      <div class="col-lg-6 col-12 order-sm-1 order-2">
         <h3 class="mb-4">{{ .title | markdownify }}</h3>
         <div class="content text-justify">
           {{ .content | markdownify }}
@@ -85,8 +85,13 @@
         {{ end }}
       </div>
       {{ with .image }}
-      <div class="col-md-2 col-6 order-1 order-md-2 mb-md-0 mx-auto">
+      <div class="col-lg-2 col-6 order-sm-2 order-1 m-auto">
-        <img class="img-fluid w-100" src="{{ . | absURL }}">
+        <img class="img-fluid w-100 pinguin" src="{{ . | absURL }}">
+      </div>
+      {{ end }}
+      {{ with .dashboard }}
+      <div class="col-lg-4 col-sm-6 order-3 m-auto">
+        <iframe class="grafana-dashboard" src="{{ . }}"></iframe>
       </div>
       {{ end }}
     </div>