theme / site / index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>theme.git — the shared look of the ardegazu.ro suite</title>
<style>
  :root {
    color-scheme: dark;
    --paper: #171520; --ink: #eae6f2; --ink-soft: #a49fb5;
    --line: #2b2838; --card: #1e1c2a; --code-bg: #272334; --sage-d: #93c1a5;
  }
  @media (prefers-color-scheme: light) {
    :root {
      color-scheme: light;
      --paper: #faf6ee; --ink: #35322c; --ink-soft: #6f6a5e;
      --line: #e5ddcd; --card: #fffdf8; --code-bg: #f1ead9; --sage-d: #6fa284;
    }
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--paper); color: var(--ink);
    font: 16.5px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    padding: 64px 22px 90px;
  }
  main { max-width: 660px; margin: 0 auto; }
  h1 { font-size: 40px; font-weight: 600; letter-spacing: -.4px; }
  .tag { margin: 14px 0 34px; font-size: 18px; color: var(--ink-soft); }
  h2 { font-size: 20px; font-weight: 600; margin: 36px 0 10px; }
  p { margin: 10px 0; }
  a { color: var(--sage-d); }
  pre {
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 13px 16px; overflow-x: auto; margin: 14px 0;
    font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  code { font: 15px ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--code-bg); border-radius: 5px; padding: 1px 6px; }
  pre code { background: none; padding: 0; }
  ul { padding-left: 22px; } li { margin: 6px 0; }
  footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
    font-size: 14px; color: var(--ink-soft); }
  footer a { color: inherit; }
</style>
</head>
<body>
<main>
  <h1>theme.git</h1>
  <p class="tag">the shared look of the
  <a href="https://ardegazu.ro">ardegazu.ro</a> suite — color tokens, base
  typography and the small shared components, as one plain CSS file.</p>

  <h2>Clone</h2>
  <pre><code>git clone https://git.ardegazu.ro/theme.git</code></pre>
  <p>or <a href="browse/index.html">browse the code</a> right here, in the
  browser.</p>

  <h2>Use as a dependency</h2>
  <pre><code>"ardegazu-theme": "git+https://git.ardegazu.ro/theme.git#&lt;sha&gt;"</code></pre>
  <p>then <code>import "ardegazu-theme/theme.css"</code> in the app's entry
  module — the css ships inside the app's own build, offline-safe.</p>

  <h2>Or hot-link the cdn mirror</h2>
  <pre><code>https://cdn.ardegazu.ro/theme/v1/theme.css</code></pre>
  <p><code>/v1/</code> is the package's major version — breaking token
  changes land at <code>/v2/</code>, so hot-linked pages never shift.</p>

  <h2>What's inside</h2>
  <ul>
    <li>the color tokens — dark-first night palette with a cream light
      override; six accent hues (rose, peach, sage, lilac, sky, gold),
      each with <code>-d</code>/<code>-l</code> variants.</li>
    <li>the base reset and typography.</li>
    <li>the shared components: the quiet two-tap <code>.btn</code>
      (with its <code>.armed</code> warning state) and the
      <code>.soc-flash</code> toast.</li>
  </ul>

  <p>Plain CSS, no build step for consumers. MIT licensed.</p>

  <footer>
    <p>part of the <a href="https://git.ardegazu.ro/">git.ardegazu.ro</a>
    ecosystem — the apps live at <a href="https://ardegazu.ro">ardegazu.ro</a>.</p>
  </footer>
</main>
</body>
</html>

static mirror of HEAD · about · clone: git clone https://git.ardegazu.ro/theme.git