integrate parallax into index and tidy up

src/pages/index.astro

@@ -3,11 +3,242 @@ import Layout from "@layouts/BaseLayout.astro";
 ---
 
 <Layout>
-  <title slot="head">Home</title>
+  <title slot="head">Parallax Demo</title>
+  <style>
+    :root {
+      --scroll-multiplier: 5;
+      --theme: winternight;
+    }
+
+    .parallax-theme-winternight {
+      --layer-0-speed: 6250s;
+      --layer-1-speed: 1250s;
+      --layer-2-speed: 500s;
+      --layer-3-speed: 250s;
+      --layer-4-speed: 80s;
+      --layer-0-url: url("/parallax/winternight/0-sky.png");
+      --layer-1-url: url("/parallax/winternight/1-backmountain.png");
+      --layer-2-url: url("/parallax/winternight/2-midmountain.png");
+      --layer-3-url: url("/parallax/winternight/3-midforest.png");
+      --layer-4-url: url("/parallax/winternight/4-frontfloor.png");
+      --parallax-width: calc(3800px * 10);
+    }
+
+    .parallax-theme-sunnyvale-forest {
+      --layer-0-speed: 2000s;
+      --layer-1-speed: 400s;
+      --layer-2-speed: 50s;
+      --layer-0-url: url("/parallax/sunnyvale-forest/0-clouds.png");
+      --layer-1-url: url("/parallax/sunnyvale-forest/1-mountains.png");
+      --layer-2-url: url("/parallax/sunnyvale-forest/2-trees.png");
+      --parallax-width: calc(160px * 200);
+    }
+
+    .parallax-theme-city-destroyed {
+      --layer-0-speed: 1000s;
+      --layer-1-speed: 275s;
+      --layer-2-speed: 250s;
+      --layer-3-speed: 250s;
+      --layer-4-speed: 250s;
+      --layer-5-speed: 100s;
+      --layer-0-url: url("/parallax/city-destroyed/0-sky.png");
+      --layer-1-url: url("/parallax/city-destroyed/1-buildingssmoke.png");
+      --layer-2-url: url("/parallax/city-destroyed/2-water.png");
+      --layer-3-url: url("/parallax/city-destroyed/3-buildings.png");
+      --layer-4-url: url("/parallax/city-destroyed/4-buildingreflection.png");
+      --layer-5-url: url("/parallax/city-destroyed/5-frontsmoke.png");
+      --parallax-width: calc(3800px * 10);
+    }
+
+    .parallax-theme-city-destroyed .layer.layer-1,
+    .parallax-theme-city-destroyed .layer.layer-3,
+    .parallax-theme-city-destroyed .layer.layer-4 {
+      background-repeat: repeat-x;
+    }
+
+    .parallax-theme-city-destroyed .layer.layer-4 {
+      background-position-y: 4rem;
+    }
+
+    .parallax-container {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+      z-index: 0;
+    }
+
+    .layer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: var(--parallax-width);
+      background-repeat: round;
+      background-position: bottom;
+      background-size: contain;
+    }
+
+    .layer-0 {
+      background-image: var(--layer-0-url);
+      z-index: 1;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-0-speed))
+        linear infinite;
+    }
+
+    .layer-1 {
+      background-image: var(--layer-1-url);
+      z-index: 2;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-1-speed))
+        linear infinite;
+    }
+
+    .layer-2 {
+      background-image: var(--layer-2-url);
+      z-index: 3;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-2-speed))
+        linear infinite;
+    }
+
+    .layer-3 {
+      background-image: var(--layer-3-url);
+      z-index: 4;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-3-speed))
+        linear infinite;
+    }
+
+    .layer-4 {
+      background-image: var(--layer-4-url);
+      z-index: 5;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-4-speed))
+        linear infinite;
+    }
+
+    .layer-5 {
+      background-image: var(--layer-5-url);
+      z-index: 6;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-5-speed))
+        linear infinite;
+    }
+
+    @keyframes scroll {
+      0% {
+        transform: translateX(0);
+      }
+      100% {
+        transform: translateX(-50%);
+      }
+    }
+
+    .desktop-monitor {
+      margin: 10px auto 0px auto;
+      width: 330px;
+      height: 230px;
+      border: 4px solid #34495e;
+      border-radius: 15px;
+    }
+
+    .desktop-audio {
+      border: 2px solid #34495e;
+      width: 10px;
+      height: 8px;
+      border-radius: 10px;
+      margin: 6px auto 0px auto;
+    }
+
+    .desktop-screen {
+      margin: 5px auto 0px auto;
+      border: 3px solid #34495e;
+      border-radius: 5px;
+      width: 305px;
+      height: 195px;
+      background-color: black;
+      object-fit: contain;
+      position: relative;
+    }
+
+    .desktop-screen-text {
+      position: absolute;
+      top: 0;
+      right: 0.25em;
+    }
+
+    .desktop-keyboard {
+      width: 360px;
+      height: 20px;
+      border: 4px solid #34495e;
+      border-radius: 2px;
+      margin: -4px auto 2px auto;
+    }
+
+    .desktop-keyboard-detail {
+      border: 1px solid #34495e;
+      width: 50px;
+      height: 8px;
+      border-radius: 10px;
+      margin: 0px auto 0px auto;
+    }
+
+    .desktop-keyboard-base {
+      width: 360px;
+      height: 8px;
+      background-color: #34495e;
+      border-radius: 2px;
+      margin: -2px auto 4px auto;
+      clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
+    }
+    .sided {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    .sided > div {
+      flex: 1;
+    }
+  </style>
   <Fragment slot="main">
-    <article id="hero">
+    <article
-      <h2>Hi, I'm badblocks!</h2>
+      id="hero"
-      <p>I ♥ building websites and making things!</p>
+      x-data="{
+        themes: [
+          { value: 'winternight', label: 'Winternight' },
+          { value: 'sunnyvale-forest', label: 'SunnyVale' },
+          { value: 'city-destroyed', label: 'Apocalypse' },
+        ],
+        index: 0,
+        get theme() { return this.themes[this.index].value },
+        next() { this.index = (this.index + 1) % this.themes.length },
+      }"
+    >
+      <div class="sided">
+        <div>
+          <h2>Hi, I'm badblocks!</h2>
+          <p>I ♥ building websites and making things!</p>
+        </div><div class="desktop">
+          <div class="desktop-monitor">
+            <div class="desktop-audio"></div>
+            <div class="desktop-screen" @click="next()">
+              <div
+                class="parallax-container"
+                :class="'parallax-theme-' + theme"
+              >
+                <div class="layer layer-0"></div>
+                <div class="layer layer-1"></div>
+                <div class="layer layer-2"></div>
+                <div class="layer layer-3"></div>
+                <div class="layer layer-4"></div>
+                <div class="layer layer-5"></div>
+              </div>
+              <div class="desktop-screen-text" x-text="themes[index].label">
+              </div>
+            </div>
+          </div>
+          <div class="desktop-keyboard-base"></div>
+          <div class="desktop-keyboard">
+            <div class="desktop-keyboard-detail"></div>
+          </div>
+        </div>
+      </div>
     </article>
   </Fragment>
 </Layout>

