M hugo-site/layouts/partials/nav.html → hugo-site/layouts/partials/nav.html

@@ -1,8 +1,12 @@ 
 <nav>
-  <ul>
-    <li><a href="/">About me</a></li>
-    <li><a href="/projects">Projects</a></li>
-    <li><a href="/posts">Posts</a></li>
-    <li><a href="/links">Links</a></li>
-  </ul>
+  <div class="nav-group">
+    <div>
+      <a href="/">
+        <svg id="pg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.463 17.586"><g><path d="M5.915.25c2.062-.024 4.438.459 5.649 2.302 1.107 1.74 1.05 4.03.311 5.9-.796 1.937-2.845 3.073-4.878 3.174-.79.071-1.583.04-2.375.047v5.676H0V.249h5.915zM5.82 3.986H4.622v3.927c1.025.011 2.285.077 2.9-.912.547-1.02.288-2.698-1.022-2.945a3.012 3.012 0 00-.68-.07z"/><path d="M15.087 7.338h7.376v9.22c-2.685.856-5.568 1.255-8.375.895-2.228-.306-4.346-1.6-5.4-3.623-1.165-2.216-1.29-4.855-.9-7.288.405-2.417 1.96-4.657 4.236-5.647 2.85-1.253 6.155-1.071 9.085-.19.638.14 1.24.363.739 1.018l-1.205 2.981c-1.712-.808-3.729-1.18-5.582-.69-1.697.53-2.56 2.344-2.664 4.012-.14 1.82.053 4.021 1.679 5.166 1.194.79 2.714.642 4.053.397v-2.682h-3.042V7.338z"/></g></svg>
+      </a>
+    </div>
+    <div><a href="/projects">Projects</a></div>
+    <div><a href="/posts">Posts</a></div>
+    <div><a href="/links">Links</a></div>
+  </div>
 </nav>

M hugo-site/static/css/main.css → hugo-site/static/css/main.css

@@ -25,33 +25,32 @@ background-color: #f3f3f3;
 }
 
 nav {
-    background-color: white;
-    height: 64px;
+    height: 5rem;
     display: flex;
-    flex-direction: row;
     align-items: center;
-    justify-content: space-between;
-    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
 }
 
-.wip{
-    background-color: rgba(255,224,0,1);
-    font-size: 20px;
-    text-align: center;
+nav > *:first-child{
+    margin-left: 10%;
+}
 
+.nav-group {
+    display: flex;
+    align-items: center;
 }
 
-nav ul{
-    list-style: none;
-    padding-left: 30px;
+.nav-group > *:not(:first-child) {
+    margin-left: 4rem;
 }
 
-nav li{
-    display: inline;
+#pg {
+    height: 20px ;
+    opacity:0.7;
+    margin-bottom: -3px;
 }
 
-nav li:not(:last-child){
-    padding-right: 40px;
+#pg:hover {
+    fill: #B554E3;
 }
 
 nav a{
@@ -81,7 +80,7 @@ /* } */
 
 
 #intro{
-    margin-top: 6rem;
+    margin-top: 5rem;
 }
 
 .container{
@@ -308,7 +307,7 @@ padding: 0.2rem 0.8rem;
 }
 
 .section-item:hover {
-    background-color: #f5f5f5;
+    background-color: #eeeeee;
     border-radius: 0.4rem;
 }