feat: Redesign the home page

assets/sass/_variables.scss

@@ -20,8 +20,9 @@ body {
   --color-table-border: #5B5B5B;
   --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";
@@ -13,4 +13,4 @@
 @import "form.scss";
 @import "expander.scss";
 @import "anchorlink.scss";
-@import "print.scss"
+@import "print.scss";

assets/sass/navigation.scss

@@ -7,13 +7,15 @@
 
 .o-header {
   background-color: var(--bg-default);
+  z-index: 4;
+  position: relative;
 }
 
 .o-header__wrapper {
   display: flex;
   justify-content: space-between;
 
-  @media (min-width: #{$breakpoint-md}) {
+  @media (min-width: #{$breakpoint-lg}) {
     justify-content: unset;
   }
 }
@@ -30,7 +32,7 @@
   display: flex;
   justify-content: flex-end;
 
-  @media (min-width: #{$breakpoint-md}) {
+  @media (min-width: #{$breakpoint-lg}) {
     display: block;
   }
 }
@@ -39,15 +41,15 @@
   width: 100%;
   display: none;
 
-  @media (min-width: #{$breakpoint-md}) {
+  @media (min-width: #{$breakpoint-lg}) {
     display: block;
   }
 }
 
 .o-header__nav nav h2 {
   display: block;
 
-  @media (min-width: #{$breakpoint-md}) {
+  @media (min-width: #{$breakpoint-lg}) {
     display: none;
   }
 }
@@ -56,6 +58,7 @@
   display: flex;
   margin: .6rem;
   position: relative;
+  left: -1.6rem;
   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;
   }
 }
 
@@ -143,7 +147,7 @@
 .o-header__item .o-header__item-countries {
   display: flex;
 
-  @media (min-width: #{$breakpoint-md}) {
+  @media (min-width: #{$breakpoint-lg}) {
     display: none;
     z-index: 2;
     position: absolute;
@@ -163,21 +167,21 @@
 .o-nav__menu-button {
   display: flex;
 
-  @media (min-width: #{$breakpoint-md}) {
+  @media (min-width: #{$breakpoint-lg}) {
     display: none;
   }
 }
 
 .o-header__expand-button {
   display: none;
 
-  @media (min-width: #{$breakpoint-md}) {
+  @media (min-width: #{$breakpoint-lg}) {
     display: flex;
   }
 }
 
 .o-header__nav--open nav {
-  @media (max-width: #{$breakpoint-md}) {
+  @media (max-width: #{$breakpoint-lg}) {
     display: flex;
     flex-direction: column;
     align-items: flex-end;

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;
@@ -131,6 +100,7 @@
     opacity: 0;
 }
 
+// TODO: curtain
 .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){

assets/sass/sidemenu.scss

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