More documentation CSS changes to address feedback.

Cleaned up some of the earlier work and added some more changes that
target entries in search. The largest change is implementing a
background highlight of marked search terms instead of changing the
foreground color.

1 files changed, 60 insertions, 16 deletions

diff --git a/docs/docs.css b/docs/docs.css
index ee1a78bf..c8527d1d 100644
--- a/docs/docs.css
+++ b/docs/docs.css
@@ -135,6 +135,12 @@
     --md-code-font: "Roboto Mono";
 }
 
+/* Add the matching padding they forgot at the bottom of the page */
+.md-main__inner { margin-bottom: 1.5rem; }
+
+/* Workaround for them using :first-child in the header topic for no good reason */
+.md-header__topic { font-weight: 700; }
+
 /* Make headings stand out more */
 .md-typeset h1 { font-weight: 700; color: var(--md-typeset-color); }
 .md-typeset h2 { font-weight: 700; border-bottom: 2px solid var(--md-typeset-color); padding-bottom: 4px; }
@@ -142,8 +148,18 @@
 .md-typeset h4 { font-weight: 700; }
 .md-typeset h5 { font-weight: 700; }
 
-.md-main__inner {
-    margin-bottom: 1.5rem;
+/* Make links in main text underlined so you actually know they're clickable */
+.md-typeset a { text-decoration: underline; }
+.md-typeset a:hover { text-decoration: none; }
+
+/* Also make the "more on this page" text underlined so you know it's clickable */
+.md-search-result__more summary div { text-decoration: underline; }
+
+/* Implement a highlight behind search results instead of changing text color */
+.md-search-result mark {
+    color: var(--md-default-fg-color--light);
+    text-decoration: none;
+    background-color: var(--md-search-highlight-color);
 }
 
 .juxtapose {
@@ -174,7 +190,6 @@ img[alt$="><"] {
     float: none!important;
 }
 
-
 .lslide {
     margin: 0px !important;
     text-align: center;
@@ -244,27 +259,56 @@ h3#all-settings+p+div table tbody tr>td:nth-child(6) {
     max-width: 95%;
 }
 
+
+/*
+Internally, the theme uses an --md-hue variable to determine the "accent color" and then calculates all other colors
+based off of that value depending on the element's usage. This doesn't actually work that well and it's a huge pain to
+work with because most people can't answer "What does 54% of this slightly-bluish green color look like?" when they're
+designing. So, below, I've replaced a whole bunch of these values with RGBs to force the theme to stop being bad in
+multiple different contexts.
+
+Since we also don't use variables for any of the colors, I'm putting a list of them below. We have based the entire
+theme off of variants of the Binary Ninja Red color (which is our main accent):
+
+Sea Salt                #FAFAFA         hsla(var(--md-hue),5%,98%,1)
+White Smoke             #F3F1F1         hsla(var(--md-hue),8%,95%,1)
+Platinum                #EBE1E0         hsla(var(--md-hue),20%,90%,1)
+Binary Ninja            #D63826         hsla(var(--md-hue),70%,49%,1)
+Rosewood                #57160F         hsla(var(--md-hue),70%,20%,1)
+Jet                     #2B2727         hsla(var(--md-hue),5%,16%,1)
+Night                   #1B1818         hsla(var(--md-hue),5%,10%,1)
+ */
+
 [data-md-color-scheme="slate"] {
     --md-hue: 6;
-    --md-default-bg-color: hsla(var(--md-hue),5%,16%,1);
+    --md-default-bg-color: #2B2727;
+    --md-default-fg-color: #F3F1F1;
+    --md-default-fg-color--light: #F3F1F1C0;  /* Change the alpha to be not so transparent */
     --md-primary-fg-color: #D63826;
-    --md-primary-fg-color--light: #ECB7B7;
-    --md-primary-fg-color--dark: #990000;
-    --md-code-fg-color: #ecb7b7;
-    --md-typeset-a-color: rgb(215, 55, 38);
-    --md-nav-primary: rgb(215, 55, 38);
+    --md-primary-fg-color--light: #EBE1E0;
+    --md-primary-fg-color--dark: #57160F;
+    --md-code-bg-color: #1B1818;
+    --md-code-fg-color: #EBE1E0;
+    --md-typeset-color: #F3F1F1;
+    --md-typeset-a-color: #D63826;
+    --md-nav-primary: #D63826;
+    --md-search-highlight-color: #57160F;
 }
 
 [data-md-color-scheme="binja"] {
     --md-hue: 6;
-    --md-default-bg-color: hsla(var(--md-hue),5%,98%,1);
+    --md-default-bg-color: #FAFAFA;
+    --md-default-fg-color: #1B1818;
+    --md-default-fg-color--light: #1B1818C0;  /* Change the alpha to be not so transparent */
     --md-primary-fg-color: #D63826;
-    --md-primary-fg-color--light: #ECB7B7;
-    --md-primary-fg-color--dark: #990000;
-    --md-code-fg-color: rgb(215, 55, 38);
-    --md-code-bg-color: hsla(0, 0%, 96%, 1);
-    --md-typeset-a-color: rgb(215, 55, 38);
-    --md-nav-primary: rgb(215, 55, 38);
+    --md-primary-fg-color--light: #EBE1E0;
+    --md-primary-fg-color--dark: #57160F;
+    --md-code-bg-color: #F3F1F1;
+    --md-code-fg-color: #2B2727;
+    --md-typeset-color: #1B1818;
+    --md-typeset-a-color: #D63826;
+    --md-nav-primary: #D63826;
+    --md-search-highlight-color: #EBE1E0;
 }