mostly gallery page

img/wyskr.png

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

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%);
 }

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;
+}

src/inc_html/titlestart.html

@@ -1,2 +1,2 @@
 <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">

src/root/gallery.html

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

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;
+    margin-top: 1em;
-    padding: 10px 0 50px;
+    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 {
+#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 portfolio.css
 #include planets.css

todo.md

@@ -1,13 +1,25 @@
 * [x] header
     * [x] differentiate page name from site name
 * [ ] 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
-    * [ ] 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