Added new Header (Only for screens wider than 1300px)

Feuersteinium · Jan 15, 2024 · d8a560d · d8a560d
1 parent e935917
commit d8a560d
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 24 deletions.
diff --git a/src/components/header.astro b/src/components/header.astro
@@ -4,10 +4,18 @@ import '../styles/header.css'
 ---
 
 <header>
-    <div  class="fb">
-       <a href="/blog">Blog</a>
-       <a href="/projects">Projetcs</a>
-       <a href="/docs">Docs</a>
-       <a href="/notes">Notes</a>
+    <div  class="header">
+        <div id="header-left">
+            <a href="/">Hey :D</a>
+        </div>
+        <div id="header-middle"
+            <a href="/">Niklas Feuerstein</a>
+        </div>
+        <div id="header-right">
+            <a  href="/blog">Blog</a>
+            <a  href="/projects">Projects</a>
+            <a  href="/docs">Docs</a>
+            <a  id="header-right-end" href="/notes">Notes</a>
+        </div>
     </div>
 </header>
diff --git a/src/pages/font-testing.astro b/src/pages/font-testing.astro
@@ -16,6 +16,17 @@ import '../styles/global.css'
         <h5>Just for a better experience</h5>
         <h6>Just for fun :D</h6>
         <p>Hello, welcome on this extremely boring website, with the purpose to be boring as fuck as we only test fonts here :D</p> 
-        <code>Das ist mein Code, welcher selbstverständlich Funktioniert :D</code>       
+        <code>Das ist mein Code, welcher selbstverständlich Funktioniert :D</code>
+        <div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>       
     </body>
 </html>
diff --git a/src/styles/header.css b/src/styles/header.css
@@ -1,32 +1,55 @@
-.fb {
+.header {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
+    height: 4.5rem;
+    gap: 2%;
 }
 
-.hfont a {
-    text-decoration: none;
-    color: #272626;
-    font-family: lilita;
-    font-size: 1.55em;
+
+.header * {
+    color: var(--color-text-main);
+    font-family: raleway;
+    font-size: 1.5rem;
+    font-weight: 900;
 }
 
-#spacing {
-    flex-grow: 4;
+.header *:hover {
+   color:blanchedalmond;
 }
 
+@media (min-width: 1300px) {
+
 
-.margin {
-    margin: 1%;
+.header > div {
+    width: 32%;
 }
 
-#htwo {
-    height: 50px;
-    margin-right: 1%;
-    margin-left: 1%;
+
+#header-left {
+    display: flex;
 }
 
-#hone {
-    margin-right: 2%;
-    margin-left: 1%;
+#header-left > a {
+    margin-left: 2rem;
 }
+
+
+
+
+#header-middle {
+    display: flex;
+    justify-content: center;
+}
+
+#header-right {
+    display: flex;
+    justify-content: end;
+    gap: 2rem;
+}
+
+
+#header-right-end {
+    margin-right: 2rem;
+}
+
+}