From 4732b5f60bd7fee0945bc803f180dc227595a973 Mon Sep 17 00:00:00 2001 From: gamerdonkey Date: Fri, 19 Feb 2021 23:37:54 +0000 Subject: [PATCH] Rendering the stars in a way browsers seem to hate less. --- vaporwave/index.html | 65 +++++++++++++++++++++++++++++++++-- vaporwave/landscape.css | 75 +++++++---------------------------------- 2 files changed, 76 insertions(+), 64 deletions(-) diff --git a/vaporwave/index.html b/vaporwave/index.html index f62bc9a..b72a4ef 100644 --- a/vaporwave/index.html +++ b/vaporwave/index.html @@ -9,7 +9,68 @@
-
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -18,6 +79,7 @@
+
@@ -51,7 +113,6 @@
-
diff --git a/vaporwave/landscape.css b/vaporwave/landscape.css index 7bb0d98..80ec029 100644 --- a/vaporwave/landscape.css +++ b/vaporwave/landscape.css @@ -59,66 +59,17 @@ div.stars { position: absolute; width: 100%; height: 100%; - background: radial-gradient(circle at 80% 233px, #705d79 1px, transparent 2px), -radial-gradient(circle at 97% 77px, #705d79 1px, transparent 2px), -radial-gradient(circle at 85% 5px, #705d79 1px, transparent 1px), -radial-gradient(circle at 84% 104px, #705d79 1px, transparent 1px), -radial-gradient(circle at 14% 83px, #705d79 1px, transparent 1px), -radial-gradient(circle at 88% 20px, #705d79 1px, transparent 2px), -radial-gradient(circle at 51% 17px, #705d79 1px, transparent 1px), -radial-gradient(circle at 21% 178px, #705d79 1px, transparent 2px), -radial-gradient(circle at 72% 212px, #705d79 1px, transparent 1px), -radial-gradient(circle at 19% 94px, #705d79 1px, transparent 2px), -radial-gradient(circle at 22% 112px, #705d79 1px, transparent 2px), -radial-gradient(circle at 21% 203px, #705d79 1px, transparent 2px), -radial-gradient(circle at 9% 37px, #705d79 1px, transparent 1px), -radial-gradient(circle at 88% 95px, #705d79 1px, transparent 2px), -radial-gradient(circle at 8% 235px, #705d79 1px, transparent 1px), -radial-gradient(circle at 18% 78px, #705d79 1px, transparent 1px), -radial-gradient(circle at 5% 83px, #705d79 1px, transparent 1px), -radial-gradient(circle at 34% 162px, #705d79 1px, transparent 2px), -radial-gradient(circle at 82% 19px, #705d79 1px, transparent 2px), -radial-gradient(circle at 18% 237px, #705d79 1px, transparent 1px), -radial-gradient(circle at 74% 23px, #705d79 1px, transparent 2px), -radial-gradient(circle at 33% 159px, #705d79 1px, transparent 1px), -radial-gradient(circle at 46% 120px, #705d79 1px, transparent 2px), -radial-gradient(circle at 25% 254px, #705d79 1px, transparent 1px), -radial-gradient(circle at 76% 256px, #705d79 1px, transparent 1px), -radial-gradient(circle at 90% 183px, #705d79 1px, transparent 1px), -radial-gradient(circle at 20% 268px, #705d79 1px, transparent 1px), -radial-gradient(circle at 47% 126px, #705d79 1px, transparent 2px), -radial-gradient(circle at 76% 19px, #705d79 1px, transparent 1px), -radial-gradient(circle at 86% 125px, #705d79 1px, transparent 2px), -radial-gradient(circle at 40% 142px, #705d79 1px, transparent 2px), -radial-gradient(circle at 92% 236px, #705d79 1px, transparent 2px), -radial-gradient(circle at 7% 320px, #705d79 1px, transparent 1px), -radial-gradient(circle at 23% 44px, #705d79 1px, transparent 1px), -radial-gradient(circle at 97% 355px, #705d79 1px, transparent 1px), -radial-gradient(circle at 17% 26px, #705d79 1px, transparent 1px), -radial-gradient(circle at 51% 51px, #705d79 1px, transparent 2px), -radial-gradient(circle at 86% 274px, #705d79 1px, transparent 1px), -radial-gradient(circle at 37% 66px, #705d79 1px, transparent 1px), -radial-gradient(circle at 5% 245px, #705d79 1px, transparent 1px), -radial-gradient(circle at 44% 121px, #705d79 1px, transparent 2px), -radial-gradient(circle at 22% 156px, #705d79 1px, transparent 1px), -radial-gradient(circle at 43% 22px, #705d79 1px, transparent 2px), -radial-gradient(circle at 95% 83px, #705d79 1px, transparent 1px), -radial-gradient(circle at 90% 104px, #705d79 1px, transparent 2px), -radial-gradient(circle at 33% 97px, #705d79 1px, transparent 1px), -radial-gradient(circle at 12% 208px, #705d79 1px, transparent 1px), -radial-gradient(circle at 10% 90px, #705d79 1px, transparent 1px), -radial-gradient(circle at 15% 229px, #705d79 1px, transparent 1px), -radial-gradient(circle at 70% 117px, #705d79 1px, transparent 1px), -radial-gradient(circle at 52% 121px, #705d79 1px, transparent 1px), -radial-gradient(circle at 69% 102px, #705d79 1px, transparent 2px), -radial-gradient(circle at 59% 66px, #705d79 1px, transparent 2px), -radial-gradient(circle at 29% 74px, #705d79 1px, transparent 2px), -radial-gradient(circle at 26% 65px, #705d79 1px, transparent 1px), -radial-gradient(circle at 69% 204px, #705d79 1px, transparent 2px), -radial-gradient(circle at 80% 195px, #705d79 1px, transparent 2px), -radial-gradient(circle at 32% 151px, #705d79 1px, transparent 2px), -radial-gradient(circle at 96% 275px, #705d79 1px, transparent 1px), -radial-gradient(circle at 7% 160px, #705d79 1px, transparent 1px); +} + +span.star { + position: absolute; + height: 4px; + width: 4px; + background: radial-gradient(circle, #705d79 1px, transparent 1px); +} + +span.star.large { + background: radial-gradient(circle, #705d79 1px, transparent 2px); } div.mountain-container { @@ -186,13 +137,13 @@ div.grid > .lines { width: 100%; height: 100%; background: linear-gradient(#e765dc 1px, transparent 1px 39px, #e765dc 39px), - linear-gradient(to right, #e765dc 1px, transparent 1px 39px, #e765dc 39px); + linear-gradient(to right, #e765dc 1px, transparent 1px 39px, #e765dc 39px); background-size: 100% 40px, 40px 100%; } div.grid > .lines.glow { background: linear-gradient(#da22ca 1px, transparent 1px 39px, #da22ca 39px), - linear-gradient(to right, #da22ca 1px, transparent 1px 39px, #da22ca 39px); + linear-gradient(to right, #da22ca 1px, transparent 1px 39px, #da22ca 39px); background-size: 100% 40px, 40px 100%; filter: blur(4px); }