Skip to content

Commit acf44b9

Browse files
estelleestelle
committed
make everything harder to read
1 parent 2de5b85 commit acf44b9

File tree

5 files changed

+355
-310
lines changed

5 files changed

+355
-310
lines changed

‎modules/animation.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -193,12 +193,12 @@
193193
</style>
194194
</head>
195195
<body>
196-
<input type="checkbox" id="animate" aria-label="Toggle the play state of the animation"><!-- See aria-label: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label -->
196+
<input type="checkbox" id="animate" aria-label="Toggle the play state of the animation" /><!-- See aria-label: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label -->
197197
<label for="animate">the animation</label>
198198
<div class="root">
199-
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
200-
<div class="cloud"></div>
201-
<div class="ground"><div>
199+
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
200+
<div class="cloud"></div>
201+
<div class="ground"><div>
202202
</div>
203203
</body>
204204
</html>

‎modules/backgrounds.html‎

Lines changed: 52 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,56 @@
11
<!DOCTYPE html>
22
<html lang="en-us">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width" />
6-
<title>CSS backgrounds and borders sample</title>
7-
<style>
8-
article {
9-
display: flex;
10-
gap: 10px;
11-
}
12-
div {
13-
color: #58ADE3;
14-
height: 320px;
15-
width: 240px;
16-
padding: 20px;
17-
margin: 10px;
18-
border: dotted 15px; /* defaults to `currentcolor` */
19-
border-radius: 100px 0;
20-
background-image:
21-
radial-gradient(circle, transparent 60%, currentcolor 60% 70%,transparent 70% ),
22-
linear-gradient(45deg, currentcolor, white),
23-
linear-gradient(transparent, transparent);
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>CSS backgrounds and borders sample</title>
7+
<style>
8+
article {
9+
display: flex;
10+
gap: 10px;
11+
}
12+
div {
13+
color: #58ade3;
14+
height: 320px;
15+
width: 240px;
16+
padding: 20px;
17+
margin: 10px;
18+
border: dotted 15px; /* defaults to `currentcolor` */
19+
border-radius: 100px 0;
20+
background-image: radial-gradient(
21+
circle,
22+
transparent 60%,
23+
currentcolor 60% 70%,
24+
transparent 70%
25+
),
26+
linear-gradient(45deg, currentcolor, white),
27+
linear-gradient(transparent, transparent);
2428
/* the third transparent background image was added to provide space for the background color to show through */
25-
background-color: currentcolor;
26-
background-position: center;
27-
background-size: 60px 60px, 120px 120px;
28-
background-clip: content-box, content-box, padding-box;
29-
box-shadow:
30-
inset 5px 5px 5px rgba(0,0,0,0.4),
31-
inset -5px -5px 5px rgba(0,0,0,0.4),
32-
5px 5px 5px rgba(0,0,0,0.4),
33-
-5px -5px 5px rgba(0,0,0,0.4);
34-
}
35-
div:first-of-type {
36-
border-radius: 0;
37-
border-image-source: repeating-conic-gradient(from 3deg at 25% 25%, currentColor 0 3deg, transparent 3deg 6deg);
38-
border-image-slice: 30;
39-
}
40-
</style>
41-
</head>
42-
<body>
43-
<article>
44-
<div></div>
45-
<div></div>
46-
</article>
47-
</body>
29+
background-color: currentcolor;
30+
background-position: center;
31+
background-size: 60px 60px, 120px 120px;
32+
background-clip: content-box, content-box, padding-box;
33+
box-shadow:
34+
inset 5px 5px 5px rgba(0, 0, 0, 0.4),
35+
inset -5px -5px 5px rgba(0, 0, 0, 0.4),
36+
5px 5px 5px rgba(0, 0, 0, 0.4),
37+
-5px -5px 5px rgba(0, 0, 0, 0.4);
38+
}
39+
div:first-of-type {
40+
border-radius: 0;
41+
border-image-source: repeating-conic-gradient(
42+
from 3deg at 25% 25%,
43+
currentColor 0 3deg,
44+
transparent 3deg 6deg
45+
);
46+
border-image-slice: 30;
47+
}
48+
</style>
49+
</head>
50+
<body>
51+
<article>
52+
<div></div>
53+
<div></div>
54+
</article>
55+
</body>
4856
</html>

