feat: Support aside element, tweak media queries

content/demo/index.md

@@ -259,6 +259,17 @@ _Quack-quack!_
 
 The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art are awesome!
 
+## Aside
+
+<aside>
+Abraham Lincoln portrait
+<img class="transparent no-hover" style="margin-bottom: 0;" alt="Abraham Lincoln" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Abraham_Lincoln_O-77_matte_collodion_print.jpg/372px-Abraham_Lincoln_O-77_matte_collodion_print.jpg" />
+</aside>
+
+Abraham Lincoln (/ˈlɪŋkən/ LINK-ən; February 12, 1809 – April 15, 1865) was an American lawyer, politician, and statesman who served as the 16th president of the United States from 1861 until his assassination in 1865. Lincoln led the United States through the American Civil War, defending the nation as a constitutional union, defeating the insurgent Confederacy, abolishing slavery, expanding the power of the federal government, and modernizing the U.S. economy.
+
+Lincoln was born into poverty in a log cabin in Kentucky and was raised on the frontier, primarily in Indiana. He was self-educated and became a lawyer, Whig Party leader, Illinois state legislator, and U.S. congressman from Illinois.
+
 ## Keyboard shortcut
 
 ```html

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);

sass/_media.scss

@@ -3,7 +3,7 @@ video {
   border-radius: var(--rounded-corner);
   box-shadow: var(--shadow);
   display: block;
-  margin: 2rem auto;
+  margin: 1rem auto;
   max-width: 100%;
 
   &.full {

sass/_qrcode.scss

@@ -6,7 +6,7 @@
   padding: 15px;
   width: 155px;
 
-  @media screen and (max-width: 720px) {
+  @media only screen and (max-width: 720px) {
     & {
       display: none;
     }