DEV: CSS-only mask

DEV: Use resize observer (#25 )
fix (#24 )
2025-03-07 17:56:55 +00:00 · 2025-03-07 11:40:19 -06:00 · 2025-03-06 20:30:27 -06:00 · 2025-03-06 20:30:07 -06:00 · 2025-03-06 15:54:45 -06:00 · 2025-03-06 14:09:19 -06:00
28 changed files with 1097 additions and 148 deletions
@@ -1,5 +1,5 @@
 {
-  "name": "next-gen",
+  "name": "Horizon Theme",
  "authors": "Design Team",
  "about_url": "TODO: Put your theme's public repo or Meta topic URL here",
  "license_url": "TODO: Put your theme's LICENSE URL here",
@@ -8,19 +8,36 @@
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {},
-  "modifiers": {},
+  "modifiers": {
+    "svg_icons": ["fire"]
+  },
+  "components": [
+    "https://github.com/discourse/discourse-sidebar-new-topic-button.git",
+    "https://github.com/discourse/discourse-search-banner.git",
+    "https://github.com/discourse/discourse-full-width-component.git"
+  ],
  "color_schemes": {
-    "next_gen": {
+    "Horizon": {
      "primary": "1A1A1A",
-      "secondary": "F5F8FF",
-      "header_background": "F5F8FF",
-      "tertiary": "595bca"
+      "primary-low": "ebecf9",
+      "primary-500": "8591ad",
+      "secondary": "ffffff",
+      "header_background": "f5f8ff",
+      "tertiary": "313270",
+      "tertiary-low": "d8d9f3",
+      "tertiary-50": "f5f8ff",
+      "selected": "d8d9f3",
+      "hover": "ebebf9"
    },
-    "next_gen_dark": {
-      "primary": "F5F8FF",
-      "secondary": "1A1A1A",
-      "header_background": "1A1A1A",
-      "tertiary": "595bca"
+    "Horizon Dark": {
+      "primary": "F1EFF9",
+      "secondary": "1e1a36",
+      "header_background": "00091d",
+      "header_primary": "F5F8FF",
+      "tertiary": "6465ab",
+      "tertiary-50": "131124",
+      "selected": "1e1a36",
+      "hover": "131124"
    }
  }
-}
+}
@@ -11,3 +11,4 @@
@import "box-view";
@import "chat";
@import "misc";
+@import "mobile-stuff";
@@ -1,19 +1,6 @@
-import Component from "@glimmer/component";
 import { apiInitializer } from "discourse/lib/api";
+import ExperimentalScreen from "../components/experimental-screen";

 export default apiInitializer("1.8.0", (api) => {
-  api.renderInOutlet(
-    "above-main-container",
-    class ExperimentalScreen extends Component {
-      <template>
-        <ul class="experimental-screen">
-          <li class="experimental-screen__top-left"></li>
-          <li class="experimental-screen__top-right"></li>
-          <li class="experimental-screen__bottom-left"></li>
-          <li class="experimental-screen__bottom-right"></li>
-          <li class="experimental-screen__bottom-bar"></li>
-        </ul>
-      </template>
-    }
-  );
+  api.renderInOutlet("above-main-container", ExperimentalScreen);
 });
@@ -0,0 +1,9 @@
+import avatar from "discourse/helpers/avatar";
+
+const TopicAuthorAvatarColumn = <template>
+  <span class="topic-author-avatar">
+    {{avatar @topic.creator imageSize="large"}}
+  </span>
+</template>;
+
+export default TopicAuthorAvatarColumn;
@@ -0,0 +1,5 @@
+const TopicAuthorColumn = <template>
+  <span class="topic-author">@{{@topic.creator.username}}</span>
+</template>;
+
+export default TopicAuthorColumn;
@@ -0,0 +1,7 @@
+import { categoryLinkHTML } from "discourse/helpers/category-link";
+
+const TopicCategoryColumn = <template>
+  {{categoryLinkHTML @topic.category}}
+</template>;
+
+export default TopicCategoryColumn;
@@ -0,0 +1,9 @@
+import icon from "discourse/helpers/d-icon";
+
+const TopicLikesColumn = <template>
+  {{#if @topic.like_count}}
+    <span class="topic-likes">{{icon "heart"}}{{@topic.like_count}}</span>
+  {{/if}}
+</template>;
+
+export default TopicLikesColumn;
@@ -0,0 +1,9 @@
+import icon from "discourse/helpers/d-icon";
+
+const TopicRepliesColumn = <template>
+  {{#if @topic.posts_count}}
+    <span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
+  {{/if}}
+</template>;
+
+export default TopicRepliesColumn;
@@ -0,0 +1,115 @@
+import Component from "@glimmer/component";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { and } from "truth-helpers";
+import icon from "discourse/helpers/d-icon";
+import { i18n } from "discourse-i18n";
+
+export default class TopicStatusColumn extends Component {
+  @service currentUser;
+  @service siteSettings;
+
+  get canAct() {
+    return this.currentUser && !this.args.disableActions;
+  }
+
+  get statusClass() {
+    let classes = ["topic-status-card"];
+    if (this.args.topic.bookmarked) {
+      classes.push("--bookmark");
+    } else if (this.args.topic.closed && this.args.topic.archived) {
+      classes.push("--locked --archived");
+    } else if (this.args.topic.closed) {
+      classes.push("--locked");
+    } else if (this.args.topic.archived) {
+      classes.push("--archived");
+    } else if (this.args.topic.is_warning) {
+      classes.push("--warning");
+    } else if (
+      this.args.showPrivateMessageIcon &&
+      this.args.topic.isPrivateMessage
+    ) {
+      classes.push("--private-message");
+    } else if (this.args.topic.pinned) {
+      classes.push("--pinned");
+    } else if (this.args.topic.unpinned) {
+      classes.push("--unpinned");
+    }
+    return classes.join(" ");
+  }
+
+  get heatMap() {
+    return this.args.topic.views > this.siteSettings.topic_views_heat_medium;
+  }
+
+  @action
+  togglePinned(event) {
+    event.preventDefault();
+    this.args.topic.togglePinnedForUser();
+  }
+
+  <template>
+    {{#if @topic.bookmarked}}
+      <span class={{this.statusClass}}>{{icon "bookmark"}}{{i18n
+          (themePrefix "topic_bookmarked")
+        }}</span>
+    {{/if}}
+    {{#if (and @topic.closed @topic.archived)~}}
+      <span class={{this.statusClass}}>{{i18n
+          (themePrefix "topic_closed_and_archived")
+        }}</span>
+    {{else if @topic.closed}}
+      <span class={{this.statusClass}}>{{i18n
+          (themePrefix "topic_closed")
+        }}</span>
+    {{else if @topic.archived}}
+      <span class={{this.statusClass}}>{{i18n
+          (themePrefix "topic_archived")
+        }}</span>
+    {{/if}}
+    {{#if @topic.is_warning}}
+      <span class={{this.statusClass}}>{{i18n
+          (themePrefix "topic_warning")
+        }}</span>
+    {{else if (and @showPrivateMessageIcon @topic.isPrivateMessage)}}
+      <span class={{this.statusClass}}>{{i18n
+          (themePrefix "topic_personal_message")
+        }}</span>
+    {{/if}}
+    {{#if @topic.pinned}}
+      {{#if this.canAct}}
+        <button
+          type="button"
+          {{on "click" this.togglePinned}}
+          class={{this.statusClass}}
+        >{{icon "thumbtack"}}{{i18n (themePrefix "topic_pinned")}}</button>
+      {{else}}
+        <span class={{this.statusClass}}>{{icon "thumbtack"}}{{i18n
+            (themePrefix "topic_pinned")
+          }}</span>
+      {{/if}}
+    {{else if @topic.unpinned}}
+      {{#if this.canAct}}
+        <button
+          type="button"
+          {{on "click" this.togglePinned}}
+          class={{this.statusClass}}
+        >{{icon "thumbtack" class="unpinned"}}{{i18n
+            (themePrefix "topic_unpinned")
+          }}</button>
+      {{else}}
+        <span class={{this.statusClass}}>{{icon
+            "thumbtack"
+            class="unpinned"
+          }}{{i18n (themePrefix "topic_unpinned")}}</span>
+      {{/if}}
+    {{/if}}
+
+    {{#if this.heatMap}}
+      <span class="topic-status-card --hot">{{icon "fire"}}{{i18n
+          (themePrefix "topic_hot")
+        }}</span>
+    {{/if}}
+  </template>
+}
@@ -0,0 +1,11 @@
+const ExperimentalScreen = <template>
+  <ul class="experimental-screen">
+    <li class="experimental-screen__top-left"></li>
+    <li class="experimental-screen__top-right"></li>
+    <li class="experimental-screen__bottom-left"></li>
+    <li class="experimental-screen__bottom-right"></li>
+    <li class="experimental-screen__bottom-bar"></li>
+  </ul>
+</template>;
+
+export default ExperimentalScreen;
@@ -0,0 +1,81 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+import TopicAuthorAvatarColumn from "../components/card/topic-author-avatar-column";
+import TopicAuthorColumn from "../components/card/topic-author-column";
+import TopicCategoryColumn from "../components/card/topic-category-column";
+import TopicLikesColumn from "../components/card/topic-likes-column";
+import TopicRepliesColumn from "../components/card/topic-replies-column";
+import TopicStatusColumn from "../components/card/topic-status-column";
+
+const TopicAuthor = <template>
+  <td class="topic-author-data">
+    <TopicAuthorColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+const TopicAuthorAvatar = <template>
+  <td class="topic-author-avatar-data">
+    <TopicAuthorAvatarColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+const TopicCategoryStatus = <template>
+  <td class="topic-category-status-data">
+    <TopicCategoryColumn @topic={{@topic}} />
+    <TopicStatusColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+const TopicLikesReplies = <template>
+  <td class="topic-likes-replies-data">
+    <TopicLikesColumn @topic={{@topic}} />
+    <TopicRepliesColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+export default {
+  name: "topic-list-customizations",
+
+  initialize() {
+    withPluginApi("1.39.0", (api) => {
+      api.registerValueTransformer(
+        "topic-list-columns",
+        ({ value: columns }) => {
+          columns.add("topic-author", {
+            item: TopicAuthor,
+            after: "activity",
+          });
+          columns.add("topic-category-status", {
+            item: TopicCategoryStatus,
+            after: "topic-author",
+          });
+          columns.add("topic-author-avatar", {
+            item: TopicAuthorAvatar,
+            after: "topic-category-status",
+          });
+          columns.add("topic-likes-replies", {
+            item: TopicLikesReplies,
+            after: "topic-author-avatar",
+          });
+          columns.delete("posters");
+          columns.delete("views");
+          columns.delete("replies");
+          return columns;
+        }
+      );
+
+      api.registerValueTransformer(
+        "topic-list-item-class",
+        ({ value: classes, context }) => {
+          if (context.topic.pinned || context.topic.pinned_globally) {
+            classes.push("--pinned");
+          }
+          return classes;
+        }
+      );
+
+      api.registerValueTransformer("topic-list-item-mobile-layout", () => {
+        return false;
+      });
+    });
+  },
+};
@@ -1,5 +1,12 @@
 en:
  theme_metadata:
-    description: ''
-    settings:
-      example_setting: A description of a setting.
+    description: "A simple, beautiful theme for the future of Discourse that improves the out of the box experience for sites."
+  topic_bookmarked: "Bookmarked"
+  topic_closed_archived: "Closed and archived"
+  topic_closed: "Closed"
+  topic_archived: "Archived"
+  topic_warning: "Warning"
+  topic_personal_message: "Personal message"
+  topic_pinned: "Pinned"
+  topic_unpinned: "Unpinned"
+  topic_hot: "Hot"
@@ -7,7 +7,7 @@
    "prettier": "2.8.8"
  },
  "engines": {
-    "node": ">= 22",
+    "node": ">= 18",
    "npm": "please-use-pnpm",
    "yarn": "please-use-pnpm",
    "pnpm": "9.x"
@@ -4,7 +4,27 @@
    border-top-left-radius: var(--d-border-radius-large);
  }
 }
+
+.chat-drawer-active.chat-drawer-expanded {
+  .experimental-screen {
+    &__top-left,
+    &__top-right,
+    &__bottom-left,
+    &__bottom-right,
+    &__bottom-bar {
+      z-index: 199;
+    }
+  }
+}
+
+.has-full-page-chat .experimental-screen {
+  display: none;
+}
+
 .experimental-screen {
+  @include breakpoint(medium) {
+    display: none;
+  }
  max-width: unset !important;
  .has-full-page-chat & {
    display: none;
@@ -30,8 +50,8 @@
    position: fixed;
    width: var(--d-border-radius-large);
    height: var(--d-border-radius-large);
-    background-color: var(--secondary);
-    z-index: 999;
+    background-color: var(--background-color);
+    z-index: 399;
    -webkit-mask: radial-gradient(
      circle at var(--d-border-radius-large) var(--d-border-radius-large),
      transparent var(--d-border-radius-large),
@@ -41,63 +61,37 @@
  }
  &__top-left {
    top: var(--header-offset);
-    left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
-    @media screen and (max-width: 768px) {
-      left: var(--main-grid-gap);
-    }
  }
  &__top-right {
    top: var(--header-offset);
    transform: rotate(90deg);
-    @container content-width (width > 1px) {
-      left: calc(
-        var(--main-grid-gap) + var(--d-sidebar-width) + 100cqw -
-          var(--d-border-radius-large)
-      );
-      @media screen and (max-width: 768px) {
-        left: calc(
-          var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
-        );
-      }
-    }
+    right: var(--d-border-radius-large);
  }
  &__bottom-left {
    transform: rotate(-90deg);
    bottom: var(--d-border-radius-large);
-    left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
    @media screen and (max-width: 768px) {
-      left: var(--main-grid-gap);
      bottom: calc(var(--d-border-radius-large) * 2);
    }
  }
  &__bottom-right {
    transform: rotate(180deg);
    bottom: var(--d-border-radius-large);
-    @container content-width (width > 1px) {
-      left: calc(
-        var(--main-grid-gap) + var(--d-sidebar-width) + 100cqw -
-          var(--d-border-radius-large)
-      );
-      @media screen and (max-width: 768px) {
-        left: calc(
-          var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
-        );
-        bottom: calc(var(--d-border-radius-large) * 2);
-      }
+    right: var(--d-border-radius-large);
+    @media screen and (max-width: 768px) {
+      bottom: calc(var(--d-border-radius-large) * 2);
    }
  }
  &__bottom-bar {
    position: fixed;
    width: 100%;
-    z-index: 999;
-    background-color: var(--secondary);
+    z-index: 399;
+    background-color: var(--background-color);
    bottom: 0;
-    left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
+    height: var(--d-border-radius-large);
    @media screen and (max-width: 768px) {
-      left: var(--main-grid-gap);
      height: calc(var(--d-border-radius-large) * 2);
    }
-    height: var(--d-border-radius-large);
    @container content-width (width > 1px) {
      width: 100cqw;
    }
@@ -30,26 +30,42 @@
      var(--accent-color);
  }
  svg {
-    color: var(--secondary);
+    color: var(--accent-text-color);
  }
 }

-.btn-default,
-.select-kit .select-kit-header {
-  border: 1px solid var(--accent-color);
-  //id like to use rgba of the accent colour but how to derive that?
-  // box-shadow: 0px 0px 8px 2px oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
+.discourse-no-touch .btn-default.sidebar-new-topic-button,
+.discourse-no-touch .interface-color-selector-content .btn-default {
+  border: none;
+  &:hover {
+    border: none;
+    box-shadow: none;
+  }
+}
+
+.discourse-no-touch .btn-default.topic-drafts-menu-trigger {
+  border: none;
+  margin-left: 2px;
+  &:hover {
+    border: none;
+    box-shadow: none;
+  }
+}
+
+.btn-default {
+  border: 1px solid var(--primary-300);
  background: var(--secondary);

  .d-icon {
    color: var(--accent-color);
  }
+
  &:hover {
    .discourse-no-touch & {
-      border: 1px solid transparent;
-      box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
+      border: 1px solid var(--accent-color);
+      box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
      background: var(--secondary);
-      color: var(--accent-color);
+      color: var(--primary);
      .d-icon {
        color: var(--accent-color);
      }
@@ -60,7 +76,7 @@
      background: var(--secondary);
      color: var(--accent-color);
      box-shadow: 0px 0px 0px 2px var(--secondary),
-        0px 0px 0px 4px var(--accent-color);
+        0px 0px 0px 4px var(--button-box-shadow);
      .d-icon {
        color: var(--accent-color);
      }
@@ -94,7 +110,7 @@
          rgba(255, 255, 255, 0) 100%
        ),
        var(--accent-color);
-      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
+      box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
    }
  }
  &:focus-visible {
@@ -106,7 +122,7 @@
        ),
        var(--accent-color);
      box-shadow: 0px 0px 0px 2px var(--secondary),
-        0px 0px 0px 4px var(--accent-color);
+        0px 0px 0px 4px var(--button-box-shadow);
    }
  }
  &:active {
@@ -1,15 +1,37 @@
 .full-page-chat.full-page-chat-sidebar-enabled {
  border-top-left-radius: var(--d-border-radius-large);
-  box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
+  border-top-right-radius: var(--d-border-radius-large);
  border: none;
 }

-.has-full-page-chat .d-header {
-  background-color: transparent;
-}
-
 .c-navbar-container {
  border-top-left-radius: var(--d-border-radius-large);
-  padding: 0 1.5rem;
+  border-top-right-radius: var(--d-border-radius-large);
+  padding: 0 1.5em;
  background-color: var(--d-content-background);
 }
+
+body.has-full-page-chat {
+  background-color: var(--background-color);
+}
+
+.chat-drawer .chat-drawer-container {
+  box-shadow: 0px 0px 0px 2px var(--d-chat-border);
+  border: none;
+}
+
+.chat-drawer .channels-list-container .chat-channel-row {
+  margin-bottom: var(--spacing-block-xs);
+  font-size: var(--font-up-1);
+  border-radius: var(--d-border-radius);
+  border-bottom: none;
+  &:hover {
+    background-color: var(--d-sidebar-active-background);
+  }
+}
+
+.channel-title {
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: var(--font-down-1);
+}
@@ -1,3 +1,32 @@
 .d-header {
  box-shadow: none;
+  background: var(--background-color);
+  @include breakpoint(extra-large, $rule: min-width) {
+    padding-bottom: 1.5em;
+  }
+}
+
+.has-full-page-chat .d-header {
+  background-color: transparent;
+}
+
+.user-menu .quick-access-panel,
+.user-notifications-list {
+  li {
+    &.pending,
+    &.unread {
+      background: var(--d-hover);
+
+      .discourse-no-touch & {
+        &:hover,
+        &:focus {
+          background: var(--d-selected);
+        }
+      }
+    }
+  }
+}
+
+.user-menu.revamped .tabs-list .btn.active {
+  background: var(--d-hover);
 }
@@ -3,6 +3,8 @@
 .list-controls #create-topic,
 .notifications-button-footer .reason .text,
 .pinned-button .reason .text,
-.more-topics__browse-more {
+.more-topics__browse-more,
+//footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
+.footer-message {
  display: none;
 }
@@ -1,19 +1,53 @@
 html:not(:has(.has-full-page-chat)) {
-  background-color: #f5f8ff;
+  // @include breakpoint(extra-large, $rule: min-width) {
+  background-color: var(--background-color);
+  // }
 }

 :root {
  --main-grid-gap: 2em;
 }

-body:not(.has-full-page-chat) {
-  background-color: #f5f8ff;
+#main-outlet-wrapper {
+  gap: var(--main-grid-gap);
+}
+
+body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
+  grid-column-gap: var(--main-grid-gap);
+}
+
+body.has-full-page-chat:not(.has-sidebar-page) {
+  .d-header {
+    background-color: var(--background-color);
+  }
  #main-outlet-wrapper {
-    // margin-top: 1.5rem;
-    @media screen and (max-width: 485px) {
+    --main-grid-gap: 0;
+    .full-page-chat.full-page-chat-sidebar-enabled,
+    .c-navbar-container {
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+}
+
+body.has-sidebar-page #main-outlet-wrapper {
+  grid-template-columns: var(--d-sidebar-width) 1fr 0px;
+  #main-outlet {
+    max-width: unset;
+  }
+}
+
+body:not(.has-full-page-chat) {
+  @include breakpoint(extra-large, $rule: min-width) {
+    background-color: var(--background-color);
+  }
+  #main-outlet-wrapper {
+    @include breakpoint(medium) {
      --main-grid-gap: 0;
    }
-    gap: var(--main-grid-gap);
+    @include breakpoint(tablet, $rule: min-width) {
+      gap: var(--main-grid-gap);
+    }
    // height: calc(100vh - var(--header-offset) - 4rem);
    // box-sizing: border-box;
    // > * {
@@ -22,6 +56,7 @@ body:not(.has-full-page-chat) {
    // }
    #main-outlet {
      width: 100%;
+      padding-bottom: var(--spacing-block-l);
      // height: inherit;
      // overflow: scroll;
      // &:has(.list-controls) {
@@ -30,29 +65,32 @@ body:not(.has-full-page-chat) {
      // &:has(#topic-title) {
      // padding-top: 0;
      // }
-      > *:not(.full-page-chat) {
+      //thanks to random container elements on the page, I can't do a direct child selector here because it targets all the randomness, so I see no other option than MANUALLY adding every possible element that can appear in the main outlet YAY
+      .list-controls,
+      .list-container,
+      #topic-title,
+      .container.posts,
+      #topic-footer-buttons,
+      .more-topics__container,
+      .search-banner,
+      .container.viewing-self,
+      .reviewable,
+      .admin-content,
+      .discourse-post-event-upcoming-events,
+      .container.groups-index,
+      .body-page,
+      .container.badges,
+      .topic-above-footer-buttons-outlet .presence-users,
+      .global-notice {
        max-width: 1000px;
        margin-inline: auto;
        padding-inline: 1.5em;
-        @media screen and (max-width: 425px) {
-          padding-inline: 0.5em;
-        }
      }
-      // border-radius: var(--d-border-radius-large);
-      // border-radius: 1.25rem;
-      // .navigation-topics & {
-      //   background: radial-gradient(
-      //       100.59% 70.87% at 41.19% 73.28%,
-      //       rgba(188, 241, 238, 0.2) 0%,
-      //       rgba(255, 255, 255, 0) 100%
-      //     ),
-      //     radial-gradient(
-      //       67.07% 61.36% at 66.47% 64.15%,
-      //       rgba(162, 164, 225, 0.2) 0%,
-      //       rgba(255, 255, 255, 0) 100%
-      //     ),
-      //     #fff;
-      // }
+      border-radius: var(--d-border-radius-large);
+      @include breakpoint(medium) {
+        border-radius: 0px;
+      }
+      border-radius: 1.25rem;
      // box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
      background-color: var(--d-content-background);
    }
@@ -63,12 +101,19 @@ body:not(.has-full-page-chat) {
  // }
 }

+.list-container {
+  .topic-list-body {
+    padding-top: var(--spacing-block-m);
+  }
+}
+
 aside.onebox {
  background-color: var(--d-content-background);
 }

 .d-editor-preview-wrapper {
-  box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
+  box-shadow: 0px 0px 1px 2px var(--tertiary-50),
+    0px 0px 24px 4px var(--tertiary-50);
  border-radius: var(--d-border-radius-large);
  padding: 1em;
  background-color: var(--d-content-background);
@@ -43,3 +43,8 @@
 .d-editor-button-bar {
  padding: 3px;
 }
+
+a,
+a:visited {
+  color: var(--accent-color);
+}
@@ -0,0 +1,147 @@
+//temp sepeate file to avoid merge hell… to be distributed later
+@include breakpoint(medium) {
+  html,
+  .d-header {
+    background-color: var(--secondary);
+  }
+}
+#main-outlet-wrapper {
+  .navigation-topics & {
+    @include breakpoint(mobile-extra-large) {
+      padding: 0;
+    }
+  }
+}
+#main-outlet {
+  @include breakpoint(mobile-extra-large) {
+    padding-top: var(--spacing-block-sm);
+  }
+
+  .list-controls {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: var(
+        --spacing-inline-m
+      ) !important; //override will be fixed when the whole chat page shenanigans is resolved
+      padding-block: var(--spacing-block-s);
+      border-bottom: 1px solid var(--primary-200);
+    }
+    .navigation-container {
+      @include breakpoint(mobile-extra-large) {
+        gap: var(--spacing-inline-s);
+        //dont know why we even hide this crucial navigation on mobile
+        .category-breadcrumb.hidden,
+        .category-breadcrumb {
+          display: flex !important;
+          gap: var(--spacing-inline-sm);
+          .select-kit-header {
+            padding-block: var(--spacing-block-s);
+            padding-inline: 0;
+            border: 0;
+          }
+        }
+        .btn-default {
+          border: 0;
+          margin-right: 0;
+          .d-icon {
+            font-size: var(--font-up-1);
+          }
+        }
+        .fk-d-button-tooltip {
+          margin-right: 0;
+          margin-left: var(
+            --spacing-inline-xs
+          ); //pure visual correction for horitzontal alignment
+          &:has(#create-topic) {
+            order: 1;
+          }
+        }
+      }
+      #navigation-bar,
+      .navigation-controls,
+      .category-breadcrumb {
+        @include breakpoint(mobile-extra-large) {
+          margin-bottom: 0;
+        }
+      }
+      .navigation-controls {
+        gap: var(--spacing-inline-s);
+      }
+    }
+  }
+
+  .list-container {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: 0 !important;
+    }
+
+    .topic-list-body {
+      @include breakpoint(mobile-extra-large) {
+        border-top: 0;
+        padding-top: 0;
+      }
+    }
+
+    .topic-list-item {
+      @include breakpoint(mobile-extra-large) {
+        box-shadow: none;
+        border-radius: 0;
+        //to be moved to topic card segment for general use
+        // .navigation-category & {
+        //   .badge-category__wrapper {
+        //     display: none;
+        //   }
+        // }
+      }
+    }
+  }
+
+  #topic-title {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: var(--spacing-inline-m) !important;
+      .topic-category {
+        order: -1;
+      }
+      //make mixin of this
+      //   .badge-category__wrapper {
+      //     border-radius: var(--d-border-radius);
+      //     padding: var(--spacing-inline-xs) var(--spacing-inline-s);
+      //     background-color: light-dark(
+      //       oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
+      //       oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
+      //     );
+      //   }
+
+      //   .badge-category__name {
+      //     color: light-dark(
+      //       oklch(from var(--category-badge-color) 20% calc(c * 1) h),
+      //       oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
+      //     );
+      //   }
+    }
+  }
+  .container.posts {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: var(--spacing-inline-m) !important;
+
+      .main-avatar .avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: var(--d-border-radius);
+      }
+
+      .topic-body {
+        .topic-meta-data {
+          .username {
+            font-size: var(--font-0-rem);
+          }
+        }
+        .contents {
+          padding-top: var(--spacing-block-m);
+          p {
+            line-height: 1.65;
+          }
+        }
+      }
+    }
+  }
+}
@@ -12,13 +12,16 @@
      order: 1;
    }
  }
-  .combo-box .combo-box-header,
-  .discourse-post-event .discourse-post-event-widget {
+  .combo-box .combo-box-header {
    // needs more specificy than just in the button file
    background-color: var(--secondary);
-    border: 1px solid var(--accent-color);
    border-radius: var(--d-border-radius-large);
+    border: 1px solid var(--primary-300);
    // font-size: var(--font-up-1-rem);
+    &:hover {
+      border: 1px solid var(--accent-color);
+      box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
+    }
  }
  .select-kit.combo-box.category-drop.has-selection
    .category-drop-header:hover {
@@ -28,7 +31,6 @@

 .select-kit.is-expanded .select-kit-body {
  border-radius: var(--d-border-radius);
-  border: 1px solid var(--accent-color);
  background-color: var(--d-content-background);
 }

@@ -7,7 +7,6 @@
  border-bottom: 1px solid var(--primary-300);
  padding: 1.5em 0 2.5em;
  margin-bottom: 0;
-  --search-color: #595bca;
  @media screen and (max-width: 900px) {
    padding-bottom: 1em;
  }
@@ -19,7 +18,7 @@
    align-self: center;
    margin: 0;
    font-weight: 400;
-    color: #350c73;
+    color: var(--search-banner-text-color);
    @media screen and (max-width: 1028px) {
      font-size: var(--font-up-4);
      grid-column: 1/-1;
@@ -63,7 +62,7 @@
  }
  .search-input {
    background: var(--d-content-background);
-    border: 1px solid oklch(from var(--search-color) 80% calc(c * 2.5) h);
+    border: 1px solid var(--search-color);
    box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
  }
  .search-menu .search-input:focus-within,
@@ -1,5 +1,12 @@
 .sidebar-wrapper {
-  .has-full-page-chat & {
+  @include breakpoint(medium) {
+    background: var(--secondary);
+    .sidebar-footer-wrapper {
+      background: var(--secondary);
+    }
+  }
+  .has-full-page-chat &,
+  .has-full-page-chat & .sidebar-footer-wrapper {
    background: transparent;
  }
  .sidebar-container {
@@ -10,17 +17,21 @@
    padding: 0;
  }
  .sidebar-section-link {
-    // font-size: var(--font-up-1); // dont want to change fonts here just yet as font-size can be changed as a user pref.
-    // font-family: "inter";
-    letter-spacing: 0.5px;
-    border-radius: 10px; //visually somewhat consistent with border on main outlet (?)
+    font-size: var(--font-up-1);
+    // dont want to change fonts here just yet as font-size can be changed as a user pref.
+    // – charlie: sure but I want it to be bigger by default
+    // letter-spacing: 0.5px;
    transition: none;
+    border-radius: var(--d-border-radius);
+  }
+  .dropdown-menu__item .sidebar-section-link {
+    border-radius: 0px;
  }
 }
 .sidebar-section-wrapper {
  padding-block: 0.45em;
  .sidebar-section-header {
-    // font-size: var(--font-down-1);
+    font-size: var(--font-down-1);
  }
  .sidebar-section-content {
    margin: 0;
@@ -1,7 +1,367 @@
+// 390x844 – mobile/portrait – (Figma iPhone 13 & 14)
+// 744x1133 – tablet/portrait – (Figma iPad mini 8.3)
+// 1280x832 – desktop small – (Figma MacBook Air)
+
+:root {
+  --hot-color: oklch(63.79% 0.1823 34.77);
+}
+
+$extra-small: 435px;
+$small: 576px;
+$medium: 980px;
+$extra-large: 1280px;
+
+.topic-list .topic-list-item-separator {
+  display: none;
+}
+
+.topic-list > .topic-list-body > .topic-list-item.last-visit {
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.topic-list-body {
+  border: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  @include breakpoint(medium) {
+    gap: 0.5em;
+  }
+}
+
+body.bulk-select-enabled .topic-list-item {
+  grid-template-areas:
+    "bulk-select avatar author status status . activity"
+    ". topic-title topic-title topic-title likes-replies likes-replies category";
+  .bulk-select {
+    grid-area: bulk-select;
+    padding: 0;
+    margin: 0;
+    align-self: center;
+    justify-self: center;
+    label {
+      margin: 0;
+    }
+  }
+  @media screen and (max-width: $medium) {
+    grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
+    grid-template-rows: 22px minmax(22px, auto);
+    grid-template-areas:
+      "bulk-select avatar author status status  . activity"
+      ". topic-title topic-title topic-title . . likes-replies"
+      ". topic-title topic-title topic-title . . category";
+  }
+  @media screen and (max-width: $small) {
+    grid-template-columns: 25px auto repeat(6, 1fr);
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      "bulk-select category-status category-status . . . . activity"
+      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
+      "avatar author . . . . . likes-replies";
+  }
+}
+
+body.user-messages-page .topic-list-item {
+  .topic-category-status-data {
+    display: none;
+  }
+  grid-template-areas:
+    "avatar author status status . . activity"
+    ". topic-title topic-title topic-title likes-replies likes-replies likes-replies";
+  &.excerpt-expanded {
+    grid-template-columns: 44px repeat(6, 1fr) auto;
+    grid-template-rows: 22px auto auto 30px;
+    grid-template-areas:
+      "avatar author status status . . . activity"
+      "avatar topic-title topic-title topic-title topic-title . . ."
+      ". excerpt excerpt excerpt excerpt excerpt . ."
+      ". excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
+    @media screen and (max-width: $extra-large) {
+      grid-template-areas:
+        "avatar author status status . . . activity"
+        "avatar topic-title topic-title topic-title topic-title . . ."
+        ". excerpt excerpt excerpt excerpt excerpt . likes-replies"
+        ". excerpt excerpt excerpt excerpt excerpt . likes-replies";
+    }
+  }
+  @media screen and (max-width: $small) {
+    grid-template-columns: 25px auto repeat(6, 1fr);
+    grid-template-rows: auto auto;
+    grid-template-areas:
+      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title activity"
+      "avatar author . . . . . likes-replies";
+    .topic-excerpt {
+      display: none;
+    }
+  }
+}
+
+.topic-list-item {
+  -webkit-font-smoothing: antialiased;
+  text-overflow: ellipsis;
+  padding: 0.75em 1rem;
+  border: 1px solid var(--primary-300);
+  display: grid;
+  grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
+  grid-template-rows: 22px minmax(22px, auto);
+  grid-template-areas:
+    "avatar author status status . . activity"
+    ". topic-title topic-title topic-title likes-replies likes-replies category";
+  &.excerpt-expanded {
+    grid-template-columns: 44px repeat(6, 1fr) auto;
+    grid-template-rows: 22px auto auto 30px;
+    grid-template-areas:
+      "avatar author status status . . . activity"
+      "avatar topic-title topic-title topic-title topic-title . . ."
+      ". excerpt excerpt excerpt excerpt excerpt . ."
+      ". excerpt excerpt excerpt excerpt excerpt likes-replies category";
+    @media screen and (max-width: $extra-large) {
+      grid-template-areas:
+        "avatar author status status . . . activity"
+        "avatar topic-title topic-title topic-title topic-title . . ."
+        ". excerpt excerpt excerpt excerpt excerpt . likes-replies"
+        ". excerpt excerpt excerpt excerpt excerpt . category";
+    }
+    @media screen and (max-width: $small) {
+      grid-template-columns: 25px auto repeat(6, 1fr);
+      grid-template-rows: auto auto auto;
+      grid-template-areas:
+        "category-status category-status category-status . . . . activity"
+        "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
+        "avatar author . . . . . likes-replies";
+      .topic-excerpt {
+        display: none;
+      }
+    }
+  }
+  grid-column-gap: 12px;
+  grid-row-gap: 8px;
+  border-radius: var(--d-border-radius);
+  @media screen and (max-width: $medium) {
+    grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
+    grid-template-rows: 22px minmax(22px, auto);
+    grid-template-areas:
+      "avatar author status status . . activity"
+      ". topic-title topic-title topic-title . . likes-replies"
+      ". topic-title topic-title topic-title . . category";
+  }
+  @media screen and (max-width: $small) {
+    grid-template-columns: 25px auto repeat(6, 1fr);
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      "category-status category-status category-status . . . . activity"
+      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
+      "avatar author . . . . . likes-replies";
+  }
+  @include breakpoint(medium) {
+    border: none;
+    border-bottom: 1px solid var(--primary-200);
+  }
+
+  // display contents
+  td.main-link,
+  td.posters,
+  td.posts,
+  td.views,
+  td.activity {
+    display: contents;
+  }
+
+  td.num.posts a {
+    padding: 0;
+  }
+
+  // avatar & author
+  .topic-author-avatar-data {
+    grid-area: avatar;
+    margin: 0;
+  }
+  .topic-author-avatar img.avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: var(--d-border-radius);
+    @media screen and (max-width: $small) {
+      width: 25px;
+      height: 25px;
+    }
+  }
+  td.topic-author-data {
+    grid-area: author;
+    display: flex;
+    gap: 0.5em;
+    align-items: center;
+  }
+  .topic-author-data .topic-author {
+    color: var(--primary-500);
+  }
+
+  // status
+  .topic-status-card {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    align-items: center;
+    padding: 0 6px;
+    font-size: var(--font-down-2);
+    font-weight: 600;
+    border-radius: var(--d-border-radius);
+    border: 1px solid var(--status-color);
+    color: var(--status-color);
+    height: min-content;
+    grid-area: status;
+    width: min-content;
+    @media screen and (max-width: $small) {
+      height: calc(100% - 2px);
+    }
+    svg {
+      font-size: var(--font-down-1);
+      color: var(--status-color);
+    }
+  }
+
+  .topic-status-card.--bookmark {
+    display: none;
+  }
+  .topic-status-card.--pinned,
+  .topic-status-card.--unpinned {
+    --status-color: var(--primary-500);
+    cursor: pointer;
+    background-color: transparent;
+    line-height: unset;
+  }
+  .topic-status-card.--hot {
+    --status-color: var(--hot-color);
+  }
+
+  // title
+  td.main-link .link-top-line {
+    font-size: var(--font-0);
+    grid-area: topic-title;
+    font-weight: 500;
+  }
+
+  .link-top-line .event-date {
+    font-size: var(--font-down-3);
+  }
+
+  td.main-link a.topic-status {
+    display: none;
+  }
+
+  td.main-link .link-top-line a.raw-topic-link {
+    padding: 0;
+  }
+
+  .topic-post-badges .badge-notification.unread-posts {
+    background-color: var(--tertiary);
+    color: var(--tertiary);
+    overflow: hidden;
+    height: 8px;
+    width: 8px;
+    padding: 0;
+    top: -2px;
+    min-width: unset;
+  }
+
+  // excerpt
+  .topic-excerpt {
+    grid-area: excerpt;
+    margin: 0;
+    font-size: var(--font-down-2);
+  }
+
+  // timestamp
+  td.activity .post-activity {
+    grid-area: activity;
+    font-size: var(--font-down-1);
+    color: var(--primary-500);
+    margin-left: auto;
+    padding: 0;
+  }
+
+  // metadata
+  // metadata - category
+  td.main-link .link-bottom-line {
+    display: none;
+  }
+
+  td.topic-category-status-data {
+    display: contents;
+    @media screen and (max-width: $small) {
+      grid-area: category-status;
+      display: flex;
+      gap: 0.5em;
+      align-items: center;
+    }
+  }
+  td.topic-category-status-data .badge-category__wrapper {
+    grid-area: category;
+  }
+
+  td.topic-category-status-data .badge-category__wrapper {
+    overflow: unset;
+    border-radius: var(--d-border-radius);
+    padding: 6px;
+    align-self: flex-end;
+    background-color: light-dark(
+      oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
+      oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
+    );
+
+    @media screen and (max-width: $small) {
+      padding: 2px 6px;
+    }
+
+    .badge-category__name {
+      color: light-dark(
+        oklch(from var(--category-badge-color) 20% calc(c * 1) h),
+        oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
+      );
+    }
+  }
+  td.main-link .discourse-tags {
+    display: none;
+  }
+
+  // metadata - likes and replies
+  td.posts .badge-posts {
+    grid-area: replies;
+    align-self: center;
+    font-weight: normal;
+  }
+
+  td.topic-likes-replies-data {
+    grid-area: likes-replies;
+    display: flex;
+    flex-direction: row;
+    gap: 0.5em;
+    justify-content: flex-end;
+    height: min-content;
+    align-self: flex-end;
+    padding-bottom: 4px;
+  }
+  .topic-likes-replies-data .topic-likes,
+  .topic-likes-replies-data .topic-replies {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5em;
+    align-items: center;
+    color: var(--primary-500);
+    svg {
+      color: var(--primary-600);
+    }
+  }
+}
+
+.topic-list-header {
+  display: none;
+}
+
 .topic-list-item {
  background: var(--d-content-background);
+  box-shadow: 0px 0px 26px 1px var(--topic-card-shadow);
  &:hover {
-    background: oklch(from var(--d-content-background) 97% c h);
+    border: 1px solid var(--accent-color);
+    background: var(--d-content-background);
  }
-  border: 1px solid #cedde3;
 }
@@ -1,16 +1,19 @@
 .post-stream {
-  .contents p {
-    // font-size: var(--font-up-1);
+  .contents {
+    font-size: var(--font-up-1);
    line-height: 1.25;
  }
 }

 .container.posts .topic-navigation {
-  top: calc(var(--header-offset, 60px) + 6em);
+  // super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
+  top: calc(
+    var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
+  );
 }

 .timeline-container .topic-timeline {
-  min-width: unset; //why we have this?
+  min-width: unset; // why we have this?
  .timeline-scrollarea {
    border-left: 1px solid var(--accent-color);
  }
@@ -21,7 +24,7 @@
    padding-left: 0.5em;
    margin-left: calc(-0.5em - 2.5px);
    background: var(--secondary);
-    height: 40px !important; //height is coming from element style have no other choice
+    height: 40px !important; // height is coming from element style have no other choice
  }
  .timelime-scroller-content {
    display: flex;
@@ -44,25 +47,50 @@
 }

 #topic-title {
-  z-index: 999;
-  margin-bottom: 1em;
-  padding: 1.5rem 2rem 0.5em;
+  @include breakpoint(extra-large, $rule: min-width) {
+    z-index: z("composer", "content") - 1;
+    padding: var(--spacing-block-l) var(--spacing-inline-xl);
+    position: sticky;
+    margin-bottom: 0;
+    top: var(--header-offset);
+    background: var(--d-content-background);
+  }
+  z-index: z("composer", "content") - 1;
+  padding: var(--spacing-block-l) var(--spacing-inline-xl);
  position: sticky;
+  margin-bottom: 0;
  top: var(--header-offset);
  background: var(--d-content-background);
+  border-radius: var(--d-border-radius-large);
 }
-
 .container.posts,
 .more-topics__container,
 #topic-footer-buttons {
  padding: 0 24px;
 }

+.container.posts {
+  grid-template-columns: auto 150px;
+  @media screen and (max-width: 924px) {
+    grid-template-columns: auto auto;
+  }
+}
+
+.timeline-container .topic-timeline .timeline-ago {
+  max-width: unset;
+  overflow: unset;
+  text-overflow: unset;
+}
+
+.timeline-container .topic-timeline .timeline-scroller-content {
+  overflow: unset;
+}
+
 .more-topics__container
  .more-topics__list
  .topic-list-body
  .topic-list-item:last-of-type {
-  border-bottom: 1px solid #cedde3;
+  border-bottom: 1px solid var(--primary-300);
 }

 .discourse-post-event .discourse-post-event-widget {
@@ -74,3 +102,14 @@
  margin-block: unset;
  margin-bottom: 1em;
 }
+
+.timeline-container.timeline-fullscreen
+  .topic-timeline
+  .timeline-scrollarea
+  .timeline-scroller
+  .timeline-handle {
+  float: none;
+  width: 5px;
+  position: relative;
+  right: -4px;
+}
@@ -1,21 +1,43 @@
 :root {
+  --accent-color: #393edb;
+  --background-color: light-dark(#f5f8ff, #1b1c1e);
+  --search-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h)
+  );
+  --search-banner-text-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
+    oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
+  );
+  --topic-card-shadow: light-dark(
+    oklch(from var(--accent-color) calc(l * 2) calc(c * 0.1) h / 0.5),
+    oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
+  );
+  --button-box-shadow: light-dark(
+    oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
+    oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
+  );
+  --d-selected: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.9) calc(c * 2) h / 0.3),
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h / 0.75)
+  );
+  --d-chat-border: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h),
+    oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
+  );
+  --d-max-width: 1000px;
  --d-border-radius-large: 20px;
  --d-border-radius: 8px;
  --d-input-border-radius: 6px;
-  --accent-color: #3c41c3;
-  --accent-text-color: #ffffff;
-  --d-content-background: #fff;
+  --accent-text-color: light-dark(#ffffff, #0f1024);
+  --d-content-background: var(--secondary);
  --d-nav-color--active: var(--accent-color);
-  --primary: #14171f;
-  --header-background: #f5f8ff;
-  --d-post-control-background--hover: #ebecf9;
-  --d-post-control-text-color--hover: #242775;
+  --d-sidebar-background: var(--background-color);
+  --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
  --d-sidebar-link-color: var(--primary);
  --d-sidebar-highlight-color: var(--primary);
-  --d-sidebar-link-icon-color: #8591ad;
+  --d-sidebar-highlight-background: var(--d-selected);
  --d-sidebar-section-link-icon-size: 1em;
-  --d-sidebar-highlight-background: #ebecf9;
-  --d-sidebar-active-background: #d8d9f3;
  --d-input-bg-color: var(--d-content-background);
  // --d-sidebar-row-height: 2.8em;
  //the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
@@ -1,2 +0,0 @@
-example_setting:
-  default: true
Author	SHA1	Message	Date
David Taylor	ab76fd345d	DEV: CSS-only mask	2025-03-07 17:56:55 +00:00
David Taylor	3777405f0b	DEV: Use resize observer (#25 )	2025-03-07 11:40:19 -06:00
Jordan Vidrine	e18b9e89eb	fix (#24 )	2025-03-06 20:30:27 -06:00
Jordan Vidrine	9381e56c47	UX: Dark mode changes to move toward a base of accent-color (#23 )	2025-03-06 20:30:07 -06:00
Jordan Vidrine	9a8a9d4ad3	UX: More tweaks & fixes (#22 )	2025-03-06 15:54:45 -06:00
chapoi	91f3cc3ebb	Mobile: Topic list and topic (#19 )	2025-03-06 14:09:19 -06:00
Jordan Vidrine	7d53fe08ce	button/chat fixes (#21 )	2025-03-06 13:20:12 -06:00
Jordan Vidrine	328b8cbab5	UX: More desktop tweaks (#20 )	2025-03-06 13:00:56 -06:00
Martin Brennan	ef2925a663	FIX: i18n import in status column component (#18 )	2025-03-06 13:49:32 +10:00
Jordan Vidrine	41ee5a5358	DEV: Merge topic list card component (#17 ) This PR merges the topic-list-item card component into the nextgen theme. Also does the following cleanup: * Use template-only ember components * Use `fire` instead of deprecated `fa-fire` icon * Lower version requirement for node to 18 to match core * Add english locale strings for topic status column * Remove dummy theme settings --------- Co-authored-by: Martin Brennan <martin@discourse.org>	2025-03-06 13:35:27 +10:00
Jordan Vidrine	f406bfbedf	UX: Misc desktop edits (#15 )	2025-03-05 20:29:58 -06:00
chapoi	af4c0c540f	UX: desktop tweaks (#14 )	2025-03-05 17:05:48 +01:00
Kris	b6d11ddb9b	UX: more dark mode adjustments (#13 )	2025-03-04 19:07:52 -05:00
Kris	257032dc01	UX: start removing hardcoded colors for dark mode support (#12 )	2025-03-04 16:10:11 -05:00