Create April Fools Live Laugh Love module

2026-08-02 22:05:47 -05:00
commit 2fc7d10cc9
3 changed files with 239 additions and 0 deletions
@@ -0,0 +1,151 @@
+.MMM-LiveLaughLove .lll-overlay {
+	--lll-ink: rgba(238, 238, 238, 0.88);
+	position: fixed;
+	inset: 0;
+	overflow: hidden;
+	background:
+		radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.035), transparent 32%),
+		#000;
+	color: var(--lll-ink);
+	text-align: center;
+}
+
+.MMM-LiveLaughLove .lll-hidden {
+	display: none;
+}
+
+.MMM-LiveLaughLove .lll-wall-texture {
+	position: absolute;
+	inset: 0;
+	opacity: 0.12;
+	background-image:
+		repeating-linear-gradient(2deg, transparent 0 7px, rgba(255, 255, 255, 0.04) 8px),
+		repeating-linear-gradient(91deg, transparent 0 19px, rgba(255, 255, 255, 0.03) 20px);
+}
+
+.MMM-LiveLaughLove .lll-words {
+	position: absolute;
+	top: 46%;
+	left: 50%;
+	width: 94vw;
+	transform: translate(-50%, -50%) rotate(-2deg);
+	font-family: "URW Chancery L", "Brush Script MT", "Segoe Script", cursive;
+	font-size: clamp(5rem, 12vw, 14rem);
+	font-weight: 700;
+	line-height: 0.9;
+	letter-spacing: -0.055em;
+	text-shadow: 0 0 1px rgba(255, 255, 255, 0.35);
+}
+
+.MMM-LiveLaughLove .lll-words span {
+	display: inline-block;
+}
+
+.MMM-LiveLaughLove .lll-live {
+	transform: rotate(-4deg) translateY(-0.08em);
+}
+
+.MMM-LiveLaughLove .lll-laugh {
+	transform: rotate(2deg) scale(1.08);
+}
+
+.MMM-LiveLaughLove .lll-love {
+	transform: rotate(-2deg) translateY(0.05em);
+}
+
+.MMM-LiveLaughLove .lll-separator {
+	margin: 0 0.08em;
+	font-family: Georgia, serif;
+	font-size: 0.42em;
+	vertical-align: 0.28em;
+}
+
+.MMM-LiveLaughLove .lll-ornament {
+	position: absolute;
+	left: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.08em;
+	transform: translateX(-50%);
+	font-family: Georgia, serif;
+	font-size: clamp(5rem, 9vw, 10rem);
+	line-height: 1;
+	opacity: 0.62;
+}
+
+.MMM-LiveLaughLove .lll-ornament-top {
+	top: 16%;
+}
+
+.MMM-LiveLaughLove .lll-ornament-bottom {
+	bottom: 13%;
+	font-size: clamp(6rem, 11vw, 12rem);
+}
+
+.MMM-LiveLaughLove .lll-wing {
+	display: inline-block;
+}
+
+.MMM-LiveLaughLove .lll-wing-left {
+	transform: rotate(18deg) scaleX(-1);
+}
+
+.MMM-LiveLaughLove .lll-wing-right {
+	transform: rotate(-18deg);
+}
+
+.MMM-LiveLaughLove .lll-heart {
+	display: inline-block;
+	font-size: 0.72em;
+	transform: translateY(-0.08em);
+}
+
+.MMM-LiveLaughLove .lll-accent {
+	position: absolute;
+	font-family: Georgia, serif;
+	line-height: 1;
+	opacity: 0.4;
+}
+
+.MMM-LiveLaughLove .lll-accent-one {
+	top: 31%;
+	left: 8%;
+	font-size: clamp(2.8rem, 5vw, 5.5rem);
+	transform: rotate(-28deg);
+}
+
+.MMM-LiveLaughLove .lll-accent-two {
+	top: 34%;
+	right: 7%;
+	font-size: clamp(2rem, 3.5vw, 4rem);
+	transform: rotate(34deg);
+}
+
+.MMM-LiveLaughLove .lll-accent-three {
+	bottom: 29%;
+	right: 9%;
+	font-size: clamp(3rem, 5.5vw, 6rem);
+	transform: rotate(22deg) scaleX(-1);
+}
+
+.MMM-LiveLaughLove .lll-accent-four {
+	bottom: 32%;
+	left: 7%;
+	font-size: clamp(2.2rem, 4vw, 4.5rem);
+	transform: rotate(-36deg) scaleX(-1);
+}
+
+.MMM-LiveLaughLove .lll-accent-five {
+	top: 10%;
+	right: 18%;
+	font-size: clamp(1.8rem, 3vw, 3.5rem);
+	transform: rotate(14deg);
+}
+
+.MMM-LiveLaughLove .lll-accent-six {
+	bottom: 8%;
+	left: 18%;
+	font-size: clamp(1.6rem, 2.8vw, 3rem);
+	transform: rotate(-12deg);
+}