From 4b4e2b7e84739c56d832968001b9f01f71c88a07 Mon Sep 17 00:00:00 2001
From: Alex Cabal <alex@alexcabal.com>
Date: Sun, 10 Jan 2021 19:03:44 -0600
Subject: [PATCH] Fix some color scheme bugs in manual CSS

---
 templates/Header.php    |  3 +++
 www/css/manual-dark.css | 17 +++++++++++++++++
 www/css/manual.css      | 34 ++++++++++++++++------------------
 3 files changed, 36 insertions(+), 18 deletions(-)
 create mode 100644 www/css/manual-dark.css

diff --git a/templates/Header.php b/templates/Header.php
index c0517b8c..355608b4 100644
--- a/templates/Header.php
+++ b/templates/Header.php
@@ -36,6 +36,9 @@ print("\n");
 	<? } ?>
 	<? if($manual){ ?>
 	<link href="/css/manual.css?version=<?= crc32(file_get_contents(WEB_ROOT . '/css/manual.css')) ?>" media="screen" rel="stylesheet" type="text/css"/>
+	<? if($colorScheme == 'auto' || $colorScheme == 'dark'){ ?>
+	<link href="/css/manual-dark.css?version=<?= crc32(file_get_contents(WEB_ROOT . '/css/manual-dark.css')) ?>" media="screen<? if($colorScheme == 'auto'){ ?> and (prefers-color-scheme: dark)<? } ?>" rel="stylesheet" type="text/css"/>
+	<? } ?>
 	<? } ?>
 	<link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120"/>
 	<link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152"/>
diff --git a/www/css/manual-dark.css b/www/css/manual-dark.css
new file mode 100644
index 00000000..dbbc0955
--- /dev/null
+++ b/www/css/manual-dark.css
@@ -0,0 +1,17 @@
+@media(prefers-color-scheme: dark){
+	blockquote,
+	figure.text{
+		background: rgba(0,0,0,.25);
+	}
+
+	code.terminal{
+		background-color: var(--light-body-text);
+	}
+
+
+	.manual > article > section > section[id] > ol ol > li aside.number::after,
+	.manual > article > section > section[id] section > ol > li aside.number::after,
+	.manual > article > section > section[id] section > aside.number::after{
+		border-color: rgba(255, 255, 255, .5);
+	}
+}
diff --git a/www/css/manual.css b/www/css/manual.css
index 86bf52e0..9ede6134 100644
--- a/www/css/manual.css
+++ b/www/css/manual.css
@@ -420,6 +420,14 @@ figure.corrected code{
 	margin-left: -14.5rem
 }
 
+.manual > article > section > section[id] > section > section > section > aside.number{
+	margin-left: -16.5rem
+}
+
+.manual > article > section > section[id] > section > section > section > section > aside.number{
+	margin-left: -18.5rem
+}
+
 .manual > article > section > section[id] > ol ol > li aside.number::after,
 .manual > article > section > section[id] section > ol > li aside.number::after,
 .manual > article > section > section[id] section > aside.number::after{
@@ -438,6 +446,14 @@ figure.corrected code{
 	width: 4rem;
 }
 
+.manual > article > section > section[id] > section > section > section > aside.number::after{
+	width: 6rem;
+}
+
+.manual > article > section > section[id] > section > section > section > section >  aside.number::after{
+	width: 8rem;
+}
+
 .manual > article > section > section[id] section > ol > li aside.number,
 .manual > article > section > section[id] section > aside.number{
 	margin-left: -12.5rem
@@ -750,21 +766,3 @@ main.manual aside.alert p{
 		margin-left: 2rem;
 	}
 }
-
-@media(prefers-color-scheme: dark){
-	blockquote,
-	figure.text{
-		background: rgba(0,0,0,.25);
-	}
-
-	code.terminal{
-		background-color: var(--light-body-text);
-	}
-
-
-	.manual > article > section > section[id] > ol ol > li aside.number::after,
-	.manual > article > section > section[id] section > ol > li aside.number::after,
-	.manual > article > section > section[id] section > aside.number::after{
-		border-color: rgba(255, 255, 255, .5);
-	}
-}