Merge pull request #163 from ryuuart/ryuuart/issue162

ryuuart · Aug 10, 2023 · 87e4cc8 · 87e4cc8
2 parents 562becc + f048ef4
commit 87e4cc8
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 47 deletions.
diff --git a/web/src/components/home/hero/Header.astro b/web/src/components/home/hero/Header.astro
@@ -12,6 +12,8 @@
 
     display: grid;
     grid-template-columns: auto auto;
+
+    margin-top: 2rem;
   }
 
   header * {

diff --git a/web/src/components/home/hero/Hero.astro b/web/src/components/home/hero/Hero.astro
@@ -28,10 +28,10 @@ import Primordia from "./Primordia.astro";
   }
 
   section.hero {
-    margin-top: 4rem;
+    /* margin-top: 4rem; */
 
     grid-row: hero-start / hero-end;
-    grid-template-rows: auto auto auto;
+    grid-template-rows: auto auto auto auto;
   }
 
   .spacer {

diff --git a/web/src/components/home/poem/Poem.astro b/web/src/components/home/poem/Poem.astro
@@ -16,8 +16,6 @@ import Section from "../../../layouts/home/Section.astro";
 
 <style>
   section.poem {
-    margin-top: 7rem;
-
     grid-row: poem-start / poem-end;
     grid-template-rows: 1fr 16rem;
   }
@@ -39,7 +37,6 @@ import Section from "../../../layouts/home/Section.astro";
     grid-area: 2 / 2 / 3 / 6;
 
     margin: 1rem;
-    margin-bottom: 0;
 
     max-width: 16rem;
 

diff --git a/web/src/components/home/realms/Realms.astro b/web/src/components/home/realms/Realms.astro
@@ -21,13 +21,20 @@ 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;
+    /* margin-top: 1rem; */
     grid-row: realms-start / realms-end;
-    grid-template-rows: auto auto;
+    grid-template-rows: auto auto auto;
   }
 
   .name {
@@ -74,4 +81,17 @@ 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/home/Section.astro b/web/src/layouts/home/Section.astro
@@ -1,17 +1,31 @@
 ---
-const { class: className } = Astro.props;
+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 {
-    grid-column: 1 / 6;
+  section, .section {
+    max-width: 390px;
+
+    grid-column: 2 / span 1;
 
     display: grid;
     gap: 0.5rem;
     grid-template-columns: repeat(5, 1fr);
   }
+
+  .vr {
+    grid-area: 1 / 2 / -1 / span 1;
+  }
 </style>
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
@@ -1,61 +1,65 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import Section from "../layouts/home/Section.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";
 ---
 
 <Layout title="manawave">
-  <div class="layout">
-    <main class="box-line-left">
-      <div class="separator--rinf_c2 vr front"></div>
-      <HeroSection />
-      <PoemSection />
-      <RealmsSection />
-      <footer>
-        <small>
-          Copyright &copy; 2023 Long Nguyen.
-          <br />
-          All rights reserved.
-        </small>
-      </footer>
-    </main>
-  </div>
+  <main class="box-line-left">
+    <Section html={false} class="hero-spacer"/>
+    <div class="hr hr-hero"></div>
+    <HeroSection />
+    <Section html={false} class="poem-spacer"/>
+    <hr class="hr-poem"/>
+    <PoemSection />
+    <RealmsSection />
+  </main>
 </Layout>
 
 <style>
-  .layout {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-  }
-
   main {
     grid-column-start: 2;
 
-    max-width: 390px;
-    margin: 0 auto;
-
     display: grid;
-    gap: 0.5rem;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: 1fr auto 1fr;
     grid-template-rows:
-      [hero-start]
-      auto [hero-end poem-start]
+      4rem
+      auto [hero-start]
+      auto [hero-end]
+      7rem [poem-spacer poem-start]
+      auto
       auto [poem-end realms-start]
-      auto [realms-end]
-      auto;
+      auto [realms-end];
   }
 
-  footer {
-    grid-area: realms-end / 2 / span 1 / 6;
+  hr, .hr {
+    grid-column: 1 / -1;
+
+    border: none;
+    border-top: 1px solid var(--color-fg);
 
-    font-size: 0.75rem;
+    width: 100%;
+    margin: 0;
+
+    overflow: hidden;
+  }
+
+  .hero-spacer {
+    grid-row: 1 / hero-start;
+  }
+
+  .poem-spacer: {
+    grid-row: poem-spacer / poem-start;
+  }
 
-    margin-left: 1rem;
+  .hr-hero {
+    grid-row: 2 / hero-start;
   }
 
-  small {
-    font-size: 0.75rem;
+  .hr-poem {
+    grid-row: poem-start / span 1;
   }
 </style>
 
@@ -70,7 +74,7 @@ import RealmsSection from "../components/home/realms/Realms.astro";
     grid-column: 2 / span 1;
   }
 
-  .behind {
+  .behind-1 {
     z-index: -1;
   }