Initial commit: Hugo setup met Bootstrap

2026-02-21 11:15:13 +01:00
commit a16546a971
30 changed files with 806 additions and 0 deletions
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -0,0 +1,192 @@
+// Imports
+@import "node_modules/bootstrap/scss/bootstrap";
+
+// Fonts
+@font-face {
+  font-family: 'Mukta';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/mukta-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Mukta';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/mukta-600.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Mukta';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('/fonts/mukta-800.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Kantumruy Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/kantumruy-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Kantumruy Pro';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/kantumruy-500.woff2') format('woff2');
+}
+
+
+@font-face {
+  font-family: 'Kantumruy Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/kantumruy-600.woff2') format('woff2');
+}
+
+// Defaults
+$van-emous-blue:   #A8BBD5;
+$van-emous-orange: #b95913; 
+$nav-link-color:   #212121;
+$primary:          $van-emous-orange;
+
+$mukta-font:     'Mukta', system-ui, -apple-system, sans-serif;
+$kantumruy-font: 'Kantumruy Pro', sans-serif;
+
+$font-family-base:     $mukta-font;
+$headings-font-family: $kantumruy-font;
+$headings-font-weight: 500;
+$headings-color:       #212121;
+
+h1, h2, h3, h4, h5, h6, 
+.h1, .h2, .h3, .h4, .h5, .h6, 
+[class^="display-"] {
+    font-family: $headings-font-family;
+    font-weight: $headings-font-weight; 
+    color: $headings-color;
+}
+
+h1, .display-3 {
+    line-height: 1.1;
+    margin-bottom: 1.5rem;
+    letter-spacing: -0.01em;
+}
+
+h2, .h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1.25rem;
+}
+
+p {
+    font-family: $mukta-font;
+	font-size: 18px;
+	line-height: 30px;
+	font-weight: normal;
+	margin-block-start: 0;
+	margin-block-end: 0;
+	padding-bottom: 20px;
+}
+
+.lead {
+    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;
+    font-size: 0.9rem;
+    color: white;
+    a { color: white; text-decoration: none; }
+}
+
+.navbar-nav .nav-link {
+    color: $nav-link-color;
+    font-weight: 500;
+    &:hover { color: $van-emous-orange; }
+}
+
+.navbar {
+    transition: all 0.3s ease-in-out;
+    backface-visibility: hidden;
+}
+
+.navbar.sticky-top {
+    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
+}
+
+.btn-cta {
+    background-color: $van-emous-orange;
+    color: white;
+    border-radius: 50px;
+    padding: 0.8rem 2rem;
+    &:hover { background-color: darken($van-emous-orange, 10%); color: white; }
+}
+
+.hero-section {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+
+    h1 {
+        color: #222;
+        line-height: 1.1;
+        letter-spacing: -1px;
+    }
+
+    .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;
+    }
+}
+
+.btn-cta {
+    background-color: $van-emous-orange;
+    color: white;
+    border: none;
+    border-radius: 50px; // De ovale vorm uit je screenshot
+    padding: 0.75rem 2rem;
+    font-weight: 600;
+    transition: transform 0.2s ease-in-out, background-color 0.2s;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+
+    &:hover {
+        background-color: darken($van-emous-orange, 10%);
+        color: white;
+        transform: translateY(-2px);
+    }
+
+    i {
+        font-size: 0.8rem; // Pijltje iets kleiner
+    }
+}