From 3da5952b87089529c219dff383e957097f89c0da Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Mon, 18 May 2026 22:11:09 -0700
Subject: [PATCH] Move bergamot and writing CSS into theme

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
---
 assets/scss/bergamot.scss | 174 ++++++++++++++++++++++++++++++++++++++
 assets/scss/writing.scss  |  47 ++++++++++
 2 files changed, 221 insertions(+)
 create mode 100644 assets/scss/bergamot.scss
 create mode 100644 assets/scss/writing.scss

diff --git a/assets/scss/bergamot.scss b/assets/scss/bergamot.scss
new file mode 100644
index 0000000..df322fc
--- /dev/null
+++ b/assets/scss/bergamot.scss
@@ -0,0 +1,174 @@
+@import "variables.scss";
+@import "mixins.scss";
+
+.bergamot-exercise {
+    counter-increment: bergamot-exercise;
+
+    .bergamot-root {
+        border: none;
+        padding: 0;
+        margin-top: 1em;
+    }
+
+
+    .bergamot-exercise-label {
+        .bergamot-exercise-number::after {
+            content: "Exercise " counter(bergamot-exercise);
+            font-weight: bold;
+            text-decoration: underline;
+        }
+    }
+
+    .bergamot-button {
+        @include bordered-block;
+        padding: 0.25em;
+        padding-left: 1em;
+        padding-right: 1em;
+        background-color: inherit;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: 0.25s;
+        font-family: $font-body;
+        @include var(color, text-color);
+
+        &.bergamot-hidden {
+            display: none;
+        }
+
+        .feather {
+            margin-right: 0.5em;
+        }
+    }
+
+    .bergamot-play {
+        .feather { color: $primary-color; }
+        &:hover, &:focus {
+            .feather { color: lighten($primary-color, 20%); }
+        }
+    }
+
+    .bergamot-reset {
+        .feather { color: #0099CC; }
+        &:hover, &:focus {
+            .feather { color: lighten(#0099CC, 20%); }
+        }
+
+        svg {
+            fill: none;
+        }
+    }
+
+    .bergamot-close {
+        .feather { color: tomato; }
+        &:hover, &:focus {
+            .feather { color: lighten(tomato, 20%); }
+        }
+    }
+
+    .bergamot-button-group {
+        margin-top: 1em;
+    }
+}
+
+.bergamot-root {
+    @include bordered-block;
+    padding: 1em;
+
+    .bergamot-section-heading {
+        margin-bottom: 0.5em;
+        font-family: $font-body;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 1.25em;
+    }
+
+    .bergamot-section {
+        margin-bottom: 1em;
+    }
+
+    textarea {
+        display: block;
+        width: 100%;
+        height: 10em;
+        resize: none;
+    }
+
+    input[type="text"] {
+        width: 100%;
+        @include textual-input;
+    }
+
+    .bergamot-rule-list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .bergamot-rule-list katex-expression {
+        margin-left: .5em;
+        margin-right: .5em;
+        flex-grow: 1;
+        flex-basis: 0;
+    }
+
+    .bergamot-rule-section {
+        .bergamot-rule-section-name {
+            text-align: center;
+            margin: 0.25em;
+            font-weight: bold;
+        }
+    }
+
+    .bergamot-proof-tree {
+        overflow: auto;
+    }
+
+    .bergamot-error {
+        @include bordered-block;
+        padding: 0.5rem;
+        border-color: tomato;
+        background-color: rgba(tomato, 0.25);
+        margin-top: 1rem;
+    }
+
+    .bergamot-selector {
+        button {
+            @include var(background-color, background-color);
+            @include var(color, text-color);
+            @include bordered-block;
+            padding: 0.5rem;
+            font-family: $font-body;
+            border-style: dotted;
+
+            &.active {
+                border-color: $primary-color;
+                border-style: solid;
+                font-weight: bold;
+            }
+
+            &:not(:first-child) {
+                border-bottom-left-radius: 0;
+                border-top-left-radius: 0;
+            }
+
+            &:not(:last-child) {
+                border-bottom-right-radius: 0;
+                border-top-right-radius: 0;
+                border-right-width: 0;
+            }
+        }
+
+        button.active + button {
+            border-left-color: $primary-color;
+            border-left-style: solid;
+        }
+
+        margin-bottom: 1rem;
+    }
+
+    .bergamot-no-proofs {
+        text-align: center;
+    }
+}
diff --git a/assets/scss/writing.scss b/assets/scss/writing.scss
new file mode 100644
index 0000000..7b679f8
--- /dev/null
+++ b/assets/scss/writing.scss
@@ -0,0 +1,47 @@
+@import "variables.scss";
+
+body {
+  background-color: #1c1e26;
+  --text-color: white;
+  font-family: $font-code;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-align: left;
+  font-family: $font-code;
+}
+
+h1::after {
+  content: "(writing)";
+  font-size: 1rem;
+  margin-left: 0.5em;
+  position: relative;
+  bottom: -0.5em;
+  color: $primary-color;
+}
+
+nav .container {
+  justify-content: flex-start;
+
+  a {
+    padding-left: 0;
+    margin-right: 1em;
+  }
+}
+
+.header-divider {
+  visibility: hidden;
+}
+
+hr {
+  height: auto;
+  border: none;
+
+  &::after {
+    content: "* * *";
+    color: $primary-color;
+    font-size: 2rem;
+    display: block;
+    text-align: center;
+  }
+}