laurens/fediversity_website
Archived
2
1
Fork 1
Code Issues Pull requests Packages Projects Releases Wiki Activity

Logo verkleinen of laten verdwijnen als er mobiel apparaat wordt gebruikt, tevens achtergrondkleur voor mobiele apparaten

Browse source
This commit is contained in:
Michael Boelen 2023-05-17 10:44:14 +02:00
parent f32e40c375
commit 18bc55f9f0
2 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
themes/nluug/assets/scss/styles.scss
View file

@ -184,7 +184,7 @@ ul, ol {
} }
.content { .content {
max-width: 800px; max-width: 1024px;
margin: 0 auto; margin: 0 auto;
// text-align: justify; // text-align: justify;
} }

26
themes/nluug/assets/scss/styles_navigation_menu.scss
View file

@ -1,6 +1,6 @@
header { header {
position: relative; 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 { .header-content {
@ -70,9 +70,9 @@ input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;
} }
//ul.menu { ul.menu {
// background: #f2f2f2; background: #f2f2f2;
//} }
ul.menu li { ul.menu li {
list-style: none; list-style: none;
@ -148,8 +148,17 @@ li:focus-within > button > .arrow {
} }
/* MEDIA QUERIES */ /* MEDIA QUERIES */
@media (max-width: 360px) {
.logo img {
visibility: collapse;
}
}
@media (max-width: 480px) {
.logo img {
max-width: 200px;
}
}
@media (min-width: 640px) { @media (min-width: 640px) {
.header-content { .header-content {
display: flex; display: flex;
} }
@ -161,21 +170,20 @@ li:focus-within > button > .arrow {
display: flex; display: flex;
transform: initial; transform: initial;
} }
label, input[type="checkbox"] { label, input[type="checkbox"] {
display: none; display: none;
} }
ul.menu {
background-color: white;
}
ul.menu li { ul.menu li {
position: relative; position: relative;
font-size: 14px; font-size: 14px;
} }
ul.menu li a:hover, ul.menu li a:hover,
ul.menu li button:hover { ul.menu li button:hover {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.dropdown { .dropdown {
position: absolute; position: absolute;
right: 0; right: 0;