X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Fbase%2F_typography.scss;h=1cf2ecac0ffcb3ca627d29bf5d8a48f520c9f730;hb=HEAD;hp=b615f44f9f7fcc64e41f73054bff510c3fbd6401;hpb=748286b530a4b000cac6b88bbcebb258056a9e77;p=theme-danix.xyz.git

diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss
index b615f44..1cf2eca 100644
--- a/assets/sass/base/_typography.scss
+++ b/assets/sass/base/_typography.scss
@@ -7,7 +7,10 @@
 /* Type */
 
 	body, input, select, textarea {
-		color: _palette(fg);
+		color: _palette_light(fg);
+		@media screen and (prefers-color-scheme: dark) {
+			color: _palette_dark(fg);
+		}
 		font-family: _font(family);
 		font-size: 17pt;
 		font-weight: _font(weight);
@@ -38,29 +41,52 @@
 
 		&:hover {
 			border-bottom-color: transparent;
-			color: _palette(highlight) !important;
+			color: _palette_light(highlight) !important;
+			@media screen and (prefers-color-scheme: dark) {
+				color: _palette_dark(highlight);
+			}
 		}
 
 		&:active {
-			color: desaturate(darken(_palette(highlight), 15), 5) !important;
+			color: desaturate(darken(_palette_light(highlight), 15), 5) !important;
+			@media screen and (prefers-color-scheme: dark) {
+				color: desaturate(darken(_palette_dark(highlight), 15), 5) !important;
+			}
 		}
 	}
 
 	strong, b {
-		color: _palette(fg-bold);
+		color: _palette_light(fg-bold);
+		@media screen and (prefers-color-scheme: dark) {
+			color: _palette_dark(fg-bold);
+		}
 		font-weight: _font(weight-bold);
 	}
 
-	em, i {
+	em, i, strike {
 		font-style: italic;
 	}
 
+	mark {
+		background-color: lighten(_palette_light(highlight), 10%);
+		color: _palette_light(fg-bold);
+		padding-left: 0.2em;
+		padding-right: 0.2em;
+	}
+
 	p {
 		margin: 0 0 _size(element-margin) 0;
+		&.smaller {
+			font-style: italic;
+			font-size: 12pt;
+		}
 	}
 
 	h1, h2, h3, h4, h5, h6 {
-		color: _palette(fg-bold);
+		color: _palette_light(fg-bold);
+		@media screen and (prefers-color-scheme: dark) {
+			color: _palette_dark(fg-bold);
+		}
 		font-weight: _font(weight-bold);
 		line-height: 1.65;
 		margin: 0 0 (_size(element-margin) * 0.5) 0;
@@ -122,14 +148,20 @@
 	}
 
 	blockquote {
-		border-left: solid 4px _palette(border);
+		border-left: solid 4px _palette_light(border);
+		@media screen and (prefers-color-scheme: dark) {
+			border-left: solid 4px _palette_dark(border);
+		}
 		font-style: italic;
 		margin: 0 0 _size(element-margin) 0;
 		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
 	}
 
 	code {
-		background: _palette(border-bg);
+		background: _palette_light(border-bg);
+		@media screen and (prefers-color-scheme: dark) {
+			background: _palette_dark(border-bg);
+		}
 		font-family: _font(family-fixed);
 		font-size: 0.9em;
 		margin: 0 0.25em;
@@ -152,7 +184,10 @@
 
 	hr {
 		border: 0;
-		border-bottom: solid 1px _palette(border);
+		border-bottom: solid 1px _palette_light(border);
+		@media screen and (prefers-color-scheme: dark) {
+			border-bottom: solid 1px _palette_dark(border);
+		}
 		margin: _size(element-margin) 0;
 
 		&.major {
@@ -173,6 +208,23 @@
 	}
 
 	.screen-reader-text,
-	.hidden {
+	.hidden,
+	.js-hidden {
 		@include hide-visually;
 	}
+
+	// large code blocks are wrapped in the highlight shortcode
+	.highlight {
+		max-width: 100%;
+		overflow-x: auto;
+	}
+
+	.has-dropcap:first-letter {
+		font-family: _font(family-fixed);
+		font-weight: 900;
+		float: left;
+		font-size: 6rem;
+		line-height: 0.65;
+		margin: 0.1em 0.1em 0.2em 0;
+	}
+