Skip to content

Commit 31b2898

Browse files
mtdownermtdowner
authored
Merge branch 'mdn:main' into main
2 parents 3ac3f9c + becd34a commit 31b2898

File tree

19 files changed

+1041
-170
lines changed

19 files changed

+1041
-170
lines changed

‎images/image-set-type.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
<style class="editable">
1818
.box {
1919
background-image: -webkit-image-set(
20-
url("large-balloons.avif") type("image/avif"),
21-
url("large-balloons.jpg") type("image/jpeg"));
20+
url("large-balloons.avif"),
21+
url("large-balloons.jpg"));
2222
background-image: image-set(
2323
url("large-balloons.avif") type("image/avif"),
2424
url("large-balloons.jpg") type("image/jpeg"));
@@ -34,8 +34,8 @@
3434
<textarea class="playable playable-css" style="height: 155px;">
3535
.box {
3636
background-image: -webkit-image-set(
37-
url("large-balloons.avif") type("image/avif"),
38-
url("large-balloons.jpg") type("image/jpeg"));
37+
url("large-balloons.avif"),
38+
url("large-balloons.jpg"));
3939
background-image: image-set(
4040
url("large-balloons.avif") type("image/avif"),
4141
url("large-balloons.jpg") type("image/jpeg"));

‎learn/cascade/all.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111

1212
<style class="editable">
1313
blockquote {
14-
background-color: red;
15-
border: 2px solid green;
14+
background-color: orange;
15+
border: 2px solid blue;
1616
}
1717

