Add sidenote delimiters to make the site not look bad with CSS off

themes/vanilla/assets/scss/sidenotes.scss

@@ -68,6 +68,10 @@ $sidenote-highlight-border-width: .2rem;
     text-align: left;
 }
 
+.sidenote-delimiter {
+    display: none;
+}
+
 @mixin hidden-sidenote {
     position: static;
     margin-top: 1rem;

themes/vanilla/layouts/partials/head.html

@@ -8,6 +8,7 @@
     {{ $style := resources.Get "scss/style.scss" | resources.ToCSS | resources.Minify }}
     {{ $sidenotes := resources.Get "scss/sidenotes.scss" | resources.ToCSS | resources.Minify }}
     {{ $icon := resources.Get "img/favicon.png" }}
+    {{- partial "sidenotes.html" . -}}
     <link rel="stylesheet" href="{{ $style.Permalink }}">
     <link rel="stylesheet" href="{{ $sidenotes.Permalink }}">
     <link rel="icon" type="image/png" href="{{ $icon.Permalink }}">

themes/vanilla/layouts/partials/sidenotes.html

@@ -0,0 +1,5 @@
+<style>
+.sidenote-checkbox {
+    display: none;
+}
+</style>

themes/vanilla/layouts/shortcodes/numberedsidenote.html

@@ -4,6 +4,8 @@
 <label class="sidenote-label" for="numbernote-{{ $id }}">({{ $id }})</label>
 <input class="sidenote-checkbox" type="checkbox" id="numbernote-{{ $id }}"></input>
 <span class="sidenote-content sidenote-{{ .Get 0 }}">
+<span class="sidenote-delimiter">[note:</span>
 {{ .Inner }}
+<span class="sidenote-delimiter">]</span>
 </span>
 </span>

themes/vanilla/layouts/shortcodes/sidenote.html

@@ -2,6 +2,8 @@
 <label class="sidenote-label" for="{{ .Get 1 }}">{{ .Get 2 }}</label>
 <input class="sidenote-checkbox" type="checkbox" id="{{ .Get 1 }}"></input>
 <span class="sidenote-content sidenote-{{ .Get 0 }}">
+<span class="sidenote-delimiter">[note:</span>
 {{ .Inner }}
+<span class="sidenote-delimiter">]</span>
 </span>
 </span>