Skip to content

Commit 3c6bfc2

Browse files
dipikabhbsmthteoli2003
authored
fix(css): Update rgb hsl values as per the latest syntax (#158)
* update rgb hsl syntaxes * Add slashes * Apply suggestions from code review Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * chore(css) add newlines to HTML EoF, add language to info strings in markdown --------- Co-authored-by: Brian Thomas Smith <brian@smith.berlin> Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
1 parent d9d9d67 commit 3c6bfc2

28 files changed

+1697
-1692
lines changed

‎learn/backgrounds-borders/background.html

+47-49
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,54 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>Backgrounds and Borders: background</title>
6-
<link rel="stylesheet" href="../styles.css" />
7-
<style>
8-
* {
9-
box-sizing: border-box;
10-
}
11-
.box {
12-
width: 500px;
13-
height: 300px;
14-
padding: 0.5em;
15-
}
16-
</style>
17-
18-
<style class="editable">
19-
.box {
20-
background:
21-
linear-gradient(
22-
105deg,
23-
rgba(255, 255, 255, 0.2) 39%,
24-
rgba(51, 56, 57, 1) 96%
25-
)
26-
center center / 400px 200px no-repeat,
27-
url(big-star.png) center no-repeat,
28-
rebeccapurple;
29-
}
30-
</style>
31-
</head>
32-
33-
<body>
34-
<section class="preview">
35-
<div class="box"></div>
36-
</section>
37-
38-
<textarea class="playable playable-css" style="height: 220px">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Backgrounds and Borders: background</title>
7+
<link rel="stylesheet" href="../styles.css" />
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
12+
13+
.box {
14+
width: 500px;
15+
height: 300px;
16+
padding: 0.5em;
17+
}
18+
</style>
19+
20+
<style class="editable">
21+
.box {
22+
background:
23+
linear-gradient(105deg,
24+
rgb(255 255 255 / 20%) 39%,
25+
rgb(51 56 57 / 100%) 96%) center center / 400px 200px no-repeat,
26+
url(big-star.png) center no-repeat,
27+
rebeccapurple;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<section class="preview">
34+
<div class="box"></div>
35+
</section>
36+
37+
<textarea class="playable playable-css" style="height: 220px">
3938
.box {
4039
background:
41-
linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
40+
linear-gradient(105deg, rgb(255 255 255 / 20%) 39%, rgb(51 56 57 / 100%) 96%) center center / 400px 200px no-repeat,
4241
url(big-star.png) center no-repeat,
4342
rebeccapurple;
44-
}</textarea
45-
>
46-
47-
<textarea class="playable playable-html" style="height: 130px">
48-
<div class="box"></div></textarea
49-
>
50-
51-
<div class="playable-buttons">
52-
<input id="reset" type="button" value="Reset" />
53-
</div>
54-
</body>
55-
<script src="../playable.js"></script>
43+
}</textarea>
44+
45+
<textarea class="playable playable-html" style="height: 130px">
46+
<div class="box"></div></textarea>
47+
48+
<div class="playable-buttons">
49+
<input id="reset" type="button" value="Reset" />
50+
</div>
51+
</body>
52+
<script src="../playable.js"></script>
53+
5654
</html>

‎learn/backgrounds-borders/borders.html

+46-45
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,45 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>Backgrounds and Borders: border</title>
6-
<link rel="stylesheet" href="../styles.css" />
7-
<style>
8-
* {
9-
box-sizing: border-box;
10-
}
11-
.box {
12-
width: 500px;
13-
padding: 0.5em;
14-
}
15-
</style>
163

17-
<style class="editable">
18-
.box {
19-
background-color: #567895;
20-
border: 5px solid #0b385f;
21-
border-bottom-style: dashed;
22-
color: #fff;
23-
}
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Backgrounds and Borders: border</title>
7+
<link rel="stylesheet" href="../styles.css" />
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
2412

25-
h2 {
26-
border-top: 2px dotted rebeccapurple;
27-
border-bottom: 1em double rgb(24, 163, 78);
28-
}
29-
</style>
30-
</head>
13+
.box {
14+
width: 500px;
15+
padding: 0.5em;
16+
}
17+
</style>
3118

32-
<body>
33-
<section class="preview">
34-
<div class="box">
35-
<h2>Borders</h2>
36-
<p>Try changing the borders.</p>
37-
</div>
38-
</section>
19+
<style class="editable">
20+
.box {
21+
background-color: #567895;
22+
border: 5px solid #0b385f;
23+
border-bottom-style: dashed;
24+
color: #fff;
25+
}
3926

40-
<textarea class="playable playable-css" style="height: 220px">
27+
h2 {
28+
border-top: 2px dotted rebeccapurple;
29+
border-bottom: 1em double rgb(24 163 78);
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
<section class="preview">
36+
<div class="box">
37+
<h2>Borders</h2>
38+
<p>Try changing the borders.</p>
39+
</div>
40+
</section>
41+
42+
<textarea class="playable playable-css" style="height: 220px">
4143
.box {
4244
background-color: #567895;
4345
border: 5px solid #0b385f;
@@ -47,20 +49,19 @@ <h2>Borders</h2>
4749

4850
h2 {
4951
border-top: 2px dotted rebeccapurple;
50-
border-bottom: 1em double rgb(24, 163, 78);
51-
}</textarea
52-
>
52+
border-bottom: 1em double rgb(24 163 78);
53+
}</textarea>
5354

54-
<textarea class="playable playable-html" style="height: 130px">
55+
<textarea class="playable playable-html" style="height: 130px">
5556
<div class="box">
5657
<h2>Borders</h2>
5758
<p>Try changing the borders.</p>
58-
</div></textarea
59-
>
59+
</div></textarea>
60+
61+
<div class="playable-buttons">
62+
<input id="reset" type="button" value="Reset" />
63+
</div>
64+
</body>
65+
<script src="../playable.js"></script>
6066

61-
<div class="playable-buttons">
62-
<input id="reset" type="button" value="Reset" />
63-
</div>
64-
</body>
65-
<script src="../playable.js"></script>
6667
</html>

‎learn/backgrounds-borders/color.html

+46-45
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,46 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>Backgrounds and Borders: background-color</title>
6-
<link rel="stylesheet" href="../styles.css" />
7-
<style>
8-
* {
9-
box-sizing: border-box;
10-
}
11-
.box {
12-
width: 500px;
13-
padding: 0.5em;
14-
}
15-
</style>
163

17-
<style class="editable">
18-
.box {
19-
background-color: #567895;
20-
}
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Backgrounds and Borders: background-color</title>
7+
<link rel="stylesheet" href="../styles.css" />
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
2112

22-
h2 {
23-
background-color: black;
24-
color: white;
25-
}
13+
.box {
14+
width: 500px;
15+
padding: 0.5em;
16+
}
17+
</style>
2618

27-
span {
28-
background-color: rgba(255, 255, 255, 0.5);
29-
}
30-
</style>
31-
</head>
19+
<style class="editable">
20+
.box {
21+
background-color: #567895;
22+
}
3223

33-
<body>
34-
<section class="preview">
35-
<div class="box">
36-
<h2>Background Colors</h2>
37-
<p>Try changing the background <span>colors</span>.</p>
38-
</div>
39-
</section>
24+
h2 {
25+
background-color: black;
26+
color: white;
27+
}
4028

41-
<textarea class="playable playable-css" style="height: 220px">
29+
span {
30+
background-color: rgb(255 255 255 / 50%);
31+
}
32+
</style>
33+
</head>
34+
35+
<body>
36+
<section class="preview">
37+
<div class="box">
38+
<h2>Background Colors</h2>
39+
<p>Try changing the background <span>colors</span>.</p>
40+
</div>
41+
</section>
42+
43+
<textarea class="playable playable-css" style="height: 220px">
4244
.box {
4345
background-color: #567895;
4446
}
@@ -48,20 +50,19 @@ <h2>Background Colors</h2>
4850
color: white;
4951
}
5052
span {
51-
background-color: rgba(255,255,255,.5);
52-
}</textarea
53-
>
53+
background-color: rgb(255 255 255 / 50%);
54+
}</textarea>
5455

55-
<textarea class="playable playable-html" style="height: 130px">
56+
<textarea class="playable playable-html" style="height: 130px">
5657
<div class="box">
5758
<h2>Background Colors</h2>
5859
<p>Try changing the background <span>colors</span>.</p>
59-
</div></textarea
60-
>
60+
</div></textarea>
61+
62+
<div class="playable-buttons">
63+
<input id="reset" type="button" value="Reset" />
64+
</div>
65+
</body>
66+
<script src="../playable.js"></script>
6167

62-
<div class="playable-buttons">
63-
<input id="reset" type="button" value="Reset" />
64-
</div>
65-
</body>
66-
<script src="../playable.js"></script>
6768
</html>

0 commit comments

Comments
 (0)