From 3b9f9e41438b6f32a73e927743ba4c688bd1c7be Mon Sep 17 00:00:00 2001
From: byhe <henrik.bygren@engelholm.se>
Date: Wed, 31 Jan 2024 13:12:36 +0100
Subject: [PATCH] add scss to nav

---
 www/public/css/style.scss | 483 ++++++++++++++++++++++++++++----------
 1 file changed, 358 insertions(+), 125 deletions(-)

diff --git a/www/public/css/style.scss b/www/public/css/style.scss
index 853ed9f..648b763 100644
--- a/www/public/css/style.scss
+++ b/www/public/css/style.scss
@@ -1,81 +1,313 @@
-
 * {
-    margin: 0;
-    padding: 0;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
-    box-sizing: border-box;
+   margin: 0;
+   padding: 0;
+   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
+   box-sizing: border-box;
 }
 
 @font-face {
-    font-family: saker;
-    src: url(./fonts/SakerSansMedium.ttf);
+   font-family: saker;
+   src: url(./fonts/SakerSansMedium.ttf);
 }
 
 @font-face {
-    font-family: saker;
-    src: url(./fonts/SakerSansBold.ttf);
-    font-weight: bold;
+   font-family: saker;
+   src: url(./fonts/SakerSansBold.ttf);
+   font-weight: bold;
 }
 
 html {
-    font-size: 62.5%;
+   font-size: 62.5%;
 }
 
 body {
-    font-size: 1.6rem;
-    height: 100%;
-    background-color: #e8e8e8;
-    position: relative;
-    min-height: 100vh;
+   font-size: 1.6rem;
+   height: 100%;
+   background-color: #e8e8e8;
+   position: relative;
+   min-height: 100vh;
 }
