feat: add sidenote shortcode

2 files changed, 36 insertions, 0 deletions

diff --git a/assets/css/index.css b/assets/css/index.css
index c1eac69e..75dc4231 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -621,6 +621,38 @@ a.blog-link img {
   display: block;
 }
 
+/* sidenote shortcode */
+
+@media screen and (max-width: 1199px) {
+    .sidenote {
+        background: var(--block-background-color);
+        padding: 1rem 1.5rem;
+        border-radius: 0.5rem;
+    }
+    .sidenote-title {
+        font-size: 1rem;
+        text-align: right;
+        font-style: italic
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .sidenote {
+        position: absolute;
+        left: calc(50% + var(--page-width) / 2);
+        margin-left: 2rem;
+        max-width: 20rem
+    }
+}
+
+.sidenote-title {
+    margin: 0
+}
+
+.sidenote-content {
+    font-size: 1rem
+}
+
 /* toc */
 
 #toc-container {
diff --git a/layouts/shortcodes/sidenote.html b/layouts/shortcodes/sidenote.html
new file mode 100644
index 00000000..bf2a87d3
--- /dev/null
+++ b/layouts/shortcodes/sidenote.html
@@ -0,0 +1,4 @@
+<div class="sidenote">
+    <h4 class="sidenote-title">{{ index .Params 0 | markdownify }}</h4>
+    <div class="sidenote-content">{{ index .Params 1 | markdownify }}</div>
+</div>