From bb3a74feac573cf6dda2967a4ab7efde88deff72 Mon Sep 17 00:00:00 2001
From: Tino Mettler <tino+debian@tikei.de>
Date: Wed, 17 Dec 2025 21:26:28 +0100
Subject: [PATCH] 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.
---
 data/website_gallery/css/gallery.css | 65 ++-------------------------
 data/website_gallery/css/modal.css   | 37 +++++----------
 data/website_gallery/css/style.css   | 67 ++++++++++++++++++++++++++++
 data/website_gallery/index.html      |  1 +
 4 files changed, 83 insertions(+), 87 deletions(-)
 create mode 100644 data/website_gallery/css/style.css

diff --git a/data/website_gallery/css/gallery.css b/data/website_gallery/css/gallery.css
index 5d05a0e..9bfa9b1 100644
--- a/data/website_gallery/css/gallery.css
+++ b/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;
 }
diff --git a/data/website_gallery/css/modal.css b/data/website_gallery/css/modal.css
index aa8ca72..0e460af 100644
--- a/data/website_gallery/css/modal.css
+++ b/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;
-}
diff --git a/data/website_gallery/css/style.css b/data/website_gallery/css/style.css
new file mode 100644
index 0000000..c8196f6
--- /dev/null
+++ b/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;
+}
diff --git a/data/website_gallery/index.html b/data/website_gallery/index.html
index 8abf888..c34188b 100644
--- a/data/website_gallery/index.html
+++ b/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>