change logo from background to img

src/components/Navbar.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Link, StaticQuery, graphql } from 'gatsby'
 import github from '../img/github-icon.svg'
+import logo from '../img/logo/logo-xl.svg'
 
 export default class Navbar extends React.Component {
   constructor(props) {
@@ -46,7 +47,9 @@ export default class Navbar extends React.Component {
           <Link to="/nyheter/">Nyheter</Link>
           <Link to="/om-dns/">Praktisk</Link>
         </nav>
-        <Link to="/" className="logo" style={{ width: `${ this.state.headerSize }px`, height: `${ this.state.headerSize }px` }}></Link>
+        <Link to="/" className="logo" style={{ width: `${ this.state.headerSize }px`, height: `${ this.state.headerSize }px` }}>
+          <img src={logo} alt="Det Norske Studentersamfund" />
+        </Link>
         <nav className="site-nav">
           <Link to="/om-dns/">Om oss</Link>
           <Link to="/foreningene/">Foreningene</Link>

src/css/header.scss

@@ -15,17 +15,6 @@
     width: 6rem;
     height: 6rem;
     margin: 0 3rem;
-    background: url('../img/logo/logo-xxl.svg');
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  &.large {
-    .logo {
-      width: 12rem;
-      height: 12rem;
-    }
   }
 }
 
@@ -76,16 +65,10 @@
   .site-header {
     display: flex;
     flex-direction: column;
-    height: 6rem;
 
     .logo {
       order: 1;
       margin: 0;
-      width: 6rem;
-      height: 6rem;
-      background: url('../img/logo/logo-s.svg');
-      background-size: contain;
-      background-repeat: no-repeat;
     }
   }
   .site-nav {
@@ -109,7 +92,7 @@
     }
   }
   .site-nav-visible {
-    height: 100%;
+    height: 100% !important;
     .site-nav {
       display: block;
     }