Improved spacing and opacity for readability.

This commit is contained in:
Bob Vandevliet 2024-06-07 22:11:11 +02:00
parent bd1ff485f2
commit 22e16f3abd
3 changed files with 17 additions and 0 deletions

View file

@ -1,3 +1,11 @@
:target::before {
content: "";
display: block;
height: 4rem;
margin-top: -4rem;
visibility: hidden;
}
/* Style for active link based on body class */ /* Style for active link based on body class */
body.home .home-link, body.home .home-link,
body.about .about-link, body.about .about-link,
@ -7,6 +15,11 @@ body.contact .contact-link {
nav.bg-dark { nav.bg-dark {
background-color: rgba(var(--bs-dark-rgb), 0.7) !important; background-color: rgba(var(--bs-dark-rgb), 0.7) !important;
transition: background-color 0.5s;
}
body.is-scrolled nav.bg-dark {
background-color: rgba(var(--bs-dark-rgb), 1.0) !important;
} }
section.hero { section.hero {

View file

@ -0,0 +1,3 @@
window.addEventListener('scroll', function() {
document.body.classList.toggle('is-scrolled', window.scrollY > 0);
});

View file

@ -8,4 +8,5 @@
<link rel="stylesheet" href="assets/css/styles.css"> <link rel="stylesheet" href="assets/css/styles.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" crossorigin="anonymous" defer></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" crossorigin="anonymous" defer></script>
<script src="assets/js/header.js" defer></script>
</head> </head>