tweaking + getting ready for fullscreen mode...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

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;
+}
+
 
 
 /**********************************************************************

grid-n-view.html

@@ -73,9 +73,12 @@
 	<!-- lightbox -->
 	<div class="lightbox">
 		<img>
+		<div class="buttons">
+			<div class="button fullscreen"></div>
 			<div class="button close"></div>
 		</div>
 	</div>
+</div>
 
 </body>
 </html>