improve sidebar spacing

src/inc_css/sidebar.css

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

src/inc_css/socials.css

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

src/inc_css/title.css

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

src/root/colors.css

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

src/root/styles.css

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