Skip to content

Commit d1111af

Browse files
author
GitHub Actions
committed
Deploy knadh/oat to knadh/oat:gh-pages
0 parents  commit d1111af

40 files changed

Lines changed: 6531 additions & 0 deletions

‎.nojekyll‎

Whitespace-only changes.

‎404.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<!doctype html>
2+
<title>404 Not Found</title>
3+
<h1>404 Not Found</h1>

‎CNAME‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
oat.ink

‎components/accordion/index.html‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Accordion - Oat UI</title>
8+
9+
<meta property="og:image" content="https://oat.ink/thumb.png">
10+
<link rel="stylesheet" href="/oat.min.css">
11+
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
12+
13+
<script>
14+
// Prevent FOUC - apply theme before rendering.
15+
(function() {
16+
var t = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
17+
document.documentElement.setAttribute('data-theme', t);
18+
})();
19+
</script>
20+
<script src="/oat.min.js" defer></script>
21+
<script src="/main.js"></script>
22+
<link href="/style.css" rel="stylesheet" />
23+
</head>
24+
25+
<body data-sidebar-layout class="components-accordion">
26+
<nav data-topnav>
27+
<div class="row">
28+
<div class="col-4 branding">
29+
<button data-sidebar-toggle aria-label="Toggle sidebar menu" class="small">
30+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
31+
<line x1="4" y1="7" x2="20" y2="7" />
32+
<line x1="4" y1="12" x2="20" y2="12" />
33+
<line x1="4" y1="17" x2="16" y2="17" />
34+
</svg>
35+
</button>
36+
37+
<a href="/" class="favicon"><img src="/favicon.svg" alt="Oat UI" style="height: 24px;"></a>
38+
<a href="/" class="logo"><img src="/logo.svg" alt="Oat UI" style="height: 24px;"></a>
39+
</div>
40+
</div>
41+
</nav>
42+
43+
<aside data-sidebar class="main-sidebar">
44+
<nav>
45+
<ul>
46+
<li><a href="https://github.com/knadh/oat"><img src="/github.svg" alt="GitHub icon" /> GitHub</a></li>
47+
<li><a href="/">Home</a></li>
48+
<li><a href="/usage/">Usage</a></li>
49+
<li><a href="/customizing/">Customizing</a></li>
50+
<li><a href="/other-libs/">Other tiny libs</a></li>
51+
<li><a href="/extensions/">Extensions</a></li>
52+
<li>
53+
<details open>
54+
<summary>
55+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
56+
<rect x="3" y="3" width="7" height="7" />
57+
<rect x="14" y="3" width="7" height="7" />
58+
<rect x="14" y="14" width="7" height="7" />
59+
<rect x="3" y="14" width="7" height="7" />
60+
</svg>
61+
Components
62+
</summary>
63+
<ul>
64+
<li><a href="/components">All components</a></li>
65+
66+
67+
<li><a href="/components/#typography">Typography
68+
</a></li>
69+
70+
<li><a href="/components/#accordion">Accordion
71+
</a></li>
72+
73+
<li><a href="/components/#alert">Alert
74+
</a></li>
75+
76+
<li><a href="/components/#badge">Badge
77+
</a></li>
78+
79+
<li><a href="/components/#button">Button
80+
</a></li>
81+
82+
<li><a href="/components/#card">Card
83+
</a></li>
84+
85+
<li><a href="/components/#dialog">Dialog
86+
</a></li>
87+
88+
<li><a href="/components/#dropdown">Dropdown
89+
<sup title="WebComponent">WC</sup></a></li>
90+
91+
<li><a href="/components/#form">Form elements
92+
</a></li>
93+
94+
<li><a href="/components/#meter">Meter
95+
</a></li>
96+
97+
<li><a href="/components/#progress">Progress
98+
</a></li>
99+
100+
<li><a href="/components/#spinner">Spinner
101+
</a></li>
102+
103+
<li><a href="/components/#skeleton">Skeleton
104+
</a></li>
105+
106+
<li><a href="/components/#sidebar">Sidebar
107+
</a></li>
108+
109+
<li><a href="/components/#switch">Switch
110+
</a></li>
111+
112+
<li><a href="/components/#table">Table
113+
</a></li>
114+
115+
<li><a href="/components/#tabs">Tabs
116+
<sup title="WebComponent">WC</sup></a></li>
117+
118+
<li><a href="/components/#tooltip">Tooltip
119+
</a></li>
120+
121+
<li><a href="/components/#toast">Toast
122+
</a></li>
123+
124+
<li><a href="/components/#grid">Grid
125+
</a></li>
126+
127+
<li><a href="/components/#utilities">Utils and helpers
128+
</a></li>
129+
130+
</ul>
131+
</details>
132+
</li>
133+
</ul>
134+
</nav>
135+
<footer>
136+
<button class="outline small" onclick="toggleTheme()">
137+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon-light">
138+
<circle cx="12" cy="12" r="5"/>
139+
<line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
140+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
141+
<line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
142+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
143+
</svg>
144+
145+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon-dark">
146+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
147+
</svg>
148+
149+
Switch theme
150+
</button>
151+
</footer>
152+
</aside>
153+
154+
<main class="wrap">
155+
<div class="container">
156+
157+
<h1>Accordion</h1>
158+
<p>Use native <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> for collapsible content.</p>
159+
<div class="ot-demo">
160+
<pre class="giallo" style="color: #ABB2BF; background-color: #282C34;"><code data-lang="html"><span class="giallo-l"><span>&lt;</span><span style="color: #E06C75;">details</span><span>&gt;</span></span>
161+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">summary</span><span>&gt;What is Oat&lt;/</span><span style="color: #E06C75;">summary</span><span>&gt;</span></span>
162+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">p</span><span>&gt;Oat is a minimal, semantic-first UI component library with zero dependencies.&lt;/</span><span style="color: #E06C75;">p</span><span>&gt;</span></span>
163+
<span class="giallo-l"><span>&lt;/</span><span style="color: #E06C75;">details</span><span>&gt;</span></span>
164+
<span class="giallo-l"></span>
165+
<span class="giallo-l"><span>&lt;</span><span style="color: #E06C75;">details</span><span>&gt;</span></span>
166+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">summary</span><span>&gt;How do I use it&lt;/</span><span style="color: #E06C75;">summary</span><span>&gt;</span></span>
167+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">p</span><span>&gt;Include the CSS and JS files, then write semantic HTML. Most elements are styled by default.&lt;/</span><span style="color: #E06C75;">p</span><span>&gt;</span></span>
168+
<span class="giallo-l"><span>&lt;/</span><span style="color: #E06C75;">details</span><span>&gt;</span></span>
169+
<span class="giallo-l"></span>
170+
<span class="giallo-l"><span>&lt;</span><span style="color: #E06C75;">details</span><span>&gt;</span></span>
171+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">summary</span><span>&gt;Is it accessible&lt;/</span><span style="color: #E06C75;">summary</span><span>&gt;</span></span>
172+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">p</span><span>&gt;Yes! It uses semantic HTML and ARIA attributes. Keyboard navigation works out of the box.&lt;/</span><span style="color: #E06C75;">p</span><span>&gt;</span></span>
173+
<span class="giallo-l"><span>&lt;/</span><span style="color: #E06C75;">details</span><span>&gt;</span></span>
174+
<span class="giallo-l"></span>
175+
<span class="giallo-l"><span>&lt;</span><span style="color: #E06C75;">details</span><span style="color: #D19A66;"> name</span><span>=</span><span style="color: #98C379;">&quot;same&quot;</span><span>&gt;</span></span>
176+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">summary</span><span>&gt;This is grouped with the next one&lt;/</span><span style="color: #E06C75;">summary</span><span>&gt;</span></span>
177+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">p</span><span>&gt;Using the &lt;</span><span style="color: #E06C75;">code</span><span>&gt;name&lt;/</span><span style="color: #E06C75;">code</span><span>&gt; attribute groups items like radio.&lt;/</span><span style="color: #E06C75;">p</span><span>&gt;</span></span>
178+
<span class="giallo-l"><span>&lt;/</span><span style="color: #E06C75;">details</span><span>&gt;</span></span>
179+
<span class="giallo-l"></span>
180+
<span class="giallo-l"><span>&lt;</span><span style="color: #E06C75;">details</span><span style="color: #D19A66;"> name</span><span>=</span><span style="color: #98C379;">&quot;same&quot;</span><span>&gt;</span></span>
181+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">summary</span><span>&gt;This is grouped with the previous one&lt;/</span><span style="color: #E06C75;">summary</span><span>&gt;</span></span>
182+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">p</span><span>&gt;Using the &lt;</span><span style="color: #E06C75;">code</span><span>&gt;name&lt;/</span><span style="color: #E06C75;">code</span><span>&gt; attribute groups items like radio.&lt;/</span><span style="color: #E06C75;">p</span><span>&gt;</span></span>
183+
<span class="giallo-l"><span>&lt;/</span><span style="color: #E06C75;">details</span><span>&gt;</span></span></code></pre>
184+
</div>
185+
186+
187+
188+
<footer class="footer text-light">&copy; <a href="https://nadh.in"><small class="text-light">Kailash Nadh</small></a></footer>
189+
</div>
190+
</main>
191+
</body>
192+
</html>

