From b64dbace793819a646305492365555367eb2235f Mon Sep 17 00:00:00 2001
From: Lorenz Stechauner <lorenz.stechauner@necronda.net>
Date: Sun, 7 Jul 2024 00:16:40 +0200
Subject: [PATCH] index: Add more blur

---
 www/index.xhtml   |  25 ++++++++---
 www/res/style.css | 108 +++++++++++++++++++++++++++++++++++++---------
 2 files changed, 106 insertions(+), 27 deletions(-)

diff --git a/www/index.xhtml b/www/index.xhtml
index 0b60e88..e277f61 100644
--- a/www/index.xhtml
+++ b/www/index.xhtml
@@ -33,7 +33,7 @@
       <ul>
         <li><a href="/#">Start</a></li>
         <li><a href="/#about">Über</a></li>
-        <li><a href="/#genossenschaften">Genossenschaften</a></li>
+        <li><a href="/#clients">Genossenschaften</a></li>
         <li><a href="/files/">Downloads</a></li>
         <li><a href="https://git.necronda.net/winzer/">Quellcode</a></li>
       </ul>
@@ -46,12 +46,13 @@
       <a href="#about">
         <div>
           <img src="/res/elwig.png" alt="Elwig"/>
-          <div style="max-width: 16em;">
+          <div style="max-width: 16em; margin-bottom: 0.5em;">
             <h1>Elwig</h1>
             <h2>Elektronische Winzer&#173;genossenschafts&#173;verwaltung</h2>
           </div>
         </div>
       </a>
+      <div class="blur bottom"/>
     </section>
 
     <section class="about">
@@ -71,12 +72,15 @@
       </p>
     </section>
 
-    <section class="picture-1 background"/>
+    <section class="picture-1 background">
+      <div class="blur top"/>
+      <div class="blur bottom"/>
+    </section>
 
     <section class="clients">
-      <span id="genossenschaften"/>
+      <span id="clients"/>
       <h3>Die Genossenschaften</h3>
-      <div class="container">
+      <div class="container background">
         <div>
           <h4>WG Matzen</h4>
           <h5><span>Winzergenossenschaft</span> <span>für Matzen und Umgebung</span><br/><span>reg. Gen.m.b.H.</span></h5>
@@ -85,7 +89,9 @@
           <p class="link">
             <a href="https://winzermatzen.at/">winzermatzen.at</a>
           </p>
+          <div class="edge"/><div class="edge"/><div class="edge"/><div class="edge"/>
         </div>
+        <div class="filling"/>
         <div>
           <h4>Winzerkeller im Weinviertel</h4>
           <h5><span>Winzerkeller im Weinviertel</span><br/><span>reg. Gen.m.b.H.</span></h5>
@@ -94,14 +100,18 @@
           <p class="link">
             <a href="http://www.winzerkeller.eu/">winzerkeller.eu</a>
           </p>
+          <div class="edge"/><div class="edge"/><div class="edge"/><div class="edge"/>
         </div>
+        <div class="filling"/>
         <div>
           <h4>WG Weinland</h4>
           <h5><span>Winzergenossenschaft Weinland,</span> <span>mit dem Sitz in Großinzersdorf,</span><br/><span>reg. Gen.m.b.H.</span></h5>
           <h6>Zweigstellen:</h6>
           <div class="branches">Großinzersdorf</div>
           <p class="link"></p>
+          <div class="edge"/><div class="edge"/><div class="edge"/><div class="edge"/>
         </div>
+        <div class="filling"/>
         <div>
           <h4>WG Baden</h4>
           <h5><span>Winzergenossenschaft</span> <span>Baden - Bad Vöslau</span><br/><span>reg. Gen.m.b.H.</span></h5>
@@ -110,11 +120,14 @@
           <p class="link">
             <a href="http://www.wg-baden.at/">wg-baden.at</a>
           </p>
+          <div class="edge"/><div class="edge"/><div class="edge"/><div class="edge"/>
         </div>
       </div>
     </section>
 
-    <section class="picture-2 background"/>
+    <section class="picture-2 background">
+      <div class="blur top"/>
+    </section>
   </main>
 
   <footer>
diff --git a/www/res/style.css b/www/res/style.css
index 617848a..393294d 100644
--- a/www/res/style.css
+++ b/www/res/style.css
@@ -8,10 +8,14 @@
     scroll-behavior: smooth;
     --main-color: #A040C0;
     --light-color: #C0F080;
