site construction notes

    +-----------------------+
    |   design language     |
    +-----------------------+
    

this site follows "the archive" design language — brutalist minimalism with a tactile, paper-like feel.

the philosophy:

• pure html/css. no frameworks. minimal javascript.
• text over images. ascii art for visuals.
• elements should feel like physical paper objects.
• hard shadows, not blurred. snappy transitions, not floaty.

the palette:

    token      value                      usage
    ─────────────────────────────────────────────────
    paper      #f1e9d2                    page background
    card       rgba(255,255,255,0.4)      card background
    card hover #ffffff                    card on hover
    ink        #333333                    text, borders, shadows
    muted      #555555                    secondary text
    link       #0044cc                    hyperlinks
    

the components:

• index cards — clickable cards that lift on hover with hard shadow
• library card dividers — thick 2px borders separating metadata
• back buttons — styled as mini cards, uppercase labels
• ascii headers — monospace decorative elements using <pre class="naked">

the rules:

• all borders are #333. never light gray.
• no blur on shadows. hard edges only.
• no gradients. flat colors only.
• transitions are 0.1s (snap, not float).

card hover effect:

    .card:hover {
        background: #ffffff;
        box-shadow: 5px 5px 0px #333;
        transform: translate(-1px, -1px);
        transition: all 0.1s;
    }
    

       \  :  /
     '.   :   .'
       > art <
     '.   :   '.
       /  :  \
    

the tech:

• deployed from the repo root on vercel
• authored in astro under src/, then rendered to static html
• single styles.css shared across all pages
• css custom properties for design tokens
• a small build step writes directory-routed pages into the repo root
• seo: sitemap, og tags, twitter cards, canonical urls

file structure:

    zayd.wtf/
    ├── src/
    │   ├── pages/**/*.astro
    │   ├── layouts/SiteLayout.astro
    │   ├── components/*.astro
    │   └── lib/site.mjs
    ├── public/
    │   ├── assets/css/styles.css
    │   ├── assets/js/scripts.js
    │   ├── assets/js/effects.js
    │   ├── manifest.json, sw.js
    │   ├── sitemap.xml, robots.txt
    │   ├── llms.txt, CNAME
    │   └── favicon.ico
    ├── dist/          (build output)
    ├── tools/
    └── _docs/         (not served)