why this site looks like this

    +-----------------------+
    |   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:

• hosted on github pages (gh-pages branch)
• single styles.css shared across all pages
• css custom properties for design tokens
• no build step. just html files.
• seo: sitemap, og tags, twitter cards, canonical urls

file structure:

    zayd.wtf/
    ├── index.html, 404.html
    ├── sitemap.xml, robots.txt, cname
    ├── assets/
    │   ├── css/styles.css
    │   ├── js/scripts.js
    │   └── images/favicon.png
    ├── about/index.html
    ├── blog/
    │   ├── index.html
    │   └── [post]/index.html
    ├── recipes/
    │   ├── index.html
    │   └── [recipe]/index.html
    ├── tools/ (future widgets)
    └── _docs/ (not served)