Merge pull request #152 from ryuuart:ryuuart/issue151

Ryuuart/issue151

web/src/components/home/hero/Header.astro

@@ -0,0 +1,28 @@
+<header>
+  <p class="author">ryuuart::</p>
+  <div class="title">
+    <h1>manawave</h1>
+    <p class="tagline">ambient::infinity</p>
+  </div>
+</header>
+
+<style>
+  header {
+    grid-area: 1 / 2 / 2 / 6;
+
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+
+  header * {
+    margin: 0;
+  }
+
+  header > .author {
+    margin-right: 0.5rem;
+  }
+
+  header h1 {
+    text-transform: uppercase;
+  }
+</style>

web/src/components/home/hero/Hero.astro

@@ -0,0 +1,37 @@
+---
+import Section from "../../../layouts/home/Section.astro";
+import Header from "./Header.astro";
+import Primordia from "./Primordia.astro";
+---
+
+<Section class="hero">
+  <Header />
+  <div class="cta-desc">
+    <p>
+      MANAWAVE is a controllable, configurable, and omnidirectional marquee
+      defined with only HTML & CSS. It has zero dependencies and is built on
+      vanilla JavaScript.
+    </p>
+  </div>
+  <div class="cta">
+    <div><a>Get Started</a></div>
+    <div><a>5 Realms</a></div>
+  </div>
+  <Primordia />
+</Section>
+
+<style>
+  section.hero {
+    grid-row: hero-start / hero-end;
+
+    grid-template-rows: auto 1fr auto auto;
+  }
+
+  .cta-desc {
+    grid-area: 3 / 2 / 4 / 5;
+  }
+
+  .cta {
+    grid-area: 4 / 2/ 5 / 5;
+  }
+</style>

web/src/components/home/hero/Primordia.astro

@@ -0,0 +1,14 @@
+<div class="primordia sideways-lr">
+  <div>Primordia</div>
+  <div>08.10.23</div>
+</div>
+
+<style>
+  .primordia {
+    grid-area: 3 / 1 / 4 / 2;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+  }
+</style>

web/src/components/home/poem/Poem.astro

@@ -0,0 +1,32 @@
+---
+import Section from "../../../layouts/home/Section.astro";
+---
+
+<Section class="poem">
+  <div class="text">
+    <p>
+      Within manawave's embrace,<br />
+      A realm seer's gaze takes flight,<br />
+      Five realms unveiled, they trace,<br />
+      Seeking truths in cosmic light.
+    </p>
+  </div>
+  <div class="placeholder-img"></div>
+</Section>
+
+<style>
+  section.poem {
+    grid-row: poem-start / poem-end;
+    grid-template-rows: 1fr 2fr;
+  }
+
+  .text {
+    grid-area: 1 / 2 / 2 / 6;
+  }
+
+  .placeholder-img {
+    grid-area: 2 / 2 / 3 / 6;
+
+    background-color: blue;
+  }
+</style>

web/src/components/home/realms/RealmItem.astro

@@ -0,0 +1,33 @@
+---
+const { title, tagline, url } = Astro.props;
+---
+
+<div class="container">
+  <div class="aura"></div>
+  <div class="content">
+    <div>
+      <a href={url}>{title}</a>
+    </div>
+    <p>{tagline}</p>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .aura {
+    flex: 0;
+    flex-basis: 2rem;
+
+    height: 2rem;
+
+    background: white;
+  }
+
+  .content {
+    flex-grow: 1;
+  }
+</style>

web/src/components/home/realms/Realms.astro

@@ -0,0 +1,52 @@
+---
+import Section from "../../../layouts/home/Section.astro";
+import realmsData from "./realms.json";
+import RealmItem from "./RealmItem.astro";
+---
+
+<Section class="realms">
+  <div class="name">
+    <p>ryuuart::</p>
+  </div>
+  <header>
+    <h2>5 Realms</h2>
+    <p>visions&nbsp;•&nbsp;dreams&nbsp;•&nbsp;self</p>
+  </header>
+  <ul>
+    {
+      realmsData.map((i) => (
+        <li>
+          <RealmItem title={i.title} tagline={i.tagline} url={i.url} />
+        </li>
+      ))
+    }
+  </ul>
+</Section>
+
+<style>
+  section.realms {
+    grid-row: realms-start / realms-end;
+    grid-template-rows: auto auto;
+  }
+
+  .name {
+    grid-column: 1 / 1 / 2 / 2;
+
+    display: flex;
+    justify-content: end;
+  }
+
+  header {
+    grid-area: 1 / 2 / 2 / 5;
+  }
+
+  ul {
+    grid-area: 2 / 2 / 3 / 6;
+
+    padding: 0;
+  }
+
+  li {
+    list-style: none;
+  }
+</style>

web/src/components/home/realms/realms.json

@@ -0,0 +1,27 @@
+[
+  {
+    "title": "Sebonzakura",
+    "tagline": "1000 cherry dream petals",
+    "url": "/sebonzakura"
+  },
+  {
+    "title": "hyperpink",
+    "tagline": "prima donna",
+    "url": "/sebonzakura"
+  },
+  {
+    "title": "Hero",
+    "tagline": "another self",
+    "url": "/sebonzakura"
+  },
+  {
+    "title": "#HYPERTRANCE",
+    "tagline": "infinite evolution —",
+    "url": "/sebonzakura"
+  },
+  {
+    "title": "flarewater",
+    "tagline": "elemental flavor",
+    "url": "/sebonzakura"
+  }
+]

web/src/layouts/Layout.astro

@@ -10,7 +10,7 @@ const { title } = Astro.props;
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
+    <meta name="description" content="ambient infinity" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
@@ -22,20 +22,19 @@ const { title } = Astro.props;
 </html>
 <style is:global>
   :root {
-    --accent: 124, 58, 237;
-    --accent-gradient: linear-gradient(
-      45deg,
-      rgb(var(--accent)),
-      #da62c4 30%,
-      white 60%
-    );
+    /* Colors */
+    --color-bg: black;
+    --color-fg: white;
   }
-  html {
-    font-family: system-ui, sans-serif;
-    background-color: #f6f6f6;
+
+  * {
+    box-sizing: border-box;
   }
-  code {
-    font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+
+  body {
+    background: var(--color-bg);
+    color: var(--color-fg);
+
+    margin: 0;
   }
 </style>

web/src/layouts/home/Section.astro

@@ -0,0 +1,17 @@
+---
+const { class: className } = Astro.props;
+---
+
+<section class={className}>
+  <slot />
+</section>
+
+<style>
+  section {
+    grid-column: 1 / 6;
+
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: repeat(5, 1fr);
+  }
+</style>