-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.pug
275 lines (263 loc) · 14.6 KB
/
index.pug
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible", content="ie=edge")
title 🎍 Ukrop.css
link(rel="stylesheet" href="./dist/ukrop.min.css")
body
header
h1 🎍 Ukrop.css
nav
ul
li
a(href="https://github.com/CosmoMyzrailGorynych/ukrop") View on GitHub 🥒
li
a(href="https://github.com/CosmoMyzrailGorynych/shaverma") Shaverma.css 🌯
li
a(href="https://ctjs.rocks/") ct.js game editor 😺 🎮
main
article
aside
h2 Get Ukrop.css
nav
ul
li
a(href="https://raw.githubusercontent.com/CosmoMyzrailGorynych/ukrop/master/dist/ukrop.min.css").
Download minified CSS
li
a(href="https://github.com/CosmoMyzrailGorynych/ukrop").
Fork/clone the project
include:markdown-it Readme.md
hr
section
aside
h3 Try it out!
button#thePartyMode Toggle color
button#theRoundMode Make it round
button#theDefaultMode Reset borders to default
button#theSquareMode Make it square
h2 Theming
p.
Ukrop.css uses a number of variables that define its look and feel:
ul
li: code --accent
li: code --accent12
li: code --accent25
li: code --contrast
li: code --error-color
li: code --text-color-light
li: code --text-color-dark
li: code --bg-light
li: code --bg-dark
li: code --border-radius
li: code --border-width
section
:markdown-it(html)
## Example: Generic blog post
Lorem ipsum dolor sit amet, consectetur adipiscing elit, *sed do eiusmod tempor incididunt* ut labore et dolore magna aliqua.
Pellentesque habitant **morbi tristique** senectus et netus et malesuada. Quam viverra orci sagittis eu volutpat odio.
Sed cras ornare arcu dui vivamus arcu felis bibendum. Amet consectetur adipiscing elit ut aliquam `purus` sit.
figure
img(src="https://picsum.photos/1280/480" alt="A long, responsive image!")
figcaption A long, responsive image!
:markdown-it(html)
### Interdum posuere lorem
Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. At varius vel pharetra vel turpis nunc eget lorem dolor.
Pretium quam vulputate *dignissim suspendisse* in est ante [in nibh](https://github.com/CosmoMyzrailGorynych/ukrop). Pharetra vel turpis nunc eget **lorem dolor** sed **viverra ipsum**.
Faucibus vitae aliquet nec ullamcorper sit amet risus. Habitasse platea dictumst quisque sagittis. Pellentesque id nibh tortor
id aliquet <b>lectus proin</b> <i>nibh nisl</i>. Convallis `convallis` tellus id interdum velit laoreet id donec.
> Morbi blandit cursus risus at. Amet aliquam id diam maecenas ultricies mi.
> Faucibus vitae aliquet nec ullamcorper sit amet risus.
>
> <cite>Julius Caesar</cite>
aside
h3 Subscriiibe!
form
label
input(type="email" placeholder="[email protected]")
label
input(type="checkbox")
| Every subscription form must have a link to a privacy policy
button Submit
aside
h3 Oh wow, another #[code <aside>] element!
p And they don't break layout and look nicely on mobile!
p Finally, an appropriate use of #[code float]s!
:markdown-it(html)
Turpis egestas sed tempus urna et pharetra pharetra massa massa.
```styl
/* If it fits, it sits. If it sits, it fits. If it fits, it sits. If it sits, it fits.*/
h1, h2, h3, h4, h5, h6
margin $outerSpacing 0 $innerSpacing
&:first-child, aside:first-child + &
margin-top 0
```
Sollicitudin tempor id eu nisl. Leo urna molestie at elementum eu facilisis sed. Consequat id porta nibh venenatis cras.
Elementum sagittis vitae et leo duis ut. Felis bibendum ut tristique et.
figure
img(src="https://picsum.photos/480/240")
figcaption Images by #[a(href="https://picsum.photos/" target="_blank") Lorem Picsum]
:markdown-it(html)
### Nisi scelerisque eu
Nisi scelerisque eu ultrices vitae auctor eu augue ut. At quis risus sed vulputate.
Blandit cursus risus at ultrices. Aliquam [nulla facilisi cras](https://github.com/CosmoMyzrailGorynych/ukrop) fermentum odio eu feugiat pretium nibh.
Nisl tincidunt eget nullam non nisi. Arcu cursus vitae congue mauris rhoncus aenean vel.
Malesuada fames ac turpis egestas integer. Arcu non odio euismod lacinia at quis risus sed vulputate.
Faucibus vitae aliquet nec ullamcorper sit amet risus. Habitasse platea dictumst quisque sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
section
h2 Example: Form elements
form(method="GET")
fieldset
legend Login information
label
| Login:
input(type="text" placeholder="Login")
label
| Email:
input(type="email" placeholder="[email protected]" value="definitelyNotAnEmail")
label
| Password:
input(type="password" placeholder="Password")
fieldset
legend Personal information
label
| Bio:
textarea :b
label
| Favourite color:
select
option Red
option Yellow
option Green
option Cyan
option Blue
option Magenta
option Other
fieldset
legend Idk how to name it really 🤷
label
| Years of experience:
input(type="number" min="0" value="5")
p I am a…
label
input(type="radio" name="stateoflife")
| Student
label
input(type="radio" name="stateoflife" selected)
| Hobbyist
label
input(type="radio" name="stateoflife")
| Professional
fieldset
legend Disabled fields
label
| A disabled input
input(type="text" disabled value="A sample value")
label
| A disabled select
select(disabled)
option Can't touch me
option Toodododoo
option Doodoo
option Doodoo
p Other stuff
label
input(type="radio" name="stateoflife" disabled)
| Student
label
input(type="radio" name="stateoflife" checked disabled)
| Hobbyist
label
input(type="radio" name="stateoflife" disabled)
| Professional
button(disabled) A disabled button
label
input(type="checkbox" checked)
| I want to sell my soul to a devil and get the latest news from The Underground to my inbox
label
input(type="checkbox" required)
| I agree to the #[a(href="https://policies.google.com/terms?hl=en" target="_blank") Terms of Service] of Google
button(type="reset") Cancel
button(type="submit") Submit
section
h2 Example: Table
table
caption IP table
thead
tr
th IP
th Status
th Notes
each num in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
tr
td=`10.10.10.${num}`
td=`${(num + 2) % 5 === 0? 'Disabled' : 'Active'}`
td=`Lorem ipsum ${'dolor '.repeat(Math.random()*5)}`
p A little label at the top of the table is made by the #[code caption] tag.
-
var lorem = 'lorem ipsum dolor sit amet consectetur adipisicing elit perspiciatis quae doloribus voluptatibus accusamus assumenda aperiam necessitatibus corrupti suscipit corporis natus nulla nobis quisquam alias odio modi corrupti nesciunt accusamus enim'
.split(' ');
section
h2 Example: A very long table + #[code section]
p.
Tables are not that easy to wrap or to constrain to specific size without an additional markup.
If you are using semantic html only, the best way is putting it to a separate #[code section].
Still quite semant-y, and #[code section]s will show a scrolllbar underneath tables.
table
thead
tr
each num in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
th=lorem[~~(Math.random()*lorem.length)]
each num in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
tr
each num in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
td=lorem[~~(Math.random()*lorem.length)]
section
h2 Example: A very long table + breaking rules
p.
With a little aid of CSS + one #[code div], you can make a table scrollable. This is not the semantic way™, but whatever:
pre
code.
<div style="overflow-x: auto;">
<table>
…
</table>
</div>
p Result:
div(style="overflow-x: auto;")
table
thead
tr
each num in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
th=lorem[~~(Math.random()*lorem.length)]
each num in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
tr
each num in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
td=lorem[~~(Math.random()*lorem.length)]
footer
p.
Created by Cosmo Myzrail Gorynych. Licensed under MIT.
script.
var colors = ['#03b25f', '#0356b2', '#5f03b2', '#b20356', '#b25f03', '#56b203'];
var currentColor = 0;
document.querySelector('#thePartyMode').addEventListener('click', function () {
currentColor++;
if (currentColor > colors.length -1) {
currentColor = 0;
}
document.body.style.setProperty('--accent', colors[currentColor]);
document.body.style.setProperty('--accent12', colors[currentColor] + '20');
document.body.style.setProperty('--accent25', colors[currentColor] + '40');
});
document.querySelector('#theRoundMode').addEventListener('click', function () {
document.body.style.setProperty('--border-radius', '1rem');
});
document.querySelector('#theDefaultMode').addEventListener('click', function () {
document.body.style.setProperty('--border-radius', '');
});
document.querySelector('#theSquareMode').addEventListener('click', function () {
document.body.style.setProperty('--border-radius', '0');
});