minor styling + some writing

css/looks.css

@@ -5,13 +5,14 @@
   --ui-spacing: 1.25;
   --read-spacing: 1.5;
   --wide-gray: rgb(245, 240, 240);
-  --narrow-gray: rgb(228, 220, 220);
+  --narrow-gray: rgb(240, 233, 233);
 }
 
 code {
   font-variant-ligatures: no-contextual;
 }
 
+
 code:not(pre code) {
   background-color: var(--wide-gray);
   padding-left: 3px;
@@ -19,17 +20,22 @@ code:not(pre code) {
   padding-top: 1px;
   padding-bottom: 1px;
   color: black;
-  border-radius: 5px;
+  border-radius: 3px;
   line-height: var(--ui-spacing);
+  /* These are needed if we allow code to line break. */
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  display: inline-block;
 }
 
 pre {
-  background-color: white;
+  background-color: var(--wide-gray);
   overflow-x: auto;
   border-style: solid;
+  color: black;
   border-radius: 3px;
   border-width: 2px;
-  border-color: var(--narrow-gray);
+  border-color: var(--wide-gray);
   padding-left: 0.35em;
   padding-top: 0.1em;
   padding-bottom: 0.2em;
@@ -84,6 +90,30 @@ a:visited {
   color: var(--darkest-color)
 }
 
+.footnote-ref {
+  text-decoration: none;
+  font-family: "BodySans";
+}
+
+.footnote-ref sup {
+  font-size: 0.7em;
+  /* font-weight: bold; */
+}
+
+.footnote-ref sup::before {
+  content: "(";
+  padding-left: 0.075em;
+}
+
+.footnote-ref sup::after {
+  content: ")";
+}
+
+a.footnote-back {
+  margin-left: 0.25em;
+  text-decoration: none;
+}
+
 img {
   width: 100%;
   height: auto;