From b2c93de16f800b37b96e1dac00d7c3f3abe8232c Mon Sep 17 00:00:00 2001
From: ktyl <me@ktyl.dev>
Date: Wed, 22 Dec 2021 03:53:53 +0000
Subject: [PATCH] add gallery hover info+anim

---
 src/inc_css/gallery.css | 117 +++++++++++++++++----
 src/inc_css/sidebar.css |   3 +-
 src/inc_css/socials.css |   2 +
 src/inc_css/title.css   |   5 +-
 src/root/colors.css     |   2 +-
 src/root/gallery.html   | 226 +++++++++++++++++++++++++++++++++-------
 src/root/styles.css     |   8 +-
 7 files changed, 300 insertions(+), 63 deletions(-)

diff --git a/src/inc_css/gallery.css b/src/inc_css/gallery.css
index a6fd201..985b0a9 100644
--- a/src/inc_css/gallery.css
+++ b/src/inc_css/gallery.css
@@ -1,20 +1,12 @@
-.demoTile {
-    /*opacity: 0.7;*/
+.tileCover {
+    width: 100%;
+    height: 100%;
+    opacity: 0.0;
     transition: opacity 0.3s;
-    max-width: 15vw;
-    display: inline;
 }
 
-.demoTile:hover {
-    /*opacity: 1.0;*/
-}
-
-.demoTiles {
-    position: absolute;
-    background-color:white;
-    /*left:27.5%;*/
-    top: var(--title-height);
-    margin-top:40px;
+.tileCover:hover {
+    opacity: 1.0;
 }
 
 .page.portfolio {
@@ -30,12 +22,28 @@
 .portfolio h1 {
     margin-top: 1.2em;
     text-align: center;
+
+    padding: 0.2em 0.4em;
 }
 
 .portfolio p {
-    background-color: var(--clear);
-    border-style: none;
+    margin: 1.2em 0 2em;
+
     text-align: center;
+    border-style: none;
+
+    background-color: var(--clear);
+}
+
+.glass {
+    padding: 0.4em 0.6em;
+    color: var(--foreground-inactive);
+    background-color: var(--background);
+    opacity:0.9;
+
+    border-style:solid;
+    border-radius:2em;
+    border-color:var(--clear);
 }
 
 /* gallery img */
@@ -43,15 +51,86 @@
     margin-top: 1em;
     width: 100%;
     height: 100%;
-    background-color: transparent;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
 }
+.wrapper .imgHolder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
 .wrapper img {
+    pointer-events: none;
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    transition: transform 0.1s ease-in;
+    left: auto;
+    right: auto;
+
+    transition: all 0.2s ease-out;
 }
-.wrapper img:hover {
+
+.wrapper .imgHolder span {
+    position:absolute;
+    top:50%;
+    left:1em;
+    right:1em;
+
+    transform: translateY(-50%) scale(0.6);
+    text-align: center;
+
+    opacity: 0;
+    transition: all 0.3s;
+
+    color: var(--accent);
+}
+
+.wrapper .imgHolder span p {
+    padding:0;
+    margin:0;
+    opacity: 1;
+    color: var(--background);
+}
+
+.wrapper .imgHolder span a {
+    opacity: 1;
+    padding: .5em 0;
+    color: var(--background);
+    transition: all 0.1s;
+    text-decoration: none;
+}
+.wrapper .imgHolder span a:hover {
+    color: var(--accent);
+}
+
+.wrapper .imgHolder span i {
+    padding: 0 0.1em;
+    margin-top: .3em;
+    font-size: 2em;
+    color: var(--background);
+    transition: all 0.3s;
+}
+.wrapper .imgHolder span i:hover {
+    transform:translateY(-10%);
+    color:var(--accent);
+}
+
+.wrapper .imgHolder:hover span {
+    transform: translateY(-50%);
+    opacity:1;
+}
+
+.lightTileText {
+    color: var(--background);
+}
+
+.wrapper .imgHolder:hover img {
+    border-style: solid;
+    border-width: 0;
+    border-radius: 100%;
+    border-color: var(--foreground);
+
+    filter: saturate(20) brightness(.5) blur(2px);
 }
diff --git a/src/inc_css/sidebar.css b/src/inc_css/sidebar.css
index 028a82f..25fdc13 100644
--- a/src/inc_css/sidebar.css
+++ b/src/inc_css/sidebar.css
@@ -45,8 +45,7 @@
 }
 
 .sidebar li a:hover {
-    color: var(--foreground);
-    background-color: var(--foreground-alt);
+    color: var(--accent);
 }
 
 
diff --git a/src/inc_css/socials.css b/src/inc_css/socials.css
index 24cebe4..110109a 100644
--- a/src/inc_css/socials.css
+++ b/src/inc_css/socials.css
@@ -8,10 +8,12 @@
 
 .socials i {
     font-size: 2em;
+    padding-right: .05em;
     color: var(--foreground-inactive);
     transition: transform 0.3s, color 0.3s;
 }
 .socials i:hover {
+
     color: var(--accent);
     transform: translateY(-10%);
 }
diff --git a/src/inc_css/title.css b/src/inc_css/title.css
index be4bdb5..f16b490 100644
--- a/src/inc_css/title.css
+++ b/src/inc_css/title.css
@@ -3,10 +3,11 @@
 }
 
 .title a {
-    transition: color 0.3s;
+    transition: all 0.1s ease-in;
     color: var(--foreground-active);
 }
 
 .title a:hover {
-    color: lightpink;
+    color: var(--accent);
+    transform: translateY(50%);
 }
diff --git a/src/root/colors.css b/src/root/colors.css
index c2c9d92..681a96d 100644
--- a/src/root/colors.css
+++ b/src/root/colors.css
@@ -4,7 +4,7 @@
     --background-alt: #b8b8b8;
     --foreground: #444;
     --foreground-inactive: #777;
-    --accent: lightpink;
+    --accent: #ff369a;
     --clear: rgba(0,0,0,0);
 
     /* Colors */
diff --git a/src/root/gallery.html b/src/root/gallery.html
index fdee86a..cf842b5 100644
--- a/src/root/gallery.html
+++ b/src/root/gallery.html
@@ -14,43 +14,199 @@
 </div>
 
 <div class="page portfolio">
-    <h1>ray tracing</h1>
-    <p>optics are beautiful, fascinating and fun to code</p>
-    <div class="wrapper">
-        <img src="oglc.png"></img>
-        <img src="relativity.png"></img>
-        <img src="doppler.png"></img>
-        <img src="greenshift.png"></img>
-        <img src="skeinring.png"></img>
-        <!--<img src="dof2.png"></img>-->
-        <img src="dof.png"></img>
-        <img src="cloudsteroid.png"></img>
-        <img src="rti1w.png"></img>
-    </div>
 
-    <h1>games</h1>
-    <p>a credit in each, but not each my own</p>
-    <div class="wrapper">
-        <img src="ecollapse.png"></img>
-        <img src="squingle.png"></img>
-        <img src="revival.png"></img>
-        <img src="lsd.png"></img>
-        <img src="stopnt.png"></img>
-        <img src="erf.png"></img>
-        <img src="gitch.png"></img>
-        <img src="membrain.png"></img>
-        <img src="myah.png"></img>
-    </div>
+<h1><span class="glass">ray tracing<span></h1>
+<p><span class="glass">optics are beautiful, fascinating and fun to code</span></p>
+<div class="wrapper">
+
+<div class="imgHolder">
+<img href="relativity.png" src="relativity.png"></img>
+<span>
+<p>
+<a href="relativity.png">relativity</a>
+</p>
+<p>
+<a href="https://github.com/ktyldev/srpt"><i class="fab fa-github"></i></a>
+</p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="doppler.png"></img>
+<span>
+<p>
+<a href="doppler.png">relativity</a>
+</p>
+<p>
+<a href="https://github.com/ktyldev/srpt"><i class="fab fa-github"></i></a>
+</p>
+</span>
+
+</div>
+<div class="imgHolder">
+<img src="greenshift.png"></img>
+<span>
+<p>
+<a href="greenshift.png">relativity</a>
+</p>
+<p>
+<a href="https://github.com/ktyldev/srpt"><i class="fab fa-github"></i></a>
+</p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="skeinring.png"></img>
+<span>
+<p><a href="skeinring.png">ring</a></p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="dof.png"></img>
+<span>
+<p><a href="dof.png">orbits</a></p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="cloudsteroid.png"></img>
+<span>
+<p><a href="cloudsteroid.png">orbits</a></p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="oglc.png"></img>
+<span>
+<p>
+<a href="oglc.png">open</a>
+</p>
+<p>
+<a href="https://github.com/ktyldev/oglc"><i class="fab fa-github"></i></a>
+</p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="rti1w.png"></img>
+<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>
+</p>
+</span>
+</div>
+
+</div>
+
+<h1><span class="glass">games</span></h1>
+<p><span class="glass">a credit in each, but not each my own</span></p>
+
+<div class="wrapper">
+
+<div class="imgHolder">
+<img src="ecollapse.png"></img>
+<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>
+</p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="squingle.png"></img>
+<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>
+</p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="revival.png"></img>
+<span>
+<p><a href="revival.png">revival</a></p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="lsd.png"></img>
+<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>
+</p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="stopnt.png"></img>
+<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>
+</p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="erf.png"></img>
+<span>
+<p><a href="erf.png">earth</a></p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="gitch.png"></img>
+<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>
+</p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="membrain.png"></img>
+<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>
+</p>
+</span>
+</div>
+
+<div class="imgHolder">
+<img src="myah.png"></img>
+<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>
+</p>
+</span>
+</div>
+
+</div>
+
+<h1><span class="glass">abstract</span></h1>
+<p><span class="glass">sometimes it just happens</span></p>
+
+<div class="wrapper">
+    <img src="relanoise.png"></img>
+    <img src="spacetime.png"></img>
+    <img src="broadsideofthesun.png"></img>
+    <img src="hohmann.png"></img>
+    <img src="inevitable.png"></img>
+</div>
 
-    <h1>abstract</h1>
-    <p>sometimes it just happens</p>
-    <div class="wrapper">
-        <img src="relanoise.png"></img>
-        <img src="spacetime.png"></img>
-        <img src="broadsideofthesun.png"></img>
-        <img src="hohmann.png"></img>
-        <img src="inevitable.png"></img>
-    </div>
 </div>
 
 #include planets.html
diff --git a/src/root/styles.css b/src/root/styles.css
index 3eb1654..7942c93 100644
--- a/src/root/styles.css
+++ b/src/root/styles.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400&display=swap');
 @import 'colors.css';
 
 :root {
@@ -64,7 +64,7 @@ a.fsText:hover {
     width: max(30vmax,500px);
     left:50%;
     top:0;
-    margin-top: 1em;
+    /*margin-top: 1em;*/
     padding: 0px 0 50px;
     padding-top: 5vh;
     /*background-color: var(--foreground-inactive);*/
@@ -79,6 +79,7 @@ a.fsText:hover {
     color: var(--foreground);
 
     font-size: 1.1em;
+    /*font-weight: bold;*/
 
     line-height: 1.25em;
 
@@ -94,8 +95,7 @@ a.fsText:hover {
 .page h1 {
     color: var(--foreground-inactive);
 
-    font-size: 1.5em;
-    font-weight: bold;
+    font-size: 1.7em;
 
     margin: .5em;
 }