src/pages/parallax.astro

@@ -1,152 +0,0 @@
----
-import Layout from "@layouts/BaseLayout.astro";
----
-
-<Layout>
-  <title slot="head">Parallax Demo</title>
-  <style>
-    :root {
-      --scroll-multiplier: 5;
-      --theme: winternight;
-    }
-
-    .parallax-theme-winternight {
-      --layer-0-speed: 6250s;
-      --layer-1-speed: 1250s;
-      --layer-2-speed: 500s;
-      --layer-3-speed: 250s;
-      --layer-4-speed: 80s;
-      --layer-0-url: url("/parallax/winternight/0-sky.png");
-      --layer-1-url: url("/parallax/winternight/1-backmountain.png");
-      --layer-2-url: url("/parallax/winternight/2-midmountain.png");
-      --layer-3-url: url("/parallax/winternight/3-midforest.png");
-      --layer-4-url: url("/parallax/winternight/4-frontfloor.png");
-      --parallax-width: calc(3800px * 10);
-    }
-
-    .parallax-theme-sunnyvale-forest {
-      --layer-0-speed: 2000s;
-      --layer-1-speed: 400s;
-      --layer-2-speed: 50s;
-      --layer-0-url: url("/parallax/sunnyvale-forest/0-clouds.png");
-      --layer-1-url: url("/parallax/sunnyvale-forest/1-mountains.png");
-      --layer-2-url: url("/parallax/sunnyvale-forest/2-trees.png");
-      --parallax-width: calc(160px * 200);
-    }
-
-    .parallax-theme-city-destroyed {
-      --layer-0-speed: 1000s;
-      --layer-1-speed: 275s;
-      --layer-2-speed: 250s;
-      --layer-3-speed: 250s;
-      --layer-4-speed: 250s;
-      --layer-5-speed: 100s;
-      --layer-0-url: url("/parallax/city-destroyed/0-sky.png");
-      --layer-1-url: url("/parallax/city-destroyed/1-buildingssmoke.png");
-      --layer-2-url: url("/parallax/city-destroyed/2-water.png");
-      --layer-3-url: url("/parallax/city-destroyed/3-buildings.png");
-      --layer-4-url: url("/parallax/city-destroyed/4-buildingreflection.png");
-      --layer-5-url: url("/parallax/city-destroyed/5-frontsmoke.png");
-      --parallax-width: calc(3800px * 10);
-    }
-
-    .parallax-theme-city-destroyed .layer.layer-1,
-    .parallax-theme-city-destroyed .layer.layer-3,
-    .parallax-theme-city-destroyed .layer.layer-4 {
-      background-repeat: repeat-x;
-    }
-
-    .parallax-theme-city-destroyed .layer.layer-4 {
-      background-position-y: 16rem;
-    }
-
-    .parallax-container {
-      position: relative;
-      height: 30rem;
-      width: 100%;
-      overflow: hidden;
-      z-index: 0;
-    }
-
-    .layer {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: var(--parallax-width);
-      background-repeat: round;
-      background-position: bottom;
-      background-size: contain;
-    }
-
-    .layer-0 {
-      background-image: var(--layer-0-url);
-      z-index: 1;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-0-speed))
-        linear infinite;
-    }
-
-    .layer-1 {
-      background-image: var(--layer-1-url);
-      z-index: 2;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-1-speed))
-        linear infinite;
-    }
-
-    .layer-2 {
-      background-image: var(--layer-2-url);
-      z-index: 3;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-2-speed))
-        linear infinite;
-    }
-
-    .layer-3 {
-      background-image: var(--layer-3-url);
-      z-index: 4;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-3-speed))
-        linear infinite;
-    }
-
-    .layer-4 {
-      background-image: var(--layer-4-url);
-      z-index: 5;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-4-speed))
-        linear infinite;
-    }
-
-    .layer-5 {
-      background-image: var(--layer-5-url);
-      z-index: 6;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-5-speed))
-        linear infinite;
-    }
-
-    @keyframes scroll {
-      0% {
-        transform: translateX(0);
-      }
-      100% {
-        transform: translateX(-50%);
-      }
-    }
-  </style>
-  <Fragment slot="main">
-    <article id="hero" x-data="{ theme: 'winternight'}">
-      <div class="parallax-container" :class="'parallax-theme-' + theme">
-        <div class="layer layer-0"></div>
-        <div class="layer layer-1"></div>
-        <div class="layer layer-2"></div>
-        <div class="layer layer-3"></div>
-        <div class="layer layer-4"></div>
-        <div class="layer layer-5"></div>
-      </div>
-      <h2>Parallax Demo</h2>
-      <p>Pardon the dust!</p>
-      <select id="theme" x-model="theme">
-        <option value="winternight">Winternight</option>
-        <option value="sunnyvale-forest">SunnyVale</option>
-        <option value="city-destroyed">Apocalypse</option>
-      </select>
-    </article>
-  </Fragment>
-</Layout>