feat: Redesign the home page

assets/sass/_variables.scss

@@ -32,8 +32,9 @@ body {
   --color-table-border: #{$color-table-border};
   --border-radius-s: .4rem;
   --border-radius-m: .8rem;
-  --border-radius-l: 1.2rem;
+  --border-radius-l: 1.6rem;
   --pagefind-ui-border-radius: var(--border-radius-l);
   --pagefind-ui-border: #000;
   --bs-highlight-bg: var(--bg-accent);
+  --box-shadow: 0 .4rem 1rem rgba(0,0,0,.25);
 }

assets/sass/fonts.scss

@@ -58,6 +58,16 @@
   unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }
 
+/* sansita-latin-800-normal */
+@font-face {
+  font-family: 'Sansita';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 800;
+  src: url(@fontsource/sansita/files/sansita-latin-800-normal.woff2) format('woff2'), url(@fontsource/sansita/files/sansita-latin-800-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
 /* material-symbols-rounded-latin-400-normal */
 @font-face {
   font-family: 'Material Symbols Rounded';

assets/sass/form.scss

@@ -14,7 +14,7 @@
   input[type=text], input[type=email], select, textarea {
     width: 100%;
     margin-bottom: 1.6rem;
-    border-radius: var(--border-radius-m);
+    border-radius: var(--border-radius-l);
     border-width: .2rem;
     border-color: var(--color-onLight);
     padding: 1.2rem;
@@ -29,7 +29,7 @@
     background-color: var(--bg-accent);
     color: var(--color-onLight);
     border: none;
-    border-radius: var(--border-radius-m);
+    border-radius: var(--border-radius-l);
     transition: background-color .3s ease;
     font-weight: 700;
 

assets/sass/main.scss

@@ -4,7 +4,7 @@
 @import "fonts.scss";
 @import "navigation.scss";
 @import "sidemenu.scss";
-@import "stage.scss";
+@import "search.scss";
 @import "teaser.scss";
 @import "footer.scss";
 @import "content.scss";

assets/sass/navigation.scss

@@ -7,11 +7,14 @@
 
 .o-header {
   background-color: var(--bg-default);
+  z-index: 5;
+  position: relative;
 }
 
 .o-header__wrapper {
   display: flex;
   justify-content: space-between;
+  padding: 0;
 
   @media (min-width: #{$breakpoint-md}) {
     justify-content: unset;
@@ -54,7 +57,7 @@
 
 .o-header__logo {
   display: flex;
-  margin: .6rem;
+  margin: .6rem 0;
   position: relative;
   text-decoration: none;
   border-radius: var(--border-radius-m);
@@ -66,7 +69,8 @@
 
   img {
     height: 4.7rem;
-    padding: 0 .4rem
+    padding: 0 .4rem;
+    align-self: center;
   }
 }
 

assets/sass/stage.scss → assets/sass/search.scss

@@ -1,42 +1,9 @@
-.o-stage > picture {
-    width: 100%;
-    max-width: 1320px;
-    filter: brightness(60%);
-
-    img {
-        border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
-    }
-}
-
-.o-stage {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.o-stage__searchfield {
-    position: absolute;
-    width: 60%;
-    height: 6rem;
-    background-color: white;
-    border-radius: var(--border-radius-l);
-}
-
 #search {
-    position: absolute;
-    width: 80%;
-    max-width: 1056px; // 1320*0.8
+    width: 100%;
     height: 6rem;
-    left: 50%;
-    transform: translate(-50%);
     display: flex;
     z-index: 2;
 
-    @media (min-width: #{$breakpoint-md}) {
-        width: 60%;
-        max-width: 792px; // 1320*0.6
-    }
-
     .pagefind-ui__search-input,
     .pagefind-ui__message,
     .pagefind-ui__search-clear {
@@ -46,6 +13,8 @@
     .pagefind-ui__search-input {
         z-index: 3;
         outline: .2rem solid transparent;
+        border: 0;
+        box-shadow: var(--box-shadow);
 
         &:focus {
             outline: .2rem solid orange;
@@ -70,6 +39,10 @@
         display: none;
     }
 
+    .pagefind-ui__form::before {
+        z-index: 4;
+    }
+
     .pagefind-ui__drawer {
         background-color: white;
         padding: 0 1rem 1rem 1rem;
@@ -83,6 +56,7 @@
         border-bottom: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
         border-bottom-left-radius: var(--pagefind-ui-border-radius);
         border-bottom-right-radius: var(--pagefind-ui-border-radius);
+        z-index: 3;
     }
 
     .pagefind-ui__result-link {
@@ -131,10 +105,11 @@
     opacity: 0;
 }
 
-.curtain:has(~ .o-stage .o-stage__search:focus-within),
-.curtain:has(~ .o-stage .pagefind-ui__drawer:not(.pagefind-ui__hidden)),
-.curtain:has(~ article .o-aside__mobile-container2.o-aside__mobile-container--open){
-    opacity: 1;
-    inset: 0;
-    position: fixed;
+main:has(#search:focus-within),
+main:has(.pagefind-ui__drawer:not(.pagefind-ui__hidden))  {
+    .curtain {
+        opacity: 1;
+        position: fixed;
+        inset: 0;
+    }
 }

assets/sass/sidemenu.scss

@@ -99,3 +99,7 @@
         margin-bottom: 0;
     }
 }
+
+.o-related__item img {
+    border-radius: var(--border-radius-s);
+}