💅 center main menu

src/components/Footer.js

@@ -14,6 +14,9 @@ const Footer = () => (
       Chateau Neuf – Det Norske Studentersamfund | Slemdalsveien 15, 0369 Oslo |
       Ansvarlig redaktør: Stein-Olav Moe Fause | <a href="#">Logg inn</a>
     </p>
+    <nav className="footer-nav">
+      <Link to="/kontakt/">Kontakt</Link>
+    </nav>
   </footer>
 )
 

src/components/Navbar.js

@@ -19,6 +19,11 @@ const Navbar = () => (
     `}
     render={data => (
       <header className="site-header">
+        <nav className="site-nav">
+          <Link to="/program/">Program</Link>
+          <Link to="/">Nyheter</Link>
+          <Link to="/om-dns/">Praktisk</Link>
+        </nav>
         <div className="logo">
           <Link to="/">
             <img src={logo} alt="Det Norske Studentersamfund" />
@@ -33,11 +38,9 @@ const Navbar = () => (
               {edge.node.title}
             </Link>
           ))*/}
-          <Link to="/program/">Program</Link>
-          <Link to="/foreningene/">Foreningene</Link>
           <Link to="/om-dns/">Om oss</Link>
+          <Link to="/foreningene/">Foreningene</Link>
           <Link to="/booking/">Utleie</Link>
-          <Link to="/kontakt/">Kontakt</Link>
           <div className="site-nav_toggle">=</div>
         </nav>
       </header>

src/css/base.scss

@@ -5,7 +5,7 @@
 }
 
 html {
-	font-size: calc(16px + 6 * ((100vw - 320px) / 1200));
+	font-size: calc(14px + 6 * ((100vw - 320px) / 1200));
   height: 100%;
   background: $color-background;
 }

src/css/header.scss

@@ -2,12 +2,12 @@
   padding: 1rem 2rem;
   background: $color-black;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
 }
 
 .logo {
   width: 3rem;
-  margin-right: 2rem;
+  margin: 0 3rem;
 
   a {
     display: block;
@@ -15,9 +15,14 @@
 }
 
 .site-nav {
+  flex: 1;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
+  &:last-of-type {
+    justify-content: flex-start;
+  }
   a {
     text-decoration: none;
     display: inline-block;
@@ -32,8 +37,9 @@
     letter-spacing: 0.08em;
     font-size: $font-s;
 
+    transition: box-shadow 0.2s ease-in-out;
     &:hover {
-      color: $color-orange;
+      box-shadow: 0 1px 0 0 $color-white;
     }
   }
   &_toggle {