Skip to content

Commit a3b2cf1

Browse files
jpamentaljpamental
committed
Add example pages
1 parent 7476fdf commit a3b2cf1

File tree

3 files changed

+338
-166
lines changed

3 files changed

+338
-166
lines changed

‎variable-fonts/sample-page-static-CSS.html‎

Lines changed: 335 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,335 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Variable Font example page (static CSS)</title>
7+
8+
<style>
9+
@font-face {
10+
font-family: 'Amstelvar VF';
11+
src: url('fonts/Amstelvar-Roman-VF.woff2') format('woff2-variations');
12+
font-weight: 300 900;
13+
font-stretch: 75 150;
14+
font-style: normal;
15+
font-display: swap;
16+
}
17+
@font-face {
18+
font-family: 'Amstelvar VF';
19+
src: url('fonts/Amstelvar-Italic-VF.woff2') format('woff2-variations');
20+
font-weight: normal;
21+
font-stretch: normal;
22+
font-style: italic;
23+
font-display: swap;
24+
}
25+
26+
html {
27+
box-sizing: border-box;
28+
font-size: 100%;
29+
}
30+
31+
*,
32+
*::before,
33+
*::after {
34+
box-sizing: inherit;
35+
}
36+
37+
body {
38+
font: 1.2em "Amstelvar VF", Georgia, serif;
39+
margin: 20px;
40+
padding: 0;
41+
}
42+
43+
.wrapper {
44+
width: 100%;
45+
display: grid;
46+
grid-template-columns: repeat(auto-fill,minmax(29rem,1fr));
47+
grid-gap: 1.5rem;
48+
}
49+
50+
textarea {
51+
font-family: monospace;
52+
display: block;
53+
margin-bottom: 10px;
54+
height: 160px;
55+
background-color: #F4F7F8;
56+
border: none;
57+
border-left: 6px solid #558ABB;
58+
color: #4D4E53;
59+
padding: 1rem 0;
60+
width: 100%;
61+
}
62+
63+
textarea:nth-of-type(1) {
64+
height: 300px;
65+
}
66+
67+
textarea:nth-of-type(2) {
68+
height: 200px;
69+
}
70+
71+
.playable-buttons {
72+
text-align: right;
73+
width: 100%;
74+
padding: 0.5rem 0;
75+
font-size: 100%;
76+
}
77+
78+
.section {
79+
width: 100%;
80+
border: 1px solid #4D4E53;
81+
border-radius: 2px;
82+
padding: 10px 14px 10px 10px;
83+
margin-bottom: 10px;
84+
}
85+
86+
.section input {
87+
display: block;
88+
margin: 5px;
89+
}
90+
91+
.container * {
92+
margin: 0.5rem auto 1rem;
93+
max-width: 42rem;
94+
}
95+
</style>
96+
<style class="editable1">
97+
.container1 h1 {
98+
font-optical-sizing: auto;
99+
font-size: 5rem;
100+
font-stretch: 85%;
101+
font-weight: 450;
102+
}
103+
.container1 h2 {
104+
font-optical-sizing: auto;
105+
font-size: 2.25rem;
106+
font-stretch: 95%;
107+
font-weight: 575;
108+
}
109+
.container1 p {
110+
font-optical-sizing: auto;
111+
font-size: 1rem;
112+
font-stretch: 100%;
113+
font-weight: 375;
114+
}
115+
</style>
116+
<style class="editable2">
117+
.demo2 {
118+
--text-wght: 375;
119+
--text-wdth: 100;
120+
--text-opsz: 16;
121+
}
122+
.container2 h1, .container2 h2, .container2 p {
123+
font-size: 5rem;
124+
font-variation-settings: 'wght' var(--text-wght), 'wdth' var(--text-wdth), 'opsz' var(--text-opsz);
125+
}
126+
.container2 h1 {
127+
--text-wght: 450;
128+
--text-wdth: 85;
129+
--text-opsz: 80;
130+
font-size: 5rem;
131+
}
132+
.container2 h2 {
133+
--text-wght: 575;
134+
--text-wdth: 95;
135+
--text-opsz: 36;
136+
font-size: 2.25rem;
137+
}
138+
.container2 p {
139+
font-size: 1rem;
140+
}
141+
</style>
142+
</head>
143+
144+
<body>
145+
<div class="wrapper">
146+
<div class="demo1">
147+
<section class="section section1">
148+
<div class="container container1">
149+
<h1>Moby Dick</h1>
150+
<h2>CHAPTER 1. Loomings.</h2>
151+
<p>
152+
Call me Ishmael. Some years ago—never mind how long precisely–having
153+
little or no money in my purse, and nothing particular to interest me on
154+
shore, I thought I would sail about a little and see the watery part of
155+
the world. It is a way I have of driving off the spleen and regulating the
156+
circulation. Whenever I find myself growing grim about the mouth; whenever
157+
it is a damp, drizzly November in my soul; whenever I find myself
158+
involuntarily pausing before coffin warehouses, and bringing up the rear
159+
of every funeral I meet; and especially whenever my hypos get such an
160+
upper hand of me, that it requires a strong moral principle to prevent me
161+
from deliberately stepping into the street, and methodically knocking
162+
people’s hats off —then, I account it high time to get to sea as soon
163+
as I can. This is my substitute for pistol and ball. With a philosophical
164+
flourish Cato throws himself upon his sword; I quietly take to the ship.
165+
There is nothing surprising in this. If they but knew it, almost all men
166+
in their degree, some time or other, cherish very nearly the same feelings
167+
towards the ocean with me.
168+
</p>
169+
</div>
170+
</section>
171+
<textarea class="playable-css1">
172+
.container1 h1 {
173+
font-optical-sizing: auto;
174+
font-size: 5rem;
175+
font-stretch: 85%;
176+
font-weight: 450;
177+
}
178+
.container1 h2 {
179+
font-optical-sizing: auto;
180+
font-size: 2.25rem;
181+
font-stretch: 90%;
182+
font-weight: 575;
183+
}
184+
.container1 p {
185+
font-optical-sizing: auto;
186+
font-size: 1rem;
187+
font-stretch: 100%;
188+
font-weight: 375;
189+
}
190+
</textarea>
191+
<textarea id="code1" class="playable-html1">
192+
<div class="container container1">
193+
<h1>Moby Dick</h1>
194+
<h2>CHAPTER 1. Loomings.</h2>
195+
<p>
196+
Call me Ishmael. Some years ago—never mind how long precisely–having
197+
little or no money in my purse, and nothing particular to interest me on
198+
shore, I thought I would sail about a little and see the watery part of
199+
the world. It is a way I have of driving off the spleen and regulating the
200+
circulation. Whenever I find myself growing grim about the mouth; whenever
201+
it is a damp, drizzly November in my soul; whenever I find myself
202+
involuntarily pausing before coffin warehouses, and bringing up the rear
203+
of every funeral I meet; and especially whenever my hypos get such an
204+
upper hand of me, that it requires a strong moral principle to prevent me
205+
from deliberately stepping into the street, and methodically knocking
206+
people’s hats off then, I account it high time to get to sea as soon
207+
as I can. This is my substitute for pistol and ball. With a philosophical
208+
flourish Cato throws himself upon his sword; I quietly take to the ship.
209+
There is nothing surprising in this. If they but knew it, almost all men
210+
in their degree, some time or other, cherish very nearly the same feelings
211+
towards the ocean with me.
212+
</p>
213+
</div>
214+
</textarea>
215+
</div>
216+
<div class="demo2">
217+
<section class="section section2">
218+
<div class="container container2">
219+
<h1>Moby Dick</h1>
220+
<h2>CHAPTER 1. Loomings.</h2>
221+
<p>
222+
Call me Ishmael. Some years ago—never mind how long precisely–having
223+
little or no money in my purse, and nothing particular to interest me on
224+
shore, I thought I would sail about a little and see the watery part of
225+
the world. It is a way I have of driving off the spleen and regulating the
226+
circulation. Whenever I find myself growing grim about the mouth; whenever
227+
it is a damp, drizzly November in my soul; whenever I find myself
228+
involuntarily pausing before coffin warehouses, and bringing up the rear
229+
of every funeral I meet; and especially whenever my hypos get such an
230+
upper hand of me, that it requires a strong moral principle to prevent me
231+
from deliberately stepping into the street, and methodically knocking
232+
people’s hats off —then, I account it high time to get to sea as soon
233+
as I can. This is my substitute for pistol and ball. With a philosophical
234+
flourish Cato throws himself upon his sword; I quietly take to the ship.
235+
There is nothing surprising in this. If they but knew it, almost all men
236+
in their degree, some time or other, cherish very nearly the same feelings
237+
towards the ocean with me.
238+
</p>
239+
</div>
240+
</section>
241+
<textarea class="playable-css2">
242+
.demo2 {
243+
--text-wght: 375;
244+
--text-wdth: 100;
245+
--text-opsz: 16;
246+
}
247+
.container2 h1, .container2 h2, .container2 p {
248+
font-size: 5rem;
249+
font-variation-settings: 'wght' var(--text-wght), 'wdth' var(--text-wdth), 'opsz' var(--text-opsz);
250+
}
251+
.container2 h1 {
252+
--text-wght: 450;
253+
--text-wdth: 85;
254+
--text-opsz: 80;
255+
font-size: 5rem;
256+
}
257+
.container2 h2 {
258+
--text-wght: 575;
259+
--text-wdth: 95;
260+
--text-opsz: 36;
261+
font-size: 2.25rem;
262+
}
263+
.container2 p {
264+
font-size: 1rem;
265+
}
266+
</textarea>
267+
<textarea id="code2" class="playable-html2">
268+
<div class="container container2">
269+
<h1>Moby Dick</h1>
270+
<h2>CHAPTER 1. Loomings.</h2>
271+
<p>
272+
Call me Ishmael. Some years ago—never mind how long precisely–having
273+
little or no money in my purse, and nothing particular to interest me on
274+
shore, I thought I would sail about a little and see the watery part of
275+
the world. It is a way I have of driving off the spleen and regulating the
276+
circulation. Whenever I find myself growing grim about the mouth; whenever
277+
it is a damp, drizzly November in my soul; whenever I find myself
278+
involuntarily pausing before coffin warehouses, and bringing up the rear
279+
of every funeral I meet; and especially whenever my hypos get such an
280+
upper hand of me, that it requires a strong moral principle to prevent me
281+
from deliberately stepping into the street, and methodically knocking
282+
people’s hats off then, I account it high time to get to sea as soon
283+
as I can. This is my substitute for pistol and ball. With a philosophical
284+
flourish Cato throws himself upon his sword; I quietly take to the ship.
285+
There is nothing surprising in this. If they but knew it, almost all men
286+
in their degree, some time or other, cherish very nearly the same feelings
287+
towards the ocean with me.
288+
</p>
289+
</div>
290+
</textarea>
291+
</div>
292+
</div>
293+
<div class="playable-buttons">
294+
<input id="reset" type="button" value="Reset">
295+
</div>
296+
</body>
297+
<script>
298+
var section1 = document.querySelector('.section1');
299+
var editable1 = document.querySelector('.editable1');
300+
var textareaHTML1 = document.querySelector('.playable-html1');
301+
var textareaCSS1 = document.querySelector('.playable-css1');
302+
var section2 = document.querySelector('.section2');
303+
var editable2 = document.querySelector('.editable2');
304+
var textareaHTML2 = document.querySelector('.playable-html2');
305+
var textareaCSS2 = document.querySelector('.playable-css2');
306+
var reset = document.getElementById('reset');
307+
var htmlCode1 = textareaHTML1.value;
308+
var cssCode1 = textareaCSS1.value;
309+
var htmlCode2 = textareaHTML2.value;
310+
var cssCode2 = textareaCSS2.value;
311+
312+
function fillCode() {
313+
editable1.innerHTML = textareaCSS1.value;
314+
section1.innerHTML = textareaHTML1.value;
315+
editable2.innerHTML = textareaCSS2.value;
316+
section2.innerHTML = textareaHTML2.value;
317+
}
318+
319+
reset.addEventListener('click', function () {
320+
textareaHTML1.value = htmlCode1;
321+
textareaCSS1.value = cssCode1;
322+
textareaHTML2.value = htmlCode2;
323+
textareaCSS2.value = cssCode2;
324+
fillCode();
325+
});
326+
327+
textareaHTML1.addEventListener('input', fillCode);
328+
textareaCSS1.addEventListener('input', fillCode);
329+
textareaHTML2.addEventListener('input', fillCode);
330+
textareaCSS2.addEventListener('input', fillCode);
331+
window.addEventListener('load', fillCode);
332+
333+
</script>
334+
335+
</html>

0 commit comments

Comments
 (0)