Proper footnote styling

config.toml

@@ -32,6 +32,7 @@ highlight_themes_css = [
   { theme = "solarized-light", filename = "syntax-theme-light.css" },
 ]
 smart_punctuation = true
+bottom_footnotes = true
 
 [search]
 index_format = "elasticlunr_json"

content/demo/index.md

@@ -17,7 +17,7 @@ Text can be **bold**, *italic*, ~~strikethrough~~, and ***~~all at the same time
 
 [Link to another page](@/demo/page.md).
 
-There should be whitespace between paragraphs.
+There should be whitespace between paragraphs[^1].
 
 # Heading 1
 ## Heading 2
@@ -26,7 +26,7 @@ There should be whitespace between paragraphs.
 ##### Heading 5
 ###### Heading 6
 
-This is a normal paragraph following a header.
+This is a normal paragraph[^2] following a header.
 
 😭😂🥺🤣❤️✨🙏😍🥰😊
 
@@ -424,3 +424,6 @@ Blah blah <q>Inline Quote</q> hmm.
   <a class="inline-button" href="#top">Go to Top</a>
   <a class="inline-button colored external" href="https://example.org">Example</a>
 </div>
+
+[^1]: Footnote
+[^2]: [Footnote (link)](https://example.org)

sass/_footnotes-list.scss

@@ -0,0 +1,36 @@
+.footnotes-list {
+	p {
+		margin-block-start: 0;
+		margin-block-end: 0;
+	}
+
+	a[href*="#fr-"] {
+		$mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 14a1 1 0 0 1-.707-.293l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 1 1 1.414 1.414L3.414 8H12c1.117 0 2-.883 2-2s-.883-2-2-2c-.55 0-1-.45-1-1s.45-1 1-1c2.2 0 4 1.8 4 4s-1.8 4-4 4H3.414l2.293 2.293A1 1 0 0 1 5 14m0 0'/%3E%3C/svg%3E");
+		-webkit-mask-image: $mask;
+		-webkit-user-select: none;
+		-webkit-mask-size: cover;
+		display: inline-block;
+		vertical-align: -0.3125em;
+		mask-image: $mask;
+		mask-size: cover;
+		transition: var(--transition);
+		background-color: var(--fg-muted-4);
+		width: 1rem;
+		height: 1rem;
+		color: transparent;
+		user-select: none;
+
+		&:hover {
+			background-color: var(--primary-color);
+		}
+	}
+
+	a + a[href*="#fr-"] {
+		opacity: 0.6;
+		background-color: var(--primary-color);
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}

sass/_general.scss

@@ -30,7 +30,7 @@ body {
 	min-height: 100vh;
 	color: var(--fg-color);
 	line-height: 1.6;
-	font-family: var(--font-system-ui);
+	font-family: var(--font-system-ui), var(--font-emoji);
 }
 
 // Style text selection to use primary color

sass/style.scss

@@ -17,6 +17,7 @@
 @use "crt";
 @use "external";
 @use "footer";
+@use "footnotes-list";
 @use "general";
 @use "hidden";
 @use "icon";