diff --git a/vaporwave/index.html b/vaporwave/index.html index 6bc9821..f62bc9a 100644 --- a/vaporwave/index.html +++ b/vaporwave/index.html @@ -7,7 +7,7 @@ -
+
@@ -39,7 +39,7 @@
-
+
@@ -47,11 +47,13 @@
-
-
+
+
+
+
-
+
diff --git a/vaporwave/landscape.css b/vaporwave/landscape.css index 86db787..7bb0d98 100644 --- a/vaporwave/landscape.css +++ b/vaporwave/landscape.css @@ -1,25 +1,30 @@ +html, body { + height: 100%; +} + body { margin: 0; padding: 0; - background: #1a001a; display: flex; - justify-content: space-around; + align-items: center; + justify-content: center; + background: #1a001a; } -div.container { +div.landscape { position: absolute; - display: block; width: 100%; height: 100%; -/* margin: 80px; */ + max-width: 1920px; + max-height: 1080px; + min-width: 800px; + min-height: 600px; overflow: hidden; -/* border: 2px solid magenta; */ - box-shadow: 0px 0px 30px #660066; */ + box-shadow: 0px 0px 30px #660066; } div.sun { position: absolute; - display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 335px, @@ -172,17 +177,24 @@ div.grid { position: absolute; height: 450px; width: 200%; + background: linear-gradient(#222, black); + transform: translate(-25%, 370px) perspective(220px) rotateX(51deg); +} + +div.grid > .lines { + position: absolute; + 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); background-size: 100% 40px, 40px 100%; - transform: translate(-25%, 365px) perspective(220px) rotateX(51deg); } -div.grid.blur { +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(#111, black); - background-size: 100% 40px, 40px 100%, 100% 100%; - filter: blur(5px); + linear-gradient(to right, #da22ca 1px, transparent 1px 39px, #da22ca 39px); + background-size: 100% 40px, 40px 100%; + filter: blur(4px); } div.scanlines {