From 9d0d5fe14e25d5165bc1af521b969e2c35a08130 Mon Sep 17 00:00:00 2001
From: Chris Wells <chris@mathematicaster.org>
Date: Fri, 30 Jan 2026 09:33:19 -0600
Subject: Added css and favicons. I'll generate them from scratch later

---
 css/main.scss | 984 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 984 insertions(+)
 create mode 100644 css/main.scss

(limited to 'css/main.scss')

diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 0000000..6d2a126
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,984 @@
+$lbg:       #f9f5d7;
+$lbg0:      #fbf1c7;
+$lbg0h:     #f9f5d7;
+$lbg0s:     #f2e5bc;
+$lbg1:      #ebdbb2;
+$lbg2:      #d5c4a1;
+$lbg3:      #bdae93;
+$lbg4:      #a89984;
+$lfg:       #3c3836;
+$lfg0:      #282828;
+$lfg1:      #3c3836;
+$lfg2:      #504945;
+$lfg3:      #665c54;
+$lfg4:      #7c6f64;
+$dbg:       #282828;
+$dbg0:      #282828;
+$dbg0h:     #1d2021;
+$dbg0s:     #32302f;
+$dbg1:      #3c3836;
+$dbg2:      #504945;
+$dbg3:      #665c54;
+$dbg4:      #7c6f64;
+$dfg:       #ebdbb2;
+$dfg0:      #fbf1c7;
+$dfg1:      #ebdbb2;
+$dfg2:      #d5c4a1;
+$dfg3:      #bdae93;
+$dfg4:      #a89984;
+$gray:      #928374;
+$gray1:     #a89984;
+$red:       #cc241d;
+$green:     #98971a;
+$yellow:    #d79921;
+$blue:      #458588;
+$purple:    #b16286;
+$aqua:      #689d6a;
+$orange:    #d65d0e;
+$bred:      #fb4934;
+$bgreen:    #b8bb26;
+$byellow:   #fabd2f;
+$bblue:     #83a598;
+$bpurple:   #d3869b;
+$baqua:     #8ec07c;
+$borange:   #fe8019;
+$dred:      #9d0006;
+$dgreen:    #79740e;
+$dyellow:   #b57614;
+$dblue:     #076678;
+$dpurple:   #8f3f71;
+$daqua:     #427b58;
+$dorange:   #af3a03;
+$ared:      #421e1e;
+$ablue:     #2b3c44;
+$aaqua:     #36473a;
+$sienna:    #dd6f48;
+$slategray: #528b8b;
+$lightblue: #66999d;
+$burlywood: #bbaa97;
+$aquamarine: #83a598;
+$turquoise: #61acbb;
+
+
+
+@import url(https://code.cdn.mozilla.net/fonts/fira.css);
+@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);
+
+:root {
+    --purple: #{$purple};
+    --aqua: #{$aqua};
+    --blue: #{$blue};
+    --red: #{$red};
+    --orange: #{$orange};
+    --href-hover: #{$borange};
+    --hr: #{$gray};
+}
+
+:root[color-mode=light] {
+    --html-bg: #{$lbg1};
+    --bg: #{$lbg};
+    --fg: #{$lfg};
+    --href: #{$dorange};
+    --aqua1: #{$daqua};
+    --code-bg: #{$lbg1};
+    --footer-href: #{$dpurple};
+    --footer-href-hover: #{$purple};
+}
+
+:root[color-mode=dark] {
+    --html-bg: #{$dbg0h};
+    --bg: #{$dbg};
+    --fg: #{$dfg};
+    --href: #{$orange};
+    --aqua1: #{$aqua};
+    --code-bg: #{$dbg1};
+    --footer-href: #{$purple};
+    --footer-href-hover: #{$bpurple};
+}
+
+html {
+    font-family: 'Fira Sans', sans-serif;
+    background-color: var(--html-bg);
+    color: var(--fg);
+    margin: 1em;
+}
+
+body {
+    background-color: var(--bg);
+    margin: 0 auto;
+    max-width: 30cm;
+    border: 1pt solid var(--fg);
+    padding: 1em;
+}
+
+a {
+    color: var(--href);
+    text-decoration: underline;
+}
+
+a:hover {
+    color: var(--href-hover);
+    text-decoration: underline;
+}
+
+a:active {
+    outline: 0;
+}
+
+header {
+    clear: both;
+    padding: 0;
+    margin: 0;
+    font-size: 0.9em;
+    width: 100%;
+    text-decoration: none;
+    font-weight: bold;
+}
+header a, header a:hover {
+    text-decoration: none;
+}
+
+#menu {
+    clear: both;
+    display: block;
+    width: 100%;
+    margin: 0 0 1em 0;
+    color: var(--bg);
+    background-color: var(--fg);
+    overflow: hidden;
+}
+#menu a {
+    display: block;
+    float: left;
+    padding: 5px 10px 5px 10px;
+    color: var(--bg);
+}
+#menu a:hover {
+    color: var(--href-hover);
+}
+
+code {
+    font-family: 'Fira Code', monospace;
+    background-color: var(--code-bg);
+    padding: 2px;
+}
+
+button {
+    line-height: normal;
+    font-family: inherit;
+    font-size: 100%;
+    margin: 0;
+    cursor: pointer;
+}
+
+button:active {
+    outline: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: 700;
+    margin-bottom: 0.5em;
+    margin-top: 0em;
+}
+
+h1,
+h2,
+h3 {
+    color: var(--purple);
+}
+
+h4,
+h5 {
+    color: var(--aqua);
+}
+
+h6 {
+    color: var(--blue);
+}
+
+h1 {
+    font-size: 2.2em;
+}
+h2 {
+    font-size: 2em;
+}
+h3 {
+    font-size: 1.8em;
+}
+h4 {
+    font-size: 1.4em;
+}
+h5 {
+    font-size: 1.3em;
+}
+h6 {
+    font-size: 1.1em;
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--hr);
+}
+
+img {
+    max-width: 100%;
+    padding: 2px;
+    border: 3px solid var(--fg);
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+table, th, td {
+    border: 1px solid var(--hr);
+    padding: 5px 10px 5px 10px;
+}
+
+blockquote {
+    border-left: 5px solid var(--purple);
+    margin: 20px 20px 10px 10px;
+    padding: 0px 15px 0px 10px;
+}
+blockquote ul {
+    margin-top: -10px;
+    list-style-type: none;
+    padding: 0px 1em 0px 1em;
+}
+
+footer {
+    clear: both;
+    padding-top: 10px;
+    padding-bottom: 15px;
+    font-weight: bold;
+}
+footer hr {
+    border: 0;
+    border-top: 3px double var(--hr);
+}
+footer a {
+    text-decoration: none;
+    color: var(--footer-href);
+}
+footer a:hover {
+    color: var(--footer-href-hover);
+    text-decoration: underline;
+}
+
+.comment {
+    font-size: 0.75em;
+}
+.paper {
+    padding: 0 0 1em 0;
+}
+.paper-title {
+    font-size: 1.2em;
+    font-weight: bold;
+}
+.paper-author {
+    padding: 5px 0px 5px 0px;
+    border-left: 2px solid var(--fg);
+    margin: 0 0 0 1px;
+}
+.paper-author ul {
+    display: flex;
+    list-style-type: none;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+.paper-author ul:before {
+    padding: 0 0 0 0;
+    margin: 0 0 0 0;
+    content: 'with ';
+}
+.paper-author li:not(:last-child)::after {
+    content: ', ';
+}
+.paper-foot {
+    padding: 5px 0 0 0;
+    border-bottom: 2px solid var(--fg);
+    border-left: 2px solid var(--fg);
+    margin: 0 0 0 1px;
+}
+.paper-foot ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+.paper-foot li {
+    float: left;
+    padding: 1px 5px 1px 5px;
+    border-right: 1px solid var(--fg);
+}
+.paper-abstract {
+    padding: 0px 15px 0px 5px;
+    border-left: 2px solid var(--fg);
+    margin: 0 0 0 1px;
+}
+.abstract-button {
+    background-color: var(--fg);
+    //font-weight: bold;
+    color: var(--bg);
+    cursor: pointer;
+    text-decoration: none;
+    border: none;
+}
+.abstract-button:hover {
+    color: var(--href-hover);
+}
+.top-button {
+    background-color: var(--bg);
+    color: var(--fg);
+    margin: 0 0 0 5pt;
+}
+.top-button a {
+    color: var(--fg);
+    text-decoration: none;
+}
+.top-button a:hover {
+    color: var(--href-html-hover);
+}
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+.column {
+    float: left;
+}
+.left {
+    width: 70%;
+}
+.right {
+    width: 30%;
+}
+.pull-left {
+    float: left;
+}
+.pull-right {
+    float: right;
+}
+
+.bare table {
+    border-collapse: collapse;
+    border: none;
+}
+.bare tr {
+    border: none;
+}
+.bare th, .bare td {
+    border: none;
+    text-align: left;
+    vertical-align: top;
+    padding: 10px;
+}
+.bare th {
+    text-align: right;
+}
+.bare ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+// .schedule table {
+    // width: 100%;
+    // text-align: center;
+
+    // .teaching, .meetings, .seminars, .workshops, .office {
+        // color: $bg;
+    // }
+    // .teaching {
+        // background-color: $purple;
+    // }
+    // .meetings {
+        // background-color: $red;
+    // }
+    // .seminars {
+        // background-color: $green;
+    // }
+    // .workshops {
+        // background-color: $aqua;
+    // }
+    // .office {
+        // background-color: $yellow;
+    // }
+// }
+
+.has-tooltip {
+    position: relative;
+}
+
+.has-tooltip .tooltip {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.has-tooltip:hover .tooltip {
+    opacity: 1;
+    visibility: visible;
+}
+
+.tooltip {
+    background-color: var(--orange);
+    bottom: 130%;
+    color: var(--bg);
+    font-size: 70%;
+    left: 0%;
+    width: 110px;
+    padding: 2px;
+    position: absolute;
+    text-align: center;
+    text-decoration: none;
+    text-shadow: none;
+    word-break: normal;
+    line-break: strict;
+}
+
+// @media screen and (max-width: 500px) {
+    // .schedule {
+        // font-size: 0.7em;
+        // table, th, td {
+            // padding: 1px 2px 2px 1px;
+        // }
+    // }
+// }
+// @media screen and (max-width: 400px) {
+    // .schedule {
+        // font-size: 0.5em;
+        // table, th, td {
+            // padding: 0px 0px 0px 0px;
+        // }
+    // }
+// }
+
+.toggle-color-button {
+    color: var(--fg);
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+}
+
+
+// Change header font based on screen size
+@media screen and (max-width: 500px) {
+    header {
+        font-size: 0.7em;
+    }
+    #menu a {
+        padding: 3px 5px 3px 5px;
+    }
+}
+@media screen and (max-width: 400px) {
+    header {
+        font-size: 0.5em;
+    }
+    #menu a {
+        padding: 2px 5px 2px 5px;
+    }
+}
+/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+    .column {
+        width: 100%;
+    }
+}
+
+
+
+
+
+// article,
+// aside,
+// details,
+// figcaption,
+// figure,
+// footer,
+// header,
+// hgroup,
+// nav,
+// section,
+// summary {
+    // display: block;
+// }
+// audio,
+// canvas,
+// video {
+    // display: inline-block;
+// }
+// audio:not([controls]) {
+    // display: none;
+    // height: 0;
+// }
+// [hidden] {
+    // display: none;
+// }
+// html {
+    // font-family: sans-serif;
+    // -webkit-text-size-adjust: 100%;
+    // -ms-text-size-adjust: 100%;
+// }
+// body {
+    // margin: 0;
+// }
+// a:focus {
+    // outline: thin dotted;
+// }
+// a:active,
+// a:hover {
+    // outline: 0;
+// }
+// abbr[title] {
+    // border-bottom: 1px dotted;
+// }
+// b,
+// strong {
+    // font-weight: bold;
+// }
+// dfn {
+    // font-style: italic;
+// }
+// mark {
+    // background: #ff0;
+    // color: #000;
+// }
+// code,
+// kbd,
+// pre,
+// samp {
+    // font-family: monospace, serif;
+    // font-size: 1em;
+// }
+// pre {
+    // white-space: pre-wrap;
+    // word-wrap: break-word;
+// }
+// q {
+    // quotes: "\201C" "\201D" "\2018" "\2019";
+// }
+// small {
+    // font-size: 80%;
+// }
+// sub,
+// sup {
+    // font-size: 75%;
+    // line-height: 0;
+    // position: relative;
+    // vertical-align: baseline;
+// }
+// sup {
+    // top: -0.5em;
+// }
+// sub {
+    // bottom: -0.25em;
+// }
+// img {
+    // max-width: 100%;
+    // padding: 2px;
+    // border: 3px solid var(--fg);
+// }
+// svg:not(:root) {
+    // overflow: hidden;
+// }
+// figure {
+    // margin: 0;
+// }
+// fieldset {
+    // border: 1px solid $gray;
+    // margin: 0 2px;
+    // padding: 0.35em 0.625em 0.75em;
+// }
+// legend {
+    // border: 0;
+    // padding: 0;
+// }
+// button,
+// input,
+// select,
+// textarea {
+    // font-family: inherit;
+    // font-size: 100%;
+    // margin: 0;
+// }
+// button,
+// input {
+    // line-height: normal;
+// }
+// button {
+    // cursor: pointer;
+// }
+// button[disabled],
+// input[disabled] {
+    // cursor: default;
+// }
+// textarea {
+    // overflow: auto;
+    // vertical-align: top;
+// }
+// table {
+    // border-collapse: collapse;
+    // border-spacing: 0;
+// }
+// table, th, td {
+    // border: 1px solid $gray;
+    // padding: 5px 10px 5px 10px;
+// }
+// html {
+    // font-family: 'Fira Sans', sans-serif;
+// }
+// pre,
+// code {
+    // font-family: 'Fira Code', monospace;
+// }
+// h1,
+// h2,
+// h3,
+// h4,
+// h5,
+// h6 {
+    // font-family: 'Fira Sans', sans-serif;
+    // font-weight: 700;
+    // margin-bottom: 0.5em;
+    // margin-top: 0em;
+// }
+// html {
+    // background-color: $bg1;
+    // color: $fg;
+    // margin: 1em;
+    // // background-image: repeating-linear-gradient(90deg, $bg2, $bg2 1px, transparent 1px, transparent 7px);
+    // // background-size: 16px;
+// }
+// body {
+    // background-color: $bg;
+    // margin: 0 auto;
+    // max-width: 30cm;
+    // border: 1pt solid $fg;
+    // padding: 1em;
+// }
+// code {
+    // background-color: $bg1;
+    // padding: 2px;
+// }
+// a {
+    // color: $dorange;
+    // text-decoration: underline;
+// }
+// a:hover {
+    // color: $borange;
+    // text-decoration: underline;
+// }
+// h1,
+// h2,
+// h3 {
+    // color: $purple;
+// }
+// h4,
+// h5 {
+    // color: $aqua;
+// }
+// h6 {
+    // color: $blue;
+// }
+// pre {
+    // background-color: $bg;
+    // color: $fg;
+    // border: 1pt solid $gray;
+    // padding: 1em;
+    // box-shadow: 5pt 5pt 8pt $bg1;
+// }
+// pre code {
+    // background-color: $bg;
+// }
+// h1 {
+    // font-size: 2.2em;
+// }
+// h2 {
+    // font-size: 2em;
+// }
+// h3 {
+    // font-size: 1.8em;
+// }
+// h4 {
+    // font-size: 1.4em;
+// }
+// h5 {
+    // font-size: 1.3em;
+// }
+// h6 {
+    // font-size: 1.1em;
+// }
+// header {
+    // clear: both;
+    // padding: 0;
+    // margin: 0;
+    // font-size: 0.9em;
+    // width: 100%;
+    // text-decoration: none;
+    // font-weight: bold;
+// }
+// header a, header a:hover {
+    // text-decoration: none;
+// }
+// #menu {
+    // clear: both;
+    // display: block;
+    // width: 100%;
+    // margin: 0 0 1em 0;
+    // color: $bg;
+    // background-color: $fg;
+    // overflow: hidden;
+// }
+// #menu a {
+    // display: block;
+    // float: left;
+    // padding: 5px 10px 5px 10px;
+    // color: $bg;
+// }
+// #menu a:hover {
+    // color: $borange;
+    // // background-color: $bg;
+// }
+// @media screen and (max-width: 500px) {
+    // header {
+        // font-size: 0.7em;
+    // }
+    // #menu a {
+        // padding: 3px 5px 3px 5px;
+    // }
+// }
+// @media screen and (max-width: 400px) {
+    // header {
+        // font-size: 0.5em;
+    // }
+    // #menu a {
+        // padding: 2px 5px 2px 5px;
+    // }
+// }
+// #main {
+    // margin: 0;
+    // padding: 0;
+// }
+// blockquote {
+    // border-left: 5px solid $purple;
+    // margin: 20px 20px 10px 10px;
+    // padding: 0px 15px 0px 10px;
+// }
+// blockquote ul {
+    // margin-top: -10px;
+    // [>margin-bottom: 0;<]
+    // list-style-type: none;
+    // padding: 0px 1em 0px 1em;
+    // //padding: 0;
+// }
+// hr {
+    // border: 0;
+    // border-top: 1px solid $gray;
+// }
+// footer {
+    // clear: both;
+    // //border-top: 3px double $gray;
+    // padding-top: 10px;
+    // padding-bottom: 15px;
+    // font-weight: bold;
+// }
+// footer hr {
+    // border: 0;
+    // border-top: 3px double $gray;
+// }
+// footer a {
+    // text-decoration: none;
+    // color: $dpurple;
+// }
+// footer a:hover {
+    // color: $purple;
+    // text-decoration: underline;
+// }
+// .comment {
+    // font-size: 0.75em;
+// }
+// .paper {
+    // padding: 0 0 1em 0;
+    // //border-top: 2px solid $gray;
+// }
+// .paper-title {
+    // font-size: 1.2em;
+    // font-weight: bold;
+// }
+// .paper-author {
+    // padding: 5px 5px 5px 5px;
+    // border-left: 2px solid $fg;
+    // margin: 0 0 0 1px;
+// }
+// .paper-foot {
+    // //border-top: 1px solid $gray;
+    // padding: 5px 0 0 0;
+    // border-bottom: 2px solid $fg;
+    // border-left: 2px solid $fg;
+    // margin: 0 0 0 1px;
+// }
+// .paper-foot ul {
+    // list-style-type: none;
+    // margin: 0;
+    // padding: 0;
+    // overflow: hidden;
+// }
+// .paper-foot li {
+    // float: left;
+    // padding: 1px 5px 1px 5px;
+    // border-right: 1px solid $fg;
+    // //border-left: 2px solid $fg;
+// }
+// .paper-abstract {
+    // padding: 0px 15px 0px 5px;
+    // border-left: 2px solid $fg;
+    // margin: 0 0 0 1px;
+// }
+// .abstract-button {
+    // background-color: $fg;
+    // //font-weight: bold;
+    // color: $bg;
+    // cursor: pointer;
+    // text-decoration: none;
+    // border: none;
+    // //padding: 2px 2px 2px 2px;
+// }
+// .abstract-button:hover {
+    // color: $borange;
+// }
+// .top-button {
+    // background-color: $bg;
+    // color: $fg;
+    // margin: 0 0 0 5pt;
+// }
+// .top-button a {
+    // color: $fg;
+    // text-decoration: none;
+// }
+// .top-button a:hover {
+    // color: $purple;
+// }
+// .row:after {
+    // content: "";
+    // display: table;
+    // clear: both;
+// }
+// .column {
+    // float: left;
+// }
+// .left {
+    // width: 70%;
+// }
+// .right {
+    // width: 30%;
+// }
+// .pull-left {
+    // float: left;
+// }
+// .pull-right {
+    // float: right;
+// }
+// [> Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other <]
+// @media screen and (max-width: 600px) {
+    // .column {
+        // width: 100%;
+    // }
+// }
+// .bare table {
+    // border-collapse: collapse;
+    // border: none;
+// }
+// .bare tr {
+    // border: none;
+// }
+// .bare th, .bare td {
+    // border: none;
+    // text-align: left;
+    // vertical-align: top;
+    // padding: 10px;
+// }
+// .bare th {
+    // text-align: right;
+// }
+// .bare ul {
+    // list-style: none;
+    // padding: 0;
+    // margin: 0;
+// }
+
+// .schedule table {
+    // width: 100%;
+    // text-align: center;
+
+    // .teaching, .meetings, .seminars, .workshops, .office {
+        // color: $bg;
+    // }
+    // .teaching {
+        // background-color: $purple;
+    // }
+    // .meetings {
+        // background-color: $red;
+    // }
+    // .seminars {
+        // background-color: $green;
+    // }
+    // .workshops {
+        // background-color: $aqua;
+    // }
+    // .office {
+        // background-color: $yellow;
+    // }
+// }
+
+// .has-tooltip {
+    // position: relative;
+// }
+
+// .has-tooltip .tooltip {
+    // opacity: 0;
+    // visibility: hidden;
+// }
+
+// .has-tooltip:hover .tooltip {
+    // opacity: 1;
+    // visibility: visible;
+// }
+
+// .tooltip {
+    // background-color: $orange;
+    // bottom: 130%;
+    // color: $bg;
+    // font-size: 70%;
+    // left: 0%;
+    // width: 110px;
+    // padding: 2px;
+    // position: absolute;
+    // text-align: center;
+    // text-decoration: none;
+    // text-shadow: none;
+    // word-break: normal;
+    // line-break: strict;
+// }
+
+// @media screen and (max-width: 500px) {
+    // .schedule {
+        // font-size: 0.7em;
+        // table, th, td {
+            // padding: 1px 2px 2px 1px;
+        // }
+    // }
+// }
+// @media screen and (max-width: 400px) {
+    // .schedule {
+        // font-size: 0.5em;
+        // table, th, td {
+            // padding: 0px 0px 0px 0px;
+        // }
+    // }
+// }
-- 
cgit v1.2.3