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 @@
- #include socials.html
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 @@ -
-
- - -
-
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 @@ +
+ +
+ +#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 @@ +
#include titlestart.html /about #include titleend.html +#include sidebarlinks.html +
-#include sidebar.html #include planets.html 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 @@ +
#include titlestart.html /blog #include titleend.html +#include sidebarlinks.html +
-#include sidebar.html #include planets.html 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 @@ +
#include titlestart.html /contact #include titleend.html +#include sidebarlinks.html +
-#include sidebar.html #include planets.html 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 @@ +
#include titlestart.html /gallery #include titleend.html - -#include sidebar.html +#include sidebarlinks.html +

ray tracing

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 @@ - #include header.html +#include header.html - - ktyl ~ home + + ktyl ~ home - - #include titlestart.html - #include titleend.html - +
+ #include titlestart.html + #include titleend.html + #include sidebarlinks.html +
- #include sidebar.html -
+
-

cats stuff

+

cats stuff

-

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.

-
+

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.

+
- #include planets.html + #include planets.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