add gallery hover info+anim
This commit is contained in:
parent
acae822037
commit
b2c93de16f
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -45,8 +45,7 @@
|
|||
}
|
||||
|
||||
.sidebar li a:hover {
|
||||
color: var(--foreground);
|
||||
background-color: var(--foreground-alt);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
--background-alt: #b8b8b8;
|
||||
--foreground: #444;
|
||||
--foreground-inactive: #777;
|
||||
--accent: lightpink;
|
||||
--accent: #ff369a;
|
||||
--clear: rgba(0,0,0,0);
|
||||
|
||||
/* Colors */
|
||||
|
|
|
@ -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">
|
||||
|
||||
<h1>abstract</h1>
|
||||
<p>sometimes it just happens</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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
#include planets.html
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue