@@ -111,6 +111,7 @@
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-family: var(--font-family);
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
|
||||
+17
-7
@@ -1,7 +1,15 @@
|
||||
@font-face {
|
||||
font-family: "Peritel";
|
||||
src:
|
||||
url("/fonts/Peritel/Peritel-Regular.woff2") format("woff2"),
|
||||
url("/fonts/Peritel/Peritel-Regular.otf") format("opentype");
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
|
||||
--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
|
||||
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
|
||||
|
||||
--color-dark: #2e303e;
|
||||
@@ -95,11 +103,13 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
font-family: var(--font-family-headers);
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 3rem;
|
||||
font-size: 3.5rem;
|
||||
font-size: 3.7rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -109,23 +119,23 @@ h2, h3, h4, h5, h6 {
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
font-size: 2.35rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
h1 { font-size: 2.8rem; }
|
||||
h2 { font-size: 1.8rem; }
|
||||
h3 { font-size: 1.35rem; }
|
||||
h1 { font-size: 2.95rem; }
|
||||
h2 { font-size: 1.9rem; }
|
||||
h3 { font-size: 1.4rem; }
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
|
||||
@@ -72,6 +72,7 @@ export default async function(eleventyConfig) {
|
||||
/* Passthrough */
|
||||
eleventyConfig
|
||||
.addPassthroughCopy("favicon.ico")
|
||||
.addPassthroughCopy("fonts")
|
||||
.addPassthroughCopy("robots.txt");
|
||||
|
||||
/* Plugins */
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
# End User License Agreement (EULA)
|
||||
|
||||
This End User License Agreement is a legal agreement between the licensee (you), and the author of this font, Christopher Kirk-Nielsen.
|
||||
|
||||
You are granted a perpetual, non-exclusive license to use the font with your purchase.
|
||||
|
||||
## By downloading or purchasing this font, you agree to the following terms:
|
||||
|
||||
**For use on a website**
|
||||
Use on any website owned or under the licensee's control, no pageview limits.
|
||||
|
||||
**For use in an app**
|
||||
App embed allowed for 1 app. Another app = another license.
|
||||
|
||||
**Distribution**
|
||||
The font may not be redistributed.
|
||||
|
||||
**Personal modification**
|
||||
The font may be modified for personal use, but cannot be redistributed.
|
||||
|
||||
**Do not use the font for hateful purposes**
|
||||
The font is not allowed to be used in any material promoting hate speech of any kind, including but not limited to: racism, xenophobia, homophobia, sexism, or other types of discrimination.
|
||||
|
||||
**Do not use the font with AI**
|
||||
The font is not allowed to be used in, or in training of, AI/LLMs.
|
||||
|
||||
**Use at your own risk**
|
||||
Any usage of the fonts are at the licensee's own risk.
|
||||
|
||||
For ebooks and other commercial use, or any other specific needs, email me to figure something out: chriskirknielsen+fonts[at]gmail.com
|
||||
|
||||
Thank you very much for the support!
|
||||
Christopher Kirk-Nielsen (https://chriskirknielsen.com/fonts/)
|
||||
Binary file not shown.
Binary file not shown.
@@ -6,7 +6,7 @@ This is v2 of my personal website, built with [{{ eleventy.generator }}](https:/
|
||||
|
||||
v1 of this site began in 2022 and was based on [Millennial](https://lenpaul.github.io/Millennial/), a minimalist Jekyll theme for running a blog or publication by Paul Le.
|
||||
|
||||
The fonts are [Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono](https://brailleinstitute.org/freefont) for standard text and monospace respectively, specifically designed for low-vision readers to improve character recognition. Also they look neat :)
|
||||
The header font is [Peritel by Christopher Kirk-Nielsen](https://chriskirknielsen.com/fonts/peritel/). I'm currently trying it on for size, so let me know if you like it - or hate it! The body fonts (and the all-caps headers on the post list pages) are [Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono](https://brailleinstitute.org/freefont) for standard text and monospace respectively, specifically designed for low-vision readers to improve character recognition. Also they look neat :)
|
||||
|
||||
The search bar is powered by [Pagefind](https://pagefind.app/). I was guided by [Robb Knight's walkthrough](https://rknight.me/blog/using-pagefind-with-eleventy-for-search/) when setting it up.
|
||||
|
||||
|
||||
@@ -110,6 +110,8 @@ Code blocks can have syntax highlighting:
|
||||
<h1>Hello, world</h1>
|
||||
```
|
||||
|
||||
### You can even write `headers in monospace`
|
||||
|
||||
## Tables
|
||||
|
||||
Tables in Markdown are kind of annoying to format. You use the pipe (`|`) character as well as dashes.
|
||||
|
||||
@@ -71,6 +71,8 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
|
||||
|
||||
[Framer](https://framer.com) is a full-featured site designer with a built-in CMS. It offers generative AI features.
|
||||
|
||||
I have written [further thoughts on Framer accessibility](/framer-accessibility) as part of a more in-depth review.
|
||||
|
||||
| Factor | Notes | Score |
|
||||
|---|---|---|
|
||||
| Semantic HTML | Tags can be set per-element in the "Accessibility" section of the right-hand pane. Takes work, but is doable with care. | 2 |
|
||||
|
||||
Reference in New Issue
Block a user
