Finalize project layout.

src/components/Card.astro

@@ -20,7 +20,7 @@ const pixels = Array.from(digest).map((digit) => {
   <div class="pixel" data-x={pixels[0].x} data-y="0"></div>
   <div class="pixel" data-x={pixels[1].x} data-y="0"></div>
   <div class="pixel" data-x={pixels[2].x} data-y="0"></div>
-  <h3>{title}</h3>
+  <h4>{title}</h4>
   <p class="justified"><slot /></p>
   <a class="no-effect" href={href} aria-label={title}></a>
   <span class="more">
@@ -44,7 +44,7 @@ const pixels = Array.from(digest).map((digit) => {
     flex: 1 1 0;
     background: var(--color-primary-dark);
     padding: var(--gap-lg);
-    min-height: calc(max(28rem, min(55vh, 55vw)));
+    min-height: calc(max(30rem, min(60vh, 60vw)));
     position: relative;
   }
 
@@ -93,27 +93,26 @@ const pixels = Array.from(digest).map((digit) => {
     }
   }
 
-  h3 {
+  h4 {
     font-family: var(--font-secondary);
     color: var(--color-secondary);
-    margin-bottom: var(--gap-md);
-    font-size: 1.5em;
     font-weight: 300;
   }
 
   span.more {
     display: inline-block;
     color: var(--color-secondary);
     font-family: var(--font-mono);
-    font-variant: small-caps;
     margin-top: auto;
     text-decoration: none;
+    font-size: 0.8em;
     text-align: right;
+    text-transform: uppercase;
     position: relative;
 
     & > svg.icon.slide {
       position: absolute;
-      top: 0.1em;
+      top: 0.2em;
       right: 0;
       opacity: 0;
       transition: all 100ms ease-in;

src/components/ExternalLink.astro

@@ -6,6 +6,6 @@ type Props = HTMLAttributes<'a'>;
 const { href, ...attributes } = Astro.props;
 ---
 
-<a href={href} {...attributes}>
+<a href={href} target="_blank" {...attributes}>
   <slot /><svg class="icon slide"><use xlink:href="#external-link"></use></svg>
 </a>

src/components/Footer.astro

@@ -21,7 +21,7 @@ const twitterUrl = `https://twitter.com/${socials.twitter}`;
       <use xlink:href="#logo-mark"></use>
     </svg>
     <aside>
-      <h2>Build together. With PRAGMA.</h2>
+      <h4>Build together. With PRAGMA.</h4>
 
       <ul class="flex-col">
         <li><a href="/privacy-policy">Privacy Policy</a></li>
@@ -89,10 +89,8 @@ const twitterUrl = `https://twitter.com/${socials.twitter}`;
     }
   }
 
-  h2 {
+  h4 {
     grid-area: title;
-    font-size: 2em;
-    margin-bottom: var(--gap-md);
   }
 
   ul {

src/components/Hero.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+import Grid from '../components/Grid.astro';
+
+interface Props extends HTMLAttributes<'section'> {
+  title: string;
+  tag: string;
+}
+
+const { title, tag, ...props } = Astro.props;
+---
+
+<header {...props}>
+  <span class="tag">{tag}</span>
+  <h1>{title}</h1>
+  <slot />
+</header>
+
+<Grid rows={1} actives={new Set([2, 3, 6, 7, 8, 9, 12, 13, 18, 19])} />
+
+<style>
+  header {
+    padding: var(--gap-md);
+  }
+
+  span.tag {
+    font-size: 0.8em;
+    display: inline-block;
+    font-family: var(--font-mono);
+    color: var(--color-secondary);
+  }
+</style>

src/components/Pattern.astro

@@ -71,6 +71,11 @@ const patternId = createHash('sha256')
 </svg>
 
 <style>
+  svg {
+    outline: 1px solid var(--color-primary);
+    outline-offset: -1px;
+  }
+
   svg pattern > polygon {
     filter: url(#outline);
     fill: transparent;

src/components/Section.astro

@@ -20,18 +20,16 @@ const { title, tag, ...props } = Astro.props;
     padding: var(--gap-md);
 
     & h2 {
-      font-size: 2.5em;
-      max-width: 65vw;
+      max-width: 55vw;
       text-align: center;
-      margin-bottom: var(--gap-md);
     }
   }
 
   span.tag {
+    font-size: 0.8em;
     display: inline-block;
     font-family: var(--font-mono);
     color: var(--color-secondary);
-    margin-bottom: var(--gap-md);
   }
 
   @media (max-width: 770px) {