Put navbar title in toggle button for mobile

This commit is contained in:
Helen Chong 2024-05-10 17:06:10 +08:00
parent d5aa1de552
commit 1597932099
91 changed files with 991 additions and 1531 deletions

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -4,7 +4,7 @@
<subtitle>Leilukin&#39;s personal website.</subtitle> <subtitle>Leilukin&#39;s personal website.</subtitle>
<link href="https://leilukin.neocities.org/feed.xml" rel="self"/> <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
<link href="https://leilukin.neocities.org"/> <link href="https://leilukin.neocities.org"/>
<updated>2024-05-10T08:55:41Z</updated> <updated>2024-05-10T09:04:16Z</updated>
<id>https://leilukin.neocities.org</id> <id>https://leilukin.neocities.org</id>
<author> <author>
<name>Leilukin</name> <name>Leilukin</name>

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -139,12 +139,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -178,19 +176,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -198,11 +197,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -235,7 +229,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -139,12 +139,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -178,19 +176,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -198,11 +197,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -235,7 +229,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -139,12 +139,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -178,19 +176,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -198,11 +197,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -235,7 +229,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -139,12 +139,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -178,19 +176,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -198,11 +197,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -235,7 +229,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -178,19 +176,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -198,11 +197,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -235,7 +229,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -178,19 +176,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -198,11 +197,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -235,7 +229,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -178,19 +176,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -198,11 +197,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -235,7 +229,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -178,19 +176,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -198,11 +197,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -235,7 +229,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -178,19 +176,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -198,11 +197,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -235,7 +229,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -178,19 +176,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -198,11 +197,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -235,7 +229,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -178,19 +176,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -198,11 +197,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -235,7 +229,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -133,12 +133,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -175,19 +173,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -195,11 +194,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -232,7 +226,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -228,12 +228,10 @@
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
@ -277,19 +275,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -297,11 +296,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -334,7 +328,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }

View File

@ -1,10 +1,8 @@
<nav class="navbar"> <nav class="navbar">
<div class="navbar__header">
<button class="navbar__toggle" aria-label="Navigation menu toggle"> <button class="navbar__toggle" aria-label="Navigation menu toggle">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button>
<h2 class="navbar__title">Navigation</h2> <h2 class="navbar__title">Navigation</h2>
</div> </button>
<ul class="navbar__links"> <ul class="navbar__links">
{% block navbarLinks %} {% block navbarLinks %}
{{ navbarLinks }} {{ navbarLinks }}
@ -22,19 +20,20 @@
top: 0; top: 0;
} }
.navbar__header { .navbar__toggle,
display: flex; .navbar__title {
align-items: center; color: var(--clr-navbar-link);
gap: 0.8em; font-size: 1.3rem;
} }
.navbar__toggle { .navbar__toggle {
display: flex;
align-items: center;
gap: 0.5em;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 1.3rem;
background-color: inherit; background-color: inherit;
color: var(--clr-navbar-link);
} }
.navbar__toggle:focus, .navbar__toggle:focus,
@ -42,11 +41,6 @@
outline: 0.15em solid var(--clr-navbar-link); outline: 0.15em solid var(--clr-navbar-link);
} }
.navbar__title {
font-size: 1.3rem;
color: var(--clr-navbar-link);
}
.navbar a { .navbar a {
color: var(--clr-navbar-link); color: var(--clr-navbar-link);
text-decoration: none; text-decoration: none;
@ -79,7 +73,7 @@
padding: 0 0.6em; padding: 0 0.6em;
} }
.navbar__header { .navbar__toggle {
display: none; display: none;
} }