Make the list of rooms mobile aware

content/page/club/raeume/index.md

@@ -10,10 +10,14 @@ menu:
 
 ## Vereinsheim vorne und mitte
 
+{{< tsc/rooms/room >}}
+{{< tsc/rooms/image image="vereinsheim.png" >}}
+{{% tsc/rooms/address %}}
 Rudolf-Harbig-Str. 6  
 71063 Sindelfingen
-  
+{{% /tsc/rooms/address %}}
-![Verinsheim vorne](vereinsheim.png)
+{{< /tsc/rooms/room >}}
+
 
 Das Bild zeigt unsere zwei Trainingsräume im Vereinsheim mit geöffneter Trennwand.
 
@@ -21,7 +25,11 @@ Abgeteilt in zwei Räume&nbsp; "VH Mitte" und "VH Vorn"
 
 ## Neuer Saal "VH" neu"
   
+{{< tsc/rooms/room >}}
+{{< tsc/rooms/image image="VH_Neu.jpg" >}}
+{{% tsc/rooms/address %}}
 Rudolf-Harbig-Str. 6  
 71063 Sindelfingen
-  
+{{% /tsc/rooms/address %}}
-![Vereinsheim neu](VH_Neu.jpg)
+{{< /tsc/rooms/room >}}
+

themes/tsc_vfl/assets/css/main.scss

@@ -612,6 +612,27 @@ h1 {
     max-width: 100%;
 }
 
+.room {
+    .image {
+        max-width: 70%;
+    }
+
+    @include media-large() {
+        display: flex;
+        align-items: start;
+
+        .image {
+            flex: 50% 0 1;
+        }
+        .address {
+            margin-left: 10px;
+        }
+        p {
+            margin: 0;
+        }
+    }
+}
+
 :root {
     --color-vhvorne: #ddcb55;
     --color-vhmitte: #c98879;

themes/tsc_vfl/layouts/shortcodes/tsc/rooms/address.html

@@ -0,0 +1 @@
+<div class="address">{{ .Inner }}</div>

themes/tsc_vfl/layouts/shortcodes/tsc/rooms/image.html

@@ -0,0 +1,4 @@
+<div class="image">
+    {{ $resource := .Page.Resources.GetMatch (.Get "image") }}
+    <img src="{{ $resource.RelPermalink}} ">
+</div>

themes/tsc_vfl/layouts/shortcodes/tsc/rooms/room.html

@@ -0,0 +1 @@
+<div class="room">{{ .Inner }}</div>