Adaa Sans Serif 1.0.0HEADv1.0.0main

1 files changed, 216 insertions, 0 deletions

diff --git a/preview.html b/preview.html
new file mode 100644
index 0000000..d7edb4a
--- /dev/null
+++ b/preview.html
@@ -0,0 +1,216 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Adaa Sans Serif</title>
+<style>
+  @font-face {
+    font-family: "Adaa Sans Serif";
+    src: url("fonts/webfonts/AdaaSansSerif[wght].woff2") format("woff2-variations"),
+         url("fonts/AdaaSansSerif[wght].ttf") format("truetype-variations");
+    font-weight: 100 900;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "Adaa Sans Serif";
+    src: url("fonts/webfonts/AdaaSansSerif-Italic[wght].woff2") format("woff2-variations"),
+         url("fonts/AdaaSansSerif-Italic[wght].ttf") format("truetype-variations");
+    font-weight: 100 900;
+    font-style: italic;
+  }
+
+  :root {
+    --bg: #f6f5f1;
+    --fg: #111110;
+    --muted: #77756e;
+    --line: #dcdad3;
+    --accent: #3b5bdb;
+    --wght: 400;
+    --size: 96px;
+    --style: normal;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --bg: #121211; --fg: #efede6; --muted: #8d8b84; --line: #2b2a27; --accent: #8ea4ff;
+    }
+  }
+  :root[data-theme="dark"] {
+    --bg: #121211; --fg: #efede6; --muted: #8d8b84; --line: #2b2a27; --accent: #8ea4ff;
+  }
+
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    background: var(--bg);
+    color: var(--fg);
+    font-family: "Adaa Sans Serif", system-ui, sans-serif;
+    font-weight: 400;
+  }
+  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px 96px; }
+
+  header {
+    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
+    padding: 28px 0 20px; border-bottom: 1px solid var(--line);
+  }
+  header h1 { margin: 0; font-size: 20px; font-weight: 600; }
+  header span { color: var(--muted); font-size: 14px; }
+
+  .controls {
+    position: sticky; top: 0; z-index: 2;
+    display: grid; grid-template-columns: 2fr 1fr auto auto; gap: 24px; align-items: center;
+    padding: 16px 0; background: var(--bg); border-bottom: 1px solid var(--line);
+  }
+  .control { display: grid; gap: 6px; min-width: 0; }
+  .control label { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
+  .control output { color: var(--fg); font-variant-numeric: tabular-nums; }
+  input[type="range"] { width: 100%; accent-color: var(--accent); }
+  .toggle {
+    font: inherit; font-size: 14px; color: var(--fg); background: none; cursor: pointer;
+    border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; white-space: nowrap;
+  }
+  .toggle[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
+
+  .live {
+    font-weight: var(--wght); font-style: var(--style); font-size: var(--size);
+    line-height: 1.05; letter-spacing: -0.02em; outline: none;
+    padding: 48px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere;
+  }
+  .live:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); }
+
+  h2 { font-size: 13px; font-weight: 500; color: var(--muted); margin: 40px 0 16px; letter-spacing: 0.02em; }
+
+  .waterfall .row {
+    display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: baseline;
+    padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer;
+  }
+  .waterfall .row:hover .sample { color: var(--accent); }
+  .waterfall .meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
+  .waterfall .sample {
+    font-size: 40px; font-style: var(--style); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+
+  .para { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
+  .para p { margin: 0; font-weight: var(--wght); font-style: var(--style); line-height: 1.5; }
+  .para .s { font-size: 15px; } .para .m { font-size: 19px; } .para .l { font-size: 26px; line-height: 1.3; }
+
+  .glyphs {
+    display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+    border-top: 1px solid var(--line); border-left: 1px solid var(--line);
+  }
+  .glyphs div {
+    aspect-ratio: 1; display: grid; place-items: center;
+    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
+    font-size: 32px; font-weight: var(--wght); font-style: var(--style);
+  }
+
+  @media (max-width: 720px) {
+    .controls { grid-template-columns: 1fr 1fr; gap: 16px; }
+    .control.weight { grid-column: 1 / -1; }
+    .waterfall .row { grid-template-columns: 1fr; gap: 2px; }
+    .waterfall .sample { font-size: 28px; }
+  }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <h1>Adaa Sans Serif</h1>
+    <span>Variable · wght 100–900 · Roman &amp; Italic</span>
+  </header>
+
+  <div class="controls">
+    <div class="control weight">
+      <label for="wght">Weight <output id="wghtOut">400 Regular</output></label>
+      <input id="wght" type="range" min="100" max="900" step="1" value="400">
+    </div>
+    <div class="control">
+      <label for="size">Size <output id="sizeOut">96px</output></label>
+      <input id="size" type="range" min="16" max="240" step="1" value="96">
+    </div>
+    <button class="toggle" id="italic" aria-pressed="false">Italic</button>
+    <button class="toggle" id="animate" aria-pressed="false">Animate</button>
+  </div>
+
+  <div class="live" contenteditable="true" spellcheck="false">Sphinx of black quartz, judge my vow.</div>
+
+  <h2>Waterfall · click a row to set the weight</h2>
+  <div class="waterfall" id="waterfall"></div>
+
+  <h2>Text</h2>
+  <div class="para">
+    <p class="s">Typography is the craft of endowing human language with a durable visual form. A variable font holds every weight in one file, so the text can move smoothly from a hairline to a heavy black without a single extra request.</p>
+    <p class="m">The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. Æ Ø Å æ ø å — 0123456789 (€ $ £ %) &amp; @ ?!</p>
+    <p class="l">Hamburgefonstiv 1234567890 Blåbærsyltetøy</p>
+  </div>
+
+  <h2>Glyphs</h2>
+  <div class="glyphs" id="glyphs"></div>
+</div>
+
+<script>
+  const root = document.documentElement;
+  const wght = document.getElementById("wght");
+  const size = document.getElementById("size");
+  const italic = document.getElementById("italic");
+  const animate = document.getElementById("animate");
+  const names = [[100, "Thin"], [200, "ExtraLight"], [300, "Light"], [400, "Regular"], [500, "Medium"],
+                 [600, "SemiBold"], [700, "Bold"], [800, "ExtraBold"], [900, "Black"]];
+
+  function setWeight(v) {
+    v = Math.round(v);
+    wght.value = v;
+    root.style.setProperty("--wght", v);
+    const named = names.find(([w]) => w === v);
+    document.getElementById("wghtOut").textContent = named ? `${v} ${named[1]}` : v;
+  }
+  wght.addEventListener("input", () => { stopAnimation(); setWeight(+wght.value); });
+
+  size.addEventListener("input", () => {
+    root.style.setProperty("--size", size.value + "px");
+    document.getElementById("sizeOut").textContent = size.value + "px";
+  });
+
+  italic.addEventListener("click", () => {
+    const on = italic.getAttribute("aria-pressed") !== "true";
+    italic.setAttribute("aria-pressed", on);
+    root.style.setProperty("--style", on ? "italic" : "normal");
+  });
+
+  let raf = null;
+  function stopAnimation() {
+    if (raf) cancelAnimationFrame(raf);
+    raf = null;
+    animate.setAttribute("aria-pressed", "false");
+  }
+  animate.addEventListener("click", () => {
+    if (raf) return stopAnimation();
+    animate.setAttribute("aria-pressed", "true");
+    const start = performance.now();
+    const loop = t => {
+      const phase = (1 - Math.cos((t - start) / 1400)) / 2;
+      setWeight(100 + phase * 800);
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
+  });
+
+  const wf = document.getElementById("waterfall");
+  for (const [w, n] of names) {
+    const row = document.createElement("div");
+    row.className = "row";
+    row.innerHTML = `<span class="meta">${w} ${n}</span><span class="sample" style="font-weight:${w}">Adaa Sans Serif — Grumpy wizards make toxic brew</span>`;
+    row.addEventListener("click", () => { stopAnimation(); setWeight(w); });
+    wf.appendChild(row);
+  }
+
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzÆØÅæøåÄÖÜäöüß0123456789&@#%$€£¥?!¿¡.,:;'\"()[]{}/\\*+−×÷=≠±<>≤≥→←↑↓•©®™§¶";
+  const g = document.getElementById("glyphs");
+  for (const c of chars) {
+    const d = document.createElement("div");
+    d.textContent = c;
+    g.appendChild(d);
+  }
+</script>
+</body>
+</html>