Docs: Font additions, style updates, and icon implementation

README.md

@@ -42,4 +42,4 @@ Please see the GitHub issues and [this GitHub Project](https://github.com/orgs/w
 
 Browsertrix Cloud is made available under the AGPLv3 License.
 
-If you would like to use it under a different license or have a question, please reach out as that may be a possibility.
+Documentation is made available under the Creative Commons Attribution 4.0 International License

docs/deploy/local.md

@@ -12,7 +12,7 @@ The instructions below assume you have cloned the [https://github.com/webrecorde
 
 Here are some environment specific instructions for setting up a local cluster from different Kubernetes vendors:
 
-??? tip "Docker Desktop (recommended for Mac and Windows)"
+??? info "Docker Desktop (recommended for Mac and Windows)"
 
     For Mac and Windows, we recommend testing out Browsertrix Cloud using Kubernetes support in Docker Desktop as that will be one of the simplest options.
 
@@ -25,7 +25,7 @@ Here are some environment specific instructions for setting up a local cluster f
     4. Install [Helm](https://helm.sh/), which can be installed with `brew install helm` (Mac) or `choco install kubernetes-helm` (Windows) or following some of the [other install options](https://helm.sh/docs/intro/install/)
 
 
-??? tip "MicroK8S (recommended for Ubuntu)"
+??? info "MicroK8S (recommended for Ubuntu)"
 
     For Ubuntu and other linux distros, we recommend using MicroK8S for both local deployment and production.
 
@@ -37,7 +37,7 @@ Here are some environment specific instructions for setting up a local cluster f
 
     Note: microk8s comes with its own version helm, so you don't need to install it separately. Replace `helm` with `microk8s helm3` in the subsequent instructions below.
 
-??? tip "Minikube (Windows, Mac or Linux)"
+??? info "Minikube (Windows, Mac or Linux)"
 
     1. Install Minikube [following installation instructions](https://minikube.sigs.k8s.io/docs/start/), eg. `brew install minikube`
 
@@ -47,7 +47,7 @@ Here are some environment specific instructions for setting up a local cluster f
 
     4. Mac Only: To access Browsertrix Cloud running in minikube on a mac, run `minikube service browsertrix-cloud-frontend --url` and then access Browsertrix Cloud via the provided URL. This is needed as Browsertrix Cloud is running in a VM.
 
-??? tip "K3S (recommended for non-Ubuntu Linux)"
+??? info "K3S (recommended for non-Ubuntu Linux)"
 
     1. Install K3s [as per the instructions](https://docs.k3s.io/quick-start)
 
@@ -142,12 +142,12 @@ frontend_pull_policy: "Never"
 Now, rebuild either the backend and/or frontend images locally. The exact process depends on the Kubernetes deployment in use:
 
 
-??? tip "Docker Desktop"
+??? info "Docker Desktop"
 
     Rebuild the local images by running `./scripts/build-backend.sh` and/or `./scripts/build-frontend.sh` scripts to build the images in the local Docker.
 
 
-??? tip "MicroK8S"
+??? info "MicroK8S"
 
     MicroK8s uses its own container registry, running on port 32000. 
 
@@ -160,7 +160,7 @@ Now, rebuild either the backend and/or frontend images locally. The exact proces
     frontend_image: "localhost:32000/webrecorder/browsertrix-frontend:latest"
     ```
 
-??? tip "Minikube" 
+??? info "Minikube" 
 
     Minikube comes with its own image builder to update the images used in Minikube.
 
@@ -176,7 +176,7 @@ Now, rebuild either the backend and/or frontend images locally. The exact proces
     minikube image build -t webrecorder/browsertrix-frontend:latest ./frontend
     ```
 
-??? tip "K3S"
+??? info "K3S"
 
     K3S uses `containerd` by default. To use local images, they need to be imported after rebuilding.
 

docs/develop/docs.md

@@ -14,6 +14,12 @@ In the project root directory run `mkdocs serve` to run a local version of the d
 
 The docs hosted on [docs.browsertrix.cloud](https://docs.browsertrix.cloud) are created from the main branch of [https://github.com/webrecorder/browsertrix-cloud](https://github.com/webrecorder/browsertrix-cloud)
 
+## Adding icons
+
+We typically use the [Bootstrap icon set](https://icons.getbootstrap.com/) with our projects.  This set is quite expansive, and we don't add the entire set into our docs folder as most icons go unused.  If you wish to use an icon when writing documentation to refer to an icon present in part of the app, you may have to download the SVG file and add it to the repo.
+
+Icons are placed in the `docs/overrides/.icons/iconsetname/icon-name.svg` directory, and can be added in markdown files as `:iconsetname-icon-name:` accordingly.  For more information, see the [Material for MKDocs page on Changing the logo and icons](https://squidfunk.github.io/mkdocs-material/setup/changing-the-logo-and-icons/#customization).
+
 ## Docs style guide
 
 TODO!

docs/overrides/main.html

@@ -0,0 +1,6 @@
+{% extends "base.html" %}
+
+{% block icons %}
+  {% set icon_path = "overrides/.icons/bootstrap/" %}
+  {{ super() }}
+{% endblock %}

docs/stylesheets/extra.css

@@ -3,20 +3,66 @@
     --color-wr-darkred: #A2001D;
 } */
 
+@font-face {
+    font-family: 'Recursive';
+    font-style: oblique 0deg 15deg;
+    font-weight: 300 1000;
+    src: url('../assets/fonts/Recursive_VF_1.084.woff2') format('woff2');
+    font-feature-settings: "ss12";
+}
+
+:root {
+    --md-code-font: "Recursive", monospace;
+    --md-text-font: "Recursive", "Helvetica", "Arial", sans-serif;
+}
 
-/* Import monospaced recursive from Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Recursive:MONO@1&display=swap');
 
+code, pre, kbd {
+    font-variation-settings: "MONO" 1;
+    font-feature-settings: "ss01", "ss02", "ss08";
+}
+
+.md-typeset h1, h2, h3, h4, h5 {
+    color: var(--md-primary-fg-color--dark);
+    font-family: var(--md-code-font);
+    font-variation-settings: "MONO" 0.51;
+}
+
+.md-typeset h1, h2, h3 {
+    font-weight: 650 !important;
+}
 
 [data-md-color-scheme="webrecorder"] {
     --md-primary-fg-color: #008873;
     --md-primary-fg-color--light: #008873;
     --md-primary-fg-color--dark: #003c32;
-    --md-primary-bg-color--light: #FFF;
+    --md-default-bg-color--light: #f9f5eb;
+    --md-default-bg-color: #f9f5eb;
+    --md-code-bg-color: #fff;
     --md-accent-fg-color: #01b297;
+    --md-typeset-a-color: #005447;
+
+  }
+
+/* Custom menu item hover */
 
-    /* Typography Color Scheme */
-    --md-typeset-color: #003c32;
-    --md-typeset-a-color: #008873;
+.md-tabs__link {
+    font-weight: 400;
+    opacity: .9;
+    transition: .4s cubic-bezier(.1,.7,.1,1),opacity .25s
+}
+
+.md-tabs__link:hover {
+    font-weight: 650;
 
-  }
+}
+
+/* Custom Typography Rules */
+
+.md-typeset a {
+    text-decoration: underline;
+}
+
+.headerlink {
+    text-decoration: none!important;
+}