diff --git a/assets/css/extended/custom.css b/assets/css/extended/custom.css
new file mode 100644
index 0000000..99d90eb
--- /dev/null
+++ b/assets/css/extended/custom.css
@@ -0,0 +1,53 @@
+.sidenote {
+    font-size: 80%;
+    position: relative;
+}
+/* Wide viewport */
+@media (min-width: 960px) {
+    .sidenote {
+        float: right;
+        clear: right;
+        margin-right: -23vw;
+        text-align: left;
+
+        top: -3rem;
+        width: 20vw;
+        margin-top: 1rem;
+    }
+}
+
+/* Narrow viewport */
+@media (max-width: 960px) {
+    .sidenote {
+        float: right;
+        text-align: left;
+
+        width: 100%;
+        margin: 1rem 0;
+        padding-left: 15%;
+    }
+}
+
+/* Sidenote counter */
+body {
+    counter-reset: sidenote-counter;
+}
+.sidenote-number {
+    counter-increment: sidenote-counter;
+}
+/* Counter before the sidenote in the margin. */
+.sidenote::before {
+    content: counter(sidenote-counter)".";
+    position: relative;
+    vertical-align: baseline;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+/* Counter in the main body. */
+.sidenote-number::after {
+    content: counter(sidenote-counter);
+    vertical-align: super;
+    font-size: 0.7em;
+    font-weight: bold;
+    margin-right: 0.5rem;
+}
diff --git a/layouts/shortcodes/div.html b/layouts/shortcodes/div.html
deleted file mode 100644
index 2aaa0bd..0000000
--- a/layouts/shortcodes/div.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{{ $loc := .Get 0  }}
-{{ if .IsNamedParams }}
-  <div {{with .Get "class"}} class="{{.}}"{{end}}{{with .Get "id"}} id="{{.}}"{{end}}>
-{{ else if or (eq $loc "") (eq $loc "begin") }}
-  <div>
-{{ else if eq $loc "end" }}
-  </div>
-{{ end }}
diff --git a/layouts/shortcodes/marginnote.html b/layouts/shortcodes/marginnote.html
deleted file mode 100644
index 9de6d7b..0000000
--- a/layouts/shortcodes/marginnote.html
+++ /dev/null
@@ -1,3 +0,0 @@
-{{ $marginnoteDomIdSuffix := .Ordinal }}<label for="marginnote-{{.Page.File.UniqueID}}-{{ $marginnoteDomIdSuffix }}" class="margin-toggle">&#8853;</label>
-<input type="checkbox" id="marginnote-{{.Page.File.UniqueID}}-{{ $marginnoteDomIdSuffix }}" class="margin-toggle"/>
-<span class="marginnote">{{ .Inner }}</span>
diff --git a/layouts/shortcodes/sidenote.html b/layouts/shortcodes/sidenote.html
index 22a9a66..dc09c90 100644
--- a/layouts/shortcodes/sidenote.html
+++ b/layouts/shortcodes/sidenote.html
@@ -1,3 +1 @@
-{{ $sidenoteDomIdSuffix := .Ordinal }}<label for="sidenote-{{.Page.File.UniqueID}}-{{ $sidenoteDomIdSuffix }}" class="margin-toggle sidenote-number"></label>
-<input type="checkbox" id="sidenote-{{.Page.File.UniqueID}}-{{ $sidenoteDomIdSuffix }}" class="margin-toggle"/>
-<span class="sidenote">{{ .Inner }}</span>
+<span class="sidenote-number"><small class="sidenote">{{ .Inner }}</small></span>