From d8655fcab484d74801fabcd57756abcb32853166 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Thu, 27 Jul 2023 13:26:11 +0300
Subject: [PATCH] tweaking + getting ready for fullscreen mode...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 css/grid-n-view.css | 31 +++++++++++++++++++++++--------
 grid-n-view.html    |  5 ++++-
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index adc41ad..9f10002 100644
--- a/css/grid-n-view.css
+++ b/css/grid-n-view.css
@@ -9,6 +9,7 @@
 
 :root {
 	/* dimensions */
+	--gallery-image-margin: 0;
 	--gallery-current-image-border: 0.7em;
 	--gallery-padding: 3em;
 	--gallery-padding-horizontal: var(--gallery-padding);
@@ -22,7 +23,7 @@
 
 	--lightbox-frame: 5vmin;
 	--lightbox-image-margin-top: 0.75;
-	--lightbox-button-size: 4em;
+	--lightbox-button-size: 2em;
 
 	/* theme */
 	--gallery-text-color: black;
@@ -95,7 +96,12 @@ body {
 .gallery .images img {
 	height: 300px;
 	width: auto;
+
+	border: solid var(--gallery-image-margin) transparent;
+	box-sizing: border-box;
+
 	scroll-margin: var(--gallery-image-scroll-margin);
+
 	image-rendering: crisp-edges;
 
 	cursor: pointer;
@@ -185,10 +191,19 @@ body {
 		* var(--lightbox-image-margin-top)); 
 }
 /* controls: next/prev... */
+.gallery .lightbox .buttons {
+	display: flex;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
 .gallery .lightbox .button {
+	disbplay: inline-block;
 	cursor: pointer;
+	width: var(--lightbox-button-size);
+	height: var(--lightbox-button-size);
 	font-size: var(--lightbox-button-size);
-	padding: 0 0.25em;
+	line-height: var(--lightbox-button-size);
 	filter: saturate(0);
 	opacity: 0.1;
 }
@@ -197,15 +212,15 @@ body {
 	filter: saturate(1);
 }
 /* controls: close... */
-.gallery .lightbox .button.close {
-	position: absolute;
-	top: 0px;
-	right: 0px;
-}
 .gallery .lightbox .button.close:after {
-	content: "×";
+	content: "✕";
 	color: red;
 }
+.gallery .lightbox .button.fullscreen:after {
+	content: "⛶";
+	color: black;
+}
+
 
 
 /**********************************************************************
diff --git a/grid-n-view.html b/grid-n-view.html
index 9419283..eda8f5f 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -73,7 +73,10 @@
 	<!-- lightbox -->
 	<div class="lightbox">
 		<img>
-		<div class="button close"></div>
+		<div class="buttons">
+			<div class="button fullscreen"></div>
+			<div class="button close"></div>
+		</div>
 	</div>
 </div>