commit 35cf036de22524df66e1d4252795fabd4f020368 Author: Luca Date: Sun Mar 24 15:53:46 2024 +0100 initial commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..ae2f8fc --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ + + + + + + + + + + + kontakt – Das Kulturprojekt + + + + +
+ +
+
+
+

+ kontakt – Das Kulturfestival 2024 + vom 23. bis 26. Mai 2024 +

+
+ + + + +
+ + + diff --git a/static/Instagram_Glyph_Black.svg b/static/Instagram_Glyph_Black.svg new file mode 100644 index 0000000..482d4eb --- /dev/null +++ b/static/Instagram_Glyph_Black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/MavenPro-VariableFont:wght.ttf b/static/MavenPro-VariableFont:wght.ttf new file mode 100644 index 0000000..090abcb Binary files /dev/null and b/static/MavenPro-VariableFont:wght.ttf differ diff --git a/static/f_logo_RGB-Black_1024.svg b/static/f_logo_RGB-Black_1024.svg new file mode 100644 index 0000000..35845a4 --- /dev/null +++ b/static/f_logo_RGB-Black_1024.svg @@ -0,0 +1,24 @@ + + + + + + diff --git a/static/icon.svg b/static/icon.svg new file mode 100644 index 0000000..648e48c --- /dev/null +++ b/static/icon.svg @@ -0,0 +1,67 @@ + +image/svg+xml diff --git a/static/logo.svg b/static/logo.svg new file mode 100644 index 0000000..9088133 --- /dev/null +++ b/static/logo.svg @@ -0,0 +1,27 @@ + +image/svg+xml \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6a364ce --- /dev/null +++ b/style.css @@ -0,0 +1,169 @@ +@font-face { + font-family: "Maven Pro"; + src: local("Maven Pro"), url(/static/MavenPro-VariableFont:wght.ttf); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +a:active { + color: ActiveText !important; +} + +a:hover, a:link, a:visited { + color: LinkText; +} + +body, footer, header { + display: flex; + flex-direction: column; +} + +body { + background: #fff; + color: #000; + font-family: "Maven Pro", sans-serif; + font-size: 12pt; + margin: 0 auto; + max-width: 1000px; + min-height: 100vh; + padding: 1em; + width: 100vw; +} + +figure { + margin: 0 auto; + max-width: 600px; + width: 100%; +} + +figure > img { + height: auto; + max-height: 30vh; + width: 100%; +} + +footer { + flex-grow: 1; + justify-content: end; + line-height: 1.5; + margin-top: 1em; +} + +footer > p { + text-align: center; +} + +header { + margin-bottom: 1em; +} + +main { + display: grid; + gap: 1em; + grid-template-columns: 1fr; +} + +.card { + --border-color: #000; + border-radius: 2em; +} + +.card.card-animate { + animation: 0.5s wave 0.5s; + z-index: 42; +} + +.card.card-highlight { + --border-color: #87bfb6; + background: #87bfb6; + font-weight: 500; +} + +.card > :is(a, p) { + border: 1px solid var(--border-color); + border-radius: 2em; + display: block; + line-height: 1; + padding: 1.5em; + text-align: center; +} + +.card > :is(a, p) > img { + display: none; + height: 2em; + left: 1.5em; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 2em; +} + +.card.card-has-icon > :is(a, p) { + padding: 1.5em 5em; + position: relative; +} + +.card.card-has-icon > :is(a, p) > img { + display: initial; +} + +.card > :is(a:active, a:hover, a:link, a:visited) { + color: inherit; + text-decoration: none; + transition: 0.5s; +} + +.card > :is(a:active, a:hover, a:link, a:visited) > img { + transition: 0.5s; +} + +.card > :is(a:active, a:hover) { + background: #000; + color: #fff; +} + +.card > :is(a:active, a:hover) > img { + filter: invert(100%); +} + +.logo { + padding: 0 3em; +} + +@keyframes wave { + 0% { + transform: none; + } + + 33.33% { + transform: rotate(-5deg); + } + + 66.67% { + transform: rotate(5deg); + } + + 100% { + transform: none; + } +} + +@media only screen and (min-width: 600px) { + main { + grid-template-columns: repeat(2, 1fr); + } + + .card.card-wide { + grid-column-end: span 2; + } +} + +@media (prefers-reduced-motion) { + .card.card-animate { + animation: none; + } +}