From d1dba1c7c913db5bfdf343236792df6301b79168 Mon Sep 17 00:00:00 2001
From: Starfall <us@starfall.systems>
Date: Wed, 6 Sep 2023 13:20:38 -0500
Subject: css-experiments background character

---
 src/css-experiments.html | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/css-experiments.html b/src/css-experiments.html
index cbe88af..be2ebda 100644
--- a/src/css-experiments.html
+++ b/src/css-experiments.html
@@ -25,11 +25,26 @@ layout = "base.njk"
 	padding: 0 0.25em;
 }
 </style>
+<p>Silly warning label. I've made it toggleable, because why not:
+<label>
+	<input type=checkbox class=warning checked />
+	<span>MERCURY IN RETROGRADE</span>
+</label>
+</p>
 
-<section>
-	<p>Silly warning label. I've made it toggleable, because why not:
-	<label>
-		<input type=checkbox class=warning />
-		<span>MERCURY IN RETROGRADE</span>
-	</label>
-</section>
+<style>
+.decor {
+	user-select: none;
+	z-index: -3
+}
+#background-moon {
+	position: relative;
+	font-size: 25rem;
+	opacity: 10%;
+	left: 40%;
+	top: -0.4em;
+	height: 0;
+}
+</style>
+<div id=background-moon class=decor>🌔︎</div>
+<p>The background moon here would ideally be an SVG (and one generated to match the current moon) since it shows as a giant moon emoji on phones and that's a weird background. I thought once about the Cryptic Command symbol from MTG, but decided against putting a symbol with fourfold rotational question marks on the front page.
-- 
cgit