Merge pull request #6 from eeriksp/patch-1

Implement support for sidenotes

5 files changed, 200 insertions, 17 deletions

diff --git a/README.md b/README.md
index abd681d..85d84b7 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,18 @@ tag = "tags"
 series = "series"
 ```
 
+## Shortcodes
+
+### Sidenotes
+
+[LaTeX.css](https://latex.vercel.app/), which HugoTeX is using, defines syntax for sidenotes. However, as it is a little verbose to write, we provide a Hugo shortcode for that:
+
+```
+A sentence deserving a sidenote.{{% sidenote %}}The note itself.{{% /sidenote %}}.
+```
+
+The note will be displayed on the right margin on larger screens. On smaller screns the note will be hidden by default and will open when clicking on the superscript number marking the existence of the note.
+
 ## For contributors
 
 Any issues or pull requests are welcome.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index f5568f5..9d91525 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -13,4 +13,9 @@ footnoteReturnLinkContents = "^"
 [taxonomies]
 category = "categories"
 tag = "tags"
-series = "series"
\ No newline at end of file
+series = "series"
+
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
diff --git a/exampleSite/content/post/shortcodes.md b/exampleSite/content/post/shortcodes.md
new file mode 100644
index 0000000..6787790
--- /dev/null
+++ b/exampleSite/content/post/shortcodes.md
@@ -0,0 +1,25 @@
++++
+title = "Shortcodes"
+description = "A description of theme-specific shortcodes"
+date = "2021-06-21"
+author = "Hugo Authors"
++++
+
+Tips for sidenotes.
+
+<!--more-->
+
+## Sidenotes
+
+[LaTeX.css](https://latex.vercel.app/), which HugoTeX is using, defines syntax for sidenotes. However, as it is a little verbose to write, we provide a Hugo shortcode for that:
+
+```md
+A sentence deserving a sidenote.{{%/* sidenote */%}}The note itself.{{%/* /sidenote */%}}.
+```
+
+Will render into
+
+---
+A sentence deserving a sidenote.{{% sidenote %}}The note itself.{{% /sidenote %}}.
+
+---
\ No newline at end of file
diff --git a/layouts/shortcodes/sidenote.html b/layouts/shortcodes/sidenote.html
new file mode 100644
index 0000000..f856664
--- /dev/null
+++ b/layouts/shortcodes/sidenote.html
@@ -0,0 +1,4 @@
+{{ $id := md5 .Inner }}
+<label for="{{ $id }}" class="sidenote-toggle sidenote-number"></label>
+<input type="checkbox" id="{{ $id }}" class="sidenote-toggle" />
+<span class="sidenote">{{ .Inner }}</span>
diff --git a/static/css/latex.css b/static/css/latex.css
index c8e5772..384d5d4 100644
--- a/static/css/latex.css
+++ b/static/css/latex.css
@@ -1,8 +1,10 @@
 /*!
- * LaTeX.css (https://latex.now.sh/)
+ * Taken from LaTeX.css (https://latex.now.sh/)
  *
  * Source: https://github.com/vincentdoerig/latex-css
  * Licensed under MIT (https://github.com/vincentdoerig/latex-css/blob/master/LICENSE)
+ *
+ * Modified for this usecase.
 */
 
 @font-face {
@@ -69,17 +71,20 @@ dd {
   margin: 0;
 }
 
-/* Make default font-size 1rem and add smooth scrolling to anchors */
+/* Add smooth scrolling to anchors */
 html {
-  font-size: 1rem;
   scroll-behavior: smooth;
 }
 
+body.libertinus {
+  font-family: 'Libertinus', Georgia, Cambria, 'Times New Roman', Times, serif;
+}
+
 body {
   font-family: 'Latin Modern', Georgia, Cambria, 'Times New Roman', Times, serif;
   line-height: 1.8;
 
-  max-width: 80ch;
+  max-width: 90ch;
   min-height: 100vh;
   overflow-x: hidden;
   margin: 0 auto;
@@ -87,6 +92,7 @@ body {
 
   counter-reset: theorem;
   counter-reset: definition;
+  counter-reset: sidenote-counter;
 
   color: hsl(0, 5%, 10%);
   background-color: hsl(210, 20%, 98%);
@@ -95,11 +101,9 @@ body {
 }
 
 /* Justify and hyphenate all paragraphs */
-p {
+p {  
   text-align: justify;
   hyphens: auto;
-  -webkit-hyphens: auto;
-  -moz-hyphens: auto;
   margin-top: 1rem;
 }
 
@@ -122,6 +126,7 @@ a:focus {
 /* Make images easier to work with */
 img {
   max-width: 100%;
+  height: auto;
   display: block;
 }
 
@@ -170,26 +175,66 @@ kbd {
   font-size: 75%;
 }
 
-/* Make table 100% width, add borders between rows */
+/* Better tables */
 table {
   border-collapse: collapse;
   border-spacing: 0;
-  width: 100%;
+  width: auto;
   max-width: 100%;
+  border-top: 2.27px solid black;
+  border-bottom: 2.27px solid black;
+  /* display: block; */
+  overflow-x: auto; /* does not work because element is not block */
+  /* white-space: nowrap; */
+  counter-increment: caption;
+}
+/* add bottom border on column table headings  */
+table tr > th[scope='col'] {
+  border-bottom: 1.36px solid black;
 }
+/* add right border on row table headings  */
+table tr > th[scope='row'] {
+  border-right: 1.36px solid black;
+}
+table > tbody > tr:first-child > td,
+table > tbody > tr:first-child > th {
+  border-top: 1.36px solid black;
+}
+table > tbody > tr:last-child > td,
+table > tbody > tr:last-child > th {
+  border-bottom: 1.36px solid black;
+}
+
 th,
 td {
   text-align: left;
   padding: 0.5rem;
+  line-height: 1.1;
 }
-td {
-  border-bottom: 1px solid hsl(0, 0%, 85%);
+/* Table caption */
+caption {
+  text-align: left;
+  font-size: 0.923em;
+  /* border-bottom: 2pt solid #000; */
+  padding: 0 0.25em 0.25em;
+  width: 100%;
+  margin-left: 0;
+}
+
+caption::before {
+  content: 'Table ' counter(caption) '. ';
+  font-weight: bold;
 }
-thead th {
-  border-bottom: 2px solid hsl(0, 0%, 70%);
+
+/* allow scroll on the x-axis */
+.scroll-wrapper {
+  overflow-x: auto;
 }
-tfoot th {
-  border-top: 2px solid hsl(0, 0%, 70%);
+
+/* if a table is wrapped in a scroll wrapper,
+  the table cells shouldn't wrap */
+.scroll-wrapper > table td {
+  white-space: nowrap;
 }
 
 /* Center align the title */
@@ -280,6 +325,98 @@ dl dd {
   text-align: center;
 }
 
+/* Sidenotes */
+
+.sidenote {
+  font-size: 0.8rem;
+  float: right;
+  clear: right;
+  width: 18vw;
+  margin-right: -20vw;
+  margin-bottom: 1em;
+}
+
+.sidenote.left {
+  float: left;
+  margin-left: -20vw;
+  margin-bottom: 1em;
+}
+
+/* (WIP) add border when a sidenote is clicked on */
+.sidenote:target {
+  border: hsl(55, 55%, 70%) 1.5px solid;
+  padding: 0 .5rem;
+  scroll-margin-block-start: 10rem;
+}
+
+/* sidenote counter */
+.sidenote-number {
+  counter-increment: sidenote-counter;
+}
+
+.sidenote-number::after,
+.sidenote::before {
+  position: relative;
+  vertical-align: baseline;
+}
+
+/* add number in main content */
+.sidenote-number::after {
+  content: counter(sidenote-counter);
+  font-size: 0.7rem;
+  top: -0.5rem;
+  left: 0.1rem;
+}
+
+/* add number in front of the sidenote */
+.sidenote-number ~ .sidenote::before {
+  content: counter(sidenote-counter) ' ';
+  font-size: 0.7rem;
+  top: -0.5rem;
+}
+
+label.sidenote-toggle:not(.sidenote-number) {
+  display: none;
+}
+
+/* sidenotes inside blockquotes are indented more */
+blockquote .sidenote {
+  margin-right: -24vw;
+  width: 18vw;
+}
+
+
+label.sidenote-toggle {
+  display: inline;
+  cursor: pointer;
+}
+
+input.sidenote-toggle {
+  display: none;
+}
+
+@media (max-width: 1050px) {
+  label.sidenote-toggle:not(.sidenote-number) {
+    display: inline;
+  }
+  .sidenote {
+    display: none;
+  }
+  .sidenote-toggle:checked + .sidenote {
+    display: block;
+    margin: 0.5rem 1.25rem 1rem 0.5rem;
+    float: left;
+    left: 1rem;
+    clear: both;
+    width: 95%;
+  }
+  /* tweak indentation of sidenote inside a blockquote */
+  blockquote .sidenote {
+    margin-right: -25vw;
+    width: 16vw;
+  }
+}
+
 /* Make footnote text smaller and left align it (looks bad with long URLs) */
 .footnotes p {
   text-align: left;
@@ -380,4 +517,4 @@ h4,
 h5,
 h6 {
   margin-bottom: 0.8rem;
-}
\ No newline at end of file
+}