header colour

css/theme-dark.scss

@@ -4,20 +4,21 @@ $primary:     #0F2E3D;
 $secondary:   #19A0BE; 
 $link-color:  $secondary;
 
-$body-color:  white;
+$body-color:  #DDDDDD;
 $body-bg:     #292929;
 $navbar-fg:   white;
 $navbar-hl:   white;
 
 /*-- scss:rules --*/
 
-h1, .h1 h2{
-  color: $body-color;
+
+h3 {
+  color: $secondary;
 }
 
 .btn.btn-outline-primary{
-  color: white;
-  border-color: white;
+  color: $body-color;
+  border-color: $body-color;
 }
 
 

css/theme-light.scss

@@ -11,10 +11,14 @@ $navbar-hl:   white;
 
 /*-- scss:rules --*/
 
-h1, .h1 h2{
+h1, .h1 h2 {
   color: $primary;
 }
 
+h3 {
+  color: $secondary;
+}
+
 .quarto-title-banner .quarto-title .title {
   color: white;
 }

docs/posts/2023-15-12-data-driven-cv/index.html

@@ -246,7 +246,7 @@ <h3 class="anchored" data-anchor-id="each-activity-entry-is-read-in-from-my-cv-s
 <p>The CV spreadsheet includes some checkboxes, so that each activity can be included or excluded from the different outputs I might want: my website homepage, my long form CV, my short form CV.</p>
 <div class="quarto-figure quarto-figure-center">
 <figure class="figure">
-<p><a href="preview.png" class="lightbox" data-glightbox="description: .lightbox-desc-1" data-gallery="quarto-lightbox-gallery-1" title="Screenshot of CV spreadsheet"><img src="preview.png" class="img-fluid figure-img" alt="Screenshot of CV spreadsheet"></a></p>
+<p><a href="preview.png" class="lightbox" data-gallery="quarto-lightbox-gallery-1" data-glightbox="description: .lightbox-desc-1" title="Screenshot of CV spreadsheet"><img src="preview.png" class="img-fluid figure-img" alt="Screenshot of CV spreadsheet"></a></p>
 <figcaption>Screenshot of CV spreadsheet</figcaption>
 </figure>
 </div>
@@ -279,23 +279,23 @@ <h3 class="anchored" data-anchor-id="quirks">Quirks</h3>
 <div class="quarto-layout-cell" style="flex-basis: 33.3%;justify-content: flex-start;">
 <div class="quarto-figure quarto-figure-center">
 <figure class="figure">
-<p><a href="print_bad.png" class="lightbox" data-glightbox="description: .lightbox-desc-2" data-gallery="quirks" title="Awkward pagebreak"><img src="print_bad.png" class="img-fluid figure-img" alt="Awkward pagebreak"></a></p>
+<p><a href="print_bad.png" class="lightbox" data-gallery="quirks" data-glightbox="description: .lightbox-desc-2" title="Awkward pagebreak"><img src="print_bad.png" class="img-fluid figure-img" alt="Awkward pagebreak"></a></p>
 <figcaption>Awkward pagebreak</figcaption>
 </figure>
 </div>
 </div>
 <div class="quarto-layout-cell" style="flex-basis: 33.3%;justify-content: flex-start;">
 <div class="quarto-figure quarto-figure-center">
 <figure class="figure">
-<p><a href="edit_html.png" class="lightbox" data-glightbox="description: .lightbox-desc-3" data-gallery="quirks" title="Edit html to add loads of breaks"><img src="edit_html.png" class="img-fluid figure-img" alt="Edit html to add loads of breaks"></a></p>
+<p><a href="edit_html.png" class="lightbox" data-gallery="quirks" data-glightbox="description: .lightbox-desc-3" title="Edit html to add loads of breaks"><img src="edit_html.png" class="img-fluid figure-img" alt="Edit html to add loads of breaks"></a></p>
 <figcaption>Edit html to add loads of breaks</figcaption>
 </figure>
 </div>
 </div>
 <div class="quarto-layout-cell" style="flex-basis: 33.3%;justify-content: flex-start;">
 <div class="quarto-figure quarto-figure-center">
 <figure class="figure">
-<p><a href="new_space.png" class="lightbox" data-glightbox="description: .lightbox-desc-4" data-gallery="quirks" title="New spacing in PDF"><img src="new_space.png" class="img-fluid figure-img" alt="New spacing in PDF"></a></p>
+<p><a href="new_space.png" class="lightbox" data-gallery="quirks" data-glightbox="description: .lightbox-desc-4" title="New spacing in PDF"><img src="new_space.png" class="img-fluid figure-img" alt="New spacing in PDF"></a></p>
 <figcaption>New spacing in PDF</figcaption>
 </figure>
 </div>
@@ -852,7 +852,7 @@ <h2 class="anchored" data-anchor-id="conclusions">Conclusions</h2>
 });
 </script>
 </div> <!-- /content -->
-<script>var lightboxQuarto = GLightbox({"closeEffect":"zoom","descPosition":"bottom","openEffect":"zoom","loop":false,"selector":".lightbox"});
+<script>var lightboxQuarto = GLightbox({"loop":false,"descPosition":"bottom","selector":".lightbox","closeEffect":"zoom","openEffect":"zoom"});
 window.onload = () => {
   lightboxQuarto.on('slide_before_load', (data) => {
     const { slideIndex, slideNode, slideConfig, player, trigger } = data;