make site responsive

Webauftritt/eportfolio/impressions.html

@@ -15,17 +15,19 @@
     <h1 class="flex justify-center">Impressionen</h1>
 
     <div class="flex justify-center">
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/bruNTJCsZPM?controls=0"
+        <iframe class="w-10/12 md:w-1/2 aspect-video" src="https://www.youtube.com/embed/bruNTJCsZPM?controls=0"
                 title="YouTube video player"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowfullscreen></iframe>
     </div>
 
     <div class="flex flex-col items-center">
-        <img class="w-1/2 m-10" src="https://res.cloudinary.com/dgyrt6b4m/image/upload/v1671645823/stones_colored.jpg"/>
-        <img class="w-1/2 m-10"
+        <img class="w-10/12 md:w-1/2 m-10"
+             src="https://res.cloudinary.com/dgyrt6b4m/image/upload/v1671645823/stones_colored.jpg"/>
+        <img class="w-10/12 md:w-1/2 m-10"
              src="https://res.cloudinary.com/dgyrt6b4m/image/upload/v1671645801/no_advertisements.jpg"/>
-        <img class="w-1/2 m-10" src="https://res.cloudinary.com/dgyrt6b4m/image/upload/v1671645802/anti_glare.jpg"/>
+        <img class="w-10/12 md:w-1/2 m-10"
+             src="https://res.cloudinary.com/dgyrt6b4m/image/upload/v1671645802/anti_glare.jpg"/>
     </div>
 </div>
 

Webauftritt/eportfolio/partials/footer.hbs

@@ -1,13 +1,8 @@
-<footer class="bg-navbackground bottom-0 w-full h-auto flex justify-between">
-    <div class="mb-5 mt-5 ml-10">
-        <p class="font-bold text-textcolor">Copyright & Impressum:</p>
-        <p class="text-textcolor">Tobias Hilfiker</p>
-        <p class="text-textcolor">GBS St. Gallen</p>
-        <p class="text-textcolor">Demutstrasse 115</p>
-        <p class="text-textcolor">CH-9012 St. Gallen</p>
-        <a class="text-textcolor" href="mailto:tobias.hilfiker@edu.gbssg.ch">tobias.hilfiker@edu.gbssg.ch</a>
+<footer class="bg-navbackground bottom-0 w-full h-auto flex md:flex-row flex-col justify-between md:p-10 p-5">
+    <div class="md:p-0 pb-5">
+        <p class="font-bold text-textcolor">© 2022 Tobias Hilfiker</p>
     </div>
-    <div class="mb-5 mt-5 mr-10">
+    <div>
         <p class="font-bold text-textcolor">Curling selbst ausprobieren in St. Gallen:</p>
         <a class="text-textcolor" href="https://www.curling-stgallen.ch" target="_blank">Curling Center St. Gallen</a>
     </div>

Webauftritt/eportfolio/partials/spiritofcurlingitem.hbs

@@ -1,4 +1,4 @@
-<div class="flex flex-row bg-banner w-96 mb-6 items-center">
+<div class="flex flex-row bg-banner w-11/12 md:w-96 items-center justify-center">
     <img src="{{image}}" alt="{{imageAlt}}" class="w-12 h-12 justify-center mr-5 ml-5"/>
     <div>
         <p class="font-bold">{{title}}</p>

Webauftritt/eportfolio/spiritofcurling.html

@@ -12,13 +12,12 @@
 
 <div class="home grow">
 
-    <div class="flex flex-col items-center">
+    <div class="flex flex-col items-center w-full">
         <h1 class="">Spirit of Curling</h1>
         <p class="text-center w-6/12">Der Spirit of Curling ist eine Art Regelwerk, welches beschreibt wie
             ein Curler den Respekt gegenüber den Mitspielern, Gegnern und dem Sport selbst zeigen soll.</p>
-    </div>
 
-    <div class="h-full grid grid-cols-3 gap-0.5 content-start p-16">
+        <div class="h-full grid grid-cols-1 md:grid-cols-3 gap-2 content-start mt-10">
             {{> spiritofcurlingitem
             title="Manieren"
             description="Ein Curler verhält sich imemr anständig, zuvorkommend und wie ein Gentleman."
@@ -33,14 +32,16 @@
 
             {{> spiritofcurlingitem
             title="Keine Ablenkung"
-        description="Ein Curler wird nie versuchen seinen Gegner abzulenken oder ihn daran zu hindern, sein Bestes zu
+            description="Ein Curler wird nie versuchen seinen Gegner abzulenken oder ihn daran zu hindern, sein Bestes
+            zu
             tun."
             image="/spiritofcurling/distraction.png"
             imageAlt="Icon Ablenkung"}}
 
             {{> spiritofcurlingitem
             title="Keine Vorteile verschaffen"
-        description="Ein Curler versucht nie, mit anderen Mitteln als mit den spielerischen Möglichkeiten, Vorteile zu
+            description="Ein Curler versucht nie, mit anderen Mitteln als mit den spielerischen Möglichkeiten, Vorteile
+            zu
             erzielen."
             image="/spiritofcurling/plus.png"
             imageAlt="Icon Vorteile"}}
@@ -78,6 +79,7 @@
             imageAlt="Icon Freundlich"}}
         </div>
     </div>
+</div>
 
 {{> footer }}
 <script type="module" src="/main.js"></script>