From 2b3b80a55b920fc10989fcba0d27475882133a65 Mon Sep 17 00:00:00 2001
From: ktyl <me@ktyl.dev>
Date: Fri, 31 Dec 2021 17:59:18 +0000
Subject: [PATCH] responsive gallery

---
 src/inc_css/gallery.css | 43 ++++++++++++++++++++++++++++++-----------
 src/inc_css/nav.css     | 10 ++++++----
 src/inc_css/page.css    |  2 +-
 src/root/gallery.html   | 42 ++++++++++++++++++++--------------------
 todo.md                 |  4 ++--
 5 files changed, 62 insertions(+), 39 deletions(-)

diff --git a/src/inc_css/gallery.css b/src/inc_css/gallery.css
index 985b0a9..d3cba34 100644
--- a/src/inc_css/gallery.css
+++ b/src/inc_css/gallery.css
@@ -1,14 +1,3 @@
-.tileCover {
-    width: 100%;
-    height: 100%;
-    opacity: 0.0;
-    transition: opacity 0.3s;
-}
-
-.tileCover:hover {
-    opacity: 1.0;
-}
-
 .page.portfolio {
     padding-top: 0;
     width: 50%;
@@ -134,3 +123,35 @@
 
     filter: saturate(20) brightness(.5) blur(2px);
 }
