Add sidenotes (#28)

vincentdoerig · Aug 11, 2020 · 72e226d · 72e226d · vercel · Aug 11, 2020
1 parent f6cc0c6
commit 72e226d
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -65,6 +65,8 @@ Most of the CSS reset is based on Andy Bell's [Modern CSS Reset](https://hankchi
 
 The sample [HTML5 markup test page](https://latex.now.sh/elements) is based on [html5-test-page](https://github.com/cbracco/html5-test-page) by @cbracco.
 
+The idea of sidenotes was taken and adpated from [Tufte CSS](https://edwardtufte.github.io/tufte-css/).
+
 ## License
 
 This project is open source and available under the [MIT License](LICENSE).
diff --git a/index.html b/index.html
@@ -62,6 +62,7 @@ <h2>Contents</h2>
         </ol>
       </li>
       <li><a href="#language-support">Language Support</a></li>
+      <li><a href="#sidenotes">Sidenotes</a></li>
       <li>
         <a href="#html-elements">HTML Elements</a>
         <ol>
@@ -72,6 +73,12 @@ <h2>Contents</h2>
           <li><a href="#images">Images</a></li>
         </ol>
       </li>
+      <li>
+        <a href="#miscellaneous">Miscellaneous</a>
+        <ol>
+          <li><a href="#scroll-overflow">Scroll overflow</a></li>
+        </ol>
+      </li>
     </ol>
   </nav>
 
@@ -144,10 +151,10 @@ <h4 id="proofs-theorems">Proofs & Theorems</h4>
       </div>
       <div class="proof">
         For any $s \in S,$ we let $f(s)$ denote the value of $k$ such that $s$
-        is the $k$ th smallest element of $S .$ This map is well defined for
+        is the $k$ the smallest element of $S .$ This map is well defined for
         any $s,$ because there are only finitely many natural numbers between
         1 and $s .$ It is impossible for two different elements of $S$ to both
-        be the $k$ th smallest element of $S$. Hence $f$ is one-to-one. Also,
+        be the $k$ the smallest element of $S$. Hence $f$ is one-to-one. Also,
         since $S$ is infinite, $f$ is onto.
       </div>
       <h4 id="lemmas">Lemmas</h4>
@@ -175,6 +182,45 @@ <h2 id="language-support">Language Support</h2>
         Take a peak at the <a href="/languages">language support demo</a> to
         see how the labels of the different languages change.
       </p>
+
+      <h2 id="sidenotes">Sidenotes</h2>
+      <p>
+        Sidenotes can be used as an alternative to footnotes, where the user does not
+        have to jump to the bottom of the page to read it. On mobile, click the
+        superscript to reveal the note<label for="sn-1" class="sidenote-toggle sidenote-number"></label><input
+          type="checkbox" id="sn-1" class="sidenote-toggle" /><span class="sidenote">Yay, sidenotes!. If you are on
+          mobile, I will appear inline. If you are
+          using a larger screen, the sidenote will appear to the right of the
+          text.</span>.
+      </p>
+
+      <p>
+        Sidenotes do need a little bit of setup, they are made up of a label, an
+        invisible checkbox on top of the number and a span with the text inside. The
+        superscript is audomatically defined and incremented using CSS when the
+        checkbox has a class of <code>sidenote-number</code>.
+      </p>
+      <pre><code>&lt;label for="sn-1" class="sidenote-toggle sidenote-number"&gt;&lt;/label&gt;
+&lt;input type="checkbox" id="sn-1" class="sidenote-toggle" /&gt;
+&lt;span class="sidenote"&gt;&lt;!-- sidenote content --&gt;&lt;/span&gt;</code></pre>
+      <p>If you do not need superscripted numbers, you can opt out of the <code>sidenote-number</code> class and the sidenote will not have a number assigned. On a smaller screen, you will need to add a symbol inside the <code>label</code> for the user to click on. <label for="sn-plus" class="sidenote-toggle">⊕</label><input type="checkbox"
+          id="sn-plus" class="sidenote-toggle" /><span class="sidenote">This is a sidenote without a number.</span></p>
+      <p>The snippet for a sidenote without a number is very similar:</p>
+      <pre><code>&lt;label for="sn-anything" class="sidenote-toggle"&gt;⊕&lt;/label&gt;
+&lt;input type="checkbox" id="sn-anything" class="sidenote-toggle" /&gt;
+&lt;span class="sidenote"&gt;&lt;!-- sidenote content --&gt;&lt;/span&gt;</code></pre>
+      <!-- sidnotes as a link
+          <label for="sn-plus" class="sidenote-toggle"><a
+            href="#sn-plus-content">⊕</a></label><input type="checkbox" id="sn-plus" class="sidenote-toggle" /><span
+          class="sidenote" id="sn-plus-content">This is a sidenote without a number.</span> -->
+      <p>Add a class of <code>left</code> to the span with the <code>sidenote</code> class to make the note appear on the left side of the page on instead of right.</p>
+      <p>The symbol you could use to indicate a sidenote is up to you. What about this notebook. <label for="sn-symbol"
+          class="sidenote-toggle">📝</label><input type="checkbox" id="sn-symbol" class="sidenote-toggle" /><span
+          class="sidenote left">A notebook indicating a note. Aha. <br> (if on a large screen, resize to mobile to see the emoji)</span></p>
+      <!-- <blockquote>You could also have sidenotes inside blockquotes just like this one <label for="sn-quote"
+          class="sidenote-toggle">🔖</label><input type="checkbox" id="sn-quote" class="sidenote-toggle" /><span
+          class="sidenote">Hello there!</span>.</blockquote> -->
+
       <h2 id="html-elements">HTML Elements</h2>
       <p>
         For a preview of all HTML elements with LaTeX.css, check out the
@@ -337,9 +383,9 @@ <h3 id="images">Images</h3>
         </figcaption>
       </figure>
 
-      <h2>Miscellaneous</h2>
+      <h2 id="miscellaneous">Miscellaneous</h2>
 
-      <h3>Scroll overflow</h3>
+      <h3 id="scroll-overflow">Scroll overflow</h3>
       <p>It is best to break up long equations into smaller parts, but when this isn't possible, consider wrapping the
         overflowing element with a class of <code>scroll-overflow</code> to
         allow scrolling on the x-axis. Large tables should also be wrapped with this class.</p>

diff --git a/style.css b/style.css
@@ -87,6 +87,7 @@ body {
 
   counter-reset: theorem;
   counter-reset: definition;
+  counter-reset: sidenote-counter;
 
   color: hsl(0, 5%, 10%);
   background-color: hsl(210, 20%, 98%);
@@ -321,6 +322,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;

diff --git a/style.min.css b/style.min.css