Refactor lots of CSS

* use berkeley-dark / berkeley-light as themes
* dispense with dept-specific theming for now
* current enable the dark theme for testing

_config.yml

@@ -21,6 +21,7 @@ tagline: A Jekyll template for course websites
 description: A modern, highly customizable, responsive Jekyll template for course websites
 # TODO(template): this should be built from the staff list...
 author: Various Bears
+color_scheme: berkeley-dark
 
 # TODO(setup): Set this to the semester, e.g. /sp24, (faXX / spXX / suXX / wiXX )
 baseurl: '/berkeley-class-site' # the subpath of your site, which should just be the semester.
@@ -132,7 +133,6 @@ defaults:
 
 # Theme settings
 theme: just-the-docs
-color_scheme: light
 search_enabled: true
 heading_anchors: true
 permalink: pretty

_sass/color_schemes/berkeley-dark.scss

@@ -0,0 +1,8 @@
+// Default JTD color scheme
+@import "./color_schemes/dark";
+
+@import './berkeley/variables';
+@import './berkeley/berkeley';
+
+// Just the Class customizations are all loaded in one file.
+@import '../just-the-class/just-the-class';

_sass/color_schemes/berkeley-light.scss

@@ -0,0 +1,5 @@
+@import './berkeley/variables';
+@import './berkeley/berkeley';
+
+// Just the Class customizations are all loaded in one file.
+@import '../just-the-class/just-the-class';

_sass/color_schemes/berkeley/berkeley.scss

@@ -0,0 +1,35 @@
+// This config applies to all berkeley courses.
+// It is loaded before all Just-the-class customizations
+
+// h1 {
+//   font-family: serif;
+// }
+
+// Override default JTD CSS for larger/more accessibile fonts.
+html {
+  @include fs-3;
+}
+
+body {
+  font-family: $body-font-family;
+  font-size: inherit;
+  line-height: $body-line-height;
+  color: $body-text-color;
+  background-color: $body-background-color;
+  overflow-wrap: break-word;
+}
+
+// Link Colors
+a,
+.main-content .anchor-heading svg {
+  color: $link-color;
+
+  &:hover,
+  &:focus {
+    color: $hover-focus-link-color;
+  }
+}
+
+a:not([class]):hover {
+  text-decoration-color: lighten($link-color, 20%);
+}

_sass/color_schemes/berkeley/variables.scss

@@ -0,0 +1,21 @@
+// Common Berkeley Variables.
+// This file is explicitly included before berkeley.scss in _includes/css/custom
+
+$content-width: 1200px;
+
+// Typography
+// $body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+// Colors
+$link-color: $blue-100;
+$hover-focus-link-color: darken($link-color, 0.3);
+
+// Layout
+$gutter-spacing: $sp-6;
+$gutter-spacing-sm: $sp-4;
+$nav-width: 256px;
+
+// Components
+$box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
+$module-date-color: $link-color;
+$staffer-image-size: 100px;

_sass/custom/setup.scss

@@ -0,0 +1,3 @@
+// Use this file to customize SASS variables.
+// You will likely want to review the Jst the Docs CSS
+// This file is loaded *early* in the SASS compilation process.

assets/css/just-the-docs-berkeley-dark.scss

@@ -0,0 +1,4 @@
+---
+---
+
+{% include css/just-the-docs.scss.liquid color_scheme="berkeley-dark" %}

assets/css/just-the-docs-berkeley-light.scss

@@ -0,0 +1,4 @@
+---
+---
+
+{% include css/just-the-docs.scss.liquid color_scheme="berkeley-light" %}