Visitar URL original
Merge remote-tracking branch 'wesbos/master' · wesbos/JavaScript30@e05977a · GitHub
Skip to content

Commit e05977a

Browse files
offirgolanoffirgolan
committed
Merge remote-tracking branch 'wesbos/master'
* wesbos/master: converted to rems and added a space between `rule: value` Sets page title Accessibility fix: Added id attribute to input elements that equals the for attribute of the corresponding label element so that correct label is read out to screenreader when input is focussed on and puts focus on input element if the corresponding label is clicked
2 parents da742c8 + deb005d commit e05977a

5 files changed

Lines changed: 27 additions & 27 deletions

File tree

‎01 - JavaScript Drum Kit/style.css‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
html {
22
font-size: 10px;
3-
background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
3+
background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
44
background-size: cover;
55
}
66
body,html {
@@ -10,41 +10,41 @@ body,html {
1010
}
1111

1212
.keys {
13-
display:flex;
14-
flex:1;
15-
min-height:100vh;
13+
display: flex;
14+
flex: 1;
15+
min-height: 100vh;
1616
align-items: center;
1717
justify-content: center;
1818
}
1919

2020
.key {
21-
border:4px solid black;
22-
border-radius:5px;
23-
margin:1rem;
21+
border: .4rem solid black;
22+
border-radius: .5rem;
23+
margin: 1rem;
2424
font-size: 1.5rem;
25-
padding:1rem .5rem;
26-
transition:all .07s;
27-
width:100px;
25+
padding: 1rem .5rem;
26+
transition: all .07s ease;
27+
width: 10rem;
2828
text-align: center;
29-
color:white;
30-
background:rgba(0,0,0,0.4);
31-
text-shadow:0 0 5px black;
29+
color: white;
30+
background: rgba(0,0,0,0.4);
31+
text-shadow: 0 0 .5rem black;
3232
}
3333

3434
.playing {
35-
transform:scale(1.1);
36-
border-color:#ffc600;
37-
box-shadow: 0 0 10px #ffc600;
35+
transform: scale(1.1);
36+
border-color: #ffc600;
37+
box-shadow: 0 0 1rem #ffc600;
3838
}
3939

4040
kbd {
4141
display: block;
42-
font-size: 40px;
42+
font-size: 4rem;
4343
}
4444

4545
.sound {
4646
font-size: 1.2rem;
4747
text-transform: uppercase;
48-
letter-spacing: 1px;
49-
color:#ffc600;
48+
letter-spacing: .1rem;
49+
color: #ffc600;
5050
}

‎03 - CSS Variables/index-FINISHED.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
99

1010
<div class="controls">
1111
<label for="spacing">Spacing:</label>
12-
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
12+
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
1313

1414
<label for="blur">Blur:</label>
15-
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
15+
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
1616

1717
<label for="base">Base Color</label>
18-
<input type="color" name="base" value="#ffc600">
18+
<input id="base" type="color" name="base" value="#ffc600">
1919
</div>
2020

2121
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

‎03 - CSS Variables/index-START.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
99

1010
<div class="controls">
1111
<label for="spacing">Spacing:</label>
12-
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
12+
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
1313

1414
<label for="blur">Blur:</label>
15-
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
15+
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
1616

1717
<label for="base">Base Color</label>
18-
<input type="color" name="base" value="#ffc600">
18+
<input id="base" type="color" name="base" value="#ffc600">
1919
</div>
2020

2121
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

‎10 - Hold Shift and Check Checkboxes/index-FINISHED.html‎

Lines changed: 1 addition & 1 deletion
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>Document</title>
5+
<title>Hold Shift to Check Multiple Checkboxes</title>
66
</head>
77
<body>
88
<style>

‎10 - Hold Shift and Check Checkboxes/index-START.html‎

Lines changed: 1 addition & 1 deletion
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>Document</title>
5+
<title>Hold Shift to Check Multiple Checkboxes</title>
66
</head>
77
<body>
88
<style>

0 commit comments

Comments
 (0)