Add the sky svg shape

preactjs · Apr 8, 2021 · aef9d0a · aef9d0a
1 parent a4228d3
commit aef9d0a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/docs/public/assets/sky.svg b/docs/public/assets/sky.svg
diff --git a/docs/public/styles/index.css b/docs/public/styles/index.css
@@ -33,7 +33,7 @@
 @media (prefers-color-scheme: dark) {
 	:root {
 		--color-text: #ebf4f1;
-		--color-bg: #272b34;
+		--color-bg: #0b0e12;
 		--color-header-bg: rgba(37, 41, 49, 0.95);
 		--color-header-shadow: #220f2d;
 		--color-border: #525252;
@@ -115,9 +115,13 @@ body {
 
 body {
 	font: 100%/1.5 system-ui, helvetica, sans-serif;
-	background: var(--color-bg);
+	background-color: var(--color-bg);
 	color: var(--color-text);
-	transition: background 0.3s;
+	transition: background-color 0.3s;
+	background-image: url('/assets/sky.svg');
+	background-position: top center;
+	background-repeat: repeat-x;
+	background-size: auto 40em;
 }
 
 /** Wraps the content */
@@ -339,7 +343,7 @@ h5:hover .anchor {
 	height: var(--header-height);
 }
 .header {
-	background: var(--color-bg);
+	background: transparent;
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -352,7 +356,7 @@ h5:hover .anchor {
 	padding: 0 1rem;
 
 	/* top glow */
-	box-shadow: inset 0 4px 0 #49b9f5, inset 0 -1px 0 var(--color-header-shadow);
+	/* box-shadow: inset 0 4px 0 #49b9f5, inset 0 -1px 0 var(--color-header-shadow); */
 	/* make items appear centered visually, glow messes with preception */
 	padding-top: 0.25rem;
 }