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/
google · Jan 31, 2025 · a5d0e2b · a5d0e2b
1 parent a3a1fc1
commit a5d0e2b
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: