use some nicer fonts

pull/3/head
Tudor Roman 2024-02-05 16:52:17 +01:00
parent c6549eb0ee
commit b8d830fd17
Signed by: tudor
SSH Key Fingerprint: SHA256:3CwS9plgXBecpXImPGxDIaSktUXBejbV/zerZMqzzBk
11 changed files with 57 additions and 5 deletions

View File

@ -20,6 +20,8 @@ const site = lume({
location: new URL("https://tudorr.ro"),
});
site.copy("static");
site.use(date({
locales: {
"en-GB": localeEnGb,

View File

@ -24,6 +24,7 @@
<meta property="article:published_time" content="{{ date |> date('ATOM') }}">
{{ /if }}
<link rel="stylesheet" href="/fonts.css">
<link rel="stylesheet" href="/style.css">
<link rel="alternate" type="application/json" href="/feed.json">
<link rel="alternate" type="application/rss+xml" href="/feed.rss">

View File

@ -2,17 +2,17 @@
layout: base.vto
---
<article class="prose prose-neutral marker:text-fg-light dark:marker:text-fg-dark dark:prose-invert max-w-none text-justify hyphens-auto">
<article class="prose prose-lg prose-stone marker:text-fg-light dark:marker:text-fg-dark dark:prose-invert max-w-none">
<section>
<h1 class="text-3xl mb-2">{{ title }}</h1>
<div class="flex flex-row flex-wrap not-prose text-left mb-4 gap-x-4" role="doc-subtitle">
<div class="flex flex-row flex-wrap not-prose text-left text-slab tracking-wide mb-4 gap-x-4" role="doc-subtitle">
<time class="inline-block">{{ date |> date('HUMAN_DATE') }}</time>
{{ if tags }}
<span class="inline-block">tags: {{ tags.join(", ") }}</span>
{{ /if }}
</div>
</section>
<section class="">
<section>
{{ content }}
</section>
</article>

44
src/fonts.css Normal file
View File

@ -0,0 +1,44 @@
/* ibm-plex-sans-regular - latin_latin-ext */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
src: url('/static/fonts/ibm-plex-sans-v19-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-italic - latin_latin-ext */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
src: url('/static/fonts/ibm-plex-sans-v19-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-500 - latin_latin-ext */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
src: url('/static/fonts/ibm-plex-sans-v19-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-500italic - latin_latin-ext */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 500;
src: url('/static/fonts/ibm-plex-sans-v19-latin_latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-regular - latin_latin-ext */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 400;
src: url('/static/fonts/roboto-slab-v34-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

View File

@ -3,12 +3,16 @@
@tailwind utilities;
@layer base {
.text-slab {
font-family: theme(fontFamily.slab);
}
body {
@apply bg-white dark:bg-black text-black dark:text-white px-4 py-2 mx-auto lg:max-w-5xl;
}
h1, h2, h3 {
@apply tracking-tight text-left;
@apply tracking-tight text-left text-slab;
}
h1::before {

View File

@ -4,7 +4,8 @@ export default {
theme: {
extend: {
fontFamily: {
"sans": ["sans-serif"],
"sans": ["IBM Plex Sans", "sans-serif"],
"slab": ["Roboto Slab", "sans-serif"],
"serif": ["serif"],
"mono": ["monospace"],
},