Make stuff work better in ShitKit (aka Safari)

content/demo/index.md

@@ -370,9 +370,11 @@ You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>im
 ## Progress bar
 
 ```html
+<progress></progress>
 <progress value="33" max="100"></progress>
 ```
 
+<progress></progress>
 <progress value="33" max="100"></progress>
 
 ## Sample Output

sass/_article.scss

@@ -1,6 +1,7 @@
 #banner {
 	$mask: linear-gradient(black, transparent);
 	-webkit-mask-image: $mask;
+	-webkit-user-select: none;
 	position: absolute;
 	top: 0;
 	left: 0;

sass/_code.scss

@@ -31,6 +31,8 @@ pre {
 
 	// The line number cells
 	table td:nth-of-type(1) {
+		-webkit-user-select: none;
+		cursor: default;
 		user-select: none;
 		text-align: center;
 	}

sass/_containers.scss

@@ -67,9 +67,4 @@
 			height: 1rem;
 		}
 	}
-
-	pre>code {
-		display: inline-block;
-		margin-inline-end: 3rem;
-	}
 }

sass/_typography.scss

@@ -45,8 +45,8 @@ figcaption {
 
 blockquote {
 	margin: 0;
-	border-inline-start: 0.25rem solid var(--primary-color);
 	border-radius: 0.25rem;
+	border-inline-start: 0.25rem solid var(--primary-color);
 	padding: 0 0.75rem;
 	color: var(--fg-muted-5);
 }
@@ -100,17 +100,37 @@ u {
 }
 
 progress {
+	-webkit-appearance: none;
+	appearance: none;
+	box-shadow: var(--edge-highlight);
 	border: none;
 	border-radius: 999px;
 	background-color: var(--fg-muted-1);
+	width: 100%;
 	height: 0.5rem;
 	color: var(--primary-color);
 
-	&::-webkit-progress-bar,
+	&:indeterminate {
+		background-color: var(--fg-muted-1);
+	}
+
+	&:indeterminate::-moz-progress-bar {
+		background-color: transparent;
+	}
+
+	&::-webkit-progress-bar {
+		background-color: transparent;
+	}
+
 	&::-moz-progress-bar {
 		border-radius: 999px;
 		background-color: var(--primary-color);
 	}
+
+	&::-webkit-progress-value {
+		border-radius: 999px;
+		background-color: var(--primary-color);
+	}
 }
 
 kbd {