From a5d0e2bc6581076cd3096c5544fb4179550fc62f Mon Sep 17 00:00:00 2001
From: Rex P <106129829+another-rex@users.noreply.github.com>
Date: Fri, 31 Jan 2025 14:44:42 +1100
Subject: [PATCH] docs: Polish up documentation CSS and font (#1552)

- Update font to be more readable, Overpass is much harder to read for
dense text, and bold text fades into the background. Use more standard
text font of Source Sans Pro (3)
- Fix code blocks being very hard to read
- Fix Tables to not have gaps

New version of docs:
https://another-rex.github.io/osv-scanner/supported-languages-and-lockfiles/
Old version of docs:
https://google.github.io/osv-scanner/supported-languages-and-lockfiles/
---
 docs/_sass/color_schemes/_variables.scss  |  4 +++-
 docs/_sass/color_schemes/custom_dark.scss |  3 +--
 docs/_sass/custom/custom.scss             | 24 +++++++++++++++++++++++
 docs/_sass/highlight/native.scss          |  9 +++++----
 docs/supported_languages_and_lockfiles.md |  6 +++---
 docs/usage.md                             |  2 +-
 6 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/docs/_sass/color_schemes/_variables.scss b/docs/_sass/color_schemes/_variables.scss
index a22ca6aa49d..f87a45502ad 100644
--- a/docs/_sass/color_schemes/_variables.scss
+++ b/docs/_sass/color_schemes/_variables.scss
@@ -31,7 +31,9 @@ $red-200: #e94c4c !default;
 $red-300: #dd2e2e !default;
 
 $body-font-family:
-  "Overpass",
+  "Source Sans 3",
   system-ui,
   -apple-system,
   sans-serif;
+
+$mono-font-family: consolas, monospace;
diff --git a/docs/_sass/color_schemes/custom_dark.scss b/docs/_sass/color_schemes/custom_dark.scss
index ddffac3edf5..e00fa8e1115 100644
--- a/docs/_sass/color_schemes/custom_dark.scss
+++ b/docs/_sass/color_schemes/custom_dark.scss
@@ -1,7 +1,6 @@
 @import "./variables";
 @import "../highlight/native.scss";
-@import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap");
-
+@import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
 $new-body-background-color: #292929;
 
 // Overriding dark default for just-the-docs styles
diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss
index 6655e9df4e7..d8ec9635e37 100644
--- a/docs/_sass/custom/custom.scss
+++ b/docs/_sass/custom/custom.scss
@@ -8,3 +8,27 @@
 .nav-list .nav-list-expander {
   display: none !important;
 }
+
+:not(pre, figure) code {
+  padding: 0.2rem 0.35rem !important;
+  font-size: 0.85em;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family:
+    "Overpass",
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+
+table {
+  border-collapse: collapse;
+
+  th {
+    border-bottom-width: 2px;
+  }
+}
diff --git a/docs/_sass/highlight/native.scss b/docs/_sass/highlight/native.scss
index c28adea85cb..77a0319c589 100644
--- a/docs/_sass/highlight/native.scss
+++ b/docs/_sass/highlight/native.scss
@@ -1,14 +1,15 @@
 // Based on https://github.com/dwayne/sass-pygments/blob/master/styles/scss/native.scss
 
 .highlight,
-pre.highlight {
+pre.highlight,
+.highlight code {
+  color: #d0d0d0;
+  background: #202020;
+
   .hll {
     background-color: #404040;
   }
 
-  color: #d0d0d0;
-  background: #202020;
-
   .c {
     color: #999999;
     font-style: italic;
diff --git a/docs/supported_languages_and_lockfiles.md b/docs/supported_languages_and_lockfiles.md
index 45c7c9562f5..39d480d16e3 100644
--- a/docs/supported_languages_and_lockfiles.md
+++ b/docs/supported_languages_and_lockfiles.md
@@ -20,7 +20,7 @@ nav_order: 2
 
 Artifact and manifest extraction logic is implemented in [OSV-Scalibr](https://github.com/google/osv-scalibr) as a standalone library. OSV-Scanner tightly integrates with OSV-Scalibr to provide a end to end vulnerability scanner for developers.
 
-### Core Concept
+## Core Concept
 
 We split the files we can scan into two broad categories, **artifacts** and **manifests**.
 
@@ -105,7 +105,7 @@ If you have a custom lockfile that we do not support or prefer to do your own cu
 
 Once you extracted your own dependency information, place it in a `osv-scanner.json` file, with the same format as the JSON output of osv-scanner, e.g.:
 
-```
+```jsonc
 {
   "results": [
     {
@@ -122,7 +122,7 @@ Once you extracted your own dependency information, place it in a `osv-scanner.j
             "version": "1.2.3",
             "ecosystem": "npm"
           }
-        },
+        }
         // ...
       ]
     }
diff --git a/docs/usage.md b/docs/usage.md
index f5dd3d48f5d..24c5a584a43 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -21,7 +21,7 @@ This documentation is for the beta V2 release. For the older, V1 release documen
 {:toc}
 </details>
 
-### Core Concepts
+## Core Concept
 
 OSV-Scanner operates in a two-step process: