refactor/split css, templates

web/source/css/components/prism.css

@@ -0,0 +1,51 @@
+/*
+	Restyle Prism code highlighting toolbar
+	plugin buttons to our own button style.
+	
+	We have to use really specific selectors
+	because of how specific prism.css is.
+*/
+div.code-toolbar > div.toolbar {
+	margin-right: 0.5rem;
+	display: flex;
+	gap: 0.25rem;
+
+	> div.toolbar-item {
+		> span, > button {
+			color: $button-fg;
+			background: $button-bg;
+			font-weight: bold;
+			box-shadow: $boxshadow;
+
+			&:hover, &:focus {
+				color: $button-fg;
+			}
+		}
+
+		.copy-to-clipboard-button:hover {
+			background: $button-hover-bg;
+		}
+	}
+}
+
+pre, pre[class*="language-"] {
+	border-radius: $br;
+	padding: 0.5rem;
+	white-space: pre;
+	overflow-x: auto;
+
+	/* 
+		Code inside a pre block, ie.,
+		
+		```
+		here is some code
+		```
+	*/
+	code {
+		width: 100%;
+		padding: 0;
+		white-space: pre;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+}