typography #3

Merged
tudor merged 4 commits from typography into master 2024-02-05 22:21:10 +02:00
14 changed files with 72 additions and 11 deletions

View File

@ -7,6 +7,12 @@ http://tudorr.ro {
file_server
log
respond /health OK
@static {
file
path *.ico *.css *.js *.gif *.webp *.avif *.jpg *.jpeg *.png *.svg *.woff *.woff2
}
header @static Cache-Control max-age=600
}
http://tudorrro.fly.dev, http://www.tudorr.ro {

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,11 +24,12 @@
<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">
</head>
<body class="bg-bg-light text-fg-light dark:bg-bg-dark dark:text-fg-dark">
<body class="px-4 py-2 mx-auto max-w-4xl 2xl:max-w-6xl bg-bg-light text-fg-light dark:bg-bg-dark dark:text-fg-dark">
<header>
<h1 class="inline-block py-2 pt-5 text-4xl font-medium tracking-tight before:hidden">
<a class="no-underline hover:underline hover:decoration-4 hover:underline-offset-4"
@ -48,7 +49,7 @@
</ul>
</nav>
</header>
<main class="p-2">
<main class="p-2 text-lg">
{{ content }}
</main>
<footer class="mt-8">

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-xl 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>

View File

@ -5,7 +5,7 @@ export default ({search}: Lume.Data, {date}: Lume.PageFilters) => (
<>
<h1 class="text-3xl mb-4">Blog posts</h1>
<ul class="ml-4">
<ul class="ml-4 text-lg">
{search.pages("type=blog", "order date=desc").map((post) => {
const url = post.url;
return (

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

@ -20,7 +20,7 @@ title: ""
I took the following courses:
</p>
<ul class="list-disc ml-4 mb-4">
<ul class="list-disc ml-4 mb-4 text-base">
<li><strong class="font-semibold">Equational Programming</strong>: lambda calculus, equational specifications.</li>
<li><strong class="font-semibold">Concurrency &amp; Multithreading</strong>: synchronisation primitives, CAS, ABA Problem, and a bunch more stuff.</li>
<li><strong class="font-semibold">Secure Programming</strong>: secure design, cryptography, binary exploitation and defences, testing, web security.

View File

@ -3,12 +3,12 @@
@tailwind utilities;
@layer base {
body {
@apply bg-white dark:bg-black text-black dark:text-white px-4 py-2 mx-auto lg:max-w-5xl;
.text-slab {
font-family: theme(fontFamily.slab);
}
h1, h2, h3 {
@apply tracking-tight text-left;
@apply tracking-tight text-left text-slab;
}
h1::before {
@ -37,7 +37,14 @@
@apply outline outline-dashed outline-2 outline-offset-2;
}
}
}
@layer utilities {
.prose {
p, li {
@apply max-w-prose;
}
}
}
/**

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"],
},