Added logo and using Bootstrap Sass to customize theme colors.

public/assets/css/styles.css

@@ -1,101 +0,0 @@
-nav {
-  background-color: rgba(22, 23, 25, 0.4) !important;
-  transition: background-color 0.5s;
-}
-
-body.is-scrolled nav {
-  background-color: rgba(22, 23, 25, 1.0) !important;
-}
-
-.navbar-collapse:not(.collapsing):not(.show) {
-  max-width: fit-content;
-}
-
-.navbar-nav .btn {
-  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
-  padding-right: var(--bs-navbar-nav-link-padding-x);
-  padding-left: var(--bs-navbar-nav-link-padding-x);
-}
-
-.hero {
-  height: 100vh;
-}
-
-.row {
-  --bs-gutter-y: var(--bs-gutter-x);
-}
-
-.text-shadow {
-  text-shadow:
-    -1px -1px 1px rgba(0, 0, 0, 0.4),
-    -1px 0px 1px rgba(0, 0, 0, 0.4),
-    -1px 1px 1px rgba(0, 0, 0, 0.4),
-    0px -1px 1px rgba(0, 0, 0, 0.4),
-    0px 0px 1px rgba(0, 0, 0, 0.4),
-    0px 1px 1px rgba(0, 0, 0, 0.4),
-    1px -1px 1px rgba(0, 0, 0, 0.4),
-    1px 0px 1px rgba(0, 0, 0, 0.4),
-    1px 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-:target::before {
-  content: "";
-  display: block;
-  height: 4rem;
-  margin-top: -4rem;
-  visibility: hidden;
-}
-
-.anchor-link {
-  text-decoration: none;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-h1:hover .anchor-link,
-h2:hover .anchor-link,
-h3:hover .anchor-link,
-h4:hover .anchor-link,
-h5:hover .anchor-link,
-h6:hover .anchor-link {
-  opacity: 1;
-}
-
-.cover,
-.parallax,
-.card-img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.parallax {
-  height: 100vh;
-}
-
-.card-img-overlay {
-  position: unset;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  transition: background-color 0.2s;
-}
-
-.card:hover .card-img-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
-.arrow-effect {
-  --s: 100px;
-  --c1: var(--bs-body-bg);
-  --c2: var(--bs-secondary-bg-subtle);
-
-  background:
-    conic-gradient(#0000 75%, var(--c1) 0) 0 calc(var(--s)/4),
-    conic-gradient(from 45deg, var(--c1) 25%, var(--c2) 0);
-  background-size: var(--s) var(--s);
-}

public/includes/footer.html

@@ -5,7 +5,7 @@
       <div class="col-6 col-lg-3">
         <div class="card h-100">
           <div class="card-body">
-            <h2 class="card-title" id="section-contact">Contact</h4>
+            <h5 class="card-title" id="section-contact">Contact</h5>
               <h4>Bob Vandevliet</h4>
               <p>Gecertificeerd FPV-dronepiloot voor open categorie A1, A2 en A3.</p>
               <h5>Email</h5>

public/includes/head.html

@@ -4,7 +4,6 @@
 
   <title><!--# echo var="title" default="Title" --></title>
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="assets/css/styles.css">
 
   <script src="https://kit.fontawesome.com/7e7cf109ad.js" crossorigin="anonymous"></script>

public/includes/nav.html

@@ -1,6 +1,8 @@
 <nav class="navbar navbar-expand-lg fixed-top">
   <div class="container-xxl justify-content-center">
-    <a class="navbar-brand" href="#"><!--# echo var="site" default="Website Title" --></a>
+    <a class="navbar-brand" href="#">
+      <img src="static/logo-aerialshots-v1-w.png" alt="Logo" height="48">
+    </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>