diff --git a/img/broadsideofthesun.png b/img/broadsideofthesun.png new file mode 100644 index 0000000..5179a74 Binary files /dev/null and b/img/broadsideofthesun.png differ diff --git a/img/dof.png b/img/dof.png new file mode 100644 index 0000000..2254ba6 Binary files /dev/null and b/img/dof.png differ diff --git a/img/dof2.png b/img/dof2.png new file mode 100644 index 0000000..8caf0ba Binary files /dev/null and b/img/dof2.png differ diff --git a/img/erf.png b/img/erf.png new file mode 100644 index 0000000..fa039f5 Binary files /dev/null and b/img/erf.png differ diff --git a/img/gitch.png b/img/gitch.png index 422bec4..cc04e97 100644 Binary files a/img/gitch.png and b/img/gitch.png differ diff --git a/img/greenshift.png b/img/greenshift.png new file mode 100644 index 0000000..2ea2a50 Binary files /dev/null and b/img/greenshift.png differ diff --git a/img/hohmann.png b/img/hohmann.png new file mode 100644 index 0000000..2a5ca7b Binary files /dev/null and b/img/hohmann.png differ diff --git a/img/inevitable.png b/img/inevitable.png new file mode 100644 index 0000000..fe28efc Binary files /dev/null and b/img/inevitable.png differ diff --git a/img/myah.png b/img/myah.png index fb15bf5..93924b1 100644 Binary files a/img/myah.png and b/img/myah.png differ diff --git a/img/rti1w.png b/img/rti1w.png new file mode 100644 index 0000000..1daa470 Binary files /dev/null and b/img/rti1w.png differ diff --git a/img/spacetime.png b/img/spacetime.png new file mode 100644 index 0000000..7cf8815 Binary files /dev/null and b/img/spacetime.png differ diff --git a/img/squingle.jpg b/img/squingle.jpg new file mode 100644 index 0000000..7db1577 Binary files /dev/null and b/img/squingle.jpg differ diff --git a/img/squingle.png b/img/squingle.png new file mode 100644 index 0000000..2d57b23 Binary files /dev/null and b/img/squingle.png differ diff --git a/img/stopnt.png b/img/stopnt.png new file mode 100644 index 0000000..b9262c7 Binary files /dev/null and b/img/stopnt.png differ diff --git a/img/wyskr.png b/img/wyskr.png deleted file mode 100644 index 59a73b3..0000000 --- a/img/wyskr.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ecfec284be34d8d92a9e6dc46b747ec13900c282cd33a8276f5d15ba239c4081 -size 463631 diff --git a/src/inc_css/portfolio.css b/src/inc_css/portfolio.css index 55f8c7f..1f85db0 100644 --- a/src/inc_css/portfolio.css +++ b/src/inc_css/portfolio.css @@ -27,22 +27,43 @@ transform: translate(-37%,0); } +.portfolio h1 { + margin: 1em 0 0 0; +} + +.portfolio p { + +} + .wrapper { + margin-top: 1em; + width: 100%; height: 100%; background-color: transparent; /*background-color: var(--background);*/ 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 { width: 100%; height: 100%; object-fit: cover; 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 { - 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%); } diff --git a/src/inc_css/sidebar.css b/src/inc_css/sidebar.css new file mode 100644 index 0000000..f849766 --- /dev/null +++ b/src/inc_css/sidebar.css @@ -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; +} diff --git a/src/inc_html/titlestart.html b/src/inc_html/titlestart.html index e8205eb..ce53142 100644 --- a/src/inc_html/titlestart.html +++ b/src/inc_html/titlestart.html @@ -1,2 +1,2 @@
-

ktyl@website +

ktyl.dev diff --git a/src/root/gallery.html b/src/root/gallery.html index fb53920..ffcac8b 100644 --- a/src/root/gallery.html +++ b/src/root/gallery.html @@ -12,17 +12,42 @@ #include sidebar.html
+

ray tracing

+

optics are beautiful, fascinating and fun to code

- - - + - + + + + +
+ +

games

+

a credit in each, but not each my own

+
+ + + + + + + +
+ +

abstract

+

sometimes it just happens

+
+ + + + +
diff --git a/src/root/styles.css b/src/root/styles.css index 5ab0121..f5b2c87 100644 --- a/src/root/styles.css +++ b/src/root/styles.css @@ -34,7 +34,6 @@ body { } h1 { - font-size: var(--font-size); color: var(--color1); padding-bottom: 0; margin-bottom:0; @@ -90,15 +89,15 @@ a.fsText:hover { width: max(30vmax,500px); left:50%; top:var(--title-height); - margin-top: 40px; - padding: 10px 0 50px; + margin-top: 1em; + padding: 0px 0 50px; /*background-color: var(--foreground-inactive);*/ transform: translate(-50%, 0); } .page p { - margin: 0 40px; + margin: 0 0px; padding-top: 20px; color: var(--foreground); opacity: 1.0; @@ -107,44 +106,11 @@ a.fsText:hover { .page h1 { color: var(--foreground-inactive); - padding-left: 60px; - padding-top: 10px; font-size: 1.3em; font-weight: bold; } -.sidebar { - 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 sidebar.css #include socials.css #include portfolio.css #include planets.css diff --git a/todo.md b/todo.md index 1ed49fe..4496053 100644 --- a/todo.md +++ b/todo.md @@ -1,13 +1,25 @@ * [x] header * [x] differentiate page name from site name * [ ] footer -* [ ] gallery - * [ ] hover anim - * [ ] add grayscale color shift - * [ ] no (or maybe just less) scale +* [-] gallery + * [x] hover anim + * [x] add grayscale color shift + * [x] no (or maybe just less) scale + * [-] sections + * [x] rtx + * [x] jems + * [-] abstract + * [ ] nature + * [ ] pets * [ ] column formatting on all screen sizes - * [ ] add some camera pics * [ ] thumbnails + * [x] add some context + * [x] titles + * [x] subtitles + * [ ] link somewhere + * [ ] metadata + * [ ] title of project + * [ ] tiny desc * [ ] about * [ ] blog * [ ] example post @@ -15,3 +27,5 @@ * [ ] socials * [ ] planets * [ ] sidebar + * [ ] incorporate title + * [ ] incorporate socials