Merge branch 'main' of ssh://git.hofer.link:2222/philipp/aef-website

static/serve/style.css

@@ -1,3 +1,4 @@
+/** headline font https://fonts.google.com/specimen/Rubik+Doodle+Shadow/license?categoryFilters=Appearance:%2FTheme%2FShaded */
 @font-face {
   font-family: 'Rubik Doodle Shadow';
   src:
@@ -5,6 +6,7 @@
     url('RubikDoodleShadow-Regular.woff') format('woff');
 }
 
+/** reset pico.css */
 :root {
   --pico-typography-spacing-vertical: 2rem;
   --pico-font-family: 'Arial', sans-serif;
@@ -14,10 +16,7 @@
   --pico-card-sectioning-background-color: unset;
 }
 
-h2 {
-    --pico-typography-spacing-top: 4rem;
-}
-
+/** Headline Styles */
 h1 {
   font-family: 'Rubik Doodle Shadow', sans-serif;
   text-transform: uppercase;
@@ -28,6 +27,11 @@ h1 {
   text-align: center;
 }
 
+h2 {
+    --pico-typography-spacing-top: 4rem;
+}
+
+/** Button Styles */
 input[type="submit"], 
 button:not([class="secondary"]) {
     transition: margin-top 0.3s ease,
@@ -61,6 +65,7 @@ input[type="submit"]:active {
     box-shadow: 0px 0px 0px var(--pico-primary-hover-background);
 }
 
+/** General reusable styles */
 .font-headline {
   font-family: 'Rubik Doodle Shadow', sans-serif;
   text-transform: uppercase;
@@ -83,6 +88,7 @@ input[type="submit"]:active {
   }
 }
 
+/* custom ul style */
 ul.iterated {
   padding-left: unset;
 }
@@ -123,10 +129,9 @@ header a {
 	font-size: 1.25em;
 }
 
-.easteregg {
-  color: var(--pico-background-color);
-}
 
+
+/** Style Blockquote*/
 blockquote {
     text-align: center;
     font-size: 1.3rem;
@@ -137,7 +142,6 @@ blockquote {
 }
 
 /** Style article*/
-
 article {
     display: inline-block;
     border: 2px solid var(--pico-color);
@@ -145,7 +149,7 @@ article {
     position: relative;
     padding: clamp(1rem, 1.875rem + 2vw, 3rem);
     
-    &::before {
+    &::after {
         content: '';
         border: 1px solid var(--pico-color);
         display: block;
@@ -156,6 +160,7 @@ article {
         left: 50%;
         transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
         border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
+        z-index: -1;
     }
 }
 
@@ -175,3 +180,8 @@ article>footer {
   border: unset;
   background-color: unset;
 }
+
+/** Funny stuff*/
+.easteregg {
+  color: var(--pico-background-color);
+}