1818
.fix-this {
@@ -34,8 +34,8 @@
3434

3535
<textarea class="playable playable-css" style="height: 280px;">
3636
blockquote {
37-
background-color: red;
38-
border: 2px solid green;
37+
background-color: orange;
38+
border: 2px solid blue;
3939
}
4040

4141
.fix-this {
@@ -59,4 +59,4 @@
5959
</body>
6060
<script src="../playable.js"></script>
6161

62-
</html>
62+
</html>

‎learn/media-queries/grid.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
background-color: rgba(207, 232, 220, 0.7);
4242
}
4343

44+
.content {
45+
margin-bottom: 1em;
46+
}
47+
4448
.related {
4549
background-color: rgba(79, 185, 227, 0.3);
4650
border: 1px solid rgb(79, 185, 227);

‎learn/selectors/after-icon.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
<style class="editable">
1313
.box::after {
14-
content: " ➥"
14+
content: " ➥";
1515
}
1616

1717
</style>
@@ -24,7 +24,7 @@
2424

2525
<textarea class="playable playable-css" style="height: 80px;">
2626
.box::after {
27-
content: " ➥"
27+
content: " ➥";
2828
}
2929
</textarea>
3030

@@ -38,4 +38,4 @@
3838
</body>
3939
<script src="../playable.js"></script>
4040

41-
</html>
41+
</html>

‎learn/selectors/before.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
<style class="editable">
1313
.box::before {
14-
content: "This should show before the other content."
14+
content: "This should show before the other content. ";
1515
}
1616

1717
</style>
@@ -24,7 +24,7 @@
2424

2525
<textarea class="playable playable-css" style="height: 80px;">
2626
.box::before {
27-
content: "This should show before the other content."
27+
content: "This should show before the other content. ";
2828
}
2929
</textarea>
3030

@@ -38,4 +38,4 @@
3838
</body>
3939
<script src="../playable.js"></script>
4040

41-
</html>
41+
</html>

‎learn/tasks/backgrounds/backgrounds2-download.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8"/>
5-
<title>Backgrounds and Borders: Task 1</title>
5+
<title>Backgrounds and Borders: Task 2</title>
66
<style>
77
body {
88
background-color: #fff;
@@ -30,4 +30,4 @@ <h2>Backgrounds &amp; Borders</h2>
3030

3131
</body>
3232

33-
</html>
33+
</html>

‎learn/tasks/position/marking.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Floats Marking Guide
1+
# Position Marking Guide
22

33
The aim of the tasks are to demonstrate an understanding of the properties covered in the [Positioning](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning) lesson in Learn Web Development on MDN.
44

‎learn/tasks/selectors/pseudo-download.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
<div class="container">
3636
<p>Veggies es
37-
<a href="http://example.com">bonus vobis</a>, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
37+
<a href="https://example.com">bonus vobis</a>, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
3838
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
3939
<table>
4040
<tr>
@@ -66,4 +66,4 @@
6666

6767
</body>
6868

69-
</html>
69+
</html>

‎modules/colors.html

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>Color syntax converter</title>
7+
<style>
8+
dialog {
9+
border: 1px solid;
10+
border-radius: 5px;
11+
box-shadow: 3px 3px 10px rgb(0 0 0 / 0.2);
12+
background-color: white;
13+
font-family: segue, arial, helvetica, sans-serif;
14+
margin-top: 5vh;
15+
}
16+
table {
17+
width: 100%;
18+
}
19+
td,
20+
th {
21+
padding: 3px 15px;
22+
}
23+
th {
24+
background-color: #ededed;
25+
}
26+
td {
27+
background-color: #dedede;
28+
font-family: monospace;
29+
}
30+
body {
31+
background: linear-gradient(
32+
-90deg,
33+
transparent 0 38%,
34+
47%,
35+
rgb(0 0 0 / 0.7) 50%,
36+
white 50% 100%
37+
),
38+
conic-gradient(
39+
black 0 90deg,
40+
transparent 90deg 180deg,
41+
black 180deg 270deg,
42+
transparent 270deg 360deg
43+
);
44+
background-size: 100% 100%, 20px 20px;
45+
padding: 0;
46+
margin: 0;
47+
}
48+
div {
49+
width: 100vw;
50+
height: 100vh;
51+
}
52+
</style>
53+
</head>
54+
<body>
55+
<div>
56+
<dialog>
57+
<table>
58+
<caption>
59+
Current color values:
60+
</caption>
61+
<tbody>
62+
<tr id="RGB">
63+
<th>RGB</th>
64+
<td></td>
65+
</tr>
66+
<tr id="HEX">
67+
<th>HEX</th>
68+
<td></td>
69+
</tr>
70+
<tr id="HSL">
71+
<th>HSL</th>
72+
<td></td>
73+
</tr>
74+
<tr id="HWB">
75+
<th>HWB</th>
76+
<td></td>
77+
</tr>
78+
</tbody>
79+
</table>
80+
81+
<p>
82+
<label for="color">Select a color: </label
83+
><input type="color" id="color" value="#bada55" />
84+
</p>
85+
<p>
86+
<label for="opacity">Select an opacity: </label
87+
><input
88+
type="range"
89+
id="opacity"
90+
value="1"
91+
min="0"
92+
max="1"
93+
step="0.1"
94+
/>
95+
</p>
96+
</dialog>
97+
</div>
98+
<script>
99+
const colorPicker = document.getElementById("color");
100+
const opacityPicker = document.getElementById("opacity");
101+
102+
document.addEventListener("readystatechange", () => {
103+
document.querySelector("dialog").show();
104+
createColor();
105+
});
106+
107+
colorPicker.addEventListener("change", () => {
108+
createColor();
109+
});
110+
111+
opacityPicker.addEventListener("change", () => {
112+
createColor();
113+
});
114+
115+
function createColor() {
116+
const currentColor = colorPicker.value;
117+
const currentOpacity = Number(opacityPicker.value);
118+
setBackgroundColor(currentColor, currentOpacity);
119+
createHEX(currentColor, currentOpacity);
120+
createRGB(currentColor, currentOpacity);
121+
}
122+
123+
function createHEX(color, opacity) {
124+
const cell = document.querySelector("#HEX td");
125+
if (opacity === 1) {
126+
cell.textContent = color;
127+
} else {
128+
cell.textContent = hexOpacity(color, opacity);
129+
}
130+
}
131+
132+
function createRGB(color, opacity) {
133+
const cell = document.querySelector("#RGB td");
134+
color = color.substring(1, 7);
135+
const hexArray = color.match(/.{1,2}/g);
136+
const R = parseInt(hexArray[0], 16);
137+
const G = parseInt(hexArray[1], 16);
138+
const B = parseInt(hexArray[2], 16);
139+
140+
if (opacity === 1) {
141+
cell.textContent = `rgb(${R} ${G} ${B})`;
142+
} else {
143+
cell.textContent = `rgb(${R} ${G} ${B} / ${opacity})`;
144+
}
145+
createHSL(R, G, B, opacity);
146+
}
147+
148+
function createHSL(r, g, b, opacity) {
149+
const cell = document.querySelector("#HSL td");
150+
// Let's have r, g, b in the range [0, 1]
151+
r = r / 255;
152+
g = g / 255;
153+
b = b / 255;
154+
const cmin = Math.min(r, g, b);
155+
const cmax = Math.max(r, g, b);
156+
const delta = cmax - cmin;
157+
let h = 0,
158+
s = 0,
159+
l = 0;
160+
161+
if (delta === 0) {
162+
h = 0;
163+
} else if (cmax === r) {
164+
h = ((g - b) / delta) % 6;
165+
} else if (cmax === g) {
166+
h = (b - r) / delta + 2;
167+
}
168+
else h = (r - g) / delta + 4;
169+
170+
h = Math.round(h * 60);
171+
172+
// We want an angle between 0 and 360°
173+
if (h < 0) {
174+
h += 360;
175+
}
176+
177+
l = (cmax + cmin) / 2;
178+
s = (delta === 0) ? 0 : delta / (1 - Math.abs(2 * l - 1));
179+
s = Number((s * 100).toFixed(1));
180+
l = Number((l * 100).toFixed(1));
181+
182+
if (opacity === 1) {
183+
cell.textContent = `hsl(${h} ${s}% ${l}%)`;
184+
} else {
185+
cell.textContent = `hsl(${h} ${s}% ${l}% / ${opacity})`;
186+
}
187+
createHWB(h, s, l, opacity);
188+
}
189+
190+
function createHWB(h, s, l, opacity) {
191+
const cell = document.querySelector("#HWB td");
192+
const chroma = s * (1 - Math.abs(l/50 - 1));
193+
let W = l - chroma / 2;
194+
let B = 100 - l - chroma / 2;
195+
W = W.toFixed(1);
196+
B = B.toFixed(1);
197+
if (opacity === 1) {
198+
cell.textContent = `hwb(${h} ${W}% ${B}%)`;
199+
} else {
200+
cell.textContent = `hwb(${h} ${W}% ${B}% / ${opacity})`;
201+
}
202+
}
203+
204+
function setBackgroundColor(color, opacity) {
205+
const body = document.querySelector("div");
206+
if (opacity !== 1) {
207+
color = hexOpacity(color, opacity);
208+
}
209+
body.style.backgroundColor = color;
210+
opacityPicker.style.accentColor = color;
211+
colorPicker.style.accentColor = color;
212+
}
213+
214+
function hexOpacity(color, opacity) {
215+
let char = "00";
216+
if (opacity > 0) {
217+
char = Math.floor(opacity * 255).toString(16);
218+
}
219+
return `${color}${char}`;
220+
}
221+
</script>
222+
</body>
223+
</html>

0 commit comments

Comments
 (0)