Ryuuart/issue164 (#168)

ryuuart · Aug 11, 2023 · 968ff19 · 968ff19
1 parent a205bac
commit 968ff19
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 108 deletions.
diff --git a/web/src/components/home/Footer.astro b/web/src/components/home/Footer.astro
@@ -0,0 +1,28 @@
+---
+import Block from "../../layouts/home/Block.astro";
+---
+
+<Block>
+  <footer>
+    <small>
+      Copyright &copy; 2023 Long Nguyen.
+      <br />
+      All rights reserved.
+    </small>
+  </footer>
+</Block>
+
+<style>
+  footer {
+    grid-area: 1 / 2 / -1 / -1;
+
+    font-size: 0.75rem;
+
+    margin-left: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  small {
+    font-size: 0.75rem;
+  }
+</style>
diff --git a/web/src/components/home/HR.astro b/web/src/components/home/HR.astro
@@ -0,0 +1,19 @@
+---
+const { position, semantic = true } = Astro.props;
+---
+
+{semantic ? <hr class="hr" /> : <div class="hr" />}
+
+<style>
+  .hr {
+    grid-column: 1 / -1;
+
+    border: none;
+    border-top: 1px solid var(--color-fg);
+
+    width: 100%;
+    margin: 0;
+
+    overflow: hidden;
+  }
+</style>
diff --git a/web/src/components/home/Spacer.astro b/web/src/components/home/Spacer.astro
@@ -0,0 +1,16 @@
+---
+import Block from "../../layouts/home/Block.astro";
+
+const { size } = Astro.props;
+---
+
+<Block>
+  <div class="spacer"></div>
+</Block>
+
+<style define:vars={{ spacerSize: size }}>
+  .spacer {
+    grid-area: 1 / 1 / -1 / -1;
+    min-height: var(--spacerSize);
+  }
+</style>
diff --git a/web/src/components/home/hero/Hero.astro b/web/src/components/home/hero/Hero.astro
@@ -28,9 +28,6 @@ import Primordia from "./Primordia.astro";
   }
 
   section.hero {
-    /* margin-top: 4rem; */
-
-    grid-row: hero-start / hero-end;
     grid-template-rows: auto auto auto auto;
   }
 

diff --git a/web/src/components/home/poem/Poem.astro b/web/src/components/home/poem/Poem.astro
@@ -16,8 +16,7 @@ import Section from "../../../layouts/home/Section.astro";
 
 <style>
   section.poem {
-    grid-row: poem-start / poem-end;
-    grid-template-rows: 1fr 16rem;
+    grid-template-rows: 1fr auto;
   }
 
   .text {
@@ -39,6 +38,7 @@ import Section from "../../../layouts/home/Section.astro";
 
     margin: 1rem;
 
+    min-height: 16rem;
     max-width: 16rem;
 
     background-color: blue;

diff --git a/web/src/components/home/realms/Realms.astro b/web/src/components/home/realms/Realms.astro
@@ -21,19 +21,10 @@ import RealmItem from "./RealmItem.astro";
       ))
     }
   </ul>
-  <footer>
-    <small>
-      Copyright &copy; 2023 Long Nguyen.
-      <br />
-      All rights reserved.
-    </small>
-  </footer>
 </Section>
 
 <style>
   section.realms {
-    /* margin-top: 1rem; */
-    grid-row: realms-start / realms-end;
     grid-template-rows: auto auto auto;
   }
 
@@ -82,17 +73,4 @@ import RealmItem from "./RealmItem.astro";
 
     font-size: 0.75rem;
   }
-
-  footer {
-    grid-area: -2 / 2 / span 1 / 6;
-
-    font-size: 0.75rem;
-
-    margin-left: 1rem;
-    margin-bottom: 2rem;
-  }
-
-  small {
-    font-size: 0.75rem;
-  }
 </style>
diff --git a/web/src/layouts/Layout.astro b/web/src/layouts/Layout.astro
@@ -63,7 +63,4 @@ const { title } = Astro.props;
     font-style: italic;
     font-weight: 800;
   }
-
-  p {
-  }
 </style>
