mirror of
https://github.com/vincentdoerig/latex-css.git
synced 2024-09-11 13:06:14 +03:00
Add sidenotes (#28)
This commit is contained in:
parent
f6cc0c6878
commit
72e226d44d
@ -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).
|
||||
|
54
index.html
54
index.html
@ -62,6 +62,7 @@
|
||||
</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 @@
|
||||
<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 @@
|
||||
</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 @@
|
||||
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><label for="sn-1" class="sidenote-toggle sidenote-number"></label>
|
||||
<input type="checkbox" id="sn-1" class="sidenote-toggle" />
|
||||
<span class="sidenote"><!-- sidenote content --></span></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><label for="sn-anything" class="sidenote-toggle">⊕</label>
|
||||
<input type="checkbox" id="sn-anything" class="sidenote-toggle" />
|
||||
<span class="sidenote"><!-- sidenote content --></span></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 @@
|
||||
</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>
|
||||
|
93
style.css
93
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;
|
||||
|
2
style.min.css
vendored
2
style.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user