‎components/alert/index.html‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Alert - Oat UI</title>
8+
9+
<meta property="og:image" content="https://oat.ink/thumb.png">
10+
<link rel="stylesheet" href="/oat.min.css">
11+
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
12+
13+
<script>
14+
// Prevent FOUC - apply theme before rendering.
15+
(function() {
16+
var t = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
17+
document.documentElement.setAttribute('data-theme', t);
18+
})();
19+
</script>
20+
<script src="/oat.min.js" defer></script>
21+
<script src="/main.js"></script>
22+
<link href="/style.css" rel="stylesheet" />
23+
</head>
24+
25+
<body data-sidebar-layout class="components-alert">
26+
<nav data-topnav>
27+
<div class="row">
28+
<div class="col-4 branding">
29+
<button data-sidebar-toggle aria-label="Toggle sidebar menu" class="small">
30+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
31+
<line x1="4" y1="7" x2="20" y2="7" />
32+
<line x1="4" y1="12" x2="20" y2="12" />
33+
<line x1="4" y1="17" x2="16" y2="17" />
34+
</svg>
35+
</button>
36+
37+
<a href="/" class="favicon"><img src="/favicon.svg" alt="Oat UI" style="height: 24px;"></a>
38+
<a href="/" class="logo"><img src="/logo.svg" alt="Oat UI" style="height: 24px;"></a>
39+
</div>
40+
</div>
41+
</nav>
42+
43+
<aside data-sidebar class="main-sidebar">
44+
<nav>
45+
<ul>
46+
<li><a href="https://github.com/knadh/oat"><img src="/github.svg" alt="GitHub icon" /> GitHub</a></li>
47+
<li><a href="/">Home</a></li>
48+
<li><a href="/usage/">Usage</a></li>
49+
<li><a href="/customizing/">Customizing</a></li>
50+
<li><a href="/other-libs/">Other tiny libs</a></li>
51+
<li><a href="/extensions/">Extensions</a></li>
52+
<li>
53+
<details open>
54+
<summary>
55+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
56+
<rect x="3" y="3" width="7" height="7" />
57+
<rect x="14" y="3" width="7" height="7" />
58+
<rect x="14" y="14" width="7" height="7" />
59+
<rect x="3" y="14" width="7" height="7" />
60+
</svg>
61+
Components
62+
</summary>
63+
<ul>
64+
<li><a href="/components">All components</a></li>
65+
66+
67+
<li><a href="/components/#typography">Typography
68+
</a></li>
69+
70+
<li><a href="/components/#accordion">Accordion
71+
</a></li>
72+
73+
<li><a href="/components/#alert">Alert
74+
</a></li>
75+
76+
<li><a href="/components/#badge">Badge
77+
</a></li>
78+
79+
<li><a href="/components/#button">Button
80+
</a></li>
81+
82+
<li><a href="/components/#card">Card
83+
</a></li>
84+
85+
<li><a href="/components/#dialog">Dialog
86+
</a></li>
87+
88+
<li><a href="/components/#dropdown">Dropdown
89+
<sup title="WebComponent">WC</sup></a></li>
90+
91+
<li><a href="/components/#form">Form elements
92+
</a></li>
93+
94+
<li><a href="/components/#meter">Meter
95+
</a></li>
96+
97+
<li><a href="/components/#progress">Progress
98+
</a></li>
99+
100+
<li><a href="/components/#spinner">Spinner
101+
</a></li>
102+
103+
<li><a href="/components/#skeleton">Skeleton
104+
</a></li>
105+
106+
<li><a href="/components/#sidebar">Sidebar
107+
</a></li>
108+
109+
<li><a href="/components/#switch">Switch
110+
</a></li>
111+
112+
<li><a href="/components/#table">Table
113+
</a></li>
114+
115+
<li><a href="/components/#tabs">Tabs
116+
<sup title="WebComponent">WC</sup></a></li>
117+
118+
<li><a href="/components/#tooltip">Tooltip
119+
</a></li>
120+
121+
<li><a href="/components/#toast">Toast
122+
</a></li>
123+
124+
<li><a href="/components/#grid">Grid
125+
</a></li>
126+
127+
<li><a href="/components/#utilities">Utils and helpers
128+
</a></li>
129+
130+
</ul>
131+
</details>
132+
</li>
133+
</ul>
134+
</nav>
135+
<footer>
136+
<button class="outline small" onclick="toggleTheme()">
137+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon-light">
138+
<circle cx="12" cy="12" r="5"/>
139+
<line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
140+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
141+
<line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
142+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
143+
</svg>
144+
145+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon-dark">
146+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
147+
</svg>
148+
149+
Switch theme
150+
</button>
151+
</footer>
152+
</aside>
153+
154+
<main class="wrap">
155+
<div class="container">
156+
157+
<h1>Alert</h1>
158+
<p>Use <code>role="alert"</code> for alert styling. Set <code>data-variant</code> for success, warning, or error.</p>
159+
<div class="ot-demo">
160+
<pre class="giallo" style="color: #ABB2BF; background-color: #282C34;"><code data-lang="html"><span class="giallo-l"><span>&lt;</span><span style="color: #E06C75;">div</span><span style="color: #D19A66;"> role</span><span>=</span><span style="color: #98C379;">&quot;alert&quot;</span><span>&gt;</span></span>
161+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">strong</span><span>&gt;Default Alert&lt;/</span><span style="color: #E06C75;">strong</span><span>&gt; This is a default alert message.</span></span>
162+
<span class="giallo-l"><span>&lt;/</span><span style="color: #E06C75;">div</span><span>&gt;</span></span>
163+
<span class="giallo-l"></span>
164+
<span class="giallo-l"><span>&lt;</span><span style="color: #E06C75;">div</span><span style="color: #D19A66;"> role</span><span>=</span><span style="color: #98C379;">&quot;alert&quot;</span><span style="color: #D19A66;"> data-variant</span><span>=</span><span style="color: #98C379;">&quot;success&quot;</span><span>&gt;</span></span>
165+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">strong</span><span>&gt;Success!&lt;/</span><span style="color: #E06C75;">strong</span><span>&gt; Your changes have been saved.</span></span>
166+
<span class="giallo-l"><span>&lt;/</span><span style="color: #E06C75;">div</span><span>&gt;</span></span>
167+
<span class="giallo-l"></span>
168+
<span class="giallo-l"><span>&lt;</span><span style="color: #E06C75;">div</span><span style="color: #D19A66;"> role</span><span>=</span><span style="color: #98C379;">&quot;alert&quot;</span><span style="color: #D19A66;"> data-variant</span><span>=</span><span style="color: #98C379;">&quot;warning&quot;</span><span>&gt;</span></span>
169+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">strong</span><span>&gt;Warning!&lt;/</span><span style="color: #E06C75;">strong</span><span>&gt; Please review before continuing.</span></span>
170+
<span class="giallo-l"><span>&lt;/</span><span style="color: #E06C75;">div</span><span>&gt;</span></span>
171+
<span class="giallo-l"></span>
172+
<span class="giallo-l"><span>&lt;</span><span style="color: #E06C75;">div</span><span style="color: #D19A66;"> role</span><span>=</span><span style="color: #98C379;">&quot;alert&quot;</span><span style="color: #D19A66;"> data-variant</span><span>=</span><span style="color: #98C379;">&quot;error&quot;</span><span>&gt;</span></span>
173+
<span class="giallo-l"><span> &lt;</span><span style="color: #E06C75;">strong</span><span>&gt;Error!&lt;/</span><span style="color: #E06C75;">strong</span><span>&gt; Something went wrong.</span></span>
174+
<span class="giallo-l"><span>&lt;/</span><span style="color: #E06C75;">div</span><span>&gt;</span></span></code></pre>
175+
</div>
176+
177+
178+
179+
<footer class="footer text-light">&copy; <a href="https://nadh.in"><small class="text-light">Kailash Nadh</small></a></footer>
180+
</div>
181+
</main>
182+
</body>
183+
</html>

0 commit comments

Comments
 (0)