codex update the css.

css/sidenotes.css

@@ -1,5 +1,5 @@
-/* 
-This file is copied from 
+/*
+This file is copied from
 https://github.com/slotThe/slotThe.github.io/blob/main/css/sidenotes.css
 with minor modifications made by Yu Cong.
 
@@ -19,127 +19,148 @@ body {
 .sidenote,
 .marginnote,
 .marginnote-left {
+    position: relative;
     float: right;
     clear: right;
-    margin-right: -42%;
     width: 36%;
-    margin-top: 0.3rem;
+    margin-top: 0.45rem;
+    margin-right: -42%;
     margin-bottom: 0;
-    font-size: 0.8em;
-    line-height: 1.2;
+    padding: 0.85rem 1rem;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 1rem;
+    box-shadow: var(--color-shadow-soft);
+    backdrop-filter: blur(14px);
     vertical-align: baseline;
-    position: relative;
+    font-size: 0.82em;
+    line-height: 1.45;
     text-align: left;
 }
+
 @media (max-width: 1200px) {
     .sidenote,
     .marginnote,
     .marginnote-left {
-        margin-right: -40%;
         width: 33%;
+        margin-right: -40%;
     }
 }
 
 .marginnote-left {
+    position: relative;
     float: left;
     clear: left;
-    margin-left: -32%;
     width: 25%;
-    position: relative;
+    margin-left: -32%;
     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)) {
+
+/* 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. */
+@media (max-width: 1349px), (min-width: 1367px) and (max-width: 1620px) {
     .marginnote-left {
-        margin-left: -33%;
         width: 30%;
+        margin-left: -33%;
     }
 }
 
-.sidenote code {
-    font-size: 0.94em;
+.sidenote > :first-child,
+.marginnote > :first-child,
+.marginnote-left > :first-child {
+    margin-top: 0;
 }
 
-/* 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.
-*/
+.sidenote > :last-child,
+.marginnote > :last-child,
+.marginnote-left > :last-child {
+    margin-bottom: 0;
+}
+
+.sidenote code {
+    font-size: 0.92em;
+}
+
+/* Block code in side and margin notes gets a vertical scrollbar on some
+   browsers; disable that. */
 div .marginnote pre,
 div .sidenote pre {
+    margin: 0.75rem 0;
     overflow-y: hidden;
 }
 
 .sidenote-number {
-    counter-increment: sidenote-counter;
     color: var(--color-link);
+    counter-increment: sidenote-counter;
+    font-family: "IosevkaC", sans-serif;
 }
 
 .sidenote-number:after,
 .sidenote:before {
     position: relative;
     vertical-align: baseline;
+    color: var(--color-link);
+    font-family: "IosevkaC", sans-serif;
 }
 
 .sidenote-number:after {
     content: counter(sidenote-counter);
-    font-size: 0.8rem;
     top: -0.5rem;
+    font-size: 0.8rem;
+    font-weight: 700;
 }
 
-/* Properly position siednote number and adjust position of sidenote
+/* Properly position sidenote 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;
+    top: -0.55rem;
     right: calc(100% + 0.5em);
+    font-size: 0.8rem;
+    font-weight: 700;
 }
 
 .sidenote p {
-    margin: 1em 0;
+    margin: 0.85em 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 */
+    max-height: 2rem;
 }
 
 label.margin-toggle:not(.sidenote-number) {
     display: none;
+    color: var(--color-link);
+    font-family: "IosevkaC", sans-serif;
 }
 
 .iframe-wrapper {
     position: relative;
-    padding-bottom: 56.25%; /* 16:9 */
-    padding-top: 25px;
     height: 0;
+    padding-top: 25px;
+    padding-bottom: 56.25%;
+    overflow: hidden;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 1rem;
+    box-shadow: var(--color-shadow-soft);
 }
 
 .iframe-wrapper iframe {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
+    border: 0;
 }
 
 @media (max-width: 1200px) {
@@ -153,23 +174,24 @@ label.margin-toggle:not(.sidenote-number) {
         display: none;
     }
 
-    /* Linkify sidenotes iff they are clickable */
+    /* Linkify sidenotes iff they are clickable. */
     .margin-toggle,
     .sidenote-number:after {
         color: var(--color-link);
-        text-decoration: none;
+        text-decoration: underline;
+        text-decoration-color: var(--color-link-line);
     }
 
     .margin-toggle:checked + .sidenote,
     .margin-toggle:checked + .marginnote,
     .margin-toggle:checked + .marginnote-left {
-        display: block;
+        position: relative;
         float: left;
         left: 1rem;
         clear: both;
+        display: block;
         width: 95%;
         margin: 1rem 2.5%;
-        position: relative;
         text-align: left;
     }