CSS cleanup, separate functional and visual CSS code

Added file style.css which is aimed to contain CSS code that affects
the look of the gallery.

This could be extended to provide different or user-modified styles
to give each gallery an individual look.

Author: Tino Mettler

data/website_gallery/css/gallery.css

@@ -16,50 +16,27 @@
 */
 
 body {
-    font-family: system-ui, Arial, Helvetica, sans-serif;
-    background-color: rgb(238, 240, 242);
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
 .heading h1 {
     text-align: center;
-    background-color: #cdd;
-    color: black;
     display: grid;
 }
 
-.heading h1:after {
-    content: " ";
-    border-bottom: 1px solid #888888;
-    height: 1px;
-}
-
 .gallery {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-    gap: 3vw;
-    margin: 3vw auto;
-    padding: 1.5vw;
-}
-
-.slider {
-    margin: 0;
-    padding: 0;
 }
 
-
 .gallery img {
     cursor: pointer;
     object-fit: contain;
-    background: none;
-    padding: 0;
-    border: 1px outset #737780;
-
-}
-
-.gallery img:hover {
-    transform: scale(1.08);
 }
 
 .thumb {
@@ -76,38 +53,4 @@ body {
     align-items: center;
     object-fit: contain;
     justify-content: center;
-    background: none;
-    box-shadow: 0 1vw 4vw 1vw rgba(0,0,0,0.6);
-}
-
-.navgrid {
-  font-size: 3.5vh;
-  display: grid;
-  grid-template-columns: 4em 1fr 1.5em 1.5em 1fr 1.5em 1.5em;
-  grid-column-gap: 1vw;
-  background-color: black;
-}
-
-.nav {
-  height: 5vh;
-  background-color: rgba(60,60,60, 0.4);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  z-index: 1001;
-  color: #ccc;
-}
-
-.counter {
-    font-size: 2.5vh;
-}
-
-.button {
-  cursor: pointer;
-}
-
-.button:hover {
-  cursor: pointer;
-  color: white;
-  text-shadow: 0px 0px 10px #ccc;
 }

data/website_gallery/css/modal.css

@@ -20,15 +20,6 @@
     padding: 0;
     box-sizing: border-box;
 }
-body {
-    margin: 0;
-    padding: 0;
-    width: 100vw;
-    height: 100vh;
-    background: #000;
-    display: flex;
-    flex-direction: column;
-}
 
 .viewer {
     position: relative;
@@ -39,10 +30,20 @@ body {
     display: none;
 }
 
+.navgrid {
+  display: grid;
+}
+
+.nav {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  z-index: 1001;
+}
+
 .slider {
     position: relative;
     width: 100vw;
-    height: 95vh;
     touch-action: none;
     overflow: hidden;
 }
@@ -69,8 +70,6 @@ body {
     will-change: contents;
     overflow: hidden;
     position: relative;
-    padding: 0;
-    margin: 0;
     touch-action: none;
     object-fit: contain;
 }
@@ -80,8 +79,6 @@ body {
     max-height: 100%;
     width: auto;
     height: auto;
-    padding: 0;
-    margin: 0;
     display: block;
     transform-origin: 0 0;
     cursor: zoom-in;
@@ -98,15 +95,3 @@ body {
     transition: transform 0.2s ease-out;
 }
 
-.nav-bar {
-    width: 100vw;
-    height: 5vh;
-    background: #333;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    padding-left: 20px;
-    box-sizing: border-box;
-    font-family: Arial, sans-serif;
-    font-size: 16px;
-}

data/website_gallery/css/style.css

@@ -0,0 +1,67 @@
+body {
+    font-family: system-ui, Arial, Helvetica, sans-serif;
+    background-color: rgb(238, 240, 242);
+}
+
+.heading h1 {
+    background-color: #cdd;
+    color: black;
+}
+
+.heading h1:after {
+    content: " ";
+    border-bottom: 1px solid #888888;
+    height: 1px;
+}
+
+.gallery {
+    gap: 3vw;
+    margin: 3vw auto;
+    padding: 1.5vw;
+}
+
+.gallery img {
+    background: none;
+    border: 1px outset #737780;
+
+}
+
+.gallery img:hover {
+    transform: scale(1.08);
+}
+
+.thumb-box {
+    background: none;
+    box-shadow: 0 1vw 4vw 1vw rgba(0,0,0,0.6);
+}
+
+.nav {
+  height: 5vh;
+  background-color: rgba(60,60,60, 0.4);
+  color: #ccc;
+}
+
+.slider {
+    height: 95vh; /* remaining vh after nav vh */
+}
+
+.navgrid {
+  grid-template-columns: 4em 1fr 1.5em 1.5em 1fr 1.5em 1.5em;
+  font-size: 3.5vh;
+  grid-column-gap: 1vw;
+  background-color: black;
+}
+
+.button {
+  cursor: pointer;
+}
+
+.button:hover {
+  cursor: pointer;
+  color: white;
+  text-shadow: 0px 0px 10px #ccc;
+}
+
+.counter {
+    font-size: 2.5vh;
+}

data/website_gallery/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
     <link rel="stylesheet" href="css/modal.css">
     <link rel="stylesheet" href="css/gallery.css">
+    <link rel="stylesheet" href="css/style.css">
     <title id="page-title">Image Gallery</title>