From b4fba1ab871fb919f38e120d0f30ce8aa6e3228a Mon Sep 17 00:00:00 2001
From: ktyl <me@ktyl.dev>
Date: Mon, 6 Dec 2021 00:15:18 +0000
Subject: [PATCH] squish stuff into sidebar, improve portfolio

---
 src/inc_css/portfolio.css      |  4 +--
 src/inc_css/sidebar.css        | 45 +++++++++++++++++++++++++---------
 src/inc_css/socials.css        |  6 ++++-
 src/inc_html/footer.html       |  1 -
 src/inc_html/sidebar.html      | 11 ---------
 src/inc_html/sidebarlinks.html | 10 ++++++++
 src/root/about.html            |  4 ++-
 src/root/blog.html             |  4 ++-
 src/root/contact.html          |  4 ++-
 src/root/gallery.html          |  5 ++--
 src/root/index.html            | 32 +++++++++++-------------
 src/root/styles.css            | 27 ++++++--------------
 todo.md                        |  7 +++---
 13 files changed, 88 insertions(+), 72 deletions(-)
 delete mode 100644 src/inc_html/sidebar.html
 create mode 100644 src/inc_html/sidebarlinks.html

diff --git a/src/inc_css/portfolio.css b/src/inc_css/portfolio.css
index 1f85db0..c7728c2 100644
--- a/src/inc_css/portfolio.css
+++ b/src/inc_css/portfolio.css
@@ -19,12 +19,12 @@
 
 .page.portfolio {
     padding-top: 0;
-    width: 75%;
+    width: 70%;
     right: 0;
     margin:0;
     padding:0;
     padding-top: 5vh;
-    transform: translate(-37%,0);
+    transform: translate(-40%,0);
 }
 
 .portfolio h1 {
diff --git a/src/inc_css/sidebar.css b/src/inc_css/sidebar.css
index f849766..0d6874f 100644
--- a/src/inc_css/sidebar.css
+++ b/src/inc_css/sidebar.css
@@ -1,11 +1,11 @@
 .sidebar {
-    position: absolute;
-    left: 15px;
-    width: max(11vmax, 180px);
-    top: var(--title-height);
+    position: fixed;
+    width: max(11vmax, 200px);
+    top: 0;
     bottom:0;
 
-    padding-top: 1em;
+    padding-top: 2em;
+    padding-left: 1vw;
 
     background-color: var(--background);
     color: var(--foreground);
@@ -13,21 +13,44 @@
 
 .sidebarContent {
     position: relative;
-    background-color: var(--background);
+    /*background-color: var(--background);*/
 }
 
 .sidebar ul {
     position: relative;
-    background-color: var(--background);
-    padding-left: 30px;
+    /*background-color: var(--background);*/
+
+    padding-top: 2em;
+    padding-bottom: 1em;
+    /*margin-left: 1vmax;*/
+
+    padding-left:1vmax;
+    width: 85%;
 }
 
 .sidebar li {
     display: block;
-    margin: 15px 0 0 0;
+    margin: 0 0 11px  0;
+
+    transition: transform 0.2s;
+}
+
+.sidebar li:hover {
+    transform: translate(1vmax);
 }
 
 .sidebar li a {
-    padding: 0 0;
-    margin-left: -20px;
+    display: block;
+    padding: 2px;
+    background-color: rgba(0,0,0,0);
+
+    transition: background-color 0.5s;
 }
+
+.sidebar li a:hover {
+    color: var(--foreground);
+    background-color: var(--background-alt);
+}
+
+
+
diff --git a/src/inc_css/socials.css b/src/inc_css/socials.css
index 9aa14ec..b055944 100644
--- a/src/inc_css/socials.css
+++ b/src/inc_css/socials.css
@@ -1,7 +1,11 @@
 .socials {
+    position: absolute;
+
     margin-top: 16px;
     margin-left: 10px;
     background-color:var(--background);
+
+    bottom: 1em;
 }
 
 .socials i {
@@ -12,7 +16,7 @@
 }
 .socials i:hover {
     color: var(--accent);
-    transform: translateY(-20%);
+    transform: translateY(-10%);
 }
 
 .socials a {
diff --git a/src/inc_html/footer.html b/src/inc_html/footer.html
index 6e9d504..e569562 100644
--- a/src/inc_html/footer.html
+++ b/src/inc_html/footer.html
@@ -1,3 +1,2 @@
 <div class="footer">
-    #include socials.html
 </div>
diff --git a/src/inc_html/sidebar.html b/src/inc_html/sidebar.html
deleted file mode 100644
index 02e1702..0000000
--- a/src/inc_html/sidebar.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="sidebar">
-    <div class="sidebarContent">
-
-        <ul>
-            <li><a href="about.html" class="fsText">/about</a></li>
-            <li><a href="gallery.html" class="fsText">/gallery</a></li>
-            <li><a href="blog.html" class="fsText">/blog</a></li>
-            <li><a href="contact.html" class="fsText">/contact</a></li>
-        </ul>
-    </div>
-</div>
diff --git a/src/inc_html/sidebarlinks.html b/src/inc_html/sidebarlinks.html
new file mode 100644
index 0000000..baf7779
--- /dev/null
+++ b/src/inc_html/sidebarlinks.html
@@ -0,0 +1,10 @@
+<div class="sidebarContent">
+    <ul>
+        <li><a href="about.html" class="fsText">/about</a></li>
+        <li><a href="gallery.html" class="fsText">/gallery</a></li>
+        <li><a href="blog.html" class="fsText">/blog</a></li>
+        <li><a href="contact.html" class="fsText">/contact</a></li>
+    </ul>
+</div>
+
+#include socials.html
diff --git a/src/root/about.html b/src/root/about.html
index 2bf3c82..951d0b8 100644
--- a/src/root/about.html
+++ b/src/root/about.html
@@ -5,11 +5,13 @@
 
 <body>
 
+<div class="sidebar">
 #include titlestart.html
 /about
 #include titleend.html
+#include sidebarlinks.html
+</div>
 
-#include sidebar.html
 #include planets.html
 
 </body>
diff --git a/src/root/blog.html b/src/root/blog.html
index 9c3269a..646004e 100644
--- a/src/root/blog.html
+++ b/src/root/blog.html
@@ -5,11 +5,13 @@
 
 <body>
 
+<div class="sidebar">
 #include titlestart.html
 /blog
 #include titleend.html
+#include sidebarlinks.html
+</div>
 
-#include sidebar.html
 #include planets.html
 
 </body>
diff --git a/src/root/contact.html b/src/root/contact.html
index 08b1bd3..421e782 100644
--- a/src/root/contact.html
+++ b/src/root/contact.html
@@ -5,11 +5,13 @@
 
 <body>
 
+<div class="sidebar">
 #include titlestart.html
 /contact
 #include titleend.html
+#include sidebarlinks.html
+</div>
 
-#include sidebar.html
 #include planets.html
 
 </body>
diff --git a/src/root/gallery.html b/src/root/gallery.html
index ffcac8b..b28b2ee 100644
--- a/src/root/gallery.html
+++ b/src/root/gallery.html
@@ -5,11 +5,12 @@
 
 <body>
 
+<div class="sidebar">
 #include titlestart.html
 /gallery
 #include titleend.html
-
-#include sidebar.html
+#include sidebarlinks.html
+</div>
 
 <div class="page portfolio">
     <h1>ray tracing</h1>
diff --git a/src/root/index.html b/src/root/index.html
index e644da1..2522fa0 100644
--- a/src/root/index.html
+++ b/src/root/index.html
@@ -1,29 +1,25 @@
 <!doctype html>
 <html>
 
-    #include header.html
+#include header.html
 
-    <body>
-        <title>ktyl ~ home</title>
+<body>
+    <title>ktyl ~ home</title>
 
-        <!-- actually a headline -->
-        #include titlestart.html
-        #include titleend.html
-        <!--
-        <div class="title">
-            <h1 class="fsText">ktyl@website</h1>
-        </div>
-        -->
+    <div class="sidebar">
+    #include titlestart.html
+    #include titleend.html
+    #include sidebarlinks.html
+    </div>
 
-        #include sidebar.html
-        <div class="page">
+    <div class="page">
 
-            <h1>cats stuff</h1>
+        <h1>cats stuff</h1>
 
-            <p>hi, im cat and i do things and stuff. eventually i want to make this an actual, useful landing page for people interested in me and what i do. unfortunately, im very scatterbrained and not very organised! as a result, this is just one of myriad ongoing projects that i constantly try to chip away at, to varying degrees of success.</p>
-        </div>
+        <p>hi, im cat and i do things and stuff. eventually i want to make this an actual, useful landing page for people interested in me and what i do. unfortunately, im very scatterbrained and not very organised! as a result, this is just one of myriad ongoing projects that i constantly try to chip away at, to varying degrees of success.</p>
+    </div>
 
-        #include planets.html
+    #include planets.html
 
-    </body>
+</body>
 </html>
diff --git a/src/root/styles.css b/src/root/styles.css
index f5b2c87..1ef8bb8 100644
--- a/src/root/styles.css
+++ b/src/root/styles.css
@@ -7,15 +7,14 @@
 
 body {
     font-family: 'Ubuntu', sans-serif;
+    margin: 0;
 
     background-color: var(--background);
 }
 
 .title {
-    position: relative;
-    margin-top: 40px;
-    margin-left: 80px;
-    font-size: 1.4em;
+    margin-left: 5px;
+    font-size: 1em;
 }
 
 .title a {
@@ -37,6 +36,7 @@ h1 {
     color: var(--color1);
     padding-bottom: 0;
     margin-bottom:0;
+    margin-top:0;
 }
 
 ul {
@@ -46,22 +46,12 @@ ul {
 
 li {
     display:inline;
-    /*padding-left: 1em;*/
-    transition: transform 0.2s;
-}
-
-li:hover {
-    transform: translate(10px);
 }
 
 a.fsText {
-    position:relative;
     text-decoration: none;
-    background-color: var(--background);
     color: var(--foreground-inactive);
 
-    padding: 0 6px;
-
     transform: scale(1);
     transition: background-color 0.2s, color 0.2s, transform 0.2s;
 }
@@ -72,14 +62,11 @@ a.fsText {
 }
 
 a.fsText:hover {
-    background-color: var(--background);
-    color: var(--accent);
-
-    transform: scale(1.1, 1);
+    /*color: var(--accent);*/
 }
 
 .fsText {
-    --font-size: 1.6em;
+    --font-size: 1.4em;
     font-size: var(--font-size);
     color: var(--foreground);
 }
@@ -88,7 +75,7 @@ a.fsText:hover {
     position: absolute;
     width: max(30vmax,500px);
     left:50%;
-    top:var(--title-height);
+    top:0;
     margin-top: 1em;
     padding: 0px 0 50px;
     /*background-color: var(--foreground-inactive);*/
diff --git a/todo.md b/todo.md
index 4496053..7d64c5e 100644
--- a/todo.md
+++ b/todo.md
@@ -1,6 +1,10 @@
 * [x] header
     * [x] differentiate page name from site name
+* [x] sidebar
+    * [x] incorporate title
+    * [x] incorporate socials
 * [ ] footer
+    * [ ] made by me
 * [-] gallery
     * [x] hover anim
         * [x] add grayscale color shift
@@ -26,6 +30,3 @@
 * [ ] contact
 * [ ] socials
 * [ ] planets
-* [ ] sidebar
-    * [ ] incorporate title
-    * [ ] incorporate socials