ktyl
/
ktyl.dev
1
0
Fork 0
Code Issues 18 Pull Requests 1 Packages Projects 1 Releases Wiki Activity

squish stuff into sidebar, improve portfolio

This commit is contained in:
ktyl 2021-12-06 00:15:18 +00:00
parent 2c157c1019
commit b4fba1ab87
13 changed files with 88 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/inc_css/portfolio.css
View File

@ -19,12 +19,12 @@
.page.portfolio { .page.portfolio {
padding-top: 0; padding-top: 0;
width: 75%; width: 70%;
right: 0; right: 0;
margin:0; margin:0;
padding:0; padding:0;
padding-top: 5vh; padding-top: 5vh;
transform: translate(-37%,0); transform: translate(-40%,0);
} }
.portfolio h1 { .portfolio h1 {

45
src/inc_css/sidebar.css
View File

@ -1,11 +1,11 @@
.sidebar { .sidebar {
position: absolute; position: fixed;
left: 15px; width: max(11vmax, 200px);
width: max(11vmax, 180px); top: 0;
top: var(--title-height);
bottom:0; bottom:0;
padding-top: 1em; padding-top: 2em;
padding-left: 1vw;
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
@ -13,21 +13,44 @@
.sidebarContent { .sidebarContent {
position: relative; position: relative;
background-color: var(--background); /*background-color: var(--background);*/
} }
.sidebar ul { .sidebar ul {
position: relative; position: relative;
background-color: var(--background); /*background-color: var(--background);*/
padding-left: 30px;
padding-top: 2em;
padding-bottom: 1em;
/*margin-left: 1vmax;*/
padding-left:1vmax;
width: 85%;
} }
.sidebar li { .sidebar li {
display: block; 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 { .sidebar li a {
padding: 0 0; display: block;
margin-left: -20px; 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);
}

6
src/inc_css/socials.css
View File

@ -1,7 +1,11 @@
.socials { .socials {
position: absolute;
margin-top: 16px; margin-top: 16px;
margin-left: 10px; margin-left: 10px;
background-color:var(--background); background-color:var(--background);
bottom: 1em;
} }
.socials i { .socials i {
@ -12,7 +16,7 @@
} }
.socials i:hover { .socials i:hover {
color: var(--accent); color: var(--accent);
transform: translateY(-20%); transform: translateY(-10%);
} }
.socials a { .socials a {

1
src/inc_html/footer.html
View File

@ -1,3 +1,2 @@
<div class="footer"> <div class="footer">
#include socials.html
</div> </div>

11
src/inc_html/sidebar.html
View File

@ -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>

10
src/inc_html/sidebarlinks.html Normal file
View File

@ -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

4
src/root/about.html
View File

@ -5,11 +5,13 @@
<body> <body>
<div class="sidebar">
#include titlestart.html #include titlestart.html
/about /about
#include titleend.html #include titleend.html
#include sidebarlinks.html
</div>
#include sidebar.html
#include planets.html #include planets.html
</body> </body>

4
src/root/blog.html
View File

@ -5,11 +5,13 @@
<body> <body>
<div class="sidebar">
#include titlestart.html #include titlestart.html
/blog /blog
#include titleend.html #include titleend.html
#include sidebarlinks.html
</div>
#include sidebar.html
#include planets.html #include planets.html
</body> </body>

4
src/root/contact.html
View File

@ -5,11 +5,13 @@
<body> <body>
<div class="sidebar">
#include titlestart.html #include titlestart.html
/contact /contact
#include titleend.html #include titleend.html
#include sidebarlinks.html
</div>
#include sidebar.html
#include planets.html #include planets.html
</body> </body>

5
src/root/gallery.html
View File

@ -5,11 +5,12 @@
<body> <body>
<div class="sidebar">
#include titlestart.html #include titlestart.html
/gallery /gallery
#include titleend.html #include titleend.html
#include sidebarlinks.html
#include sidebar.html </div>
<div class="page portfolio"> <div class="page portfolio">
<h1>ray tracing</h1> <h1>ray tracing</h1>

32
src/root/index.html
View File

@ -1,29 +1,25 @@
<!doctype html> <!doctype html>
<html> <html>
#include header.html #include header.html
<body> <body>
<title>ktyl ~ home</title> <title>ktyl ~ home</title>
<!-- actually a headline --> <div class="sidebar">
#include titlestart.html #include titlestart.html
#include titleend.html #include titleend.html
<!-- #include sidebarlinks.html
<div class="title"> </div>
<h1 class="fsText">ktyl@website</h1>
</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> <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> </div>
#include planets.html #include planets.html
</body> </body>
</html> </html>

27
src/root/styles.css
View File

@ -7,15 +7,14 @@
body { body {
font-family: 'Ubuntu', sans-serif; font-family: 'Ubuntu', sans-serif;
margin: 0;
background-color: var(--background); background-color: var(--background);
} }
.title { .title {
position: relative; margin-left: 5px;
margin-top: 40px; font-size: 1em;
margin-left: 80px;
font-size: 1.4em;
} }
.title a { .title a {
@ -37,6 +36,7 @@ h1 {
color: var(--color1); color: var(--color1);
padding-bottom: 0; padding-bottom: 0;
margin-bottom:0; margin-bottom:0;
margin-top:0;
} }
ul { ul {
@ -46,22 +46,12 @@ ul {
li { li {
display:inline; display:inline;
/*padding-left: 1em;*/
transition: transform 0.2s;
}
li:hover {
transform: translate(10px);
} }
a.fsText { a.fsText {
position:relative;
text-decoration: none; text-decoration: none;
background-color: var(--background);
color: var(--foreground-inactive); color: var(--foreground-inactive);
padding: 0 6px;
transform: scale(1); transform: scale(1);
transition: background-color 0.2s, color 0.2s, transform 0.2s; transition: background-color 0.2s, color 0.2s, transform 0.2s;
} }
@ -72,14 +62,11 @@ a.fsText {
} }
a.fsText:hover { a.fsText:hover {
background-color: var(--background); /*color: var(--accent);*/
color: var(--accent);
transform: scale(1.1, 1);
} }
.fsText { .fsText {
--font-size: 1.6em; --font-size: 1.4em;
font-size: var(--font-size); font-size: var(--font-size);
color: var(--foreground); color: var(--foreground);
} }
@ -88,7 +75,7 @@ a.fsText:hover {
position: absolute; position: absolute;
width: max(30vmax,500px); width: max(30vmax,500px);
left:50%; left:50%;
top:var(--title-height); top:0;
margin-top: 1em; margin-top: 1em;
padding: 0px 0 50px; padding: 0px 0 50px;
/*background-color: var(--foreground-inactive);*/ /*background-color: var(--foreground-inactive);*/

7
todo.md
View File

@ -1,6 +1,10 @@
* [x] header * [x] header
* [x] differentiate page name from site name * [x] differentiate page name from site name
* [x] sidebar
* [x] incorporate title
* [x] incorporate socials
* [ ] footer * [ ] footer
* [ ] made by me
* [-] gallery * [-] gallery
* [x] hover anim * [x] hover anim
* [x] add grayscale color shift * [x] add grayscale color shift
@ -26,6 +30,3 @@
* [ ] contact * [ ] contact
* [ ] socials * [ ] socials
* [ ] planets * [ ] planets
* [ ] sidebar
* [ ] incorporate title
* [ ] incorporate socials