From bcd549407e3e9dad0d88789722a7eba4102cad5c Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Mon, 1 Apr 2019 00:39:47 +0200
Subject: [PATCH] feat: create Tildes Baukula

---
 src/tildes-baukula/_blog.scss          | 15 +++++
 src/tildes-baukula/_buttons.scss       | 34 ++++++++++++
 src/tildes-baukula/_code-syntax.scss   | 73 +++++++++++++++++++++++++
 src/tildes-baukula/_colors.scss        | 11 ++++
 src/tildes-baukula/_comments.scss      | 20 +++++++
 src/tildes-baukula/_docs.scss          |  9 +++
 src/tildes-baukula/_extended.scss      |  1 +
 src/tildes-baukula/_html.scss          | 48 ++++++++++++++++
 src/tildes-baukula/_misc.scss          | 76 ++++++++++++++++++++++++++
 src/tildes-baukula/_mixins.scss        | 17 ++++++
 src/tildes-baukula/_settings.scss      |  7 +++
 src/tildes-baukula/_tabs.scss          | 35 ++++++++++++
 src/tildes-baukula/_topic-listing.scss | 13 +++++
 src/tildes-baukula/_topics.scss        | 38 +++++++++++++
 src/tildes-baukula/package.json        | 14 +++++
 src/tildes-baukula/tildes-baukula.scss | 26 +++++++++
 16 files changed, 437 insertions(+)
 create mode 100644 src/tildes-baukula/_blog.scss
 create mode 100644 src/tildes-baukula/_buttons.scss
 create mode 100644 src/tildes-baukula/_code-syntax.scss
 create mode 100644 src/tildes-baukula/_colors.scss
 create mode 100644 src/tildes-baukula/_comments.scss
 create mode 100644 src/tildes-baukula/_docs.scss
 create mode 100644 src/tildes-baukula/_extended.scss
 create mode 100644 src/tildes-baukula/_html.scss
 create mode 100644 src/tildes-baukula/_misc.scss
 create mode 100644 src/tildes-baukula/_mixins.scss
 create mode 100644 src/tildes-baukula/_settings.scss
 create mode 100644 src/tildes-baukula/_tabs.scss
 create mode 100644 src/tildes-baukula/_topic-listing.scss
 create mode 100644 src/tildes-baukula/_topics.scss
 create mode 100644 src/tildes-baukula/package.json
 create mode 100644 src/tildes-baukula/tildes-baukula.scss

