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

45
src/inc_css/sidebar.css
View File

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

6
src/inc_css/socials.css
View File

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

1
src/inc_html/footer.html
View File

@ -1,3 +1,2 @@
<div class="footer">
#include socials.html
</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>
<div class="sidebar">
#include titlestart.html
/about
#include titleend.html
#include sidebarlinks.html
</div>
#include sidebar.html
#include planets.html
</body>

4
src/root/blog.html
View File

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

4
src/root/contact.html
View File

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

5
src/root/gallery.html
View File

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

32
src/root/index.html
View File

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

27
src/root/styles.css
View File

@ -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);*/

7
todo.md
View File

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