From 3b62b7fa53bc01277724955f8eb7f0e86213ad7f Mon Sep 17 00:00:00 2001
From: dudleycu <dudleyc.twitch@gmail.com>
Date: Sun, 29 Aug 2021 23:46:02 +0000
Subject: [PATCH] Header

---
 src/TestHeader.js |  7 ++++---
 src/style.css     | 20 ++++++++++++++++++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/TestHeader.js b/src/TestHeader.js
index 4335613..4d08a2c 100644
--- a/src/TestHeader.js
+++ b/src/TestHeader.js
@@ -4,13 +4,14 @@ function TestHeader() {
     return (
         <header>
             <div style={{gridArea:"1 / span 3"}}>
-                <ul>
-                    <li className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></li>
+            <div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></div>
+               <div className="navigation"> <ul>
                     <li className="headerMenuItem"><a href=".">Build Planner</a></li>
                     <li className="headerMenuItem"><a href=".">Guides</a></li>
                     <li className="headerMenuItem"><a href=".">Blog</a></li>
                     <li className="headerMenuItem"><a href=".">About</a></li>
-                </ul>
+                </ul></div>
+                <div className="navigation2">lol</div>
             </div>
         </header>
     )
diff --git a/src/style.css b/src/style.css
index 1130efe..4c2079e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -103,16 +103,32 @@ header a:hover {
 	grid-template-columns: repeat(auto-fit,minmax(300px,450px));
 	justify-content: center;
 	gap: 10px;
+}
+.main {
 	margin: 0 10px;
 }
 header {
+	background-color: rgba(0,0,0,0.66);
+	backdrop-filter: blur(10px);
 	text-align: left;
+	margin: 0;
 }
 header > div {
-	background-color: rgba(0,0,0,0.33);
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+}
+.navigation {
+	text-align: center;
+	font-size: 17px;
+	font-family: "ngs2";
+	align-items: stretch;
 }
-header li {
+.navigation li {
 	display: inline-block;
+	margin-left: 20px;;
+}
+.navigation2 {
+	text-align: right;
 }
 .box {
 	/*color: #97e2fc;*/