generated from s9a/hair
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (126 loc) · 7.58 KB
/
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en-US" class="ska-riot sea-blood sea-bleed sea-sand sea-wet">
<meta charset="utf-8">
<title>sea: web color cascading under the sea</title>
<meta name="theme-color" content="salmon">
<meta name="color-scheme" content="light dark">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CSS color palette from the sea :)">
<meta property=twitter:site content=@colorfulcode>
<link rel="stylesheet" href="sea.css" media=(color)>
<link rel="stylesheet" href="ska.css">
<link rel="icon" href="sea.svg">
<body class="ska-body">
<header class="ska-block ska-exhale">
<p class="ska-serve">there are<br>hella fish<br>in the
<h1 class="ska-serve ska-high" id="sea">
<a class="sea-blood sea-fume" href="#sea">sea</a>
</h1>
<p class="ska-serve ska-inhale ska-mosh">
<dfn>sea</dfn>
is an
<a href="#color" class="sea-blood sea-amber">oceanic</a>
CSS color palette that you can apply with CSS
<a href="#copy" class="sea-blood sea-glow">classes</a>
that are
<a href="#plunge" class="sea-blood sea-gush">empowered</a>
by CSS
<a href="sea.css" class="sea-blood sea-storm">variables</a>
and color media queries
</header>
<figure class="ska-block ska-exhale" id="plunge">
<figcaption class="ska-serve ska-know">
<span class="sea-blood">blood</span>,
<span class="sea-bleed">bleed</span>,
<span class="sea-bleed sea-blood">both</span>
</figcaption>
<a class="ska-wave sea-blood sea-gush" href="#blood"><code>blood</code> shows solar colors</a>
<a class="ska-wave sea-bleed sea-gush" href="#bleed"><code>bleed</code> shows lunar colors</a>
<a class="ska-wave sea-bleed sea-blood sea-gush" href="#both">put both to match light dark mode</a>
</figure>
<figure class="ska-block ska-exhale" id="color">
<figcaption>named color</figcaption>
<ul class="ska-serve" id="solar">
<li class="ska-wave sea-blood sea-amber">amber
<li class="ska-wave sea-blood sea-blush">blush
<li class="ska-wave sea-blood sea-breeze">breeze
<li class="ska-wave sea-blood sea-foam">foam
<li class="ska-wave sea-blood sea-fume">fume
<li class="ska-wave sea-blood sea-glow">glow
<li class="ska-wave sea-blood sea-gush">gush
<li class="ska-wave sea-blood sea-gel">gel
<li class="ska-wave sea-blood sea-lava">lava
<li class="ska-wave sea-blood sea-sand">sand
<li class="ska-wave sea-blood sea-storm">storm
<li class="ska-wave sea-blood sea-tide">tide
</ul>
<ul class="ska-serve ska-pad" id="lunar">
<li class="ska-wave sea-bleed sea-amber">amber
<li class="ska-wave sea-bleed sea-blush">blush
<li class="ska-wave sea-bleed sea-breeze">breeze
<li class="ska-wave sea-bleed sea-foam">foam
<li class="ska-wave sea-bleed sea-fume">fume
<li class="ska-wave sea-bleed sea-gel">gel
<li class="ska-wave sea-bleed sea-glow">glow
<li class="ska-wave sea-bleed sea-gush">gush
<li class="ska-wave sea-bleed sea-lava">lava
<li class="ska-wave sea-bleed sea-sand">sand
<li class="ska-wave sea-bleed sea-storm">storm
<li class="ska-wave sea-bleed sea-tide">tide
</ul>
<aside class="ska-blend ska-mosh" aria-label="level" id="level">
ratios range
<a href="https://www.w3.org/TR/WCAG/#contrast-minimum"><i>level AA<ins class="ska-pulse">A</ins></i></a>
</aside>
</figure>
<figure class="ska-block ska-exhale" id="copy">
<figcaption>copy any <code>class</code> example onto any tag</figcaption>
<ul class="ska-serve ska-canal" aria-label="bleed" id="bleed">
<li class="ska-wave sea-bleed sea-amber"><code contenteditable>sea-bleed sea-amber</code>
<li class="ska-wave sea-bleed sea-blush"><code contenteditable>sea-bleed sea-blush</code>
<li class="ska-wave sea-bleed sea-breeze"><code contenteditable>sea-bleed sea-breeze</code>
<li class="ska-wave sea-bleed sea-foam"><code contenteditable>sea-bleed sea-foam</code>
<li class="ska-wave sea-bleed sea-fume"><code contenteditable>sea-bleed sea-fume</code>
<li class="ska-wave sea-bleed sea-gel"><code contenteditable>sea-bleed sea-gel</code>
<li class="ska-wave sea-bleed sea-glow"><code contenteditable>sea-bleed sea-glow</code>
<li class="ska-wave sea-bleed sea-gush"><code contenteditable>sea-bleed sea-gush</code>
<li class="ska-wave sea-bleed sea-lava"><code contenteditable>sea-bleed sea-lava</code>
<li class="ska-wave sea-bleed sea-sand"><code contenteditable>sea-bleed sea-sand</code>
<li class="ska-wave sea-bleed sea-storm"><code contenteditable>sea-bleed sea-storm</code>
<li class="ska-wave sea-bleed sea-tide"><code contenteditable>sea-bleed sea-tide</code>
</ul>
<ul class="ska-serve ska-canal" aria-label="blood" id="blood">
<li class="ska-wave sea-blood sea-amber"><code contenteditable>sea-blood sea-amber</code>
<li class="ska-wave sea-blood sea-blush"><code contenteditable>sea-blood sea-blush</code>
<li class="ska-wave sea-blood sea-breeze"><code contenteditable>sea-blood sea-breeze</code>
<li class="ska-wave sea-blood sea-foam"><code contenteditable>sea-blood sea-foam</code>
<li class="ska-wave sea-blood sea-fume"><code contenteditable>sea-blood sea-fume</code>
<li class="ska-wave sea-blood sea-gel"><code contenteditable>sea-blood sea-gel</code>
<li class="ska-wave sea-blood sea-glow"><code contenteditable>sea-blood sea-glow</code>
<li class="ska-wave sea-blood sea-gush"><code contenteditable>sea-blood sea-gush</code>
<li class="ska-wave sea-blood sea-lava"><code contenteditable>sea-blood sea-lava</code>
<li class="ska-wave sea-blood sea-sand"><code contenteditable>sea-blood sea-sand</code>
<li class="ska-wave sea-blood sea-storm"><code contenteditable>sea-blood sea-storm</code>
<li class="ska-wave sea-blood sea-tide"><code contenteditable>sea-blood sea-tide</code>
</ul>
<ul class="ska-serve ska-canal" aria-label="both" id="both">
<li class="ska-wave sea-bleed sea-blood sea-amber"><code contenteditable>sea-bleed sea-blood sea-amber</code>
<li class="ska-wave sea-bleed sea-blood sea-blush"><code contenteditable>sea-bleed sea-blood sea-blush</code>
<li class="ska-wave sea-bleed sea-blood sea-breeze"><code contenteditable>sea-bleed sea-blood sea-breeze</code>
<li class="ska-wave sea-bleed sea-blood sea-foam"><code contenteditable>sea-bleed sea-blood sea-foam</code>
<li class="ska-wave sea-bleed sea-blood sea-fume"><code contenteditable>sea-bleed sea-blood sea-fume</code>
<li class="ska-wave sea-bleed sea-blood sea-gel"><code contenteditable>sea-bleed sea-blood sea-gel</code>
<li class="ska-wave sea-bleed sea-blood sea-glow"><code contenteditable>sea-bleed sea-blood sea-glow</code>
<li class="ska-wave sea-bleed sea-blood sea-gush"><code contenteditable>sea-bleed sea-blood sea-gush</code>
<li class="ska-wave sea-bleed sea-blood sea-lava"><code contenteditable>sea-bleed sea-blood sea-lava</code>
<li class="ska-wave sea-bleed sea-blood sea-sand"><code contenteditable>sea-bleed sea-blood sea-sand</code>
<li class="ska-wave sea-bleed sea-blood sea-storm"><code contenteditable>sea-bleed sea-blood sea-storm</code>
<li class="ska-wave sea-bleed sea-blood sea-tide"><code contenteditable>sea-bleed sea-blood sea-tide</code>
</ul>
</figure>
<nav class="ska-fit" aria-label="floor" id="floor">
<a class="ska-pad ska-wave sea-blood sea-fume" href="#sea"><b>cascading<br>style<br>sea</b></a>
<a class="ska-pad ska-wave sea-blood sea-gush" href="https://s9a.page" rel="author home">s9a</a>
<a class="ska-pad ska-wave sea-blood sea-lava" href="https://github.com/s9a/sea" rel="help">code</a>
<a class="ska-pad ska-wave sea-blood sea-gel" href="https://github.com/s9a/sea#readme">read<wbr>me</a>
</nav>