Skip to content

Commit 0ddb8f4

Browse files
robb-jrobb-j
committed
tweaks
1 parent b660a48 commit 0ddb8f4

5 files changed

Lines changed: 68 additions & 26 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ This site is the documentation for and hosting of curated fonts for Open Lab web
1111
- Modern formats like variable fonts and woff2
1212
- No reliance on 3rd party services
1313

14-
{% fontPicker %}
14+
{% include "font-picker.njk" %}
1515

1616
## Fonts
1717

‎_includes/font-picker.njk‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!-- If there is indentation in breaks 11ty markdown -->
2+
<details>
3+
<summary>Font picker</summary>
4+
<stack-layout space="s-1">
5+
<cluster-layout space="s-1" justify="space-between">
6+
<label class="field" for="font">
7+
<span class="field-label">Font</span>
8+
<select id="font" name="font"></select>
9+
</label>
10+
11+
<label class="field" for="weight">
12+
<span class="field-label">Font weight</span>
13+
<input type="range" min="400" max="700" id="weight" name="weight" />
14+
</label>
15+
</cluster-layout>
16+
17+
<label class="field">
18+
<textarea id="specimen"></textarea>
19+
</label>
20+
</stack-layout>
21+
</details>

‎_includes/html.njk‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<link
2222
rel="stylesheet"
2323
href="{{ '/lora/lora.css' | url }}"
24-
data-font="Lora var"
24+
data-font="Lora"
2525
data-weights="400 700"
2626
/>
2727
<link
@@ -49,9 +49,7 @@
4949
--fillable: var(--color);
5050
}
5151
body {
52-
--fallback: 'Inter var', Inter, system-ui, sans-serif;
53-
font-family: var(--font, var(--fallback));
54-
font-weight: var(--weight, 400);
52+
font-family: 'Inter var', Inter, system-ui, sans-serif;
5553
}
5654
label:has(#font) {
5755
--measure: 20ch;
@@ -62,6 +60,16 @@
6260
h3 {
6361
--flow: 2em;
6462
}
63+
label:has(#specimen) {
64+
max-width: 100%;
65+
font-size: 1.2em;
66+
}
67+
#specimen {
68+
padding: var(--s2) var(--s0);
69+
font-family: var(--font, var(--fallback));
70+
font-weight: var(--weight, 400);
71+
border-color: var(--border);
72+
}
6573
</style>
6674
</head>
6775
<body>
@@ -88,8 +96,10 @@
8896
</footer>
8997

9098
<script>
99+
const specimen = document.getElementById('specimen')
100+
91101
function setFont(font) {
92-
document.documentElement.style.setProperty('--font', `'${font}'`)
102+
specimen.style.setProperty('--font', `'${font}'`)
93103
94104
const style = document.querySelector(`[data-font="${font}"]`)
95105
if (style.dataset.weights) {
@@ -102,7 +112,7 @@
102112
setWeight(400)
103113
}
104114
function setWeight(value) {
105-
document.documentElement.style.setProperty('--weight', value)
115+
specimen.style.setProperty('--weight', value)
106116
document.getElementById('weight').previousElementSibling.textContent =
107117
`Weight (${value})`
108118
}
@@ -126,6 +136,16 @@
126136
127137
document.getElementById('font').value = 'Inter var'
128138
setFont('Inter var')
139+
140+
const quotes = [
141+
`Design is not just what it looks like and feels like. Design is how it works.`, // Steve Jobs
142+
`A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.`, // Douglas Adams
143+
`Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.`, // Antoine de Saint-Exupér
144+
`Good design is as little as possible. Less, but better, because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.`, // Dieter Rams
145+
]
146+
147+
specimen.value = quotes[Math.floor(Math.random() * quotes.length)]
148+
specimen.style.height = specimen.scrollHeight + 'px'
129149
</script>
130150

131151
<!-- @openlab/alembic inject-js -->

‎eleventy.config.cjs‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,11 @@
11
const { eleventyAlembic } = require('@openlab/alembic/11ty')
22

3-
const fontPicker = `
4-
<details>
5-
<summary>Font picker</summary>
6-
<cluster-layout space="s-1" justify="space-between">
7-
<label class="field" for="font">
8-
<span class="field-label">Font</span>
9-
<select id="font" name="font"></select>
10-
</label>
11-
12-
<label class="field" for="weight">
13-
<span class="field-label">Font weight</span>
14-
<input type="range" min="400" max="700" id="weight" name="weight">
15-
</label>
16-
</cluster-layout>
17-
</details>
18-
`
19-
203
module.exports = function (eleventyConfig) {
214
eleventyConfig.addPlugin(eleventyAlembic, {
225
useLabcoat: true,
236
})
247

258
eleventyConfig.addPassthroughCopy({ source: '.' })
26-
eleventyConfig.addShortcode('fontPicker', () => fontPicker)
279

2810
return {
2911
dir: {

‎source/lora/lora.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* Variable */
1+
/* Variable [legacy] */
22

33
@font-face {
44
font-family: 'Lora var';
@@ -81,3 +81,22 @@
8181
font-display: swap;
8282
src: url('Lora-BoldItalic.woff2') format('woff2');
8383
}
84+
85+
/* Variable [new] */
86+
/* must be declared last to take precidence */
87+
88+
@font-face {
89+
font-family: 'Lora';
90+
font-style: normal;
91+
font-weight: 400 700;
92+
font-display: swap;
93+
src: url('Lora[wght].woff2') format('woff2');
94+
}
95+
96+
@font-face {
97+
font-family: 'Lora';
98+
font-style: italic;
99+
font-weight: 400 700;
100+
font-display: swap;
101+
src: url('Lora-Italic[wght].woff2') format('woff2');
102+
}

0 commit comments

Comments
 (0)