‎modules/basicUI.html‎

Lines changed: 59 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,65 @@
11
<!DOCTYPE html>
22
<html lang="en-us">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width" />
6-
<title>CSS basic UI module sample</title>
7-
<style>
8-
body {
9-
font-family: sans-serif;
10-
font-size: 1.25rem;
11-
}
12-
[contenteditable] {
13-
cursor: copy;
14-
caret-color: magenta;
15-
border: 1px solid #ccc;
16-
}
17-
:focus {
18-
outline: dashed magenta 3px;
19-
outline-offset: 10px;
20-
}
21-
* {
22-
accent-color: magenta;
23-
}
24-
div, fieldset {
25-
margin: 20px;
26-
}
27-
textarea:nth-of-type(1) {
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>CSS basic UI module sample</title>
7+
<style>
8+
body {
9+
font-family: sans-serif;
10+
font-size: 1.25rem;
11+
}
12+
[contenteditable] {
13+
cursor: copy;
14+
caret-color: magenta;
15+
border: 1px solid #ccc;
16+
}
17+
:focus {
18+
outline: dashed magenta 3px;
19+
outline-offset: 10px;
20+
}
21+
* {
22+
accent-color: magenta;
23+
}
24+
div,
25+
fieldset {
26+
margin: 20px;
27+
}
28+
textarea:nth-of-type(1) {
29+
cursor: wait;
30+
}
31+
textarea:nth-of-type(2) {
32+
resize: none;
33+
}
34+
textarea:nth-of-type(3) {
35+
pointer-events: none;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<div><span contenteditable>Edit this text </span></div>
41+
<fieldset>
42+
<legend>Play with these fake form controls</legend>
43+
<input type="checkbox" id="check" />
44+
<input type="radio" name="a" />
45+
<input type="radio" name="a" />
46+
<input type="range" />
47+
<progress />
48+
</fieldset>
49+
<fieldset>
50+
<legend>Be careful not to ruin usability: try resizing these.</legend>
51+
<textarea>
2852
cursor: wait;
29-
}
30-
textarea:nth-of-type(2) {
53+
</textarea
54+
>
55+
<textarea>
3156
resize: none;
32-
}
33-
textarea:nth-of-type(3) {
57+
</textarea
58+
>
59+
<textarea>
3460
pointer-events: none;
35-
}
36-
</style>
37-
</head>
38-
<body>
39-
<div><span contenteditable>Edit this text </span></div>
40-
<fieldset><legend>Play with these fake form controls</legend>
41-
<input type="checkbox" id="check">
42-
<input type="radio" name="a">
43-
<input type="radio" name="a">
44-
<input type="range">
45-
<progress>
46-
</fieldset>
47-
<fieldset>
48-
<legend>Be careful not to ruin usability: try resizing these.</legend>
49-
<textarea>
50-
cursor: wait;
51-
</textarea>
52-
<textarea>
53-
resize: none;
54-
</textarea>
55-
<textarea>
56-
pointer-events: none;
57-
</textarea>
58-
</fieldset>
59-
</body>
61+
</textarea
62+
>
63+
</fieldset>
64+
</body>
6065
</html>

‎modules/compositing.html‎

Lines changed: 63 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,66 @@
11
<!DOCTYPE html>
22
<html lang="en-us">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width" />
6-
<title>CSS blending and compositing sample</title>
7-
<style>
8-
/* creates a div with two offset striped background images and a background color. */
9-
div {
10-
width: 200px;
11-
height: 200px;
12-
background-image:
13-
repeating-linear-gradient(45deg, red 0 15px, pink 15px 30px),
14-
repeating-linear-gradient(-45deg, blue 0 15px, lightblue 15px 30px);
15-
background-size: 150px 150px;
16-
background-repeat: no-repeat;
17-
background-position: top left, bottom right;
18-
background-color: palegoldenrod;
19-
text-align: center;
20-
padding-top: 150px;
21-
font-family: sans-serif;
22-
box-sizing: border-box;
23-
border: 5px solid black;
24-
}
25-
div:nth-of-type(3n+1){
26-
background-blend-mode: normal;
27-
}
28-
div:nth-of-type(3n+2){
29-
background-blend-mode: multiply;
30-
}
31-
div:nth-of-type(3n+3){
32-
background-blend-mode: overlay;
33-
}
34-
div:nth-of-type(n + 4) {
35-
mix-blend-mode: difference;
36-
}
37-
/* put a pink background with transparent round holes that covers the entire element, and lay the examples in two rows with three columns each */
38-
section {
39-
padding: 0.75em;
40-
background: radial-gradient(circle, transparent 0 20px, rgb(255, 200, 200) 20px);
41-
background-size: 60px 60px;
42-
background-position: center;
43-
display: inline-grid;
44-
grid-template-columns: 1fr 1fr 1fr;
45-
gap: 1em;
46-
}
47-
/* make some of the text more legible */
48-
span {
49-
background-color: #ffffff99;
50-
}
51-
</style>
52-
</head>
53-
<body>
54-
<section>
55-
<div><span>Normal, with no blending</span></div>
56-
<div><span>Multiplies colors</span></div>
57-
<div><span>Multiplies based on background color</span></div>
58-
<div>Normal, with no blending</div>
59-
<div>Multiplies colors</div>
60-
<div>Multiplies based on background color</div>
61-
</section>
62-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>CSS blending and compositing sample</title>
7+
<style>
8+
/* creates a div with two offset striped background images and a background color. */
9+
div {
10+
width: 200px;
11+
height: 200px;
12+
background-image: repeating-linear-gradient(45deg, red 0 15px,pink 15px 30px),
13+
repeating-linear-gradient(-45deg, blue 0 15px, lightblue 15px 30px);
14+
background-size: 150px 150px;
15+
background-repeat: no-repeat;
16+
background-position: top left, bottom right;
17+
background-color: palegoldenrod;
18+
text-align: center;
19+
padding-top: 150px;
20+
font-family: sans-serif;
21+
box-sizing: border-box;
22+
border: 5px solid black;
23+
}
24+
div:nth-of-type(3n + 1) {
25+
background-blend-mode: normal;
26+
}
27+
div:nth-of-type(3n + 2) {
28+
background-blend-mode: multiply;
29+
}
30+
div:nth-of-type(3n + 3) {
31+
background-blend-mode: overlay;
32+
}
33+
div:nth-of-type(n + 4) {
34+
mix-blend-mode: difference;
35+
}
36+
/* put a pink background with transparent round holes that covers the entire element, and lay the examples in two rows with three columns each */
37+
section {
38+
padding: 0.75em;
39+
background: radial-gradient(
40+
circle,
41+
transparent 0 20px,
42+
rgb(255, 200, 200) 20px
43+
);
44+
background-size: 60px 60px;
45+
background-position: center;
46+
display: inline-grid;
47+
grid-template-columns: 1fr 1fr 1fr;
48+
gap: 1em;
49+
}
50+
/* make some of the text more legible */
51+
span {
52+
background-color: #ffffff99;
53+
}
54+
</style>
55+
</head>
56+
<body>
57+
<section>
58+
<div><span>Normal, with no blending</span></div>
59+
<div><span>Multiplies colors</span></div>
60+
<div><span>Multiplies based on background color</span></div>
61+
<div>Normal, with no blending</div>
62+
<div>Multiplies colors</div>
63+
<div>Multiplies based on background color</div>
64+
</section>
65+
</body>
6366
</html>

0 commit comments

Comments
 (0)