From 18bc55f9f0c1f196ed4e17aafd8b44b3b318f508 Mon Sep 17 00:00:00 2001 From: Michael Boelen 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;