feat(sass): refine colors and gallery/modal images

* color scheme: add gallery-bg-color and gallery-modal-bg-color
* visual change: allow defining default gallery and modal background
* visual change: padding of gallery modal header, set explicit max. height
* breaking: existing color maps
* breaking: dedark color scheme (due to changed colors)

assets/sass/_colors.scss

@@ -1 +1 @@
-@import "themes/delight-colors" 
+@import "themes/delight-colors"

assets/sass/_gallery.scss

@@ -1,5 +1,6 @@
 .gallery {
   .gallery-item {
+    background-color: $gallery-bg-color;
     position: relative;
     width: 50%;
     padding: 0;
@@ -62,6 +63,7 @@
     img {
       padding: $vertical-rhythm * 3;
       max-height: 100%;
+      height: auto;
     }
   }
 

assets/sass/_modal.scss

@@ -58,14 +58,15 @@
 }
 
 .modal-header-img-container {
+  background-color: $gallery-modal-bg-color;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: 4%;
 
   img {
-    max-height: 100%;
+    max-height: 20vh;
+    padding: 2%;
     // TODO(kdevo): Temporary fix to prevent image stretching in modal header
     object-fit: contain;
   }

assets/sass/themes/_color-map-dark.scss

@@ -1,7 +1,7 @@
 //-- Fine-tuning --
 $tagline-color: $primary-fg-color;
 
-$button-fg-color: $primary-bg-color;
+$button-fg-color: $primary-fg-color;
 // Nav color of the full nav which shows up when pressing the burger on mobile viewports.
 // Regular colors are swapped by default (i.e. fg -> bg and vice versa). This aims to create a "b-side" or "flip-side" feeling.
 $full-nav-bg-color: $primary-fg-color;
@@ -10,6 +10,8 @@ $full-nav-fg-color: $primary-bg-color;
 // The links have some shadow effect. It usually makes sense to leave this as is.
 $link-shadow-color: $secondary-bg-color;
 
+$gallery-bg-color: $primary-fg-color;
+$gallery-modal-bg-color: $gallery-bg-color;
 $gallery-overlay-bg-color: $primary-bg-color;
 $gallery-overlay-title-color: $primary-fg-color;
 $gallery-overlay-subtitle-color: $alt-text-color;

assets/sass/themes/_color-map-light.scss

@@ -10,6 +10,8 @@ $full-nav-fg-color: $primary-bg-color;
 // The links have some shadow effect. It usually makes sense to leave this as is.
 $link-shadow-color: $secondary-bg-color;
 
+$gallery-bg-color: $primary-bg-color;
+$gallery-modal-bg-color: $gallery-bg-color;
 $gallery-overlay-bg-color: $primary-fg-color;
 $gallery-overlay-title-color: $primary-bg-color;
 $gallery-overlay-subtitle-color: $alt-text-color;

assets/sass/themes/dedark-colors.scss

@@ -1,8 +1,9 @@
 $primary-fg-color: #fafafa;
-$primary-bg-color: #0f0f0f;
-$button-bg-color: #324A5F;
+$primary-bg-color: #111218;
+$button-bg-color: #4F5D75;
 $secondary-bg-color: #000303;
 $accent-color: #0097A7;
-$alt-text-color: #9e9e9e;
+$alt-text-color: $button-bg-color;
 
-@import "color-map-dark"
+@import "color-map-dark";
+$gallery-modal-close-color: #2F4858;