index: Add more blur
This commit is contained in:
@ -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­genossenschafts­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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user