Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: Leilukin:e051095ce32c3a3ed04ffed5690f9fc875c78420
Branches Tags
Leilukin:main
Leilukin:build
..
compare: Leilukin:659896f57df85533cce7e28816cc6e96b57df0ca
Branches Tags
Leilukin:build
Leilukin:main

2 Commits
e051095ce3 ... 659896f57d

Author SHA1 Message Date
Helen Chong 659896f57d Use CSS @supports rule to change property values if popover is supported 2024-07-24 20:37:12 +08:00
Helen Chong e76ac1778b Add fallback for older browsers that do not support HTML popover 2024-07-24 20:10:18 +08:00
1 changed files with 14 additions and 9 deletions
Show Stats Expand all files Collapse all files

23
src/_includes/global/navbar.njk
View File

@ -52,7 +52,13 @@
.navbar__menu a:hover { color: var(--clr-link-hover); } .navbar__menu a:hover { color: var(--clr-link-hover); }
.navbar__menu a:focus { outline-offset: 0.2em; } .navbar__menu a:focus { outline-offset: 0.2em; }
.navbar__links { display: none; }
.navbar__links {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 0.5em;
}
.navbar__toggle { .navbar__toggle {
background-color: inherit; background-color: inherit;
@ -61,7 +67,7 @@
padding: 0; padding: 0;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
display: flex; display: none;
align-items: center; align-items: center;
gap: 0.3em; gap: 0.3em;
} }
@ -85,16 +91,15 @@
opacity: 0.5; opacity: 0.5;
} }
@supports selector([popover]) {
.navbar__toggle { display: flex; }
.navbar__links { display: none; }
}
/* Tablet screen size */ /* Tablet screen size */
@media only screen and (min-width: 43.75rem) { @media only screen and (min-width: 43.75rem) {
.navbar { padding: 1em 0.6em; } .navbar { padding: 1em 0.6em; }
.navbar__toggle, .navbar__popover { display: none; } .navbar__toggle, .navbar__popover { display: none; }
.navbar__links { display: flex; }
.navbar__links {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 0.5em;
}
} }
{% endcss %} {% endcss %}