Define breakpoints and font sizes (#198)

https://www.refactoringui.com strongly recommends using a design system
where we systematize colors, font sizes, and breakpoints. That is all
moved to a new `theme/` folder. This will be useful with the mandates
map, that we can keep in sync the same files.

The breakpoint sizes come from tailwind.css.

The font scale comes from refactoringui.com. It strongly recommends
using `px` over `em`, and generally `px` over `rem` but `em` is an
issue.

src/css/_about.scss

@@ -1,4 +1,4 @@
-@use "colors";
+@use "theme/colors";
 
 dd {
   margin-bottom: 10px;

src/css/_header.scss

@@ -1,4 +1,4 @@
-@use "colors";
+@use "theme/colors";
 
 header {
   width: 100%;

src/css/_scorecard.scss

@@ -1,4 +1,4 @@
-@use "colors";
+@use "theme/colors";
 
 .popup-fixed {
   position: fixed;

src/css/theme/_breakpoints.scss

@@ -0,0 +1,30 @@
+// Inspired by https://dev.to/alberto/defining-responsive-breakpoints-made-easy-with-sass-mixins-26p0.
+
+$sm-width: "640px";
+$md-width: "768px";
+$lg-width: "1024px";
+$xl-width: "1280px";
+
+@mixin gt-xs() {
+  @media screen and (min-width: $sm-width) {
+    @content();
+  }
+}
+
+@mixin gt-sm() {
+  @media screen and (min-width: $md-width) {
+    @content();
+  }
+}
+
+@mixin gt-md() {
+  @media screen and (min-width: $lg-width) {
+    @content();
+  }
+}
+
+@mixin gt-lg() {
+  @media screen and (min-width: $xl-width) {
+    @content();
+  }
+}

src/css/theme/_typography.scss

@@ -0,0 +1,7 @@
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-base: 16px;
+$font-size-md: 18px;
+$font-size-lg: 20px;
+$font-size-xl: 24px;
+$font-size-2xl: 30px;