base

assets/css/partials/_site-header.scss

@@ -0,0 +1,84 @@
+@keyframes add-border {
+  from {
+    border-bottom-color: transparent;
+  }
+  to {
+    border-bottom: var(--grey-800);
+  }
+}
+
+#site-header {
+  position: fixed;
+  left: var(--padding-body);
+  top: 0px;
+  z-index: 900;
+  --gap: 3ch;
+
+  width: calc(100vw - var(--padding-body)*2);
+  height: var(--header-h);
+  background-color: var(--color-bg);
+  border-bottom: var(--border-light);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap);
+
+  a{
+    text-decoration: none;
+    &:hover{
+      color: var(--grey-200);
+    }
+  }
+
+
+  #site-title {
+    flex-grow: 2;
+    svg{
+      width: 100px;
+    }
+  }
+
+  ul{
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+  }
+
+  #btn--soutenir{
+    color: var(--color-accent);
+    a:hover{
+      color: var(--color-accent);
+      text-decoration: underline;
+    }
+  }
+
+  ul,  #btn--soutenir{
+    text-transform: uppercase;
+  }
+ 
+
+  #lang-toggle{
+    display: flex;
+    gap: 1ch;
+    button:disabled{ color: var(--color-txt-light); }
+  }
+
+  #menu-toggle{
+    cursor: pointer;
+    svg{
+      width: 30px;
+    }
+    .close{ display: none; }
+  
+  }
+
+  button{
+    
+    &:hover{
+      svg{ fill: var(--grey-200)!important; }
+    }
+  }
+
+}