diff --git a/config.toml b/config.toml index cf0369a..99305df 100644 --- a/config.toml +++ b/config.toml @@ -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 diff --git a/content/blog/example.md b/content/blog/example.md index 0760665..ba21ca7 100644 --- a/content/blog/example.md +++ b/content/blog/example.md @@ -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. + + + # 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 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 JustDoIt(int count) - { - Console.WriteLine($"Hello {Name}!"); - return new List(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 - -
-
Definition list
-
Is something people use sometimes.
- -
Markdown in HTML
-
Does *not* work **very** well. Use HTML tags.
-
- ------- - -# Horizontal Rules - -Three or more... - ---- - -Hyphens - -*** - -Asterisks - -___ - -Underscores - ------- - -# YouTube Videos - - -IMAGE ALT TEXT HERE - - -[![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) +Let's rename \*our-new-project\* to \*our-old-project\*. \ No newline at end of file diff --git a/custom.css b/custom.css new file mode 100644 index 0000000..bcf0f9c --- /dev/null +++ b/custom.css @@ -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); +} \ No newline at end of file diff --git a/sass/_base.scss b/sass/_base.scss index 943f1e0..86c957b 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -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; + } + } + } } \ No newline at end of file diff --git a/sass/_fonts.scss b/sass/_fonts.scss index 2baeea5..d7231ef 100644 --- a/sass/_fonts.scss +++ b/sass/_fonts.scss @@ -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; \ No newline at end of file +@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; \ No newline at end of file diff --git a/static/fonts/Ubuntu/Ubuntu-B.ttf b/static/fonts/Ubuntu/Ubuntu-B.ttf new file mode 100644 index 0000000..b173da2 Binary files /dev/null and b/static/fonts/Ubuntu/Ubuntu-B.ttf differ diff --git a/static/fonts/Ubuntu/Ubuntu-BI.ttf b/static/fonts/Ubuntu/Ubuntu-BI.ttf new file mode 100644 index 0000000..72a5a99 Binary files /dev/null and b/static/fonts/Ubuntu/Ubuntu-BI.ttf differ diff --git a/static/fonts/Ubuntu/Ubuntu-L.ttf b/static/fonts/Ubuntu/Ubuntu-L.ttf new file mode 100644 index 0000000..ed0f5bc Binary files /dev/null and b/static/fonts/Ubuntu/Ubuntu-L.ttf differ diff --git a/static/fonts/Ubuntu/Ubuntu-LI.ttf b/static/fonts/Ubuntu/Ubuntu-LI.ttf new file mode 100644 index 0000000..c6cec55 Binary files /dev/null and b/static/fonts/Ubuntu/Ubuntu-LI.ttf differ diff --git a/static/fonts/Ubuntu/Ubuntu-M.ttf b/static/fonts/Ubuntu/Ubuntu-M.ttf new file mode 100644 index 0000000..ca9c03a Binary files /dev/null and b/static/fonts/Ubuntu/Ubuntu-M.ttf differ diff --git a/static/fonts/Ubuntu/Ubuntu-MI.ttf b/static/fonts/Ubuntu/Ubuntu-MI.ttf new file mode 100644 index 0000000..e8d186c Binary files /dev/null and b/static/fonts/Ubuntu/Ubuntu-MI.ttf differ diff --git a/static/fonts/Ubuntu/Ubuntu-R.ttf b/static/fonts/Ubuntu/Ubuntu-R.ttf new file mode 100644 index 0000000..d748728 Binary files /dev/null and b/static/fonts/Ubuntu/Ubuntu-R.ttf differ diff --git a/static/fonts/Ubuntu/Ubuntu-RI.ttf b/static/fonts/Ubuntu/Ubuntu-RI.ttf new file mode 100644 index 0000000..4f2d2bc Binary files /dev/null and b/static/fonts/Ubuntu/Ubuntu-RI.ttf differ diff --git a/static/fonts/Ubuntu/UbuntuMono-B.ttf b/static/fonts/Ubuntu/UbuntuMono-B.ttf new file mode 100644 index 0000000..7bd6665 Binary files /dev/null and b/static/fonts/Ubuntu/UbuntuMono-B.ttf differ diff --git a/static/fonts/Ubuntu/UbuntuMono-BI.ttf b/static/fonts/Ubuntu/UbuntuMono-BI.ttf new file mode 100644 index 0000000..6c5b8ba Binary files /dev/null and b/static/fonts/Ubuntu/UbuntuMono-BI.ttf differ diff --git a/static/fonts/Ubuntu/UbuntuMono-R.ttf b/static/fonts/Ubuntu/UbuntuMono-R.ttf new file mode 100644 index 0000000..fdd309d Binary files /dev/null and b/static/fonts/Ubuntu/UbuntuMono-R.ttf differ diff --git a/static/fonts/Ubuntu/UbuntuMono-RI.ttf b/static/fonts/Ubuntu/UbuntuMono-RI.ttf new file mode 100644 index 0000000..18f81a2 Binary files /dev/null and b/static/fonts/Ubuntu/UbuntuMono-RI.ttf differ diff --git a/templates/anchor-link.html b/templates/anchor-link.html new file mode 100644 index 0000000..b67c464 --- /dev/null +++ b/templates/anchor-link.html @@ -0,0 +1 @@ +# \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index 97bcf7d..c17e296 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,8 +1,9 @@ - + +