diff --git a/.vscode/settings.json b/.vscode/settings.json
index 06136644..997cb87a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,12 +11,14 @@
   },
 
   "files.associations": {
-    "*.json": "jsonc"
+    "*.json": "jsonc",
+    "**/css/**/*.css": "css",
+    "**/js/**/*.js": "javascript"
   },
 
   "files.eol": "\n",
 
-  "cSpell.words": ["accs", "adminlog", "ankora", "anstata", "applebot", "apwu", "asgi", "bolditalic", "breaadyboy", "bytespider", "cairosvg", "caltanto", "caltilo", "canadien", "cargu", "catojn", "cosmetika", "dajne", "dargi", "dargu", "detikedo", "diffbot", "dilo", "displ", "dojn", "dolma", "dprotokolo", "dtanbrunan", "dtipoj", "elsalutu", "facebookexternalhit", "fontawesome", "gbdjm", "hitboxes", "iaskspider", "imagesift", "insigniaj", "insignio", "insignioj", "isinstance", "jerimiah", "keycheck", "kont", "linkifyjs", "maxlength", "mensiis", "monanto", "monantoj", "nesvaligdeg", "nkcdd", "noreply", "noscript", "notif", "notifs", "omgili", "omgilibot", "privatemessagecontainer", "ratelimited", "ratelimits", "refre", "retpa", "sfjl", "showlog", "sidetrade", "signup", "smiggins", "stmp", "subcomment", "timpibot", "typecheck", "ufeff", "unlikes", "urlpart", "vailida", "webzio"],
+  "cSpell.words": ["accs", "adminlog", "ankora", "anstata", "applebot", "apwu", "asgi", "bolditalic", "breaadyboy", "bytespider", "cairosvg", "caltanto", "caltilo", "canadien", "cargu", "catojn", "collectstatic", "cosmetika", "dajne", "dargi", "dargu", "detikedo", "diffbot", "dilo", "displ", "dojn", "dolma", "dprotokolo", "dtanbrunan", "dtipoj", "elsalutu", "facebookexternalhit", "fontawesome", "gbdjm", "hitboxes", "iaskspider", "imagesift", "insigniaj", "insignio", "insignioj", "isinstance", "jerimiah", "keycheck", "kont", "lessc", "linkifyjs", "maxlength", "mensiis", "monanto", "monantoj", "nesvaligdeg", "nkcdd", "noreply", "noscript", "notif", "notifs", "omgili", "omgilibot", "privatemessagecontainer", "ratelimited", "ratelimits", "refre", "retpa", "sfjl", "showlog", "sidetrade", "signup", "smiggins", "stmp", "subcomment", "timpibot", "typecheck", "ufeff", "unlikes", "urlpart", "vailida", "webzio"],
 
   "cSpell.ignorePaths": [
     ".vscode/"
diff --git a/README.md b/README.md
index 7550480b..71d241ce 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,31 @@ free to reach out to [@trinkey](https://github.com/trinkey). if you don't agree
 with this, then don't start drama about it, just leave and pretend smiggins
 doesn't exist.
 
+<details>
+  <summary><h2 style="display: inline">
+    How can I contribute to this project
+  </h2></summary>
+
+  If you would like to help translate this website, read
+  [this file](smiggins/lang/README.md)
+
+  If there is a specific thing you want to do, you can make an issue (if an
+  existing doesn't already exist).
+
+  Once you finish programming you can create a new fork with your code and then
+  make a pull request with it.
+
+  Anyone who gets contributor access to the repository is decided by
+  [@trinkey](https://github.com/trinkey). If you think you are deserving of
+  getting it and don't currently have it, let her know.
+
+  Finally, to compile typescript/less, you need to install those npm packages
+  (`npm i -g less typescript less-plugin-clean-css`). Then, to compile
+  typescript, you can run `tsc` assuming your working directory in your console
+  is somewhere within this project. To compile less, you can run
+  `python compile-less.py` in the root directory of this project.
+</details>
+
 <details>
   <summary><h2 style="display: inline">How to run locally</h2></summary>
 
@@ -241,25 +266,6 @@ doesn't exist.
   and make a new issue (make sure you're logged in with github)
 </details>
 
-<details>
-  <summary><h2 style="display: inline">
-    How can I contribute to this project
-  </h2></summary>
-
-  if you would like to help tranlate this website, read
-  [this file](smiggins/lang/README.md)
-
-  if there is a specific thing you want to do, you can make an issue (if a
-  duplicate doesn't already exist).
-
-  once you finish programming you can create a new fork with your code and then
-  make a pull request with it.
-
-  anyone who gets contributor access to the repository is decided by
-  [@trinkey](https://github.com/trinkey). if you think you are deserving of
-  getting it and don't currently have it, let her know.
-</details>
-
 <details>
   <summary><h2 style="display: inline">
     How to setup Gmail on PythonAnywhere
diff --git a/compile-less.py b/compile-less.py
new file mode 100644
index 00000000..2965f1b2
--- /dev/null
+++ b/compile-less.py
@@ -0,0 +1,12 @@
+import os
+from pathlib import Path
+
+CONFIG = {
+    "in_directory": Path("./smiggins/less"),
+    "out_directory": Path("./smiggins/templates/css"),
+    "compress": True
+}
+
+for i in os.listdir(CONFIG["in_directory"]):
+    os.system(f"lessc {CONFIG['in_directory'] / i} {CONFIG['out_directory'] / i.replace('.less', '.css')}  {'--clean-css' if CONFIG['compress'] else ''}")
+    print(i)
\ No newline at end of file
diff --git a/smiggins/static/css/admin.css b/smiggins/less/admin.less
similarity index 74%
rename from smiggins/static/css/admin.css
rename to smiggins/less/admin.less
index 4677e2c3..11180d03 100644
--- a/smiggins/static/css/admin.css
+++ b/smiggins/less/admin.less
@@ -21,13 +21,13 @@ p {
 .admin-logs {
   margin: 0 auto;
   max-width: calc(100vw - 2em);
-}
 
-.admin-logs th {
-  padding: 0.3em;
-}
+  th {
+    padding: 0.3em;
+  }
 
-.admin-logs td {
-  padding: 0.3em;
-  text-align: left;
+  td {
+    padding: 0.3em;
+    text-align: left;
+  }
 }
diff --git a/smiggins/static/css/base.css b/smiggins/less/base.less
similarity index 57%
rename from smiggins/static/css/base.css
rename to smiggins/less/base.less
index cfe97f57..f9e90be5 100644
--- a/smiggins/static/css/base.css
+++ b/smiggins/less/base.less
@@ -51,16 +51,15 @@ small {
 noscript {
   display: block;
   margin-bottom: 10vh;
-}
 
-noscript h1,
-noscript h2 {
-  color: var(--red);
-}
+  h1, h2 {
+    color: var(--red)
+  }
 
-noscript ul {
-  display: inline-block;
-  text-align: left;
+  ul {
+    display: inline-block;
+    text-align: left;
+  }
 }
 
 button {
@@ -72,33 +71,33 @@ button {
   cursor: pointer;
   font-size: 0.8em;
   transition: color 0.15s, scale 0.15s, margin 0.15s, background-color 0.15s;
-}
 
-button:disabled {
-  opacity: 60%;
-  pointer-events: none;
-}
+  &:disabled {
+    opacity: 60%;
+    pointer-events: none;
+  }
 
-button:active {
-  scale: 95%;
-  background-color: var(--button-hover-background);
-}
+  &:active {
+    scale: 95%;
+    background-color: var(--button-hover-background);
+  }
 
-button:hover,
-button.inverted:hover {
-  background-color: var(--button-hover-background);
-}
+  &:hover {
+    background-color: var(--button-hover-background);
+  }
 
-button.inverted {
-  background-color: var(--button-inverted-background);
-}
+  &.inverted {
+    background-color: var(--button-inverted-background);
+  }
 
-button.primary,
-button.primary:hover {
-  background-color: var(--accent);
-  color: var(--background);
-  border-color: var(--button-border);
-  outline-color: var(--button-border);
+  &.primary {
+    &, &:hover {
+      background-color: var(--accent);
+      color: var(--background);
+      border-color: var(--button-border);
+      outline-color: var(--button-border);
+    }
+  }
 }
 
 .fake-input {
@@ -109,6 +108,19 @@ button.primary:hover {
   cursor: text;
 }
 
+.fake-hidden {
+  display: block;
+  user-select: none;
+  pointer-events: none;
+  opacity: 0;
+  height: 0;
+  width: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-wrap: nowrap;
+}
+
 .fake-input,
 input:not([type="checkbox"]),
 textarea,
@@ -125,52 +137,56 @@ select {
   resize: vertical;
 }
 
-body:not([data-disable-checkboxes]) label:has(+ input[type="checkbox"]),
-body:not([data-disable-checkboxes]) input[type="checkbox"] + label {
-  cursor: pointer;
-}
+body:not([data-disable-checkboxes]) {
+  label:has(+ input[type="checkbox"]),
+  input[type="checkbox"] + label {
+    cursor: pointer;
+  }
 
-body:not([data-disable-checkboxes]) label + input[type="checkbox"],
-body:not([data-disable-checkboxes]) input[type="checkbox"]:has(+ label) {
-  width: 0;
-  height: 0;
-  opacity: 0;
-  margin: 0;
-  padding: 0;
-  border: none;
-  outline: none;
-}
+  label + input[type="checkbox"],
+  input[type="checkbox"]:has(+ label) {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+  }
 
-body:not([data-disable-checkboxes]) label:has(+ input[type="checkbox"])::after,
-body:not([data-disable-checkboxes]) input[type="checkbox"] + label::before {
-  content: "";
-  transition: background-color 0.25s, outline-color 0.25s;
-  background-color: var(--checkbox-background);
-  display: inline-block;
-  position: relative;
-  top: 0.1em;
-  width: 1em;
-  height: 1em;
-  border-radius: 0.2em;
-  outline: 1px solid var(--checkbox-border);
-}
+  label:has(+ input[type="checkbox"])::after,
+  input[type="checkbox"] + label::before {
+    content: "";
+    transition: background-color 0.25s, outline-color 0.25s;
+    background-color: var(--checkbox-background);
+    display: inline-block;
+    position: relative;
+    top: 0.1em;
+    width: 1em;
+    height: 1em;
+    border-radius: 0.2em;
+    outline: 1px solid var(--checkbox-border);
+  }
 
-label::after {
-  margin-left: 0.4em;
-}
+  label:has(+ input[type="checkbox"]:checked)::after,
+  input[type="checkbox"]:checked + label::before {
+    background-color: var(--accent);
+  }
 
-label::before {
-  margin-right: 0.4em;
+  label:has(+ input[type="checkbox"]:focus)::after,
+  input[type="checkbox"]:focus + label::before {
+    outline-color: var(--accent);
+  }
 }
 
-body:not([data-disable-checkboxes]) label:has(+ input[type="checkbox"]:checked)::after,
-body:not([data-disable-checkboxes]) input[type="checkbox"]:checked + label::before {
-  background-color: var(--accent);
-}
+label {
+  &::after {
+    margin-left: 0.4em;
+  }
 
-body:not([data-disable-checkboxes]) label:has(+ input[type="checkbox"]:focus)::after,
-body:not([data-disable-checkboxes]) input[type="checkbox"]:focus + label::before {
-  outline-color: var(--accent);
+  &::before {
+    margin-right: 0.4em;
+  }
 }
 
 option {
@@ -202,18 +218,20 @@ textarea:disabled::placeholder {
   color: var(--gray);
 }
 
-a:link, a:visited {
-  color: var(--accent);
-  text-decoration: none;
-}
+a {
+  &:link, &:visited {
+    color: var(--accent);
+    text-decoration: none;
+  }
 
-a:hover {
-  text-decoration: underline;
-}
+  &:hover {
+    text-decoration: underline;
+  }
 
-a::selection {
-  -webkit-text-decoration-color: var(--text);
-  text-decoration-color: var(--text);
+  &::selection {
+    -webkit-text-decoration-color: var(--text);
+    text-decoration-color: var(--text);
+  }
 }
 
 i {
@@ -225,18 +243,19 @@ p {
   padding: 2px;
 }
 
-table.center {
-  margin-left: auto;
-  margin-right: auto;
-}
+table {
+  .center {
+    margin-left: auto;
+    margin-right: auto;
+  }
 
-table.bordered {
-  border-collapse: collapse;
-}
+  .bordered {
+    border-collapse: collapse;
 
-table.bordered th,
-table.bordered td {
-  border: 1.5px solid var(--table-border);
+    th, td {
+      border: 1.5px solid var(--table-border);
+    }
+  }
 }
 
 .user-badge {
@@ -351,32 +370,32 @@ body[data-bar-dir="v"][data-bar-pos^="l"] {
   position: fixed;
   gap: 0.5em;
   z-index: 999;
-}
 
-.icons a {
-  display: inline-block;
-}
-
-.icons svg {
-  height: 1.5em;
-  width: 1.5em;
-  display: inline-block;
-  fill: var(--text);
-  stroke: none;
-  cursor: pointer;
-}
+  a {
+    display: inline-block;
+  }
 
-.icons svg:active {
-  scale: 90%;
-}
+  svg {
+    height: 1.5em;
+    width: 1.5em;
+    display: inline-block;
+    fill: var(--text);
+    stroke: none;
+    cursor: pointer;
+
+    &:active {
+      scale: 90%;
+    }
+  }
 
-.icons .dot::after {
-  position: absolute;
-  display: inline-block;
-  width: 0.5em;
-  height: 0.5em;
-  border-radius: 0.25em;
-  transform: translate(-0.3em, 0);
-  background-color: var(--accent);
-  content: "";
+  .dot::after {
+    position: absolute;
+    display: inline-block;
+    width: 0.5em;
+    height: 0.5em;
+    border-radius: 0.25em;
+    transform: translate(-0.3em, 0);
+    background-color: var(--accent);
+    content: "";
+  }
 }
diff --git a/smiggins/static/css/contact.css b/smiggins/less/contact.less
similarity index 100%
rename from smiggins/static/css/contact.css
rename to smiggins/less/contact.less
diff --git a/smiggins/less/fonts.less b/smiggins/less/fonts.less
new file mode 100644
index 00000000..091afbbd
--- /dev/null
+++ b/smiggins/less/fonts.less
@@ -0,0 +1,69 @@
+:root {
+  --x: "{% load static %}";
+}
+
+/* Monospace font */
+@font-face {
+  font-family: 'Cousine';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("{% static '/font/cousine-normal.woff' %}") format('woff');
+}
+
+@font-face {
+  font-family: 'Cousine';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("{% static '/font/cousine-bold.woff' %}") format('woff');
+}
+
+@font-face {
+  font-family: 'Cousine';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("{% static '/font/cousine-italic.woff' %}") format('woff');
+}
+
+@font-face {
+  font-family: 'Cousine';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("{% static '/font/cousine-bolditalic.woff' %}") format('woff');
+}
+
+/* Normal font */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("{% static '/font/poppins-normal.woff' %}") format('woff');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("{% static '/font/poppins-bold.woff' %}") format('woff');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("{% static '/font/poppins-italic.woff' %}") format('woff');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("{% static '/font/poppins-bolditalic.woff' %}") format('woff');
+}
diff --git a/smiggins/static/css/home.css b/smiggins/less/home.less
similarity index 66%
rename from smiggins/static/css/home.css
rename to smiggins/less/home.less
index ebad7497..c49c506e 100644
--- a/smiggins/static/css/home.css
+++ b/smiggins/less/home.less
@@ -4,62 +4,63 @@ button:not(.bottom-content-icon) {
 
 .toggle-poll {
   cursor: pointer;
-}
 
-.toggle-poll:hover {
-  text-decoration: underline;
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .poll-bar-container {
   margin: 0.25em 0;
   border-radius: 0.5em;
   height: 2.2em;
-}
-
-.poll-bar-container:has(.poll-bar) {
-  background-color: var(--poll-voted-background);
-}
 
-.poll-bar-container:not(:has(.poll-bar)) {
-  background-color: var(--poll-no-vote-background);
-  cursor: pointer;
-}
-
-.poll-bar-container:not(:has(.poll-bar)):hover {
-  background-color: var(--poll-voted-background);
-}
+  &:has(.poll-bar) {
+    background-color: var(--poll-voted-background);
+  }
 
-.poll-bar-container .poll-text {
-  margin: 0.25em;
-  padding: 0.1em 0.35em;
-  border-radius: 0.3em;
-  position: absolute;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: calc(25.75em - (3em / 7));
-}
+  &:not(:has(.poll-bar)) {
+    background-color: var(--poll-no-vote-background);
+    cursor: pointer;
 
-.poll-bar-container .poll-bar {
-  color: transparent;
-  user-select: none;
-  position: absolute;
-  width: calc(26.95em - (3em / 7));
-}
+    &:hover {
+      background-color: var(--poll-voted-background);
+    }
+  }
 
-.poll-bar-container .poll-bar ~ .poll-text {
-  background-color: var(--poll-voted-background);
-}
+  .poll-text {
+    margin: 0.25em;
+    padding: 0.1em 0.35em;
+    border-radius: 0.3em;
+    position: absolute;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: calc(25.75em - (3em / 7));
+  }
 
-.poll-bar-container .poll-bar.voted div {
-  background-color: var(--accent);
+  .poll-bar {
+    color: transparent;
+    user-select: none;
+    position: absolute;
+    width: calc(26.95em - (3em / 7));
+
+    & ~ .poll-text {
+      background-color: var(--poll-voted-background);
+    }
+
+    &.voted div {
+      background-color: var(--accent);
+    }
+
+    div {
+      background-color: var(--accent-50);
+      border-radius: 0.5em;
+      height: 2.2em;
+    }
+  }
 }
 
-.poll-bar-container .poll-bar div {
-  background-color: var(--accent-50);
-  border-radius: 0.5em;
-  height: 2.2em;
-}
 
 .post-text {
   resize: none;
@@ -135,18 +136,19 @@ input.c-warning {
   text-overflow: ellipsis;
 }
 
-.quote-area .main-content {
-  -webkit-line-clamp: 5;
-  line-clamp: 5;
-}
+.quote-area {
+  .main-content {
+    -webkit-line-clamp: 5;
+    line-clamp: 5;
+  }
 
-.quote-area .post {
-  margin-bottom: 0.5em;
-  margin-top: 0.75em;
-  width: 23.5em;
+  .post {
+    margin-bottom: 0.5em;
+    margin-top: 0.75em;
+    width: 23.5em;
+  }
 }
 
-.post,
 .displ-name-container {
   width: calc(26.95em - (3em / 7));
 }
@@ -159,26 +161,23 @@ input.c-warning {
   display: inline-block;
   border-radius: calc(3em / 14);
   background-color: var(--post-background);
+  width: calc(26.95em - (3em / 7));
 }
 
 .upper-content {
   cursor: pointer;
-}
 
-.upper-content > * {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: left;
-  gap: 0.25em;
-}
+  & > * {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: left;
+    gap: 0.25em;
 
-.upper-content > * > div {
-  max-width: calc(100% - 3.25em);
-}
-
-.upper-lower-opacity {
-  color: var(--subtext);
+    & > div {
+      max-width: calc(100% - 3.25em);
+    }
+  }
 }
 
 .banner-pfp {
@@ -199,10 +198,10 @@ input.c-warning {
   border-radius: 0.2em;
   margin-bottom: 0.2em;
   cursor: pointer;
-}
 
-.c-warning summary:focus {
-  outline: none;
+  &:focus {
+    outline: none;
+  }
 }
 
 .bottom-content {
@@ -232,15 +231,16 @@ input.c-warning {
 .like-secondary {
   position: absolute;
   display: none;
-}
 
-.like-secondary:has(+ .like[data-liked="true"]) {
-  display: inline-block;
-  animation: like-anim 1s forwards ease-out;
+  &:has(+ .like[data-liked="true"]) {
+    display: inline-block;
+    animation: like-anim 1s forwards ease-out;
+  }
 }
 
 .upper-lower-opacity {
   display: block;
+  color: var(--subtext);
 }
 
 .displ-name-container {
@@ -248,10 +248,10 @@ input.c-warning {
   flex-direction: row-reverse;
   justify-content: left;
   align-items: flex-start;
-}
 
-.displ-name-container .spacing {
-  margin-left: auto;
+  .spacing {
+    margin-left: auto;
+  }
 }
 
 .bottom-content-icon svg,
@@ -352,6 +352,14 @@ button.bottom-content-icon {
   display: inline-block;
 }
 
+.more-button:focus + .more-container,
+.more-container:hover,
+.more-container:focus-within {
+  opacity: 1;
+  pointer-events: all;
+  user-select: auto;
+}
+
 .more-container {
   border: 2px solid var(--accent);
   background-color: var(--button-background);
@@ -365,47 +373,39 @@ button.bottom-content-icon {
   opacity: 0;
   pointer-events: none;
   user-select: none;
-}
 
-.more-button:focus + .more-container,
-.more-container:hover,
-.more-container:focus-within {
-  opacity: 1;
-  pointer-events: all;
-  user-select: auto;
-}
-
-.more-container > button {
-  display: block;
-  padding: 4px 12px 6px 6px;
-  font-size: 1em;
-  text-align: left;
-  max-width: 10em;
-  width: 100%;
-  cursor: pointer;
-  border: none;
-  background: none;
-}
-
-.more-container > button:hover {
-  background-color: var(--button-hover-background);
-}
-
-.more-container > button:focus {
-  border-color: var(--accent);
-  scale: 100% !important;
-}
-
-.more-container > button:first-child {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-
-.more-container > button:last-child {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.more-container > button:not(:first-child) {
-  border-top: 1px solid var(--button-border-color);
+  & > button {
+    display: block;
+    padding: 4px 12px 6px 6px;
+    font-size: 1em;
+    text-align: left;
+    max-width: 10em;
+    width: 100%;
+    cursor: pointer;
+    border: none;
+    background: none;
+
+    &:hover {
+      background-color: var(--button-hover-background);
+    }
+
+    &:focus {
+      border-color: var(--accent);
+      scale: 100% !important;
+    }
+
+    &:first-child {
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+
+    &:not(:first-child) {
+      border-top: 1px solid var(--button-border-color);
+    }
+  }
 }
diff --git a/smiggins/less/messages.less b/smiggins/less/messages.less
new file mode 100644
index 00000000..06ff62e0
--- /dev/null
+++ b/smiggins/less/messages.less
@@ -0,0 +1,102 @@
+.messages-container {
+  width: calc(100vw - 2em);
+  max-width: 40em;
+  background-color: var(--button-hover-background);
+  border-radius: 0.25em;
+  margin: 0 auto;
+  padding: 1em;
+  height: calc(90vh - 2em);
+
+  button {
+    margin: 0 auto;
+    margin-top: 1.5em;
+  }
+}
+
+.messages {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5em;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  height: calc(90vh - 8em - 9px);
+  margin-top: 2em;
+}
+
+.message {
+  width: calc(70% - 0.6em);
+  padding: 0 0.5em;
+
+  div {
+    display: inline-block;
+    min-width: 0.5em;
+    padding: 0.3em 0.6em;
+    word-break: break-word;
+  }
+
+  &.receive {
+    padding-right: 30%;
+    text-align: left;
+
+    div {
+      background-color: var(--table-border);
+      border-radius: 0.6em 0.6em 0.6em 0;
+    }
+  }
+
+  &.send {
+    padding-left: 30%;
+    text-align: right;
+
+    div {
+      text-align: left;
+      background-color: var(--accent);
+      color: var(--background);
+      border-radius: 0.6em 0.6em 0 0.6em;
+
+      &::selection {
+        background-color: var(--gray);
+        color: var(--background);
+      }
+
+      & > a {
+        color: var(--background);
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+
+.header-container {
+  position: absolute;
+  width: 90vw;
+  left: 5vw;
+  top: 1vh;
+
+  h1 {
+    filter: drop-shadow(0 0 5px var(--background))
+            drop-shadow(0 0 5px var(--background))
+            drop-shadow(0 0 3px var(--background));
+  }
+}
+
+#your-mom {
+  height: 3em;
+  width: calc(100vw - 2em);
+  max-width: 40em;
+  margin-top: 1em;
+  resize: none;
+}
+
+.timestamp {
+  display: block;
+  font-size: 0.7em;
+  color: var(--text);
+}
+
+@media screen and (max-width: 565px) {
+  #your-mom {
+    width: calc(90vw - (4em / 7) - 17px);
+  }
+}
diff --git a/smiggins/static/css/notifications.css b/smiggins/less/notifications.less
similarity index 56%
rename from smiggins/static/css/notifications.css
rename to smiggins/less/notifications.less
index 9d179199..cce1a0b6 100644
--- a/smiggins/static/css/notifications.css
+++ b/smiggins/less/notifications.less
@@ -5,9 +5,9 @@ hr {
 
 .post button {
   cursor: default;
-}
 
-.post button:focus {
-  scale: 100%;
-  outline: none !important;
+  &:focus {
+    scale: 100%;
+    outline: none !important;
+  }
 }
diff --git a/smiggins/static/css/post.css b/smiggins/less/post.less
similarity index 100%
rename from smiggins/static/css/post.css
rename to smiggins/less/post.less
diff --git a/smiggins/static/css/settings.css b/smiggins/less/settings.less
similarity index 86%
rename from smiggins/static/css/settings.css
rename to smiggins/less/settings.less
index fac7951e..c30382e1 100644
--- a/smiggins/static/css/settings.css
+++ b/smiggins/less/settings.less
@@ -22,10 +22,10 @@ hr {
   height: 50px;
   display: inline-block;
   border-radius: 0.2em;
-}
 
-#banner.gradient {
-  background: linear-gradient(90deg, var(--banner), var(--banner-two));
+  &.gradient {
+    background: linear-gradient(90deg, var(--banner), var(--banner-two));
+  }
 }
 
 .post {
diff --git a/smiggins/static/css/user.css b/smiggins/less/user.less
similarity index 90%
rename from smiggins/static/css/user.css
rename to smiggins/less/user.less
index 84661e21..01d777d9 100644
--- a/smiggins/static/css/user.css
+++ b/smiggins/less/user.less
@@ -4,10 +4,10 @@
   width: 35em;
   height: 6em;
   background-color: var(--banner);
-}
 
-#banner.gradient {
-  background: linear-gradient(90deg, var(--banner), var(--banner-two));
+  .gradient {
+    background: linear-gradient(90deg, var(--banner), var(--banner-two));
+  }
 }
 
 #username-main {
diff --git a/smiggins/less/user_lists.less b/smiggins/less/user_lists.less
new file mode 100644
index 00000000..1fe1c1d5
--- /dev/null
+++ b/smiggins/less/user_lists.less
@@ -0,0 +1,16 @@
+.lists-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  & > div {
+    width: 100%;
+    max-width: 25em;
+    margin: 0 3em;
+  }
+
+  .post {
+    width: 22.125em;
+  }
+}
diff --git a/smiggins/static/css/font/cousine-bold.woff2 b/smiggins/static/css/font/cousine-bold.woff2
deleted file mode 100644
index fee467d6..00000000
Binary files a/smiggins/static/css/font/cousine-bold.woff2 and /dev/null differ
diff --git a/smiggins/static/css/font/cousine-bolditalic.woff2 b/smiggins/static/css/font/cousine-bolditalic.woff2
deleted file mode 100644
index 954d1cb9..00000000
Binary files a/smiggins/static/css/font/cousine-bolditalic.woff2 and /dev/null differ
diff --git a/smiggins/static/css/font/cousine-italic.woff2 b/smiggins/static/css/font/cousine-italic.woff2
deleted file mode 100644
index 9f9f5e76..00000000
Binary files a/smiggins/static/css/font/cousine-italic.woff2 and /dev/null differ
diff --git a/smiggins/static/css/font/cousine-normal.woff2 b/smiggins/static/css/font/cousine-normal.woff2
deleted file mode 100644
index 0e606a94..00000000
Binary files a/smiggins/static/css/font/cousine-normal.woff2 and /dev/null differ
diff --git a/smiggins/static/css/font/poppins-bold.woff2 b/smiggins/static/css/font/poppins-bold.woff2
deleted file mode 100644
index dd65c647..00000000
Binary files a/smiggins/static/css/font/poppins-bold.woff2 and /dev/null differ
diff --git a/smiggins/static/css/font/poppins-bolditalic.woff2 b/smiggins/static/css/font/poppins-bolditalic.woff2
deleted file mode 100644
index 02e86a74..00000000
Binary files a/smiggins/static/css/font/poppins-bolditalic.woff2 and /dev/null differ
diff --git a/smiggins/static/css/font/poppins-italic.woff2 b/smiggins/static/css/font/poppins-italic.woff2
deleted file mode 100644
index 7d2a6eb1..00000000
Binary files a/smiggins/static/css/font/poppins-italic.woff2 and /dev/null differ
diff --git a/smiggins/static/css/font/poppins-normal.woff2 b/smiggins/static/css/font/poppins-normal.woff2
deleted file mode 100644
index b6cb8f04..00000000
Binary files a/smiggins/static/css/font/poppins-normal.woff2 and /dev/null differ
diff --git a/smiggins/static/css/fonts.css b/smiggins/static/css/fonts.css
deleted file mode 100644
index 4aa2d21e..00000000
--- a/smiggins/static/css/fonts.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/* Monospace font */
-@font-face {
-  font-family: 'Cousine';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("/static/css/font/cousine-normal.woff") format('woff'),
-       url("/static/css/font/cousine-normal.woff2") format('woff2');
-}
-
-@font-face {
-  font-family: 'Cousine';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("/static/css/font/cousine-bold.woff") format('woff'),
-       url("/static/css/font/cousine-bold.woff2") format('woff2');
-}
-
-@font-face {
-  font-family: 'Cousine';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url("/static/css/font/cousine-italic.woff") format('woff'),
-       url("/static/css/font/cousine-italic.woff2") format('woff2');
-}
-
-@font-face {
-  font-family: 'Cousine';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url("/static/css/font/cousine-bolditalic.woff") format('woff'),
-       url("/static/css/font/cousine-bolditalic.woff2") format('woff2');
-}
-
-/* Normal font */
-@font-face {
-  font-family: 'Poppins';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("/static/css/font/poppins-normal.woff") format('woff'),
-       url("/static/css/font/poppins-normal.woff2") format('woff2');
-}
-
-@font-face {
-  font-family: 'Poppins';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("/static/css/font/poppins-bold.woff") format('woff'),
-       url("/static/css/font/poppins-bold.woff2") format('woff2');
-}
-
-@font-face {
-  font-family: 'Poppins';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url("/static/css/font/poppins-italic.woff") format('woff'),
-       url("/static/css/font/poppins-italic.woff2") format('woff2');
-}
-
-@font-face {
-  font-family: 'Poppins';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url("/static/css/font/poppins-bolditalic.woff") format('woff'),
-       url("/static/css/font/poppins-bolditalic.woff2") format('woff2');
-}
diff --git a/smiggins/static/css/messages.css b/smiggins/static/css/messages.css
deleted file mode 100644
index f72b0ab3..00000000
--- a/smiggins/static/css/messages.css
+++ /dev/null
@@ -1,101 +0,0 @@
-.messages-container {
-  width: calc(100vw - 2em);
-  max-width: 40em;
-  background-color: var(--button-hover-background);
-  border-radius: 0.25em;
-  margin: 0 auto;
-  padding: 1em;
-  height: calc(90vh - 2em);
-}
-
-.messages-container button {
-  margin: 0 auto;
-  margin-top: 1.5em;
-}
-
-.messages {
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 0.5em;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  height: calc(90vh - 8em - 9px);
-  margin-top: 2em;
-}
-
-.message {
-  width: calc(70% - 0.6em);
-  padding: 0 0.5em;
-}
-
-.message div {
-  display: inline-block;
-  min-width: 0.5em;
-  padding: 0.3em 0.6em;
-  word-break: break-word;
-}
-
-.message.receive {
-  padding-right: 30%;
-  text-align: left;
-}
-
-.message.receive div {
-  background-color: var(--table-border);
-  border-radius: 0.6em 0.6em 0.6em 0;
-}
-
-.message.send {
-  padding-left: 30%;
-  text-align: right;
-}
-
-.message.send div {
-  text-align: left;
-  background-color: var(--accent);
-  color: var(--background);
-  border-radius: 0.6em 0.6em 0 0.6em;
-}
-
-.message.send div::selection {
-  background-color: var(--gray);
-  color: var(--background);
-}
-
-.message.send div > a {
-  color: var(--background);
-  text-decoration: underline;
-}
-
-.header-container {
-  position: absolute;
-  width: 90vw;
-  left: 5vw;
-  top: 1vh;
-}
-
-.header-container h1 {
-  filter: drop-shadow(0 0 5px var(--background))
-          drop-shadow(0 0 5px var(--background))
-          drop-shadow(0 0 3px var(--background));
-}
-
-#your-mom {
-  height: 3em;
-  width: calc(100vw - 2em);
-  max-width: 40em;
-  margin-top: 1em;
-  resize: none;
-}
-
-.timestamp {
-  display: block;
-  font-size: 0.7em;
-  color: var(--text);
-}
-
-@media screen and (max-width: 565px) {
-  #your-mom {
-    width: calc(90vw - (4em / 7) - 17px);
-  }
-}
diff --git a/smiggins/static/css/user_lists.css b/smiggins/static/css/user_lists.css
deleted file mode 100644
index d4ee249d..00000000
--- a/smiggins/static/css/user_lists.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.lists-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.lists-container > div {
-  width: 100%;
-  max-width: 25em;
-  margin: 0 3em;
-}
-
-.lists-container .post {
-  width: 22.125em;
-}
diff --git a/smiggins/static/css/font/cousine-bold.woff b/smiggins/static/font/cousine-bold.woff
similarity index 100%
rename from smiggins/static/css/font/cousine-bold.woff
rename to smiggins/static/font/cousine-bold.woff
diff --git a/smiggins/static/css/font/cousine-bolditalic.woff b/smiggins/static/font/cousine-bolditalic.woff
similarity index 100%
rename from smiggins/static/css/font/cousine-bolditalic.woff
rename to smiggins/static/font/cousine-bolditalic.woff
diff --git a/smiggins/static/css/font/cousine-italic.woff b/smiggins/static/font/cousine-italic.woff
similarity index 100%
rename from smiggins/static/css/font/cousine-italic.woff
rename to smiggins/static/font/cousine-italic.woff
diff --git a/smiggins/static/css/font/cousine-normal.woff b/smiggins/static/font/cousine-normal.woff
similarity index 100%
rename from smiggins/static/css/font/cousine-normal.woff
rename to smiggins/static/font/cousine-normal.woff
diff --git a/smiggins/static/css/font/poppins-bold.woff b/smiggins/static/font/poppins-bold.woff
similarity index 100%
rename from smiggins/static/css/font/poppins-bold.woff
rename to smiggins/static/font/poppins-bold.woff
diff --git a/smiggins/static/css/font/poppins-bolditalic.woff b/smiggins/static/font/poppins-bolditalic.woff
similarity index 100%
rename from smiggins/static/css/font/poppins-bolditalic.woff
rename to smiggins/static/font/poppins-bolditalic.woff
diff --git a/smiggins/static/css/font/poppins-italic.woff b/smiggins/static/font/poppins-italic.woff
similarity index 100%
rename from smiggins/static/css/font/poppins-italic.woff
rename to smiggins/static/font/poppins-italic.woff
diff --git a/smiggins/static/css/font/poppins-normal.woff b/smiggins/static/font/poppins-normal.woff
similarity index 100%
rename from smiggins/static/css/font/poppins-normal.woff
rename to smiggins/static/font/poppins-normal.woff
diff --git a/smiggins/static/ts/check-logged-out.ts b/smiggins/static/ts/check-logged-out.ts
deleted file mode 100644
index 9c5f5516..00000000
--- a/smiggins/static/ts/check-logged-out.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-(function(): void {
-  let accounts: string[][] = JSON.parse(localStorage.getItem("acc-switcher") || "[]");
-  let username: string = localStorage.getItem("username");
-
-  if (username && accounts.length) {
-    let set: boolean = false;
-
-    if (location.search != "?from=token") {
-      for (const account of accounts) {
-        if (!set && account[0] == username && document.cookie.split(/\btoken=/)[1].split(";")[0] != account[1]) {
-          setCookie("token", account[1]);
-          set = true;
-        }
-      }
-    }
-
-    localStorage.setItem("acc-switcher", JSON.stringify(accounts));
-
-    if (!set) {
-      setCookie("token", accounts[0][1]);
-      localStorage.setItem("username", accounts[0][0]);
-    }
-
-    location.href = location.href;
-  }
-})();
diff --git a/smiggins/templates/admin.html b/smiggins/templates/admin.html
index ca8c4d86..438adc87 100644
--- a/smiggins/templates/admin.html
+++ b/smiggins/templates/admin.html
@@ -1,13 +1,12 @@
 {% extends "base.html" %}
 {% load smiggins_custom %}
-{% load static %}
 
 {% block title %}
   {{ lang.admin.title }} - {{ SITE_NAME }} {{ VERSION }}
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static "/css/admin.css" %}?v={{ VERSION }}">
+  <style>{% include "css/admin.css" %}</style>
 
   <script>
     const adminLevel = {{ LEVEL }};
@@ -133,5 +132,5 @@ <h3><label for="level-identifier">{{ lang.admin.permissions.title }}</label></h3
     <div id="debug"><button id="debug-button">{{ lang.admin.logs.button }}</button></div>
   {% endif %}
 
-  <script src="{% static '/js/admin.js' %}?v={{ VERSION }}"></script>
+  <script>{% include "js/admin.js" %}</script>
 {% endblock %}
diff --git a/smiggins/templates/base.html b/smiggins/templates/base.html
index afac8d65..9da1db35 100644
--- a/smiggins/templates/base.html
+++ b/smiggins/templates/base.html
@@ -115,6 +115,15 @@
     <meta property="og:type" content="website">
     <meta name="twitter:card" content="summary_large_image">
 
+    <link rel="preload" href="{% static '/font/cousine-normal.woff' %}" as="font" type="font/woff" crossorigin>
+    <link rel="preload" href="{% static '/font/cousine-bold.woff' %}" as="font" type="font/woff" crossorigin>
+    <link rel="preload" href="{% static '/font/cousine-italic.woff' %}" as="font" type="font/woff" crossorigin>
+    <link rel="preload" href="{% static '/font/cousine-bolditalic.woff' %}" as="font" type="font/woff" crossorigin>
+    <link rel="preload" href="{% static '/font/poppins-normal.woff' %}" as="font" type="font/woff" crossorigin>
+    <link rel="preload" href="{% static '/font/poppins-bold.woff' %}" as="font" type="font/woff" crossorigin>
+    <link rel="preload" href="{% static '/font/poppins-italic.woff' %}" as="font" type="font/woff" crossorigin>
+    <link rel="preload" href="{% static '/font/poppins-bolditalic.woff' %}" as="font" type="font/woff" crossorigin>
+
     {% block meta %}
       <meta name="author" content="{{ SITE_NAME }}">
       <meta name="description" content="{{ VERSION }}">
@@ -126,80 +135,26 @@
       <meta name="twitter:description" content="{{ VERSION }}">
     {% endblock %}
 
-    <link rel="stylesheet" href="{% static "/css/base.css" %}?v={{ VERSION }}">
-
-    <script src="{% static "/js/linkify/linkify.min.js" %}?v={{ VERSION }}"></script>
-    <script src="{% static "/js/linkify/html.min.js" %}?v={{ VERSION }}"></script>
-    <script src="{% static "/js/linkify/mentions.js" %}?v={{ VERSION }}"></script>
-
-    {% if ENABLE_HASHTAGS == "true" %}
-      <script src="{% static "/js/linkify/hashtags.js" %}?v={{ VERSION }}"></script>
-    {% endif %}
+    <style>
+      {% include "css/fonts.css" %}
+      {% include "css/base.css" %}
+    </style>
 
-    <script src="{% static "/js/base.js" %}?v={{ VERSION }}"></script>
+    <script>
+      {% include "js/linkify/linkify.min.js" %}
+      {% include "js/linkify/html.min.js" %}
+      {% include "js/linkify/mentions.js" %}
+      {% if ENABLE_HASHTAGS == "true" %}
+        {% include "js/linkify/hashtags.js" %}
+      {% endif %}
+      {% include "js/base.js" %}
+    </script>
 
     {% block head %}{% endblock %}
   </head>
 
   <body {% block body_head %}{% endblock %}>
-    <script>
-      let favicon = document.createElement("link");
-      let oldFavicon = !!localStorage.getItem("old-favicon");
-
-      // theme normalization when set to automatic
-      function autoSetFavicon() {
-        if (oldFavicon) { return };
-
-        let obj;
-        if (_autoMM.matches) {
-          obj = _autoColors.light;
-        } else {
-          obj = _autoColors.dark;
-        }
-
-        favicon.href = `/favicon-${obj.background}-${obj.background_alt}-${obj.accents[validColors.indexOf(localStorage.getItem("color")) == -1 ? "mauve" : localStorage.getItem("color")]}`.replaceAll("#", "");
-      }
-
-      function autoInit() {
-        autoEnabled = true;
-        autoSetFavicon();
-        _autoMM.addEventListener("change", autoSetFavicon);
-      }
-
-      function autoCancel() {
-        autoEnabled = false;
-        _autoMM.removeEventListener("change", autoSetFavicon);
-      }
-
-      function setOldFavicon() {
-        favicon.href = "{% static "/img/old_favicon.ico" %}?v={{ VERSION }}";
-      }
-
-      function setGenericFavicon() {
-        favicon.href = `/favicon-${themeObject.colors.background}-${themeObject.colors.button_background}-${themeObject.colors.accent[validColors.indexOf(localStorage.getItem("color")) == -1 ? "mauve" : localStorage.getItem("color")]}`.replaceAll("#", "");
-      }
-
-      let autoEnabled = false;
-      let _autoMM = matchMedia("(prefers-color-scheme: light)");
-
-      if ("{{ THEME|escapejs }}" == "auto") {
-        autoInit();
-      }
-
-      // set proper favicon
-      favicon.rel = "icon";
-      favicon.type = "image/png";
-
-      if (oldFavicon) {
-        setOldFavicon()
-      } else if (autoEnabled) {
-        autoInit();
-      } else {
-        favicon.href = `/favicon-${themeObject.colors.background}-${themeObject.colors.button_background}-${themeObject.colors.accent[validColors.indexOf(localStorage.getItem("color")) == -1 ? "mauve" : localStorage.getItem("color")]}`.replaceAll("#", "");
-      }
-
-      document.head.append(favicon);
-    </script>
+    <script>{% include "js/favicon.js" %}</script>
 
     {% block body %}{% endblock %}
 
@@ -213,6 +168,10 @@ <h2>{{ lang.noscript.subtitle }}</h2>
       </ul>
     </noscript>
 
-    <script src="{% static "/js/base-footer.js" %}?v={{ VERSION }}"></script>
+    <script>{% include "js/base-footer.js" %}</script>
+    <div class="fake-hidden">
+      <!-- Ensure all fonts are preloaded -->
+       A<b>A</b><i>A<b>A</b></i>
+       <span class="mono">A<b>A</b><i>A<b>A</b></i></span>
   </body>
 </html>
diff --git a/smiggins/templates/contact.html b/smiggins/templates/contact.html
index f3dd1b98..356380e3 100644
--- a/smiggins/templates/contact.html
+++ b/smiggins/templates/contact.html
@@ -17,7 +17,7 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/contact.css' %}?v={{ VERSION }}">
+  <style>{% include "css/contact.css" %}</style>
 {% endblock %}
 
 {% block body %}
diff --git a/smiggins/templates/credits.html b/smiggins/templates/credits.html
index 616bfaa8..3d593371 100644
--- a/smiggins/templates/credits.html
+++ b/smiggins/templates/credits.html
@@ -17,7 +17,7 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/contact.css' %}?v={{ VERSION }}">
+  <style>{% include "css/contact.css" %}</style>
 {% endblock %}
 
 {% block body %}
diff --git a/smiggins/templates/css/admin.css b/smiggins/templates/css/admin.css
new file mode 100644
index 00000000..f25350e2
--- /dev/null
+++ b/smiggins/templates/css/admin.css
@@ -0,0 +1 @@
+h3{margin-bottom:0}hr{max-width:25em}p{margin-bottom:.25em}.actions-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4em}.admin-logs{margin:0 auto;max-width:calc(100vw - 2em)}.admin-logs th{padding:.3em}.admin-logs td{padding:.3em;text-align:left}
\ No newline at end of file
diff --git a/smiggins/templates/css/base.css b/smiggins/templates/css/base.css
new file mode 100644
index 00000000..f7109c1e
--- /dev/null
+++ b/smiggins/templates/css/base.css
@@ -0,0 +1 @@
+::selection{background-color:var(--accent-50);color:var(--text)}:focus{outline:calc(2em / 14) var(--accent) solid}::-webkit-scrollbar{display:none}body{background-color:var(--background);color:var(--text);font-family:Poppins,Arial;padding:5vh 0;text-align:center;font-size:14px;margin:0;overflow-x:hidden;word-wrap:break-word}@media screen and (min-width:1025px){body{font-size:16px}}@media screen and (max-width:565px){body{font-size:18px;padding:5vh 3vw}}hr{border-color:var(--accent)}small{display:block;font-size:.7em;color:var(--subtext)}noscript{display:block;margin-bottom:10vh}noscript h1,noscript h2{color:var(--red)}noscript ul{display:inline-block;text-align:left}button{background-color:var(--button-background);color:var(--text);padding:5px 7px;border:none;border-radius:999em;cursor:pointer;font-size:.8em;transition:color .15s,scale .15s,margin .15s,background-color .15s}button:disabled{opacity:60%;pointer-events:none}button:active{scale:95%;background-color:var(--button-hover-background)}button:hover{background-color:var(--button-hover-background)}button.inverted{background-color:var(--button-inverted-background)}button.primary,button.primary:hover{background-color:var(--accent);color:var(--background);border-color:var(--button-border);outline-color:var(--button-border)}.fake-input{display:inline-block;text-align:left;max-width:200px;width:90vw;cursor:text}.fake-hidden{display:block;user-select:none;pointer-events:none;opacity:0;height:0;width:0;position:absolute;top:0;left:0;text-wrap:nowrap}.fake-input,input:not([type=checkbox]),option,select,textarea{background-color:var(--input-background);color:var(--text);border:1.5px solid var(--input-border);margin:-1.5px;border-radius:2px;padding:5px 7px;margin:3px;font-size:.8em;resize:vertical}body:not([data-disable-checkboxes]) input[type=checkbox]+label,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox]){cursor:pointer}body:not([data-disable-checkboxes]) input[type=checkbox]:has(+ label),body:not([data-disable-checkboxes]) label+input[type=checkbox]{width:0;height:0;opacity:0;margin:0;padding:0;border:none;outline:0}body:not([data-disable-checkboxes]) input[type=checkbox]+label::before,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox])::after{content:"";transition:background-color .25s,outline-color .25s;background-color:var(--checkbox-background);display:inline-block;position:relative;top:.1em;width:1em;height:1em;border-radius:.2em;outline:1px solid var(--checkbox-border)}body:not([data-disable-checkboxes]) input[type=checkbox]:checked+label::before,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox]:checked)::after{background-color:var(--accent)}body:not([data-disable-checkboxes]) input[type=checkbox]:focus+label::before,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox]:focus)::after{outline-color:var(--accent)}label::after{margin-left:.4em}label::before{margin-right:.4em}option{font-family:Poppins,sans-serif;font-size:1.1em}input:not([type=checkbox]),select,textarea{font-family:Poppins}input:not([type=checkbox])::placeholder,textarea::placeholder{color:var(--subtext);opacity:100%}input:not([type=checkbox]):disabled,textarea:disabled{color:var(--subtext);opacity:1;pointer-events:none}input:not([type=checkbox]):disabled::placeholder,textarea:disabled::placeholder{color:var(--gray)}a:link,a:visited{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}a::selection{-webkit-text-decoration-color:var(--text);text-decoration-color:var(--text)}i{opacity:80%}p{margin:0;padding:2px}table .center{margin-left:auto;margin-right:auto}table .bordered{border-collapse:collapse}table .bordered td,table .bordered th{border:1.5px solid var(--table-border)}.user-badge{width:1.2em;height:1.2em;display:inline-block;position:relative;top:.2em;fill:var(--text)}.text:not(svg){color:var(--text)}.accent:not(svg){color:var(--accent)}.red:not(svg){color:var(--red)}.text svg,svg.text{fill:var(--text)}.accent svg,svg.accent{fill:var(--accent)}.red svg,svg.red{fill:var(--red)!important}.inline-block{display:inline-block}.nowrap{white-space:nowrap}.left{text-align:left}.center{text-align:center}.right{text-align:right}.hidden{display:none}.mono{font-family:Cousine}.no-underline{text-decoration:none!important}body:not([data-bar-pos]) .icons,body[data-bar-pos^="u"] .icons{top:1em}body[data-bar-pos^="l"] .icons{bottom:1em}body:not([data-bar-pos]) .icons,body[data-bar-pos$="l"] .icons{left:1em}body[data-bar-pos$="r"] .icons{right:1em}body:not([data-bar-dir]) .icons,body[data-bar-dir="v"] .icons{flex-direction:column}body[data-bar-dir="h"] .icons{flex-direction:row}body[data-bar-dir="h"][data-bar-pos$="r"]{flex-direction:row-reverse}body[data-bar-dir="v"][data-bar-pos^="l"]{flex-direction:column-reverse}.icons{filter:drop-shadow(0 0 5px var(--background)) drop-shadow(0 0 5px var(--background)) drop-shadow(0 0 3px var(--background));display:flex;flex-wrap:wrap;position:fixed;gap:.5em;z-index:999}.icons a{display:inline-block}.icons svg{height:1.5em;width:1.5em;display:inline-block;fill:var(--text);stroke:none;cursor:pointer}.icons svg:active{scale:90%}.icons .dot::after{position:absolute;display:inline-block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-.3em,0);background-color:var(--accent);content:""}
\ No newline at end of file
diff --git a/smiggins/templates/css/contact.css b/smiggins/templates/css/contact.css
new file mode 100644
index 00000000..fbe23844
--- /dev/null
+++ b/smiggins/templates/css/contact.css
@@ -0,0 +1 @@
+ul{display:inline-block;margin-top:0}li{text-align:left;list-style-type:disc}h3{margin-bottom:0}
\ No newline at end of file
diff --git a/smiggins/templates/css/fonts.css b/smiggins/templates/css/fonts.css
new file mode 100644
index 00000000..861c0de4
--- /dev/null
+++ b/smiggins/templates/css/fonts.css
@@ -0,0 +1 @@
+:root{--x:"{% load static %}"}@font-face{font-family:Cousine;font-style:normal;font-weight:400;font-display:swap;src:url("{% static '/font/cousine-normal.woff' %}") format('woff')}@font-face{font-family:Cousine;font-style:normal;font-weight:700;font-display:swap;src:url("{% static '/font/cousine-bold.woff' %}") format('woff')}@font-face{font-family:Cousine;font-style:italic;font-weight:400;font-display:swap;src:url("{% static '/font/cousine-italic.woff' %}") format('woff')}@font-face{font-family:Cousine;font-style:italic;font-weight:700;font-display:swap;src:url("{% static '/font/cousine-bolditalic.woff' %}") format('woff')}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url("{% static '/font/poppins-normal.woff' %}") format('woff')}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url("{% static '/font/poppins-bold.woff' %}") format('woff')}@font-face{font-family:Poppins;font-style:italic;font-weight:400;font-display:swap;src:url("{% static '/font/poppins-italic.woff' %}") format('woff')}@font-face{font-family:Poppins;font-style:italic;font-weight:700;font-display:swap;src:url("{% static '/font/poppins-bolditalic.woff' %}") format('woff')}
\ No newline at end of file
diff --git a/smiggins/templates/css/home.css b/smiggins/templates/css/home.css
new file mode 100644
index 00000000..7809892f
--- /dev/null
+++ b/smiggins/templates/css/home.css
@@ -0,0 +1 @@
+button:not(.bottom-content-icon){min-width:5em}.toggle-poll{cursor:pointer}.toggle-poll:hover{text-decoration:underline}.poll-bar-container{margin:.25em 0;border-radius:.5em;height:2.2em}.poll-bar-container:has(.poll-bar){background-color:var(--poll-voted-background)}.poll-bar-container:not(:has(.poll-bar)){background-color:var(--poll-no-vote-background);cursor:pointer}.poll-bar-container:not(:has(.poll-bar)):hover{background-color:var(--poll-voted-background)}.poll-bar-container .poll-text{margin:.25em;padding:.1em .35em;border-radius:.3em;position:absolute;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:calc(25.75em - (3em / 7))}.poll-bar-container .poll-bar{color:transparent;user-select:none;position:absolute;width:calc(26.95em - (3em / 7))}.poll-bar-container .poll-bar~.poll-text{background-color:var(--poll-voted-background)}.poll-bar-container .poll-bar.voted div{background-color:var(--accent)}.poll-bar-container .poll-bar div{background-color:var(--accent-50);border-radius:.5em;height:2.2em}.post-text{resize:none;width:calc(32em - 10px);position:relative;top:2.6em;height:9em;transition:height .25s}input.c-warning{width:calc(32em - 10px);position:relative;top:2.6em}.quote-visibility{width:calc(27em - 10px);top:2em;position:relative;text-align:center}#post-text{width:35em;resize:none;height:9em}#post{position:relative;bottom:calc(2px + 2.6em);left:calc(15em + 3px)}.post-button{position:relative;left:calc(3px + 27em);bottom:2px}.cancel-button{position:relative;left:calc(5px + 21.5em);bottom:calc(2px + 2.5em)}#toggle-poll{position:relative;left:calc(15em + 3px);bottom:calc(2px + 7.1em)}#poll{position:relative;bottom:3em}#c-warning,#poll input{width:35em}.main-content{word-break:break-word;display:-webkit-box;-webkit-line-clamp:7;line-clamp:7;-webkit-box-orient:vertical;-ms-box-orient:vertical;-moz-box-orient:vertical;overflow-y:hidden;text-overflow:ellipsis}.quote-area .main-content{-webkit-line-clamp:5;line-clamp:5}.quote-area .post{margin-bottom:.5em;margin-top:.75em;width:23.5em}.displ-name-container{width:calc(26.95em - (3em / 7))}.post{border:calc(3em / 14) var(--accent-50) solid;padding:1.25em;margin-bottom:1.75em;text-align:left;display:inline-block;border-radius:calc(3em / 14);background-color:var(--post-background);width:calc(26.95em - (3em / 7))}.upper-content{cursor:pointer}.upper-content>*{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:left;gap:.25em}.upper-content>*>div{max-width:calc(100% - 3.25em)}.banner-pfp{border-radius:50%;background-image:linear-gradient(90deg,var(--color-one),var(--color-two))}.pronouns,.timestamp,.username{display:inline-block}.c-warning summary{background-color:var(--content-warning-background);text-align:center;padding:.4em .2em;border-radius:.2em;margin-bottom:.2em;cursor:pointer}.c-warning summary:focus{outline:0}.bottom-content{text-align:center}@keyframes like-anim{0%{translate:0 0}20%{opacity:100%}40%{rotate:0}100%{opacity:0;rotate:30deg;translate:-0.1em 3em}}.like-secondary{position:absolute;display:none}.like-secondary:has(+ .like[data-liked=true]){display:inline-block;animation:like-anim 1s forwards ease-out}.upper-lower-opacity{display:block;color:var(--subtext)}.displ-name-container{display:flex;flex-direction:row-reverse;justify-content:left;align-items:flex-start}.displ-name-container .spacing{margin-left:auto}.bottom-content-icon svg,svg.bottom-content-icon{width:1.25em;height:1.25em;display:inline-block;position:relative;top:.2em;fill:var(--text)}button.bottom-content-icon{white-space:nowrap;cursor:pointer;display:inline-block;background-color:unset;font-size:1rem;border-radius:0;padding:0;margin:0;width:unset;height:unset}.comment-icon{padding-right:.3em}.like-secondary svg,.like[data-liked=true] svg{fill:var(--accent)}.bottom-spacing{display:inline-block;width:3em}@media screen and (max-width:565px){#c-warning,#poll input,#post-text{width:calc(94vw - (2em / 7) - 17px)}.post-text,input.c-warning{width:calc(94vw - (2em / 7) - 90px)}.quote-visibility{width:calc(94vw - (-8em / 7) - 90px)}.displ-name-container,.post{width:calc(94vw - 3.5em - (3em / 7))}.poll-bar{width:calc(94vw - 3.5em - (3em / 7))!important}.poll-bar-container .poll-text{max-width:calc(94vw - 4.7em - (3em / 7))}#post,#toggle-poll{left:calc(47vw - 2.5em - 5px)}.post-button{left:calc(97vw - 11.5em - 5px)}.cancel-button{left:calc(97vw - 17em - 2px)}.quote-area .post{width:calc(94vw - (2em / 7) - 120px)!important}.bottom-spacing{width:1.5em}}@media screen and (max-width:385px){.bottom-spacing{width:.5em}}.more-button{display:inline-block}.more-button:focus+.more-container,.more-container:focus-within,.more-container:hover{opacity:1;pointer-events:all;user-select:auto}.more-container{border:2px solid var(--accent);background-color:var(--button-background);border-radius:4px;position:absolute;z-index:1;min-width:5em;display:inline-block;translate:calc(-100% - 1.6em) calc(-100% + 1.2em + 8px);opacity:0;pointer-events:none;user-select:none}.more-container>button{display:block;padding:4px 12px 6px 6px;font-size:1em;text-align:left;max-width:10em;width:100%;cursor:pointer;border:none;background:0 0}.more-container>button:hover{background-color:var(--button-hover-background)}.more-container>button:focus{border-color:var(--accent);scale:100%!important}.more-container>button:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.more-container>button:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.more-container>button:not(:first-child){border-top:1px solid var(--button-border-color)}
\ No newline at end of file
diff --git a/smiggins/templates/css/messages.css b/smiggins/templates/css/messages.css
new file mode 100644
index 00000000..2cc24f3d
--- /dev/null
+++ b/smiggins/templates/css/messages.css
@@ -0,0 +1 @@
+.messages-container{width:calc(100vw - 2em);max-width:40em;background-color:var(--button-hover-background);border-radius:.25em;margin:0 auto;padding:1em;height:calc(90vh - 2em)}.messages-container button{margin:0 auto;margin-top:1.5em}.messages{display:flex;flex-direction:column-reverse;gap:.5em;overflow-x:hidden;overflow-y:scroll;height:calc(90vh - 8em - 9px);margin-top:2em}.message{width:calc(70% - .6em);padding:0 .5em}.message div{display:inline-block;min-width:.5em;padding:.3em .6em;word-break:break-word}.message.receive{padding-right:30%;text-align:left}.message.receive div{background-color:var(--table-border);border-radius:.6em .6em .6em 0}.message.send{padding-left:30%;text-align:right}.message.send div{text-align:left;background-color:var(--accent);color:var(--background);border-radius:.6em .6em 0 .6em}.message.send div::selection{background-color:var(--gray);color:var(--background)}.message.send div>a{color:var(--background);text-decoration:underline}.header-container{position:absolute;width:90vw;left:5vw;top:1vh}.header-container h1{filter:drop-shadow(0 0 5px var(--background)) drop-shadow(0 0 5px var(--background)) drop-shadow(0 0 3px var(--background))}#your-mom{height:3em;width:calc(100vw - 2em);max-width:40em;margin-top:1em;resize:none}.timestamp{display:block;font-size:.7em;color:var(--text)}@media screen and (max-width:565px){#your-mom{width:calc(90vw - (4em / 7) - 17px)}}
\ No newline at end of file
diff --git a/smiggins/templates/css/notifications.css b/smiggins/templates/css/notifications.css
new file mode 100644
index 00000000..816bfe2a
--- /dev/null
+++ b/smiggins/templates/css/notifications.css
@@ -0,0 +1 @@
+hr{max-width:25em;margin-bottom:3em}.post button{cursor:default}.post button:focus{scale:100%;outline:0!important}
\ No newline at end of file
diff --git a/smiggins/templates/css/post.css b/smiggins/templates/css/post.css
new file mode 100644
index 00000000..13a30aaf
--- /dev/null
+++ b/smiggins/templates/css/post.css
@@ -0,0 +1 @@
+#top .main-content{-webkit-line-clamp:unset;line-clamp:unset}#parent{margin-bottom:1.5em}#post-text{height:6em}
\ No newline at end of file
diff --git a/smiggins/templates/css/settings.css b/smiggins/templates/css/settings.css
new file mode 100644
index 00000000..4e8fcf8b
--- /dev/null
+++ b/smiggins/templates/css/settings.css
@@ -0,0 +1 @@
+hr{max-width:12em}.thin{max-width:24em;margin:0 auto}.settings-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4em;margin-bottom:4em}#banner{width:200px;background-color:var(--banner);height:50px;display:inline-block;border-radius:.2em}#banner.gradient{background:linear-gradient(90deg,var(--banner),var(--banner-two))}.post{margin:0}.settings-side{display:inline-block;width:20em}.big-button{font-size:1.5em;width:6em;height:2em;border-radius:1em}@media screen and (max-width:565px){.post{width:calc(94vw - 3.5em - (3em / 7))}}
\ No newline at end of file
diff --git a/smiggins/templates/css/user.css b/smiggins/templates/css/user.css
new file mode 100644
index 00000000..bf1167ad
--- /dev/null
+++ b/smiggins/templates/css/user.css
@@ -0,0 +1 @@
+#banner{display:inline-block;border-radius:1em;width:35em;height:6em;background-color:var(--banner)}#banner .gradient{background:linear-gradient(90deg,var(--banner),var(--banner-two))}#username-main{display:inline-block;font-size:2em;position:relative;top:-1em;filter:drop-shadow(0 0 5px var(--background)) drop-shadow(0 0 5px var(--background)) drop-shadow(0 0 3px var(--background))}#user-bio{position:relative;top:-1em;max-width:35em;margin:0 auto}#secondary-username-container{position:relative;top:-2em}#follow{display:inline-block}#username-lower{display:inline-block;color:var(--subtext)}@media screen and (max-width:565px){#banner{width:94vw}#user-bio{max-width:94em}#username-main{font-size:1.5em;top:-1.25em}}hr{max-width:25em;margin-bottom:2em}
\ No newline at end of file
diff --git a/smiggins/templates/css/user_lists.css b/smiggins/templates/css/user_lists.css
new file mode 100644
index 00000000..667cd20f
--- /dev/null
+++ b/smiggins/templates/css/user_lists.css
@@ -0,0 +1 @@
+.lists-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.lists-container>div{width:100%;max-width:25em;margin:0 3em}.lists-container .post{width:22.125em}
\ No newline at end of file
diff --git a/smiggins/templates/email/conf/reset.html b/smiggins/templates/email/conf/reset.html
index a34e64ff..b1875d01 100644
--- a/smiggins/templates/email/conf/reset.html
+++ b/smiggins/templates/email/conf/reset.html
@@ -24,5 +24,5 @@ <h1>{{ lang.email.reset.html_title }}</h1>
     home = true;
   </script>
 
-  <script src="{% static '/js/reset-password-form.js' %}?v={{ VERSION }}"></script>
+  <script>{% include "js/reset-password-form.js" %}</script>
 {% endblock %}
diff --git a/smiggins/templates/hashtag.html b/smiggins/templates/hashtag.html
index 93f892fc..71e53bf6 100644
--- a/smiggins/templates/hashtag.html
+++ b/smiggins/templates/hashtag.html
@@ -17,7 +17,7 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/home.css' %}?v={{ VERSION }}">
+  <style>{% include "css/home.css" %}</style>
 {% endblock %}
 
 {% block body %}
@@ -35,6 +35,8 @@ <h1>#{{ HASHTAG }}</h1>
     const hashtag = "{{ HASHTAG }}";
   </script>
 
-  <script src="{% static '/js/hashtag.js' %}?v={{ VERSION }}"></script>
-  <script src="{% static '/js/timeline.js' %}?v={{ VERSION }}"></script>
+  <script>
+    {% include "js/hashtag.js" %}
+    {% include "js/timeline.js" %}
+  </script>
 {% endblock %}
diff --git a/smiggins/templates/home.html b/smiggins/templates/home.html
index f7843b98..a3a1e9a1 100644
--- a/smiggins/templates/home.html
+++ b/smiggins/templates/home.html
@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/home.css' %}?v={{ VERSION }}">
+  <style>{% include "css/home.css" %}</style>
 {% endblock %}
 
 {% block body %}
@@ -31,6 +31,8 @@
   <div id="posts"></div>
   <button id="more" onclick="refresh(true)" hidden>{{ lang.generic.load_more }}</button>
 
-  <script src="{% static '/js/home.js' %}?v={{ VERSION }}"></script>
-  <script src="{% static '/js/timeline.js' %}?v={{ VERSION }}"></script>
+  <script>
+    {% include "js/home.js" %}
+    {% include "js/timeline.js" %}
+  </script>
 {% endblock %}
diff --git a/smiggins/templates/index.html b/smiggins/templates/index.html
index 04b67113..d73ddac4 100644
--- a/smiggins/templates/index.html
+++ b/smiggins/templates/index.html
@@ -1,10 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
 
-{% block head %}
-  <script src="{% static "/js/check-logged-out.js" %}?v={{ VERSION }}"></script>
-{% endblock %}
-
 {% block body %}
   <h1>{{ SITE_NAME }}</h1>
   <h3>{{ VERSION }}</h3>
diff --git a/smiggins/static/js/admin.js b/smiggins/templates/js/admin.js
similarity index 100%
rename from smiggins/static/js/admin.js
rename to smiggins/templates/js/admin.js
diff --git a/smiggins/static/js/base-footer.js b/smiggins/templates/js/base-footer.js
similarity index 100%
rename from smiggins/static/js/base-footer.js
rename to smiggins/templates/js/base-footer.js
diff --git a/smiggins/static/js/base.js b/smiggins/templates/js/base.js
similarity index 100%
rename from smiggins/static/js/base.js
rename to smiggins/templates/js/base.js
diff --git a/smiggins/static/js/check-logged-out.js b/smiggins/templates/js/check-logged-out.js
similarity index 100%
rename from smiggins/static/js/check-logged-out.js
rename to smiggins/templates/js/check-logged-out.js
diff --git a/smiggins/templates/js/favicon.js b/smiggins/templates/js/favicon.js
new file mode 100644
index 00000000..2337dc85
--- /dev/null
+++ b/smiggins/templates/js/favicon.js
@@ -0,0 +1,49 @@
+'{% load static %}';
+let favicon = document.createElement("link");
+let oldFavicon = !!localStorage.getItem("old-favicon");
+function autoSetFavicon() {
+    if (oldFavicon) {
+        return;
+    }
+    ;
+    let obj;
+    if (_autoMM.matches) {
+        obj = _autoColors.light;
+    }
+    else {
+        obj = _autoColors.dark;
+    }
+    favicon.href = `/favicon-${obj.background}-${obj.background_alt}-${obj.accents[validColors.indexOf(localStorage.getItem("color")) == -1 ? "mauve" : localStorage.getItem("color")]}`.replaceAll("#", "");
+}
+function autoInit() {
+    autoEnabled = true;
+    autoSetFavicon();
+    _autoMM.addEventListener("change", autoSetFavicon);
+}
+function autoCancel() {
+    autoEnabled = false;
+    _autoMM.removeEventListener("change", autoSetFavicon);
+}
+function setOldFavicon() {
+    favicon.href = "{% static '/img/old_favicon.ico' %}?v={{ VERSION }}";
+}
+function setGenericFavicon() {
+    favicon.href = `/favicon-${themeObject.colors.background}-${themeObject.colors.button_background}-${themeObject.colors.accent[validColors.indexOf(localStorage.getItem("color")) == -1 ? "mauve" : localStorage.getItem("color")]}`.replaceAll("#", "");
+}
+let autoEnabled = false;
+let _autoMM = matchMedia("(prefers-color-scheme: light)");
+if ("{{ THEME|escapejs }}" === "auto") {
+    autoInit();
+}
+favicon.rel = "icon";
+favicon.type = "image/png";
+if (oldFavicon) {
+    setOldFavicon();
+}
+else if (autoEnabled) {
+    autoInit();
+}
+else {
+    favicon.href = `/favicon-${themeObject.colors.background}-${themeObject.colors.button_background}-${themeObject.colors.accent[validColors.indexOf(localStorage.getItem("color")) == -1 ? "mauve" : localStorage.getItem("color")]}`.replaceAll("#", "");
+}
+document.head.append(favicon);
diff --git a/smiggins/static/js/hashtag.js b/smiggins/templates/js/hashtag.js
similarity index 100%
rename from smiggins/static/js/hashtag.js
rename to smiggins/templates/js/hashtag.js
diff --git a/smiggins/static/js/home.js b/smiggins/templates/js/home.js
similarity index 100%
rename from smiggins/static/js/home.js
rename to smiggins/templates/js/home.js
diff --git a/smiggins/static/js/linkify/hashtags.js b/smiggins/templates/js/linkify/hashtags.js
similarity index 100%
rename from smiggins/static/js/linkify/hashtags.js
rename to smiggins/templates/js/linkify/hashtags.js
diff --git a/smiggins/static/js/linkify/html.min.js b/smiggins/templates/js/linkify/html.min.js
similarity index 100%
rename from smiggins/static/js/linkify/html.min.js
rename to smiggins/templates/js/linkify/html.min.js
diff --git a/smiggins/static/js/linkify/linkify.min.js b/smiggins/templates/js/linkify/linkify.min.js
similarity index 100%
rename from smiggins/static/js/linkify/linkify.min.js
rename to smiggins/templates/js/linkify/linkify.min.js
diff --git a/smiggins/static/js/linkify/mentions.js b/smiggins/templates/js/linkify/mentions.js
similarity index 100%
rename from smiggins/static/js/linkify/mentions.js
rename to smiggins/templates/js/linkify/mentions.js
diff --git a/smiggins/static/js/login.js b/smiggins/templates/js/login.js
similarity index 100%
rename from smiggins/static/js/login.js
rename to smiggins/templates/js/login.js
diff --git a/smiggins/static/js/logout.js b/smiggins/templates/js/logout.js
similarity index 100%
rename from smiggins/static/js/logout.js
rename to smiggins/templates/js/logout.js
diff --git a/smiggins/static/js/message.js b/smiggins/templates/js/message.js
similarity index 100%
rename from smiggins/static/js/message.js
rename to smiggins/templates/js/message.js
diff --git a/smiggins/static/js/messages.js b/smiggins/templates/js/messages.js
similarity index 100%
rename from smiggins/static/js/messages.js
rename to smiggins/templates/js/messages.js
diff --git a/smiggins/static/js/notifications.js b/smiggins/templates/js/notifications.js
similarity index 100%
rename from smiggins/static/js/notifications.js
rename to smiggins/templates/js/notifications.js
diff --git a/smiggins/static/js/pending.js b/smiggins/templates/js/pending.js
similarity index 100%
rename from smiggins/static/js/pending.js
rename to smiggins/templates/js/pending.js
diff --git a/smiggins/static/js/post.js b/smiggins/templates/js/post.js
similarity index 100%
rename from smiggins/static/js/post.js
rename to smiggins/templates/js/post.js
diff --git a/smiggins/static/js/reset-password-form.js b/smiggins/templates/js/reset-password-form.js
similarity index 100%
rename from smiggins/static/js/reset-password-form.js
rename to smiggins/templates/js/reset-password-form.js
diff --git a/smiggins/static/js/reset-password.js b/smiggins/templates/js/reset-password.js
similarity index 100%
rename from smiggins/static/js/reset-password.js
rename to smiggins/templates/js/reset-password.js
diff --git a/smiggins/static/js/settings.js b/smiggins/templates/js/settings.js
similarity index 100%
rename from smiggins/static/js/settings.js
rename to smiggins/templates/js/settings.js
diff --git a/smiggins/static/js/signup.js b/smiggins/templates/js/signup.js
similarity index 100%
rename from smiggins/static/js/signup.js
rename to smiggins/templates/js/signup.js
diff --git a/smiggins/static/js/timeline.js b/smiggins/templates/js/timeline.js
similarity index 100%
rename from smiggins/static/js/timeline.js
rename to smiggins/templates/js/timeline.js
diff --git a/smiggins/static/js/user.js b/smiggins/templates/js/user.js
similarity index 100%
rename from smiggins/static/js/user.js
rename to smiggins/templates/js/user.js
diff --git a/smiggins/templates/login.html b/smiggins/templates/login.html
index 607cbe11..f3a675a3 100644
--- a/smiggins/templates/login.html
+++ b/smiggins/templates/login.html
@@ -16,10 +16,6 @@
   <meta name="twitter:description" content="{{ lang.account.log_in_title }}">
 {% endblock %}
 
-{% block head %}
-  <script src="{% static "/js/check-logged-out.js" %}?v={{ VERSION }}"></script>
-{% endblock %}
-
 {% block body %}
   <h1>{{ lang.account.log_in_title }}</h1>
   <label><input id="username" maxlength="{{ MAX_USERNAME_LENGTH }}" placeholder="{{ lang.account.username_placeholder }}"></label><br>
@@ -34,5 +30,5 @@ <h1>{{ lang.account.log_in_title }}</h1>
 
   <div id="error"></div>
 
-  <script src="{% static '/js/login.js' %}?v={{ VERSION }}"></script>
+  <script>{% include "js/login.js" %}</script>
 {% endblock %}
diff --git a/smiggins/templates/logout.html b/smiggins/templates/logout.html
index 6cf5ad26..f7a3f63d 100644
--- a/smiggins/templates/logout.html
+++ b/smiggins/templates/logout.html
@@ -21,5 +21,5 @@
     {{ lang.account.log_out_description }}
   {% endautoescape %}
 
-  <script src="{% static "/js/logout.js" %}?v={{ VERSION }}"></script>
+  <script>{% include "js/logout.js" %}</script>
 {% endblock %}
diff --git a/smiggins/templates/message.html b/smiggins/templates/message.html
index 90dc5682..a900114f 100644
--- a/smiggins/templates/message.html
+++ b/smiggins/templates/message.html
@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/messages.css' %}?v={{ VERSION }}">
+  <style>{% include "css/messages.css" %}</style>
 {% endblock %}
 
 {% block body_head %}
@@ -26,5 +26,5 @@
     <textarea id="your-mom" maxlength="{{ MAX_POST_LENGTH }}" placeholder="{{ PLACEHOLDER }}"></textarea>
   </div>
 
-  <script src="{% static '/js/message.js' %}?v={{ VERSION }}"></script>
+  <script>{% include "js/message.js" %}</script>
 {% endblock %}\
diff --git a/smiggins/templates/messages.html b/smiggins/templates/messages.html
index c7a31c41..267c28da 100644
--- a/smiggins/templates/messages.html
+++ b/smiggins/templates/messages.html
@@ -6,8 +6,10 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/messages.css' %}?v={{ VERSION }}">
-  <link rel="stylesheet" href="{% static '/css/home.css' %}?v={{ VERSION }}">
+  <style>
+    {% include "css/home.css" %}
+    {% include "css/messages.css" %}
+  </style>
 {% endblock %}
 
 {% block body %}
@@ -19,5 +21,5 @@ <h1>{{ lang.messages.list_subtitle }}</h1>
 
   <button id="more" onclick="refreshMessageList();" hidden>{{ lang.generic.load_more }}</button>
 
-  <script src="{% static '/js/messages.js' %}?v={{ VERSION }}"></script>
+  <script>{% include "js/messages.js" %}</script>
 {% endblock %}
diff --git a/smiggins/templates/notifications.html b/smiggins/templates/notifications.html
index 5e2d4c8b..5c4b9187 100644
--- a/smiggins/templates/notifications.html
+++ b/smiggins/templates/notifications.html
@@ -6,8 +6,10 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/home.css' %}?v={{ VERSION }}">
-  <link rel="stylesheet" href="{% static '/css/notifications.css' %}?v={{ VERSION }}">
+  <style>
+    {% include "css/home.css" %}
+    {% include "css/notifications.css" %}
+  </style>
 {% endblock %}
 
 {% block body %}
@@ -17,6 +19,8 @@ <h1>{{ lang.notifications.title }}</h1>
 
   <div id="notif-container"></div>
 
-  <script src="{% static '/js/notifications.js' %}?v={{ VERSION }}"></script>
-  <script src="{% static '/js/timeline.js' %}?v={{ VERSION }}"></script>
+  <script>
+    {% include "js/notifications.js" %}
+    {% include "js/timeline.js" %}
+  </script>
 {% endblock %}
diff --git a/smiggins/templates/pending.html b/smiggins/templates/pending.html
index 322117d5..fc16bcfb 100644
--- a/smiggins/templates/pending.html
+++ b/smiggins/templates/pending.html
@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/home.css' %}?v={{ VERSION }}">
+  <style>{% include "css/home.css" %}</style>
 {% endblock %}
 
 {% block body %}
@@ -18,5 +18,5 @@ <h1>{{ lang.user_page.pending_title }}</h1>
 
   <button id="more" onclick="refreshPendingList();" hidden>{{ lang.generic.load_more }}</button>
 
-  <script src="{% static '/js/pending.js' %}?v={{ VERSION }}"></script>
+  <script>{% include "js/pending.js" %}</script>
 {% endblock %}
diff --git a/smiggins/templates/post.html b/smiggins/templates/post.html
index 75992a89..49762062 100644
--- a/smiggins/templates/post.html
+++ b/smiggins/templates/post.html
@@ -23,8 +23,10 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/home.css' %}?v={{ VERSION }}">
-  <link rel="stylesheet" href="{% static '/css/post.css' %}?v={{ VERSION }}">
+  <style>
+    {% include "css/home.css" %}
+    {% include "css/post.css" %}
+  </style>
 {% endblock %}
 
 {% block body %}
@@ -70,8 +72,8 @@
       false,         // fakeMentions
       true           // pageFocus
     );
-  </script>
 
-  <script src="{% static '/js/post.js' %}?v={{ VERSION }}"></script>
-  <script src="{% static '/js/timeline.js' %}?v={{ VERSION }}"></script>
+    {% include "js/post.js" %}
+    {% include "js/timeline.js" %}
+  </script>
 {% endblock %}
diff --git a/smiggins/templates/reset-password.html b/smiggins/templates/reset-password.html
index 42168574..595a0843 100644
--- a/smiggins/templates/reset-password.html
+++ b/smiggins/templates/reset-password.html
@@ -23,5 +23,5 @@ <h1><label for="username">{{ lang.email.reset.html_title }}</label></h1>
   <a href="/login/">{{ lang.http.home }}</a><br><br>
   <div id="error"></div>
 
-  <script src="{% static '/js/reset-password.js' %}?v={{ VERSION }}"></script>
+  <script>{% include "js/reset-password.js" %}</script>
 {% endblock %}
diff --git a/smiggins/templates/settings.html b/smiggins/templates/settings.html
index abd2fc7a..36659cf0 100644
--- a/smiggins/templates/settings.html
+++ b/smiggins/templates/settings.html
@@ -6,8 +6,10 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/home.css' %}?v={{ VERSION }}">
-  <link rel="stylesheet" href="{% static '/css/settings.css' %}?v={{ VERSION }}">
+  <style>
+    {% include "css/home.css" %}
+    {% include "css/settings.css" %}
+  </style>
 {% endblock %}
 
 {% block body_head %}
@@ -210,5 +212,5 @@ <h2>{{ lang.settings.account_title }}</h2>
     let hasEmail = {{ has_email }};
   </script>
 
-  <script src="{% static '/js/settings.js' %}?v={{ VERSION }}"></script>
+  <script>{% include "js/settings.js" %}</script>
 {% endblock %}
diff --git a/smiggins/templates/signup.html b/smiggins/templates/signup.html
index c339c7d4..08059dee 100644
--- a/smiggins/templates/signup.html
+++ b/smiggins/templates/signup.html
@@ -16,10 +16,6 @@
   <meta name="twitter:description" content="{{ lang.account.sign_up_title }}">
 {% endblock %}
 
-{% block head %}
-  <script src="{% static "/js/check-logged-out.js" %}?v={{ VERSION }}"></script>
-{% endblock %}
-
 {% block body %}
   <h1>{{ lang.account.sign_up_title }}</h1>
 
@@ -36,5 +32,5 @@ <h1>{{ lang.account.sign_up_title }}</h1>
   <a href="/login/">{{ lang.account.log_in_instead }}</a>
   <div id="error"></div>
 
-  <script src="{% static '/js/signup.js' %}?v={{ VERSION }}"></script>
+  <script>{% include "js/signup.js" %}</script>
 {% endblock %}
diff --git a/smiggins/templates/user.html b/smiggins/templates/user.html
index 6e09fc52..984ddaa9 100644
--- a/smiggins/templates/user.html
+++ b/smiggins/templates/user.html
@@ -23,8 +23,10 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/home.css' %}?v={{ VERSION }}">
-  <link rel="stylesheet" href="{% static '/css/user.css' %}?v={{ VERSION }}">
+  <style>
+    {% include "css/home.css" %}
+    {% include "css/user.css" %}
+  </style>
 {% endblock %}
 
 {% block body_head %}
@@ -76,8 +78,10 @@
     {% endif %}
   </script>
 
-  <script src="{% static '/js/user.js' %}?v={{ VERSION }}"></script>
-  {% if IS_BLOCKED == "false" %}
-    <script src="{% static '/js/timeline.js' %}?v={{ VERSION }}"></script>
-  {% endif %}
+  <script>
+    {% include "js/user.js" %}
+    {% if IS_BLOCKED == "false" %}
+      {% include "js/timeline.js" %}
+    {% endif %}
+  </script>
 {% endblock %}
diff --git a/smiggins/templates/user_lists.html b/smiggins/templates/user_lists.html
index 1d2c66ec..30a4f595 100644
--- a/smiggins/templates/user_lists.html
+++ b/smiggins/templates/user_lists.html
@@ -6,9 +6,11 @@
 {% endblock %}
 
 {% block head %}
-  <link rel="stylesheet" href="{% static '/css/home.css' %}?v={{ VERSION }}">
-  <link rel="stylesheet" href="{% static '/css/user.css' %}?v={{ VERSION }}">
-  <link rel="stylesheet" href="{% static '/css/user_lists.css' %}?v={{ VERSION }}">
+  <style>
+    {% include "css/home.css" %}
+    {% include "css/user.css" %}
+    {% include "css/user_lists.css" %}
+  </style>
 {% endblock %}
 
 {% block body_head %}
diff --git a/smiggins/static/ts/README.md b/smiggins/ts/README.md
similarity index 100%
rename from smiggins/static/ts/README.md
rename to smiggins/ts/README.md
diff --git a/smiggins/static/ts/admin.ts b/smiggins/ts/admin.ts
similarity index 100%
rename from smiggins/static/ts/admin.ts
rename to smiggins/ts/admin.ts
diff --git a/smiggins/static/ts/base-footer.ts b/smiggins/ts/base-footer.ts
similarity index 100%
rename from smiggins/static/ts/base-footer.ts
rename to smiggins/ts/base-footer.ts
diff --git a/smiggins/static/ts/base.ts b/smiggins/ts/base.ts
similarity index 100%
rename from smiggins/static/ts/base.ts
rename to smiggins/ts/base.ts
diff --git a/smiggins/ts/favicon.ts b/smiggins/ts/favicon.ts
new file mode 100644
index 00000000..bfae58b3
--- /dev/null
+++ b/smiggins/ts/favicon.ts
@@ -0,0 +1,67 @@
+'{% load static %}';
+
+declare const _autoColors: {
+  [key in "light" | "dark"]: {
+    background: string,
+    background_alt: string,
+    accents: string[]
+  }
+};
+
+let favicon: HTMLLinkElement = document.createElement("link");
+let oldFavicon: boolean = !!localStorage.getItem("old-favicon");
+
+// theme normalization when set to automatic
+function autoSetFavicon(): void {
+  if (oldFavicon) { return };
+
+  let obj;
+  if (_autoMM.matches) {
+    obj = _autoColors.light;
+  } else {
+    obj = _autoColors.dark;
+  }
+
+  favicon.href = `/favicon-${obj.background}-${obj.background_alt}-${obj.accents[validColors.indexOf(localStorage.getItem("color")) == -1 ? "mauve" : localStorage.getItem("color")]}`.replaceAll("#", "");
+}
+
+function autoInit(): void {
+  autoEnabled = true;
+  autoSetFavicon();
+  _autoMM.addEventListener("change", autoSetFavicon);
+}
+
+function autoCancel(): void {
+  autoEnabled = false;
+  _autoMM.removeEventListener("change", autoSetFavicon);
+}
+
+function setOldFavicon(): void {
+  favicon.href = "{% static '/img/old_favicon.ico' %}?v={{ VERSION }}";
+}
+
+function setGenericFavicon(): void {
+  favicon.href = `/favicon-${themeObject.colors.background}-${themeObject.colors.button_background}-${themeObject.colors.accent[validColors.indexOf(localStorage.getItem("color")) == -1 ? "mauve" : localStorage.getItem("color")]}`.replaceAll("#", "");
+}
+
+let autoEnabled: boolean = false;
+let _autoMM: MediaQueryList = matchMedia("(prefers-color-scheme: light)");
+
+//  @ts-ignore
+if ("{{ THEME|escapejs }}" === "auto") {
+  autoInit();
+}
+
+// set proper favicon
+favicon.rel = "icon";
+favicon.type = "image/png";
+
+if (oldFavicon) {
+  setOldFavicon()
+} else if (autoEnabled) {
+  autoInit();
+} else {
+  favicon.href = `/favicon-${themeObject.colors.background}-${themeObject.colors.button_background}-${themeObject.colors.accent[validColors.indexOf(localStorage.getItem("color")) == -1 ? "mauve" : localStorage.getItem("color")]}`.replaceAll("#", "");
+}
+
+document.head.append(favicon);
\ No newline at end of file
diff --git a/smiggins/static/ts/globals.d.ts b/smiggins/ts/globals.d.ts
similarity index 92%
rename from smiggins/static/ts/globals.d.ts
rename to smiggins/ts/globals.d.ts
index 4ff8e366..6d139aab 100644
--- a/smiggins/static/ts/globals.d.ts
+++ b/smiggins/ts/globals.d.ts
@@ -26,20 +26,11 @@ declare const badges: { [key: string]: string };
 declare function linkifyHtml(text: string, settings: object): string;
 
 // Defined in base.html, used in settings.ts for themes
-declare function autoInit(): void;
-declare function autoCancel(): void;
-declare function autoSetFavicon(): void;
-declare function setOldFavicon(): void;
 declare function setGenericFavicon(): void;
 declare function getThemeCSS(theme: object): string;
 declare function getThemeAuto(defLight?: object, defDark?: object): string;
 declare let themeObject: _themeObject | null;
 
-declare const autoEnabled: boolean;
-
-declare let oldFavicon: boolean;
-declare let favicon: HTMLLinkElement;
-
 // Types
 type _postJSON = {
   creator: {
diff --git a/smiggins/static/ts/hashtag.ts b/smiggins/ts/hashtag.ts
similarity index 100%
rename from smiggins/static/ts/hashtag.ts
rename to smiggins/ts/hashtag.ts
diff --git a/smiggins/static/ts/home.ts b/smiggins/ts/home.ts
similarity index 100%
rename from smiggins/static/ts/home.ts
rename to smiggins/ts/home.ts
diff --git a/smiggins/static/ts/linkify/hashtags.ts b/smiggins/ts/linkify/hashtags.ts
similarity index 100%
rename from smiggins/static/ts/linkify/hashtags.ts
rename to smiggins/ts/linkify/hashtags.ts
diff --git a/smiggins/static/ts/linkify/mentions.ts b/smiggins/ts/linkify/mentions.ts
similarity index 100%
rename from smiggins/static/ts/linkify/mentions.ts
rename to smiggins/ts/linkify/mentions.ts
diff --git a/smiggins/static/ts/login.ts b/smiggins/ts/login.ts
similarity index 100%
rename from smiggins/static/ts/login.ts
rename to smiggins/ts/login.ts
diff --git a/smiggins/static/ts/logout.ts b/smiggins/ts/logout.ts
similarity index 100%
rename from smiggins/static/ts/logout.ts
rename to smiggins/ts/logout.ts
diff --git a/smiggins/static/ts/message.ts b/smiggins/ts/message.ts
similarity index 100%
rename from smiggins/static/ts/message.ts
rename to smiggins/ts/message.ts
diff --git a/smiggins/static/ts/messages.ts b/smiggins/ts/messages.ts
similarity index 100%
rename from smiggins/static/ts/messages.ts
rename to smiggins/ts/messages.ts
diff --git a/smiggins/static/ts/notifications.ts b/smiggins/ts/notifications.ts
similarity index 100%
rename from smiggins/static/ts/notifications.ts
rename to smiggins/ts/notifications.ts
diff --git a/smiggins/static/ts/pending.ts b/smiggins/ts/pending.ts
similarity index 100%
rename from smiggins/static/ts/pending.ts
rename to smiggins/ts/pending.ts
diff --git a/smiggins/static/ts/post.ts b/smiggins/ts/post.ts
similarity index 100%
rename from smiggins/static/ts/post.ts
rename to smiggins/ts/post.ts
diff --git a/smiggins/static/ts/reset-password-form.ts b/smiggins/ts/reset-password-form.ts
similarity index 100%
rename from smiggins/static/ts/reset-password-form.ts
rename to smiggins/ts/reset-password-form.ts
diff --git a/smiggins/static/ts/reset-password.ts b/smiggins/ts/reset-password.ts
similarity index 100%
rename from smiggins/static/ts/reset-password.ts
rename to smiggins/ts/reset-password.ts
diff --git a/smiggins/static/ts/settings.ts b/smiggins/ts/settings.ts
similarity index 100%
rename from smiggins/static/ts/settings.ts
rename to smiggins/ts/settings.ts
diff --git a/smiggins/static/ts/signup.ts b/smiggins/ts/signup.ts
similarity index 100%
rename from smiggins/static/ts/signup.ts
rename to smiggins/ts/signup.ts
diff --git a/smiggins/static/ts/timeline.ts b/smiggins/ts/timeline.ts
similarity index 100%
rename from smiggins/static/ts/timeline.ts
rename to smiggins/ts/timeline.ts
diff --git a/smiggins/static/ts/user.ts b/smiggins/ts/user.ts
similarity index 100%
rename from smiggins/static/ts/user.ts
rename to smiggins/ts/user.ts
diff --git a/tsconfig.json b/tsconfig.json
index 020337e9..2fda1f41 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,13 +2,13 @@
   "compilerOptions": {
     "lib": [ "dom", "es2023" ],
     "noUnusedLocals": false,
-    "outDir": "./smiggins/static/js/",
+    "outDir": "./smiggins/templates/js/",
     "removeComments": true,
     "target": "es6"
   },
 
   "include": [
-    "./smiggins/static/ts/*.ts",
-    "./smiggins/static/ts/linkify/*.ts"
+    "./smiggins/ts/*.ts",
+    "./smiggins/ts/linkify/*.ts"
   ]
 }