Add sidebar

1 files changed, 42 insertions, 15 deletions

diff --git a/assets/style.css b/assets/style.css
index cc7b1d6..e40056e 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,28 +1,25 @@
 html {
 	font-family: system-ui, sans-serif;
 	--bg: hsl(32, 98%, 92%);
-	--fg: #1E1F21;
-	--link-color: #24527d;
-	--text-decoration-color: #CCC;
+	--fg: hsl(220, 4.76%, 12.35%);
+	--link-fg: hsl(208.99, 55.28%, 31.57%);
+	--text-decoration-fg: hsl(0, 0%, 80%);
+	--sidebar-bg: hsl(32, 80%, 88.5%);
 	color: var(--fg);
 	background-color: var(--bg);
 }
 @media(prefers-color-scheme:dark) {
 	html {
-		--bg: #1E1F21;
-		--fg: #EEEFF1;
-		--link-color: #5ca7ed;
-		--text-decoration-color: #474747;
+		--bg: hsl(220, 4.76%, 12.35%);
+		--fg: hsl(220, 9.68%, 93.92%);
+		--link-fg: hsl(208.97, 80.11%, 64.51%);
+		--text-decoration-fg: hsl(0, 0%, 46.84%);
+		--sidebar-bg: hsl(220, 4.76%, 16.35%);
 	}
 }
 
 body {
-	margin: 0 auto;
-	padding: 1rem;
-}
-
-body:not(.wide) {
-	max-width: 50rem;
+	margin: 0rem;
 }
 
 h1 {
@@ -30,6 +27,36 @@ h1 {
 }
 
 a:link, a:visited {
-	text-decoration-color: var(--text-decoration-color);
-	color: var(--link-color);
+	text-decoration-color: var(--text-decoration-fg);
+	color: var(--link-fg);
+}
+
+aside#sidebar {
+	position: fixed;
+	width: min(33%, 200px);
+	height: 100%;
+	background-color: var(--sidebar-bg);
+	overflow-y: auto;
+}
+
+div#main-and-footer {
+	margin-left: min(33%, 200px);
+	padding: 10px;
+}
+
+main {
+	margin: 0 auto;
+}
+
+main:not(.wide) {
+	max-width: 50rem;
+}
+
+@media(max-width: 470px) {
+	aside#sidebar {
+		display: none;
+	}
+	div#main-and-footer {
+		margin-left: 0px;
+	}
 }