mostly gallery page

This commit is contained in:
ktyl 2021-12-01 01:38:46 +00:00
parent 1b34de1411
commit 2c157c1019
21 changed files with 109 additions and 53 deletions

BIN
img/broadsideofthesun.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 577 KiB

BIN
img/dof.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 501 KiB

BIN
img/dof2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 KiB

BIN
img/erf.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 839 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 122 KiB

BIN
img/greenshift.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 429 KiB

BIN
img/hohmann.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
img/inevitable.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 20 KiB

BIN
img/rti1w.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 418 KiB

BIN
img/spacetime.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 320 KiB

BIN
img/squingle.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
img/squingle.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 445 KiB

BIN
img/stopnt.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 530 KiB

View File

@ -1,3 +0,0 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ecfec284be34d8d92a9e6dc46b747ec13900c282cd33a8276f5d15ba239c4081
size 463631

View File

@ -27,22 +27,43 @@
transform: translate(-37%,0); transform: translate(-37%,0);
} }
.portfolio h1 {
margin: 1em 0 0 0;
}
.portfolio p {
}
.wrapper { .wrapper {
margin-top: 1em;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;
/*background-color: var(--background);*/ /*background-color: var(--background);*/
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
} }
/* what the fuck
* https://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
* */
.wrapper img { .wrapper img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.1s ease-in; transition: transform 0.1s ease-in;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(50%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
transition: all .3s ease;
} }
.wrapper img:hover { .wrapper img:hover {
transform: scale(1.16); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
} }

33
src/inc_css/sidebar.css Normal file
View File

@ -0,0 +1,33 @@
.sidebar {
position: absolute;
left: 15px;
width: max(11vmax, 180px);
top: var(--title-height);
bottom:0;
padding-top: 1em;
background-color: var(--background);
color: var(--foreground);
}
.sidebarContent {
position: relative;
background-color: var(--background);
}
.sidebar ul {
position: relative;
background-color: var(--background);
padding-left: 30px;
}
.sidebar li {
display: block;
margin: 15px 0 0 0;
}
.sidebar li a {
padding: 0 0;
margin-left: -20px;
}

View File

@ -1,2 +1,2 @@
<div class="title"> <div class="title">
<h1 class="fsText"><a href="index.html">ktyl@website</a><span class="pageTitle"> <h1 class="fsText"><a href="index.html">ktyl.dev</a><span class="pageTitle">

View File

@ -12,17 +12,42 @@
#include sidebar.html #include sidebar.html
<div class="page portfolio"> <div class="page portfolio">
<h1>ray tracing</h1>
<p>optics are beautiful, fascinating and fun to code</p>
<div class="wrapper"> <div class="wrapper">
<img src="cloudsteroid.png"></img>
<img src="oglc.png"></img> <img src="oglc.png"></img>
<img src="ecollapse.png"></img>
<img src="relativity.png"></img> <img src="relativity.png"></img>
<img src="doppler.png"></img> <img src="doppler.png"></img>
<img src="relanoise.png"></img> <img src="greenshift.png"></img>
<img src="skeinring.png"></img> <img src="skeinring.png"></img>
<img src="membrain.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="revival.png"></img>
<img src="lsd.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>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>
</div> </div>

View File

@ -34,7 +34,6 @@ body {
} }
h1 { h1 {
font-size: var(--font-size);
color: var(--color1); color: var(--color1);
padding-bottom: 0; padding-bottom: 0;
margin-bottom:0; margin-bottom:0;
@ -90,15 +89,15 @@ a.fsText:hover {
width: max(30vmax,500px); width: max(30vmax,500px);
left:50%; left:50%;
top:var(--title-height); top:var(--title-height);
margin-top: 40px; margin-top: 1em;
padding: 10px 0 50px; padding: 0px 0 50px;
/*background-color: var(--foreground-inactive);*/ /*background-color: var(--foreground-inactive);*/
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
.page p { .page p {
margin: 0 40px; margin: 0 0px;
padding-top: 20px; padding-top: 20px;
color: var(--foreground); color: var(--foreground);
opacity: 1.0; opacity: 1.0;
@ -107,44 +106,11 @@ a.fsText:hover {
.page h1 { .page h1 {
color: var(--foreground-inactive); color: var(--foreground-inactive);
padding-left: 60px;
padding-top: 10px;
font-size: 1.3em; font-size: 1.3em;
font-weight: bold; font-weight: bold;
} }
.sidebar { #include sidebar.css
position: absolute;
left: 15px;
width: max(11vmax, 180px);
top: max(var(--title-height), 15%);
bottom:0;
background-color: var(--background);
color: var(--foreground);
}
.sidebarContent {
position: relative;
background-color: var(--background);
}
.sidebar ul {
position: relative;
background-color: var(--background);
padding-left: 30px;
}
.sidebar li {
display: block;
margin: 15px 0 0 0;
}
.sidebar li a {
padding: 0 0;
margin-left: -20px;
}
#include socials.css #include socials.css
#include portfolio.css #include portfolio.css
#include planets.css #include planets.css

24
todo.md
View File

@ -1,13 +1,25 @@
* [x] header * [x] header
* [x] differentiate page name from site name * [x] differentiate page name from site name
* [ ] footer * [ ] footer
* [ ] gallery * [-] gallery
* [ ] hover anim * [x] hover anim
* [ ] add grayscale color shift * [x] add grayscale color shift
* [ ] no (or maybe just less) scale * [x] no (or maybe just less) scale
* [-] sections
* [x] rtx
* [x] jems
* [-] abstract
* [ ] nature
* [ ] pets
* [ ] column formatting on all screen sizes * [ ] column formatting on all screen sizes
* [ ] add some camera pics
* [ ] thumbnails * [ ] thumbnails
* [x] add some context
* [x] titles
* [x] subtitles
* [ ] link somewhere
* [ ] metadata
* [ ] title of project
* [ ] tiny desc
* [ ] about * [ ] about
* [ ] blog * [ ] blog
* [ ] example post * [ ] example post
@ -15,3 +27,5 @@
* [ ] socials * [ ] socials
* [ ] planets * [ ] planets
* [ ] sidebar * [ ] sidebar
* [ ] incorporate title
* [ ] incorporate socials