From 1ac31ef10cc799f3cb7fc94d34178290a4e8dc00 Mon Sep 17 00:00:00 2001
From: Andinus <andinus@nand.sh>
Date: Fri, 10 Jun 2022 00:30:39 +0530
Subject: CSS & Image Optimzations, Print password

- Prints password required to access.
- will-change lets the browser prepare for those changes in advance.
- loading="lazy" enables lazy loading on images.

- column-fill: balance -- not an optimization.
---
 lib/Crater/Service.rakumod | 1 +
 resources/css/style.css    | 2 ++
 templates/gallery.crotmp   | 2 +-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/Crater/Service.rakumod b/lib/Crater/Service.rakumod
index c0bdd7a..657d77b 100644
--- a/lib/Crater/Service.rakumod
+++ b/lib/Crater/Service.rakumod
@@ -17,6 +17,7 @@ sub MAIN(
 ) is export {
     put "Initialized: {now - INIT now}";
     put "Gallery: {$directory.absolute}";
+    put "Password: $password";
 
     my %conf = from-toml($config.slurp);
     %conf<server><host> //= %*ENV<CRATER_HOST>;
diff --git a/resources/css/style.css b/resources/css/style.css
index a7ab098..a49327e 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -47,6 +47,7 @@ img {
     max-width: 100%;
     box-shadow: var(--bg-inactive) 0px 0px 0px 1px,
                 var(--fg-inactive) 0px 0px 0px 1px inset;
+    will-change: opacity, transform;
 }
 
 input, .alert {
@@ -87,6 +88,7 @@ img, .text, .heading {
 .gallery {
     column-count: auto;
     column-width: 384px;
+    column-fill: balance;
 }
 .gallery img {
     transform-origin: center;
diff --git a/templates/gallery.crotmp b/templates/gallery.crotmp
index a47804f..2afe7e9 100644
--- a/templates/gallery.crotmp
+++ b/templates/gallery.crotmp
@@ -4,7 +4,7 @@
     <@gallery : $i>
 
     <?{ $i.<type> eq 'img' }>
-    <img src="<$i.<src>>">
+    <img src="<$i.<src>>" loading="lazy">
     </?>
 
     <?{ $i.<type> eq 'text' }>
-- 
cgit 1.4.1-2-gfad0