From 537bea11363be5411ed1697271e5045f406b483d Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Wed, 7 Feb 2024 12:28:35 +0100
Subject: [PATCH] Redo markdown preview

---
 src/assets/css/blocks/footnotes.css | 21 ++++++++++++
 src/posts/2022-11-02-markdown.md    | 52 ++++++++++++++++++-----------
 2 files changed, 54 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/css/blocks/footnotes.css

diff --git a/src/assets/css/blocks/footnotes.css b/src/assets/css/blocks/footnotes.css
new file mode 100644
index 0000000..3eb67fd
--- /dev/null
+++ b/src/assets/css/blocks/footnotes.css
@@ -0,0 +1,21 @@
+.footnotes {
+  font-size: var(--size-step-min-1);
+}
+
+.footnote-ref {
+  font-size: var(--size-step-min-1);
+  vertical-align: super;
+  margin-inline-start: var(--space-xs);
+  color: var(--color-secondary);
+}
+
+.footnote-backref {
+  text-decoration: none;
+  background-color: var(--color-bg-accent);
+  border-radius: var(--border-radius);
+  padding-inline: var(--space-xs);
+}
+
+.footnote-backref:hover {
+  color: var(--color-primary);
+}
diff --git a/src/posts/2022-11-02-markdown.md b/src/posts/2022-11-02-markdown.md
index 7221dc4..5007c40 100644
--- a/src/posts/2022-11-02-markdown.md
+++ b/src/posts/2022-11-02-markdown.md
@@ -5,11 +5,13 @@ date: 2022-11-02
 tags: ['markdown', 'feature']
 ---
 
-A lot of markdown packages are installed to help you write your posts. You can configure them in `config/plugins/markdown.js`.
+A lot of markdown packages are installed to help you write your posts.
+You can configure them in `config/plugins/markdown.js`.
 
-As of my personal preference, there are some presets. For example the automatic conversion of web pages to links (lenesaile.com) and the automatic addition of `target: '_blank'` and `rel: 'noreferrer noopener'` for external links (all links with the pattern`/^https?:/`).
+As of my personal preference, there are some presets. For example the automatic conversion of web pages to links (www.lenesaile.com) and the automatic addition of and `rel: 'noopener'` for external links (all links with the pattern`/^https?:/`).
 
-This is a small pitfall! Take care to not prefix your internal links with your domain, or else they will be treated ad external as well. To link internally use this pattern:
+**This is a tiny pitfall!**
+Take care to not prefix your internal links with your domain, or else they will be treated ad external as well. To link internally use this pattern:
 
 ```
 An internal link to the [about page](/about/)
@@ -75,12 +77,16 @@ _This is italic text_
 
 Syntax highlighting
 
-```js
-var foo = function (bar) {
-  return bar++;
-};
+```css
+.back-top-top {
+  padding: 10px;
+  background: white;
+  margin-top: 110vh;
+  position: sticky;
+  bottom: 0;
+}
 
-console.log(foo(5));
+/* by David Darnes */
 ```
 
 ## Tables
@@ -93,27 +99,29 @@ console.log(foo(5));
 
 ## Links
 
-`rel="noreferrer noopener"` and `target="_blank"` is added automatically to external links. So is an indicator icon, see global-styles.css
-[link text](http://dev.nodeca.com)
-[link with title](http://nodeca.github.io/pica/demo/ 'title text!')
+[Read all those articles](https://moderncss.dev/)
+Autoconverted link https://every-layout.dev/ (enabled via linkify)
 
-Autoconverted link https://github.com/nodeca/pica (enabled via linkify)
+## Emojis
 
-### Emojis
+**Literal:**
+🤩 💯 💚 👻 👾
 
-Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
-Shortcuts (emoticons): :-) :-( 8-) ;)
+**Classic markup:**
+:cry: :poop: :fire: :laughing: :christmas_tree:
+([A reference for emoji markup](https://gist.github.com/rxaviers/7360908))
 
-### mark
+**Shortcuts (emoticons)**:
+:-) :-( 8-) ;)
+
+## mark
 
 ==Marked text==
 
-### Footnotes
+## Footnotes
 
 Footnote 1 link[^first].
 Footnote 2 link[^second].
-Inline footnote^[Text of inline footnote] definition.
-Duplicated footnote reference[^second].
 
 [^first]:
     Footnote **can have markup**
@@ -122,3 +130,9 @@ Duplicated footnote reference[^second].
 [^second]: Footnote text.
 
 \*[HTML]: Hyper Text Markup Language
+
+## Images
+
+Consider that `src` is already prepended in the settings.
+
+![](/assets/images/gallery/asturias-4.jpg)