first commit

css/sidenotes.css

@@ -0,0 +1,179 @@
+/* 
+This file is copied from 
+https://github.com/slotThe/slotThe.github.io/blob/main/css/sidenotes.css
+with minor modifications made by Yu Cong.
+
+The original author is Tony Zorman.
+
+Extracted from:
+
+    https://github.com/edwardtufte/tufte-css
+
+   and modified to fit my website's theme.
+*/
+
+body {
+    counter-reset: sidenote-counter;
+}
+
+.sidenote,
+.marginnote,
+.marginnote-left {
+    float: right;
+    clear: right;
+    margin-right: -42%;
+    width: 36%;
+    margin-top: 0.3rem;
+    margin-bottom: 0;
+    font-size: 0.8em;
+    line-height: 1.2;
+    vertical-align: baseline;
+    position: relative;
+    text-align: left;
+}
+@media (max-width: 1200px) {
+    .sidenote,
+    .marginnote,
+    .marginnote-left {
+        margin-right: -40%;
+        width: 33%;
+    }
+}
+
+.marginnote-left {
+    float: left;
+    clear: left;
+    margin-left: -32%;
+    width: 25%;
+    position: relative;
+    text-align: right;
+}
+/* The first condition is for the case of a left-aligned layout (on a
+   smaller screen), and the second condition for a more centered layout
+   on a larger screen.  It's a bit awkward, sadly :/ */
+@media (max-width: 1349px) or ((min-width: 1367px) and (max-width: 1620px)) {
+    .marginnote-left {
+        margin-left: -33%;
+        width: 30%;
+    }
+}
+
+.sidenote code {
+    font-size: 0.94em;
+}
+
+/* For some reason, although only `overflow-x` is set in `default.css`,
+   block code in side and marginnotes gets a vertical (!) scrollbar no
+   matter what; disable that.
+*/
+div .marginnote pre,
+div .sidenote pre {
+    overflow-y: hidden;
+}
+
+.sidenote-number {
+    counter-increment: sidenote-counter;
+    color: var(--color-link);
+}
+
+.sidenote-number:after,
+.sidenote:before {
+    position: relative;
+    vertical-align: baseline;
+}
+
+.sidenote-number:after {
+    content: counter(sidenote-counter);
+    font-size: 0.8rem;
+    top: -0.5rem;
+}
+
+/* Properly position siednote number and adjust position of sidenote
+   paragraphs:
+    https://github.com/edwardtufte/tufte-css/issues/93#issuecomment-670695382
+*/
+.sidenote::before {
+    content: counter(sidenote-counter) " ";
+    font-size: 0.8rem;
+    top: -0.55rem;
+    position: absolute;
+    right: calc(100% + 0.5em);
+}
+
+.sidenote p {
+    margin: 1em 0;
+}
+
+.sidenote p:first-child {
+    margin-top: 0;
+}
+
+.sidenote p:last-child {
+    margin-bottom: 0;
+}
+
+/* */
+
+input.margin-toggle {
+    display: none;
+}
+
+label.sidenote-number {
+    display: inline-block;
+    max-height: 2rem; /* should be less than or equal to paragraph line-height */
+}
+
+label.margin-toggle:not(.sidenote-number) {
+    display: none;
+}
+
+.iframe-wrapper {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    padding-top: 25px;
+    height: 0;
+}
+
+.iframe-wrapper iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+@media (max-width: 1200px) {
+    label.margin-toggle:not(.sidenote-number) {
+        display: inline;
+    }
+
+    .sidenote,
+    .marginnote,
+    .marginnote-left {
+        display: none;
+    }
+
+    /* Linkify sidenotes iff they are clickable */
+    .margin-toggle,
+    .sidenote-number:after {
+        color: var(--color-link);
+        text-decoration: none;
+    }
+
+    .margin-toggle:checked + .sidenote,
+    .margin-toggle:checked + .marginnote,
+    .margin-toggle:checked + .marginnote-left {
+        display: block;
+        float: left;
+        left: 1rem;
+        clear: both;
+        width: 95%;
+        margin: 1rem 2.5%;
+        position: relative;
+        text-align: left;
+    }
+
+    label {
+        cursor: pointer;
+    }
+}