diff --git a/src/assets/fonts/RobotoMono-Italic-VariableFont_wght.ttf b/src/assets/fonts/RobotoMono-Italic-VariableFont_wght.ttf new file mode 100644 index 0000000..1a4d694 Binary files /dev/null and b/src/assets/fonts/RobotoMono-Italic-VariableFont_wght.ttf differ diff --git a/src/assets/fonts/RobotoMono-VariableFont_wght.ttf b/src/assets/fonts/RobotoMono-VariableFont_wght.ttf new file mode 100644 index 0000000..fc02de4 Binary files /dev/null and b/src/assets/fonts/RobotoMono-VariableFont_wght.ttf differ diff --git a/src/assets/fonts/SixtyfourConvergence-Regular-VariableFont.ttf b/src/assets/fonts/SixtyfourConvergence-Regular-VariableFont.ttf new file mode 100644 index 0000000..b662066 Binary files /dev/null and b/src/assets/fonts/SixtyfourConvergence-Regular-VariableFont.ttf differ diff --git a/src/css/exceptions/article.css b/src/css/exceptions/article.css index 53b3b9a..407e95d 100644 --- a/src/css/exceptions/article.css +++ b/src/css/exceptions/article.css @@ -1,4 +1,10 @@ article { + h2, h3, h4, h5 { + &::before { + content: "\203A"; + font-size: larger; + } + } .published { color: var(--color-subtle); display: inline-block; diff --git a/src/css/exceptions/home.css b/src/css/exceptions/home.css index 7068ad2..e0f55a2 100644 --- a/src/css/exceptions/home.css +++ b/src/css/exceptions/home.css @@ -1,14 +1,25 @@ .home { - h1, + /* h1, h2, h3 { &::before { content: none; } + } */ +/* + h1 { + font-size: var(--text-size-2xl); + } */ + + h1, h2, h3 { + &::before { + content: "\203A"; + font-size: larger; + } } - h1 { - font-size: var(--text-size-3xl); + h1 a { + text-decoration: none; } h2 { diff --git a/src/css/fonts/roboto_mono.css b/src/css/fonts/roboto_mono.css new file mode 100644 index 0000000..6374315 --- /dev/null +++ b/src/css/fonts/roboto_mono.css @@ -0,0 +1,16 @@ +@font-face { + font-family: 'Roboto Mono'; + src: url('/assets/fonts/RobotoMono-VariableFont_wght.ttf') format('truetype supports variations'), + url("/assets/fonts/RobotoMono-VariableFont_wght.ttf") format("truetype-variations"); + font-weight: 100 200 300 400 500 600 700; + font-feature-settings: "liga", "ss03", "ss02", "ss01", "onum"; +} + +@font-face { + font-family: 'Roboto Mono'; + font-style: italic; + src: url('/assets/fonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype supports variations'), + url("/assets/fonts/RobotoMono-Italic-VariableFont_wght.ttf") format("truetype-variations"); + font-weight: 100 200 300 400 500 600 700; + font-feature-settings: "liga", "ss03", "ss02", "ss01", "onum"; +} diff --git a/src/css/fonts/sixtyfour_convergence.css b/src/css/fonts/sixtyfour_convergence.css new file mode 100644 index 0000000..138be92 --- /dev/null +++ b/src/css/fonts/sixtyfour_convergence.css @@ -0,0 +1,8 @@ + +@font-face { + font-family: 'SixtyFour Convergence'; + src: url('/assets/fonts/SixtyfourConvergence-Regular-VariableFont.ttf') format('truetype supports variations'), + url("/assets/fonts/SixtyfourConvergence-Regular-VariableFont.ttf") format("truetype-variations"); + font-weight: 100 200 300 400 500 600 700; + font-feature-settings: "bled", "scan", "xela", "yela"; +} \ No newline at end of file diff --git a/src/css/globals.css b/src/css/globals.css index 530ee9a..556d239 100644 --- a/src/css/globals.css +++ b/src/css/globals.css @@ -1,6 +1,6 @@ :root { --color-primary: light-dark(var(--color-neutral-800), var(--color-neutral-200)); - --color-secondary: light-dark(var(--color-neutral-100), var(--color-neutral-800)); + --color-secondary: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-decoration: light-dark(var(--color-yellow-400), var(--color-amber-200)); --color-subtle: light-dark(var(--color-zinc-600), var(--color-neutral-300)); --color-disabled: light-dark(var(--color-neutral-600), var(--color-neutral-400)); @@ -38,7 +38,7 @@ body { background-color: var(--color-secondary); color: var(--color-primary); - font-family: var(--font-family-geometric); + font-family: var(--font-family-mono); font-size: var(--text-size-s); text-underline-offset: var(--space-size-4xs); } @@ -49,12 +49,13 @@ h2, h3, h4, h5 { - font-family: var(--font-family-neo); + font-family: var(--font-family-mono); font-weight: bold; line-height: 1.2; margin: 0; } + h1 { font-size: var(--text-size-xl); word-wrap: normal; diff --git a/tailwind.config.js b/tailwind.config.js index 72e46ec..3a12e06 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -47,10 +47,11 @@ module.exports = { }, fontFamily: { sans: ['Avenir', 'Montserrat', 'Corbel', "'URW Gothic'", 'source-sans-pro', 'sans-serif'], - mono: ['"Space Grotesk"', ...defaultTheme.fontFamily.mono], + mono: ['"Roboto Mono"', '"Space Grotesk"', ...defaultTheme.fontFamily.mono], humanist: ['Seravek', "'Gill Sans Nova'", 'Ubuntu', 'Calibri', "'DejaVu Sans'", 'source-sans-pro', 'sans-serif'], neo: ['Inter', 'Roboto', "'Helvetica Neue'", "'Arial Nova'", "'Nimbus Sans'", "'Arial'", 'sans-serif'], - geometric: ['Avenir', 'Montserrat', 'Corbel', "'URW Gothic'", 'source-sans-pro', 'sans-serif'] + geometric: ['Avenir', 'Montserrat', 'Corbel', "'URW Gothic'", 'source-sans-pro', 'sans-serif'], + display: ['"SixtyFour Convergence"', ...defaultTheme.fontFamily.mono] }, gap: ({theme}) => ({ none: '0px',