Merge pull request #171 from ryuuart:ryuuart/issue167

Ryuuart/issue167
ryuuart · Aug 11, 2023 · 8ef77a1 · 8ef77a1
2 parents d4f57ff + 3743247
commit 8ef77a1
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 10 deletions.
diff --git a/web/src/components/home/HR.astro b/web/src/components/home/HR.astro
@@ -1,19 +1,69 @@
 ---
-const { position, semantic = true } = Astro.props;
+import Block from "../../layouts/home/Block.astro";
+
+const { semantic = true } = Astro.props;
 ---
 
-{semantic ? <hr class="hr" /> : <div class="hr" />}
+<>
+  <div class="h-cybertick-container">
+    <Block class="vr-container" />
+    <div class="tick-container">
+      <div class="tick tick-1"></div>
+      <div class="tick tick-2"></div>
+    </div>
+  </div>
+  {semantic ? <hr class="hr" /> : <div class="hr" />}
+</>
 
 <style>
+  .h-cybertick-container {
+    grid-column: 1 / -1;
+
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+  }
+
   .hr {
     grid-column: 1 / -1;
 
     border: none;
-    border-top: 1px solid var(--color-fg);
+    border-bottom: 1px solid var(--color-fg);
 
     width: 100%;
     margin: 0;
 
     overflow: hidden;
   }
+
+  .vr-container {
+    grid-row: 1 / -1;
+
+    width: 100vw;
+  }
+
+  .tick-container {
+    grid-area: 1 / 1 / -1 / -1;
+
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 0.5rem;
+  }
+
+  .tick {
+    background: var(--color-fg);
+
+    min-height: 0.25rem;
+    width: 15vw;
+    max-width: 6rem;
+
+    grid-row: 1 / -1;
+  }
+
+  .tick-1 {
+    grid-column: -2 / -3;
+  }
+
+  .tick-2 {
+    grid-column: -1 / -2;
+  }
 </style>
diff --git a/web/src/components/home/hero/Hero.astro b/web/src/components/home/hero/Hero.astro
@@ -47,10 +47,26 @@ import Primordia from "./Primordia.astro";
   .cta {
     grid-area: 4 / 2/ 5 / 5;
 
+    position: relative;
+
     margin-left: 1rem;
     margin-top: 1rem;
   }
 
+  .cta::before {
+    display: block;
+    content: "";
+
+    width: 0.25rem;
+    height: 85%;
+
+    position: absolute;
+    top: 0.75rem;
+    left: -1.25rem;
+
+    background: var(--color-fg);
+  }
+
   .primordia {
     grid-area: 2 / 1 / 4 / 2;
     justify-self: end;

diff --git a/web/src/components/home/poem/Poem.astro b/web/src/components/home/poem/Poem.astro
@@ -11,7 +11,9 @@ import Section from "../../../layouts/home/Section.astro";
       Seeking truths in cosmic light.
     </p>
   </div>
-  <div class="placeholder-img"></div>
+  <figure>
+    <div class="placeholder-img"></div>
+  </figure>
 </Section>
 
 <style>
@@ -28,19 +30,55 @@ import Section from "../../../layouts/home/Section.astro";
     font-size: 1rem;
     line-height: 2;
 
+    position: relative;
+
     margin-left: 1rem;
     margin-top: 2rem;
     margin-bottom: 8rem;
   }
 
-  .placeholder-img {
+  .text::before {
+    display: block;
+    content: "";
+
+    width: 0.25rem;
+    height: 35%;
+
+    position: absolute;
+    top: 1.5rem;
+    left: -1.25rem;
+
+    background: var(--color-fg);
+  }
+
+  figure {
     grid-area: 2 / 2 / 3 / 6;
 
     margin: 1rem;
 
     min-height: 16rem;
     max-width: 16rem;
 
+    position: relative;
+  }
+
+  figure::before {
+    display: block;
+    content: "";
+
+    width: 0.25rem;
+    height: 25%;
+
+    position: absolute;
+    left: -1.25rem;
+
+    background: var(--color-fg);
+  }
+
+  .placeholder-img {
+    width: 100%;
+    height: 100%;
+
     background-color: blue;
   }
 </style>
diff --git a/web/src/layouts/home/Block.astro b/web/src/layouts/home/Block.astro
@@ -19,9 +19,4 @@ const { class: className } = Astro.props;
     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/pages/index.astro b/web/src/pages/index.astro
@@ -31,6 +31,11 @@ import Spacer from "../components/home/Spacer.astro";
 </style>
 
 <style is:global>
+  .vr {
+    border-left: 1px solid var(--color-fg);
+    grid-area: 1 / 2 / -1 / span 1;
+  }
+
   .sideways-lr {
     writing-mode: vertical-rl;
     transform: rotate(180deg);