VanEmous/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Menu: SCSS Done

Browse Source
This commit is contained in:
Machiel Heinen
2026-02-21 12:01:45 +01:00
parent a16546a971
commit 69d47ea4dd
5 changed files with 115 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
assets/scss/main.scss
View File

@@ -98,22 +98,6 @@ p {
font-weight: 400;
}
.btn-cta {
background-color: $van-emous-orange;
color: #fff;
border-radius: 50px;
padding: .8rem 2rem;
font-family: $mukta-font;
font-weight: 600;
transition: transform 0.2s ease;
&:hover {
background-color: darken($van-emous-orange, 10%);
color: #fff;
transform: translateY(-2px);
}
}
// Menu
.top-bar {
background-color: $van-emous-blue;
@@ -137,16 +121,72 @@ p {
position: -webkit-sticky !important; // Voor Safari
position: sticky !important;
top: 0 !important;
z-index: 1030 !important; // Net iets hoger dan de standaard
background-color: #ffffff !important; // Voorkom transparantie bij scrollen
z-index: 1030 !important;
background-color: #ffffff !important;
}
.btn-cta {
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.dropdown-menu {
border: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 1rem 0;
background-color: $van-emous-orange;
color: white;
border-radius: 50px;
padding: 0.8rem 2rem;
&:hover { background-color: darken($van-emous-orange, 10%); color: white; }
.dropdown-item {
font-family: $mukta-font;
padding: 0.5rem 1.5rem;
font-weight: 400;
color: #fff;
position: relative;
transition: all 0.2s ease-in-out; // Zorgt voor de vloeiende verschuiving
display: flex;
align-items: center;
// Het '>' symbool (onzichtbaar in ruststand)
&::before {
content: "\F285"; // Bootstrap Icons code voor 'chevron-right'
font-family: "bootstrap-icons";
position: absolute;
left: 0.5rem;
opacity: 0;
transition: all 0.2s ease-in-out;
font-size: 0.8rem;
}
&:hover {
background-color: $van-emous-orange;
color: #fff;
padding-left: 2.2rem; // Schuift de tekst naar rechts om ruimte te maken voor >
&::before {
opacity: 1;
left: 1.2rem; // Laat het symbool subtiel 'invliegen'
}
}
&:active {
background-color: darken($van-emous-orange, 5%);
}
}
}
@media (min-width: 992px) {
.nav-item.dropdown {
&:hover {
> .dropdown-menu {
display: block;
margin-top: 0;
opacity: 1;
visibility: visible;
animation: fadeIn 0.2s ease-in;
}
}
}
}
.hero-section {
@@ -162,31 +202,56 @@ p {
.lead {
font-size: 1.1rem;
line-height: 1.6;
// Optioneel: de border-start kleur aanpassen aan je huisstijl
border-color: $van-emous-orange !important;
border-width: 3px !important;
}
}
// Buttons
.btn-cta {
background-color: $van-emous-orange;
color: white;
border: none;
border-radius: 50px; // De ovale vorm uit je screenshot
padding: 0.75rem 2rem;
display: inline-block;
position: relative;
font-weight: 600;
transition: transform 0.2s ease-in-out, background-color 0.2s;
display: inline-flex;
align-items: center;
gap: 10px;
color: #ffffff;
background-color: $van-emous-orange !important;
padding: 17px 60px 17px 35px;
font-size: 16px;
line-height: normal;
border-radius: 50px;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
font-family: $mukta-font;
border: none;
text-decoration: none;
&::after {
content: "";
background-image: url('/img/chevron.svg');
background-size: contain;
background-repeat: no-repeat;
display: block;
width: 7px;
height: 13px;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
&:hover {
background-color: darken($van-emous-orange, 10%);
color: white;
transform: translateY(-2px);
color: #ffffff;
padding-right: 80px;
&::after {
right: 30px;
}
}
}
i {
font-size: 0.8rem; // Pijltje iets kleiner
.cta-wrapper {
@media (min-width: 992px) {
min-width: 320px;
display: flex;
justify-content: flex-end;
}
}

4
hugo_stats.json
View File

@@ -35,11 +35,14 @@
"btn",
"btn-cta",
"col-lg-4",
"col-lg-5",
"col-lg-6",
"col-lg-7",
"collapse",
"contact-info",
"container",
"content",
"cta-wrapper",
"d-flex",
"d-md-block",
"d-none",
@@ -52,6 +55,7 @@
"google-reviews",
"hero-section",
"justify-content-between",
"justify-content-end",
"lead",
"mb-2",
"mb-5",

6
layouts/partials/header.html
View File

@@ -27,7 +27,7 @@
</div>
</header>
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm sticky-top" aria-label="Hoofdmenu">
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 sticky-top" aria-label="Hoofdmenu">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="/" aria-label="Van Emous Mantelzorgwoningen Home">
{{ if .Site.Params.logo }}
@@ -74,9 +74,9 @@
{{ end }}
{{ end }}
<li class="nav-item ms-lg-3">
<li class="nav-item ms-lg-3 d-flex align-items-center justify-content-end cta-wrapper">
<a href="/brochure" class="btn btn-cta" role="button">
Gratis brochure aanvragen <i class="bi bi-chevron-right" aria-hidden="true"></i>
Gratis brochure aanvragen
</a>
</li>
</ul>

4
layouts/partials/hero.html
View File

@@ -4,11 +4,11 @@
<div class="col-lg-7">
<h1 class="display-3 mb-5">{{ .Params.hero.title }}</h1>
<a href="{{ .Params.hero.cta_link }}" class="btn btn-cta">
{{ .Params.hero.cta_text }} <i class="bi bi-chevron-right ms-2"></i>
{{ .Params.hero.cta_text }}
</a>
</div>
<div class="col-lg-4 offset-lg-1">
<div class="col-lg-5">
<p class="lead mb-2">
{{ .Params.hero.subtitle }}
</p>

3
static/img/chevron.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-8.58307e-06 1.06L1.06099 1.90735e-06L6.83999 5.777C6.93315 5.86957 7.00707 5.97965 7.05752 6.1009C7.10797 6.22215 7.13394 6.35218 7.13394 6.4835C7.13394 6.61483 7.10797 6.74486 7.05752 6.86611C7.00707 6.98736 6.93315 7.09743 6.83999 7.19L1.06099 12.97L0.000991344 11.91L5.42499 6.485L-8.58307e-06 1.06Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 431 B