fix subscription unread count calculation

Dockerfile

@@ -1,11 +1,11 @@
-FROM python:3.11-slim
+FROM python:3.13-slim
 
 RUN apt-get update && apt-get install -y \
     nginx \
     uwsgi \
     uwsgi-plugin-python3 \
     sqlite3 \
-    libargon2-0 \
+    libargon2-1 \
     imagemagick \
     && rm -rf /var/lib/apt/lists/*
 

THIRDPARTY.md

@@ -25,7 +25,7 @@ Designers: Paul James Miller
 
 ## ICONCINO
 
-Affected files: [`data/static/misc/error.svg`](./data/static/misc/error.svg) [`data/static/misc/image.svg`](./data/static/misc/image.svg) [`data/static/misc/info.svg`](./data/static/misc/info.svg) [`data/static/misc/lock.svg`](./data/static/misc/lock.svg) [`data/static/misc/sticky.svg`](./data/static/misc/sticky.svg) [`data/static/misc/warn.svg`](./data/static/misc/warn.svg)  
+Affected files: [`data/static/misc/error.svg`](./data/static/misc/error.svg) [`data/static/misc/image.svg`](./data/static/misc/image.svg) [`data/static/misc/info.svg`](./data/static/misc/info.svg) [`data/static/misc/lock.svg`](./data/static/misc/lock.svg) [`data/static/misc/spoiler.svg`](./data/static/misc/spoiler.svg) [`data/static/misc/sticky.svg`](./data/static/misc/sticky.svg) [`data/static/misc/warn.svg`](./data/static/misc/warn.svg)  
 URL: https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license  
 Copyright: Gabriele Malaspina  
 Designers: Gabriele Malaspina  

app/__init__.py

@@ -1,15 +1,15 @@
 from flask import Flask, session
 from dotenv import load_dotenv
-from .models import Avatars, Users
+from .models import Avatars, Users, PostHistory, Posts
 from .auth import digest
-from .routes.users import is_logged_in, get_active_user
+from .routes.users import is_logged_in, get_active_user, get_prefers_theme
 from .routes.threads import get_post_url
 from .constants import (
     PermissionLevel, permission_level_string,
     InfoboxKind, InfoboxIcons, InfoboxHTMLClass,
     REACTION_EMOJI,
     )
-from .lib.babycode import babycode_to_html, EMOJI
+from .lib.babycode import babycode_to_html, EMOJI, BABYCODE_VERSION
 from datetime import datetime
 import os
 import time
@@ -48,6 +48,23 @@ def create_deleted_user():
             "permission": PermissionLevel.SYSTEM.value,
         })
 
+def reparse_posts():
+    from .db import db
+    post_histories = PostHistory.findall([
+        ('markup_language', '=', 'babycode'),
+        ('format_version', 'IS NOT', BABYCODE_VERSION)
+        ])
+    if len(post_histories) == 0:
+        return
+    print('Re-parsing babycode, this may take a while...')
+    with db.transaction():
+        for ph in post_histories:
+            ph.update({
+                'content': babycode_to_html(ph['original_markup']),
+                'format_version': BABYCODE_VERSION,
+                })
+    print('Re-parsing done.')
+
 def create_app():
     app = Flask(__name__)
     app.config.from_file('../config/pyrom_config.toml', load=tomllib.load, text=False)
@@ -66,6 +83,18 @@ def create_app():
     app.config['MAX_CONTENT_LENGTH'] = 1000 * 1000
 
     os.makedirs(os.path.dirname(app.config["DB_PATH"]), exist_ok = True)
+
+    css_dir = 'data/static/css/'
+    allowed_themes = []
+    for f in os.listdir(css_dir):
+        if not os.path.isfile(os.path.join(css_dir, f)):
+            continue
+        theme_name = os.path.splitext(os.path.basename(f))[0]
+        allowed_themes.append(theme_name)
+
+    allowed_themes.sort(key=(lambda x: (x != 'style', x)))
+    app.config['allowed_themes'] = allowed_themes
+
     with app.app_context():
         from .schema import create as create_tables
         from .migrations import run_migrations
@@ -76,6 +105,8 @@ def create_app():
         create_admin()
         create_deleted_user()
 
+        reparse_posts()
+
     from app.routes.app import bp as app_bp
     from app.routes.topics import bp as topics_bp
     from app.routes.threads import bp as threads_bp
@@ -121,6 +152,7 @@ def create_app():
     def inject_funcs():
         return {
             'get_post_url': get_post_url,
+            'get_prefers_theme': get_prefers_theme,
         }
 
     @app.template_filter("ts_datetime")
@@ -159,4 +191,11 @@ def create_app():
     def cachebust(subject):
         return f"{subject}?v={str(int(time.time()))}"
 
+    @app.template_filter('theme_name')
+    def get_theme_name(subject: str):
+        if subject == 'style':
+            return 'Default'
+
+        return f'{subject.removeprefix('theme-').capitalize()} (beta)'
+
     return app

app/db.py

@@ -202,9 +202,9 @@ class Model:
 
 
     @classmethod
-    def findall(cls, condition):
+    def findall(cls, condition, operator='='):
         rows = db.QueryBuilder(cls.table)\
-            .where(condition)\
+            .where(condition, operator)\
             .all()
         res = []
         for row in rows:

app/lib/babycode.py

@@ -1,7 +1,9 @@
 from .babycode_parser import Parser
-from markupsafe import escape
+from markupsafe import Markup, escape
 import re
 
+BABYCODE_VERSION = 3
+
 NAMED_COLORS = [
     'black', 'silver', 'gray', 'white', 'maroon', 'red',
     'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow',
@@ -33,7 +35,23 @@ NAMED_COLORS = [
     'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen',
 ]
 
-def tag_code(children, attr):
+def is_tag(e, tag=None):
+    if e is None:
+        return False
+    if isinstance(e, str):
+        return False
+    if e['type'] != 'bbcode':
+        return False
+
+    if tag is None:
+        return True
+
+    return e['name'] == tag
+
+def is_text(e):
+    return isinstance(e, str)
+
+def tag_code(children, attr, surrounding):
     is_inline = children.find('\n') == -1
     if is_inline:
         return f"<code class=\"inline-code\">{children}</code>"
@@ -47,7 +65,7 @@ def tag_list(children):
     list_body = re.sub(r"\n\n+", "\1", list_body)
     return " ".join([f"<li>{x}</li>" for x in list_body.split("\1") if x])
 
-def tag_color(children, attr):
+def tag_color(children, attr, surrounding):
     hex_re = r"^#?([0-9a-f]{6}|[0-9a-f]{3})$"
     potential_color = attr.lower().strip()
 
@@ -61,25 +79,48 @@ def tag_color(children, attr):
     # return just the way it was if we can't parse it
     return f"[color={attr}]{children}[/color]"
 
+def tag_spoiler(children, attr, surrounding):
+    spoiler_name = attr if attr else "Spoiler"
+    content = f"<div class='accordion-content post-accordion-content hidden'>{children}</div>"
+    container = f"""<div class='accordion hidden'><div class='accordion-header'><button type='button' class='accordion-toggle'>+</button><span>{spoiler_name}</span></div>{content}</div>"""
+    return container
+
+def tag_image(children, attr, surrounding):
+    img = f"<img class=\"post-image\" src=\"{attr}\" alt=\"{children}\">"
+    if not is_tag(surrounding[0], 'img'):
+        img = f"<div class=post-img-container>{img}"
+    if not is_tag(surrounding[1], 'img'):
+        img = f"{img}</div>"
+    return img
+
 TAGS = {
-    "b": lambda children, attr: f"<strong>{children}</strong>",
+    "b": lambda children, attr, _: f"<strong>{children}</strong>",
-    "i": lambda children, attr: f"<em>{children}</em>",
+    "i": lambda children, attr, _: f"<em>{children}</em>",
-    "s": lambda children, attr: f"<del>{children}</del>",
+    "s": lambda children, attr, _: f"<del>{children}</del>",
-    "u": lambda children, attr: f"<u>{children}</u>",
+    "u": lambda children, attr, _: f"<u>{children}</u>",
 
-    "img": lambda children, attr: f"<div class=\"post-img-container\"><img class=\"block-img\" src=\"{attr}\" alt=\"{children}\"></div>",
+    "img": tag_image,
-    "url": lambda children, attr: f"<a href={attr}>{children}</a>",
+    "url": lambda children, attr, _: f"<a href={attr}>{children}</a>",
-    "quote": lambda children, attr: f"<blockquote>{children}</blockquote>",
+    "quote": lambda children, attr, _: f"<blockquote>{children}</blockquote>",
     "code": tag_code,
-    "ul": lambda children, attr: f"<ul>{tag_list(children)}</ul>",
+    "ul": lambda children, attr, _: f"<ul>{tag_list(children)}</ul>",
-    "ol": lambda children, attr: f"<ol>{tag_list(children)}</ol>",
+    "ol": lambda children, attr, _: f"<ol>{tag_list(children)}</ol>",
 
-    "big": lambda children, attr: f"<span style='font-size: 2rem;'>{children}</span>",
+    "big": lambda children, attr, _: f"<span style='font-size: 2rem;'>{children}</span>",
-    "small": lambda children, attr: f"<span style='font-size: 0.75rem;'>{children}</span>",
+    "small": lambda children, attr, _: f"<span style='font-size: 0.75rem;'>{children}</span>",
     "color": tag_color,
 
-    "center": lambda children, attr: f"<div style='text-align: center;'>{children}</div>",
+    "center": lambda children, attr, _: f"<div style='text-align: center;'>{children}</div>",
-    "right": lambda children, attr: f"<div style='text-align: right;'>{children}</div>",
+    "right": lambda children, attr, _: f"<div style='text-align: right;'>{children}</div>",
+
+    "spoiler": tag_spoiler,
+}
+
+# [img] is considered block for the purposes of collapsing whitespace,
+# despite being potentially inline (since the resulting <img> tag is inline, but creates a block container around itself and sibling images).
+# [code] has a special case in is_inline().
+INLINE_TAGS = {
+    'b', 'i', 's', 'u', 'color', 'big', 'small', 'url'
 }
 
 def make_emoji(name, code):
@@ -138,6 +179,33 @@ def break_lines(text):
     text = re.sub(r"\n\n+", "<br><br>", text)
     return text
 
+def is_inline(e):
+    if e is None:
+        return False # i think
+
+    if is_text(e):
+        return True
+
+    if is_tag(e):
+        if is_tag(e, 'code'): # special case, since [code] can be inline OR block
+            return '\n' not in e['children']
+
+        return e['name'] in INLINE_TAGS
+
+    return e['type'] != 'rule'
+
+def should_collapse(text, surrounding):
+    if not isinstance(text, str):
+        return False
+
+    if not text:
+        return True
+
+    if not text.strip() and '\n' not in text:
+        return not is_inline(surrounding[0]) and not is_inline(surrounding[1])
+
+    return False
+
 def babycode_to_html(s):
     subj = escape(s.strip().replace('\r\n', '\n').replace('\r', '\n'))
     parser = Parser(subj)
@@ -145,10 +213,19 @@ def babycode_to_html(s):
     parser.bbcode_tags_only_text_children = TEXT_ONLY
     parser.valid_emotes = EMOJI.keys()
 
-    elements = parser.parse()
+    uncollapsed = parser.parse()
-    print(elements)
+    elements = []
+    for i in range(len(uncollapsed)):
+        e = uncollapsed[i]
+        surrounding = (
+            uncollapsed[i - 1] if i-1 >= 0 else None,
+            uncollapsed[i + 1] if i+1 < len(uncollapsed) else None
+            )
+        if not should_collapse(e, surrounding):
+            elements.append(e)
+
     out = ""
-    def fold(element, nobr):
+    def fold(element, nobr, surrounding):
         if isinstance(element, str):
             if nobr:
                 return element
@@ -157,10 +234,15 @@ def babycode_to_html(s):
         match element['type']:
             case "bbcode":
                 c = ""
-                for child in element['children']:
+                for i in range(len(element['children'])):
+                    child = element['children'][i]
+                    _surrounding = (
+                        element['children'][i - 1] if i-1 >= 0 else None,
+                        element['children'][i + 1] if i+1 < len(element['children']) else None
+                        )
                     _nobr = element['name'] == "code" or element['name'] == "ul" or element['name'] == "ol"
-                    c = c + fold(child, _nobr)
+                    c = c + Markup(fold(child, _nobr, _surrounding))
-                res = TAGS[element['name']](c, element['attr'])
+                res = TAGS[element['name']](c, element['attr'], surrounding)
                 return res
             case "link":
                 return f"<a href=\"{element['url']}\">{element['url']}</a>"
@@ -168,6 +250,12 @@ def babycode_to_html(s):
                 return EMOJI[element['name']]
             case "rule":
                 return "<hr>"
-    for e in elements:
+
-        out = out + fold(e, False)
+    for i in range(len(elements)):
+        e = elements[i]
+        surrounding = (
+            elements[i - 1] if i-1 >= 0 else None,
+            elements[i + 1] if i+1 < len(elements) else None
+            )
+        out = out + fold(e, False, surrounding)
     return out

app/lib/babycode_parser.py

@@ -4,7 +4,7 @@ import re
 
 PAT_EMOTE = r"[^\s:]"
 PAT_BBCODE_TAG = r"\w"
-PAT_BBCODE_ATTR = r"[^\s\]]"
+PAT_BBCODE_ATTR = r"[^\]]"
 PAT_LINK = r"https?:\/\/[\w\-_.?:\/=&~@#%]+[\w\-\/]"
 
 class Parser:
@@ -193,9 +193,10 @@ class Parser:
         self.save_position()
 
         # extract printable chars (extreme hack edition)
-        word = self.match_pattern(r'[ -~]')
+        word = self.match_pattern(r'[!-~]')
 
-        if not re.match(PAT_LINK, word):
+        match = re.match(PAT_LINK, word)
+        if not match:
             self.restore_position()
             return None
 

app/migrations.py

@@ -10,6 +10,7 @@ MIGRATIONS = [
     migrate_old_avatars,
     'DELETE FROM sessions', # delete old lua porom sessions
     'ALTER TABLE "users" ADD COLUMN "invited_by" INTEGER REFERENCES users(id)', # invitation system
+    'ALTER TABLE "post_history" ADD COLUMN "format_version" INTEGER DEFAULT NULL',
 ]
 
 def run_migrations():

app/models.py

@@ -178,7 +178,7 @@ class Topics(Model):
 
         q = """
             SELECT
-                threads.title, threads.slug, threads.created_at, threads.is_locked, threads.is_stickied,
+                threads.id, threads.title, threads.slug, threads.created_at, threads.is_locked, threads.is_stickied,
                 users.username AS started_by,
             u.username AS latest_post_username,
                 ph.content AS latest_post_content,
@@ -251,6 +251,16 @@ class Avatars(Model):
 class Subscriptions(Model):
     table = "subscriptions"
 
+    def get_unread_count(self):
+        q = """SELECT COUNT(*) AS unread_count
+            FROM posts
+            LEFT JOIN subscriptions ON subscriptions.thread_id = posts.thread_id
+            WHERE subscriptions.user_id = ? AND posts.created_at > subscriptions.last_seen AND posts.thread_id = ?"""
+        res = db.fetch_one(q, self.user_id, self.thread_id)
+        if res:
+            return res['unread_count']
+        return None
+
 class APIRateLimits(Model):
     table = 'api_rate_limits'
 

app/routes/posts.py

@@ -2,7 +2,7 @@ from flask import (
     Blueprint, redirect, url_for, flash, render_template, request
     )
 from .users import login_required, get_active_user
-from ..lib.babycode import babycode_to_html
+from ..lib.babycode import babycode_to_html, BABYCODE_VERSION
 from ..constants import InfoboxKind
 from ..db import db
 from ..models import Posts, PostHistory, Threads, Topics
@@ -11,6 +11,7 @@ bp = Blueprint("posts", __name__, url_prefix = "/post")
 
 
 def create_post(thread_id, user_id, content, markup_language="babycode"):
+    parsed_content = babycode_to_html(content)
     with db.transaction():
         post = Posts.create({
             "thread_id": thread_id,
@@ -20,10 +21,11 @@ def create_post(thread_id, user_id, content, markup_language="babycode"):
 
         revision = PostHistory.create({
             "post_id": post.id,
-            "content": babycode_to_html(content),
+            "content": parsed_content,
             "is_initial_revision": True,
             "original_markup": content,
             "markup_language": markup_language,
+            "format_version": BABYCODE_VERSION,
         })
 
         post.update({"current_revision_id": revision.id})
@@ -31,14 +33,16 @@ def create_post(thread_id, user_id, content, markup_language="babycode"):
 
 
 def update_post(post_id, new_content, markup_language='babycode'):
+    parsed_content = babycode_to_html(new_content)
     with db.transaction():
         post = Posts.find({'id': post_id})
         new_revision = PostHistory.create({
             'post_id': post.id,
-            'content': babycode_to_html(new_content),
+            'content': parsed_content,
             'is_initial_revision': False,
             'original_markup': new_content,
             'markup_language': markup_language,
+            'format_version': BABYCODE_VERSION,
         })
 
         post.update({'current_revision_id': new_revision.id})

app/routes/threads.py

@@ -54,12 +54,14 @@ def thread(slug):
     other_topics = Topics.select()
 
     is_subscribed = False
+    unread_count = None
     if is_logged_in():
         subscription = Subscriptions.find({
             'thread_id': thread.id,
             'user_id': get_active_user().id,
         })
         if subscription:
+            unread_count = subscription.get_unread_count()
             if int(posts[-1]['created_at']) > int(subscription.last_seen):
                 subscription.update({
                     'last_seen': int(posts[-1]['created_at'])
@@ -76,6 +78,7 @@ def thread(slug):
         topics = other_topics,
         is_subscribed = is_subscribed,
         Reactions = Reactions,
+        unread_count = unread_count,
     )
 
 

app/routes/topics.py

@@ -1,8 +1,8 @@
 from flask import (
     Blueprint, render_template, request, redirect, url_for, flash, session
     )
-from .users import login_required, mod_only
+from .users import login_required, mod_only, get_active_user, is_logged_in
-from ..models import Users, Topics, Threads
+from ..models import Users, Topics, Threads, Subscriptions
 from ..constants import InfoboxKind
 from slugify import slugify
 import time
@@ -62,9 +62,21 @@ def topic(slug):
     page_count = max(math.ceil(threads_count / THREADS_PER_PAGE), 1)
     page = max(1, min(int(request.args.get('page', default=1)), page_count))
 
+    threads_list = target_topic.get_threads(THREADS_PER_PAGE, page, sort_by)
+    subscriptions = {}
+    if is_logged_in():
+        for thread in threads_list:
+            subscription = Subscriptions.find({
+                'user_id': get_active_user().id,
+                'thread_id': thread['id'],
+                })
+            if subscription:
+                subscriptions[thread['id']] = subscription.get_unread_count()
+
     return render_template(
         "topics/topic.html",
-        threads_list = target_topic.get_threads(THREADS_PER_PAGE, page, sort_by),
+        threads_list = threads_list,
+        subscriptions = subscriptions,
         topic = target_topic,
         current_page = page,
         page_count = page_count

app/routes/users.py

@@ -165,6 +165,15 @@ def admin_only(*args, **kwargs):
     return decorator
 
 
+def get_prefers_theme():
+    if not 'theme' in session:
+        return 'style'
+
+    if session['theme'] not in current_app.config['allowed_themes']:
+        return 'style'
+
+    return session['theme']
+
 @bp.get("/log_in")
 @redirect_if_logged_in(".page", username = lambda: get_active_user().username)
 def log_in():
@@ -288,6 +297,12 @@ def settings_form(username):
     # we silently ignore the passed username
     # and grab the correct user from the session
     user = get_active_user()
+    theme = request.form.get('theme', default='style')
+    if theme == 'style':
+        if 'theme' in session:
+            session.pop('theme')
+    else:
+        session['theme'] = theme
     topic_sort_by = request.form.get('topic_sort_by', default='activity')
     if topic_sort_by == 'activity' or topic_sort_by == 'thread':
         sort_by = session['sort_by'] = topic_sort_by

app/templates/babycode.html

@@ -126,8 +126,9 @@
         <code class="inline-code">[img=https://forum.poto.cafe/avatars/default.webp]the Python logo with a cowboy hat[/img]</code>
         {{ '[img=/static/avatars/default.webp]the Python logo with a cowboy hat[/img]' | babycode | safe }}
         </p>
-        <p>Text inside the tag becomes the alt text. The attribute is the image URL.</p>
+        <p>Text inside the tag becomes the alt text. The attribute is the image URL. The text inside the tag will become the image's alt text.</p>
-        <p>Images will always break up a paragraph and will get scaled down to a maximum of 400px. The text inside the tag will become the image's alt text.</p>
+        <p>Images will always break up a paragraph and will get scaled down to a maximum of 400px. However, consecutive image tags will try to stay in one line, wrapping if necessary. Break the paragraph if you wish to keep images on their own paragraph.</p>
+        <p>Multiple images attached to a post can be clicked to open a dialog to view them.</p>
       </section>
       <section class="babycode-guide-section">
         <h2 id="adding-code-blocks">Adding code blocks</h2>
@@ -151,6 +152,15 @@
         Will produce the following list:
         {{ list | babycode | safe }}
       </section>
+      <section class="babycode-guide-section">
+      <h2 id="spoilers">Spoilers</h2>
+      {% set spoiler = "[spoiler=Major Metal Gear Spoilers]Snake dies[/spoiler]" %}
+      <p>You can make a section collapsible by using the <code class="inline-code">[spoiler]</code> tag:</p>
+      {{ ("[code]\n%s[/code]" % spoiler) | babycode | safe }}
+      Will produce:
+      {{ spoiler | babycode | safe }}
+      All other tags are supported inside spoilers.
+      </section>
     {% endset %}
     {{ sections | safe }}
   </div>

app/templates/base.html

@@ -8,7 +8,7 @@
   {% else %}
     <title>{{config.SITE_NAME}}</title>
   {% endif %}
-  <link rel="stylesheet" href="{{ "/static/style.css" | cachebust }}">
+  <link rel="stylesheet" href="{{ ("/static/css/%s.css" % get_prefers_theme()) | cachebust }}">
   <link rel="icon" type="image/png" href="/static/favicon.png">
 </head>
 <body>

app/templates/common/macros.html

@@ -59,6 +59,7 @@
       <button class="babycode-button contain-svg full" type=button id="post-editor-img" title="Insert Image"><img src="/static/misc/image.svg"></button>
       <button class="babycode-button" type=button id="post-editor-ol" title="Insert Ordered list">1.</button>
       <button class="babycode-button" type=button id="post-editor-ul" title="Insert Unordered list">&bullet;</button>
+      <button class="babycode-button contain-svg full" type=button id="post-editor-spoiler" title="Insert spoiler"><img src="/static/misc/spoiler.svg"></button>
     </span>
     <textarea class="babycode-editor" name="{{ ta_name }}" id="babycode-content" placeholder="{{ ta_placeholder }}" {{ "required" if not optional else "" }}>{{ prefill }}</textarea>
     <a href="{{ url_for("app.babycode_guide") }}" target="_blank">babycode guide</a>

app/templates/threads/thread.html

@@ -12,7 +12,7 @@
 {% endif %}
 <main>
   <nav class="darkbg">
-    <h1 class="thread-title">{{ thread.title }}</h1>
+    <h1 class="thread-title">{{ thread.title }}{% if unread_count is not none %} ({{ unread_count }} unread){% endif %}</h1>
     <span>Posted in <a href="{{ url_for("topics.topic", slug=topic.slug) }}">{{ topic.name }}</a>
     {% if thread.is_stickied %}
       &bullet; <i>stickied, so it's probably important</i>

app/templates/topics/topic.html

@@ -40,6 +40,9 @@
       <div class="thread-info-container">
         <span>
           <span class="thread-title"><a href="{{ url_for("threads.thread", slug=thread['slug']) }}">{{thread['title']}}</a></span>
+          {% if thread['id'] in subscriptions %}
+          ({{ subscriptions[thread['id']] }} unread)
+          {% endif %}
           &bullet;
           Started by <a href="{{ url_for("users.page", username=thread['started_by']) }}">{{ thread['started_by'] }}</a> on {{ timestamp(thread['created_at'])}}
         </span>

app/templates/users/settings.html

@@ -15,6 +15,12 @@
     </div>
   </form>
   <form method='post'>
+    <label for='theme'>Theme (beta)</label>
+    <select autocomplete='off' id='theme' name='theme'>
+      {% for theme in config.allowed_themes %}
+        <option value="{{ theme }}" {{ 'selected' if get_prefers_theme() == theme }}>{{ theme | theme_name }}</option>
+      {% endfor %}
+    </select>
     <label for='topic_sort_by'>Sort threads by:</label>
     <select id='topic_sort_by' name='topic_sort_by'>
       <option value='activity' {{ 'selected' if session['sort_by'] == 'activity' else '' }}>Latest activity</option>

build-themes.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+set -e
+
+sass_dir="sass"
+css_dir="data/static/css"
+
+if [[ "$1" == "--watch" && -n "$2" ]]; then
+  file="$2"
+  [[ $(basename "$file") = _* ]] && exit 1
+  sass --no-source-map --watch "$file" "$css_dir/theme-$(basename "$file" .scss).css"
+else
+  set -u
+  rm -r "$css_dir/"
+  #build default first
+  sass --no-source-map "$sass_dir/_default.scss" "$css_dir/style.css"
+  for file in "$sass_dir"/*.scss; do
+    [[ $(basename "$file") = _* ]] && continue
+    sass --no-source-map "$file" "$css_dir/theme-$(basename "$file" .scss).css"
+  done
+fi

data/static/css/style.css

@@ -28,12 +28,11 @@
 }
 .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;
-  color: black;
   font-size: 0.9em;
   font-family: "Cadman";
   text-decoration: none;
   border: 1px solid black;
-  border-radius: 3px;
+  border-radius: 4px;
   padding: 5px 20px;
   margin: 10px 0;
 }
@@ -42,6 +41,14 @@ body {
   font-family: "Cadman";
   margin: 20px 100px;
   background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
+  color: black;
+}
+
+a:link {
+  color: #c11c1c;
+}
+a:visited {
+  color: #730c0c;
 }
 
 .big {
@@ -50,6 +57,7 @@ body {
 
 #topnav {
   padding: 10px;
+  margin: 0;
   display: flex;
   justify-content: end;
   background-color: #c1ceb1;
@@ -59,6 +67,7 @@ body {
 
 #bottomnav {
   padding: 10px;
+  margin: 0;
   display: flex;
   justify-content: end;
   background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016);
@@ -81,7 +90,7 @@ body {
   font-size: 3rem;
   margin: 0 20px;
   text-decoration: none;
-  color: black;
+  color: black !important;
 }
 
 .thread-title {
@@ -120,7 +129,7 @@ body {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: min-content 1fr min-content;
-  gap: 0px 0px;
+  gap: 0;
   grid-auto-flow: row;
   grid-template-areas: "post-info" "post-content" "post-reactions";
   grid-area: post-content-container;
@@ -136,6 +145,7 @@ body {
   align-items: center;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
+  background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
 }
 
 .post-content {
@@ -185,51 +195,6 @@ pre code {
   tab-size: 4;
 }
 
-.inline-code {
-  background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
-  color: white;
-  padding: 5px 10px;
-  display: inline-block;
-  margin: 4px;
-  border-radius: 4px;
-  font-size: 1rem;
-}
-
-#delete-dialog, .lightbox-dialog {
-  padding: 0;
-  border-radius: 4px;
-  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: #c1ceb1;
-  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;
-}
-
 .copy-code-container {
   position: sticky;
   width: calc(100% - 4px);
@@ -254,6 +219,53 @@ pre code {
   margin-right: 10px;
 }
 
+.inline-code {
+  background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
+  color: white;
+  padding: 5px 10px;
+  display: inline-block;
+  margin: 4px;
+  border-radius: 4px;
+  font-size: 1rem;
+  white-space: pre;
+}
+
+#delete-dialog, .lightbox-dialog {
+  padding: 0;
+  border-radius: 4px;
+  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: #c1ceb1;
+  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;
@@ -290,9 +302,9 @@ blockquote {
 }
 
 .user-page-posts {
-  border-left: solid 1px black;
+  border-left: 1px solid black;
-  border-right: solid 1px black;
+  border-right: 1px solid black;
-  border-bottom: solid 1px black;
+  border-bottom: 1px solid black;
   background-color: #c1ceb1;
 }
 
@@ -319,6 +331,7 @@ blockquote {
 button, input[type=submit], .linkbutton {
   display: inline-block;
   background-color: rgb(177, 206, 204.5);
+  color: black !important;
 }
 button:hover, input[type=submit]:hover, .linkbutton:hover {
   background-color: rgb(192.6, 215.8, 214.6);
@@ -334,8 +347,8 @@ button.reduced, input[type=submit].reduced, .linkbutton.reduced {
   padding: 5px;
 }
 button.critical, input[type=submit].critical, .linkbutton.critical {
-  color: white;
   background-color: red;
+  color: white !important;
 }
 button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
   background-color: #ff3333;
@@ -352,6 +365,7 @@ button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critic
 }
 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);
@@ -369,7 +383,8 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
 
 input[type=file]::file-selector-button {
   background-color: rgb(177, 206, 204.5);
-  margin: 10px 10px;
+  color: black !important;
+  margin: 10px;
 }
 input[type=file]::file-selector-button:hover {
   background-color: rgb(192.6, 215.8, 214.6);
@@ -391,6 +406,7 @@ p {
 
 .pagebutton {
   background-color: rgb(177, 206, 204.5);
+  color: black !important;
   padding: 5px 5px;
   margin: 0;
   display: inline-block;
@@ -425,7 +441,7 @@ p {
 }
 
 .login-container > * {
-  width: 25%;
+  width: 40%;
   margin: auto;
 }
 
@@ -443,11 +459,12 @@ p {
 
 input[type=text], input[type=password], textarea, select {
   border: 1px solid black;
-  border-radius: 3px;
+  border-radius: 4px;
   padding: 7px 10px;
   width: 100%;
   box-sizing: border-box;
   resize: vertical;
+  color: black;
   background-color: rgb(217.8, 225.6, 208.2);
 }
 input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
@@ -458,12 +475,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   border: 2px solid black;
   background-color: #81a3e6;
   padding: 20px 15px;
+  color: black;
 }
 .infobox.critical {
-  background-color: rgb(237, 129, 129);
+  background-color: #ed8181;
+  color: black;
 }
 .infobox.warn {
   background-color: #fbfb8d;
+  color: black;
 }
 
 .infobox > span {
@@ -480,7 +500,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   display: grid;
   grid-template-columns: 96px 1.6fr 96px;
   grid-template-rows: 1fr;
-  gap: 0px 0px;
+  gap: 0;
   grid-auto-flow: row;
   min-height: 96px;
   grid-template-areas: "thread-sticky-container thread-info-container thread-locked-container";
@@ -489,11 +509,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
 .thread-sticky-container {
   grid-area: thread-sticky-container;
   border: 2px outset rgb(217.26, 220.38, 213.42);
+  background-color: none;
 }
 
 .thread-locked-container {
   grid-area: thread-locked-container;
   border: 2px outset rgb(217.26, 220.38, 213.42);
+  background-color: none;
 }
 
 .contain-svg {
@@ -511,10 +533,21 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   width: 100%;
 }
 
-.block-img {
+.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 {
@@ -548,7 +581,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   display: grid;
   grid-template-columns: 1.5fr 300px;
   grid-template-rows: 1fr;
-  gap: 0px 0px;
+  gap: 0;
   grid-auto-flow: row;
   grid-template-areas: "guide-topics guide-toc";
 }
@@ -615,7 +648,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   display: grid;
   grid-template-columns: 1.5fr 96px;
   grid-template-rows: 1fr;
-  gap: 0px 0px;
+  gap: 0;
   grid-auto-flow: row;
   grid-template-areas: "topic-info-container topic-locked-container";
 }
@@ -632,6 +665,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
 .topic-locked-container {
   grid-area: topic-locked-container;
   border: 2px outset rgb(217.26, 220.38, 213.42);
+  background-color: none;
 }
 
 .draggable-topic {
@@ -639,9 +673,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   user-select: none;
   background-color: #c1ceb1;
   padding: 20px;
-  margin: 12px 0;
+  margin: 15px 0;
-  border-top: 6px outset rgb(217.26, 220.38, 213.42);
+  border-top: 5px outset rgb(217.26, 220.38, 213.42);
-  border-bottom: 6px outset rgb(135.1928346457, 145.0974015748, 123.0025984252);
+  border-bottom: 5px outset rgb(135.1928346457, 145.0974015748, 123.0025984252);
 }
 .draggable-topic.dragged {
   background-color: rgb(177, 206, 204.5);
@@ -679,6 +713,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
 
 .tab-button {
   background-color: rgb(177, 206, 204.5);
+  color: black !important;
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
@@ -711,9 +746,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   background-color: rgb(191.3137931034, 189.7, 193.3);
   border: 1px solid black;
   padding: 10px;
-  border-top-right-radius: 3px;
+  border-top-right-radius: 4px;
-  border-bottom-right-radius: 3px;
+  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 3px;
+  border-bottom-left-radius: 4px;
 }
 
 ul, ol {
@@ -729,7 +764,7 @@ ul, ol {
   position: fixed;
   bottom: 80px;
   right: 80px;
-  border: 2px solid black;
+  border: 1px solid black;
   background-color: #81a3e6;
   padding: 20px 15px;
   border-radius: 4px;
@@ -742,8 +777,8 @@ ul, ol {
 }
 
 .accordion {
-  border-top-right-radius: 3px;
+  border-top-right-radius: 4px;
-  border-top-left-radius: 3px;
+  border-top-left-radius: 4px;
   box-sizing: border-box;
   border: 1px solid black;
   margin: 10px 5px;
@@ -786,6 +821,12 @@ ul, ol {
   display: none;
 }
 
+.post-accordion-content {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
+}
+
 .inbox-container {
   padding: 10px;
 }
@@ -820,6 +861,7 @@ footer {
 
 .reaction-button.active {
   background-color: #beb1ce;
+  color: black !important;
 }
 .reaction-button.active:hover {
   background-color: rgb(203, 192.6, 215.8);
@@ -840,7 +882,7 @@ footer {
   margin: 0;
   border: none;
   border-radius: 4px;
-  background-color: rgba(0, 0, 0, 0.6901960784);
+  background-color: rgba(0, 0, 0, 0.5019607843);
   padding: 5px 10px;
   width: 250px;
 }

data/static/css/theme-otomotone.css

@@ -1,99 +1,54 @@
-@use "sass:color";
-
 @font-face {
   font-family: "site-title";
   src: url("/static/fonts/ChicagoFLF.woff2");
 }
-
+@font-face {
-@mixin cadman($var) {
   font-family: "Cadman";
-  src: url("/static/fonts/Cadman_#{$var}.woff2");
+  src: url("/static/fonts/Cadman_Roman.woff2");
-}
-
-@font-face {
-  @include cadman("Roman");
   font-weight: normal;
   font-style: normal;
 }
-
 @font-face {
-  @include cadman("Bold");
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Bold.woff2");
   font-weight: bold;
   font-style: normal;
 }
-
 @font-face {
-  @include cadman("Italic");
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Italic.woff2");
   font-weight: normal;
   font-style: italic;
 }
-
 @font-face {
-  @include cadman("BoldItalic");
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_BoldItalic.woff2");
   font-weight: bold;
   font-style: italic;
 }
-
+.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 {
-$accent_color: #c1ceb1;
-
-$dark_bg: color.scale($accent_color, $lightness: -25%, $saturation: -97%);
-$dark2: color.scale($accent_color, $lightness: -30%, $saturation: -60%);
-$verydark: color.scale($accent_color, $lightness: -80%, $saturation: -70%);
-
-$light: color.scale($accent_color, $lightness: 40%, $saturation: -60%);
-$lighter: color.scale($accent_color, $lightness: 60%, $saturation: -60%);
-
-$main_bg: color.scale($accent_color, $lightness: -10%, $saturation: -40%);
-$button_color: color.adjust($accent_color, $hue: 90);
-$button_color2: color.adjust($accent_color, $hue: 180);
-$accordion_color: color.adjust($accent_color, $hue: 140, $lightness: -10%, $saturation: -15%);
-
-%button-base {
   cursor: default;
-  color: black;
   font-size: 0.9em;
   font-family: "Cadman";
   text-decoration: none;
   border: 1px solid black;
-  border-radius: 3px;
+  border-radius: 4px;
   padding: 5px 20px;
   margin: 10px 0;
 }
 
-@mixin button($color) {
-  @extend %button-base;
-  background-color: $color;
-  
-  &:hover {
-    background-color: color.scale($color, $lightness: 20%);
-  }
-  
-  &:active {
-    background-color: color.scale($color, $lightness: -10%, $saturation: -70%);
-  }
-  
-  &:disabled {
-    background-color: color.scale($color, $lightness: 30%, $saturation: -90%);
-  }
-
-  &.reduced {
-    margin: 0;
-    padding: 5px;
-  }
-}
-
-@mixin navbar($color) {
-  padding: 10px;
-  display: flex;
-  justify-content: end;
-  background-color: $color;
-}
-
 body {
   font-family: "Cadman";
-  // font-size: 18px;
   margin: 20px 100px;
-  background-color: $main_bg;
+  background-color: #220d16;
+  color: #e6e6e6;
+}
+
+a:link {
+  color: #e87fe1;
+}
+a:visited {
+  color: #ed4fb1;
 }
 
 .big {
@@ -101,20 +56,28 @@ body {
 }
 
 #topnav {
-  @include navbar($accent_color);
+  padding: 10px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: #303030;
   justify-content: space-between;
   align-items: baseline;
 }
 
 #bottomnav {
-  @include navbar($dark_bg);
+  padding: 10px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: #231c23;
 }
 
 .darkbg {
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
-  background-color: $dark_bg;
+  background-color: #502d50;
 }
 
 .user-actions {
@@ -127,7 +90,7 @@ body {
   font-size: 3rem;
   margin: 0 20px;
   text-decoration: none;
-  color: black;
+  color: white !important;
 }
 
 .thread-title {
@@ -142,16 +105,15 @@ body {
   grid-template-rows: 1fr;
   gap: 0;
   grid-auto-flow: row;
-  grid-template-areas:
+  grid-template-areas: "usercard post-content-container";
-    "usercard post-content-container";
+  border: 2px outset rgb(96.95, 81.55, 96.95);
-  border: 2px outset $dark2;
 }
 
 .usercard {
   grid-area: usercard;
   padding: 20px 10px;
-  border: 4px outset $light;
+  border: 4px outset #503250;
-  background-color: $dark_bg;
+  background-color: #502d50;
   border-right: solid 2px;
 }
 
@@ -167,14 +129,10 @@ body {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: min-content 1fr min-content;
-  gap: 0px 0px;
+  gap: 0;
   grid-auto-flow: row;
-  grid-template-areas:
+  grid-template-areas: "post-info" "post-content" "post-reactions";
-    "post-info"
-    "post-content"
-    "post-reactions";
   grid-area: post-content-container;
-
   min-height: 100%;
 }
 
@@ -187,6 +145,7 @@ body {
   align-items: center;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
+  background-color: #412841;
 }
 
 .post-content {
@@ -195,9 +154,7 @@ body {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background-color: $accent_color;
+  background-color: #231c23;
-
-  // min-height: 0;
 }
 
 .post-reactions {
@@ -208,17 +165,16 @@ body {
   align-items: center;
   flex-wrap: wrap;
   gap: 5px;
-  background-color: $main_bg;
+  background-color: #503250;
   border-top: 2px dotted gray;
 }
 
 .post-inner {
   height: 100%;
   padding-right: 25%;
-
-  &.wider {
-    padding-right: 12.5%;
 }
+.post-inner.wider {
+  padding-right: 12.5%;
 }
 
 .signature-container {
@@ -228,25 +184,50 @@ body {
 
 pre code {
   display: block;
-  background-color: $verydark;
+  background-color: #302731;
   font-size: 1rem;
   color: white;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
-  border-left: 10px solid $lighter;
+  border-left: 10px solid #ae6bae;
   padding: 20px;
   overflow: scroll;
   tab-size: 4;
 }
 
+.copy-code-container {
+  position: sticky;
+  width: calc(100% - 4px);
+  display: flex;
+  justify-content: space-between;
+  align-items: last baseline;
+  font-family: "Cadman";
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  background-color: #9b649b;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+  border-top: 2px solid black;
+}
+.copy-code-container::before {
+  content: "code block";
+  font-style: italic;
+  margin-left: 10px;
+}
+
+.copy-code {
+  margin-right: 10px;
+}
+
 .inline-code {
-  background-color: $verydark;
+  background-color: #302731;
   color: white;
   padding: 5px 10px;
   display: inline-block;
   margin: 4px;
   border-radius: 4px;
   font-size: 1rem;
+  white-space: pre;
 }
 
 #delete-dialog, .lightbox-dialog {
@@ -268,7 +249,8 @@ pre code {
   flex-direction: column;
   padding: 20px;
   min-width: 400px;
-  background-color: $accent_color;
+  background-color: #503250;
+  color: #e6e6e6;
   gap: 10px;
 }
 
@@ -284,39 +266,12 @@ pre code {
   align-items: center;
 }
 
-.copy-code-container {
-  position: sticky;
-  // width: 100%;
-  width: calc(100% - 4px);
-  display: flex;
-  justify-content: space-between;
-  align-items: last baseline;
-  font-family: "Cadman";
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
-  background-color: $accent_color;
-  border-left: 2px solid black;
-  border-right: 2px solid black;
-  border-top: 2px solid black;
-  
-  &::before {
-    content: "code block";
-    font-style: italic;
-    margin-left: 10px;
-  }
-}
-
-.copy-code {
-  margin-right: 10px;
-}
-
 blockquote {
   padding: 10px 20px;
   margin: 10px;
   border-radius: 4px;
-  border-left: 10px solid $lighter;
+  border-left: 10px solid #ae6bae;
-  // background-color: $dark2;
+  background-color: rgba(251, 175, 207, 0.0392156863);
-  background-color: #00000026;
 }
 
 .user-info {
@@ -324,15 +279,14 @@ blockquote {
   grid-template-columns: 300px 1fr;
   grid-template-rows: 1fr;
   gap: 0;
-  grid-template-areas:
+  grid-template-areas: "user-page-usercard user-page-stats";
-    "user-page-usercard user-page-stats";
 }
 
 .user-page-usercard {
   grid-area: user-page-usercard;
   padding: 20px 10px;
-  border: 4px outset $light;
+  border: 4px outset #503250;
-  background-color: $dark_bg;
+  background-color: #502d50;
   border-right: solid 2px;
 }
 
@@ -348,10 +302,10 @@ blockquote {
 }
 
 .user-page-posts {
-  border-left: solid 1px black;
+  border-left: 1px solid black;
-  border-right: solid 1px black;
+  border-right: 1px solid black;
-  border-bottom: solid 1px black;
+  border-bottom: 1px solid black;
-  background-color: $accent_color;
+  background-color: #9b649b;
 }
 
 .user-page-post-preview {
@@ -374,24 +328,76 @@ blockquote {
   text-align: center;
 }
 
-button, input[type="submit"], .linkbutton {
+button, input[type=submit], .linkbutton {
   display: inline-block;
-  @include button($button_color);
+  background-color: #3c283c;
-  
+  color: #e6e6e6 !important;
-  &.critical {
+}
-    color: white;
+button:hover, input[type=submit]:hover, .linkbutton:hover {
-    @include button(red);
+  background-color: rgb(109.2, 72.8, 109.2);
+}
+button:active, input[type=submit]:active, .linkbutton:active {
+  background-color: rgb(47.7, 42.3, 47.7);
+}
+button:disabled, input[type=submit]:disabled, .linkbutton:disabled {
+  background-color: rgb(113.73, 109.27, 113.73);
+}
+button.reduced, input[type=submit].reduced, .linkbutton.reduced {
+  margin: 0;
+  padding: 5px;
+}
+button.critical, input[type=submit].critical, .linkbutton.critical {
+  background-color: #d53232;
+  color: #e6e6e6 !important;
+}
+button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
+  background-color: rgb(221.4, 91, 91);
+}
+button.critical:active, input[type=submit].critical:active, .linkbutton.critical:active {
+  background-color: rgb(141.7804251012, 94.9195748988, 94.9195748988);
+}
+button.critical:disabled, input[type=submit].critical:disabled, .linkbutton.critical:disabled {
+  background-color: rgb(174.255, 162.845, 162.845);
+}
+button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critical.reduced {
+  margin: 0;
+  padding: 5px;
+}
+button.warn, input[type=submit].warn, .linkbutton.warn {
+  background-color: #eaea6a;
+  color: black !important;
+}
+button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
+  background-color: rgb(238.2, 238.2, 135.8);
+}
+button.warn:active, input[type=submit].warn:active, .linkbutton.warn:active {
+  background-color: rgb(176.04, 176.04, 129.96);
+}
+button.warn:disabled, input[type=submit].warn:disabled, .linkbutton.warn:disabled {
+  background-color: rgb(199.98, 199.98, 191.02);
+}
+button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
+  margin: 0;
+  padding: 5px;
 }
 
-  &.warn {
+input[type=file]::file-selector-button {
-    @include button(#fbfb8d);
+  background-color: #3c283c;
+  color: #e6e6e6 !important;
+  margin: 10px;
 }
+input[type=file]::file-selector-button:hover {
+  background-color: rgb(109.2, 72.8, 109.2);
 }
-
+input[type=file]::file-selector-button:active {
-// not sure why this one has to be separate, but if it's included in the rule above everything breaks
+  background-color: rgb(47.7, 42.3, 47.7);
-input[type="file"]::file-selector-button {
+}
-  @include button($button_color);
+input[type=file]::file-selector-button:disabled {
-  margin: 10px 10px;
+  background-color: rgb(113.73, 109.27, 113.73);
+}
+input[type=file]::file-selector-button.reduced {
+  margin: 0;
+  padding: 5px;
 }
 
 p {
@@ -399,16 +405,29 @@ p {
 }
 
 .pagebutton {
-  @include button($button_color);
+  background-color: #3c283c;
+  color: #e6e6e6 !important;
   padding: 5px 5px;
   margin: 0;
   display: inline-block;
   min-width: 20px;
   text-align: center;
 }
+.pagebutton:hover {
+  background-color: rgb(109.2, 72.8, 109.2);
+}
+.pagebutton:active {
+  background-color: rgb(47.7, 42.3, 47.7);
+}
+.pagebutton:disabled {
+  background-color: rgb(113.73, 109.27, 113.73);
+}
+.pagebutton.reduced {
+  margin: 0;
+  padding: 5px;
+}
 
 .currentpage {
-  @extend %button-base;
   border: none;
   padding: 5px 5px;
   margin: 0;
@@ -422,7 +441,7 @@ p {
 }
 
 .login-container > * {
-  width: 25%;
+  width: 40%;
   margin: auto;
 }
 
@@ -438,32 +457,33 @@ p {
   padding: 20px 0;
 }
 
-input[type="text"], input[type="password"], textarea, select {
+input[type=text], input[type=password], textarea, select {
   border: 1px solid black;
-  border-radius: 3px;
+  border-radius: 4px;
   padding: 7px 10px;
   width: 100%;
   box-sizing: border-box;
   resize: vertical;
-  background-color: color.scale($accent_color, $lightness: 40%);
+  color: #e6e6e6;
-  
+  background-color: #371e37;
-  &:focus {
-    background-color: color.scale($accent_color, $lightness: 60%);
 }
+input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
+  background-color: #514151;
 }
 
 .infobox {
   border: 2px solid black;
-  background-color: #81a3e6;
+  background-color: #775891;
   padding: 20px 15px;
-  
+  color: #e6e6e6;
-  &.critical {
-    background-color: rgb(237, 129, 129);
 }
-  
+.infobox.critical {
-  &.warn {
+  background-color: #d53232;
-    background-color: #fbfb8d;
+  color: #e6e6e6;
 }
+.infobox.warn {
+  background-color: #eaea6a;
+  color: black;
 }
 
 .infobox > span {
@@ -480,21 +500,22 @@ input[type="text"], input[type="password"], textarea, select {
   display: grid;
   grid-template-columns: 96px 1.6fr 96px;
   grid-template-rows: 1fr;
-  gap: 0px 0px;
+  gap: 0;
   grid-auto-flow: row;
   min-height: 96px;
-  grid-template-areas:
+  grid-template-areas: "thread-sticky-container thread-info-container thread-locked-container";
-    "thread-sticky-container thread-info-container thread-locked-container";
 }
 
 .thread-sticky-container {
   grid-area: thread-sticky-container;
-  border: 2px outset $light;
+  border: 2px outset #231c23;
+  background-color: #503250;
 }
 
 .thread-locked-container {
   grid-area: thread-locked-container;
-  border: 2px outset $light;
+  border: 2px outset #231c23;
+  background-color: #503250;
 }
 
 .contain-svg {
@@ -502,25 +523,36 @@ input[type="text"], input[type="password"], textarea, select {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  &:not(.full) > svg, &:not(.full) > img {
+}
+.contain-svg:not(.full) > svg, .contain-svg:not(.full) > img {
   height: 50%;
   width: 50%;
 }
-  &.full > svg, &.full > img {
+.contain-svg.full > svg, .contain-svg.full > img {
   height: 100%;
   width: 100%;
 }
+
+.post-img-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
 }
 
-.block-img {
+.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: $accent_color;
+  background-color: #231c23;
   padding: 5px 20px;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
@@ -539,7 +571,7 @@ input[type="text"], input[type="password"], textarea, select {
 }
 
 .babycode-guide-section {
-  background-color: $accent_color;
+  background-color: #231c23;
   padding: 5px 20px;
   border: 1px solid black;
   padding-right: 25%;
@@ -549,10 +581,9 @@ input[type="text"], input[type="password"], textarea, select {
   display: grid;
   grid-template-columns: 1.5fr 300px;
   grid-template-rows: 1fr;
-  gap: 0px 0px;
+  gap: 0;
   grid-auto-flow: row;
-  grid-template-areas:
+  grid-template-areas: "guide-topics guide-toc";
-    "guide-topics guide-toc";
 }
 
 .guide-topics {
@@ -566,9 +597,8 @@ input[type="text"], input[type="password"], textarea, select {
   top: 100px;
   align-self: start;
   padding: 10px;
-  // border-top-right-radius: 16px;
   border-bottom-right-radius: 8px;
-  background-color: $button_color;
+  background-color: #3c233c;
   border-right: 1px solid black;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
@@ -600,12 +630,12 @@ input[type="text"], input[type="password"], textarea, select {
 }
 
 .colorful-table tr th {
-  background-color: $button_color2;
+  background-color: #503250;
   padding: 5px 0;
 }
 
 .colorful-table tr td {
-  background-color: $button_color;
+  background-color: #231c23;
   padding: 5px 0;
   text-align: center;
 }
@@ -618,15 +648,14 @@ input[type="text"], input[type="password"], textarea, select {
   display: grid;
   grid-template-columns: 1.5fr 96px;
   grid-template-rows: 1fr;
-  gap: 0px 0px;
+  gap: 0;
   grid-auto-flow: row;
-  grid-template-areas:
+  grid-template-areas: "topic-info-container topic-locked-container";
-    "topic-info-container topic-locked-container";
 }
 
 .topic-info-container {
   grid-area: topic-info-container;
-  background-color: $accent_color;
+  background-color: #231c23;
   padding: 5px 20px;
   border: 1px solid black;
   display: flex;
@@ -635,26 +664,25 @@ input[type="text"], input[type="password"], textarea, select {
 
 .topic-locked-container {
   grid-area: topic-locked-container;
-  border: 2px outset $light;
+  border: 2px outset #231c23;
+  background-color: #503250;
 }
 
-
 .draggable-topic {
   cursor: pointer;
   user-select: none;
-  background-color: $accent_color;
+  background-color: #9b649b;
   padding: 20px;
-  margin: 12px 0;
+  margin: 15px 0;
-  border-top: 6px outset $light;
+  border-top: 5px outset #503250;
-  border-bottom: 6px outset $dark2;
+  border-bottom: 5px outset rgb(96.95, 81.55, 96.95);
-  
-  &.dragged {
-    background-color: $button_color;
 }
+.draggable-topic.dragged {
+  background-color: #3c283c;
 }
 
 .editing {
-  background-color: $light;
+  background-color: #503250;
 }
 
 .context-explain {
@@ -684,31 +712,43 @@ input[type="text"], input[type="password"], textarea, select {
 }
 
 .tab-button {
-  @include button($button_color);
+  background-color: #3c283c;
+  color: #e6e6e6 !important;
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   margin-bottom: 0;
-  
-  &.active {
-    background-color: $button_color2;
-    padding-top: 8px;
 }
+.tab-button:hover {
+  background-color: rgb(109.2, 72.8, 109.2);
+}
+.tab-button:active {
+  background-color: rgb(47.7, 42.3, 47.7);
+}
+.tab-button:disabled {
+  background-color: rgb(113.73, 109.27, 113.73);
+}
+.tab-button.reduced {
+  margin: 0;
+  padding: 5px;
+}
+.tab-button.active {
+  background-color: #8a5584;
+  padding-top: 8px;
 }
 
 .tab-content {
   display: none;
-  
+}
-  &.active {
+.tab-content.active {
   min-height: 250px;
   display: block;
-    background-color: color.adjust($button_color2, $saturation: -20%);
+  background-color: #503250;
   border: 1px solid black;
   padding: 10px;
-    border-top-right-radius: 3px;
+  border-top-right-radius: 4px;
-    border-bottom-right-radius: 3px;
+  border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 3px;
+  border-bottom-left-radius: 4px;
-  }
 }
 
 ul, ol {
@@ -724,8 +764,8 @@ ul, ol {
   position: fixed;
   bottom: 80px;
   right: 80px;
-  border: 2px solid black;
+  border: 1px solid black;
-  background-color: #81a3e6;
+  background-color: #775891;
   padding: 20px 15px;
   border-radius: 4px;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
@@ -737,8 +777,8 @@ ul, ol {
 }
 
 .accordion {
-  border-top-right-radius: 3px;
+  border-top-right-radius: 4px;
-  border-top-left-radius: 3px;
+  border-top-left-radius: 4px;
   box-sizing: border-box;
   border: 1px solid black;
   margin: 10px 5px;
@@ -752,7 +792,7 @@ ul, ol {
 .accordion-header {
   display: flex;
   align-items: center;
-  background-color: $accordion_color;
+  background-color: #7d467d;
   padding: 0 10px;
   gap: 10px;
   border-bottom: 1px solid black;
@@ -781,6 +821,12 @@ ul, ol {
   display: none;
 }
 
+.post-accordion-content {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: #2d212d;
+}
+
 .inbox-container {
   padding: 10px;
 }
@@ -794,10 +840,9 @@ ul, ol {
 .babycode-button {
   padding: 5px 10px;
   min-width: 36px;
-  
-  &> * {
-    font-size: 1rem;
 }
+.babycode-button > * {
+  font-size: 1rem;
 }
 
 .quote-popover {
@@ -806,7 +851,7 @@ ul, ol {
   margin: 0;
   border: none;
   border-radius: 4px;
-  background-color: #00000080;
+  background-color: rgba(0, 0, 0, 0.5019607843);
   padding: 5px 10px;
 }
 
@@ -815,7 +860,21 @@ footer {
 }
 
 .reaction-button.active {
-  @include button($button_color2);
+  background-color: #8a5584;
+  color: #e6e6e6 !important;
+}
+.reaction-button.active:hover {
+  background-color: rgb(167.4843049327, 112.9156950673, 161.3067264574);
+}
+.reaction-button.active:active {
+  background-color: rgb(107.505, 93.195, 105.885);
+}
+.reaction-button.active:disabled {
+  background-color: rgb(156.9373766816, 152.1626233184, 156.396838565);
+}
+.reaction-button.active.reduced {
+  margin: 0;
+  padding: 5px;
 }
 
 .reaction-popover {
@@ -823,7 +882,7 @@ footer {
   margin: 0;
   border: none;
   border-radius: 4px;
-  background-color: #000000b0;
+  background-color: rgba(0, 0, 0, 0.5019607843);
   padding: 5px 10px;
   width: 250px;
 }
@@ -839,3 +898,12 @@ footer {
 .babycode-guide-list {
   border-bottom: 1px dashed;
 }
+
+#topnav {
+  margin-bottom: 10px;
+  border: 10px solid rgb(40, 40, 40);
+}
+
+footer {
+  margin-top: 10px;
+}

data/static/css/theme-peachy.css

@@ -0,0 +1,929 @@
+@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;
+}
+.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: 0.9em;
+  font-family: "Cadman";
+  text-decoration: none;
+  border: 1px solid black;
+  border-radius: 16px;
+  padding: 8px 12px;
+  margin: 6px 0;
+}
+
+body {
+  font-family: "Cadman";
+  margin: 12px 50px;
+  background-color: #c85d45;
+  color: black;
+}
+
+a:link {
+  color: black;
+}
+a:visited {
+  color: black;
+}
+
+.big {
+  font-size: 1.8rem;
+}
+
+#topnav {
+  padding: 6px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: #f27a5a;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+#bottomnav {
+  padding: 6px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: #88486d;
+}
+
+.darkbg {
+  padding-bottom: 6px;
+  padding-left: 6px;
+  padding-right: 6px;
+  background-color: #88486d;
+}
+
+.user-actions {
+  display: flex;
+  column-gap: 8px;
+}
+
+.site-title {
+  font-family: "site-title";
+  font-size: 3rem;
+  margin: 0 12px;
+  text-decoration: none;
+  color: black !important;
+}
+
+.thread-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.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(155.8907865169, 93.2211235955, 76.5092134831);
+}
+
+.usercard {
+  grid-area: usercard;
+  padding: 12px 6px;
+  border: none;
+  background-color: #88486d;
+  border-right: none;
+}
+
+.usercard-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 6px;
+  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: 35px;
+  justify-content: space-between;
+  padding: 3px 12px;
+  align-items: center;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  background-color: #c85d45;
+}
+
+.post-content {
+  grid-area: post-content;
+  padding: 12px 12px 0 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #f27a5a;
+}
+
+.post-reactions {
+  grid-area: post-reactions;
+  min-height: 50px;
+  display: flex;
+  padding: 6px 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  background-color: #c85d45;
+  border-top: 2px dotted #f7bfdf;
+}
+
+.post-inner {
+  height: 100%;
+  padding-right: 25%;
+}
+.post-inner.wider {
+  padding-right: 12.5%;
+}
+
+.signature-container {
+  border-top: 2px dotted #f7bfdf;
+  padding: 6px 0;
+}
+
+pre code {
+  display: block;
+  background-color: rgb(41.7051685393, 28.2759550562, 24.6948314607);
+  font-size: 1rem;
+  color: white;
+  border-bottom-right-radius: 16px;
+  border-bottom-left-radius: 16px;
+  border-left: 6px solid rgb(231.56, 212.36, 207.24);
+  padding: 12px;
+  overflow: scroll;
+  tab-size: 4;
+}
+
+.copy-code-container {
+  position: sticky;
+  width: calc(100% - 4px);
+  display: flex;
+  justify-content: space-between;
+  align-items: last baseline;
+  font-family: "Cadman";
+  border-top-right-radius: 16px;
+  border-top-left-radius: 16px;
+  background-color: #f27a5a;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+  border-top: 2px solid black;
+}
+.copy-code-container::before {
+  content: "code block";
+  font-style: italic;
+  margin-left: 6px;
+}
+
+.copy-code {
+  margin-right: 6px;
+}
+
+.inline-code {
+  background-color: rgb(41.7051685393, 28.2759550562, 24.6948314607);
+  color: white;
+  padding: 3px 6px;
+  display: inline-block;
+  margin: 4px;
+  border-radius: 16px;
+  font-size: 1rem;
+  white-space: pre;
+}
+
+#delete-dialog, .lightbox-dialog {
+  padding: 0;
+  border-radius: 16px;
+  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: 12px;
+}
+
+.lightbox-inner {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  min-width: 400px;
+  background-color: #f27a5a;
+  color: black;
+  gap: 6px;
+}
+
+.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: 6px 12px;
+  margin: 6px;
+  border-radius: 16px;
+  border-left: 6px solid rgb(231.56, 212.36, 207.24);
+  background-color: rgba(0, 0, 0, 0.1333333333);
+}
+
+.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: 12px 6px;
+  border: none;
+  background-color: #88486d;
+  border-right: none;
+}
+
+.user-page-stats {
+  grid-area: user-page-stats;
+  padding: 12px 16px;
+  border: 1px solid black;
+}
+
+.user-stats-list {
+  list-style: none;
+  margin: 0 0 6px 0;
+}
+
+.user-page-posts {
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  background-color: #f27a5a;
+}
+
+.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: 6px;
+}
+
+.username-link {
+  overflow-wrap: anywhere;
+}
+
+.user-status {
+  text-align: center;
+}
+
+button, input[type=submit], .linkbutton {
+  display: inline-block;
+  background-color: #f27a5a;
+  color: black !important;
+}
+button:hover, input[type=submit]:hover, .linkbutton:hover {
+  background-color: rgb(244.6, 148.6, 123);
+}
+button:active, input[type=submit]:active, .linkbutton:active {
+  background-color: rgb(176.4525842697, 133.7379775281, 122.3474157303);
+}
+button:disabled, input[type=submit]:disabled, .linkbutton:disabled {
+  background-color: rgb(198.02, 189.62, 187.38);
+}
+button.reduced, input[type=submit].reduced, .linkbutton.reduced {
+  margin: 0;
+  padding: 6px;
+}
+button.critical, input[type=submit].critical, .linkbutton.critical {
+  background-color: #f73030;
+  color: white !important;
+}
+button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
+  background-color: rgb(248.6, 89.4, 89.4);
+}
+button.critical:active, input[type=submit].critical:active, .linkbutton.critical:active {
+  background-color: rgb(166.6956976744, 98.8043023256, 98.8043023256);
+}
+button.critical:disabled, input[type=submit].critical:disabled, .linkbutton.critical:disabled {
+  background-color: rgb(186.715, 172.785, 172.785);
+}
+button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critical.reduced {
+  margin: 0;
+  padding: 6px;
+}
+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: 6px;
+}
+
+input[type=file]::file-selector-button {
+  background-color: #f27a5a;
+  color: black !important;
+  margin: 6px;
+}
+input[type=file]::file-selector-button:hover {
+  background-color: rgb(244.6, 148.6, 123);
+}
+input[type=file]::file-selector-button:active {
+  background-color: rgb(176.4525842697, 133.7379775281, 122.3474157303);
+}
+input[type=file]::file-selector-button:disabled {
+  background-color: rgb(198.02, 189.62, 187.38);
+}
+input[type=file]::file-selector-button.reduced {
+  margin: 0;
+  padding: 6px;
+}
+
+p {
+  margin: 8px 0;
+}
+
+.pagebutton {
+  background-color: #f27a5a;
+  color: black !important;
+  padding: 3px 3px;
+  margin: 0;
+  display: inline-block;
+  min-width: 36px;
+  text-align: center;
+}
+.pagebutton:hover {
+  background-color: rgb(244.6, 148.6, 123);
+}
+.pagebutton:active {
+  background-color: rgb(176.4525842697, 133.7379775281, 122.3474157303);
+}
+.pagebutton:disabled {
+  background-color: rgb(198.02, 189.62, 187.38);
+}
+.pagebutton.reduced {
+  margin: 0;
+  padding: 6px;
+}
+
+.currentpage {
+  border: none;
+  padding: 3px 3px;
+  margin: 0;
+  display: inline-block;
+  min-width: 36px;
+  text-align: center;
+}
+
+.modform {
+  display: inline;
+}
+
+.login-container > * {
+  width: 60%;
+  margin: auto;
+}
+
+.settings-container > * {
+  width: 60%;
+  margin: auto;
+}
+
+.avatar-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 0;
+}
+
+input[type=text], input[type=password], textarea, select {
+  border: 1px solid black;
+  border-radius: 16px;
+  padding: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  color: black;
+  background-color: rgb(247.2, 175.2, 156);
+}
+input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
+  background-color: rgb(249.8, 201.8, 189);
+}
+
+.infobox {
+  border: 2px solid black;
+  background-color: #81a3e6;
+  padding: 12px 8px;
+  color: black;
+}
+.infobox.critical {
+  background-color: #f73030;
+  color: white;
+}
+.infobox.warn {
+  background-color: #fbfb8d;
+  color: black;
+}
+
+.infobox > span {
+  display: flex;
+  align-items: center;
+}
+
+.infobox-icon-container {
+  min-width: 60px;
+  padding-right: 8px;
+}
+
+.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: 1px solid black;
+  background-color: #f27a5a;
+}
+
+.thread-locked-container {
+  grid-area: thread-locked-container;
+  border: 1px solid black;
+  background-color: #f27a5a;
+}
+
+.contain-svg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.contain-svg:not(.full) > svg, .contain-svg:not(.full) > img {
+  height: 50%;
+  width: 50%;
+}
+.contain-svg.full > svg, .contain-svg.full > img {
+  height: 100%;
+  width: 100%;
+}
+
+.post-img-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+}
+
+.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: #f27a5a;
+  padding: 3px 12px;
+  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-post-preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline;
+  margin-right: 25%;
+}
+
+.babycode-guide-section {
+  background-color: #f27a5a;
+  padding: 3px 12px;
+  border: 1px solid black;
+  padding-right: 25%;
+}
+
+.babycode-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: 6px;
+  border-bottom-right-radius: 8px;
+  background-color: #f27a5a;
+  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: 6px 0;
+  overflow: hidden;
+}
+
+.colorful-table tr th {
+  background-color: #b54444;
+  padding: 3px 0;
+}
+
+.colorful-table tr td {
+  background-color: #f27a5a;
+  padding: 3px 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: #f27a5a;
+  padding: 3px 12px;
+  border: 1px solid black;
+  display: flex;
+  flex-direction: column;
+}
+
+.topic-locked-container {
+  grid-area: topic-locked-container;
+  border: 1px solid black;
+  background-color: #f27a5a;
+}
+
+.draggable-topic {
+  cursor: pointer;
+  user-select: none;
+  background-color: #f27a5a;
+  padding: 12px;
+  margin: 8px 0;
+  border-top: 5px outset rgb(219.84, 191.04, 183.36);
+  border-bottom: 5px outset rgb(155.8907865169, 93.2211235955, 76.5092134831);
+}
+.draggable-topic.dragged {
+  background-color: #f27a5a;
+}
+
+.editing {
+  background-color: rgb(219.84, 191.04, 183.36);
+}
+
+.context-explain {
+  margin: 12px 0;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.post-edit-form {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  height: 100%;
+}
+
+.babycode-editor {
+  height: 150px;
+  font-size: 1rem;
+}
+
+.babycode-editor-container {
+  width: 100%;
+}
+
+.babycode-preview-errors-container {
+  font-size: 0.8rem;
+}
+
+.tab-button {
+  background-color: #f27a5a;
+  color: black !important;
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: 0;
+}
+.tab-button:hover {
+  background-color: rgb(244.6, 148.6, 123);
+}
+.tab-button:active {
+  background-color: rgb(176.4525842697, 133.7379775281, 122.3474157303);
+}
+.tab-button:disabled {
+  background-color: rgb(198.02, 189.62, 187.38);
+}
+.tab-button.reduced {
+  margin: 0;
+  padding: 6px;
+}
+.tab-button.active {
+  background-color: #b54444;
+  padding-top: 8px;
+}
+
+.tab-content {
+  display: none;
+}
+.tab-content.active {
+  min-height: 250px;
+  display: block;
+  background-color: rgb(156.1, 92.9, 92.9);
+  border: 1px solid black;
+  padding: 6px;
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+  border-bottom-left-radius: 16px;
+}
+
+ul, ol {
+  margin: 6px 0 6px 16px;
+  padding: 0;
+}
+
+.new-concept-notification.hidden {
+  display: none;
+}
+
+.new-concept-notification {
+  position: fixed;
+  bottom: 80px;
+  right: 80px;
+  border: 1px solid black;
+  background-color: #81a3e6;
+  padding: 12px 8px;
+  border-radius: 16px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+}
+
+.emoji {
+  max-width: 15px;
+  max-height: 15px;
+}
+
+.accordion {
+  border-top-right-radius: 16px;
+  border-top-left-radius: 16px;
+  box-sizing: border-box;
+  border: 1px solid black;
+  margin: 6px 3px;
+  overflow: hidden;
+}
+
+.accordion.hidden {
+  border-bottom: none;
+}
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  background-color: #c6655b;
+  padding: 0 6px;
+  gap: 6px;
+  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 8px;
+}
+
+.accordion-content.hidden {
+  display: none;
+}
+
+.post-accordion-content {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  background-color: #c85d45;
+}
+
+.inbox-container {
+  padding: 6px;
+}
+
+.babycode-button-container {
+  display: flex;
+  gap: 3px;
+  flex-wrap: wrap;
+}
+
+.babycode-button {
+  padding: 3px 6px;
+  min-width: 36px;
+}
+.babycode-button > * {
+  font-size: 1rem;
+}
+
+.quote-popover {
+  position: absolute;
+  transform: translateX(-50%);
+  margin: 0;
+  border: none;
+  border-radius: 16px;
+  background-color: rgba(0, 0, 0, 0.5019607843);
+  padding: 3px 6px;
+}
+
+footer {
+  border-top: 1px solid black;
+}
+
+.reaction-button.active {
+  background-color: #b54444;
+  color: white !important;
+}
+.reaction-button.active:hover {
+  background-color: rgb(197.978313253, 103.221686747, 103.221686747);
+}
+.reaction-button.active:active {
+  background-color: rgb(127.305, 96.795, 96.795);
+}
+.reaction-button.active:disabled {
+  background-color: rgb(167.7956024096, 159.5043975904, 159.5043975904);
+}
+.reaction-button.active.reduced {
+  margin: 0;
+  padding: 6px;
+}
+
+.reaction-popover {
+  position: relative;
+  margin: 0;
+  border: none;
+  border-radius: 16px;
+  background-color: rgba(0, 0, 0, 0.5019607843);
+  padding: 3px 6px;
+  width: 250px;
+}
+
+.reaction-popover-inner {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: scroll;
+  margin: auto;
+  justify-content: center;
+}
+
+.babycode-guide-list {
+  border-bottom: 1px dashed;
+}
+
+#topnav {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+
+#bottomnav {
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+  color: white;
+}
+
+textarea {
+  padding: 12px 16px;
+}
+
+footer {
+  margin-top: 10px;
+  border-radius: 16px;
+  border: none;
+  text-align: center;
+}
+
+.darkbg {
+  color: white;
+}
+.darkbg a {
+  color: white;
+}

data/static/js/babycode-editor.js

@@ -48,6 +48,7 @@
   const buttonImg = document.getElementById("post-editor-img");
   const buttonOl = document.getElementById("post-editor-ol");
   const buttonUl = document.getElementById("post-editor-ul");
+  const buttonSpoiler = document.getElementById("post-editor-spoiler");
 
   function insertTag(tagStart, newline = false, prefill = "") {
     const hasAttr = tagStart[tagStart.length - 1] === "=";
@@ -130,6 +131,10 @@
     e.preventDefault();
     insertTag("ul", true);
   })
+  buttonSpoiler.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("spoiler=", true, "hidden content");
+  })
   
   const previewEndpoint = "/api/babycode-preview";
   let previousMarkup = "";
@@ -173,5 +178,8 @@
       const json_resp = await req.json();
       previewContainer.innerHTML = json_resp.html;
       previewErrorsContainer.textContent = "";
+
+      const accordionRefreshEvt = new CustomEvent("refresh_accordions");
+      document.body.dispatchEvent(accordionRefreshEvt);
   });
 }

data/static/js/ui.js

@@ -110,8 +110,13 @@ document.addEventListener("DOMContentLoaded", () => {
   });
   
   // accordions
-  const accordions = document.querySelectorAll(".accordion");
+  const handledAccordions = new Set();
-  accordions.forEach(accordion => {
+  function attachAccordionHandlers(accordion){
+    if(handledAccordions.has(accordion)) {
+      return;
+    }
+
+    handledAccordions.add(accordion)
     const header = accordion.querySelector(".accordion-header");
     const toggleButton = header.querySelector(".accordion-toggle");
     const content = accordion.querySelector(".accordion-content");
@@ -124,12 +129,47 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     toggleButton.addEventListener("click", toggle);
-  });
+  }
+
+  function refreshAccordions(){
+    const accordions = document.querySelectorAll(".accordion");
+    accordions.forEach(attachAccordionHandlers);
+  }
+  refreshAccordions()
+
+  document.body.addEventListener('refresh_accordions', refreshAccordions)
   
   //lightboxes
   lightboxObj = constructLightbox();
   document.body.appendChild(lightboxObj.dialog);
-  const postImages = document.querySelectorAll(".post-inner img.block-img");
+
+  function setImageMaxSize(img) {
+    const {
+      maxWidth: origMaxWidth,
+      maxHeight: origMaxHeight,
+      minWidth: origMinWidth,
+      minHeight: origMinHeight,
+    } = getComputedStyle(img);
+    console.log(img, img.naturalWidth, img.naturalHeight, origMinWidth, origMinHeight, origMaxWidth, origMaxHeight)
+    if (img.naturalWidth < parseInt(origMinWidth)) {
+      console.log(1)
+      img.style.minWidth = img.naturalWidth + "px";
+    }
+    if (img.naturalHeight < parseInt(origMinHeight)) {
+      console.log(2)
+      img.style.minHeight = img.naturalHeight + "px";
+    }
+    if (img.naturalWidth < parseInt(origMaxWidth)) {
+      console.log(3)
+      img.style.maxWidth = img.naturalWidth + "px";
+    }
+    if (img.naturalHeight < parseInt(origMaxHeight)) {
+      console.log(4)
+      img.style.maxHeight = img.naturalHeight + "px";
+    }
+  }
+
+  const postImages = document.querySelectorAll(".post-inner img.post-image");
   postImages.forEach(postImage => {
     const belongingTo = postImage.closest(".post-inner");
     const images = lightboxImages.get(belongingTo) ?? [];
@@ -144,6 +184,14 @@ document.addEventListener("DOMContentLoaded", () => {
       openLightbox(belongingTo, idx);
     });
   });
+  const postAndSigImages = document.querySelectorAll("img.post-image");
+  postAndSigImages.forEach(image => {
+    if (image.complete) {
+      setImageMaxSize(image);
+    } else {
+      image.addEventListener("load", () => setImageMaxSize(image));
+    }
+  })
 
   // copy code blocks
   for (let button of document.querySelectorAll(".copy-code")) {

data/static/misc/spoiler.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L9.87868 9.87868M20 20L14.1213 14.1213M9.87868 9.87868C9.33579 10.4216 9 11.1716 9 12C9 13.6569 10.3431 15 12 15C12.8284 15 13.5784 14.6642 14.1213 14.1213M9.87868 9.87868L14.1213 14.1213M6.76821 6.76821C4.72843 8.09899 2.96378 10.026 2 11.9998C3.74646 15.5764 8.12201 19 11.9998 19C13.7376 19 15.5753 18.3124 17.2317 17.2317M9.76138 5.34717C10.5114 5.12316 11.2649 5 12.0005 5C15.8782 5 20.2531 8.42398 22 12.0002C21.448 13.1302 20.6336 14.2449 19.6554 15.2412" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->

sass/otomotone.scss

@@ -0,0 +1,85 @@
+$fc: #e6e6e6;
+$fci: black;
+
+$lightish_accent: #503250;
+$lightish_accent2: #502d50;
+$dark_accent: #231c23;
+
+$warn: #eaea6a;
+$crit: #d53232;
+
+@use 'default' with (
+  $ACCENT_COLOR: #9b649b,
+
+  $MAIN_BG: #220d16,
+  $DARK_1: $lightish_accent2,
+  $DARK_3: #302731,
+
+  $LIGHT_2: #ae6bae,
+  $LIGHT: $lightish_accent,
+
+  $DEFAULT_FONT_COLOR: $fc,
+  $DEFAULT_FONT_COLOR_INVERSE: $fci,
+
+  $BUTTON_COLOR: #3c283c,
+  $BUTTON_COLOR_2: #8a5584,
+  $BUTTON_FONT_COLOR: $fc,
+  $BUTTON_COLOR_WARN: $warn,
+  $BUTTON_WARN_FONT_COLOR: $fci,
+  $BUTTON_COLOR_CRITICAL: $crit,
+  $BUTTON_CRITICAL_FONT_COLOR: $fc,
+  $ACCORDION_COLOR: #7d467d,
+
+  $bottomnav_color: $dark_accent,
+
+  $topic_info_background: $dark_accent,
+  $topic_locked_background: $lightish_accent,
+  $thread_locked_background: $lightish_accent,
+  $thread_locked_border: 2px outset $dark_accent,
+
+  $site_title_color: white,
+  $topnav_color: #303030,
+
+  $quote_background_color: #fbafcf0a,
+
+  $link_color: #e87fe1,
+  $link_color_visited: #ed4fb1,
+
+  $post_info_background: #412841,
+  $post_content_background: $dark_accent,
+
+  $thread_info_background_color: $dark_accent,
+
+  $post_reactions_background: $lightish_accent,
+
+  $post_accordion_content_background: #2d212d,
+
+  $babycode_guide_toc_background: #3c233c,
+  $babycode_guide_section_background: $dark_accent,
+
+  $text_input_background: #371e37,
+  $text_input_background_focus: #514151,
+  $text_input_font_color: $fc,
+
+  $colorful_table_th_color: $lightish_accent,
+  $colorful_table_td_color: $dark_accent,
+
+  $lightbox_background: $lightish_accent,
+
+  $infobox_info_color: #775891,
+  $infobox_warn_color: $warn,
+  $infobox_warn_font_color: $fci,
+  $infobox_critical_color: $crit,
+
+  $tab_content_background: $lightish_accent,
+  $tab_button_active_color: #8a5584,
+);
+
+#topnav {
+  margin-bottom: 10px;
+  border: 10px solid rgb(40, 40, 40);
+}
+
+footer {
+  margin-top: 10px;
+}

sass/peachy.scss

@@ -0,0 +1,97 @@
+// $accent: #dd5536;
+$accent: #f27a5a;
+
+$br: 16px;
+
+@use 'default' with (
+  $ACCENT_COLOR: $accent,
+  $thread_locked_background: $accent,
+  $topic_locked_background: $accent,
+
+  // $DARK_1: #e36286,
+  $DARK_1: #88486d,
+  $MAIN_BG: #c85d45,
+
+  $usercard_border: none,
+  $usercard_border_right: none,
+  $thread_locked_border: 1px solid black,
+
+  $SETTINGS_WIDTH: 60%,
+  $PAGE_SIDE_MARGIN: 50px,
+
+  $link_color: black,
+  $link_color_visited: black,
+  $reaction_button_active_font_color: white,
+  // $DEFAULT_FONT_COLOR: white,
+  // $DEFAULT_FONT_COLOR_INVERSE: black,
+
+  $text_input_font_color: black,
+
+  $BUTTON_COLOR: $accent,
+  $BUTTON_COLOR_2: #b54444,
+  $BUTTON_COLOR_CRITICAL: #f73030,
+  $ACCORDION_COLOR: #c6655b,
+  $BUTTON_WARN_FONT_COLOR: black,
+  $BUTTON_CRITICAL_FONT_COLOR: white,
+
+  $SMALL_PADDING: 3px,
+  $MEDIUM_PADDING: 6px,
+  $MEDIUM_BIG_PADDING: 8px,
+  $BIG_PADDING: 12px,
+  $BIGGER_PADDING: 16px,
+
+  $DEFAULT_BORDER_RADIUS: $br,
+  $code_border_radius: $br,
+  $button_padding: 8px 12px,
+  $reduced_button_padding: 6px,
+
+  $post_reactions_border_top: 2px dotted #f7bfdf,
+
+  $post_info_min_height: 35px,
+  $post_reactions_padding: 6px 12px,
+  $post_reactions_gap: 6px,
+
+  $text_input_padding: 8px,
+
+  $infobox_info_color: #81a3e6,
+  $infobox_critical_color: #f73030,
+  $infobox_warn_color: #fbfb8d,
+
+  $infobox_info_font_color: black,
+  $infobox_critical_font_color: white,
+  $infobox_warn_font_color: black,
+
+  $pagebutton_min_width: 36px,
+  $quote_background_color: #0002,
+);
+
+#topnav {
+  border-top-left-radius: $br;
+  border-top-right-radius: $br;
+}
+
+#bottomnav {
+  border-bottom-left-radius: $br;
+  border-bottom-right-radius: $br;
+
+  color: white;
+}
+
+textarea {
+  padding: 12px 16px;
+}
+
+footer {
+  margin-top: 10px;
+  border-radius: $br;
+  border: none;
+  text-align: center;
+}
+
+.darkbg {
+  color: white;
+
+  & a {
+    color: white;
+  }
+}