initial themeing done

static/styles/style.css

@@ -0,0 +1,189 @@
+@charset "UTF-8";
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  list-style: none;
+  text-decoration: none;
+  border: none;
+}
+
+html {
+  color-scheme: dark light;
+}
+
+a {
+  color: #1f8200;
+}
+a:visited {
+  color: #afafaf;
+}
+a:hover {
+  text-decoration: overline underline;
+}
+
+body {
+  font-family: monospace;
+  font-size: 16px;
+  padding: 8px;
+}
+
+header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 12px;
+}
+header img {
+  width: 64px;
+  height: auto;
+  border-radius: 50%;
+}
+
+nav {
+  margin: 12px auto;
+  font-size: 24px;
+  border: 1px solid #d96500;
+  padding: 6px;
+  border-radius: 12px;
+}
+nav ul {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  align-items: baseline;
+}
+nav li {
+  min-width: 100px;
+}
+nav li::before {
+  content: "🍁 ";
+}
+
+main img {
+  display: block;
+  max-width: 120px;
+}
+
+article {
+  margin: 12px auto;
+  border: 1px solid #d96500;
+  padding: 4px;
+  border-radius: 8px;
+}
+article h2 {
+  padding: 8px 0;
+  font-size: 24px;
+  text-align: center;
+  text-decoration: underline;
+}
+article h3 {
+  margin: 12px 24px;
+  text-decoration: underline;
+}
+article p {
+  padding: 12px;
+}
+article blockquote {
+  width: 80%;
+  margin: auto;
+  border-left: 4mm ridge #d91202;
+  border-radius: 2px;
+  padding-left: 9px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+article > a {
+  display: block;
+  text-align: right;
+}
+
+section img {
+  max-width: 340px;
+  border-radius: 8px;
+}
+section ol {
+  margin-left: 54px;
+  padding-left: 24px;
+  margin-bottom: 12px;
+}
+section ol li {
+  list-style: lower-roman;
+}
+section ul {
+  margin-left: 54px;
+  padding-left: 24px;
+  margin-bottom: 12px;
+}
+section ul li {
+  list-style: square;
+}
+
+.grid {
+  margin: 12px auto;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  align-items: normal;
+  gap: 10px;
+}
+
+table {
+  margin: 20px auto;
+  border: 1px solid #d96500;
+  border-radius: 8px;
+  padding: 4px;
+  color: #373735;
+}
+table tr,
+table td {
+  padding: 4px;
+}
+
+thead td {
+  background-color: #b4beba;
+  padding: 2px;
+  text-align: center;
+}
+
+tbody tr:nth-child(odd) {
+  background-color: #34b543;
+}
+tbody tr:nth-child(even) {
+  background-color: #d58379;
+}
+
+tfoot {
+  text-align: center;
+}
+tfoot tr {
+  background-color: #b4beba;
+}
+
+footer {
+  margin: 10px auto;
+  font-size: 12px;
+  text-align: center;
+}
+
+@media only screen and (min-width: 980px) {
+  body {
+    width: 80vw;
+    margin: auto;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: #373735;
+    color: #fffef2;
+  }
+}
+@media (prefers-color-scheme: light) {
+  html {
+    background-color: #fffef2;
+    color: #373735;
+  }
+}
+
+/*# sourceMappingURL=style.css.map */

static/styles/style.scss

@@ -0,0 +1,211 @@
+$border_colour: #d96500;
+$white: #fffef2;
+$black: #373735;
+$blockquote_border: #d91202;
+$link_color: #1f8200;
+$link_visited: #afafaf;
+$table_header: #b4beba;
+$table_odd: #34b543;
+$table_even: #d58379;
+$dark_background: $black;
+$light_background: $white;
+
+
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  list-style: none;
+  text-decoration: none;
+  border: none;
+}
+
+html {
+  color-scheme: dark light;
+}
+
+a {
+    color: $link_color;
+    &:visited {
+        color: $link_visited;
+    }
+    &:hover {
+        text-decoration: overline underline;
+    }
+}
+
+body {
+    font-family: monospace;
+    font-size: 16px;
+    padding: 8px;
+}
+
+header {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: baseline;
+    padding: 12px;
+    & img {
+        width: 64px;
+        height: auto;
+        border-radius: 50%;
+    }
+}
+
+nav {
+    margin: 12px auto;
+    font-size: 24px;
+    border: 1px solid $border_colour;
+    padding: 6px;
+    border-radius: 12px;
+    & ul {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-evenly;
+        align-items: baseline;
+    }
+    & li {
+        min-width: 100px;
+        &::before {
+            content: "🍁 ";
+        }
+    }
+}
+
+main {
+    & img {
+        display: block;
+        max-width: 120px;
+    }
+}
+
+article {
+    margin: 12px auto;
+    border: 1px solid $border_colour;
+    padding: 4px;
+    border-radius: 8px;
+    & h2 {
+        padding: 8px 0;
+        font-size: 24px;
+        text-align: center;
+        text-decoration: underline;
+    }
+    & h3 {
+        margin: 12px 24px;
+        text-decoration: underline;
+    }
+    & p {
+        padding: 12px;
+    }
+    & blockquote {
+        width: 80%;
+        margin: auto;
+        border-left: 4mm ridge $blockquote_border;
+        border-radius: 2px;
+        padding-left: 9px;
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+    & > a {
+        display: block;
+        text-align: right;
+    }
+}
+
+section {
+    & img {
+        max-width: 340px;
+        border-radius: 8px;
+    }
+    & ol {
+        margin-left: 54px;
+        padding-left: 24px;
+        margin-bottom: 12px;
+        & li {
+            list-style: lower-roman;
+        }
+    }
+    & ul {
+        margin-left: 54px;
+        padding-left: 24px;
+        margin-bottom: 12px;
+        & li {
+            list-style: square;
+        }
+    }
+
+}
+
+
+.grid {
+    margin: 12px auto;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-evenly;
+    align-items: normal;
+    gap: 10px;
+}
+
+table {
+    margin: 20px auto;
+    border: 1px solid $border_colour;
+    border-radius: 8px;
+    padding: 4px;
+    color: $black;
+    & tr,
+      td {
+        padding: 4px;
+    }
+}
+
+thead {
+    & td {
+        background-color: $table_header;
+        padding: 2px;
+        text-align: center;
+    }
+}
+
+tbody {
+    & tr:nth-child(odd) {
+        background-color: $table_odd;
+    }
+    & tr:nth-child(even) {
+        background-color: $table_even;
+    }
+}
+
+tfoot {
+    text-align: center;
+    & tr {
+        background-color: $table_header;
+    }
+}
+
+footer {
+    margin: 10px auto;
+    font-size: 12px;
+    text-align: center;
+}
+
+@media only screen and (min-width: 980px) {
+    body {
+        width: 80vw;
+        margin: auto;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        background-color: $dark_background;
+        color: $white;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    html {
+        background-color: $light_background;
+        color: $black;
+    }
+}

static/styles/styles.css

@@ -0,0 +1,251 @@
+@charset "UTF-8";
+/* makes sizing simpler */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* remove default spacing */
+/* force styling of type through styling, rather than elements */
+* {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: 0;
+  list-style: none;
+  text-decoration: none;
+  border: none;
+}
+
+/* dark mode user-agent-styles */
+html {
+  color-scheme: dark light;
+  font-family: monospace;
+  font-size: 16px;
+}
+
+/* responsive images/videos */
+img,
+picture,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+header {
+  padding: 1.6rem 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+header h1 {
+  font-size: 2.2rem;
+  text-align: right;
+}
+header img {
+  border-radius: 50%;
+  width: 64px;
+  height: 64px;
+}
+
+nav {
+  padding: 12px;
+  border: 1px dashed white;
+  border-radius: 12px;
+  font-size: 1.4rem;
+}
+nav ul {
+  text-align: center;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+}
+nav ul li {
+  min-width: 100px;
+}
+nav ul li:before {
+  content: "≫ ";
+}
+
+body {
+  width: 95vw;
+  margin: auto;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.8rem;
+}
+
+main article {
+  margin: 12px 0;
+  border: 1px dashed white;
+  padding: 12px;
+  border-radius: 12px;
+}
+main article > a {
+  display: block;
+  text-align: right;
+  padding: 0.4rem;
+}
+main article h2 {
+  text-align: center;
+}
+main article p {
+  padding: 0.4rem 0;
+}
+
+.prose_section {
+  border: 1px solid lightcoral;
+}
+.prose_section h2 {
+  text-align: center;
+  text-decoration: underline;
+}
+.prose_section p {
+  margin: 16px;
+}
+.prose_section blockquote {
+  border-left: solid red;
+  margin: auto;
+  width: 80%;
+  padding: 0.5rem;
+  text-align: justify;
+  font-style: italic;
+}
+
+.lists {
+  border: 1px solid lightgreen;
+}
+.lists h2 {
+  text-align: center;
+  text-decoration: underline;
+  margin-bottom: 0.4rem;
+}
+.lists h3 {
+  font-weight: bold;
+  margin: 0 1rem;
+}
+.lists section {
+  margin: 0.2rem 2.5rem;
+}
+.lists ol,
+.lists ul {
+  margin: 0 2rem;
+}
+
+.ol_item {
+  list-style: lower-roman;
+}
+
+.ul_item {
+  list-style: disc;
+}
+
+.tables {
+  border: 1px solid goldenrod;
+  margin: 0.8rem auto;
+  padding: 0.1rem;
+  border-radius: 12px;
+}
+.tables h2 {
+  text-align: center;
+}
+.tables table {
+  margin: 0.4rem auto 1.2rem;
+  border: 1px solid goldenrod;
+  border-radius: 4px;
+}
+.tables table thead {
+  letter-spacing: 2px;
+  border: 1px dashed white;
+}
+.tables table thead tr {
+  font-size: 1.8rem;
+  text-align: center;
+  color: black;
+}
+.tables table thead tr td {
+  background-color: lightpink;
+  border-radius: 4px;
+  width: 33%;
+}
+.tables table tbody {
+  color: black;
+}
+.tables table tbody td {
+  padding: 0 0.4rem;
+}
+.tables table tbody tr:nth-child(odd) {
+  background-color: lightgreen;
+}
+.tables table tbody tr:nth-child(even) {
+  background-color: lightskyblue;
+}
+.tables table tfoot {
+  text-align: center;
+  font-weight: bold;
+  font-style: italic;
+  background-color: lightpink;
+  color: black;
+}
+
+.span_two {
+  text-align: right;
+}
+
+.images {
+  border: 1px solid #674834;
+  padding: 0.4rem;
+}
+.images section {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  align-items: normal;
+  gap: 12px;
+  margin: 10px auto;
+}
+.images img {
+  width: 95%;
+  border-radius: 12px;
+  box-shadow: 1px 2px 4px grey;
+}
+
+footer {
+  text-align: center;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  font-size: 0.8rem;
+}
+
+@media only screen and (min-width: 980px) {
+  header {
+    width: 80vw;
+    margin: auto;
+  }
+  nav {
+    width: 80vw;
+    margin: auto;
+  }
+  main {
+    width: 80vw;
+    margin: auto;
+  }
+  .images img {
+    width: 45%;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .images img {
+    box-shadow: 1px 2px 4px #674834;
+  }
+}
+
+/*# sourceMappingURL=styles.css.map */

static/styles/styles.scss

@@ -0,0 +1,258 @@
+@use 'sass:color';
+
+$base_colour: #FDF2D1;
+$font_colour: #1A1110;
+$box_shadow: grey;
+$dark_box_shadow: #674834 ;
+
+/* makes sizing simpler */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* remove default spacing */
+/* force styling of type through styling, rather than elements */
+* {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: 0;
+  list-style: none;
+  text-decoration: none;
+  border: none;
+}
+
+/* dark mode user-agent-styles */
+html {
+  color-scheme: dark light;
+  font-family: monospace;
+  font-size: 16px;
+}
+
+/* responsive images/videos */
+img,
+picture,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+header {
+    padding: 1.6rem 0;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    & h1 {
+        font-size: 2.2rem;
+        text-align: right;
+    }
+    & img {
+        border-radius: 50%;
+        width: 64px;
+        height: 64px;
+    }
+}
+
+nav {
+    padding: 12px;
+    border: 1px dashed white;
+    border-radius: 12px;
+    font-size: 1.4rem;
+    & ul {
+        text-align: center;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-evenly;
+        & li {
+            min-width: 100px;
+            &:before {
+                content: "≫ ";
+            }
+        }
+    }
+}
+
+body {
+    width: 95vw;
+    margin: auto;
+}
+
+h2 {
+    font-size: 2rem;
+}
+
+h3 {
+    font-size: 1.8rem;
+}
+
+main {
+    & article {
+        margin: 12px 0;
+        border: 1px dashed white;
+        padding: 12px;
+        border-radius: 12px;
+        & > a {
+            display: block;
+            text-align: right;
+            padding: 0.4rem;
+        }
+        & h2 {
+            text-align: center;
+        }
+        & p {
+            padding: 0.4rem 0;
+        }
+    }
+}
+
+.prose_section {
+    // margin: 1.2rem;
+    border: 1px solid lightcoral;
+    & h2 {
+        text-align: center;
+        text-decoration: underline;
+    }
+    & p {
+        margin: 16px;
+    }
+    & blockquote {
+        border-left: solid red;
+        margin: auto;
+        width: 80%;
+        padding: 0.5rem;
+        text-align: justify;
+        font-style: italic;
+    }
+}
+
+.lists {
+    border: 1px solid lightgreen;
+    & h2 {
+        text-align: center;
+        text-decoration: underline;
+        margin-bottom: 0.4rem;
+    }
+    & h3 {
+        font-weight: bold;
+        margin: 0 1rem;
+    }
+    & section {
+        margin: 0.2rem 2.5rem;
+    }
+    & ol,
+      ul  {
+        margin: 0 2rem;
+    }
+}
+.ol_item {
+    list-style: lower-roman;
+}
+.ul_item {
+    list-style: disc;
+}
+
+.tables {
+    border: 1px solid goldenrod;
+    margin: 0.8rem auto;
+    padding: 0.1rem;
+    border-radius: 12px;
+    & h2 {
+        text-align: center;
+    }
+    & table {
+        margin: 0.4rem auto 1.2rem;
+        border: 1px solid goldenrod;
+        border-radius: 4px;
+        & thead {
+            letter-spacing: 2px;
+            border: 1px dashed white;
+            & tr {
+                font-size: 1.8rem;
+                text-align: center;
+                color: black;
+                & td {
+                    background-color: lightpink;
+                    border-radius: 4px;
+                    width: 33%;
+                }
+            }
+        }
+        & tbody {
+            color: black;
+            & td {
+                padding: 0 0.4rem;
+            }
+            & tr:nth-child(odd) {
+                background-color: lightgreen;
+            }
+            & tr:nth-child(even) {
+                background-color: lightskyblue;
+            }
+        }
+        & tfoot {
+            text-align: center;
+            font-weight: bold;
+            font-style: italic;
+            background-color: lightpink;
+            color: black;
+        }
+    }
+}
+
+.span_two {
+    text-align: right;
+}
+
+.images {
+    border: 1px solid $dark_box_shadow;
+    padding: 0.4rem;
+    & section {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-evenly;
+        align-items: normal;
+        gap: 12px;
+        margin: 10px auto;
+    }
+    & img {
+        width: 95%;
+        border-radius: 12px;
+        box-shadow: 1px 2px 4px grey;
+    }
+}
+
+
+footer {
+    text-align: center;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-size: 0.8rem;
+}
+
+@media only screen and (min-width: 980px) {
+    header {
+        width: 80vw;
+        margin: auto;
+    }
+    nav {
+        width: 80vw;
+        margin: auto;
+    }
+    main {
+        width: 80vw;
+        margin: auto;
+    }
+    .images img {
+        width: 45%;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .images img {
+        box-shadow: 1px 2px 4px $dark_box_shadow;
+    }
+}