bvandevliet/Vandevliet.AerialShots.Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Socials in navbar and improved styles.
All checks were successful
Build and Deploy / Build and Deploy (push) Successful in 37s
Details

Browse source
This commit is contained in:
Bob Vandevliet 2025-07-05 11:34:38 +02:00
parent 2909fd6c40
commit ac329c65e7
2 changed files with 36 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

7
public/includes/nav.html
View file

@ -18,7 +18,12 @@
<a class="nav-link" href="/#over-mij">Over mij</a> <a class="nav-link" href="/#over-mij">Over mij</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="btn btn-primary" href="#contact">Contact</a> <a class="nav-link btn btn-primary" href="/#contact">Contact</a>
</li>
<li class="nav-item socials">
<a class="nav-link" href="https://www.instagram.com/vandevliet.fpv" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on Instagram" aria-label="Vandevliet Aerial Shots on Instagram"><i class="fab fa-instagram"></i></a>
<a class="nav-link" href="https://www.youtube.com/@vandevliet-fpv" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on YouTube" aria-label="Vandevliet Aerial Shots on YouTube"><i class="fab fa-youtube"></i></a>
<a class="nav-link" href="https://www.linkedin.com/company/vdv-as" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on LinkedIn" aria-label="Vandevliet Aerial Shots on LinkedIn"><i class="fab fa-linkedin"></i></a>
</li> </li>
</ul> </ul>
</div> </div>

42
src/scss/styles.scss
View file

@ -228,7 +228,7 @@ body.is-scrolled .navbar {
.nav-link, .nav-link,
.btn { .btn {
@extend .text-white; // @extend .text-white;
font-family: $ff-header; font-family: $ff-header;
} }
} }
@ -243,11 +243,34 @@ body.is-scrolled .navbar {
} }
} }
.navbar-nav .btn { .socials {
margin-left: var(--bs-navbar-nav-link-padding-x); display: flex;
padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); gap: .5rem;
padding-right: var(--bs-navbar-nav-link-padding-x); }
padding-left: var(--bs-navbar-nav-link-padding-x);
.navbar-nav {
.btn {
border: none;
padding-top: var(--bs-nav-link-padding-y);
padding-bottom: var(--bs-nav-link-padding-y);
}
.socials {
@extend .justify-content-center;
}
// navbar-expand-lg
@include media-breakpoint-up(lg) {
.btn:not(.btn+.btn),
.socials a:not(a+a) {
margin-left: var(--bs-navbar-nav-link-padding-x);
}
.socials {
gap: 0;
}
}
} }
.row { .row {
@ -259,7 +282,7 @@ img.grayscale-effect {
transition: filter 0.2s; transition: filter 0.2s;
} }
*:not(:hover) img.grayscale-effect { :not(:hover) img.grayscale-effect {
filter: grayscale(80%); filter: grayscale(80%);
} }
@ -347,11 +370,6 @@ img.grayscale-effect {
border-width: 3px 0 0 0 !important; border-width: 3px 0 0 0 !important;
} }
.socials {
display: flex;
gap: .5rem;
}
.scrollto-highlight { .scrollto-highlight {
position: relative; position: relative;
overflow: hidden; overflow: hidden;