ktyl
/
ktyl.dev
1
0
Fork 0
Code Issues 18 Pull Requests 1 Packages Projects 1 Releases Wiki Activity

simplify site animations

This commit is contained in:
ktyl 2022-01-05 21:23:57 +00:00
parent 8333cc53a6
commit 0914c484e0
5 changed files with 36 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/inc_css/gallery.css
View File

@ -56,9 +56,8 @@
.wrapper .imgHolder span {
position:absolute;
top:50%;
left:1em;
right:1em;
top:100%;
width:100%;
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 {
border-style: solid;
border-width: 0;
border-radius: 100%;
border-color: var(--foreground);
filter: saturate(20) brightness(.5) blur(2px);
}
.icon-link {
.wrapper .imgHolder a {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}
@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;
}

6
src/inc_css/nav.css
View File

@ -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;

3
src/inc_css/socials.css
View File

@ -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 {

145
src/root/gallery.html
View File

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

4
todo.md
View File

@ -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