Improve website styling

Co-authored-by: japborst <[email protected]>
Co-authored-by: Gijs de Jong <[email protected]>

website/Gemfile

@@ -1,8 +1,6 @@
 ruby File.read(".ruby-version").strip
 
 source "https://rubygems.org"
-gem "html-proofer", "4.4.1"
-gem "jekyll", "4.2.2"
-gem "jekyll-sitemap", "1.4"
-gem "just-the-docs", "0.4.0.rc2"
-gem "webrick", "1.7"
+gem "github-pages", "~> 227"
+gem "rake", "~> 13.0" # Required for "just-the-docs" theme
+gem "webrick", "~> 1.7"

website/_config.yml

@@ -6,9 +6,9 @@ description: >-
   Error Prone extensions: extra bug checkers and a large battery of Refaster
   rules.
 
-theme: just-the-docs
+remote_theme: just-the-docs/just-the-docs
 plugins:
-  - jekyll-sitemap
+  - jekyll-remote-theme
 
 # Files and directories not to be deployed through GitHub pages.
 exclude:
@@ -20,6 +20,18 @@ exclude:
 # See https://jekyllrb.com/docs/permalinks/#built-in-formats.
 permalink: pretty
 
+# Theme configuration.
+search_enabled: true
+heading_anchors: true
+
+callouts:
+  summary:
+    title: Summary
+    color: blue
+  warning:
+    title: Warning
+    color: red
+
 # Theme (just-the-docs) configuration.
 # See
 # https://just-the-docs.github.io/just-the-docs/docs/navigation-structure/#external-navigation-links.
@@ -28,6 +40,10 @@ nav_external_links:
     url: https://github.com/PicnicSupermarket/error-prone-support
     hide_icon: false
 
+twitter:
+  username: picnic
+  card: summary
+
 # SEO configuration.
 # See https://jekyll.github.io/jekyll-seo-tag/usage.
 social:
@@ -36,6 +52,3 @@ social:
     - https://github.com/PicnicSupermarket
     - https://twitter.com/picnic
     - https://www.linkedin.com/company/picnictechnologies
-twitter:
-  username: picnic
-  card: summary

website/_includes/head_custom.html

@@ -1,18 +1,17 @@
-<!-- Generated using https://realfavicongenerator.net. -->
+<!-- Generated from https://realfavicongenerator.net/ -->
 <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
 <link rel="manifest" href="/assets/images/site.webmanifest">
 <link rel="mask-icon" href="/assets/images/safari-pinned-tab.svg" color="#5bbad5">
-<link rel="shortcut icon" href="/favicon.ico">
+<link rel="shortcut icon" href="/assets/images/favicon.ico">
 <meta name="msapplication-TileColor" content="#da532c">
 <meta name="msapplication-config" content="/assets/images/browserconfig.xml">
 <meta name="theme-color" content="#ffffff">
 
-<!-- XXX: The theme does not natively support both light and dark mode. Drop
-this section once https://github.com/just-the-docs/just-the-docs/issues/234 is
-resolved. -->
-<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-eps-light.css' | relative_url }}"
-    media="(prefers-color-scheme: light)">
-<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-eps-dark.css' | relative_url }}"
-    media="(prefers-color-scheme: dark)">
+<!-- Support light and dark mode, as it's not natively supported.
+    See: https://github.com/just-the-docs/just-the-docs/issues/234 -->
+<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-light.css' | relative_url }}"
+      media="(prefers-color-scheme: light)">
+<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-dark.css' | relative_url }}"
+      media="(prefers-color-scheme: dark)">

website/_sass/custom/custom.scss

@@ -0,0 +1,24 @@
+// We should override $nav-width(-md), however this breaks code highlighting and other styles.
+// This appears an issue wrt the recommended way:
+// https://github.com/just-the-docs/just-the-docs/issues/982
+@include mq(lg) {
+  .side-bar {
+    min-width: 400px;
+  }
+
+  .site-nav, .site-header {
+    width: 400px;
+  }
+}
+
+// Add support for external anchor icons.
+.external > svg {
+  width: 1rem;
+  vertical-align: text-bottom;
+}
+
+footer > img#logo {
+  width: 2rem;
+  margin: 0 auto;
+  display: block;
+}