From 09aa61bb139f5f35b33f7f41f75291394d6fa94f Mon Sep 17 00:00:00 2001
From: alisonkit <alisonkit@tuta.io>
Date: Wed, 4 Sep 2024 11:35:24 -0700
Subject: [PATCH] added fixes to links and lightbox

---
 main/index.html | 51 +++++++++++++++++++++++++++++++++++++++++--------
 main/style.css  | 29 ++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/main/index.html b/main/index.html
index 0083da6..9029c88 100644
--- a/main/index.html
+++ b/main/index.html
@@ -26,14 +26,14 @@
             <div id="gallery">
                 <h2>Gallery</h2>
                 <div id="photos">
-                    <img src="images/xenia.webp">
-                    <img src="images/niko.webp">
-                    <img src="images/nona.webp">
-                    <img src="images/alisonterra.webp">
-                    <img src="images/sybil.webp">
-                    <img src="images/pueblomagico.webp">
-                    <img src="images/mystfawf.webp">
-                    <img src="images/akautomata.webp">
+                    <a href="#img1"><img src="images/xenia.webp"></a>
+                    <a href="#img2"><img src="images/niko.webp"></a>
+                    <a href="#img3"><img src="images/nona.webp"></a>
+                    <a href="#img4"><img src="images/alisonterra.webp"></a>
+                    <a href="#img5"><img src="images/sybil.webp"></a>
+                    <a href="#img6"><img src="images/pueblomagico.webp"></a>
+                    <a href="#img7"><img src="images/mystfawf.webp"></a>
+                    <a href="#img8"><img src="images/akautomata.webp"></a>
                 </div>
             </div>
             <!-- about-->
@@ -75,5 +75,40 @@
                 <a href="https://cd5k.net/tau/">&tau;</a>
             </div>
         </div> <!-- main -->
+        <!-- LIGHTBOX -->
+        <div>
+            <div class="lightbox" id="img1">
+                <a href="#_"> <img src="images/xenia.webp" /></a>
+                <p>Fanart of Xenia</p>
+            </div>
+            <div class="lightbox" id="img2">
+                <a href="#_"> <img src="images/niko.webp" /></a>
+                <p>Fanart of Niko from Oneshot</p>
+            </div>
+            <div class="lightbox" id="img3">
+                <a href="#_"> <img src="images/nona.webp" /></a>
+                <p>Fanart of Nona from Gunfire Reborn</p>
+            </div>
+            <div class="lightbox" id="img4">
+                <a href="#_"> <img src="images/alisonterra.webp" /></a>
+                <p>Alison as Terra from Final Fantasy VI</p>
+            </div>
+            <div class="lightbox" id="img5">
+                <a href="#_"> <img src="images/sybil.webp" /></a>
+                <p>Fanart of Sybil from Pseudoregalia</p>
+            </div>
+            <div class="lightbox" id="img6">
+                <a href="#_"> <img src="images/pueblomagico.webp" /></a>
+                <p>A Mexican Town</p>
+            </div>
+            <div class="lightbox" id="img7">
+                <a href="#_"> <img src="images/mystfawf.webp" /></a>
+                <p>Commission made as a gift</p>
+            </div>
+            <div class="lightbox" id="img8">
+                <a href="#_"> <img src="images/akautomata.webp" /></a>
+                <p>Alison as a Nier Android</p>
+            </div>
+        </div><!-- end lightbox -->
     </body>
 </html>
diff --git a/main/style.css b/main/style.css
index 477858c..428224c 100644
--- a/main/style.css
+++ b/main/style.css
@@ -115,3 +115,32 @@ a{
   text-align:center;
   font-weight:bold;
 }
+.lightbox {
+  background: rgba(0, 0, 0, 0.8);
+  display: none;
+  position: fixed;
+  z-index: 1000;
+}
+.lightbox:target {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+.lightbox img {
+  border-radius: 1em;
+  display: block;
+  max-height: 80vh;
+}
+.lightbox p {
+  font-weight: bold;
+  text-align: center;
+}
+.lightbox a {
+  display: flex;
+  margin: 4.5%;
+  text-align: center;
+}