+
+.icon-link {
+}
+
+@media only screen and (max-width: 600px) {
+    .page.portfolio {
+        width: 100%;
+    }
+
+    .wrapper .imgHolder {
+        overflow: hidden;
+    }
+    .wrapper .imgHolder span {
+        position: absolute;
+        top:0;
+        left:0;
+        width:100%;
+        height:100%;
+        transform: none;
+    }
+    .wrapper .imgHolder span a {
+        position: absolute;
+        left:0;
+        width:100%;
+        height:100%;
+    }
+    .icon-link {
+        display: none;
+    }
+    .wrapper .imgHolder span i {
+        /*display: none;*/
+    }
diff --git a/src/inc_css/nav.css b/src/inc_css/nav.css
index bcb3beb..3ed9c07 100644
--- a/src/inc_css/nav.css
+++ b/src/inc_css/nav.css
@@ -59,21 +59,23 @@ ul.nav-links {
         padding: 0;
         z-index: 1;
         top: 0;
-        height: 2em;
+        height: 3em;
     }
 
     .nav .title {
-        padding-top: .5em;
-        padding-left: .5em;
+        padding-top: .6em;
+        padding-left: .6em;
+        height: 2em;
     }
 
     .nav .nav-links {
         position: absolute;
         top: 0;
         right: 0;
-        padding: .5em .5em 0 0;
+        padding: .6em .6em 0 0;
         float: right;
         text-align: right;
+        width: auto;
     }
 
     .nav .nav-links li {
diff --git a/src/inc_css/page.css b/src/inc_css/page.css
index 22c4d7c..42f5ba4 100644
--- a/src/inc_css/page.css
+++ b/src/inc_css/page.css
@@ -64,7 +64,7 @@
 
 @media only screen and (max-width: 600px) {
     .page {
-        margin-top: 2em;
+        margin-top: 2.5em;
         width: 100%;
         padding: 0;
 
diff --git a/src/root/gallery.html b/src/root/gallery.html
index aaf685b..f5d4345 100644
--- a/src/root/gallery.html
+++ b/src/root/gallery.html
@@ -28,7 +28,7 @@
 <a href="relativity.png">relativity</a>
 </p>
 <p>
-<a href="https://github.com/ktyldev/srpt"><i class="fab fa-github"></i></a>
+<a class="icon-link" href="https://github.com/ktyldev/srpt"><i class="fab fa-github"></i></a>
 </p>
 </span>
 </div>
@@ -40,7 +40,7 @@
 <a href="doppler.png">relativity</a>
 </p>
 <p>
-<a href="https://github.com/ktyldev/srpt"><i class="fab fa-github"></i></a>
+<a class="icon-link" href="https://github.com/ktyldev/srpt"><i class="fab fa-github"></i></a>
 </p>
 </span>
 
@@ -52,7 +52,7 @@
 <a href="greenshift.png">relativity</a>
 </p>
 <p>
-<a href="https://github.com/ktyldev/srpt"><i class="fab fa-github"></i></a>
+<a class="icon-link" href="https://github.com/ktyldev/srpt"><i class="fab fa-github"></i></a>
 </p>
 </span>
 </div>
@@ -85,7 +85,7 @@
 <a href="oglc.png">open</a>
 </p>
 <p>
-<a href="https://github.com/ktyldev/oglc"><i class="fab fa-github"></i></a>
+<a class="icon-link" href="https://github.com/ktyldev/oglc"><i class="fab fa-github"></i></a>
 </p>
 </span>
 </div>
@@ -95,8 +95,8 @@
 <span>
 <p><a href="rti1w.png">weekend</a></p>
 <p>
-<a href="https://gitlab.com/ktyldev/flark"><i class="fab fa-gitlab"></i></a>
-<a href="https://raytracing.github.io"><i class="fas fa-book"></i></a>
+<a class="icon-link" href="https://gitlab.com/ktyldev/flark"><i class="fab fa-gitlab"></i></a>
+<a class="icon-link" href="https://raytracing.github.io"><i class="fas fa-book"></i></a>
 </p>
 </span>
 </div>
@@ -113,7 +113,7 @@
 <span>
 <p><a href="ecollapse.png">ecollapse 2030</a></p>
 <p>
-<a href="https://cyndrdev.itch.io/ecollapse2030"><i class="fab fa-itch-io"></i></a>
+<a class="icon-link" href="https://cyndrdev.itch.io/ecollapse2030"><i class="fab fa-itch-io"></i></a>
 </p>
 </span>
 </div>
@@ -123,8 +123,8 @@
 <span>
 <p><a href="squingle.png">squingle</a></p>
 <p>
-<a href="https://store.steampowered.com/app/1439040/Squingle/"><i class="fab fa-steam"></i></a>
-<a href="https://discord.gg/3PV8tBU"><i class="fab fa-discord"></i></a>
+<a class="icon-link" href="https://store.steampowered.com/app/1439040/Squingle/"><i class="fab fa-steam"></i></a>
+<a class="icon-link" href="https://discord.gg/3PV8tBU"><i class="fab fa-discord"></i></a>
 </p>
 </span>
 </div>
@@ -141,9 +141,9 @@
 <span>
 <p><a href="lsd.png">lsd</a></p>
 <p>
-<a href="https://ktyl.itch.io/lucid-super-dream"><i class="fab fa-itch-io"></i></a>
-<a href="https://github.com/ktyldev/lucid-super-dream"><i class="fab fa-github"></i></a>
-<a href="https://www.youtube.com/watch?v=spxf4kx6Mao"><i class="fab fa-youtube"></i></a>
+<a class="icon-link" href="https://ktyl.itch.io/lucid-super-dream"><i class="fab fa-itch-io"></i></a>
+<a class="icon-link" href="https://github.com/ktyldev/lucid-super-dream"><i class="fab fa-github"></i></a>
+<a class="icon-link" href="https://www.youtube.com/watch?v=spxf4kx6Mao"><i class="fab fa-youtube"></i></a>
 </p>
 </span>
 </div>
@@ -153,9 +153,9 @@
 <span>
 <p><a href="stopnt.png">stopnt</a></p>
 <p>
-<a href="https://cyndr.itch.io/stopnt"><i class="fab fa-itch-io"></i></a>
-<a href="https://github.com/ktyldev/stopnt"><i class="fab fa-github"></i></a>
-<a href="https://www.youtube.com/watch?v=OmqhwfpHJpk"><i class="fab fa-youtube"></i></a>
+<a class="icon-link" href="https://cyndr.itch.io/stopnt"><i class="fab fa-itch-io"></i></a>
+<a class="icon-link" href="https://github.com/ktyldev/stopnt"><i class="fab fa-github"></i></a>
+<a class="icon-link" href="https://www.youtube.com/watch?v=OmqhwfpHJpk"><i class="fab fa-youtube"></i></a>
 </p>
 </span>
 </div>
@@ -172,8 +172,8 @@
 <span>
 <p><a href="gitch.png">gitch</a></p>
 <p>
-<a href="https://play.google.com/store/apps/details?id=com.Opal.Gitch&hl=en_GB&gl=US"><i class="fab fa-google-play"></i></a>
-<a href="https://www.youtube.com/watch?v=5-OFx20G5S4"><i class="fab fa-youtube"></i></a>
+<a class="icon-link" href="https://play.google.com/store/apps/details?id=com.Opal.Gitch&hl=en_GB&gl=US"><i class="fab fa-google-play"></i></a>
+<a class="icon-link" href="https://www.youtube.com/watch?v=5-OFx20G5S4"><i class="fab fa-youtube"></i></a>
 </p>
 </span>
 </div>
@@ -183,9 +183,9 @@
 <span>
 <p><a href="membrain.png">membrain</a></p>
 <p>
-<a href="https://ktyl.itch.io/membrain"><i class="fab fa-itch-io"></i></a>
-<a href="https://gitlab.com/ktyldev/membrain"><i class="fab fa-gitlab"></i></a>
-<a href="https://www.youtube.com/watch?v=jV8vbByA5C8"><i class="fab fa-youtube"></i></a>
+<a class="icon-link" href="https://ktyl.itch.io/membrain"><i class="fab fa-itch-io"></i></a>
+<a class="icon-link" href="https://gitlab.com/ktyldev/membrain"><i class="fab fa-gitlab"></i></a>
+<a class="icon-link" href="https://www.youtube.com/watch?v=jV8vbByA5C8"><i class="fab fa-youtube"></i></a>
 </p>
 </span>
 </div>
@@ -195,7 +195,7 @@
 <span>
 <p><a href="myah.png">make yourself at home</a></p>
 <p>
-<a href="https://cyndr.itch.io/myah"><i class="fab fa-itch-io"></i></a>
+<a class="icon-link" href="https://cyndr.itch.io/myah"><i class="fab fa-itch-io"></i></a>
 </p>
 </span>
 </div>
diff --git a/todo.md b/todo.md
index 3d03f60..161798b 100644
--- a/todo.md
+++ b/todo.md
@@ -14,8 +14,8 @@
         * [ ] hope -> use
     * [x] solar system
         * [x] smaller
-    * [ ] gallery
-        * [ ] column too thin
+    * [x] gallery
+        * [x] column too thin
 * [ ] features
     * [ ] header
         * [ ] sticky slidy from middle to side with scroll