From 18bc55f9f0c1f196ed4e17aafd8b44b3b318f508 Mon Sep 17 00:00:00 2001
From: Michael Boelen <michael.boelen@cisofy.com>
Date: Wed, 17 May 2023 10:44:14 +0200
Subject: [PATCH] Logo verkleinen of laten verdwijnen als er mobiel apparaat
 wordt gebruikt, tevens achtergrondkleur voor mobiele apparaten

---
 themes/nluug/assets/scss/styles.scss          |  2 +-
 .../assets/scss/styles_navigation_menu.scss   | 26 ++++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/themes/nluug/assets/scss/styles.scss b/themes/nluug/assets/scss/styles.scss
index e264055..764aac5 100644
--- a/themes/nluug/assets/scss/styles.scss
+++ b/themes/nluug/assets/scss/styles.scss
@@ -184,7 +184,7 @@ ul, ol {
 }
 
 .content {
-    max-width: 800px;
+    max-width: 1024px;
     margin: 0 auto;
     // text-align: justify;
 }
diff --git a/themes/nluug/assets/scss/styles_navigation_menu.scss b/themes/nluug/assets/scss/styles_navigation_menu.scss
index 6068cc4..ad14134 100644
--- a/themes/nluug/assets/scss/styles_navigation_menu.scss
+++ b/themes/nluug/assets/scss/styles_navigation_menu.scss
@@ -1,6 +1,6 @@
 header {
   position: relative;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
 .header-content {
@@ -70,9 +70,9 @@ input[type="checkbox"]:focus + label::before {
   box-shadow: 0 0 20px black;
 }
 
-//ul.menu {
-//  background: #f2f2f2;
-//}
+ul.menu {
+  background: #f2f2f2;
+}
 
 ul.menu li {
    list-style: none;
@@ -148,8 +148,17 @@ li:focus-within > button > .arrow {
 }
 
 /* MEDIA QUERIES  */
+@media (max-width: 360px) {
+  .logo img {
+    visibility: collapse;
+  }
+}
+@media (max-width: 480px) {
+  .logo img {
+    max-width: 200px;
+  }
+}
 @media (min-width: 640px) {
-  
   .header-content {
     display: flex;
   }
@@ -161,21 +170,20 @@ li:focus-within > button > .arrow {
     display: flex;
     transform: initial;
   }
-  
   label, input[type="checkbox"] {
     display: none;
   }
-  
+  ul.menu {
+    background-color: white;
+  }
   ul.menu li {
     position: relative;
     font-size: 14px;
   }
-  
   ul.menu li a:hover,
   ul.menu li button:hover {
     background-color: #f2f2f2;
   }
-  
   .dropdown {
     position: absolute;
     right: 0;