Make CSS adaptive and Dackgrounds Dynamic

unikorn-cloud · Jan 29, 2024 · 26a40c1 · 26a40c1
1 parent ecebfa2
commit 26a40c1
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 20 deletions.
diff --git a/css/adaptive.css b/css/adaptive.css
diff --git a/css/base.css b/css/base.css
@@ -14,6 +14,9 @@
 	--brand-light: hsl(var(--brand-hue), var(--brand-sturation), var(--brand-lightness-light));
 	--brand-dark: hsl(var(--brand-hue), var(--brand-sturation), var(--brand-lightness-dark));
 
+	/* Backgrounds */
+	--background-image: url('https://unikorn-cloud.github.io/assets/images/backgrounds/lignt/clouds/1000x667.jpg')
+
         /* Generic colors */
         --light-grey: rgb(200, 200, 200);
         --mid-grey: rgb(128, 128, 128);
@@ -152,6 +155,9 @@ dt {
 
 /* Desktop overrides */
 @media only screen and (min-width: 720px) {
+	:root {
+		--background-image: url('https://unikorn-cloud.github.io/assets/images/backgrounds/lignt/clouds/6144x4096.jpg')
+	}
 	dl {
 		display: grid;
 		grid-template-columns: auto 1fr;
@@ -162,3 +168,29 @@ dt {
 		grid-column-start: 1;
 	}
 }
+
+/* Dark mode preference */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background-image: url('https://unikorn-cloud.github.io/assets/images/backgrounds/dark/clouds/1000x667.jpg')
+
+		--overlay: rgba(40, 40, 40, 0.9);
+		--overlay-highlight: rgb(23, 33, 36);
+		--background: rgb(7, 18, 21);
+		--border: rgb(80, 80, 80);
+	}
+	body {
+		background-color: var(--background);
+		color: #eee;
+	}
+	h1, h2, h3, h4, h5, h6 {
+		color: #eee;
+	}
+}
+
+/* Darkmode and desktop, note this must come last to override the other non-composite defaults */
+@media (prefers-color-scheme: dark) and only screen and (min-width: 720px) {
+	:root {
+                --background-image: url('https://unikorn-cloud.github.io/assets/images/backgrounds/dark/clouds/5713x3809.jpg')
+        }
+}
diff --git a/images/backgrounds/clouds/2000x1333.jpg b/images/backgrounds/clouds/2000x1333.jpg
diff --git a/images/backgrounds/dark/clouds/1000x667.jpg b/images/backgrounds/dark/clouds/1000x667.jpg
diff --git a/images/backgrounds/dark/clouds/5713x3809.jpg b/images/backgrounds/dark/clouds/5713x3809.jpg
diff --git a/images/backgrounds/dark/clouds/attribution.html b/images/backgrounds/dark/clouds/attribution.html
@@ -0,0 +1 @@
+Image by <a href="https://www.freepik.com/free-photo/sunset-sky-with-clouds-background_19381018.htm#page=2&query=clouds&position=42&from_view=search&track=ais&uuid=7e033ba4-91b7-4ac4-ae2e-7b1d20682c67">Freepik</a>
diff --git a/images/backgrounds/light/clouds/1000x667.jpg b/images/backgrounds/light/clouds/1000x667.jpg
diff --git a/images/backgrounds/clouds/6144x4096.jpg → ...es/backgrounds/light/clouds/6144x4096.jpg b/images/backgrounds/clouds/6144x4096.jpg → ...es/backgrounds/light/clouds/6144x4096.jpg
diff --git a/images/backgrounds/clouds/README.md → ...backgrounds/light/clouds/attribution.html b/images/backgrounds/clouds/README.md → ...backgrounds/light/clouds/attribution.html
@@ -1,5 +1 @@
-# Attribution Notice
-
-```html
 <a href="https://www.freepik.com/free-ai-image/aerial-view-big-white-clouds-blue-sky_92127122.htm#query=clouds&position=7&from_view=search&track=sph&uuid=77e7bc6d-6181-451b-a1cc-f8dc423999a4">Image By chandlervid85</a>
-```
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Image by <a href="https://www.freepik.com/free-photo/sunset-sky-with-clouds-background_19381018.htm#page=2&query=clouds&position=42&from_view=search&track=ais&uuid=7e033ba4-91b7-4ac4-ae2e-7b1d20682c67">Freepik</a>