improve sidebar spacing

This commit is contained in:
ktyl 2021-12-20 23:03:36 +00:00
parent 7c00535988
commit 11c8500a46
5 changed files with 23 additions and 30 deletions

View File

@ -5,7 +5,7 @@
bottom:0; bottom:0;
padding-top: 2em; padding-top: 2em;
padding-left: 1vw; padding-left: 2em;
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
@ -13,26 +13,23 @@
.sidebarContent { .sidebarContent {
position: relative; position: relative;
/*background-color: var(--background);*/
} }
.sidebar ul { .sidebar ul {
position: relative; position: relative;
/*background-color: var(--background);*/
padding-top: 2em; padding-top: 2em;
padding-bottom: 1em; padding-bottom: 1em;
/*margin-left: 1vmax;*/
padding-left:1vmax; padding-left:0;
width: 85%; width: 80%;
} }
.sidebar li { .sidebar li {
display: block; display: block;
margin: 0 0 11px 0; margin-bottom: 0.8em;
transition: transform 0.2s; transition: transform 0.3s;
} }
.sidebar li:hover { .sidebar li:hover {
@ -42,14 +39,14 @@
.sidebar li a { .sidebar li a {
display: block; display: block;
padding: 2px; padding: 2px;
background-color: rgba(0,0,0,0); background-color: var(--clear);
transition: background-color 0.5s; transition: background-color 0.5s;
} }
.sidebar li a:hover { .sidebar li a:hover {
color: var(--foreground); color: var(--foreground);
background-color: var(--background-alt); background-color: var(--foreground-alt);
} }

View File

@ -1,16 +1,13 @@
.socials { .socials {
position: absolute; position: absolute;
margin-top: 16px;
margin-left: 10px;
background-color:var(--background); background-color:var(--background);
bottom: 1em; bottom: 1.6em;
} }
.socials i { .socials i {
font-size: 2em; font-size: 2em;
margin-left: 4px;
color: var(--foreground-inactive); color: var(--foreground-inactive);
transition: transform 0.3s, color 0.3s; transition: transform 0.3s, color 0.3s;
} }
@ -21,6 +18,5 @@
.socials a { .socials a {
text-decoration: none; text-decoration: none;
transition: color 0.3s; transition: color 0.3s;
} }

12
src/inc_css/title.css Normal file
View File

@ -0,0 +1,12 @@
.title {
font-size: 1em;
}
.title a {
transition: color 0.3s;
color: var(--foreground-active);
}
.title a:hover {
color: lightpink;
}

View File

@ -5,6 +5,7 @@
--foreground: #222; --foreground: #222;
--foreground-inactive: #777; --foreground-inactive: #777;
--accent: lightpink; --accent: lightpink;
--clear: rgba(0,0,0,0);
/* Colors */ /* Colors */
--color0: #0000ff; --color0: #0000ff;

View File

@ -12,20 +12,8 @@ body {
background-color: var(--background); background-color: var(--background);
} }
.title { #include title.css
margin-left: 5px; #include sidebar.css
font-size: 1em;
}
.title a {
transition: color 0.3s;
color: var(--foreground-active);
}
.title a:hover {
color: lightpink;
}
.pageTitle { .pageTitle {
margin-left: -0.15em; margin-left: -0.15em;
@ -98,7 +86,6 @@ a.fsText:hover {
font-weight: bold; font-weight: bold;
} }
#include sidebar.css
#include socials.css #include socials.css
#include portfolio.css #include portfolio.css
#include planets.css #include planets.css