Add styling for more HTML tags

Hope @gabs doesn't mind XD

content/demo/index.md

@@ -359,6 +359,62 @@ To switch the keyboard layout, press <kbd>⌘ Super</kbd> + <kbd>Space</kbd>.
 
 You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>important</mark> that even **bold** is not enough.
 
+## Deleted and Inserted
+
+```html
+<del>Text deleted</del> <ins>Text added</ins>
+```
+
+<del>Text deleted</del> <ins>Text added</ins>
+
+## Time
+
+```html
+<time>13:37</time>
+```
+
+<time>13:37</time>
+
+For blinking animation, make the time bold
+
+```html
+<time>**13:37**</time>
+```
+
+<time>**13:37**</time>
+
+## Progress bar
+
+```html
+<progress value="33" max="100"></progress>
+```
+
+<progress value="33" max="100"></progress>
+
+## Sample Output
+
+```html
+<samp>Sample Output</samp>
+```
+
+<samp>Sample Output</samp>
+
+## Inline Quote
+
+```html
+<q>Inline Quote</q>
+```
+
+Blah blah <q>Inline Quote</q> hmm.
+
+## Grammar Mistakes
+
+```html
+<u>Trying to replicate grammar mistakes</u>
+```
+
+<u>Yeet</u> the <u>sus</u> drip while <u>vibing</u> with the <u>TikTok</u> <u>fam</u> on a cap-free boomerang.
+
 ## External link
 
 ```html

sass/_code.scss

@@ -1,7 +1,8 @@
 // CODE
 pre,
 code,
-kbd {
+kbd,
+samp {
 	font-family: var(--font-monospace-code);
 }
 

sass/_typography.scss

@@ -56,14 +56,94 @@ blockquote {
 	}
 }
 
-mark {
+mark,
+del,
+ins,
+time,
+samp,
+q {
 	box-shadow: var(--edge-highlight);
 	border-radius: var(--rounded-corner-small);
-	background-color: var(--primary-color-alpha);
 	padding: 0.125rem 0.375rem;
+}
+
+mark {
+	background-color: var(--primary-color-alpha);
 	color: var(--primary-color);
 }
 
+del {
+	background-color: var(--red-bg);
+	color: var(--red-fg);
+	text-decoration: line-through;
+	text-decoration-thickness: max(1px, 0.0625em);
+}
+
+ins {
+	background-color: var(--green-bg);
+	color: var(--green-fg);
+	text-decoration: underline;
+	text-decoration-thickness: max(1px, 0.0625em);
+}
+
+time {
+	background-color: var(--primary-color-alpha);
+	color: var(--primary-color);
+	font-weight: bold;
+
+	strong {
+		animation: clock-blink 1s infinite;
+		font-weight: bold;
+
+		@keyframes clock-blink {
+			from {
+				color: var(--primary-color);
+			}
+
+			25% {
+				color: var(--primary-color-alpha);
+			}
+
+			50% {
+				color: var(--primary-color);
+			}
+		}
+	}
+}
+
+samp {
+	background-color: var(--fg-muted-1);
+	color: var(--fg-muted-5);
+	font-size: 0.875rem;
+}
+
+q {
+	background-color: var(--fg-muted-1);
+	color: var(--fg-muted-5);
+	font-style: italic;
+}
+
+u {
+	text-decoration: underline;
+	text-decoration-style: wavy;
+	text-decoration-color: var(--red-fg);
+	text-decoration-thickness: max(1px, 0.0625em);
+}
+
+progress {
+	border: none;
+	border-radius: 999px;
+	background-color: var(--fg-muted-1);
+	height: 0.5rem;
+	color: var(--primary-color);
+
+	&::-webkit-progress-bar,
+	&::-moz-progress-bar {
+		border-radius: 999px;
+		background-color: var(--primary-color);
+	}
+}
+
 kbd {
 	display: inline-block;
 	transition: var(--transition);