Song styling in SCSS

sass/chordpro.scss

@@ -0,0 +1,74 @@
+$col-white: #fff;
+$col-black: #181818;
+
+
+body {
+	margin: 0;
+	background-color: $col-white;
+	color: $col-black;
+}
+
+table {
+	white-space: nowrap;
+}
+
+.song {
+	padding: 2em;
+}
+
+.title {
+	font-size: 1.5em;
+	font-weight: bold;
+	margin-bottom: 1em;
+}
+
+.chords {
+	font-style: italic;
+}
+
+.chorus, .verse, .tab {
+	margin: 1em 0;
+}
+
+.chorus {
+	position: relative;
+
+	&:before {
+		content: "";
+		position: absolute;
+		left: -1em;
+		display: block;
+		height: 100%;
+		width: 2px;
+		background-color: $col-black;
+	}
+}
+
+.tab {
+	white-space: pre;
+	font-family: monospace;
+	font-size: 1.25em;
+}
+
+.comment {
+	display: inline-block;
+	padding: .25em .5em;
+	background-color: #bbb;
+	color: $col-black;
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		background-color: $col-black;
+		color: $col-white;
+	}
+
+	.chorus:before {
+		background-color: $col-white;
+	}
+
+	.comment {
+		background-color: #585858;
+		color: $col-white;
+	}
+}