-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
181 lines (149 loc) · 4.8 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> huy.css </title>
<link rel="stylesheet" href="huy/huy.css">
<style>
input[type="checkbox"],input[type="radio"] {
margin-right: 1rem;
}
input[type="radio"]:not(:first-child) {
margin-left: 1rem;
}
h2 {
font-size: 2.5rem;
}
code > pre {
background-color: rgba(212, 212, 212, 0.2);
}
li code {
width: unset
}
</style>
</head>
<body padding>
<main max-w-800 center-self owl>
<h1> huy.css </h1>
<p>
The kitchen sink
</p>
<hr>
<h2> Native HTML tags </h2>
<button> A button (click) </button>
<input type="text" placeholder="Write stuff here">
<label flex-align-center for="chk">
<input type="checkbox" id="chk"> A checkbox input
</label>
<div flex flex-align-center>
<input type="radio" id="contactChoice2"
name="contact" value="phone">
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3"
name="contact" value="mail">
<label for="contactChoice3">Mail</label>
</div>
<p> I need some text here to show the <mark> <mark></mark> tag properly</p>
<p>
The table below is wrapped in <pre noowl><div overflow> ... </div></pre> to be scrollable on mobile devices
</p>
<div overflow>
<table>
<caption>The Three Most Popular JavaScript Libraries</caption>
<thead>
<tr>
<th>Library</th>
<th>jQuery</th>
<th>Bootstrap</th>
<th>Modernizr</th>
</tr>
</thead>
<tbody>
<tr>
<td>Market Share</td>
<td>96.1%</td>
<td>17.0%</td>
<td>14.3%</td>
</tr>
<tr>
<td>Absolute Usage</td>
<td>70.4%</td>
<td>12.4%</td>
<td>10.5%</td>
</tr>
</tbody>
</table>
</div>
A <a href="#!"> link!</a>
<toasts>
</toasts>
<h2> All the custom css used on this site </h2>
<code>
<pre padding>
input[type="checkbox"],input[type="radio"] {
margin-right: 1rem;
}
input[type="radio"]:not(:first-child) {
margin-left: 1rem;
}
h2 {
font-size: 2.5rem;
}
code > pre {
background-color: rgba(212, 212, 212, 0.2);
}
li code {
width: unset
}</pre>
</code>
<h2> Attributes </h2>
<h3> Usage: </h3>
<code> <element attribute> ... </element></code>
<ul>
<li>
<code>owl</code> - adds margin-top to children as specified in the config.css
</li>
<li>
<code>noowl</code> - removes margin-top from a specific element as specified in the config.css
</li>
<li>
<code>padding</code>, <code>padded</code> - sets padding defined in the config.css
</li>
<li>
<code>block</code> - sets display to block
</li>
<li>
<code>inline-block</code> - sets display to inline-block
</li>
<li>
<code>absolute</code> - sets position to absolute
</li>
<li>
<code>flex</code> - sets position to flex
</li>
</ul>
<p>
More will be documented soon, you can find all in attributes.css
</p>
</main>
<script>
const toasts = document.querySelector("toasts")
document.querySelector("button").addEventListener("click", async()=> {
const id = Math.floor(Math.random() * 12048)
toasts.insertAdjacentHTML("afterbegin", `
<toast id='${id}'>
<toast-head> A cool toast 😎 </toast-head>
<toast-body> Wow! What a cool toast! </toast-body>
</toast>
`)
const thisToast = document.querySelector(`[id="${id}"]`);
await new Promise(resolve => setTimeout(resolve, 2000));
thisToast.setAttribute("closed", "");
await new Promise(resolve => setTimeout(resolve, 500));
thisToast.remove();
})
</script>
</body>
</html>