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

responsive gallery

This commit is contained in:
ktyl 2021-12-31 17:59:18 +00:00
parent d6e489a1d9
commit 2b3b80a55b
5 changed files with 62 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/inc_css/gallery.css
View File

@ -1,14 +1,3 @@
.tileCover {
width: 100%;
height: 100%;
opacity: 0.0;
transition: opacity 0.3s;
}
.tileCover:hover {
opacity: 1.0;
}
.page.portfolio { .page.portfolio {
padding-top: 0; padding-top: 0;
width: 50%; width: 50%;
@ -134,3 +123,35 @@
filter: saturate(20) brightness(.5) blur(2px); 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;*/
}

10
src/inc_css/nav.css
View File

@ -59,21 +59,23 @@ ul.nav-links {
padding: 0; padding: 0;
z-index: 1; z-index: 1;
top: 0; top: 0;
height: 2em; height: 3em;
} }
.nav .title { .nav .title {
padding-top: .5em; padding-top: .6em;
padding-left: .5em; padding-left: .6em;
height: 2em;
} }
.nav .nav-links { .nav .nav-links {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
padding: .5em .5em 0 0; padding: .6em .6em 0 0;
float: right; float: right;
text-align: right; text-align: right;
width: auto;
} }
.nav .nav-links li { .nav .nav-links li {

2
src/inc_css/page.css
View File

@ -64,7 +64,7 @@
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.page { .page {
margin-top: 2em; margin-top: 2.5em;
width: 100%; width: 100%;
padding: 0; padding: 0;

42
src/root/gallery.html
View File

@ -28,7 +28,7 @@
<a href="relativity.png">relativity</a> <a href="relativity.png">relativity</a>
</p> </p>
<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> </p>
</span> </span>
</div> </div>
@ -40,7 +40,7 @@
<a href="doppler.png">relativity</a> <a href="doppler.png">relativity</a>
</p> </p>
<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> </p>
</span> </span>
@ -52,7 +52,7 @@
<a href="greenshift.png">relativity</a> <a href="greenshift.png">relativity</a>
</p> </p>
<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> </p>
</span> </span>
</div> </div>
@ -85,7 +85,7 @@
<a href="oglc.png">open</a> <a href="oglc.png">open</a>
</p> </p>
<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> </p>
</span> </span>
</div> </div>
@ -95,8 +95,8 @@
<span> <span>
<p><a href="rti1w.png">weekend</a></p> <p><a href="rti1w.png">weekend</a></p>
<p> <p>
<a href="https://gitlab.com/ktyldev/flark"><i class="fab fa-gitlab"></i></a> <a class="icon-link" 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://raytracing.github.io"><i class="fas fa-book"></i></a>
</p> </p>
</span> </span>
</div> </div>
@ -113,7 +113,7 @@
<span> <span>
<p><a href="ecollapse.png">ecollapse 2030</a></p> <p><a href="ecollapse.png">ecollapse 2030</a></p>
<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> </p>
</span> </span>
</div> </div>
@ -123,8 +123,8 @@
<span> <span>
<p><a href="squingle.png">squingle</a></p> <p><a href="squingle.png">squingle</a></p>
<p> <p>
<a href="https://store.steampowered.com/app/1439040/Squingle/"><i class="fab fa-steam"></i></a> <a class="icon-link" 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://discord.gg/3PV8tBU"><i class="fab fa-discord"></i></a>
</p> </p>
</span> </span>
</div> </div>
@ -141,9 +141,9 @@
<span> <span>
<p><a href="lsd.png">lsd</a></p> <p><a href="lsd.png">lsd</a></p>
<p> <p>
<a href="https://ktyl.itch.io/lucid-super-dream"><i class="fab fa-itch-io"></i></a> <a class="icon-link" 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 class="icon-link" 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://www.youtube.com/watch?v=spxf4kx6Mao"><i class="fab fa-youtube"></i></a>
</p> </p>
</span> </span>
</div> </div>
@ -153,9 +153,9 @@
<span> <span>
<p><a href="stopnt.png">stopnt</a></p> <p><a href="stopnt.png">stopnt</a></p>
<p> <p>
<a href="https://cyndr.itch.io/stopnt"><i class="fab fa-itch-io"></i></a> <a class="icon-link" 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 class="icon-link" 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://www.youtube.com/watch?v=OmqhwfpHJpk"><i class="fab fa-youtube"></i></a>
</p> </p>
</span> </span>
</div> </div>
@ -172,8 +172,8 @@
<span> <span>
<p><a href="gitch.png">gitch</a></p> <p><a href="gitch.png">gitch</a></p>
<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 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 href="https://www.youtube.com/watch?v=5-OFx20G5S4"><i class="fab fa-youtube"></i></a> <a class="icon-link" href="https://www.youtube.com/watch?v=5-OFx20G5S4"><i class="fab fa-youtube"></i></a>
</p> </p>
</span> </span>
</div> </div>
@ -183,9 +183,9 @@
<span> <span>
<p><a href="membrain.png">membrain</a></p> <p><a href="membrain.png">membrain</a></p>
<p> <p>
<a href="https://ktyl.itch.io/membrain"><i class="fab fa-itch-io"></i></a> <a class="icon-link" 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 class="icon-link" 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://www.youtube.com/watch?v=jV8vbByA5C8"><i class="fab fa-youtube"></i></a>
</p> </p>
</span> </span>
</div> </div>
@ -195,7 +195,7 @@
<span> <span>
<p><a href="myah.png">make yourself at home</a></p> <p><a href="myah.png">make yourself at home</a></p>
<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> </p>
</span> </span>
</div> </div>

4
todo.md
View File

@ -14,8 +14,8 @@
* [ ] hope -> use * [ ] hope -> use
* [x] solar system * [x] solar system
* [x] smaller * [x] smaller
* [ ] gallery * [x] gallery
* [ ] column too thin * [x] column too thin
* [ ] features * [ ] features
* [ ] header * [ ] header
* [ ] sticky slidy from middle to side with scroll * [ ] sticky slidy from middle to side with scroll