Update website styling and add Google site verification (#408)

website/README.md

@@ -24,6 +24,9 @@ If you are not familiar with Jekyll, be sure to check out its
 [documentation][jekyll-docs]. It is recommended to follow the provided
 step-by-step tutorial.
 
+We use the [Just the Docs][just-the-docs] Jekyll theme, which also includes
+several configuration options.
+
 ###### Switch Ruby versions
 
 The required Ruby version is set in `.ruby-version`. To switch, you can use
@@ -56,5 +59,6 @@ Actions workflow any time a change is merged to `master`.
 [jekyll]: https://jekyllrb.com
 [jekyll-docs]: https://jekyllrb.com/docs
 [jekyll-docs-installation]: https://jekyllrb.com/docs/installation
+[just-the-docs]: https://just-the-docs.github.io/just-the-docs/
 [localhost-port-4000]: http://127.0.0.1:4000
 [rvm]: https://rvm.io

website/_config.yml

@@ -28,6 +28,12 @@ nav_external_links:
     url: https://github.com/PicnicSupermarket/error-prone-support
     hide_icon: false
 
+callouts:
+  summary:
+    color: blue
+  note:
+    color: grey-dk
+
 # SEO configuration.
 # See https://jekyll.github.io/jekyll-seo-tag/usage.
 social:

website/_includes/footer_custom.html

@@ -1,5 +1,5 @@
-<img src="/assets/images/picnic-logo@2x.png" alt="Picnic Logo" id="logo" />
+<img src="/assets/images/picnic-logo@2x.png" alt="Picnic Logo" id="logo"/>
 
-<p align="center">
+<p>
     Copyright &copy; 2017-2022 Picnic Technologies BV
 </p>

website/_includes/head_custom.html

@@ -4,15 +4,15 @@
 <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">
 <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
+<!-- Support light and dark mode, as it's not natively supported. See
-this section once https://github.com/just-the-docs/just-the-docs/issues/234 is
+https://github.com/just-the-docs/just-the-docs/issues/234. -->
-resolved. -->
 <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-eps-light.css' | relative_url }}"
-    media="(prefers-color-scheme: light)">
+      media="(prefers-color-scheme: light)">
 <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-eps-dark.css' | relative_url }}"
-    media="(prefers-color-scheme: dark)">
+      media="(prefers-color-scheme: dark)">
+
+<meta name="google-site-verification" content="2GBzy2ufS8Rfqffu8T6iqng6dbDw9EKuykMisUZU3IQ"/>

website/_sass/color_schemes/_common.scss

@@ -1,5 +1,20 @@
-footer > img#logo {
+// Add support for external anchor icons.
+.external > svg {
+  width: 1rem;
+  vertical-align: text-bottom;
+}
+
+.label {
+  // Reduce spacing between labels and align with surrounding elements.
+  margin-left: 0 !important;
+}
+
+footer {
+  text-align: center;
+
+  img#logo {
     width: 2rem;
     margin: 0 auto;
     display: block;
+  }
 }

website/_sass/color_schemes/_variables.scss

@@ -1 +1,5 @@
+// Overrides for Just the Docs. See
+// https://github.com/just-the-docs/just-the-docs/blob/main/_sass/support/_variables.scss.
+
+// Grid system.
 $nav-width: 400px;

website/_sass/color_schemes/eps-dark.scss

@@ -1,3 +1,16 @@
 @import "./color_schemes/dark";
 @import "_variables";
 @import "_common";
+
+// Swap `$blue-000` and `$blue-300`, mainly for callouts. This is done by
+// default for red, but not for other colors.
+$blue-000: #183385;
+$blue-300: #2c84fa;
+
+// Use light-theme greys in dark theme so that summary callouts stand out more.
+// (Note that the former has four shades, while the latter has five.)
+$grey-dk-000: $grey-lt-000;
+$grey-dk-100: $grey-lt-100;
+$grey-dk-200: $grey-lt-200;
+$grey-dk-250: $grey-lt-200;
+$grey-dk-300: $grey-lt-300;