feat: Support aside element, tweak media queries

sass/_main.scss

@@ -13,7 +13,7 @@ html {
 }
 
 // Smaller font size on mobile
-// @media screen and (max-width: 480px) {
+// @media only screen and (max-width: 480px) {
 //   html {
 //     font-size: 14px;
 //   }
@@ -173,6 +173,24 @@ abbr {
   text-decoration: underline dotted;
 }
 
+aside {
+  background-color: var(--primary-color-alpha);
+  border-radius: var(--rounded-corner);
+  box-shadow: var(--shadow);
+  width: 30%;
+  padding: 1rem;
+  margin-inline-start: 1rem;
+  float: right;
+
+  @media only screen and (max-width: 720px) {
+    & {
+      width: 100%;
+      float: none;
+      margin-inline-start: 0;
+    }
+  }
+}
+
 // CODE
 pre,
 code,
@@ -252,8 +270,6 @@ mark {
 }
 
 figcaption {
-  margin-top: -1rem;
-  margin-bottom: 2rem;
   display: block;
   text-align: center;
   color: var(--fg-muted-4);