From a6067fc0e2095398f64f560e4644dbdbd7270840 Mon Sep 17 00:00:00 2001
From: Tobias Hilfiker <tobias.hilfiker@edu.gbssg.ch>
Date: Thu, 22 Dec 2022 17:42:45 +0100
Subject: [PATCH] make banner & items flexible, create handlebar-component for
 banner items

---
 Webauftritt/eportfolio/index.html             | 33 +++++++++++--------
 .../eportfolio/partials/banneritem.hbs        |  4 +++
 2 files changed, 23 insertions(+), 14 deletions(-)
 create mode 100644 Webauftritt/eportfolio/partials/banneritem.hbs

diff --git a/Webauftritt/eportfolio/index.html b/Webauftritt/eportfolio/index.html
index 8dd88e4..6013d31 100644
--- a/Webauftritt/eportfolio/index.html
+++ b/Webauftritt/eportfolio/index.html
@@ -11,21 +11,26 @@
 {{> nav homeActive=true }}
 
 <div class="home grow">
-    <h1 class="flex justify-center">Welcome to the world of Curling!</h1>
+    <h1 class="flex justify-center text-center">Welcome to the world of Curling!</h1>
 
-    <div class="h-40 bg-banner flex justify-between items-center px-40 mb-14">
-        <a href="rules.html" class="flex flex-col align-middle">
-            <img src="/rules.svg" alt="Regeln" class="w-20 h-20"/>
-            <p class="text-center">Regeln</p>
-        </a>
-        <a href="spiritofcurling.html" class="flex flex-col align-middle">
-            <img src="/spirit.svg" alt="Spirit of Curling" class="w-20 h-20"/>
-            <p class="text-center">Spirit of Curling</p>
-        </a>
-        <a href="impressions.html" class="flex flex-col align-middle">
-            <img src="/extension.svg" alt="Beispiele" class="w-20 h-20"/>
-            <p class="text-center">Beispiele</p>
-        </a>
+    <div class="flex h-auto bg-banner md:flex-row flex-col justify-center my-5">
+        {{> banneritem
+        href="rules.html"
+        img="/rules.svg"
+        imgalt="Regeln"
+        text="Regeln"}}
+
+        {{> banneritem
+        href="spiritofcurling.html"
+        img="/spirit.svg"
+        imgalt="Spirit of Curling"
+        text="Spirit of Curling"}}
+
+        {{> banneritem
+        href="impressions.html"
+        img="/extension.svg"
+        imgalt="Beispiele"
+        text="Beispiele"}}
     </div>
 </div>
 
diff --git a/Webauftritt/eportfolio/partials/banneritem.hbs b/Webauftritt/eportfolio/partials/banneritem.hbs
new file mode 100644
index 0000000..0ccc859
--- /dev/null
+++ b/Webauftritt/eportfolio/partials/banneritem.hbs
@@ -0,0 +1,4 @@
+<a href="{{href}}" class="flex flex-row m-10 md:flex-col md:items-center">
+    <img src="{{img}}" alt="{{imgalt}}" class="w-20 h-20"/>
+    <p class="flex flex-col justify-center ml-5 md:ml-0 md:text-center">{{text}}</p>
+</a>
\ No newline at end of file