Added styling for print

leonboot · leonboot · commit fb960d59c77f · 2024-11-13T08:02:16.000+01:00
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
@@ -1,6 +1,24 @@
 @import "~bootstrap/scss/bootstrap";
 
-main > .container { padding-top: 90px; margin-bottom: 1000px; }
+@media print {
+
+    body {
+        font-size: 0.75rem;
+    }
+
+    header {
+        display: none;
+    }
+
+    .container {
+        padding: 0;
+        max-width: 100%;
+        margin-bottom: 0 !important;
+    }
+
+}
+
+main > .container { margin-bottom: 1000px; }
 
 dt { text-align: right; }
 
@@ -9,7 +27,7 @@ h2[id] {
 }
 
 .container > section {
-    padding-bottom: 20px;
+    padding-top: 20px;
 }
 
 .skills {
diff --git a/assets/ts/app.ts b/assets/ts/app.ts
@@ -53,9 +53,12 @@ window.addEventListener("scroll", (event: Event) => {
         }
     });
     if (lastElement instanceof HTMLElement) {
-        document.querySelectorAll("header nav .nav-link").forEach((el: HTMLElement) => {
-            el.classList.remove("active");
+        document.querySelectorAll("header .nav-link").forEach((el: HTMLElement) => {
+            el.classList.remove("text-white");
+            el.classList.add("text-secondary");
         });
-        document.querySelector("header nav .nav-link[href='#" + lastElement.id + "']").classList.add("active");
+        let cl = document.querySelector("header .nav-link[href='#" + lastElement.id + "']").classList;
+        cl.remove("text-secondary");
+        cl.add("text-white");
     }
 });
diff --git a/public/index.html b/public/index.html
@@ -12,25 +12,26 @@
 
   <body>
 
-    <header>
-      <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-        <a class="navbar-brand" href="#p_personalia">Curriculum Vitae</a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="navbar-collapse collapse">
-          <ul class="navbar-nav mr-auto">
-            <li class="nav-item"><a class="nav-link active" href="#p_personalia">Persoonlijke gegevens</a></li>
-            <li class="nav-item"><a class="nav-link" href="#p_education">Opleidingen</a></li>
-            <li class="nav-item"><a class="nav-link" href="#p_experience">Relevante werkervaring</a></li>
-            <li class="nav-item"><a class="nav-link" href="#p_skills">Kennis en vaardigheden</a></li>
-            <li class="nav-item"><a class="nav-link" href="#p_other">Overige bijzonderheden</a></li>
-          </ul>
-        </div>
-      </nav>
-    </header>
+    <main>
+
+      <header class="p-3 text-bg-dark sticky-top">
+        <div class="container">
+          <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+            <a href="#p_personalia" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
+              Curriculum Vitae
+            </a>
+
+            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
+              <li><a href="#p_personalia" class="nav-link px-2 text-secondary">Persoonlijke gegevens</a></li>
+              <li><a href="#p_education" class="nav-link px-2 text-secondary">Opleidingen</a></li>
+              <li><a href="#p_experience" class="nav-link px-2 text-secondary">Relevante werkervaring</a></li>
+              <li><a href="#p_skills" class="nav-link px-2 text-secondary">Kennis en vaardigheden</a></li>
+              <li><a href="#p_other" class="nav-link px-2 text-secondary">Overige bijzonderheden</a></li>
+            </ul>
 
-    <main role="main" class="flex-shrink-0">
+          </div>
+        </div>
+      </header>
 
       <div class="container">
 
