Skip to content

Commit 0a50ffe

Browse files
rachelandrewrachelandrew
committed
fixing values and units examples
1 parent a00d904 commit 0a50ffe

15 files changed

+570
-608
lines changed

Diff for: ‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
.DS_Store
2+
.vscode/*

Diff for: ‎learn/values-units/calc.html

+32-34
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,59 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
3+
<head>
4+
<meta charset="utf-8" />
65
<title>Values and Units: calc</title>
7-
<link rel="stylesheet" href="../styles.css">
6+
<link rel="stylesheet" href="../styles.css" />
87
<style>
9-
* {
10-
box-sizing: border-box;
11-
}
12-
13-
.box {
14-
padding: 1em;
15-
border-radius: .5em;
16-
border: 5px solid rebeccapurple;
17-
background-color: lightblue;
18-
}
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.box {
13+
padding: 1em;
14+
border-radius: 0.5em;
15+
border: 5px solid rebeccapurple;
16+
background-color: lightblue;
17+
}
1918
</style>
2019

2120
<style class="editable">
22-
.wrapper {
23-
width: 400px;
24-
}
21+
.wrapper {
22+
width: 400px;
23+
}
2524

26-
.box {
27-
width: calc(20% + 100px);
28-
}
25+
.box {
26+
width: calc(20% + 100px);
27+
}
2928
</style>
30-
</head>
29+
</head>
3130

32-
<body>
31+
<body>
3332
<section class="preview">
34-
<div class="wrapper">
35-
<div class="box">My width is calculated</div>
36-
</div>
33+
<div class="wrapper">
34+
<div class="box">My width is calculated</div>
35+
</div>
3736
</section>
3837

3938
<textarea class="playable playable-css" style="height: 140px;">
4039
.wrapper {
41-
width: 400px;
40+
width: 400px;
4241
}
4342

4443
.box {
45-
width: calc(20% + 100px);
44+
width: calc(20% + 100px);
4645
}
4746
</textarea>
4847

4948
<textarea class="playable playable-html" style="height: 80px;">
5049
<div class="wrapper">
51-
<div class="box">My width is calculated.</div>
50+
<div class="box">My width is calculated.</div>
5251
</div>
5352
</textarea>
5453

5554
<div class="playable-buttons">
56-
<input id="reset" type="button" value="Reset">
55+
<input id="reset" type="button" value="Reset" />
5756
</div>
58-
</body>
59-
<script src="../playable.js"></script>
60-
61-
</html>
57+
</body>
58+
<script src="../playable.js"></script>
59+
</html>

Diff for: ‎learn/values-units/color-hex.html

+38-42
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,69 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
3+
<head>
4+
<meta charset="utf-8" />
65
<title>Values and Units: color hex codes</title>
7-
<link rel="stylesheet" href="../styles.css">
6+
<link rel="stylesheet" href="../styles.css" />
87
<style>
9-
* {
10-
box-sizing: border-box;
11-
}
12-
.box {
13-
padding: 10px;
14-
margin: 1em 0;
15-
border-radius: .5em;
16-
}
8+
* {
9+
box-sizing: border-box;
10+
}
11+
.box {
12+
padding: 10px;
13+
margin: 1em 0;
14+
border-radius: 0.5em;
15+
}
1716
</style>
1817

1918
<style class="editable">
20-
.one {
21-
background-color: #02798b;
22-
}
23-
24-
.two {
25-
background-color: #c55da1;
26-
}
19+
.one {
20+
background-color: #02798b;
21+
}
2722

28-
.three {
29-
background-color: #128a7d;
30-
}
23+
.two {
24+
background-color: #c55da1;
25+
}
3126

32-
27+
.three {
28+
background-color: #128a7d;
29+
}
3330
</style>
34-
</head>
31+
</head>
3532

36-
<body>
33+
<body>
3734
<section class="preview">
38-
<div class="wrapper">
39-
<div class="box one">#02798b</div>
40-
<div class="box two">#c55da1</div>
41-
<div class="box three">128a7d</div>
42-
</div>
35+
<div class="wrapper">
36+
<div class="box one">#02798b</div>
37+
<div class="box two">#c55da1</div>
38+
<div class="box three">128a7d</div>
39+
</div>
4340
</section>
4441

4542
<textarea class="playable playable-css" style="height: 240px;">
4643
.one {
47-
background-color: #02798b;
44+
background-color: #02798b;
4845
}
4946

5047
.two {
51-
background-color: #c55da1;
48+
background-color: #c55da1;
5249
}
5350

5451
.three {
55-
background-color: #128a7d;
52+
background-color: #128a7d;
5653
}
5754
</textarea>
5855

5956
<textarea class="playable playable-html" style="height: 130px;">
6057
<div class="wrapper">
61-
<div class="box one">#02798b</div>
62-
<div class="box two">#c55da1</div>
63-
<div class="box three">128a7d</div>
58+
<div class="box one">#02798b</div>
59+
<div class="box two">#c55da1</div>
60+
<div class="box three">128a7d</div>
6461
</div>
6562
</textarea>
6663

6764
<div class="playable-buttons">
68-
<input id="reset" type="button" value="Reset">
65+
<input id="reset" type="button" value="Reset" />
6966
</div>
70-
</body>
71-
<script src="../playable.js"></script>
72-
73-
</html>
67+
</body>
68+
<script src="../playable.js"></script>
69+
</html>

Diff for: ‎learn/values-units/color-hsl.html

+38-42
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,69 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
3+
<head>
4+
<meta charset="utf-8" />
65
<title>Values and Units: color hsl codes</title>
7-
<link rel="stylesheet" href="../styles.css">
6+
<link rel="stylesheet" href="../styles.css" />
87
<style>
9-
* {
10-
box-sizing: border-box;
11-
}
12-
.box {
13-
padding: 10px;
14-
margin: 1em 0;
15-
border-radius: .5em;
16-
}
8+
* {
9+
box-sizing: border-box;
10+
}
11+
.box {
12+
padding: 10px;
13+
margin: 1em 0;
14+
border-radius: 0.5em;
15+
}
1716
</style>
1817

1918
<style class="editable">
20-
.one {
21-
background-color: hsl(188, 97%, 28%);
22-
}
23-
24-
.two {
25-
background-color: hsl(321, 47%, 57%);
26-
}
19+
.one {
20+
background-color: hsl(188, 97%, 28%);
21+
}
2722

28-
.three {
29-
background-color: hsl(174,77%,31%);
30-
}
23+
.two {
24+
background-color: hsl(321, 47%, 57%);
25+
}
3126

32-
27+
.three {
28+
background-color: hsl(174, 77%, 31%);
29+
}
3330
</style>
34-
</head>
31+
</head>
3532

36-
<body>
33+
<body>
3734
<section class="preview">
38-
<div class="wrapper">
39-
<div class="box one">hsl(188, 97%, 28%)</div>
40-
<div class="box two">hsl(321, 47%, 57%)</div>
41-
<div class="box three">hsl(174,77%,31%)</div>
42-
</div>
35+
<div class="wrapper">
36+
<div class="box one">hsl(188, 97%, 28%)</div>
37+
<div class="box two">hsl(321, 47%, 57%)</div>
38+
<div class="box three">hsl(174,77%,31%)</div>
39+
</div>
4340
</section>
4441

4542
<textarea class="playable playable-css" style="height: 240px;">
4643
.one {
47-
background-color: hsl(188, 97%, 28%);
44+
background-color: hsl(188, 97%, 28%);
4845
}
4946

5047
.two {
51-
background-color: hsl(321, 47%, 57%);
48+
background-color: hsl(321, 47%, 57%);
5249
}
5350

5451
.three {
55-
background-color: hsl(174, 77%, 31%);
52+
background-color: hsl(174, 77%, 31%);
5653
}
5754
</textarea>
5855

5956
<textarea class="playable playable-html" style="height: 130px;">
6057
<div class="wrapper">
61-
<div class="box one">hsl(188, 97%, 28%)</div>
62-
<div class="box two">hsl(321, 47%, 57%)</div>
63-
<div class="box three">hsl(174, 77%, 31%)</div>
58+
<div class="box one">hsl(188, 97%, 28%)</div>
59+
<div class="box two">hsl(321, 47%, 57%)</div>
60+
<div class="box three">hsl(174, 77%, 31%)</div>
6461
</div>
6562
</textarea>
6663

6764
<div class="playable-buttons">
68-
<input id="reset" type="button" value="Reset">
65+
<input id="reset" type="button" value="Reset" />
6966
</div>
70-
</body>
71-
<script src="../playable.js"></script>
72-
73-
</html>
67+
</body>
68+
<script src="../playable.js"></script>
69+
</html>

0 commit comments

Comments
 (0)