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-10/12 md:w-1/2 m-10"
-        <img class="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">
+<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="mb-5 mt-5 ml-10">
+    <div class="md:p-0 pb-5">
-        <p class="font-bold text-textcolor">Copyright & Impressum:</p>
+        <p class="font-bold text-textcolor">© 2022 Tobias Hilfiker</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>
     </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,70 +12,72 @@
 
 <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
+            {{> spiritofcurlingitem
-        title="Manieren"
+            title="Manieren"
-        description="Ein Curler verhält sich imemr anständig, zuvorkommend und wie ein Gentleman."
+            description="Ein Curler verhält sich imemr anständig, zuvorkommend und wie ein Gentleman."
-        image="/spiritofcurling/ways.png"
+            image="/spiritofcurling/ways.png"
-        imageAlt="Icon Manieren"}}
+            imageAlt="Icon Manieren"}}
 
-        {{> spiritofcurlingitem
+            {{> spiritofcurlingitem
-        title="Gewinn ist das Ziel"
+            title="Gewinn ist das Ziel"
-        description="Ein Curler spielt um zu gewinnen, nie aber um seinen Gegner zu erniederigen."
+            description="Ein Curler spielt um zu gewinnen, nie aber um seinen Gegner zu erniederigen."
-        image="/spiritofcurling/trophy.png"
+            image="/spiritofcurling/trophy.png"
-        imageAlt="Icon Gewinn"}}
+            imageAlt="Icon Gewinn"}}
 
-        {{> spiritofcurlingitem
+            {{> spiritofcurlingitem
-        title="Keine Ablenkung"
+            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
-        tun."
+            zu
-        image="/spiritofcurling/distraction.png"
+            tun."
-        imageAlt="Icon Ablenkung"}}
+            image="/spiritofcurling/distraction.png"
+            imageAlt="Icon Ablenkung"}}
 
-        {{> spiritofcurlingitem
+            {{> spiritofcurlingitem
-        title="Keine Vorteile verschaffen"
+            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
-        erzielen."
+            zu
-        image="/spiritofcurling/plus.png"
+            erzielen."
-        imageAlt="Icon Vorteile"}}
+            image="/spiritofcurling/plus.png"
+            imageAlt="Icon Vorteile"}}
 
-        {{> spiritofcurlingitem
+            {{> spiritofcurlingitem
-        title="Zuerst verlieren lernen"
+            title="Zuerst verlieren lernen"
-        description="Ein Curler muss zuerst lernen zu verlieren, erst dann ist er auch würdig zu gewinnen."
+            description="Ein Curler muss zuerst lernen zu verlieren, erst dann ist er auch würdig zu gewinnen."
-        image="/spiritofcurling/psychology.png"
+            image="/spiritofcurling/psychology.png"
-        imageAlt="Icon Psychologie"}}
+            imageAlt="Icon Psychologie"}}
 
-        {{> spiritofcurlingitem
+            {{> spiritofcurlingitem
-        title="Niederlage über ungerechtem Sieg"
+            title="Niederlage über ungerechtem Sieg"
-        description="Ein Curler zieht eine Niederlage einem ungerecheten Sieg vor."
+            description="Ein Curler zieht eine Niederlage einem ungerecheten Sieg vor."
-        image="/spiritofcurling/disappointed.png"
+            image="/spiritofcurling/disappointed.png"
-        imageAlt="Icon Niederlage"}}
+            imageAlt="Icon Niederlage"}}
 
-        {{> spiritofcurlingitem
+            {{> spiritofcurlingitem
-        title="Keine verstösse gegen Spielregeln"
+            title="Keine verstösse gegen Spielregeln"
-        description="Ein Curler verstösst nie absichtlich gegen Spielregeln oder eine der geschriebenen oder
+            description="Ein Curler verstösst nie absichtlich gegen Spielregeln oder eine der geschriebenen oder
-        ungeschriebenen
+            ungeschriebenen
-        Überlieferungen"
+            Überlieferungen"
-        image="/spiritofcurling/prohibited.png"
+            image="/spiritofcurling/prohibited.png"
-        imageAlt="Icon Verboten"}}
+            imageAlt="Icon Verboten"}}
 
-        {{> spiritofcurlingitem
+            {{> spiritofcurlingitem
-        title="Keine unerwarteten Handlungen"
+            title="Keine unerwarteten Handlungen"
-        description="Ein Curler wird nie etwas tun, was er auch von seinen Mitspielern nicht erwartet."
+            description="Ein Curler wird nie etwas tun, was er auch von seinen Mitspielern nicht erwartet."
-        image="/spiritofcurling/magic.png"
+            image="/spiritofcurling/magic.png"
-        imageAlt="Icon unerwartet"}}
+            imageAlt="Icon unerwartet"}}
 
-        {{> spiritofcurlingitem
+            {{> spiritofcurlingitem
-        title="Gegnerfreundlich"
+            title="Gegnerfreundlich"
-        description="Ein Curler entscheidet sich in Streitfragen immer zu Gunsten seines Gegners."
+            description="Ein Curler entscheidet sich in Streitfragen immer zu Gunsten seines Gegners."
-        image="/spiritofcurling/friendly.png"
+            image="/spiritofcurling/friendly.png"
-        imageAlt="Icon Freundlich"}}
+            imageAlt="Icon Freundlich"}}
+        </div>
     </div>
 </div>