From 69d47ea4ddcdf3b72f0979ce0f027876c87b3969 Mon Sep 17 00:00:00 2001 From: StartIT Date: Sat, 21 Feb 2026 12:01:45 +0100 Subject: [PATCH] Menu: SCSS Done --- assets/scss/main.scss | 141 +++++++++++++++++++++++++---------- hugo_stats.json | 4 + layouts/partials/header.html | 6 +- layouts/partials/hero.html | 4 +- static/img/chevron.svg | 3 + 5 files changed, 115 insertions(+), 43 deletions(-) create mode 100644 static/img/chevron.svg diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 27ffa33..38f7a13 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -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; } } \ No newline at end of file diff --git a/hugo_stats.json b/hugo_stats.json index b9de438..672edb2 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -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", diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 96fe49b..20bbe78 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -27,7 +27,7 @@ -