+    --bg-color: #EBEFE7;
+    --blur-color: #60804020;
+    --blur: 16px;
 }
 
 body {
     margin: 0;
+    background-color: var(--bg-color);
 }
 
 header {
@@ -19,7 +23,7 @@ header {
     top: 0;
     width: 100%;
     height: 3em;
-    border-bottom: 1px solid #C0C0C0;
+    box-shadow: 0 0 0.5em #00000060;
     background-color: #FFFFFF;
     z-index: 10;
 }
@@ -85,7 +89,7 @@ main .background {
 }
 
 main .home {
-    height: 100vh;
+    height: calc(100vh + 2rem);
     --img: url("/res/images/Italien-1.jpg");
 }
 
@@ -93,20 +97,20 @@ main .picture-1 {
     width: 100%;
     margin: 0;
     --img: url("/res/images/Italien-2.jpg");
-    height: 24em;
+    height: calc(24em + 4rem);
 }
 
 main .picture-2 {
     width: 100%;
     margin: 0;
     --img: url("/res/images/Italien-3.jpg");
-    height: 24em;
+    height: calc(24em + 2rem);
 }
 
 main .home a {
     text-decoration: none;
     color: #000000;
-    top: calc(32vh - 1em);
+    top: calc(30vh - 1em);
     position: relative;
     font-size: 1.25em;
     transition: top 0.25s, font-size 0.25s;
@@ -121,14 +125,16 @@ main .home a > div {
     align-items: center;
     width: fit-content;
     margin: auto;
-    backdrop-filter: blur(16px);
-    padding: 1em 0.5em;
+    backdrop-filter: blur(var(--blur));
+    background-color: var(--blur-color);
+    box-shadow: 0 0 1rem #00000060;
+    padding: 1.5em 1em;
     border-radius: 3em;
 }
 
 main .home a:hover {
     font-size: 1.375em;
-    top: calc(32vh - 1.25em);
+    top: calc(30vh - 1.25em);
 }
 
 main .home img {
@@ -137,7 +143,7 @@ main .home img {
 }
 
 main .home h1 {
-    font-size: 3.5em;
+    font-size: 4em;
     margin: 0;
     font-weight: normal;
 }
@@ -148,8 +154,25 @@ main .home h2 {
     font-weight: bold;
 }
 
+main div.blur {
+    width: 100%;
+    height: 2rem;
+    position: absolute;
+    backdrop-filter: blur(var(--blur));
+    background-color: var(--blur-color);
+}
+main div.blur.top {
+    top: 0;
+    box-shadow: 0 0.5rem 1rem -0.5rem #00000060;
+}
+main div.blur.bottom {
+    bottom: 0;
+    box-shadow: 0 -0.5rem 1rem -0.5rem #00000060;
+}
+
 main section {
     padding: 1em 0 2em 0;
+    position: relative;
 }
 
 main section p,
@@ -172,33 +195,53 @@ main section h3 {
 }
 
 main .about {
-    border-top: 1em solid var(--light-color);
-    border-bottom: 1em solid var(--light-color);
+    padding: 0 0 1em 0;
 }
 
 main .clients {
-    border-top: 1em solid var(--light-color);
-    border-bottom: 1em solid var(--light-color);
+    padding: 0 1em 2em 1em;
+}
+
+main .clients .container-background {
 }
 
 main .clients .container {
     display: flex;
     max-width: 1400px;
     margin: auto;
-    gap: 1em;
     justify-content: center;
-    padding: 0 1em;
+    --img: url("/res/images/Italien-2.jpg");
 }
 
-main .clients .container > * {
+main .clients .container .filling {
+    min-width: 2em;
+    min-height: 2em;
+    background-color: var(--bg-color);
+}
+
+main .clients .container > *:not(.filling) {
     flex: 100px 1 1;
-    border-radius: 1em;
+    /*border-radius: 1em;*/
     padding: 1.5em 1em;
-    background-color: var(--light-color);
     display: flex;
     flex-direction: column;
+    backdrop-filter: blur(var(--blur));
+    background-color: var(--blur-color);
+    position: relative;
 }
 
+main .clients .container .edge {
+    position: absolute;
+    background-color: var(--bg-color);
+    width: 1em;
+    height: 1em;
+    clip-path: polygon(0% 0%, 0% 100%, 2% 80%, 7% 63%, 14% 49%, 22% 38%, 29% 29%, 38% 22%, 49% 14%, 63% 7%, 80% 2%, 100% 0%);
+}
+main .clients .container .edge:nth-last-child(1) {top: 0; left: 0; transform: rotate(0deg);}
+main .clients .container .edge:nth-last-child(2) {top: 0; right: 0; transform: rotate(90deg);}
+main .clients .container .edge:nth-last-child(3) {bottom: 0; right: 0; transform: rotate(180deg);}
+main .clients .container .edge:nth-last-child(4) {bottom: 0; left: 0; transform: rotate(270deg);}
+
 @media screen and (max-width: 1000px) {
     main .clients .container {
         flex-direction: column;
@@ -251,11 +294,13 @@ footer {
     height: 8em;
     padding: 1em;
     width: 100%;
+    box-shadow: 0 0 0.5rem #00000060;
     background-color: #404040;
     color: #FFFFFF;
     display: flex;
     justify-content: center;
     gap: 2em;
+    position: relative;
 }
 
 footer img {
@@ -267,6 +312,15 @@ footer a {
     align-self: center;
 }
 
+@media screen and (min-width: 1921px) {
+    main .picture-1 {
+        height: calc(36em + 4rem);
+    }
+    main .picture-2 {
+        height: calc(36em + 2rem);
+    }
+}
+
 @media screen and (max-width: 1032px) {
     nav li a {
         padding: 1em;
@@ -288,25 +342,37 @@ footer a {
     footer > *:not(:first-child) {
         width: 300px;
     }
-    .home {
-        font-size: 0.5em;
-    }
 }
 
 @media screen and (max-width: 650px) {
     nav li:first-child {
         display: none;
     }
+    .home {
+        font-size: 0.875em;
+    }
 }
 
 @media screen and (max-width: 550px) {
     nav li:nth-child(2) {
         display: none;
     }
+    .home {
+        font-size: 0.75em;
+    }
 }
 
 @media screen and (max-width: 500px) {
     nav li:nth-child(3) {
         display: none;
     }
+    .home {
+        font-size: 0.675em;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    .home {
+        font-size: 0.5em;
+    }
 }