Responsive logo

elinlutz · Mar 29, 2020 · b5bdcec · b5bdcec
1 parent f49de84
commit b5bdcec
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 50 deletions.
diff --git a/src/assets/stylesheets/components/_container.scss b/src/assets/stylesheets/components/_container.scss
@@ -24,15 +24,15 @@
 }
 
 .container-timeline-content {
-  max-width: 60em;
+  max-width: 55em;
   padding: 0em 1.5em;
 }
 .container-chart {
-  max-width: 60em;
+  max-width: 55em;
 }
 
 .container-timeline {
-  max-width: 60em;
+  max-width: 55em;
   padding: 0em 1.5em;
 }
 
@@ -43,10 +43,10 @@
 }
 
 .container-table {
-  max-width: 60em;
+  max-width: 55em;
 
   .container-table-content {
-    max-width: 60em;
+    max-width: 55em;
     padding: 0em 1.5em;
   }
   .table {

diff --git a/src/assets/stylesheets/components/_header.scss b/src/assets/stylesheets/components/_header.scss
@@ -20,47 +20,38 @@ header {
   }
 
   a {
-    color: $accent;
+    color: $white;
     text-decoration: none;
+    text-transform: uppercase;
   }
 
   .titleContainer {
-    .title {
-      .icon {
-        position: relative;
-        margin-left: 0.5em;
-        top: 3px;
-        left: 0px;
-      }
-    }
+    display: flex;
+    padding-right: 10px;
+    margin-top: 1px;
+    margin-left: 0.5em;
 
-    a {
-      color: $white;
-      font-size: 20px;
-      font-weight: 500;
-      text-transform: uppercase;
+    .icon {
+      position: relative;
+      top: 4px;
     }
 
     @media (max-width: 440px) {
       .title {
-        font-size: 18px;
+        font-size: 3.5vw;
+        .icon {
+          width: 5.5vw;
+          height: 5.5vw;
+        }
       }
     }
-    @media (max-width: 400px) {
+    @media (max-width: 340px) {
       .title {
         font-size: 10px;
         margin-left: 10px;
-      }
-      .icon {
-        display: none;
-      }
-    }
-    @media (max-width: 360px) {
-      .title {
-        font-size: 10px;
-      }
-      .icon {
-        display: none;
+        .icon {
+          display: none;
+        }
       }
     }
   }
@@ -81,7 +72,7 @@ header {
       margin-right: 0.2em;
     }
 
-    @media (max-width: 520px) {
+    @media (max-width: 500px) {
       .text {
         display: none;
       }

diff --git a/src/assets/stylesheets/pages/_om.scss b/src/assets/stylesheets/pages/_om.scss
@@ -10,7 +10,7 @@
   }
 
   .container-about {
-    max-width: 50em;
+    max-width: 40em;
 
     a {
       color: darken($map-blue, 20);

diff --git a/src/assets/stylesheets/pages/_tidslinje.scss b/src/assets/stylesheets/pages/_tidslinje.scss
@@ -25,10 +25,6 @@
         height: 100%;
         width: 100%;
       }
-
-      .toggleLogButton {
-        background-color: red;
-      }
     }
   }
 }
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -14,21 +14,14 @@ import Container from 'components/Container'
 const Header = () => {
   return (
     <header>
-      <div className="titleContainer">
-        <Link className="title" to="/">
+      <Link className="titleContainer" to="/">
+        <div className="title">
           <BubbleChart className="icon" />
           Coronakartan
-        </Link>
-      </div>
+        </div>
+      </Link>
+
       <ul>
-        {/* <li>
-          <Link to="/tabell/">
-            <Button className="navigationLink">
-              <MapIcon className="icon" />
-              <div className="text">Karta</div>
-            </Button>
-          </Link>
-        </li> */}
         <li>
           <Link to="/tabell/">
             <Button className="navigationLink">