From 805cdcb23ed05ceed318af182803f4275f0b7c42 Mon Sep 17 00:00:00 2001 From: Koen Lagveen Date: Fri, 21 Jul 2023 22:45:18 +0200 Subject: [PATCH] start displaying font descriptions --- fonts-schema.json | 19 +++++++++---- fonts.json | 71 ++++++++--------------------------------------- index.css | 39 ++++++++++++++++++++++++++ index.html | 20 +++++++++---- index.js | 17 ++++++++++-- 5 files changed, 94 insertions(+), 72 deletions(-) diff --git a/fonts-schema.json b/fonts-schema.json index 061afd0..9d69691 100644 --- a/fonts-schema.json +++ b/fonts-schema.json @@ -55,12 +55,19 @@ "enum": ["empty", "slashed", "dotted"] }, "variants": { - "type": "array", - "items": { - "type": "string", - "pattern": "^([a-z-]+|\\d00)$" - }, - "minItems": 1 + "oneOf": [ + { + "type": "array", + "items": { + "type": "string", + "pattern": "^([a-z-]+|\\d00)$" + }, + "minItems": 1 + }, + { + "type": "string" + } + ] } }, "additionalProperties": false, diff --git a/fonts.json b/fonts.json index 8773fa3..41612b8 100644 --- a/fonts.json +++ b/fonts.json @@ -1,7 +1,7 @@ { "agave": { "author": "agaric", - "description": "Although in intention simple and systematic, Agave has lots of quirky character. Distinct, readable and well aligned characters round out a font that should cover all characters in most code use cases if not all languages of the world. The capital Q is particularly cool. Sadly, like a lot of alternatives, it doesn’t offer true bold and italic.", + "description": "Although in intention simple and systematic, Agave has lots of quirky character.", "license": "MIT", "ligatures": false, "name": "Agave", @@ -31,7 +31,7 @@ }, "anonymous-pro": { "author": "Mark Simonson", - "description": "Anonymous Pro is an evolution of the original Anonymous, adding lots of character sets and styles. It covers all the characters (624 glyphs), styles and weights anyone will ever need, and with all characters easily distinguishable. For fans of having lots of code on screen, it even features bitmap versions for really tiny characters (without anti-aliasing). It’s a truly professional option with a splash of character.", + "description": "Anonymous Pro is an evolution of the original Anonymous, adding lots of character sets and styles.", "license": "SIL OFL", "ligatures": false, "name": "Anonymous Pro", @@ -109,25 +109,7 @@ "rendering": "vector", "style": "sans", "zerostyle": "empty", - "variants": [ - "thin", - "thin-italic", - "light", - "light-italic", - "extrabold", - "extrabold-italic", - "black", - "black-italic", - "extralight", - "extralight-italic", - "medium", - "medium-italic", - "semibold", - "semibold-italic", - "regular", - "italic", - "variable" - ], + "variants": "A variable font, available in various weights.", "website": "https://github.com/displaay/Azeret", "year": 2020 }, @@ -246,31 +228,14 @@ }, "cartograph": { "author": "Connary Fagen", - "description": "A monospaced typeface with character and warmth, Cartograph is a handsome font family featuring a lush, cursive italic, code-friendly ligatures, and a proportional set accessible via OpenType. A tribute to the utilitarian beauty of terminals and typewriters, Cartograph excels in code and prose.", + "description": "A monospaced typeface with character and warmth, Cartograph is a handsome font family featuring a lush, cursive italic, code-friendly ligatures, and a proportional set accessible via OpenType.", "license": "commercial", "ligatures": true, "name": "Cartograph", "rendering": "vector", "style": "sans", "zerostyle": "dotted", - "variants": [ - "regular", - "italic", - "bold", - "bold-italic", - "demi-bold", - "demi-bold-italic", - "extra-bold", - "extra-bold-italic", - "heavy", - "heavy-italic", - "light", - "light-italic", - "extra-light", - "extra-light-italic", - "thin", - "thin-italic" - ], + "variants": "8 weights and various alternatives via OpenType sets, including ligatures.", "website": "https://connary.com/cartograph.html", "year": 2016 }, @@ -278,23 +243,11 @@ "author": "Aaron Bell", "ligatures": true, "name": "Cascadia Code", + "description": "This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.", "rendering": "vector", "style": "sans", "zerostyle": "dotted", - "variants": [ - "regular", - "italic", - "bold", - "bold-italic", - "semi-bold", - "semi-bold-italic", - "light", - "light-italic", - "semi-light", - "semi-light-italic", - "extra-light", - "extra-light-italic" - ], + "variants": "6 weights and various alternatives via OpenType sets, including slashed zeroes and cursive italics.", "website": "https://github.com/microsoft/cascadia-code", "year": 2019 }, @@ -326,7 +279,7 @@ }, "comic-shanns": { "author": "Shannon Miwa", - "description": "Like if someone made a dumbass version of Comic Sans that is monospaced.", + "description": "Do you lie awake every night dreaming about a world where you could write your code in Comic Sans where it looks just as beautiful as on your dear presentations?", "license": "MIT", "ligatures": false, "name": "Comic Shanns", @@ -348,9 +301,7 @@ "rendering": "vector", "style": "sans", "zerostyle": "slashed", - "variants": [ - "variable" - ], + "variants": "A download can be customized with various of weights, ligatures, dotted or slashed zeroes, and other styles.", "website": "https://commitmono.com", "year": 2023 }, @@ -418,7 +369,7 @@ }, "cousine": { "author": "Steve Matteson", - "description": "This font was designed by Steve Matteson, more widely known for his work on the Droid fontfaces you’ll find on any Android device. It was created especially for on-screen use, and covers regular, bold and italic in an amazing 2391 Glyphs. Compatibility might be its strongest feat, but it’s a serious font for every day use.", + "description": "An innovative, refreshing sans serif design that is metrically compatible with Courier New.", "license": "Apache", "ligatures": false, "name": "Cousine", @@ -984,10 +935,12 @@ "author": "David Jonathan Ross", "ligatures": false, "name": "Input", + "description": "Input is a flexible system of fonts designed specifically for code", "rendering": "vector", "style": "sans", "zerostyle": "dotted", "website": "http://input.fontbureau.com", + "variants": "A download can be customized with dozens of weights, widths, dotted or slashed zeroes, and other styles.", "year": 2014 }, "intel-one-mono": { diff --git a/index.css b/index.css index 36d7b4b..68a437c 100644 --- a/index.css +++ b/index.css @@ -85,6 +85,7 @@ html { } body { + display: flex; height: 100%; min-height: 100%; background: var(--paper-white); @@ -96,6 +97,12 @@ h1 { font-weight: bold; font-size: 14px; } +h2 { + margin: 0; + padding: 0; + font-weight: bold; + font-size: 14px; +} p { padding: 0; } @@ -136,6 +143,35 @@ a:active { border-right-color: var(--paper-white); } } +.codemirror-wrapper { + flex: 1; + position: relative; +} +.info-wrapper { + position: absolute; + bottom: 1rem; + right: 2rem; + left: 2rem; + z-index: 1; + padding: 1em 1.4em; + font-size: 10px; + background: var(--light-grey); + color: var(--dark-grey); +} +.info-wrapper a:hover { + color: var(--ink-black); + text-decoration: underline; +} +.info-wrapper p { + line-height: 14px; +} +.info-wrapper p:empty { + display: none; +} +.info-wrapper p.variants::before { + content: 'Variants: '; + font-weight: bold; +} main { display: flex; flex-direction: column; @@ -445,6 +481,9 @@ footer .logo:last-child { } @media screen and (max-width: 56em) { + body { + display: block; + } .main-wrapper, form { width: 100%; diff --git a/index.html b/index.html index 37802f0..be709f7 100755 --- a/index.html +++ b/index.html @@ -289,9 +289,10 @@ -
- - -
+ + + + + + + diff --git a/index.js b/index.js index 981af27..8b0f9e1 100644 --- a/index.js +++ b/index.js @@ -43,14 +43,27 @@ function getFont () { return font } +function setDetails (data) { + const box = document.querySelector('.info-wrapper') + box.querySelector('a').href = data.website + box.querySelector('h2 a').textContent = data.name + box.querySelector('p.info').textContent = data.description ?? '' + if (typeof data.variants === 'string') { + box.querySelector('p.variants').textContent = data.variants + } else if (data.variants && data.variants.length > 1) { + box.querySelector('p.variants').textContent = data.variants.join(', ') + } else { + box.querySelector('p.variants').textContent = '' + } +} + // ProgrammingFonts font selector function selectFont () { - const msg = document.querySelector('footer .subtitle') const codeMirror = document.querySelector('.CodeMirror') const font = getFont() if (typeof fontData !== 'undefined') { - msg.innerHTML = `Test drive ${fontData[font].name}!` + setDetails(fontData[font]) } if (typeof fontData !== 'undefined' && fontData[font].rendering === 'bitmap') {