simplify site animations

src/inc_css/gallery.css

@@ -56,9 +56,8 @@
 
 .wrapper .imgHolder span {
     position:absolute;
-    top:50%;
+    top:100%;
-    left:1em;
+    width:100%;
-    right:1em;
 
     transform: translateY(-50%) scale(0.6);
     text-align: center;
@@ -76,48 +75,16 @@
     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 {
+.wrapper .imgHolder a {
-    border-style: solid;
+    position: absolute;
-    border-width: 0;
+    top:0;
-    border-radius: 100%;
+    left:0;
-    border-color: var(--foreground);
+    width:100%;
-
+    height:100%;
-    filter: saturate(20) brightness(.5) blur(2px);
-}
-
-.icon-link {
 }
 
 @media only screen and (max-width: 600px) {
@@ -136,12 +103,6 @@
         height:100%;
         transform: none;
     }
-    .wrapper .imgHolder span a {
-        position: absolute;
-        left:0;
-        width:100%;
-        height:100%;
-    }
     .icon-link {
         display: none;
     }

src/inc_css/nav.css

@@ -28,18 +28,12 @@ ul.nav-links {
 .nav .nav-links li {
     display: block;
     margin-bottom: 0.8em;
-
-    transition: transform 0.3s;
 }
 
 .nav li a::before {
     content: "/";
 }
 
-.nav li:hover {
-    transform: translate(1vmax);
-}
-
 .nav li a {
     display: block;
     padding: 2px;

src/inc_css/socials.css

@@ -10,12 +10,11 @@
     font-size: 2.0em;
     padding-right: .1em;
     color: var(--foreground-inactive);
-    transition: transform 0.3s, color 0.3s;
+    transition: color 0.3s;
 }
 .socials i:hover {
 
     color: var(--accent);
-    transform: translateY(-10%);
 }
 
 .socials a {

src/root/gallery.html

@@ -22,83 +22,43 @@
 <div class="wrapper">
 
 <div class="imgHolder">
-<img href="relativity.png" src="relativity.png"></img>
+<img src="relativity.png"></img>
-<span>
+<a href="https://github.com/ktyldev/srpt"></a>
-<p>
-<a href="relativity.png">relativity</a>
-</p>
-<p>
-<a class="icon-link" 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>
+<a href="https://github.com/ktyldev/srpt"></a>
-<p>
-<a href="doppler.png">relativity</a>
-</p>
-<p>
-<a class="icon-link" 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>
+<a href="https://github.com/ktyldev/srpt"></a>
-<p>
-<a href="greenshift.png">relativity</a>
-</p>
-<p>
-<a class="icon-link" 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>
+<a href="skeinring.png"></a>
-<p><a href="skeinring.png">ring</a></p>
-</span>
 </div>
 
 <div class="imgHolder">
 <img src="dof.png"></img>
-<span>
+<a href="dof.png"></a>
-<p><a href="dof.png">orbits</a></p>
-</span>
 </div>
 
 <div class="imgHolder">
 <img src="cloudsteroid.png"></img>
-<span>
+<a href="cloudsteroid.png"></a>
-<p><a href="cloudsteroid.png">orbits</a></p>
-</span>
 </div>
 
 <div class="imgHolder">
 <img src="oglc.png"></img>
-<span>
+<a href="https://github.com/ktyldev/oglc"></a>
-<p>
-<a href="oglc.png">open</a>
-</p>
-<p>
-<a class="icon-link" 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>
+<a href="https://gitlab.com/ktyldev/ray-tracing-in-one-weekend"></a>
-<p><a href="rti1w.png">weekend</a></p>
-<p>
-<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>
 
 </div>
@@ -110,94 +70,47 @@
 
 <div class="imgHolder">
 <img src="ecollapse.png"></img>
-<span>
+<a href="https://cyndrdev.itch.io/ecollapse2030"></a>
-<p><a href="ecollapse.png">ecollapse 2030</a></p>
-<p>
-<a class="icon-link" 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>
+<a href="https://store.steampowered.com/app/1439040/Squingle/"></a>
-<p><a href="squingle.png">squingle</a></p>
-<p>
-<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>
 
 <div class="imgHolder">
 <img src="revival.png"></img>
-<span>
+<a href="revival.png"></a>
-<p><a href="revival.png">revival</a></p>
-</span>
 </div>
 
 <div class="imgHolder">
 <img src="lsd.png"></img>
-<span>
+<a href="https://ktyl.itch.io/lucid-super-dream"></a>
-<p><a href="lsd.png">lsd</a></p>
-<p>
-<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>
 
 <div class="imgHolder">
 <img src="stopnt.png"></img>
-<span>
+<a href="https://cyndr.itch.io/stopnt"></a>
-<p><a href="stopnt.png">stopnt</a></p>
-<p>
-<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>
 
 <div class="imgHolder">
 <img src="erf.png"></img>
-<span>
+<a href="erf.png">earth</a>
-<p><a href="erf.png">earth</a></p>
-</span>
 </div>
 
 <div class="imgHolder">
 <img src="gitch.png"></img>
-<span>
+<a href="https://www.youtube.com/watch?v=5-OFx20G5S4"></a>
-<p><a href="gitch.png">gitch</a></p>
-<p>
-<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>
 
 <div class="imgHolder">
 <img src="membrain.png"></img>
-<span>
+<a href="https://ktyl.itch.io/membrain"></a>
-<p><a href="membrain.png">membrain</a></p>
-<p>
-<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>
 
 <div class="imgHolder">
 <img src="myah.png"></img>
-<span>
+<a href="https://cyndr.itch.io/myah"></a>
-<p><a href="myah.png">make yourself at home</a></p>
-<p>
-<a class="icon-link" href="https://cyndr.itch.io/myah"><i class="fab fa-itch-io"></i></a>
-</p>
-</span>
 </div>
 
 </div>
@@ -209,37 +122,27 @@
 
 <div class="imgHolder">
 <img src="relanoise.png"></img>
-<span>
+<a href="relanoise.png"></a>
-<p><a href="relanoise.png">relanoise</a></p>
-</span>
 </div>
 
 <div class="imgHolder">
 <img src="spacetime.png"></img>
-<span>
+<a href="spacetime.png"></a>
-<p><a href="spacetime.png">spacetime</a></p>
-</span>
 </div>
 
 <div class="imgHolder">
 <img src="broadsideofthesun.png"></img>
-<span>
+<a href="broadsideofthesun.png"></a>
-<p><a href="broadsideofthesun.png">broad side of the sun</a></p>
-</span>
 </div>
 
 <div class="imgHolder">
 <img src="hohmann.png"></img>
-<span>
+<a href="hohmann.png"></a>
-<p><a href="hohmann.png">hohmann</a></p>
-</span>
 </div>
 
 <div class="imgHolder">
 <img src="inevitable.png"></img>
-<span>
+<a href="inevitable.png"></a>
-<p><a href="inevitable.png">inevitable</a></p>
-</span>
 </div>
 
 </div>

todo.md

@@ -15,7 +15,8 @@
         * [x] smaller
     * [-] gallery
         * [x] column too thin
-        * [ ] invert media queries for :hover handling
+        * [ ] make whole image into link
+        * [ ] invert media queries for :hover handling on mobile
 
 * [x] content
     * lx] about
@@ -35,6 +36,7 @@
         * [ ] fade out along bottom edge
         * [ ] made by me
     * [ ] gallery
+        * [ ] generate from file
         * [ ] sections
             * [ ] nature
             * [ ] pets