Use system font and primary purple, same as wagtail admin style

wagtail · Aug 18, 2022 · cb2c510 · cb2c510
1 parent db1b229
commit cb2c510
Show file tree

Hide file tree

Showing 15 changed files with 52 additions and 257 deletions.
diff --git a/docs/index.rst b/docs/index.rst
@@ -9,8 +9,9 @@
 Welcome to "Sphinx Wagtail theme" documentation!
 ================================================
 
-.. image:: https://raw.githubusercontent.com/wagtail/sphinx_wagtail_theme/main/img/screenshot.png
-   :alt: Sphinx Wagtail theme screenshot
+This is the Sphinx theme used for the official Wagtail docs. All Wagtail-related
+projects are welcome and encouraged to also use this theme! To see what this
+theme looks like, checkout our :doc:`examples <examples/index>`.
 
 .. toctree::
    :maxdepth: 2

diff --git a/fonts/source-code-pro/LICENSE.txt b/fonts/source-code-pro/LICENSE.txt
diff --git a/fonts/source-code-pro/SourceCodePro-Bold.ttf.woff2 b/fonts/source-code-pro/SourceCodePro-Bold.ttf.woff2
diff --git a/fonts/source-code-pro/SourceCodePro-BoldIt.ttf.woff2 b/fonts/source-code-pro/SourceCodePro-BoldIt.ttf.woff2
diff --git a/fonts/source-code-pro/SourceCodePro-It.ttf.woff2 b/fonts/source-code-pro/SourceCodePro-It.ttf.woff2
diff --git a/fonts/source-code-pro/SourceCodePro-Regular.ttf.woff2 b/fonts/source-code-pro/SourceCodePro-Regular.ttf.woff2
diff --git a/fonts/source-sans/LICENSE.txt b/fonts/source-sans/LICENSE.txt
diff --git a/fonts/source-sans/SourceSans3-Bold.ttf.woff2 b/fonts/source-sans/SourceSans3-Bold.ttf.woff2
diff --git a/fonts/source-sans/SourceSans3-BoldIt.ttf.woff2 b/fonts/source-sans/SourceSans3-BoldIt.ttf.woff2
diff --git a/fonts/source-sans/SourceSans3-It.ttf.woff2 b/fonts/source-sans/SourceSans3-It.ttf.woff2
diff --git a/fonts/source-sans/SourceSans3-Regular.ttf.woff2 b/fonts/source-sans/SourceSans3-Regular.ttf.woff2
diff --git a/img/screenshot.png b/img/screenshot.png
diff --git a/sass/_fonts.scss b/sass/_fonts.scss
diff --git a/sass/_variables.scss b/sass/_variables.scss
@@ -17,7 +17,7 @@ $gray-900: #212121;
 $black: #000;
 
 $teal: #007d7e;
-$indigo: #251657;
+$indigo: #2e1f5e;
 $bright-green: #3beccd;
 $bright-green-700: color.adjust($bright-green, $lightness: -15%);
 $bright-green-900: color.adjust($bright-green, $lightness: -30%);
@@ -86,9 +86,54 @@ $base16-base0F: #ff5370;
 // Fonts
 // --------------------------------------------------
 
-$font-family-sans-serif: "Source Sans 3", sans-serif, "Apple Color Emoji",
-  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$font-family-monospace: "Source Code Pro", monospace;
+$font-family-sans-serif:
+  // iOS Safari, macOS Safari, macOS Firefox
+  "-apple-system",
+  // macOS Chrome
+  "BlinkMacSystemFont",
+  // Windows - for all browsers on Windows 7+ (putting Segoe UI before system-ui ensures Segoe UI will be rendered for different languages)
+  "Segoe UI",
+  "system-ui",
+  // Targets Android and newer Chrome OS. (If Roboto is installed on your windows computer Segoe UI will take precedence.)
+  "Roboto",
+  // A common fallback font for older macOS
+  "Helvetica Neue",
+  // Very old Windows versions (special shout-out to whoever is using windows 95)
+  "Arial",
+  // A last resort if all else fails, just give us something without serifs :)
+  sans-serif,
+  // All the emojis 👋🙂
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+  "Noto Color Emoji";
+
+$font-family-monospace:
+  // iOS Safari, MacOS Safari
+  "ui-monospace",
+  "Menlo",
+  "Monaco",
+  // Windows,
+  "Cascadia Mono",
+  "Segoe UI Mono",
+  // Linux
+  "Roboto Mono",
+  "Oxygen Mono",
+  "Ubuntu Monospace",
+  // Android
+  "Source Code Pro",
+  // Firefox
+  "Fira Mono",
+  // Last resort Android/others
+  "Droid Sans Mono",
+  "Courier New",
+  monospace,
+  // All the emojis 👋🙂
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+  "Noto Color Emoji";
+
 $font-weight-bold: 700;
 
 $h1-font-size: 2em;

diff --git a/sass/theme.scss b/sass/theme.scss
@@ -9,9 +9,6 @@
 @import "../node_modules/@fortawesome/fontawesome-free/scss/variables";
 @import "../node_modules/bootstrap/scss/bootstrap";
 
-// fonts
-@import "fonts";
-
 // components
 @import "component_admotion";
 @import "component_figure";