commit 98c76586bbc9e8319469b83c14a288ad5870ccb4
parent 2dd38f58c9c42d8aeb7503a94ad95203d2383286
Author: Silas Brack <silasbrack@gmail.com>
Date: Mon, 27 Apr 2026 12:43:04 +0200
Replace sidenote checkbox hack with aside elements
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Diffstat:
3 files changed, 24 insertions(+), 46 deletions(-)
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
<title>Silas Brack</title>
<link rel="shortcut icon" href="data:," />
<style type="text/css">
-:root{--font-sans:Seravek,'Gill Sans Nova',Ubuntu,Calibri,'DejaVu Sans',source-sans-pro,sans-serif;--font-serif:Charter,'Bitstream Charter','Sitka Text',Cambria,serif;--font-mono:JetBrains Mono,monospace}code{font-family:var(--font-mono);font-size:.75rem}html{font-size:2.4vw}@media (min-width: 1000px){html{font-size:20px}}@media (max-width: 760px){html{font-size:18px}}body{width:87.5%;margin-left:auto;margin-right:auto;padding-left:12.5%;font-family:var(--font-serif);max-width:1400px;counter-reset:sidenote-counter}h1{font-family:var(--font-sans);font-weight:700;font-size:1.5rem;margin-top:2.5rem;margin-bottom:1.5rem;line-height:1}h2{font-family:var(--font-sans);font-weight:700;font-size:1.1rem}h3{font-size:1rem}p.subtitle{font-family:var(--font-sans);margin-top:1rem;margin-bottom:1rem;line-height:1}article{padding:3rem 0}section{padding-top:1rem;padding-bottom:1rem}p{font-size:1rem;line-height:1.4rem;margin-top:1.4rem;margin-bottom:1.4rem}section > p,section > ol,section > ul{width:55%}section > hr{width:55%;margin-left:0}img{max-width:100%}.sidenote,.marginnote{float:right;clear:right;margin-right:-60%;width:50%;margin-top:.3rem;margin-bottom:0;font-size:.85rem;line-height:1.3;position:relative}.sidenote-number{counter-increment:sidenote-counter}.sidenote-number:after,.sidenote:before{position:relative}.sidenote-number:after{content:counter(sidenote-counter);font-size:.7rem;top:-.5rem;left:.1rem}.sidenote:before{content:counter(sidenote-counter) " ";font-size:.7rem;top:-.5rem}input.margin-toggle{display:none}label.sidenote-number{display:inline-block;max-height:2rem}label.margin-toggle:not(.sidenote-number){display:none}.socials a{display:block;line-height:2}table{border-collapse:collapse;border-top:2px solid #333;border-bottom:2px solid #333}th,td{padding:7px 14px}thead th{font-weight:700;border-bottom:1px solid #333;text-align:left}td{border-bottom:1px solid #e5e5e5}tbody tr:last-child td{border-bottom:0}.numeric{text-align:right}@media (max-width: 760px){body{width:90%;padding-left:5%;padding-right:5%}section > p,section > ol,section > ul{width:100%}label.margin-toggle:not(.sidenote-number){display:inline}.sidenote,.marginnote{display:block;float:none;clear:both;width:100%;margin:1rem 0;position:relative}.marginnote.socials{display:flex;justify-content:space-around}.marginnote.socials a{display:inline}label.margin-toggle:not(.sidenote-number){cursor:pointer}img{width:100%}}
+:root{--font-sans:Seravek,'Gill Sans Nova',Ubuntu,Calibri,'DejaVu Sans',source-sans-pro,sans-serif;--font-serif:Charter,'Bitstream Charter','Sitka Text',Cambria,serif;--font-mono:JetBrains Mono,monospace}code{font-family:var(--font-mono);font-size:.75rem}html{font-size:2.4vw}@media(min-width:1000px){html{font-size:20px}}@media(max-width:760px){html{font-size:18px}}body{width:87.5%;margin-left:auto;margin-right:auto;padding-left:12.5%;font-family:var(--font-serif);max-width:1400px;counter-reset:sidenote-counter}h1{font-family:var(--font-sans);font-weight:700;font-size:1.5rem;margin-top:2.5rem;margin-bottom:1.5rem;line-height:1}h2{font-family:var(--font-sans);font-weight:700;font-size:1.1rem}h3{font-size:1rem}p.subtitle{font-family:var(--font-sans);margin-top:1rem;margin-bottom:1rem;line-height:1}article{padding:3rem 0}section{padding-top:1rem;padding-bottom:1rem}p{font-size:1rem;line-height:1.4rem;margin-top:1.4rem;margin-bottom:1.4rem}section>p,section>ol,section>ul{width:55%}section>hr{width:55%;margin-left:0}img{max-width:100%}aside.sidenote,.marginnote{float:right;clear:right;margin-right:-60%;width:50%;margin-top:.3rem;margin-bottom:0;font-size:.85rem;line-height:1.3;position:relative}sup.sn-ref{counter-increment:sidenote-counter}sup.sn-ref::after{content:counter(sidenote-counter);font-size:.7rem}aside.sidenote::before{content:counter(sidenote-counter) " ";font-size:.7rem;position:relative;top:-.3rem}.socials a{display:block;line-height:2}table{border-collapse:collapse;border-top:2px solid #333;border-bottom:2px solid #333}th,td{padding:7px 14px}thead th{font-weight:700;border-bottom:1px solid #333;text-align:left}td{border-bottom:1px solid #e5e5e5}tbody tr:last-child td{border-bottom:0}.numeric{text-align:right}@media(max-width:760px){body{width:90%;padding-left:5%;padding-right:5%}section>p,section>ol,section>ul{width:100%}aside.sidenote{float:none;display:block;width:95%;margin:1rem 2.5%;padding:.5rem;background:light-dark(rgba(0,0,0,.05),rgba(255,255,255,.05));border-radius:4px}.marginnote{display:block;float:none;clear:both;width:100%;margin:1rem 0;position:relative}.marginnote.socials{display:flex;justify-content:space-around}.marginnote.socials a{display:inline}img{width:100%}}
</style>
</head>
@@ -53,20 +53,16 @@
</p>
<p>
I hold a master's in Mathematical Modelling and Computation from the Technical
- University of Denmark. My thesis<label for="sn-thesis" class="margin-toggle sidenote-number" ></label>
- <input type="checkbox" id="sn-thesis" class="margin-toggle" />
- <span class="sidenote">
- <a href="./assets/thesis.pdf" >“Effortless Bayesian Deep Learning: Tapping Into the Potential of Modern Optimizers”</a >
- </span>
+ University of Denmark. My thesis<sup class="sn-ref"></sup><aside class="sidenote">
+ <a href="./assets/thesis.pdf">"Effortless Bayesian Deep Learning: Tapping Into the Potential of Modern Optimizers"</a>
+ </aside>
was focused on implicit matrix algorithms for the
Laplace approximation in Søren Hauberg's Cognitive Systems group at DTU Compute.
- My work in the group also led to a publication at NeurIPS<label for="sn-metric-learning" class="margin-toggle sidenote-number" ></label >
- <input type="checkbox" id="sn-metric-learning" class="margin-toggle" />
- <span class="sidenote">
- <a href="https://proceedings.neurips.cc/paper_files/paper/2023/hash/da7ce04b3683b173691ecbb801f2690f-Abstract-Conference.html" >
- “Bayesian Metric Learning for Uncertainty Quantification in Image Retrieval,” in <em>Advances in Neural Information Processing Systems</em>, 2023.
- </a >
- </span>
+ My work in the group also led to a publication at NeurIPS<sup class="sn-ref"></sup><aside class="sidenote">
+ <a href="https://proceedings.neurips.cc/paper_files/paper/2023/hash/da7ce04b3683b173691ecbb801f2690f-Abstract-Conference.html">
+ "Bayesian Metric Learning for Uncertainty Quantification in Image Retrieval," in <em>Advances in Neural Information Processing Systems</em>, 2023.
+ </a>
+ </aside>
based on applying the Laplace approximation
to metric learning.
</p>
diff --git a/style.css b/style.css
@@ -95,7 +95,7 @@ img {
max-width: 100%;
}
-.sidenote,
+aside.sidenote,
.marginnote {
float: right;
clear: right;
@@ -108,39 +108,20 @@ img {
position: relative;
}
-.sidenote-number {
+sup.sn-ref {
counter-increment: sidenote-counter;
}
-.sidenote-number:after,
-.sidenote:before {
- position: relative;
-}
-
-.sidenote-number:after {
+sup.sn-ref::after {
content: counter(sidenote-counter);
font-size: 0.7rem;
- top: -0.5rem;
- left: 0.1rem;
}
-.sidenote:before {
+aside.sidenote::before {
content: counter(sidenote-counter) " ";
font-size: 0.7rem;
- top: -0.5rem;
-}
-
-input.margin-toggle {
- display: none;
-}
-
-label.sidenote-number {
- display: inline-block;
- max-height: 2rem;
-}
-
-label.margin-toggle:not(.sidenote-number) {
- display: none;
+ position: relative;
+ top: -0.3rem;
}
.socials a {
@@ -186,11 +167,16 @@ tbody tr:last-child td{
width: 100%;
}
- label.margin-toggle:not(.sidenote-number) {
- display: inline;
+ aside.sidenote {
+ float: none;
+ display: block;
+ width: 95%;
+ margin: 1rem 2.5%;
+ padding: 0.5rem;
+ background: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.05));
+ border-radius: 4px;
}
- .sidenote,
.marginnote {
display: block;
float: none;
@@ -209,10 +195,6 @@ tbody tr:last-child td{
display: inline;
}
- label.margin-toggle:not(.sidenote-number) {
- cursor: pointer;
- }
-
img {
width: 100%;
}
diff --git a/style.min.css b/style.min.css
@@ -1 +1 @@
-:root{--font-sans:Seravek,'Gill Sans Nova',Ubuntu,Calibri,'DejaVu Sans',source-sans-pro,sans-serif;--font-serif:Charter,'Bitstream Charter','Sitka Text',Cambria,serif;--font-mono:JetBrains Mono,monospace}code{font-family:var(--font-mono);font-size:.75rem}html{font-size:2.4vw}@media (min-width: 1000px){html{font-size:20px}}@media (max-width: 760px){html{font-size:18px}}body{width:87.5%;margin-left:auto;margin-right:auto;padding-left:12.5%;font-family:var(--font-serif);max-width:1400px;counter-reset:sidenote-counter}h1{font-family:var(--font-sans);font-weight:700;font-size:1.5rem;margin-top:2.5rem;margin-bottom:1.5rem;line-height:1}h2{font-family:var(--font-sans);font-weight:700;font-size:1.1rem}h3{font-size:1rem}p.subtitle{font-family:var(--font-sans);margin-top:1rem;margin-bottom:1rem;line-height:1}article{padding:3rem 0}section{padding-top:1rem;padding-bottom:1rem}p{font-size:1rem;line-height:1.4rem;margin-top:1.4rem;margin-bottom:1.4rem}section > p,section > ol,section > ul{width:55%}section > hr{width:55%;margin-left:0}img{max-width:100%}.sidenote,.marginnote{float:right;clear:right;margin-right:-60%;width:50%;margin-top:.3rem;margin-bottom:0;font-size:.85rem;line-height:1.3;position:relative}.sidenote-number{counter-increment:sidenote-counter}.sidenote-number:after,.sidenote:before{position:relative}.sidenote-number:after{content:counter(sidenote-counter);font-size:.7rem;top:-.5rem;left:.1rem}.sidenote:before{content:counter(sidenote-counter) " ";font-size:.7rem;top:-.5rem}input.margin-toggle{display:none}label.sidenote-number{display:inline-block;max-height:2rem}label.margin-toggle:not(.sidenote-number){display:none}.socials a{display:block;line-height:2}table{border-collapse:collapse;border-top:2px solid #333;border-bottom:2px solid #333}th,td{padding:7px 14px}thead th{font-weight:700;border-bottom:1px solid #333;text-align:left}td{border-bottom:1px solid #e5e5e5}tbody tr:last-child td{border-bottom:0}.numeric{text-align:right}@media (max-width: 760px){body{width:90%;padding-left:5%;padding-right:5%}section > p,section > ol,section > ul{width:100%}label.margin-toggle:not(.sidenote-number){display:inline}.sidenote,.marginnote{display:block;float:none;clear:both;width:100%;margin:1rem 0;position:relative}.marginnote.socials{display:flex;justify-content:space-around}.marginnote.socials a{display:inline}label.margin-toggle:not(.sidenote-number){cursor:pointer}img{width:100%}}
+:root{--font-sans:Seravek,'Gill Sans Nova',Ubuntu,Calibri,'DejaVu Sans',source-sans-pro,sans-serif;--font-serif:Charter,'Bitstream Charter','Sitka Text',Cambria,serif;--font-mono:JetBrains Mono,monospace}code{font-family:var(--font-mono);font-size:.75rem}html{font-size:2.4vw}@media(min-width:1000px){html{font-size:20px}}@media(max-width:760px){html{font-size:18px}}body{width:87.5%;margin-left:auto;margin-right:auto;padding-left:12.5%;font-family:var(--font-serif);max-width:1400px;counter-reset:sidenote-counter}h1{font-family:var(--font-sans);font-weight:700;font-size:1.5rem;margin-top:2.5rem;margin-bottom:1.5rem;line-height:1}h2{font-family:var(--font-sans);font-weight:700;font-size:1.1rem}h3{font-size:1rem}p.subtitle{font-family:var(--font-sans);margin-top:1rem;margin-bottom:1rem;line-height:1}article{padding:3rem 0}section{padding-top:1rem;padding-bottom:1rem}p{font-size:1rem;line-height:1.4rem;margin-top:1.4rem;margin-bottom:1.4rem}section>p,section>ol,section>ul{width:55%}section>hr{width:55%;margin-left:0}img{max-width:100%}aside.sidenote,.marginnote{float:right;clear:right;margin-right:-60%;width:50%;margin-top:.3rem;margin-bottom:0;font-size:.85rem;line-height:1.3;position:relative}sup.sn-ref{counter-increment:sidenote-counter}sup.sn-ref::after{content:counter(sidenote-counter);font-size:.7rem}aside.sidenote::before{content:counter(sidenote-counter) " ";font-size:.7rem;position:relative;top:-.3rem}.socials a{display:block;line-height:2}table{border-collapse:collapse;border-top:2px solid #333;border-bottom:2px solid #333}th,td{padding:7px 14px}thead th{font-weight:700;border-bottom:1px solid #333;text-align:left}td{border-bottom:1px solid #e5e5e5}tbody tr:last-child td{border-bottom:0}.numeric{text-align:right}@media(max-width:760px){body{width:90%;padding-left:5%;padding-right:5%}section>p,section>ol,section>ul{width:100%}aside.sidenote{float:none;display:block;width:95%;margin:1rem 2.5%;padding:.5rem;background:light-dark(rgba(0,0,0,.05),rgba(255,255,255,.05));border-radius:4px}.marginnote{display:block;float:none;clear:both;width:100%;margin:1rem 0;position:relative}.marginnote.socials{display:flex;justify-content:space-around}.marginnote.socials a{display:inline}img{width:100%}}