+
 /** Header */
 header {
-    width: 100%;
-    font-size: 1.2rem;
-    text-align: left;
-    height: 80px;
-    padding-top: 5px;
-    background-image: url("/images/bgImg.png");
-    background-repeat: repeat;
-    color: white;
-    position: relative;
-    border-bottom: 2px solid rgb(124, 10, 10);
+   width: 100%;
+   font-size: 1.2rem;
+   text-align: left;
+   height: 80px;
+   padding-top: 5px;
+   background-image: url("/images/bgImg.png");
+   background-repeat: repeat;
+   color: white;
+   position: relative;
+   border-bottom: 2px solid rgb(124, 10, 10);
 
-    h1 {
-        display: inline-block;
-        font-family: saker, Arial;
-        letter-spacing: 3px;
-        font-size: 2.6rem;
-        margin-top: 1.8rem;
-        margin-left: 2.5rem;
-    }
+   h1 {
+      display: inline-block;
+      font-family: saker, Arial;
+      letter-spacing: 3px;
+      font-size: 2.6rem;
+      margin-top: 1.8rem;
+      margin-left: 2.5rem;
+   }
 
-    img {
-        float: left;
-        height: 50px;
-        margin-top: 10px;
-        margin-left: 50px;
-    }
+   img {
+      float: left;
+      height: 50px;
+      margin-top: 10px;
+      margin-left: 50px;
+   }
+
+   /* NYTT */
+   nav {
+      position: relative;
+      display: inline;
+      margin-left: 2rem;
+
+      ul {
+         list-style-type: none;
+         display: inline;
+
+         li {
+            margin-left: 1rem;
+            display: inline;
+
+            a {
+               display: inline-block;
+               padding: 6px;
+               border-bottom: 1px solid rgb(124, 10, 10);
+               font-size: 1.4rem;
+               text-decoration: none;
+               color: white;
+               background-color: black;
+
+               &:hover {
+                  border-bottom: 1px solid red;
+                  color: #ffffff;
+               }
+
+               &.active {
+                  border-bottom: 1px solid red;
+                  color: #ffffff;
+               }
+            }
+         }
+      }
+   }
+
+   button {
+
+      background-color: transparent;
+      border: none;
+
+      img {
+         width: 14px;
+         height: auto;
+      }
+
+      &.sign {
+         border: none;
+         border-radius: 4px;
+         padding: 5px 15px;
+         text-decoration: none;
+         color: white;
+         background-color: rgb(124, 10, 10);
+         margin-left: 1.8rem;
+
+         img {
+            display: none;
+         }
+
+         &:hover {
+            background-color: gray;
+         }
+
+         &::after {
+            content: "Logga Ut";
+         }
+      }
+
+      &:hover {
+         cursor: pointer;
+      }
+
+      img {
+         width: 28px;
+         margin-bottom: -10px;
+
+         &:hover {
+            opacity: 0.5;
+         }
+      }
+   }
+
+   form {
+      display: inline;
+      margin-bottom: 0.7rem;
+
+      input[type="text"] {
+         margin-top: 0.5rem;
+         margin-left: 1.5em;
+         font-size: 1.4rem;
+         width: 20rem;
+      }
+   }
 }
 
 @media only screen and (max-width: 1024px) {
-    header {          
-        height: 12rem;
+   header {
+      height: 12rem;
 
-        img {
-            margin-left: 25px;
-        }
-    }
+      img {
+         margin-left: 25px;
+      }
+   }
+
+   /* Nytt */
+   nav {
+      position: relative;
+      display: inline;
+      margin-left: 2rem;
+
+      ul {
+         list-style-type: none;
+         display: inline;
+
+         li {
+            margin-left: 1rem;
+            display: inline;
+
+            a {
+               display: inline-block;
+               padding: 6px;
+               border-bottom: 1px solid rgb(124, 10, 10);
+               font-size: 1.4rem;
+               text-decoration: none;
+               color: white;
+               background-color: black;
+
+               &:hover {
+                  border-bottom: 1px solid red;
+                  color: #ffffff;
+               }
+
+               &.active {
+                  border-bottom: 1px solid red;
+                  color: #ffffff;
+               }
+            }
+         }
+      }
+   }
+
+   button {
+
+      background-color: transparent;
+      border: none;
+
+      img {
+         width: 14px;
+         height: auto;
+      }
+
+      &.sign {
+         border: none;
+         border-radius: 4px;
+         padding: 5px 15px;
+         text-decoration: none;
+         color: white;
+         background-color: rgb(124, 10, 10);
+         margin-left: 1.8rem;
+
+         img {
+            display: none;
+         }
+
+         &:hover {
+            background-color: gray;
+         }
+
+         &::after {
+            content: "Logga Ut";
+         }
+      }
+
+      &:hover {
+         cursor: pointer;
+      }
+
+      img {
+         width: 28px;
+         margin-bottom: -10px;
+
+         &:hover {
+            opacity: 0.5;
+         }
+      }
+   }
+
+   form {
+      display: inline;
+      margin-bottom: 0.7rem;
+
+      input[type="text"] {
+         margin-top: 0.5rem;
+         margin-left: 1.5em;
+         font-size: 1.4rem;
+         width: 20rem;
+      }
+   }
 }
 
 @media only screen and (max-width: 675px) {
-    header {
-        height: 108px;
+   header {
+      height: 108px;
 
-        img {
-            margin-left: 15px;
-        }
-    }
+      img {
+         margin-left: 15px;
+      }
+
+      /** NYTT **/
+      input,
+      button.search {
+         display: none;
+         margin-top: 1rem;
+         justify-content: right;
+      }
+
+      button.sign {
+         margin-left: 2.6rem;
+         padding: 0;
+         background-color: transparent;
+         position: absolute;
+         right: 15px;
+         top: 15px;
+
+         &:hover {
+            background-color: transparent;
+            color: alpha($color: #000000);
+         }
+
+         &::after {
+            content: none;
+         }
+
+         img {
+            display: inline;
+         }
+      }
+
+      button.search {
+         display: none;
+      }
+
+      nav {
+         ul {
+            li {
+               margin-left: 0.3rem;
+            }
+         }
+      }
+   }
 }
 
 /** END header */
@@ -84,118 +316,119 @@ input,
 p,
 label,
 button {
-    font-size: 1.4rem;
+   font-size: 1.4rem;
 }
 
 input {
-    padding: 0.3rem;
+   padding: 0.3rem;
 }
 
 p {
-    text-align: justify;
+   text-align: justify;
 }
 
 main {
-    max-width: 768px;
-    margin: 0 auto;
-    padding: 20px 4px 45px 4px;
-    position: relative;
-    height: 100%;
+   max-width: 768px;
+   margin: 0 auto;
+   padding: 20px 4px 45px 4px;
+   position: relative;
+   height: 100%;
 
-    h1 {
-        font-family: saker, Arial, Helvetica, sans-serif;
-        font-size: 2.2rem;
-        letter-spacing: 0.4rem;
-    }
+   h1 {
+      font-family: saker, Arial, Helvetica, sans-serif;
+      font-size: 2.2rem;
+      letter-spacing: 0.4rem;
+   }
 
-    h2 {
-        margin-top: 0.5rem;
-        font-family: Arial, sans-serif;
-        font-size: 1.8rem;
-        letter-spacing: 2px;
-    }
+   h2 {
+      margin-top: 0.5rem;
+      font-family: Arial, sans-serif;
+      font-size: 1.8rem;
+      letter-spacing: 2px;
+   }
 
-    h3 {
-        margin-top: 4px;
-        font-family: Arial, Helvetica, sans-serif;
-        font-size: 1.6rem;
-        margin-bottom: 0.5rem;
-    }
+   h3 {
+      margin-top: 4px;
+      font-family: Arial, Helvetica, sans-serif;
+      font-size: 1.6rem;
+      margin-bottom: 0.5rem;
+   }
 
-    h4 {
-        margin-top: 4px;
-        font-family: Arial, Helvetica, sans-serif;
-        font-size: 1.4rem;
-        margin-bottom: 0.5rem;
-    }
+   h4 {
+      margin-top: 4px;
+      font-family: Arial, Helvetica, sans-serif;
+      font-size: 1.4rem;
+      margin-bottom: 0.5rem;
+   }
 }
 
 label {
-    display: block;
+   display: block;
 }
 
 input {
-    width: 100%;
+   width: 100%;
 
-    &[type="submit"] {
-        color: white;
-        background-color: #166fe5;
-        border: none;
-        margin: 10px 10px 0 0;
-        padding: 0.7rem;
-        border-radius: 6px;
+   &[type="submit"] {
+      color: white;
+      background-color: #166fe5;
+      border: none;
+      margin: 10px 10px 0 0;
+      padding: 0.7rem;
+      border-radius: 6px;
 
-        &:hover {
-            background-color: blue;
-        }
-    }
+      &:hover {
+         background-color: blue;
+      }
+   }
 }
+
 aside,
 section {
-    display: inline-block;
-    vertical-align: top;
+   display: inline-block;
+   vertical-align: top;
 }
 
 aside {
-    margin-right: 10px;
+   margin-right: 10px;
 }
 
 button {
-    width: 100%;
-    color: white;
-    background-color: grey;
-    border: none;
-    margin: 10px 10px 0 0;
-    padding: 0.7rem;
-    border-radius: 6px;
+   width: 100%;
+   color: white;
+   background-color: grey;
+   border: none;
+   margin: 10px 10px 0 0;
+   padding: 0.7rem;
+   border-radius: 6px;
 
-    &:hover {
-        background-color: #aeaeae;
-    }
+   &:hover {
+      background-color: #aeaeae;
+   }
 }
 
 p.center {
-    text-align: center;
-    margin-top: 0.5rem;
+   text-align: center;
+   margin-top: 0.5rem;
 }
 
 @media only screen and (max-width: 675px) {
-    img {
-        display: none;
-    }
+   img {
+      display: none;
+   }
 }
 
 /** footer */
-footer{
-    height: 45px;
-    width: 100%;
-    background-image: url('/images/bgImgLarge.png');
-    border-top: 2px solid rgb(124, 10, 10);
-    position: absolute;
-    bottom: 0;
+footer {
+   height: 45px;
+   width: 100%;
+   background-image: url('/images/bgImgLarge.png');
+   border-top: 2px solid rgb(124, 10, 10);
+   position: absolute;
+   bottom: 0;
 
-    p {
-        color: white;
-        padding: 1rem;
-    }
+   p {
+      color: white;
+      padding: 1rem;
+   }
 }
\ No newline at end of file