Make CSS adaptive and Dackgrounds Dynamic

unikorn-cloud · Jan 29, 2024 · b7b00e0 · b7b00e0
1 parent ecebfa2
commit b7b00e0
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/light/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/light/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-light: rgba(40, 40, 40, 0.7);
+		--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 only screen and (min-width: 720px) and (prefers-color-scheme: dark) {
+	:root {
+                --background-image: url('https://unikorn-cloud.github.io/assets/images/backgrounds/dark/clouds/3000x2000.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/3000x2000.jpg b/images/backgrounds/dark/clouds/3000x2000.jpg
diff --git a/images/backgrounds/dark/clouds/attribution.html b/images/backgrounds/dark/clouds/attribution.html
@@ -0,0 +1 @@
+<a href="https://www.freepik.com/free-photo/sunset-white-clouds-blue-sky-from-airplane-window-view-colorful-cloudscape-background_38117316.htm#query=clouds&position=4&from_view=search&track=sph&uuid=4a197f0b-5a76-4778-98db-70e3c7f31837">Image by svstudioart</a> on Freepik
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>
-```