Ny design på nav + lite rens

public/css/styles.css

@@ -54,12 +54,12 @@ body {
 }
 
 body {
-    padding-top: 105px;
+    /* padding-top: 105px; */
     margin: 0;
 }
 
 body.has-notification-bar {
-    padding-top: 137px;
+    /* padding-top: 137px; */
 }
 
 h1,
@@ -167,6 +167,7 @@ blockquote {
 }
 
 .NotificationBar {
+    display: none;
     background: var(--color-red);
     color: var(--color-white);
     padding: var(--default-margin-half);
@@ -193,34 +194,33 @@ blockquote {
 }
 
 .SiteHeader {
-    position: fixed;
+    /* position: fixed;
     top: 0;
     left: 0;
     right: 0;
-    width: 100%;
+    width: 100%; */
     z-index: 15;
-    padding: var(--default-margin);
-    box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.15);
+    /* box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.15); */
     font-size: 0.75rem;
-    background: var(--color-yellow);
+    background: #fff;
 }
 
-.SiteHeader::after {
+/* .SiteHeader::after {
     content: "";
     background-color: var(--color-blue-police);
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 42px;
-}
+} */
 
 .has-notification-bar .SiteHeader {
     top: 2rem;
 }
 
 .SiteHeader__inner {
-    max-width: 980px;
+    max-width: 1400px;
     margin: 0 auto;
     position: relative;
     z-index: 1; /* above background color elm */
@@ -236,55 +236,60 @@ blockquote {
 
 .SiteTitle {
     margin: 0;
+    padding: var(--default-margin);
     line-height: 1;
     /*text-transform: uppercase;*/
-    font-size: 1.25rem;
+    font-size: 1.5rem;
     transform-origin: center;
+    color: #333;
+    /* color: #982e22; */
+    /* font-weight: bold; */
+    --c-primary-01: #dd2a30;
+    --c-primary-02: #0078bd;
+    --c-primary-03: #c4252b;
+    --c-primary-04: #911c20;
+    border-bottom: 4px solid #e02e3d;
 }
 
-.SiteTagline {
-    display: none;
-    margin-top: 0.5em;
-    margin-bottom: 0;
-    font-style: normal;
-    line-height: 1;
+.SiteTitle__inner,
+.SiteNav__inner {
+    max-width: 1400px;
+    margin: auto;
 }
 
-.SiteTagline em {
-    font-style: inherit;
+.SiteTagline {
+    display: none;
 }
 
 .SiteTitle a {
     text-decoration: none;
     color: inherit;
 }
 
-.SiteHeader__icon {
-    text-align: center;
-}
-
 /* Site navigation */
 .SiteNav {
     position: relative;
     display: block;
-    margin-left: -1rem;
-    margin-right: -1rem;
-    margin-bottom: -1rem;
+    padding: 0 var(--default-margin);
     font-size: 1rem;
-    margin-top: 1rem;
     color: #fff;
+    /* border-bottom: 4px solid #aaa; */
+    background-color: #f5f5f5;
+}
+
+.SiteNav__inner {
 }
 
 .SiteNav__items {
-    display: flex;
-    justify-content: space-between;
-    margin: 0;
+    display: inline-flex;
+    max-width: 100%;
+    /* justify-content: space-between; */
+    margin: 0 0 0 calc(-1 * var(--default-margin));
     padding: 0;
     list-style-type: none;
-    text-align: center;
     overflow-x: auto;
 }
-
+/* 
 .SiteNav::after {
     content: "";
     display: block;
@@ -293,9 +298,8 @@ blockquote {
     right: 0;
     bottom: 0;
     width: 20px;
-    background: linear-gradient(to right, rgba(24, 98, 168, 0), #1862a8);
     pointer-events: none;
-}
+} */
 
 .SiteNav__item {
     /* display: inline-block; */
@@ -305,50 +309,36 @@ blockquote {
     flex: 1 1 100%;
 }
 
-.SiteNav__item a,
-.SiteNav__item__menuToggle {
+.SiteNav__item a {
     display: block;
     width: 100%;
     height: 100%;
-    padding: 0.5rem 0.5rem;
+    padding: var(--default-margin) var(--default-margin);
     margin: 0;
-    color: inherit;
+    color: #333;
     border-bottom: 2px solid transparent;
     transition: border 0.2s ease-out;
     border: none;
-    border-right: 1px solid rgb(104, 154, 200);
-    background-color: var(--color-blue-police);
+    /* border-right: 1px solid rgb(104, 154, 200); */
+    /* background-color: var(--color-blue-police); */
     /* padding-right: 0; */
 }
 
-.SiteNav__item--menu {
-    flex-basis: 50%;
-}
-
-/* .SiteNav__item__menuToggle {
-    appearance: none;
-    -webkit-appearance: none;
-    background: transparent;
-    margin: 0;
-    padding: 0;
-    border: none;
-    color: inherit;
-} */
-
 .SiteNav__item:first-of-type a {
-    border-left: 1px solid rgb(104, 154, 200);
+    /* border-left: 1px solid rgb(104, 154, 200); */
 }
 
-.SiteNav__item a:hover {
+.SiteNav__item a:hover,
+.SiteNav__item a:focus {
     /* border-bottom-color: var(--color-red); */
-    background-color: var(--color-blue-police-active);
+    /* background-color: var(--color-blue-police-active); */
     text-decoration: none;
+    background-color: white;
+    outline: none;
 }
 
-.SiteNav__item svg,
-.SiteNav__item span {
-    vertical-align: middle;
-    display: inline-block;
+.SiteNav__item a:focus {
+    text-decoration: underline;
 }
 
 .Sidebar {
@@ -1190,6 +1180,7 @@ input[type="url"],
 
 .Event__drabbad__title {
     margin-top: 0;
+    font-size: 1rem;
 }
 
 .PageApps__screenshots {
@@ -1397,12 +1388,8 @@ input[type="url"],
         transform-origin: left;
     }
 
-    .SiteHeader__icon {
-        text-align: left;
-    }
-
     .SiteNav__items {
-        text-align: left;
+        /* text-align: left; */
     }
 
     .SiteNav__item a:hover {

resources/views/inbrott.blade.php

@@ -163,7 +163,7 @@ class="SubNav__select"
 
         @if ($undersida === 'drabbad')
             <h2>Drabbad av inbrott?</h2>
-            <p>Är du drabbat av ett inbrott i din villa eller lägenhet?</p>
+            <p>Är du drabbad av ett inbrott i din villa eller lägenhet?</p>
             <p>
                 <a href="https://polisen.se/utsatt-for-brott/olika-typer-av-brott/inbrott/">
                     Läs hos polisen vad du ska göra om du utsatts för ett inbrott.