diff --git a/web/src/layouts/home/Block.astro b/web/src/layouts/home/Block.astro
@@ -0,0 +1,27 @@
+---
+const { class: className } = Astro.props;
+---
+
+<div class:list={[className, "container", "block"]}>
+  <div class="vr behind-1"></div>
+  <slot />
+</div>
+
+<style>
+  .container {
+    max-width: 390px;
+
+    grid-column: 2 / span 1;
+  }
+
+  :global(.block) {
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  :global(.vr) {
+    border-left: 1px solid var(--color-fg);
+    grid-area: 1 / 2 / -1 / span 1;
+  }
+</style>
diff --git a/web/src/layouts/home/Section.astro b/web/src/layouts/home/Section.astro
@@ -1,31 +1,17 @@
 ---
-const { class: className, html=true } = Astro.props;
----
-{
-(html) ? 
-<section class={className}>
-  <div class="vr behind-1"></div>
-  <slot />
-</section>
-: 
-<div class={`section ${className}`}>
-  <div class="vr behind-1"></div>
-  <slot />
-</div>
-}
-
-<style>
-  section, .section {
-    max-width: 390px;
+import Block from "./Block.astro";
 
-    grid-column: 2 / span 1;
+const { class: className } = Astro.props;
+---
 
-    display: grid;
-    gap: 0.5rem;
-    grid-template-columns: repeat(5, 1fr);
-  }
+<Block class:list={[className]}>
+  <section class="block">
+    <slot />
+  </section>
+</Block>
 
-  .vr {
-    grid-area: 1 / 2 / -1 / span 1;
+<style>
+  section {
+    grid-area: 1 / 1 / -1 / -1;
   }
 </style>
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
@@ -1,65 +1,32 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Section from "../layouts/home/Section.astro";
+import Block from "../layouts/home/Block.astro";
 import HeroSection from "../components/home/hero/Hero.astro";
 import PoemSection from "../components/home/poem/Poem.astro";
 import RealmsSection from "../components/home/realms/Realms.astro";
+import Footer from "../components/home/Footer.astro";
+import HR from "../components/home/HR.astro";
+import Spacer from "../components/home/Spacer.astro";
 ---
 
 <Layout title="manawave">
-  <main class="box-line-left">
-    <Section html={false} class="hero-spacer"/>
-    <div class="hr hr-hero"></div>
+  <main>
+    <Spacer size="4rem" />
+    <HR semantic={false} />
     <HeroSection />
-    <Section html={false} class="poem-spacer"/>
-    <hr class="hr-poem"/>
+    <Spacer size="7rem" />
+    <HR />
     <PoemSection />
     <RealmsSection />
+    <Footer />
   </main>
 </Layout>
 
 <style>
   main {
-    grid-column-start: 2;
-
     display: grid;
     grid-template-columns: 1fr auto 1fr;
-    grid-template-rows:
-      4rem
-      auto [hero-start]
-      auto [hero-end]
-      7rem [poem-spacer poem-start]
-      auto
-      auto [poem-end realms-start]
-      auto [realms-end];
-  }
-
-  hr, .hr {
-    grid-column: 1 / -1;
-
-    border: none;
-    border-top: 1px solid var(--color-fg);
-
-    width: 100%;
-    margin: 0;
-
-    overflow: hidden;
-  }
-
-  .hero-spacer {
-    grid-row: 1 / hero-start;
-  }
-
-  .poem-spacer: {
-    grid-row: poem-spacer / poem-start;
-  }
-
-  .hr-hero {
-    grid-row: 2 / hero-start;
-  }
-
-  .hr-poem {
-    grid-row: poem-start / span 1;
+    grid-auto-rows: auto;
   }
 </style>
 
@@ -69,20 +36,11 @@ import RealmsSection from "../components/home/realms/Realms.astro";
     transform: rotate(180deg);
   }
 
-  .separator--rinf_c2 {
-    grid-row: hero-start / span realms-end 2;
-    grid-column: 2 / span 1;
-  }
-
   .behind-1 {
     z-index: -1;
   }
 
   .front-1 {
     z-index: 1;
   }
-
-  .vr {
-    border-left: 1px solid var(--color-fg);
-  }
 </style>