diff options
| -rw-r--r-- | src/css-experiments.html | 29 |
1 files changed, 22 insertions, 7 deletions
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. |