Ungol/blog
1
0
Fork 0
Code Issues Projects Releases Packages 1 Activity Actions

feat: Improve CSS + add fonts

Browse source
This commit is contained in:
Alexis Fourmaux 2025-05-13 01:03:45 +02:00
parent ea79a6fbf6
commit 22a753478c
19 changed files with 708 additions and 307 deletions
Download patch file Download diff file Expand all files Collapse all files

7
config.toml
View file

@ -17,6 +17,13 @@ highlight_themes_css = [
{ theme = "Catppuccin-latte", filename = "syntax-theme-light.css" },
]
extra_syntaxes_and_themes = ["highlight_themes"]
bottom_footnotes = true
insert_anchor_links = "right"
render_emoji = true
[slugify]
paths = "safe"
anchor = "safe"
[extra]
# Put all your custom variables here

294
content/blog/example.md
View file

@ -3,16 +3,27 @@ title = "Markdown example page"
date = 2019-11-27
+++
Cet article est un exemple utilisant du lorem ipsum en markdown pour développer
et styler les éléments sur une base qui ressemble à un vrai texte. Il contient les éléments d'un article assez complet.
<!-- more -->
# Sanguineae adsumere remollescunt
## Cara ubi succumbere turis trabe per distantia
Lorem markdownum neque dicenti commota subigebat, dumque regina **numerabilis
solum**, cum *damna parvumque* contingere iste aliquam. Nomina pedes supinis
factura paciscor quae! Silvestre curva, guttur alii tu fecisse proles fessusque,
factura paciscor quae! Silvestre[^first] curva, guttur alii tu fecisse proles fessusque,
per redeat campi, circumspicit saltu sensit. Dianae aetheriis in sagitta ab
navis e per ignarus sceleri! **Ordine ille** illis pectoraque si ratae littera
Oechalidum limus posse.
navis e per ignarus sceleri! **Ordine ille** illis pectoraque[^second] si ratae littera
Oechalidum[^second] limus posse.
[^first]: Footnote **can have markup**
and multiple paragraphs.
[^second]: Footnote text.
```c#
using System.IO.Compression;
@ -40,7 +51,7 @@ praefractam](http://sonant-pars.io/tyrrhena.php) et ait simul concepit coniugis
tinguamus dixit; tempestate non! Sanguine sanguine transit nisi caelum visuras
natae, iam dant effundit bracchia vellem quaeritur in.
## Optato rugae
### Optato rugae
Nocens et ille praetendat, tegitur, dea flectant adiit, in iubet, cur. Accipio
per enim traduxit horrent ortus ensis effugere nec cessisse lassavit formosus
@ -53,7 +64,7 @@ faciemque amor, rapti petit et restat.
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
## Est iam corporibus seductus quam suis intrarant
#### Est iam corporibus seductus quam suis intrarant
Ultima fruetur aliquisque, data dare illi cadas, et *pia* hanc mihi matre qui
plumis viribus lentum Carpathius. Meis ait florem, sim est tecum Tydiden per
@ -70,7 +81,7 @@ nec](http://inprimus.org/utque-effugit).
- Et dolore liquidum Iove circumspicit reges medicamine
- Alto non potiuntur inter protectus ratis
## Venae fuit
##### Venae fuit
Inpius sit [fletus](http://www.concipit.com/); et nubes. Sua demum tenuem
*supponitur vellent* dic alis illud et in **ducibusque** sceptro? Quid tauri, et
@ -86,7 +97,7 @@ quoque iunctorum subiecit ante parat cives sumimus rediret quaeque!
Ut saevo, intenta potest illa, ista sit ense in levat navigiis viscera. Et Quas
perdidit cuiquam **dedit**.
## Altis illi sit illo ante Semeles nocendi
###### Altis illi sit illo ante Semeles nocendi
Deprendit subit errare liquidum ferrum dicere; mixta praemiaque. Ignes sonat
quidem gurgite hic pugnacem tibi, Pharonque caret coloribus venit; perdis
@ -114,10 +125,7 @@ ferrumque Achivi aer hanc sic Turno. Paelex Mycenae Cecropios artes pugnando
postponere amoris mihi uvis subvectaque oculi anhelanti coercuit natasque in.
Pinea ac rediit utile diversa quid fugit nautae, vides inducitur, non!
- Prodigiosa magnos
- Moto orbem levare superesse
- Unus timuit
- In est que abstulit quidem
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
## Et viros iungere mollirique vocatur alumnus
@ -145,43 +153,13 @@ fraude superum pellite terris splendidaque nate adversas!
Pygmalion coniecit parentem: quodque: Phobetora resupina natos flenti quem
vestro tamen arbore! Lac novem, est tremit, tinxit: ultoris quae inde nostrae.
Et nostri novae, obstabatque mens dominam! *Adducto* iungat potiturque vertitur,
pietatem magna ibat laceraret **expalluit clarae** aquas; qui ortus mearum
pietatem magna ibat laceraret **expalluit clarae** aquas; qui ~~ortus mearum~~
nodoso. Taedasque non genas et paulumque dumque.
Acer sublimis tollere; fas pro, quo ipsa quodque, sparsas occuluere tu oscula
movere herbas? Perterrita terrore ipse nec parente maciem.
# Headers
# h1 Heading 8-)
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
# Emphasis
Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
**This is bold text**
__This is bold text__
*This is italic text*
_This is italic text_
~~Strikethrough~~
------
# Lists
@ -234,240 +212,8 @@ _This is italic text_
- [ ] this is an incomplete item
# Ignoring Markdown formatting
You can tell GitHub to ignore (or escape) Markdown formatting by using \ before the Markdown character.
Let's rename \*our-new-project\* to \*our-old-project\*.
------
# Links
[I'm an inline-style link](https://www.google.com)
[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
[I'm a reference-style link][Arbitrary case-insensitive reference text]
[I'm a relative reference to a repository file](../blob/master/LICENSE)
[You can use numbers for reference-style link definitions][1]
Or leave it empty and use the [link text itself].
URLs and URLs in angle brackets will automatically get turned into links.
http://www.example.com or <http://www.example.com> and sometimes
example.com (but not on Github, for example).
Some text to show that the reference links can follow later.
[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com
------
# Images
Here's our logo (hover to see the title text):
Inline-style:
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
Reference-style:
![alt text][logo]
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
Like links, Images also have a footnote style syntax
![Alt text][id]
With a reference later in the document defining the URL location:
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
------
# [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
Footnote 1 link[^first].
Footnote 2 link[^second].
Inline footnote^[Text of inline footnote] definition.
Duplicated footnote reference[^second].
[^first]: Footnote **can have markup**
and multiple paragraphs.
[^second]: Footnote text.
------
# Code and Syntax Highlighting
Inline `code` has `back-ticks around` it.
```c#
using System.IO.Compression;
#pragma warning disable 414, 3021
namespace MyApplication
{
[Obsolete("...")]
class Program : IInterface
{
public static List<int> JustDoIt(int count)
{
Console.WriteLine($"Hello {Name}!");
return new List<int>(new int[] { 1, 2, 3 })
}
}
}
```
```css
@font-face {
font-family: Chunkfive; src: url('Chunkfive.otf');
}
body, .usertext {
color: #F0F0F0; background: #600;
font-family: Chunkfive, sans;
}
@import url(print.css);
@media print {
a[href^=http]::after {
content: attr(href)
}
}
```
```javascript
function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
` class="${cls}"`;
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
}
export $initHighlight;
```
------
# Tables
Colons can be used to align columns.
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
| Command | Description |
| --- | --- |
| git status | List all new or modified files |
| git diff | Show file differences that haven't been staged |
| Command | Description |
| --- | --- |
| `git status` | List all *new or modified* files |
| `git diff` | Show file differences that **haven't been** staged |
| Left-aligned | Center-aligned | Right-aligned |
| :--- | :---: | ---: |
| git status | git status | git status |
| git diff | git diff | git diff |
| Name | Character |
| --- | --- |
| Backtick | ` |
| Pipe | \| |
------
# Blockquotes
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.
Quote break.
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
------
# Inline HTML
<dl>
<dt>Definition list</dt>
<dd>Is something people use sometimes.</dd>
<dt>Markdown in HTML</dt>
<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
------
# Horizontal Rules
Three or more...
---
Hyphens
***
Asterisks
___
Underscores
------
# YouTube Videos
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE" target="_blank">
<img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10">
</a>
[![IMAGE ALT TEXT HERE](https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/YouTube_logo_2015.svg/1200px-YouTube_logo_2015.svg.png)](https://www.youtube.com/watch?v=ciawICBvQoE)

484
custom.css Normal file
View file

@ -0,0 +1,484 @@
:root {
--sans-font: "Ubuntu Nerd Font", Arial, Helvetica, sans-serif;
--mono-font: "UbuntuMono Nerd Font", monospace;
--standard-border-radius: .8rem;
/* Light theme */
--bg: #FBFBFF;
--text: #093D8D;
--text-light: #2F2997;
--link-text: #6872E5;
--link-text-hover: #32325D;
--border: #B2AFE9;
--border-light: #98D7F6;
--code: #0284C7;
--code-background: #F4F8FF;
--preformatted: #012a4a;
--accent: #008BDF;
--accent-bg: #F5F5FC;
--accent-hover: #E0E0E0;
--accent-text: var(--bg);
--accent-disabled: #2F5977;
--table-border: #ECEBFA;
--table-alternate: #F5F6FC;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--bg: #1E293B;
--text: #d0d4fc;
--text-light: #A9AED2;
--link-text: #83C3F3;
--link-text-hover: #DBEAFE;
--border: var(--text);
--border-light: #475569;
--code: #A5B4FC;
--code-background: #0F172A;
--preformatted: #0F172A;
--accent: #60A5FA;
--accent-bg: #293548;
--accent-hover: #5FA5FA7f;
--accent-text: var(--bg);
--accent-disabled: #476f95;
--table-border: #263449;
--table-alternate: #222F42;
}
/* Add a bit of transparency so light media isn't so glaring in dark mode */
img,
video {
opacity: 0.8;
}
}
*, *::before, *::after {
box-sizing: border-box;
}
textarea,
select,
input,
progress {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
html {
font-family: var(--sans-font);
scroll-behavior: smooth;
}
body {
color: var(--text);
background-color: var(--bg);
font-size: 1rem;
line-height: 1.5;
display: grid;
grid-template-columns: 1fr min(50rem, 90%) 1fr;
margin: 0;
}
body > * {
grid-column: 2;
}
.button[aria-disabled="true"],
input:disabled,
textarea:disabled,
select:disabled,
button[disabled] {
cursor: not-allowed;
background-color: var(--accent-disabled);
border-color: var(--accent-disabled);
color: var(--text-light);
}
h1.title,
header > h1 {
color: var(--accent);
}
h1 {
font-size: 3rem;
font-weight: lighter;
}
h2 {
font-size: 2.6rem;
margin-top: 3rem;
font-weight: lighter;
}
h3 {
font-size: 2rem;
margin-top: 3rem;
font-weight: lighter;
}
h4 {
font-size: 1.44rem;
font-weight: lighter;
}
h5 {
font-size: 1.15rem;
font-weight: lighter;
}
h6 {
font-size: 0.96rem;
font-weight: lighter;
}
p {
margin: 1.5rem 0;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
h1,
h2,
h3 {
line-height: 1.1;
}
@media only screen and (max-width: 720px) {
h1 {
font-size: 2.5rem;
font-weight: lighter;
}
h2 {
font-size: 2.1rem;
font-weight: lighter;
}
h3 {
font-size: 1.75rem;
font-weight: lighter;
}
h4 {
font-size: 1.25rem;
font-weight: lighter;
}
}
a,
a:visited {
color: var(--link-text);
text-decoration: none;
}
a:hover {
color: var(--link-text-hover);
}
abbr[title] {
cursor: help;
text-decoration-line: underline;
text-decoration-style: dotted;
}
aside, details, pre, progress {
background-color: var(--accent-bg);
border: 1px solid var(--border);
border-radius: var(--standard-border-radius);
margin-bottom: 1rem;
}
article h2:first-child,
section h2:first-child,
article h3:first-child,
section h3:first-child {
margin-top: 1rem;
}
section {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 2rem 1rem;
margin: 3rem 0;
}
section + section,
section:first-child {
border-top: 0;
padding-top: 0;
}
section + section {
margin-top: 0;
}
section:last-child {
border-bottom: 0;
padding-bottom: 0;
}
/* Tables */
table {
border-collapse: separate;
border-spacing: 0;
margin: 1.5rem 0;
}
figure > table {
width: max-content;
margin: 0;
}
td,
th {
padding: 0.5rem;
padding: 1rem 1.5rem;
border-style: solid;
border-width: .1rem;
border-color: var(--table-border);
text-align: start;
}
th {
background-color: var(--bg);
text-transform: uppercase;
font-weight: bold;
font-size: small;
border: none
}
tr:first-child > td:first-child {
border-top-left-radius: var(--standard-border-radius);
}
tr:first-child > td:last-child {
border-top-right-radius: var(--standard-border-radius);
}
tr:last-child > td:first-child {
border-bottom-left-radius: var(--standard-border-radius);
}
tr:last-child > td:last-child {
border-bottom-right-radius: var(--standard-border-radius);
}
tr > td:last-child {
border-right-width: .15rem;
}
tr:first-child > td {
border-top-width: .15rem;
}
tr > td:first-child {
border-left-width: .15rem;
}
tr:last-child > td {
border-bottom-width: .15rem;
}
tr:nth-child(even) td {
/* Set every other cell slightly darker. Improves readability. */
background-color: var(--table-alternate);
}
table caption {
margin-bottom: 0.5rem;
}
ul > li::marker, ol > li::marker {
color: var(--accent);
}
ul {
list-style-type: disc;
}
li:has(input) {
list-style-type: none;
}
/* Forms */
textarea,
select,
input,
button,
.button {
font-size: inherit;
font-family: inherit;
padding: 0.5rem;
margin-bottom: 0.5rem;
border-radius: var(--standard-border-radius);
box-shadow: none;
max-width: 100%;
display: inline-block;
}
textarea,
select,
input {
color: var(--text);
background-color: var(--bg);
border: 1px solid var(--border);
}
label {
display: block;
}
textarea:not([cols]) {
width: 100%;
}
/* checkbox and radio button style */
input[type="checkbox"],
input[type="radio"] {
vertical-align: middle;
position: relative;
width: min-content;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
display: inline-block;
}
input[type="radio"] {
border-radius: 100%;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background-color: var(--accent);
}
input[type="checkbox"]:checked::after {
/* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
content: " ";
width: 0.18em;
height: 0.32em;
border-radius: 0;
position: absolute;
top: 0.05em;
left: 0.17em;
background-color: transparent;
border-right: solid var(--bg) 0.08em;
border-bottom: solid var(--bg) 0.08em;
font-size: 1.8em;
transform: rotate(45deg);
}
input[type="radio"]:checked::after {
/* creates a colored circle for the checked radio button */
content: " ";
width: 0.25em;
height: 0.25em;
border-radius: 100%;
position: absolute;
top: 0.125em;
background-color: var(--bg);
left: 0.125em;
font-size: 32px;
}
img,
video {
max-width: 100%;
height: auto;
border-radius: var(--standard-border-radius);
}
figure {
margin: 0;
display: block;
overflow-x: auto;
}
figure > img,
figure > picture > img {
display: block;
margin-inline: auto;
}
blockquote {
margin-inline-start: 2rem;
margin-inline-end: 2rem;
margin-block: 2rem;
padding: 0.4rem 0.8rem;
color: var(--text-light);
background-color: var(--accent-bg);
border-inline-start: none;
border-color: var(--border);
border-radius: var(--standard-border-radius);
border-style: dashed;
border-width: .1rem;
font-style: italic;
}
cite {
font-size: 0.9rem;
color: var(--text-light);
font-style: normal;
}
code,
pre,
pre span,
kbd,
samp {
font-family: var(--mono-font);
color: var(--code);
}
kbd {
color: var(--text);
background-color: var(--code-background);
border-color: var(--border);
border-style: solid;
border-width: .1rem;
}
pre {
color: var(--text);
padding: 1rem 1.4rem;
max-width: 100%;
overflow: auto;
background-color: var(--preformatted);
border: none
}
/* The line numbers already provide some kind of left/right padding */
pre[data-linenos] {
padding: 1rem 0;
}
pre table td {
padding: 0;
}
/* The line number cells */
pre table td:nth-of-type(1) {
text-align: center;
vertical-align: top;
user-select: none;
}
samp,
code {
background-color: var(--code-background);
border-radius: .25rem;
border-style: dashed;
border-width: 0.05rem;
border-color: var(--border-light);
font-size: .85rem;
font-weight: 500;
line-height: 1rem;
padding: .25rem;
}
pre code {
border-style: none;
background-color: var(--preformatted);
}

134
sass/_base.scss
View file

@ -1,7 +1,9 @@
@use 'fonts';
@use 'theme';
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
}
@ -14,18 +16,13 @@ body {
color: var(--text);
background-color: var(--base);
font-size: 1rem;
font-weight: light;
line-height: 1.75;
}
main {
display: flex;
align-items: center;
flex-direction: column;
}
article {
max-width: min(50rem, 90%);
max-width: min(700px, 95%);
margin-left: auto;
margin-right: auto;
}
section {
@ -38,12 +35,13 @@ section {
h1 {
font-size: 2rem;
font-weight: bold;
font-weight: medium;
margin-top: 2rem;
margin-bottom: 1rem;
&.title {
font-size: 2.5rem;
font-weight: bolder;
font-size: 3rem;
font-weight: 900;
margin-bottom: 0;
color: var(--maroon);
}
@ -52,37 +50,44 @@ h1 {
h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
font-weight: bold;
font-weight: medium;
}
h3 {
font-size: 1.2rem;
margin-bottom: .6rem;
font-weight: bold;
font-weight: medium;
}
h4 {
font-size: 1.1rem;
font-weight: bold;
font-weight: medium;
}
h5 {
font-size: 1rem;
font-weight: bold;
font-weight: medium;
}
h6 {
font-size: .9rem;
font-weight: bold;
font-weight: medium;
}
p, h1, h2, h3, h4, h5, h6 {
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
p {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
&.subtitle {
color: var(--subtext0);
margin-top: 0;
@ -96,12 +101,20 @@ a {
text-decoration-color: color-mix(in srgb, var(--blue), transparent 40%);
text-decoration-thickness: 0.01rem;
text-underline-offset: 0.3rem;
&:hover {
color: var(--sky);
}
&:visited {
color: var(--lavender);
}
&.zola-anchor {
color: var(--text);
text-decoration-color: var(--text);
margin-left: .5rem;
}
}
li {
@ -121,18 +134,23 @@ video {
}
pre {
font-family: fonts.$mono-font;
padding: 1.25rem;
border-radius: var(--standard-border-radius);
border-style: solid;
border-color: var(--surface0);
border-width: 0.15rem;
& > code {
line-height: initial;
overflow-x: scroll;
&>code {
background-color: initial;
border: initial;
}
}
code {
font-family: fonts.$mono-font;
background-color: var(--mantle);
padding: .2rem;
border-radius: .3rem;
@ -148,6 +166,7 @@ table {
margin-bottom: 1.5rem;
margin-left: auto;
margin-right: auto;
overflow-x: scroll;
}
td,
@ -168,40 +187,39 @@ th {
border: none
}
tr:first-child > td:first-child {
tr:first-child>td:first-child {
border-top-left-radius: var(--standard-border-radius);
}
tr:first-child > td:last-child {
tr:first-child>td:last-child {
border-top-right-radius: var(--standard-border-radius);
}
tr:last-child > td:first-child {
tr:last-child>td:first-child {
border-bottom-left-radius: var(--standard-border-radius);
}
tr:last-child > td:last-child {
tr:last-child>td:last-child {
border-bottom-right-radius: var(--standard-border-radius);
}
tr > td:last-child {
tr>td:last-child {
border-right-width: .15rem;
}
tr:first-child > td {
tr:first-child>td {
border-top-width: .15rem;
}
tr > td:first-child {
tr>td:first-child {
border-left-width: .15rem;
}
tr:last-child > td {
tr:last-child>td {
border-bottom-width: .15rem;
}
tr:nth-child(even) td {
/* Set every other cell slightly darker. Improves readability. */
background-color: var(--mantle);
}
@ -212,4 +230,64 @@ hr {
width: 50%;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-radius: 1rem;
border-width: 1px;
}
blockquote {
position: relative;
margin-inline: 0;
margin-block-end: 2rem;
padding-inline-start: 2em;
overflow: hidden;
quotes: "“" "”" "‘" "’";
&::before,
&::after {
position: absolute;
}
&::before {
content: "❞";
left: .2rem;
font-size: 2rem;
color: var(--overlay1);
}
&::after {
content: "";
left: .6rem;
top: 2rem;
width: 1px;
height: 100%;
background-color: var(--overlay1);
}
}
cite {
&::before {
content: "~ "
}
font-style: italic;
color: var(--subtext0);
}
footer.footnotes {
font-size: .8rem;
color: var(--subtext1);
margin-top: 3rem;
border-top: 1px solid var(--surface0);
&>ol.footnotes-list>li {
margin-top: 1rem;
&>p {
margin: {
top: .4rem;
bottom: .4rem;
}
}
}
}

90
sass/_fonts.scss
View file

@ -1,3 +1,87 @@
$text-font: "Ubuntu Nerd Font", Arial, Helvetica, sans-serif;
$title-font: "Ubuntu Nerd Font", Arial, Helvetica, sans-serif;
$mono-font: "UbuntuMono Nerd Font", monospace;
@font-face {
font-family: "Ubuntu";
src: url("fonts/Ubuntu/Ubuntu-B.ttf") format(truetype);
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Ubuntu";
src: url("fonts/Ubuntu/Ubuntu-BI.ttf") format(truetype);
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "Ubuntu";
src: url("fonts/Ubuntu/Ubuntu-R.ttf") format(truetype);
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Ubuntu";
src: url("fonts/Ubuntu/Ubuntu-RI.ttf") format(truetype);
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Ubuntu";
src: url("fonts/Ubuntu/Ubuntu-M.ttf") format(truetype);
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Ubuntu";
src: url("fonts/Ubuntu/Ubuntu-MI.ttf") format(truetype);
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "Ubuntu";
src: url("fonts/Ubuntu/Ubuntu-L.ttf") format(truetype);
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Ubuntu";
src: url("fonts/Ubuntu/Ubuntu-LI.ttf") format(truetype);
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fonts/Ubuntu/UbuntuMono-B.ttf") format(truetype);
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fonts/Ubuntu/UbuntuMono-BI.ttf") format(truetype);
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fonts/Ubuntu/UbuntuMono-R.ttf") format(truetype);
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fonts/Ubuntu/UbuntuMono-RI.ttf") format(truetype);
font-weight: 400;
font-style: italic;
}
$text-font: "Ubuntu", Helvetica, sans-serif;
$title-font: "Ubuntu", Helvetica, sans-serif;
$mono-font: "Ubuntu Mono", monospace;

BIN
static/fonts/Ubuntu/Ubuntu-B.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Ubuntu/Ubuntu-BI.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Ubuntu/Ubuntu-L.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Ubuntu/Ubuntu-LI.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Ubuntu/Ubuntu-M.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Ubuntu/Ubuntu-MI.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Ubuntu/Ubuntu-R.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Ubuntu/Ubuntu-RI.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Ubuntu/UbuntuMono-B.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Ubuntu/UbuntuMono-BI.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Ubuntu/UbuntuMono-R.ttf Normal file
View file

Binary file not shown.

BIN
static/fonts/Ubuntu/UbuntuMono-RI.ttf Normal file
View file

Binary file not shown.

1
templates/anchor-link.html Normal file
View file

@ -0,0 +1 @@
<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}">#</a>

3
templates/base.html
View file

@ -1,8 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" type="text/css" href="/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" type="text/css" href="/syntax-theme-light.css" media="(prefers-color-scheme: light)" />