mochi/index.html at master · s9a/mochi · GitHub

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
<!DOCTYPE html>
<html lang="en-US" class="mochi flute" id="?">
<meta charset="utf-8">
<title>mochi color creator chack</title>
<meta name="viewport" content="width=device-width">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="rebeccapurple">
<meta name="description" content="CSS color synastry: contrast ratio checker">

<style>
  * { box-sizing: border-box }
  html { font: max(2em, 3vmax + 3vh) system-ui }
  body { margin: 0; overflow-wrap: anywhere }
  div {
    align-items: center;
    contain: content;
    display: flex;
    flex-flow: column;
    justify-content: center;
    min-height: calc(100vh / 3);
  }
  :target .ally { position: static }
  .aloe { position: absolute; top: -100vh }
  .ally { position: absolute; left: -100vw }
  input {
    color: inherit;
    background: transparent;
    border: 0;
    border-inline: thick dotted;
    border-radius: 2em 3em;
    display: inline-block;
    font: inherit;
    margin: auto;
    max-width: 90vw;
    padding: 1ex 1em;
  }
</style>

<link rel="stylesheet" href="mochi.css">
<link rel="home" href="https://s9a.page">
<link rel="help" href="https://s9a.page/contrast">
<link rel="help" href="https://gka.github.io/chroma.js">
<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">
<link rel="help" href="https://developer.mozilla.org/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">
<link rel="index" href="https://github.com/s9a/mochi">

<main id="uranus">
  <h1 class="aloe">mochi</h1>
  <form id="morf">
    <div class="flute mochi ouija capri">
      <label class="aroma">
        <code class="ally">color</code>
        <input name="moof" value="purple">
      </label>
    </div>
    <div class="flute cream" role="status">
      <a rel="help" class="charm" href="../contrast">
        <output name="bite" for="moof woof"></output>
        <samp class="ally">ratio</samp>
      </a>
    </div>
    <div class="flute mochi rioja capri">
      <label class="aroma">
        <code class="ally">color</code>
        <input name="woof" value="fuchsia">
      </label>
    </div>
  </form>
</main>

<script src="chroma.js"></script>
<script src="mochi.js"></script>