251 lines
8.6 KiB
HTML
251 lines
8.6 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Board post · Fenja AI</title>
|
||
<link rel="stylesheet" href="colors_and_type.css" />
|
||
<style>
|
||
html, body { background: #f0eee9; }
|
||
body { margin: 0; }
|
||
|
||
/* Each artboard is a finished, exportable surface.
|
||
The post chrome is intentionally Fenja-quiet: no borders,
|
||
no shadows on the card itself — just paper tones. */
|
||
.post, .post *, .post *::before, .post *::after { box-sizing: border-box; }
|
||
.post {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: var(--surface);
|
||
color: var(--on-surface);
|
||
overflow: hidden;
|
||
font-family: var(--font-sans);
|
||
}
|
||
|
||
/* Editorial label — all caps, tracked, muted */
|
||
.post .eyebrow {
|
||
font-family: var(--font-sans);
|
||
font-weight: 500;
|
||
font-size: 13px;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--on-surface-muted);
|
||
margin: 0;
|
||
}
|
||
.post .eyebrow .rule {
|
||
display: inline-block;
|
||
width: 28px;
|
||
height: 1px;
|
||
background: var(--on-surface-muted);
|
||
vertical-align: middle;
|
||
margin-right: 14px;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.post h1 {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.04;
|
||
color: var(--on-surface);
|
||
margin: 0;
|
||
text-wrap: balance;
|
||
}
|
||
.post h1 em {
|
||
font-style: italic;
|
||
font-weight: 700;
|
||
}
|
||
.post .lede {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
color: var(--on-surface-variant);
|
||
line-height: 1.45;
|
||
margin: 0;
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
/* Portrait cards */
|
||
.member { display: flex; flex-direction: column; }
|
||
.member .name {
|
||
font-family: var(--font-serif);
|
||
font-weight: 700;
|
||
color: var(--on-surface);
|
||
letter-spacing: -0.01em;
|
||
line-height: 1.15;
|
||
margin: 0;
|
||
}
|
||
.member .title {
|
||
font-family: var(--font-sans);
|
||
font-weight: 500;
|
||
color: var(--on-surface);
|
||
line-height: 1.35;
|
||
margin: 0;
|
||
}
|
||
.member .company {
|
||
font-family: var(--font-sans);
|
||
font-weight: 400;
|
||
color: var(--on-surface-muted);
|
||
line-height: 1.35;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Image-slot styling: make the empty placeholder feel like part of the
|
||
Fenja system rather than the bright drop-zone default. */
|
||
image-slot {
|
||
background: var(--surface-container-high);
|
||
color: var(--on-surface-muted);
|
||
font-family: var(--font-sans);
|
||
}
|
||
|
||
/* Brand mark line in the footer */
|
||
.mark {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: var(--on-surface-muted);
|
||
font-family: var(--font-sans);
|
||
font-size: 12px;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
}
|
||
.mark img { height: 18px; opacity: 0.9; }
|
||
|
||
/* Tonal section nested inside a darker tier — the no-line rule */
|
||
.nest { background: var(--surface-container-low); }
|
||
|
||
/* =========== Layout A — Editorial Square 1200×1200 =========== */
|
||
.a-root { padding: 96px 96px 80px; display: flex; flex-direction: column; }
|
||
.a-head { max-width: 980px; }
|
||
.a-head h1 { font-size: 64px; }
|
||
.a-head .subtitle {
|
||
font-family: var(--font-serif);
|
||
font-size: 26px;
|
||
color: var(--on-surface-variant);
|
||
line-height: 1.35;
|
||
margin-top: 18px;
|
||
}
|
||
.a-grid {
|
||
margin-top: 64px;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 36px 28px;
|
||
}
|
||
.a-grid .member .name { font-size: 22px; margin-top: 18px; }
|
||
.a-grid .member .title { font-size: 16px; font-weight: 600; margin-top: 6px; }
|
||
.a-grid .member .company { font-size: 17px; font-weight: 500; color: var(--on-surface-variant); margin-top: 2px; }
|
||
.a-foot {
|
||
margin-top: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.a-foot .mark img { height: 160px; opacity: 1; display: block; margin-left: -6px; }
|
||
|
||
/* =========== Layout B — Catalogue / Index 1080×1350 =========== */
|
||
.b-root { padding: 64px 72px; display: flex; flex-direction: column; }
|
||
.b-head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; margin-bottom: 32px; }
|
||
.b-head h1 { font-size: 64px; line-height: 1; }
|
||
.b-head .right { text-align: right; }
|
||
.b-lede {
|
||
max-width: 560px;
|
||
font-size: 18px;
|
||
margin-top: 20px;
|
||
}
|
||
.b-list { margin-top: 32px; display: flex; flex-direction: column; }
|
||
.b-row {
|
||
display: grid;
|
||
grid-template-columns: 48px 72px 1fr;
|
||
align-items: center;
|
||
gap: 24px;
|
||
padding: 12px 18px;
|
||
border-radius: 6px;
|
||
}
|
||
.b-row .idx {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: 22px;
|
||
color: var(--on-surface-muted);
|
||
}
|
||
.b-row .name { font-size: 22px; }
|
||
.b-row .role { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
|
||
.b-row .role .title { font-size: 16px; font-weight: 600; margin-top: 4px; }
|
||
.b-row .role .company { font-size: 15px; font-weight: 500; color: var(--on-surface-variant); }
|
||
.b-row:nth-child(odd) { background: var(--surface-container-low); }
|
||
|
||
.b-foot { margin-top: auto; padding-top: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
|
||
.b-foot .quiet { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--on-surface-variant); max-width: 480px; line-height: 1.45; }
|
||
|
||
/* =========== Layout C — Editorial Landscape 1200×627 =========== */
|
||
.c-root { padding: 56px 64px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; }
|
||
.c-left { display: flex; flex-direction: column; justify-content: space-between; }
|
||
.c-left .eyebrow { margin-bottom: 22px; }
|
||
.c-left h1 { font-size: 44px; }
|
||
.c-left .lede { font-size: 16px; margin-top: 18px; max-width: 360px; }
|
||
.c-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 18px 16px;
|
||
align-content: center;
|
||
}
|
||
.c-grid .member .name { font-size: 14px; margin-top: 10px; }
|
||
.c-grid .member .title { font-size: 11px; margin-top: 2px; line-height: 1.25; }
|
||
.c-grid .member .company { font-size: 11px; line-height: 1.25; }
|
||
|
||
/* =========== Layout D — Quiet Cover + Strip 1080×1350 =========== */
|
||
.d-root { display: flex; flex-direction: column; }
|
||
.d-hero { flex: 1; padding: 100px 80px 60px; display: flex; flex-direction: column; justify-content: space-between; }
|
||
.d-hero .eyebrow { margin-bottom: 36px; }
|
||
.d-hero h1 { font-size: 88px; line-height: 0.98; max-width: 880px; }
|
||
.d-hero .lede { font-size: 22px; margin-top: 32px; max-width: 560px; }
|
||
.d-hero .signoff {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
color: var(--on-surface-variant);
|
||
font-size: 17px;
|
||
margin-top: 40px;
|
||
max-width: 460px;
|
||
line-height: 1.5;
|
||
}
|
||
.d-strip {
|
||
background: var(--surface-container-low);
|
||
padding: 36px 80px 44px;
|
||
}
|
||
.d-strip-label { margin-bottom: 22px; }
|
||
.d-strip-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(8, 1fr);
|
||
gap: 14px;
|
||
}
|
||
.d-strip .member .name {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.005em;
|
||
margin-top: 10px;
|
||
line-height: 1.18;
|
||
}
|
||
.d-strip .member .title { font-size: 10px; margin-top: 3px; line-height: 1.25; }
|
||
.d-strip .member .company { font-size: 10px; line-height: 1.25; }
|
||
|
||
/* Topographic currents — a quiet accent for layout D */
|
||
.currents {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
opacity: 0.45;
|
||
}
|
||
</style>
|
||
|
||
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||
<script src="image-slot.js"></script>
|
||
<script type="text/babel" src="design-canvas.jsx"></script>
|
||
<script type="text/babel" src="board-posts.jsx"></script>
|
||
</head>
|
||
<body>
|
||
<div id="root"></div>
|
||
<script type="text/babel">
|
||
const { createRoot } = ReactDOM;
|
||
createRoot(document.getElementById('root')).render(<App />);
|
||
</script>
|
||
</body>
|
||
</html>
|