diff --git a/src/tildes-baukula/_blog.scss b/src/tildes-baukula/_blog.scss
new file mode 100644
index 0000000..b7050b8
--- /dev/null
+++ b/src/tildes-baukula/_blog.scss
@@ -0,0 +1,15 @@
+&.static-site {
+  .article-summary {
+    border: 1px solid $comment;
+    background-color: $background;
+    padding: 0.8rem;
+
+    h2 {
+      margin: 0 0 0.4rem 0;
+    }
+
+    .text-secondary {
+      color: $comment;
+    }
+  }
+}
diff --git a/src/tildes-baukula/_buttons.scss b/src/tildes-baukula/_buttons.scss
new file mode 100644
index 0000000..f12a7a9
--- /dev/null
+++ b/src/tildes-baukula/_buttons.scss
@@ -0,0 +1,34 @@
+.btn {
+  @include colorHover($cyan, $background);
+
+  &:hover,
+  &.btn-primary:hover {
+    border-color: $pink;
+    background-color: $pink;
+  }
+
+  &.btn-link {
+    @include colorHover($cyan, $background);
+
+    border: 1px solid $cyan;
+
+    &:hover {
+      border-color: $pink;
+      background-color: $pink;
+    }
+  }
+
+  &.btn-used {
+    color: $background;
+    border-color: $pink;
+    background-color: $pink;
+  }
+
+  &-post button {
+    @include colorHover($cyan, $pink);
+
+    &.btn-post-action-used {
+      color: $pink;
+    }
+  }
+}
diff --git a/src/tildes-baukula/_code-syntax.scss b/src/tildes-baukula/_code-syntax.scss
new file mode 100644
index 0000000..246a0e4
--- /dev/null
+++ b/src/tildes-baukula/_code-syntax.scss
@@ -0,0 +1,73 @@
+// This can be removed once issue 370 is fixed
+// https://gitlab.com/tildes/tildes/issues/370
+
+.highlight {
+  .syntax-c   { color: $cyan; }
+  .syntax-err { color: $foreground; }
+  .syntax-g   { color: $foreground; }
+  .syntax-k   { color: $green; }
+  .syntax-l   { color: $foreground; }
+  .syntax-n   { color: $foreground; }
+  .syntax-o   { color: $green; }
+  .syntax-x   { color: $orange; }
+  .syntax-p   { color: $foreground; }
+  .syntax-cm  { color: $cyan; }
+  .syntax-cp  { color: $green; }
+  .syntax-c1  { color: $cyan; }
+  .syntax-cs  { color: $green; }
+  .syntax-gd  { color: $purple; }
+  .syntax-ge  { color: $foreground; }
+  .syntax-gr  { color: $red; }
+  .syntax-gh  { color: $orange; }
+  .syntax-gi  { color: $green; }
+  .syntax-go  { color: $foreground; }
+  .syntax-gp  { color: $foreground; }
+  .syntax-gs  { color: $foreground; }
+  .syntax-gu  { color: $orange; }
+  .syntax-gt  { color: $foreground; }
+  .syntax-kc  { color: $orange; }
+  .syntax-kd  { color: $pink; }
+  .syntax-kn  { color: $green; }
+  .syntax-kp  { color: $green; }
+  .syntax-kr  { color: $pink; }
+  .syntax-kt  { color: $red; }
+  .syntax-ld  { color: $foreground; }
+  .syntax-m   { color: $purple; }
+  .syntax-s   { color: $purple; }
+  .syntax-na  { color: $foreground; }
+  .syntax-nb  { color: $orange; }
+  .syntax-nc  { color: $pink; }
+  .syntax-no  { color: $orange; }
+  .syntax-nd  { color: $pink; }
+  .syntax-ni  { color: $orange; }
+  .syntax-ne  { color: $orange; }
+  .syntax-nf  { color: $pink; }
+  .syntax-nl  { color: $foreground; }
+  .syntax-nn  { color: $foreground; }
+  .syntax-nx  { color: $foreground; }
+  .syntax-py  { color: $foreground; }
+  .syntax-nt  { color: $pink; }
+  .syntax-nv  { color: $pink; }
+  .syntax-ow  { color: $green; }
+  .syntax-w   { color: $foreground; }
+  .syntax-mf  { color: $purple; }
+  .syntax-mh  { color: $purple; }
+  .syntax-mi  { color: $purple; }
+  .syntax-mo  { color: $purple; }
+  .syntax-sb  { color: $cyan; }
+  .syntax-sc  { color: $purple; }
+  .syntax-sd  { color: $foreground; }
+  .syntax-s2  { color: $purple; }
+  .syntax-se  { color: $orange; }
+  .syntax-sh  { color: $foreground; }
+  .syntax-si  { color: $purple; }
+  .syntax-sx  { color: $purple; }
+  .syntax-sr  { color: $red; }
+  .syntax-s1  { color: $purple; }
+  .syntax-ss  { color: $purple; }
+  .syntax-bp  { color: $pink; }
+  .syntax-vc  { color: $pink; }
+  .syntax-vg  { color: $pink; }
+  .syntax-vi  { color: $pink; }
+  .syntax-il  { color: $purple; }
+}
diff --git a/src/tildes-baukula/_colors.scss b/src/tildes-baukula/_colors.scss
new file mode 100644
index 0000000..2fc5c5f
--- /dev/null
+++ b/src/tildes-baukula/_colors.scss
@@ -0,0 +1,11 @@
+$foreground: #f8f8f2;
+$background: #282a36;
+$selection:  #44475a;
+$comment:    #6272a4;
+$red:        #ff5555;
+$orange:     #ffb86c;
+$yellow:     #f1fa8c;
+$green:      #50fa7b;
+$cyan:       #8be9fd;
+$purple:     #bd93f9;
+$pink:       #ff79c6;
diff --git a/src/tildes-baukula/_comments.scss b/src/tildes-baukula/_comments.scss
new file mode 100644
index 0000000..d8effc2
--- /dev/null
+++ b/src/tildes-baukula/_comments.scss
@@ -0,0 +1,20 @@
+.comment {
+  border-color: $background;
+
+  &[data-comment-depth='0'] {
+    border-color: $background;
+  }
+
+  header {
+    background-color: $background;
+  }
+
+  .comment-nav-link,
+  .comment-nav-link:visited {
+    @include colorHover($cyan, $pink);
+  }
+
+  .comment-votes {
+    color: $foreground;
+  }
+}
diff --git a/src/tildes-baukula/_docs.scss b/src/tildes-baukula/_docs.scss
new file mode 100644
index 0000000..d601ccc
--- /dev/null
+++ b/src/tildes-baukula/_docs.scss
@@ -0,0 +1,9 @@
+// Hopefully this combination is only ever used in the docs
+.date-info.text-secondary.text-small {
+  color: $foreground;
+}
+
+.toc {
+  border: 1px solid $comment;
+  background-color: $background;
+}
diff --git a/src/tildes-baukula/_extended.scss b/src/tildes-baukula/_extended.scss
new file mode 100644
index 0000000..4f064eb
--- /dev/null
+++ b/src/tildes-baukula/_extended.scss
@@ -0,0 +1 @@
+// TODO: Styles for Tildes Extended stuff like user labels
diff --git a/src/tildes-baukula/_html.scss b/src/tildes-baukula/_html.scss
new file mode 100644
index 0000000..597328d
--- /dev/null
+++ b/src/tildes-baukula/_html.scss
@@ -0,0 +1,48 @@
+a,
+a:visited {
+  @include colorHover($cyan, $pink)
+}
+
+blockquote {
+  background-color: $background;
+}
+
+pre,
+code {
+  color: $foreground;
+  background-color: $background;
+}
+
+figure,
+section {
+  border-color: $foreground;
+}
+
+input,
+textarea,
+.form-input,
+.form-input:not(:focus) {
+  color: $foreground;
+  border-color: $comment;
+  background-color: $background;
+}
+
+main,
+#sidebar {
+  background-color: $selection;
+}
+
+th {
+  border-color: $comment;
+}
+td {
+  border-color: $selection;
+}
+
+thead {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+tbody tr:nth-of-type(n) {
+  background-color: $background;
+}
diff --git a/src/tildes-baukula/_misc.scss b/src/tildes-baukula/_misc.scss
new file mode 100644
index 0000000..2d324a1
--- /dev/null
+++ b/src/tildes-baukula/_misc.scss
@@ -0,0 +1,76 @@
+// Anywhere a link will go to a user, color it $green
+a.link-user,
+a.site-header-context[href^='/user'] {
+  color: $green;
+
+  &:visited {
+    color: $green;
+  }
+}
+
+// Anywhere a link will go to a group, color it $orange
+a.link-group,
+a.site-header-context[href^='/~'],
+.nav .nav-item a[href^='/~'] {
+  color: $orange;
+
+  &:visited {
+    color: $orange;
+  }
+}
+
+// Make sure the logo hover keeps the $foreground color, otherwise it would be pink from _anchors.scss
+a.site-header-logo:hover {
+  color: $foreground;
+}
+
+a.logged-in-user-alert,
+a.logged-in-user-alert:visited {
+  color: $background;
+  @include backgroundHover($orange, $yellow);
+  padding: 0.1rem 0.3rem;
+}
+
+// The logout button is actually a <button/> instead of an <a/> so we gotta reset the style
+#sidebar {
+  form[action='/logout'] > button,
+  form[action='/logout'] > button:hover {
+    color: $cyan;
+    border: none;
+    background-color: transparent;
+  }
+}
+
+// "Edit filtered tags" button in the sidebar
+#sidebar .btn.btn-link[href='/settings/filters'] {
+  width: 100%;
+  margin: 0.2rem 0;
+}
+
+// Target all label-topic-tags expect spoiler and nsfw ones
+.label.label-topic-tag:not([class*='label-topic-tag-spoiler']):not([class*='label-topic-tag-nsfw']) {
+  color: $comment;
+
+  a {
+    @include colorHover($comment, $pink);
+  }
+}
+
+.divider {
+  border-color: $foreground;
+}
+
+// Very specific target for the Tildes brand logo at the top
+&>header>a:nth-child(1):not(.no-header-logo) {
+  color: $foreground;
+  background-size: 32px 32px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAHlBMVEUoKjZQ+nticqSL6f29k/nx+oz/VVX/ecb/uGz///+3yBn7AAAAaklEQVR42u3Oxw2AQAADsNDZf2IGyO8kioQ9gQMAAAAAcLelCAkJCQkJCQkJ/Tk0lZS5ZMhZhISEhISEhISEvhbaSoasJWUvKUJCQkJCQkJCQu+GnnSUFCEhISEhISEhoXdDAAAAAAA3uwDrCC2R1NNC7QAAAABJRU5ErkJggg==');
+}
+
+.form-status-success {
+  color: $green;
+}
+
+.form-status-error {
+  color: $red;
+}
diff --git a/src/tildes-baukula/_mixins.scss b/src/tildes-baukula/_mixins.scss
new file mode 100644
index 0000000..c40cc0b
--- /dev/null
+++ b/src/tildes-baukula/_mixins.scss
@@ -0,0 +1,17 @@
+// Mixin to easily color standard and hover states
+@mixin colorHover($standard, $hover) {
+  color: $standard;
+
+  &:hover {
+    color: $hover;
+  }
+}
+
+// The same as colorHover but for the background-color
+@mixin backgroundHover($standard, $hover) {
+  background-color: $standard;
+
+  &:hover {
+    background-color: $hover;
+  }
+}
diff --git a/src/tildes-baukula/_settings.scss b/src/tildes-baukula/_settings.scss
new file mode 100644
index 0000000..9fd3c13
--- /dev/null
+++ b/src/tildes-baukula/_settings.scss
@@ -0,0 +1,7 @@
+.settings-list {
+  li {
+    border: 1px solid $comment;
+    background-color: $background;
+    padding: 0.4rem;
+  }
+}
diff --git a/src/tildes-baukula/_tabs.scss b/src/tildes-baukula/_tabs.scss
new file mode 100644
index 0000000..0ea9855
--- /dev/null
+++ b/src/tildes-baukula/_tabs.scss
@@ -0,0 +1,35 @@
+.tab.tab-listing-order {
+  border-color: $background;
+
+  .tab-item {
+    background-color: $background;
+    margin: 4px 2px;
+    padding: 0;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &.active a {
+      color: $pink;
+      border-color: $pink;
+    }
+
+    a {
+      @include colorHover($foreground, $cyan);
+      margin: 0;
+      padding: 4px 8px;
+    }
+  }
+}
+
+.form-select:not([multiple]):not([size]) {
+  border: 1px solid $comment;
+  background-color: $background;
+  // Changes the "from last X period" icon to be the same color as the foreground, it's hardcoded though
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23f8f8f2'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E");
+}
diff --git a/src/tildes-baukula/_topic-listing.scss b/src/tildes-baukula/_topic-listing.scss
new file mode 100644
index 0000000..4833965
--- /dev/null
+++ b/src/tildes-baukula/_topic-listing.scss
@@ -0,0 +1,13 @@
+.topic-listing {
+  // Make all the topics in the listing have the same background color
+  > li:nth-of-type(n) {
+    background-color: $background;
+  }
+}
+
+// "Post" listing is the list on user profiles
+.post-listing {
+  .topic {
+    background-color: $background;
+  }
+}
diff --git a/src/tildes-baukula/_topics.scss b/src/tildes-baukula/_topics.scss
new file mode 100644
index 0000000..d7e012a
--- /dev/null
+++ b/src/tildes-baukula/_topics.scss
@@ -0,0 +1,38 @@
+.topic {
+  &.is-topic-official {
+    border-left-color: $red;
+
+    h1 a,
+    h1 a:visited {
+      color: $red;
+    }
+  }
+
+  .topic-title a {
+    &:hover {
+      color: $pink;
+    }
+
+    &:visited {
+      color: $pink;
+    }
+  }
+
+  .topic-info-comments a {
+    &:visited {
+      color: $cyan;
+    }
+  }
+
+  // Make the domain colored as $foreground, it has no other selectors so aria-label is the workaround
+  div[aria-label='Link domain'],
+  .time-responsive {
+    color: $foreground;
+  }
+}
+
+.topic-full {
+  .topic-full-byline {
+    color: $foreground;
+  }
+}
diff --git a/src/tildes-baukula/package.json b/src/tildes-baukula/package.json
new file mode 100644
index 0000000..10f0b63
--- /dev/null
+++ b/src/tildes-baukula/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "tildes-baukula",
+  "version": "1.0.0",
+  "usercss": {
+    "name": "Tildes Baukula",
+    "namespace": "tildes.net",
+    "version": "1.0.0",
+    "author": "Bauke",
+    "description": "Adaptations to make the official Dracula theme look like my old one.",
+    "homepageURL": "https://gitlab.com/Bauke/styles",
+    "supportURL": "https://gitlab.com/Bauke/styles/issues",
+    "license": "MIT"
+  }
+}
diff --git a/src/tildes-baukula/tildes-baukula.scss b/src/tildes-baukula/tildes-baukula.scss
new file mode 100644
index 0000000..a4df98e
--- /dev/null
+++ b/src/tildes-baukula/tildes-baukula.scss
@@ -0,0 +1,26 @@
+@import 'colors';
+@import 'mixins';
+
+// Tell the user that Baukula only works with the official Dracula theme
+body:not(.theme-dracula) {
+  .site-header-logo:after {
+    content: ' Baukula won\'t activate unless you use the official Dracula theme!';
+  }
+}
+
+// Apply only when using the official Dracula theme
+body.theme-dracula {
+  background-color: $background;
+  @import 'blog';
+  @import 'buttons';
+  @import 'code-syntax';
+  @import 'comments';
+  @import 'docs';
+  @import 'extended';
+  @import 'html';
+  @import 'misc';
+  @import 'settings';
+  @import 'tabs';
+  @import 'topic-listing';
+  @import 'topics';
+}