Skip to content

Commit 0cd0c5a

Browse files
chrisdavidmillschrisdavidmills
authored
Merge pull request mdn#5 from jpamental/master
Updates to widths and spacing
2 parents 8339e40 + 2bad398 commit 0cd0c5a

File tree

7 files changed

+331
-331
lines changed

7 files changed

+331
-331
lines changed

‎variable-fonts/grade.html‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
.wrapper {
3636
width: 100%;
3737
display: grid;
38-
grid-template-columns: repeat(auto-fill,minmax(28rem,1fr));
39-
grid-gap: 2rem;
38+
grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
39+
grid-gap: 1rem;
4040
}
4141

4242
textarea {
@@ -96,7 +96,7 @@
9696
}
9797
</style>
9898
<style class="editable2">
99-
/* Adjusted with slider and custom property */
99+
/* Adjust with slider & custom property */
100100
.container2 * {
101101
font-size: 64px;
102102
font-variation-settings: 'GRAD' var(--text-axis);
@@ -112,17 +112,17 @@
112112
<p>Grade</p>
113113
</div>
114114
</section>
115-
<textarea class="playable-css1">
116-
/* grade (GRAD) range is 88 (default) up to 150 */
117-
.container1 * {
118-
font-size: 64px;
119-
font-variation-settings: 'GRAD' 88;
120-
}
121-
</textarea>
122-
<textarea id="code1" class="playable-html1">
123-
<div class="container container1">
124-
<p>Grade</p>
125-
</div>
115+
<textarea class="playable-css1">
116+
/* grade (GRAD) range is 88 (default) up to 150 */
117+
.container1 * {
118+
font-size: 64px;
119+
font-variation-settings: 'GRAD' 88;
120+
}
121+
</textarea>
122+
<textarea id="code1" class="playable-html1">
123+
<div class="container container1">
124+
<p>Grade</p>
125+
</div>
126126
</textarea>
127127
</div>
128128
<div class="demo2">
@@ -131,18 +131,18 @@
131131
<p>Grade</p>
132132
</div>
133133
</section>
134-
<textarea class="playable-css2">
135-
/* Adjusted with slider and custom property */
136-
.container2 * {
137-
font-size: 64px;
138-
font-variation-settings: 'GRAD' var(--text-axis);
139-
}
140-
</textarea>
141-
<textarea id="code2" class="playable-html2">
142-
<div class="container container2">
143-
<p>Grade</p>
144-
</div>
145-
</textarea>
134+
<textarea class="playable-css2">
135+
/* Adjust with slider & custom property */
136+
.container2 * {
137+
font-size: 64px;
138+
font-variation-settings: 'GRAD' var(--text-axis);
139+
}
140+
</textarea>
141+
<textarea id="code2" class="playable-html2">
142+
<div class="container container2">
143+
<p>Grade</p>
144+
</div>
145+
</textarea>
146146
<div class="controls range-slider">
147147
<label for="controls__slider">Adjust Grade: </label><input type="range" name="range-slider" value="88" id="text-axis" class="controls--slider" min="88" max="150">
148148
</div>

‎variable-fonts/italic.html‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
.wrapper {
3636
width: 100%;
3737
display: grid;
38-
grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
39-
grid-gap: 1.5rem;
38+
grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
39+
grid-gap: 1rem;
4040
}
4141

4242
textarea {
@@ -103,7 +103,7 @@
103103
}
104104
</style>
105105
<style class="editable3">
106-
/* Adjusted with slider and custom property */
106+
/* Adjust with slider & custom property */
107107
.container3 * {
108108
font-variation-settings: 'ital' var(--text-axis);
109109
}
@@ -118,53 +118,53 @@
118118
<p>Italic</p>
119119
</div>
120120
</section>
121-
<textarea class="playable-css1">
122-
/* italic can only be italic or normal */
123-
.container1 * {
124-
font-style: italic;
125-
}
126-
</textarea>
127-
<textarea id="code1" class="playable-html1">
128-
<div class="container container1">
129-
<p>Italic</p>
130-
</div>
131-
</textarea>
121+
<textarea class="playable-css1">
122+
/* italic can only be italic or normal */
123+
.container1 * {
124+
font-style: italic;
125+
}
126+
</textarea>
127+
<textarea id="code1" class="playable-html1">
128+
<div class="container container1">
129+
<p>Italic</p>
130+
</div>
131+
</textarea>
132132
</div>
133133
<div class="demo2">
134134
<section class="section section2">
135135
<div class="container container2">
136136
<p>Italic</p>
137137
</div>
138138
</section>
139-
<textarea class="playable-css2">
140-
/* italic can only be italic or normal */
141-
.container2 * {
142-
font-variation-settings: 'ital' 1;
143-
}
144-
</textarea>
145-
<textarea id="code2" class="playable-html2">
146-
<div class="container container2">
147-
<p>Italic</p>
148-
</div>
149-
</textarea>
139+
<textarea class="playable-css2">
140+
/* italic can only be italic or normal */
141+
.container2 * {
142+
font-variation-settings: 'ital' 1;
143+
}
144+
</textarea>
145+
<textarea id="code2" class="playable-html2">
146+
<div class="container container2">
147+
<p>Italic</p>
148+
</div>
149+
</textarea>
150150
</div>
151151
<div class="demo3">
152152
<section class="section section3">
153153
<div class="container container3">
154154
<p>Italic</p>
155155
</div>
156156
</section>
157-
<textarea class="playable-css3">
158-
/* Adjusted with slider and custom property */
159-
.container3 * {
160-
font-variation-settings: 'ital' var(--text-axis);
161-
}
162-
</textarea>
163-
<textarea id="code3" class="playable-html3">
164-
<div class="container container3">
165-
<p>Italic</p>
166-
</div>
167-
</textarea>
157+
<textarea class="playable-css3">
158+
/* Adjust with slider & custom property */
159+
.container3 * {
160+
font-variation-settings: 'ital' var(--text-axis);
161+
}
162+
</textarea>
163+
<textarea id="code3" class="playable-html3">
164+
<div class="container container3">
165+
<p>Italic</p>
166+
</div>
167+
</textarea>
168168
<div class="controls range-slider">
169169
<label for="controls__slider">Adjust Italic: </label><input type="range" name="range-slider" value="1" id="text-axis" class="controls--slider" min="0" max="1">
170170
</div>

‎variable-fonts/optical-sizing.html‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
.wrapper {
3636
width: 100%;
3737
display: grid;
38-
grid-template-columns: repeat(auto-fill,minmax(29rem,1fr));
39-
grid-gap: 1.5rem;
38+
grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
39+
grid-gap: 1rem;
4040
}
4141

4242
textarea {
@@ -111,7 +111,7 @@
111111
}
112112
</style>
113113
<style class="editable3">
114-
/* Adjusted with slider and custom property */
114+
/* Adjust with slider & custom property */
115115
.container3 * {
116116
font-size: 64px;
117117
font-variation-settings: 'opsz' var(--text-axis);
@@ -127,75 +127,75 @@
127127
<p>Optical Size</p>
128128
</div>
129129
</section>
130-
<textarea class="playable-css0">
131-
/* font-optical-sizing can be auto or none */
132-
.container0 * {
133-
font-size: 64px;
134-
font-optical-sizing: none;
135-
}
136-
</textarea>
137-
<textarea id="code1" class="playable-html0">
138-
<div class="container container0">
139-
<p>Optical Size</p>
140-
</div>
141-
</textarea>
130+
<textarea class="playable-css0">
131+
/* font-optical-sizing can be auto or none */
132+
.container0 * {
133+
font-size: 64px;
134+
font-optical-sizing: none;
135+
}
136+
</textarea>
137+
<textarea id="code1" class="playable-html0">
138+
<div class="container container0">
139+
<p>Optical Size</p>
140+
</div>
141+
</textarea>
142142
</div>
143143
<div class="demo1">
144144
<section class="section section1">
145145
<div class="container container1">
146146
<p>Optical Size</p>
147147
</div>
148148
</section>
149-
<textarea class="playable-css1">
150-
/* font-optical-sizing can be auto or none */
151-
.container1 * {
152-
font-size: 64px;
153-
font-optical-sizing: auto;
154-
}
155-
</textarea>
156-
<textarea id="code1" class="playable-html1">
157-
<div class="container container1">
158-
<p>Optical Size</p>
159-
</div>
160-
</textarea>
149+
<textarea class="playable-css1">
150+
/* font-optical-sizing can be auto or none */
151+
.container1 * {
152+
font-size: 64px;
153+
font-optical-sizing: auto;
154+
}
155+
</textarea>
156+
<textarea id="code1" class="playable-html1">
157+
<div class="container container1">
158+
<p>Optical Size</p>
159+
</div>
160+
</textarea>
161161
</div>
162162
<div class="demo2">
163163
<section class="section section2">
164164
<div class="container container2">
165165
<p>Optical Size</p>
166166
</div>
167167
</section>
168-
<textarea class="playable-css2">
169-
/* optical size range is from 8 to 144 */
170-
.container2 * {
171-
font-size: 64px;
172-
font-variation-settings: 'opsz' 64;
173-
}
174-
</textarea>
175-
<textarea id="code2" class="playable-html2">
176-
<div class="container container2">
177-
<p>Optical Size</p>
178-
</div>
179-
</textarea>
168+
<textarea class="playable-css2">
169+
/* optical size range is from 8 to 144 */
170+
.container2 * {
171+
font-size: 64px;
172+
font-variation-settings: 'opsz' 64;
173+
}
174+
</textarea>
175+
<textarea id="code2" class="playable-html2">
176+
<div class="container container2">
177+
<p>Optical Size</p>
178+
</div>
179+
</textarea>
180180
</div>
181181
<div class="demo3">
182182
<section class="section section3">
183183
<div class="container container3">
184184
<p>Optical Size</p>
185185
</div>
186186
</section>
187-
<textarea class="playable-css3">
188-
/* Adjusted with slider and custom property */
189-
.container3 * {
190-
font-size: 64px;
191-
font-variation-settings: 'opsz' var(--text-axis);
192-
}
193-
</textarea>
194-
<textarea id="code3" class="playable-html3">
195-
<div class="container container3">
196-
<p>Optical Size</p>
197-
</div>
198-
</textarea>
187+
<textarea class="playable-css3">
188+
/* Adjust with slider & custom property */
189+
.container3 * {
190+
font-size: 64px;
191+
font-variation-settings: 'opsz' var(--text-axis);
192+
}
193+
</textarea>
194+
<textarea id="code3" class="playable-html3">
195+
<div class="container container3">
196+
<p>Optical Size</p>
197+
</div>
198+
</textarea>
199199
<div class="controls range-slider">
200200
<label for="controls__slider">Adjust Optical Sizing: </label><input type="range" name="range-slider" value="64" id="text-axis" class="controls--slider" min="8" max="144">
201201
</div>

0 commit comments

Comments
 (0)