From 77677eef6d5b66be24f5d36671b01a0e50678440 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lera=20Elvo=C3=A9?= <yagich@poto.cafe>
Date: Fri, 5 Dec 2025 18:22:25 +0300
Subject: [PATCH] new theme: snow white

---
 app/__init__.py                      |    2 +-
 data/static/css/theme-snow-white.css | 1475 ++++++++++++++++++++++++++
 sass/snow-white.scss                 |   10 +
 3 files changed, 1486 insertions(+), 1 deletion(-)
 create mode 100644 data/static/css/theme-snow-white.css
 create mode 100644 sass/snow-white.scss

diff --git a/app/__init__.py b/app/__init__.py
index 8299eab..5d6476c 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -267,6 +267,6 @@ def create_app():
         if subject == 'style':
             return 'Default'
 
-        return f'{subject.removeprefix('theme-').capitalize()} (beta)'
+        return f'{subject.removeprefix('theme-').replace('-', ' ').capitalize()} (beta)'
 
     return app
diff --git a/data/static/css/theme-snow-white.css b/data/static/css/theme-snow-white.css
new file mode 100644
index 0000000..87399c8
--- /dev/null
+++ b/data/static/css/theme-snow-white.css
@@ -0,0 +1,1475 @@
+@font-face {
+  font-family: "site-title";
+  src: url("/static/fonts/ChicagoFLF.woff2");
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Roman.woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Bold.woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Italic.woff2");
+  font-weight: normal;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_BoldItalic.woff2");
+  font-weight: bold;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  src: url("/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf");
+  font-weight: 125 950;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  src: url("/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf");
+  font-weight: 125 950;
+  font-style: italic;
+}
+*, ::before, ::after {
+  box-sizing: border-box;
+}
+
+.reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
+  cursor: default;
+  font-size: 1rem;
+  font-family: "Cadman", sans-serif;
+  text-decoration: none;
+  border: 1px solid black;
+  border-radius: 8px;
+  padding: 5px 20px;
+  margin: 10px 0;
+}
+
+body {
+  font-family: "Cadman", sans-serif;
+  margin: 20px 100px;
+  background-color: rgb(183.7418181818, 194.7818181818, 215.8581818182);
+  color: black;
+}
+
+a:link {
+  color: #711579;
+}
+a:visited {
+  color: #4a144f;
+}
+
+.big {
+  font-size: 1.8rem;
+}
+
+#topnav {
+  padding: 10px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: #ced9ee;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+#bottomnav {
+  padding: 10px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: rgb(165.2127272727, 166.0977272727, 167.7872727273);
+}
+
+#footer {
+  padding: 10px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: rgb(165.2127272727, 166.0977272727, 167.7872727273);
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.darkbg {
+  padding-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  background-color: rgb(165.2127272727, 166.0977272727, 167.7872727273);
+}
+
+.user-actions {
+  display: flex;
+  column-gap: 15px;
+}
+
+.site-title {
+  font-family: "site-title";
+  font-size: 3rem;
+  margin: 0 20px;
+  text-decoration: none;
+  color: black !important;
+}
+
+.thread-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.thread-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.post {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "usercard post-content-container";
+  border: 2px outset rgb(136.0836363636, 149.3636363636, 174.7163636364);
+}
+
+.usercard {
+  grid-area: usercard;
+  padding: 20px 10px;
+  border: 4px outset rgb(231.36, 234, 239.04);
+  background-color: rgb(165.2127272727, 166.0977272727, 167.7872727273);
+  border-right: solid 2px;
+}
+
+.usercard-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 10px;
+  position: sticky;
+}
+
+.post-content-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: min-content 1fr min-content;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "post-info" "post-content" "post-reactions";
+  grid-area: post-content-container;
+  min-height: 100%;
+}
+
+.post-info {
+  grid-area: post-info;
+  display: flex;
+  min-height: 70px;
+  justify-content: space-between;
+  padding: 5px 20px;
+  align-items: center;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  background-color: rgb(183.7418181818, 194.7818181818, 215.8581818182);
+}
+
+.post-content {
+  grid-area: post-content;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #ced9ee;
+}
+
+.post-reactions {
+  grid-area: post-reactions;
+  min-height: 50px;
+  display: flex;
+  padding: 5px 20px;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 5px;
+  background-color: rgb(183.7418181818, 194.7818181818, 215.8581818182);
+  border-top: 2px dotted gray;
+}
+
+.post-inner {
+  height: 100%;
+  padding-right: 25%;
+}
+.post-inner.wider {
+  padding-right: 12.5%;
+}
+
+.signature-container {
+  border-top: 2px dotted gray;
+  padding: 10px 0;
+}
+
+code {
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+}
+
+pre code {
+  display: block;
+  background-color: rgb(37.9418181818, 42.3818181818, 50.8581818182);
+  font-size: 1rem;
+  color: white;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-left: 10px solid rgb(239.24, 241, 244.36);
+  padding: 20px;
+  overflow: scroll;
+  tab-size: 4;
+}
+pre code .hll {
+  background-color: #6e7681;
+}
+pre code .c {
+  color: #8B949E;
+  font-style: italic;
+}
+pre code { /* Comment */ }
+pre code .err {
+  color: #F85149;
+}
+pre code { /* Error */ }
+pre code .esc {
+  color: #E6EDF3;
+}
+pre code { /* Escape */ }
+pre code .g {
+  color: #E6EDF3;
+}
+pre code { /* Generic */ }
+pre code .k {
+  color: #FF7B72;
+}
+pre code { /* Keyword */ }
+pre code .l {
+  color: #A5D6FF;
+}
+pre code { /* Literal */ }
+pre code .n {
+  color: #E6EDF3;
+}
+pre code { /* Name */ }
+pre code .o {
+  color: #FF7B72;
+  font-weight: bold;
+}
+pre code { /* Operator */ }
+pre code .x {
+  color: #E6EDF3;
+}
+pre code { /* Other */ }
+pre code .p {
+  color: #E6EDF3;
+}
+pre code { /* Punctuation */ }
+pre code .ch {
+  color: #8B949E;
+  font-style: italic;
+}
+pre code { /* Comment.Hashbang */ }
+pre code .cm {
+  color: #8B949E;
+  font-style: italic;
+}
+pre code { /* Comment.Multiline */ }
+pre code .cp {
+  color: #8B949E;
+  font-weight: bold;
+  font-style: italic;
+}
+pre code { /* Comment.Preproc */ }
+pre code .cpf {
+  color: #8B949E;
+  font-style: italic;
+}
+pre code { /* Comment.PreprocFile */ }
+pre code .c1 {
+  color: #8B949E;
+  font-style: italic;
+}
+pre code { /* Comment.Single */ }
+pre code .cs {
+  color: #8B949E;
+  font-weight: bold;
+  font-style: italic;
+}
+pre code { /* Comment.Special */ }
+pre code .gd {
+  color: #FFA198;
+  background-color: #490202;
+}
+pre code { /* Generic.Deleted */ }
+pre code .ge {
+  color: #E6EDF3;
+  font-style: italic;
+}
+pre code { /* Generic.Emph */ }
+pre code .ges {
+  color: #E6EDF3;
+  font-weight: bold;
+  font-style: italic;
+}
+pre code { /* Generic.EmphStrong */ }
+pre code .gr {
+  color: #FFA198;
+}
+pre code { /* Generic.Error */ }
+pre code .gh {
+  color: #79C0FF;
+  font-weight: bold;
+}
+pre code { /* Generic.Heading */ }
+pre code .gi {
+  color: #56D364;
+  background-color: #0F5323;
+}
+pre code { /* Generic.Inserted */ }
+pre code .go {
+  color: #8B949E;
+}
+pre code { /* Generic.Output */ }
+pre code .gp {
+  color: #8B949E;
+}
+pre code { /* Generic.Prompt */ }
+pre code .gs {
+  color: #E6EDF3;
+  font-weight: bold;
+}
+pre code { /* Generic.Strong */ }
+pre code .gu {
+  color: #79C0FF;
+}
+pre code { /* Generic.Subheading */ }
+pre code .gt {
+  color: #FF7B72;
+}
+pre code { /* Generic.Traceback */ }
+pre code .g-Underline {
+  color: #E6EDF3;
+  text-decoration: underline;
+}
+pre code { /* Generic.Underline */ }
+pre code .kc {
+  color: #79C0FF;
+}
+pre code { /* Keyword.Constant */ }
+pre code .kd {
+  color: #FF7B72;
+}
+pre code { /* Keyword.Declaration */ }
+pre code .kn {
+  color: #FF7B72;
+}
+pre code { /* Keyword.Namespace */ }
+pre code .kp {
+  color: #79C0FF;
+}
+pre code { /* Keyword.Pseudo */ }
+pre code .kr {
+  color: #FF7B72;
+}
+pre code { /* Keyword.Reserved */ }
+pre code .kt {
+  color: #FF7B72;
+}
+pre code { /* Keyword.Type */ }
+pre code .ld {
+  color: #79C0FF;
+}
+pre code { /* Literal.Date */ }
+pre code .m {
+  color: #A5D6FF;
+}
+pre code { /* Literal.Number */ }
+pre code .s {
+  color: #A5D6FF;
+}
+pre code { /* Literal.String */ }
+pre code .na {
+  color: #E6EDF3;
+}
+pre code { /* Name.Attribute */ }
+pre code .nb {
+  color: #E6EDF3;
+}
+pre code { /* Name.Builtin */ }
+pre code .nc {
+  color: #F0883E;
+  font-weight: bold;
+}
+pre code { /* Name.Class */ }
+pre code .no {
+  color: #79C0FF;
+  font-weight: bold;
+}
+pre code { /* Name.Constant */ }
+pre code .nd {
+  color: #D2A8FF;
+  font-weight: bold;
+}
+pre code { /* Name.Decorator */ }
+pre code .ni {
+  color: #FFA657;
+}
+pre code { /* Name.Entity */ }
+pre code .ne {
+  color: #F0883E;
+  font-weight: bold;
+}
+pre code { /* Name.Exception */ }
+pre code .nf {
+  color: #D2A8FF;
+  font-weight: bold;
+}
+pre code { /* Name.Function */ }
+pre code .nl {
+  color: #79C0FF;
+  font-weight: bold;
+}
+pre code { /* Name.Label */ }
+pre code .nn {
+  color: #FF7B72;
+}
+pre code { /* Name.Namespace */ }
+pre code .nx {
+  color: #E6EDF3;
+}
+pre code { /* Name.Other */ }
+pre code .py {
+  color: #79C0FF;
+}
+pre code { /* Name.Property */ }
+pre code .nt {
+  color: #7EE787;
+}
+pre code { /* Name.Tag */ }
+pre code .nv {
+  color: #79C0FF;
+}
+pre code { /* Name.Variable */ }
+pre code .ow {
+  color: #FF7B72;
+  font-weight: bold;
+}
+pre code { /* Operator.Word */ }
+pre code .pm {
+  color: #E6EDF3;
+}
+pre code { /* Punctuation.Marker */ }
+pre code .w {
+  color: #6E7681;
+}
+pre code { /* Text.Whitespace */ }
+pre code .mb {
+  color: #A5D6FF;
+}
+pre code { /* Literal.Number.Bin */ }
+pre code .mf {
+  color: #A5D6FF;
+}
+pre code { /* Literal.Number.Float */ }
+pre code .mh {
+  color: #A5D6FF;
+}
+pre code { /* Literal.Number.Hex */ }
+pre code .mi {
+  color: #A5D6FF;
+}
+pre code { /* Literal.Number.Integer */ }
+pre code .mo {
+  color: #A5D6FF;
+}
+pre code { /* Literal.Number.Oct */ }
+pre code .sa {
+  color: #79C0FF;
+}
+pre code { /* Literal.String.Affix */ }
+pre code .sb {
+  color: #A5D6FF;
+}
+pre code { /* Literal.String.Backtick */ }
+pre code .sc {
+  color: #A5D6FF;
+}
+pre code { /* Literal.String.Char */ }
+pre code .dl {
+  color: #79C0FF;
+}
+pre code { /* Literal.String.Delimiter */ }
+pre code .sd {
+  color: #A5D6FF;
+}
+pre code { /* Literal.String.Doc */ }
+pre code .s2 {
+  color: #A5D6FF;
+}
+pre code { /* Literal.String.Double */ }
+pre code .se {
+  color: #79C0FF;
+}
+pre code { /* Literal.String.Escape */ }
+pre code .sh {
+  color: #79C0FF;
+}
+pre code { /* Literal.String.Heredoc */ }
+pre code .si {
+  color: #A5D6FF;
+}
+pre code { /* Literal.String.Interpol */ }
+pre code .sx {
+  color: #A5D6FF;
+}
+pre code { /* Literal.String.Other */ }
+pre code .sr {
+  color: #79C0FF;
+}
+pre code { /* Literal.String.Regex */ }
+pre code .s1 {
+  color: #A5D6FF;
+}
+pre code { /* Literal.String.Single */ }
+pre code .ss {
+  color: #A5D6FF;
+}
+pre code { /* Literal.String.Symbol */ }
+pre code .bp {
+  color: #E6EDF3;
+}
+pre code { /* Name.Builtin.Pseudo */ }
+pre code .fm {
+  color: #D2A8FF;
+  font-weight: bold;
+}
+pre code { /* Name.Function.Magic */ }
+pre code .vc {
+  color: #79C0FF;
+}
+pre code { /* Name.Variable.Class */ }
+pre code .vg {
+  color: #79C0FF;
+}
+pre code { /* Name.Variable.Global */ }
+pre code .vi {
+  color: #79C0FF;
+}
+pre code { /* Name.Variable.Instance */ }
+pre code .vm {
+  color: #79C0FF;
+}
+pre code { /* Name.Variable.Magic */ }
+pre code .il {
+  color: #A5D6FF;
+}
+pre code { /* Literal.Number.Integer.Long */ }
+
+.copy-code-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-family: "Cadman", sans-serif;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  background-color: #ced9ee;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+  border-top: 2px solid black;
+}
+
+.code-language-identifier {
+  font-style: italic;
+  margin-left: 10px;
+}
+
+.copy-code {
+  margin-right: 10px;
+}
+
+.inline-code {
+  background-color: rgb(37.9418181818, 42.3818181818, 50.8581818182);
+  color: white;
+  padding: 5px 10px;
+  display: inline-block;
+  margin: 4px;
+  border-radius: 8px;
+  font-size: 1rem;
+  white-space: pre;
+}
+
+#delete-dialog, .lightbox-dialog {
+  padding: 0;
+  border-radius: 8px;
+  border: 2px solid black;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+}
+
+.delete-dialog-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+.lightbox-inner {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  min-width: 400px;
+  background-color: #ced9ee;
+  color: black;
+  gap: 10px;
+}
+
+.lightbox-image {
+  max-width: 70vw;
+  max-height: 70vh;
+  object-fit: scale-down;
+}
+
+.lightbox-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+blockquote {
+  padding: 10px 20px;
+  margin: 10px;
+  border-radius: 8px;
+  border-left: 10px solid rgb(239.24, 241, 244.36);
+  background-color: rgba(0, 0, 0, 0.1490196078);
+}
+
+.user-info {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-template-areas: "user-page-usercard user-page-stats";
+}
+
+.user-page-usercard {
+  grid-area: user-page-usercard;
+  padding: 20px 10px;
+  border: 4px outset rgb(231.36, 234, 239.04);
+  background-color: rgb(165.2127272727, 166.0977272727, 167.7872727273);
+  border-right: solid 2px;
+}
+
+.user-page-stats {
+  grid-area: user-page-stats;
+  padding: 20px 30px;
+  border: 1px solid black;
+}
+
+.user-stats-list {
+  list-style: none;
+  margin: 0 0 10px 0;
+}
+
+.user-page-posts {
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  background-color: #ced9ee;
+}
+
+.user-page-post-preview {
+  max-height: 200px;
+  mask-image: linear-gradient(180deg, #000 60%, transparent);
+}
+
+.avatar {
+  width: 90%;
+  height: 90%;
+  object-fit: contain;
+  margin-bottom: 10px;
+}
+
+.username-link {
+  overflow-wrap: anywhere;
+}
+
+.user-status {
+  text-align: center;
+}
+
+button, input[type=submit], .linkbutton {
+  display: inline-block;
+  background-color: #eecee9;
+  color: black !important;
+}
+button:hover, input[type=submit]:hover, .linkbutton:hover {
+  background-color: rgb(241.4, 215.8, 237.4);
+}
+button:active, input[type=submit]:active, .linkbutton:active {
+  background-color: rgb(207.8290909091, 191.7709090909, 205.32);
+}
+button:disabled, input[type=submit]:disabled, .linkbutton:disabled {
+  background-color: rgb(233.02, 230.78, 232.67);
+}
+button.reduced, input[type=submit].reduced, .linkbutton.reduced {
+  margin: 0;
+  padding: 5px;
+}
+button.icon, input[type=submit].icon, .linkbutton.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
+button.critical, input[type=submit].critical, .linkbutton.critical {
+  background-color: red;
+  color: white !important;
+}
+button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
+  background-color: #ff3333;
+}
+button.critical:active, input[type=submit].critical:active, .linkbutton.critical:active {
+  background-color: rgb(149.175, 80.325, 80.325);
+}
+button.critical:disabled, input[type=submit].critical:disabled, .linkbutton.critical:disabled {
+  background-color: rgb(174.675, 156.825, 156.825);
+}
+button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critical.reduced {
+  margin: 0;
+  padding: 5px;
+}
+button.critical.icon, input[type=submit].critical.icon, .linkbutton.critical.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
+button.warn, input[type=submit].warn, .linkbutton.warn {
+  background-color: #fbfb8d;
+  color: black !important;
+}
+button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
+  background-color: rgb(251.8, 251.8, 163.8);
+}
+button.warn:active, input[type=submit].warn:active, .linkbutton.warn:active {
+  background-color: rgb(198.3813559322, 198.3813559322, 154.4186440678);
+}
+button.warn:disabled, input[type=submit].warn:disabled, .linkbutton.warn:disabled {
+  background-color: rgb(217.55, 217.55, 209.85);
+}
+button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
+  margin: 0;
+  padding: 5px;
+}
+button.warn.icon, input[type=submit].warn.icon, .linkbutton.warn.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
+
+input[type=file]::file-selector-button {
+  background-color: #eecee9;
+  color: black !important;
+}
+input[type=file]::file-selector-button:hover {
+  background-color: rgb(241.4, 215.8, 237.4);
+}
+input[type=file]::file-selector-button:active {
+  background-color: rgb(207.8290909091, 191.7709090909, 205.32);
+}
+input[type=file]::file-selector-button:disabled {
+  background-color: rgb(233.02, 230.78, 232.67);
+}
+input[type=file]::file-selector-button.reduced {
+  margin: 0;
+  padding: 5px;
+}
+input[type=file]::file-selector-button.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
+input[type=file]::file-selector-button {
+  margin: 10px;
+}
+
+p {
+  margin: 15px 0;
+}
+
+.pagebutton {
+  background-color: #eecee9;
+  color: black !important;
+}
+.pagebutton:hover {
+  background-color: rgb(241.4, 215.8, 237.4);
+}
+.pagebutton:active {
+  background-color: rgb(207.8290909091, 191.7709090909, 205.32);
+}
+.pagebutton:disabled {
+  background-color: rgb(233.02, 230.78, 232.67);
+}
+.pagebutton.reduced {
+  margin: 0;
+  padding: 5px;
+}
+.pagebutton.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
+.pagebutton {
+  padding: 5px 5px;
+  margin: 0;
+  display: inline-block;
+  min-width: 20px;
+  text-align: center;
+}
+
+.currentpage {
+  border: none;
+  padding: 5px 5px;
+  margin: 0;
+  display: inline-block;
+  min-width: 20px;
+  text-align: center;
+}
+
+.modform {
+  display: inline;
+}
+
+.avatar-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+}
+
+input[type=text], input[type=password], textarea, select {
+  border: 1px solid black;
+  border-radius: 8px;
+  padding: 7px 10px;
+  width: 100%;
+  resize: vertical;
+  color: black;
+  background-color: rgb(225.6, 232.2, 244.8);
+  font-size: 100%;
+  font-family: inherit;
+}
+input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
+  background-color: rgb(235.4, 239.8, 248.2);
+}
+
+textarea {
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+}
+
+.infobox {
+  border: 2px solid black;
+  background-color: #81a3e6;
+  padding: 20px 15px;
+  color: black;
+}
+.infobox.critical {
+  background-color: #ed8181;
+  color: black;
+}
+.infobox.warn {
+  background-color: #fbfb8d;
+  color: black;
+}
+
+.infobox > span {
+  display: flex;
+  align-items: center;
+}
+
+.infobox-icon-container {
+  min-width: 60px;
+  padding-right: 15px;
+}
+
+.thread {
+  display: grid;
+  grid-template-columns: 96px 1.6fr 96px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  min-height: 96px;
+  grid-template-areas: "thread-sticky-container thread-info-container thread-locked-container";
+}
+
+.thread-sticky-container {
+  grid-area: thread-sticky-container;
+  border: 2px outset rgb(231.36, 234, 239.04);
+  background-color: none;
+}
+
+.thread-locked-container {
+  grid-area: thread-locked-container;
+  border: 2px outset rgb(231.36, 234, 239.04);
+  background-color: none;
+}
+
+.contain-svg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.contain-svg.inline {
+  display: inline-flex;
+}
+
+.post-img-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.post-image {
+  object-fit: contain;
+  max-width: 400px;
+  max-height: 400px;
+  min-width: 200px;
+  min-height: 200px;
+  flex: 1 1 0%;
+  width: auto;
+  height: auto;
+}
+
+.thread-info-container {
+  grid-area: thread-info-container;
+  background-color: #ced9ee;
+  padding: 5px 20px;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 110px;
+  mask-image: linear-gradient(180deg, #000 60%, transparent);
+}
+
+.thread-info-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 5px;
+}
+
+.thread-info-bookmark-button {
+  margin-left: auto !important;
+}
+
+.thread-info-post-preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline;
+  margin-right: 25%;
+}
+
+.guide-section {
+  background-color: #ced9ee;
+  padding: 5px 20px;
+  border: 1px solid black;
+  padding-right: 25%;
+}
+
+.guide-container {
+  display: grid;
+  grid-template-columns: 1.5fr 300px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "guide-topics guide-toc";
+}
+
+.guide-topics {
+  grid-area: guide-topics;
+  overflow: hidden;
+}
+
+.guide-toc {
+  grid-area: guide-toc;
+  position: sticky;
+  top: 100px;
+  align-self: start;
+  padding: 10px;
+  border-bottom-right-radius: 8px;
+  background-color: #eecee9;
+  border-right: 1px solid black;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+}
+
+.emoji-table tr td {
+  text-align: center;
+}
+
+.emoji-table tr th {
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+.emoji-table {
+  margin: auto;
+}
+
+.emoji-table, th, td {
+  border: 1px solid black;
+  border-collapse: collapse;
+}
+
+.colorful-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.colorful-table tr th {
+  background-color: #eee3ce;
+  padding: 5px 0;
+}
+
+.colorful-table tr td {
+  background-color: #eecee9;
+  padding: 5px 0;
+  text-align: center;
+}
+
+.colorful-table .small {
+  width: 250px;
+}
+
+.topic {
+  display: grid;
+  grid-template-columns: 1.5fr 96px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "topic-info-container topic-locked-container";
+}
+
+.topic-info-container {
+  grid-area: topic-info-container;
+  background-color: #ced9ee;
+  padding: 5px 20px;
+  border: 1px solid black;
+  display: flex;
+  flex-direction: column;
+}
+
+.topic-locked-container {
+  grid-area: topic-locked-container;
+  border: 2px outset rgb(231.36, 234, 239.04);
+  background-color: none;
+}
+
+.draggable-topic {
+  cursor: pointer;
+  user-select: none;
+  background-color: #ced9ee;
+  padding: 20px;
+  margin: 15px 0;
+  border-top: 5px outset rgb(231.36, 234, 239.04);
+  border-bottom: 5px outset rgb(136.0836363636, 149.3636363636, 174.7163636364);
+}
+.draggable-topic.dragged {
+  background-color: #eecee9;
+}
+
+.draggable-collection {
+  cursor: pointer;
+  user-select: none;
+  background-color: #ced9ee;
+  padding: 20px;
+  margin: 15px 0;
+  border-top: 5px outset rgb(231.36, 234, 239.04);
+  border-bottom: 5px outset rgb(136.0836363636, 149.3636363636, 174.7163636364);
+}
+.draggable-collection.dragged {
+  background-color: #eecee9;
+}
+.draggable-collection.default {
+  background-color: #eee3ce;
+}
+
+.editing {
+  background-color: rgb(231.36, 234, 239.04);
+}
+
+.context-explain {
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.post-edit-form {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  height: 100%;
+}
+
+.babycode-editor {
+  height: 150px;
+}
+
+.babycode-editor-container {
+  width: 100%;
+}
+
+.babycode-preview-errors-container {
+  font-size: 0.8rem;
+}
+
+.tab-button {
+  background-color: #eecee9;
+  color: black !important;
+}
+.tab-button:hover {
+  background-color: rgb(241.4, 215.8, 237.4);
+}
+.tab-button:active {
+  background-color: rgb(207.8290909091, 191.7709090909, 205.32);
+}
+.tab-button:disabled {
+  background-color: rgb(233.02, 230.78, 232.67);
+}
+.tab-button.reduced {
+  margin: 0;
+  padding: 5px;
+}
+.tab-button.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
+.tab-button {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: 0;
+}
+.tab-button.active {
+  background-color: #eee3ce;
+  padding-top: 8px;
+}
+
+.tab-content {
+  display: none;
+}
+.tab-content.active {
+  min-height: 250px;
+  display: block;
+  background-color: rgb(231.4, 224.9375, 212.6);
+  border: 1px solid black;
+  padding: 10px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+ul, ol {
+  margin: 10px 0 10px 30px;
+  padding: 0;
+}
+
+ul.horizontal, ol.horizontal {
+  display: inline;
+  margin-left: 0;
+}
+ul.horizontal li, ol.horizontal li {
+  display: inline list-item;
+}
+
+.new-concept-notification.hidden {
+  display: none;
+}
+
+.new-concept-notification {
+  position: fixed;
+  bottom: 80px;
+  right: 80px;
+  border: 1px solid black;
+  background-color: #81a3e6;
+  padding: 20px 15px;
+  border-radius: 8px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+}
+
+.emoji {
+  max-width: 15px;
+  max-height: 15px;
+}
+
+.accordion {
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  border: 1px solid black;
+  margin: 10px 5px;
+  overflow: hidden;
+}
+
+.accordion.hidden {
+  border-bottom: none;
+}
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  background-color: rgb(216.0886363636, 176.9113636364, 177.3194602273);
+  padding: 0 10px;
+  gap: 10px;
+  border-bottom: 1px solid black;
+}
+
+.accordion-toggle {
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+}
+
+.accordion-title {
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.accordion-content {
+  padding: 0 15px;
+}
+
+.accordion-content.hidden {
+  display: none;
+}
+
+.post-accordion-content {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: rgb(183.7418181818, 194.7818181818, 215.8581818182);
+}
+
+.inbox-container {
+  padding: 10px;
+}
+
+.babycode-button-container {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+
+.babycode-button {
+  padding: 5px 10px;
+  min-width: 36px;
+}
+.babycode-button > * {
+  font-size: 1rem;
+}
+
+.quote-popover {
+  position: absolute;
+  transform: translateX(-50%);
+  margin: 0;
+  border: none;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.5019607843);
+  padding: 5px 10px;
+}
+
+footer {
+  border-top: 1px solid black;
+}
+
+.reaction-button.active {
+  background-color: #eee3ce;
+  color: black !important;
+}
+.reaction-button.active:hover {
+  background-color: rgb(241.4, 232.6, 215.8);
+}
+.reaction-button.active:active {
+  background-color: rgb(207.8290909091, 202.3090909091, 191.7709090909);
+}
+.reaction-button.active:disabled {
+  background-color: rgb(233.02, 232.25, 230.78);
+}
+.reaction-button.active.reduced {
+  margin: 0;
+  padding: 5px;
+}
+.reaction-button.active.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
+
+.reaction-popover {
+  position: relative;
+  margin: 0;
+  border: none;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.5019607843);
+  padding: 5px 10px;
+  width: 250px;
+}
+
+.reaction-popover-inner {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: scroll;
+  margin: auto;
+  justify-content: center;
+}
+
+.guide-list {
+  border-bottom: 1px dashed;
+}
+
+.bookmark-dropdown-inner {
+  position: relative;
+}
+
+.bookmarks-dropdown {
+  background-color: #ced9ee;
+  border: 1px solid black;
+  border-radius: 8px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+  position: absolute;
+  margin: 0;
+  min-width: 400px;
+  max-width: 400px;
+  padding: 10px;
+  z-index: 100;
+  color: unset;
+}
+
+.bookmark-dropdown-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  margin: 10px 0;
+  cursor: pointer;
+  border: 1px solid black;
+  border-radius: 8px;
+  color: black;
+  background-color: #eecee9;
+}
+.bookmark-dropdown-item:hover {
+  background-color: rgb(241.4, 215.8, 237.4);
+}
+.bookmark-dropdown-item::before {
+  content: "";
+  background-color: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%2221%22%20height%3D%2221%22%20rx%3D%223%22%20stroke%3D%22currentColor%22%20stroke-width%3D%223%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
+  width: 24px;
+  height: 24px;
+  padding: 0 20px;
+  flex-shrink: 0;
+}
+.bookmark-dropdown-item.selected {
+  background-color: #eee3ce;
+}
+.bookmark-dropdown-item.selected:hover {
+  background-color: rgb(241.4, 232.6, 215.8);
+}
+.bookmark-dropdown-item.selected::before {
+  mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%2221%22%20height%3D%2221%22%20rx%3D%223%22%20stroke%3D%22currentColor%22%20stroke-width%3D%223%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%222%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
+}
+
+.bookmarks-dropdown-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.bookmark-dropdown-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bookmark-dropdown-item-stats {
+  padding: 0 10px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.bookmark-dropdown-items-container {
+  max-height: 300px;
+  overflow: scroll;
+}
+
+.motd {
+  display: flex;
+  background-color: #ced9ee;
+  border: 2px outset rgb(231.36, 234, 239.04);
+  padding: 10px 15px;
+  margin: 10px 0;
+}
+
+.motd-icon-container {
+  display: flex;
+  min-width: 80px;
+  padding-right: 15px;
+}
+
+.motd-content-container {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  flex-grow: 1;
+  padding-right: 25%;
+}
+
+.motd-title {
+  font-weight: bold;
+  font-size: larger;
+}
+
+a.mention, a.mention:visited {
+  display: inline-block;
+  color: white;
+  background-color: rgb(136.0836363636, 149.3636363636, 174.7163636364);
+  padding: 5px;
+  border-radius: 8px;
+  text-decoration: none;
+}
+a.mention.display, a.mention:visited.display {
+  text-decoration: underline;
+  text-decoration-style: dashed;
+}
+a.mention.me, a.mention:visited.me {
+  background-color: rgb(174.7163636364, 136.0836363636, 168.68);
+  border: 1px dashed;
+}
+a.mention:hover, a.mention:visited:hover {
+  background-color: rgb(239.24, 241, 244.36);
+  color: black;
+}
+
+.settings-grid {
+  display: grid;
+  gap: 10px;
+  --grid-item-max-width: calc((100% - 10px) / 2);
+  grid-template-columns: repeat(auto-fill, minmax(max(400px, var(--grid-item-max-width)), 1fr));
+}
+.settings-grid fieldset {
+  border: 1px solid white;
+  border-radius: 8px;
+  background-color: rgb(187.6595454545, 188.3232954545, 189.5904545455);
+}
+
+.hfc {
+  height: fit-content;
+}
+
+h1 {
+  margin: 0;
+}
diff --git a/sass/snow-white.scss b/sass/snow-white.scss
new file mode 100644
index 0000000..40af455
--- /dev/null
+++ b/sass/snow-white.scss
@@ -0,0 +1,10 @@
+// a simple light theme
+// and just a bit more rounded
+
+@use 'default' with (
+  $ACCENT_COLOR: #ced9ee,
+  $link_color: #711579,
+  $link_color_visited: #4a144f,
+
+  $DEFAULT_BORDER_RADIUS: 8px,
+)