Merge remote-tracking branch 'origin/main'

- 在self.scss中添加#main-outlet-wrapper的z-index: 0样式
- 保持其他样式定义不变

.discourse-compatibility

@@ -0,0 +1,2 @@
+< 3.5.0.beta5-dev: 31249c4f27d93e83c6b83d42d93974522a9a612e
+

Gemfile.lock

@@ -15,16 +15,16 @@ GEM
       tzinfo (~> 2.0, >= 2.0.5)
       uri (>= 0.13.1)
     ast (2.4.3)
-    base64 (0.2.0)
-    benchmark (0.4.0)
-    bigdecimal (3.1.9)
+    base64 (0.3.0)
+    benchmark (0.4.1)
+    bigdecimal (3.2.2)
     concurrent-ruby (1.3.5)
     connection_pool (2.5.3)
-    drb (2.2.1)
+    drb (2.2.3)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.11.3)
-    language_server-protocol (3.17.0.4)
+    json (2.12.2)
+    language_server-protocol (3.17.0.5)
     lint_roller (1.1.0)
     logger (1.7.0)
     minitest (5.25.5)
@@ -35,10 +35,10 @@ GEM
     prettier_print (1.2.1)
     prism (1.4.0)
     racc (1.8.1)
-    rack (3.1.13)
+    rack (3.1.15)
     rainbow (3.1.1)
     regexp_parser (2.10.0)
-    rubocop (1.75.4)
+    rubocop (1.76.0)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
@@ -46,10 +46,10 @@ GEM
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.44.0, < 2.0)
+      rubocop-ast (>= 1.45.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.44.1)
+    rubocop-ast (1.45.0)
       parser (>= 3.3.7.2)
       prism (~> 1.4)
     rubocop-capybara (2.22.1)
@@ -67,12 +67,12 @@ GEM
     rubocop-factory_bot (2.27.1)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
-    rubocop-rails (2.31.0)
+    rubocop-rails (2.32.0)
       activesupport (>= 4.2.0)
       lint_roller (~> 1.1)
       rack (>= 1.1)
       rubocop (>= 1.75.0, < 2.0)
-      rubocop-ast (>= 1.38.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
     rubocop-rspec (3.6.0)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
@@ -99,4 +99,4 @@ DEPENDENCIES
   syntax_tree
 
 BUNDLED WITH
-   2.6.8
+   2.6.9

README.md

@@ -1,3 +1,151 @@
-Horizon is a simple, beautiful theme that improves the out-of-the-box experience for Discourse sites.
+# discourse_theme_ran（Horizon 主题源码）
 
-https://meta.discourse.org/t/horizon-theme/360486
+> 该仓库是 Discourse `Horizon (beta)` 主题的源码副本。仓库内原 README 已标注该主题已并入 Discourse Core。
+
+## 1. 项目作用
+
+这是一个 Discourse 主题项目，核心目标是：
+- 改造论坛整体视觉（卡片化主题列表、圆角、配色系统、侧边栏样式）
+- 增强交互（侧边栏新建主题按钮、颜色方案切换、Composer Peek 模式）
+- 调整不同页面体验（分类页、主题页、聊天页、登录页、移动端）
+- 提供系统测试，验证主题关键行为
+
+---
+
+## 2. 目录结构与作用
+
+### `.github/`
+- `workflows/discourse-theme.yml`：CI 配置，复用 Discourse 官方主题工作流。
+
+### `assets/`
+- `.gitkeep`：占位目录，预留静态资源（当前无实际资源文件）。
+
+### `common/`
+- `common.scss`：公共样式入口，按模块聚合 `scss/` 下样式。
+- `color_definitions.scss`：主题色变量定义（基于 tertiary 推导背景、链接、侧边栏等）。
+- `head_tag.html`：注入浏览器兼容检测脚本，不支持 `hsl(from ...)` 时提示升级浏览器。
+
+### `desktop/`
+- `desktop.scss`：桌面端样式入口。
+- `desktop-full-width.scss`：全宽布局与头部网格布局规则。
+- `desktop-horizon-fixes.scss`：桌面端修复（如 bulk select 样式/布局修正）。
+
+### `javascripts/`
+- `.gitkeep`：占位。
+- `discourse/api-initializers/`：通过 Discourse API 注入主题行为。
+  - `horizon.gjs`：主题主初始化器；注册实验装饰层、配色选择器、站点设置覆盖、管理员弃用提示。
+  - `sidebar-new-topic-button-connector.js`：把自定义“新建主题”按钮渲染到侧边栏。
+  - `composer-peek-toggle-connector.js`：把 Peek 模式切换按钮挂到 composer 工具区。
+  - `full-width-logo-behavior.js`：侧边栏展开时控制 Logo 最小化行为。
+  - `reposition-bulk-select.js`：将批量选择入口放到导航控制区。
+  - `hamburger-click-outside-transformer.js`：扩展汉堡菜单“点击外部关闭”例外元素。
+- `discourse/components/`：Glimmer 组件。
+  - `experimental-screen.gjs`：主内容四角/底部装饰层组件（根据容器位置实时计算）。
+  - `sidebar-new-topic-button.gjs`：侧边栏新建主题按钮逻辑（权限、分类只读、草稿、关闭汉堡菜单）。
+  - `composer-peek-mode-toggle.gjs`：Composer Peek 模式开关，偏好写入 `keyValueStore`。
+  - `user-color-palette-selector.gjs`：用户配色切换主组件（支持匿名/登录、明暗配套、CSS 热替换）。
+  - `user-color-palette-menu-item.gjs`：配色菜单项。
+- `discourse/components/card/`：主题列表卡片列组件。
+  - `topic-status-column.gjs`：Pinned/Hot 状态徽章。
+  - `topic-category-column.gjs`：分类列。
+  - `topic-creator-column.gjs`：主题创建者头像列。
+  - `topic-replies-column.gjs`：回复数列。
+  - `topic-likes-column.gjs`：点赞数列（当前主题列表布局中未启用展示）。
+  - `topic-activity-column.gjs`：最近活动信息（回复/创建/更新与时间）。
+- `discourse/initializers/topic-list-columns.gjs`：重排主题列表列、注入卡片列、改写点击行为与移动布局策略。
+
+### `locales/`
+- `en.yml`：主题文案与元数据（如 `topic_hot`、`topic_pinned`、描述文本）。
+
+### `scss/`
+按功能拆分的样式模块（由 `common/common.scss` 与 `desktop/desktop.scss` 聚合）：
+- `variables.scss`：全局尺寸/圆角/间距变量。
+- `main.scss`：页面主体容器网格与背景结构。
+- `topic-cards.scss`：主题列表卡片化布局核心样式。
+- `topic.scss`：主题阅读页、时间线、帖子流样式。
+- `categories-view.scss`：分类页与分类+最新混合页样式。
+- `sidebar.scss`：侧边栏容器/section/链接样式。
+- `sidebar-new-topic-button.scss`：侧边栏新建主题按钮视觉与状态。
+- `header.scss`：顶部栏、通知菜单、图标交互样式。
+- `nav-pills.scss`：列表导航区（sticky、tab/下拉）样式。
+- `buttons.scss`：按钮体系（默认/主按钮 hover、focus、active）。
+- `composer.scss`：编辑器外观与工具条、翻译 composer 相关样式。
+- `composer-peek-mode.scss`：Peek 模式下 composer 与主布局联动。
+- `chat.scss`：聊天页/聊天抽屉适配。
+- `welcome-banner.scss`：欢迎横幅和搜索区域样式。
+- `mobile-stuff.scss`：移动端/小屏布局调整。
+- `login.scss`：登录类页面布局样式。
+- `misc.scss`：分散组件兼容/补丁样式。
+- `hiddenstuff.scss`：隐藏部分原生 UI 元素。
+- `color-choice.scss`：配色切换菜单样式。
+- `color-exploration.scss`：侧边栏等颜色变量实验定义。
+- `box-view.scss`：实验装饰层（四角遮罩）与聊天相关视觉细节。
+- `desktop-full-width.scss`、`desktop-horizon-fixes.scss`：虽然在 `scss/` 目录下存在同名文件，实际桌面入口使用 `desktop/` 目录版本。
+
+### `screenshots/`
+- `light.png`、`dark.png`：主题明/暗模式截图，供主题元信息展示。
+
+### `spec/`
+系统测试（RSpec + Capybara）：
+- `system/core_features_spec.rb`：主题与核心能力兼容性基础测试。
+- `system/horizon_high_level_spec.rb`：高层端到端流程（主题列表、导航、配色切换）。
+- `system/sidebar_topic_button_spec.rb`：侧边栏新建主题按钮行为测试。
+- `system/composer_peek_spec.rb`：Peek 模式可见性与持久化测试。
+- `system/user_color_palette_selector_spec.rb`：配色切换在匿名/登录/深色模式下的行为测试。
+- `system/page_objects/components/user_color_palette_selector.rb`：配色选择器的 PageObject 封装。
+- `.gitkeep`：占位。
+
+### `test/`
+- `acceptance/.gitkeep`：预留前端测试目录（当前无具体测试文件）。
+
+---
+
+## 3. 根目录文件作用
+
+- `about.json`：主题元数据（名称、作者、链接、版本、颜色方案、截图、modifiers）。
+- `settings.yml`：主题设置项（欢迎横幅开关、搜索体验模式）。
+- `README.md`：项目说明文档（本文件）。
+- `LICENSE`：MIT 许可证。
+- `package.json`：前端开发依赖与 Node/pnpm 版本约束。
+- `pnpm-lock.yaml`：前端依赖锁定文件。
+- `Gemfile` / `Gemfile.lock`：Ruby 工具链依赖（rubocop-discourse、syntax_tree 等）。
+- `.discourse-compatibility`：与 Discourse 版本兼容映射。
+- `eslint.config.mjs`：ESLint 配置（继承 `@discourse/lint-configs`）。
+- `stylelint.config.mjs`：Stylelint 配置。
+- `.template-lintrc.cjs`：Ember Template Lint 配置。
+- `.prettierrc.cjs`：Prettier 配置。
+- `.rubocop.yml`：Rubocop 配置（Discourse 规则）。
+- `.streerc`：Syntax Tree 格式化配置。
+- `.npmrc`：npm 行为约束（严格引擎、禁自动 peer 安装）。
+- `.gitignore`：Git 忽略规则。
+
+---
+
+## 4. 关键功能对应关系（便于快速定位）
+
+- 主题配色切换：
+  - 逻辑：`javascripts/discourse/components/user-color-palette-selector.gjs`
+  - 菜单样式：`scss/color-choice.scss`
+  - 颜色定义：`about.json` + `common/color_definitions.scss`
+
+- 侧边栏新建主题按钮：
+  - 逻辑：`javascripts/discourse/components/sidebar-new-topic-button.gjs`
+  - 挂载：`javascripts/discourse/api-initializers/sidebar-new-topic-button-connector.js`
+  - 样式：`scss/sidebar-new-topic-button.scss`
+
+- 主题列表卡片化：
+  - 列注册：`javascripts/discourse/initializers/topic-list-columns.gjs`
+  - 各列组件：`javascripts/discourse/components/card/*.gjs`
+  - 主样式：`scss/topic-cards.scss`
+
+- Composer Peek 模式：
+  - 逻辑：`javascripts/discourse/components/composer-peek-mode-toggle.gjs`
+  - 挂载：`javascripts/discourse/api-initializers/composer-peek-toggle-connector.js`
+  - 样式：`scss/composer-peek-mode.scss`
+
+---
+
+## 5. 说明
+
+- 此仓库 README 原文已声明：该主题已并入 Discourse Core，生产环境优先使用 Core 内置 Horizon 主题。
+- 当前仓库更适合作为学习/二次开发参考，用于理解 Discourse 主题的样式组织方式与前端扩展点。

about.json

@@ -1,14 +1,12 @@
 {
-  "name": "Horizon",
-  "authors": "Design Team",
-  "about_url": "https://meta.discourse.org/t/horizon-theme/360486",
-  "license_url": "https://github.com/discourse/horizon/blob/main/LICENSE",
-  "learn_more": "https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682",
+  "name": "Horizon-shiran",
+  "authors": "shiran",
+  "about_url": "",
+  "license_url": "https://gitea.s1f.ren/shiran/discourse_theme_ran/horizon/blob/main/LICENSE",
+  "learn_more": "",
   "theme_version": "0.0.1",
   "modifiers": {
-    "svg_icons": [
-      "fire"
-    ],
+    "svg_icons": ["fire"],
     "serialize_topic_is_hot": true
   },
   "color_schemes": {
@@ -132,5 +130,6 @@
       "header_primary": "ffffff",
       "hover": "584B3E"
     }
-  }
+  },
+  "screenshots": ["screenshots/light.png", "screenshots/dark.png"]
 }

common/common.scss

@@ -1,6 +1,7 @@
 @import "box-view";
 @import "buttons";
 @import "chat";
+@import "categories-view";
 @import "color-choice";
 @import "composer";
 @import "composer-peek-mode";
@@ -17,3 +18,4 @@
 @import "topic";
 @import "topic-cards";
 @import "variables";
+@import "self";

common/head_tag.html

@@ -1,6 +1,7 @@
 <script>
   if (!CSS.supports("(color: hsl(from white h s l))")) {
     window.unsupportedBrowser = true;
-    window.I18n.translations[I18n.locale].js.browser_update = 'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
+    window.I18n.translations[I18n.locale].js.browser_update =
+      'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
   }
 </script>

javascripts/discourse/components/card/topic-activity-column.gjs

@@ -1,9 +1,6 @@
 import Component from "@glimmer/component";
-import avatar from "discourse/helpers/avatar";
 import concatClass from "discourse/helpers/concat-class";
-import icon from "discourse/helpers/d-icon";
 import formatDate from "discourse/helpers/format-date";
-import { i18n } from "discourse-i18n";
 
 export default class TopicActivityColumn extends Component {
   get topicUser() {
@@ -27,37 +24,25 @@ export default class TopicActivityColumn extends Component {
       };
     } else if (this.args.topic.posts_count === 1) {
       return {
-        user: this.args.topic.creator,
-        username: this.args.topic.creator.username,
-        activityText: "user_posted",
-        class: "--posted",
+        user: this.args.topic.firstPosterUser,
+        username: this.args.topic.last_poster_username,
+        class: "--created",
       };
+    } else {
+      return;
     }
   }
 
   <template>
     <span class={{concatClass "topic-activity" this.topicUser.class}}>
-      <div class="topic-activity__user">
-        {{#if this.topicUser.user}}
-          {{avatar this.topicUser.user imageSize="small"}}
-        {{else}}
-          {{icon "pencil"}}
-        {{/if}}
-      </div>
       {{#if this.topicUser.username}}
         <span
           class="topic-activity__username"
         >{{this.topicUser.username}}</span>
+        <span class="dot-separator"></span>
       {{/if}}
-      <div class="topic-activity__reason">
-        {{i18n (themePrefix this.topicUser.activityText)}}
-      </div>
       <div class="topic-activity__time">
-        {{formatDate
-          @topic.bumpedAt
-          leaveAgo="true"
-          format="medium-with-ago-and-on"
-        }}
+        {{formatDate @topic.bumpedAt leaveAgo="true" format="tiny"}}
       </div>
     </span>
   </template>

javascripts/discourse/components/card/topic-creator-column.gjs

@@ -0,0 +1,17 @@
+import Component from "@glimmer/component";
+import avatar from "discourse/helpers/avatar";
+
+export default class TopicCreatorColumn extends Component {
+  get topicCreator() {
+    return {
+      user: this.args.topic.creator,
+      class: "--topic-creator",
+    };
+  }
+
+  <template>
+    <div class={{this.topicCreator.class}}>
+      {{avatar this.topicCreator.user}}
+    </div>
+  </template>
+}

javascripts/discourse/components/card/topic-replies-column.gjs

@@ -1,9 +1,12 @@
+import { gt } from "truth-helpers";
 import icon from "discourse/helpers/d-icon";
-import gt from "truth-helpers/helpers/gt";
+import number from "discourse/helpers/number";
 
 const TopicRepliesColumn = <template>
   {{#if (gt @topic.replyCount 1)}}
-    <span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
+    <span class="topic-replies">{{icon "reply"}}{{number
+        @topic.posts_count
+      }}</span>
   {{/if}}
 </template>;
 

javascripts/discourse/components/card/topic-status-column.gjs

@@ -30,7 +30,9 @@ export default class TopicStatusColumn extends Component {
     {{#if this.badge}}
       <span class="topic-status-card {{this.badge.className}}">{{icon
           this.badge.icon
-        }}{{i18n (themePrefix this.badge.text)}}</span>
+        }}<p class="topic-status-card__name">{{i18n
+            (themePrefix this.badge.text)
+          }}</p></span>
     {{/if}}
   </template>
 }

javascripts/discourse/components/sidebar-new-topic-button.gjs

@@ -5,9 +5,8 @@ import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
 import { service } from "@ember/service";
-import { gt } from "truth-helpers";
+import { gt, not } from "truth-helpers";
 import CreateTopicButton from "discourse/components/create-topic-button";
-import not from "truth-helpers/helpers/not";
 
 export default class SidebarNewTopicButton extends Component {
   @service composer;

javascripts/discourse/initializers/topic-list-columns.gjs

@@ -1,7 +1,7 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
 import TopicActivityColumn from "../components/card/topic-activity-column";
 import TopicCategoryColumn from "../components/card/topic-category-column";
-import TopicLikesColumn from "../components/card/topic-likes-column";
+import TopicCreatorColumn from "../components/card/topic-creator-column";
 import TopicRepliesColumn from "../components/card/topic-replies-column";
 import TopicStatusColumn from "../components/card/topic-status-column";
 
@@ -23,13 +23,18 @@ const TopicCategory = <template>
   </td>
 </template>;
 
-const TopicLikesReplies = <template>
+const TopicReplies = <template>
   <td class="topic-likes-replies-data">
-    <TopicLikesColumn @topic={{@topic}} />
     <TopicRepliesColumn @topic={{@topic}} />
   </td>
 </template>;
 
+const TopicCreator = <template>
+  <td class="topic-creator-data">
+    <TopicCreatorColumn @topic={{@topic}} />
+  </td>
+</template>;
+
 export default {
   name: "topic-list-customizations",
 
@@ -49,7 +54,11 @@ export default {
           });
 
           columns.add("topic-likes-replies", {
-            item: TopicLikesReplies,
+            item: TopicReplies,
+            after: "topic-author-avatar",
+          });
+          columns.add("topic-creator", {
+            item: TopicCreator,
             after: "topic-author-avatar",
           });
           columns.delete("views");
@@ -76,6 +85,9 @@ export default {
           ) {
             classes.push("--has-status-card");
           }
+          if (context.topic.replyCount > 1) {
+            classes.push("has-replies");
+          }
           return classes;
         }
       );
@@ -83,6 +95,34 @@ export default {
       api.registerValueTransformer("topic-list-item-mobile-layout", () => {
         return false;
       });
+
+      api.registerBehaviorTransformer(
+        "topic-list-item-click",
+        ({ context: { event }, next }) => {
+          if (event.target.closest("a, button, input")) {
+            return next();
+          }
+
+          event.preventDefault();
+          event.stopPropagation();
+
+          const topicLink = event.target
+            .closest("tr")
+            .querySelector("a.raw-topic-link");
+
+          // Redespatch the click on the topic link, so that all key-handing is sorted
+          topicLink.dispatchEvent(
+            new MouseEvent("click", {
+              ctrlKey: event.ctrlKey,
+              metaKey: event.metaKey,
+              shiftKey: event.shiftKey,
+              button: event.button,
+              bubbles: true,
+              cancelable: true,
+            })
+          );
+        }
+      );
     });
   },
 };

locales/en.yml

@@ -1,6 +1,6 @@
 en:
   theme_metadata:
-    description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
+    description: "(DEPRECATED: Use the Horizon theme that is now preinstalled on your Discourse site). A simple, beautiful theme that improves the out of the box experience for Discourse sites."
   topic_pinned: "Pinned"
   topic_hot: "Hot"
   user_replied: "replied"

package.json

@@ -1,11 +1,11 @@
 {
   "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "2.11.1",
-    "ember-template-lint": "7.0.1",
-    "eslint": "9.22.0",
+    "@discourse/lint-configs": "2.25.0",
+    "ember-template-lint": "7.8.1",
+    "eslint": "9.28.0",
     "prettier": "3.5.3",
-    "stylelint": "16.16.0"
+    "stylelint": "16.20.0"
   },
   "engines": {
     "node": ">= 22",

scss/box-view.scss

@@ -1,4 +1,6 @@
-@media screen and (min-width: 1300px) {
+@use "lib/viewport";
+
+@media screen and (width >= 1300px) {
   #main-outlet {
     border-top-right-radius: var(--d-border-radius-large);
     border-top-left-radius: var(--d-border-radius-large);
@@ -20,7 +22,7 @@
 .has-full-page-chat .chat-replying-indicator-container {
   margin-bottom: var(--main-grid-gap);
 
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     margin-bottom: 0;
   }
 }
@@ -28,7 +30,7 @@
 .has-full-page-chat .chat-selection-management {
   margin-bottom: var(--main-grid-gap);
 
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     margin-bottom: 0;
   }
 }
@@ -40,17 +42,16 @@
   margin: 0;
   padding: 0;
   position: relative;
-  container: content-width / inline-size;
 
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     display: none;
   }
 
-  @media screen and (max-width: 488px) {
+  @media screen and (width <= 488px) {
     display: none;
   }
 
-  @include breakpoint(tablet) {
+  @include viewport.until(md) {
     display: none;
   }
 
@@ -93,7 +94,7 @@
     bottom: var(--main-grid-gap);
     left: var(--left-distance);
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
@@ -103,7 +104,7 @@
     bottom: var(--main-grid-gap);
     left: calc(var(--right-distance) - var(--d-border-radius-large));
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
@@ -117,7 +118,7 @@
     left: var(--left-distance);
     height: var(--main-grid-gap);
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       height: calc(var(--d-border-radius-large) * 2);
     }
 
@@ -127,7 +128,37 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+.rtl .experimental-screen {
+  &__top-left {
+    right: var(--left-distance);
+    left: unset;
+  }
+
+  &__top-right {
+    transform: rotate(-90deg) !important;
+    right: calc(var(--right-distance) - var(--d-border-radius-large));
+    left: unset;
+  }
+
+  &__bottom-left {
+    transform: rotate(90deg);
+    right: var(--left-distance);
+    left: unset;
+  }
+
+  &__bottom-right {
+    transform: rotate(180deg);
+    left: unset;
+    right: calc(var(--right-distance) - var(--d-border-radius-large));
+  }
+
+  &__bottom-bar {
+    right: var(--left-distance);
+    left: unset;
+  }
+}
+
+@media screen and (width >= 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -136,7 +167,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (width <= 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -145,7 +176,7 @@
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (width <= 400px) {
   .with-topic-progress {
     bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
   }

scss/categories-view.scss

@@ -0,0 +1,363 @@
+@use "lib/viewport";
+
+.categories-and-latest {
+  .category-list {
+    border-collapse: separate;
+
+    th.topics,
+    .category-logo {
+      display: none;
+    }
+
+    thead tr th {
+      font-size: var(--font-up-1-rem);
+      font-weight: bold;
+    }
+
+    tbody {
+      display: flex;
+      flex-direction: column;
+      gap: 1em;
+      padding-top: 1em;
+      border: 0;
+    }
+
+    tbody tr {
+      display: grid;
+      grid-template-areas:
+        "title topics"
+        "category category"
+        "subcategory subcategory";
+      row-gap: 1em;
+      border: 1px solid var(--primary-300);
+      border-radius: var(--d-border-radius-large);
+      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+    }
+
+    td.category {
+      display: contents;
+      border-top-left-radius: var(--d-border-radius-large);
+      border-bottom-left-radius: var(--d-border-radius-large);
+      border-width: 2px;
+      padding: 1em 1.5rem;
+    }
+
+    tbody h3 {
+      grid-area: title;
+      padding: 1em 0 0 1.5rem;
+      font-size: var(--font-up-1-rem);
+
+      .category-name {
+        display: flex;
+        align-self: center;
+      }
+
+      .badge-category {
+        gap: 0.25em;
+        align-items: center;
+        font-size: var(--font-up-1-rem);
+
+        .d-icon:first-of-type:not(.d-icon-lock),
+        &.--style-square::before,
+        &.--style-emoji .emoji {
+          width: 1.25em;
+          height: 1.25em;
+          margin-right: 0.25em;
+        }
+
+        &.--style-square::before {
+          border-radius: 6px;
+        }
+      }
+
+      .d-icon.d-icon-lock {
+        order: 1;
+      }
+    }
+
+    .topics {
+      width: auto;
+      padding: 1em 1.5rem 0 0;
+      display: flex;
+      align-items: center;
+      justify-content: end;
+    }
+
+    .category-description {
+      grid-area: category;
+      padding: 0 1.5rem;
+      margin: 0;
+      font-size: var(--font-down-1-rem);
+    }
+
+    .subcategories {
+      grid-area: subcategory;
+      gap: 0.25em 0.5em;
+      padding: 0 1.5rem 1em;
+      margin: 0;
+
+      .badge-category__wrapper {
+        background-color: light-dark(
+          oklch(from var(--category-badge-color) 98% calc(c * 0.2) h),
+          oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
+        );
+        padding: 0.25em 0.5rem;
+        border-radius: var(--d-border-radius);
+      }
+
+      .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)
+        );
+      }
+
+      .badge-category.--style-square::before {
+        border-radius: 3px;
+      }
+    }
+  }
+
+  .latest-topic-list {
+    .table-heading {
+      border: 0;
+      font-size: var(--font-up-1-rem);
+      font-weight: bold;
+    }
+
+    &-item {
+      display: grid;
+      grid-template-columns: min-content min-content auto min-content;
+      grid-template-areas:
+        "creator title title status"
+        ". category activity activity";
+      grid-column-gap: 0.75rem;
+      grid-row-gap: 0.5rem;
+      background: var(--d-content-background);
+      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+      text-overflow: ellipsis;
+      padding: 0.75em 1rem;
+      border: 1px solid var(--primary-300);
+      border-radius: var(--d-border-radius-large);
+      margin-top: 1em;
+    }
+
+    .main-link,
+    .topic-stats {
+      display: contents;
+    }
+
+    .top-row {
+      grid-area: title;
+    }
+
+    .bottom-row {
+      grid-area: category;
+
+      .discourse-tags {
+        display: none;
+      }
+    }
+
+    .badge-category__wrapper {
+      border-radius: var(--d-border-radius);
+      padding: 0.25em 0.5rem;
+      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)
+      );
+
+      @include viewport.until(md) {
+        padding: 0.25em 0.5rem;
+        font-size: var(--font-down-2);
+      }
+
+      .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)
+        );
+      }
+    }
+
+    .topic-list-data {
+      grid-area: likes-replies;
+    }
+
+    .num.posts-map {
+      display: none;
+    }
+
+    .topic-last-activity {
+      grid-area: activity;
+      display: flex;
+      align-items: center;
+      text-align: left;
+      font-size: var(--font-down-1-rem);
+
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 0.25em;
+        height: 0.25em;
+        background-color: var(--primary-500);
+        border-radius: 100%;
+        margin-right: 0.5em;
+      }
+    }
+
+    .topic-poster {
+      grid-area: creator;
+      width: auto;
+      align-self: flex-start;
+
+      .avatar {
+        height: 24px;
+        width: 24px;
+        border-radius: var(--d-border-radius-small);
+      }
+    }
+  }
+}
+
+@include viewport.until(sm) {
+  .category-list.with-topics {
+    margin-inline: 1rem;
+
+    .num.posts,
+    .category-topics-count,
+    .category-logo {
+      display: none;
+    }
+
+    .category-list {
+      &-item {
+        padding-top: 0;
+        padding-bottom: 0;
+        border-top: 0 !important;
+        border-bottom: 0 !important;
+      }
+    }
+
+    tbody {
+      display: flex;
+      flex-direction: column;
+
+      tr:first-of-type {
+        order: -2;
+      }
+
+      tr.subcategories-list {
+        order: -1;
+      }
+
+      tr:nth-last-of-type(2) {
+        border-bottom: 0;
+      }
+    }
+
+    th.main-link {
+      padding-top: 0;
+    }
+  }
+}
+
+.category-boxes.with-subcategories {
+  .category-logo {
+    display: none;
+  }
+
+  @include viewport.from(sm) {
+    margin-top: 0;
+  }
+
+  @include viewport.until(md) {
+    padding-inline: 1rem;
+    box-sizing: border-box;
+  }
+
+  .category {
+    border: 0;
+
+    &-box-inner {
+      border-radius: var(--d-border-radius-large);
+      border: 1px solid var(--primary-300);
+      background: var(--d-content-background);
+      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+
+      &:hover {
+        .discourse-no-touch & {
+          border-color: var(--accent-color);
+          background: var(--d-content-background);
+        }
+      }
+
+      &.selected {
+        box-shadow:
+          0 0 0 2px var(--accent-color),
+          0 0 12px 1px var(--topic-card-shadow);
+      }
+    }
+
+    &-details {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      height: 100%;
+    }
+
+    &-box-heading {
+      h3 {
+        text-align: left;
+      }
+
+      .badge-category {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 1em;
+        justify-content: space-between;
+        width: 100%;
+
+        &__wrapper {
+          display: flex;
+        }
+
+        &.--style-square::before {
+          aspect-ratio: 1 / 1;
+          height: auto;
+          width: 13%;
+          border-radius: var(--d-border-radius);
+        }
+
+        &__name {
+          flex-basis: 100%;
+          font-size: var(--font-up-1-rem);
+        }
+
+        .d-icon:not(.d-icon-lock),
+        img.emoji {
+          aspect-ratio: 1 / 1;
+          height: auto;
+          width: 13%;
+        }
+      }
+    }
+
+    .description {
+      text-align: left;
+      margin: 0;
+      font-size: var(--font-down-1-rem);
+    }
+
+    .subcategories {
+      margin-top: auto;
+      row-gap: 0.5em;
+
+      .subcategory {
+        margin-bottom: 0;
+        font-size: var(--font-down-1);
+      }
+    }
+  }
+}

scss/chat.scss

@@ -1,9 +1,13 @@
+@use "lib/viewport";
+
 .full-page-chat.full-page-chat-sidebar-enabled {
   border: none;
 }
 
 .c-navbar-container {
+  .full-page-chat & {
     padding: 0 1.5em;
+  }
   background-color: var(--d-content-background);
 }
 
@@ -19,10 +23,30 @@ body.has-full-page-chat {
   .chat-drawer.is-expanded & {
     border: none;
   }
+
+  .c-navbar__title {
+    padding-left: 0.33em; // visual alignment for chat index, which does not havea a backarrow
+  }
 }
 
 .chat-drawer-outlet-container {
   z-index: z("composer", "content");
+
+  .peek-mode-active & {
+    padding-bottom: 0;
+    left: unset;
+    right: var(--main-grid-gap);
+
+    &:has(.is-expanded) {
+      z-index: calc(z("composer", "dropdown") + 1);
+    }
+  }
+}
+
+.chat-drawer {
+  .peek-mode-active & {
+    max-width: 90vw;
+  }
 }
 
 .chat-drawer .channels-list-container .chat-channel-row {
@@ -54,5 +78,11 @@ body.has-full-page-chat {
 }
 
 .chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
-  z-index: z("composer", "content") + 1;
+  z-index: z("modal", "dialog");
+}
+
+.chat-replying-indicator-container {
+  @include viewport.from(sm) {
+    margin-left: calc(0.65em + 0.2rem);
+  }
 }

scss/color-exploration.scss

@@ -6,7 +6,7 @@
   --d-sidebar-header-icon-color: var(--d-sidebar-link-color);
   --d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
   --d-sidebar-background: var(--background-color);
-  --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
+  --d-sidebar-footer-fade: rgb(var(--tertiary-50-rgb), 1);
   --d-sidebar-prefix-background: var(--d-selected);
   --d-sidebar-active-prefix-background: light-dark(
     oklch(from var(--d-selected) calc(l * 0.85) c h),

scss/composer-peek-mode.scss

@@ -2,7 +2,7 @@
   display: none;
 }
 
-@media screen and (min-width: 1300px) {
+@media screen and (width >= 1300px) {
   html:not(.fullscreen-composer) {
     .peek-mode-toggle svg {
       transform: scaleX(-1);

scss/composer.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 #reply-control
   .select-kit.dropdown-select-box.composer-actions
   .select-kit-header {
@@ -12,13 +14,15 @@
 }
 
 #reply-control.hide-preview:not(.draft) {
-  @include breakpoint("mobile-extra-large", $rule: min-width) {
+  @include viewport.from(sm) {
     background: var(--d-content-background);
     border-top-right-radius: var(--d-border-radius);
     border-top-left-radius: var(--d-border-radius);
 
     .grippie {
       background: var(--tertiary-low);
+      border-top-right-radius: var(--d-border-radius);
+      border-top-left-radius: var(--d-border-radius);
     }
 
     .user-selector,

scss/desktop-full-width.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 // Full width layout. Ported from the Discourse Full Width theme component here
 // https://meta.discourse.org/t/discourse-full-width-component/292496, which we
 // intend to move into core over time.
@@ -23,7 +25,7 @@ $sidebar-width: 17em;
   body:not(.has-sidebar-page) & {
     max-width: unset;
 
-    @include breakpoint("mobile-extra-large") {
+    @include viewport.until(sm) {
       max-width: 25vw;
     }
   }
@@ -103,7 +105,7 @@ $sidebar-width: 17em;
         grid-area: extra-info;
         white-space: nowrap;
 
-        @include breakpoint("tablet") {
+        @include viewport.until(md) {
           display: none;
         }
       }
@@ -127,7 +129,7 @@ $sidebar-width: 17em;
         // at narrower widths, when 1fr = 0
         // we can center without matching the sidebar's width
         // which allows the title to take up the remaining width
-        @media screen and (max-width: 1400px) {
+        @media screen and (width <= 1400px) {
           grid-template-columns:
             calc(var(--d-sidebar-width) - 11px)
             1fr
@@ -136,7 +138,7 @@ $sidebar-width: 17em;
             auto;
         }
 
-        @media screen and (max-width: 1000px) {
+        @media screen and (width <= 1000px) {
           gap: 0.5em;
         }
 
@@ -189,11 +191,11 @@ $sidebar-width: 17em;
 .header-search--enabled .floating-search-input-wrapper {
   grid-area: extra-info;
 
-  @include breakpoint(tablet) {
+  @include viewport.until(md) {
     grid-area: rspace;
   }
 
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     display: none;
   }
 }
@@ -208,7 +210,7 @@ body.has-sidebar-page {
     padding: 0;
   }
 
-  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
+  @media screen and (width >= calc($reply-area-max-width + ($sidebar-width * 2))) {
     #reply-control.show-preview {
       margin-left: auto;
       margin-right: auto;
@@ -219,7 +221,7 @@ body.has-sidebar-page {
     }
   }
 
-  @media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
+  @media screen and (width <= calc($reply-area-max-width + ($sidebar-width * 2))) and (width >= calc($reply-area-max-width + calc($sidebar-width / 2))) {
     #reply-control.show-preview:not(.fullscreen) {
       margin-left: $sidebar-width;
       width: auto;
@@ -265,7 +267,7 @@ body.sidebar-animate {
 }
 
 // provides some extra space for login buttons
-@media screen and (min-width: 1400px) {
+@media screen and (width >= 1400px) {
   .anon {
     .d-header .panel {
       grid-column-start: -4;

scss/desktop-horizon-fixes.scss

@@ -1,8 +1,9 @@
 // Fixing bulk select (only needed for desktop)
 .bulk-select-enabled {
-  .topic-list-header .topic-list-data.default {
-    position: sticky;
-    top: 10em;
+  .topic-list-header {
+    position: relative;
+    top: 0;
+    z-index: 2;
   }
 
   .topic-author-avatar-data {
@@ -13,7 +14,7 @@
     grid-area: bulk-select;
     margin-left: -0.5em;
 
-    @media screen and (max-width: 576px) {
+    @media screen and (width <= 576px) {
       margin-top: 0;
 
       label {
@@ -28,18 +29,29 @@
 }
 
 .topic-list-header {
+  position: relative;
+  margin-bottom: 0.35rem;
+
   tr {
     border: none;
   }
 
   .topic-list-data {
-    padding: 0;
+    padding: 0.25rem 0;
+    color: var(--primary-600);
+    font-size: var(--font-down-2);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    background: transparent;
 
     &:not(.default) {
       display: none;
     }
 
     &.default {
+      border-radius: var(--d-border-radius);
+
       .bulk-select,
       span:not(.bulk-select-topics, .d-button-label) {
         display: none;
@@ -47,19 +59,25 @@
     }
   }
 
+  // bulk select
   .bulk-select-topics {
     position: absolute;
-    right: -1em;
-    background: var(--secondary);
-    border-radius: 0 0 0 var(--d-border-radius);
-    padding: 1em;
-
-    @media screen and (max-width: 1048px) {
-      right: 0;
-    }
+    right: 0.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: color-mix(in srgb, var(--d-content-background) 88%, white 12%);
+    border: 1px solid var(--primary-200);
+    border-radius: 999px;
+    box-shadow: 0 6px 18px -12px rgb(10 18 35 / 35%);
+    display: flex;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0.25rem;
 
     button {
       white-space: nowrap;
+      margin: 0;
+      border-radius: 999px;
     }
   }
 }

scss/header.scss

@@ -1,8 +1,10 @@
+@use "lib/viewport";
+
 .d-header {
   box-shadow: none;
   background: var(--background-color);
 
-  @include breakpoint(extra-large, $rule: min-width) {
+  @include viewport.from(xl) {
     padding-bottom: var(--main-grid-gap);
   }
 }

scss/hiddenstuff.scss

@@ -2,8 +2,6 @@
 .list-controls #create-topic,
 .notifications-button-footer .reason .text,
 .pinned-button .reason .text,
-.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 {
+.more-topics__browse-more {
   display: none;
 }

scss/main.scss

@@ -1,23 +1,87 @@
+@use "lib/viewport";
+
 :root {
   --main-grid-gap: 0.5em;
+  --dream-glow-a: rgb(var(--tertiary-rgb) / 0.24);
+  --dream-glow-b: rgb(var(--tertiary-rgb) / 0.18);
 }
 
 html:not(:has(.has-full-page-chat)) {
   background-color: var(--background-color);
 
-  @include breakpoint("mobile-extra-large") {
+  @include viewport.until(sm) {
     background-color: var(--d-content-background);
   }
 }
 
 body {
   -webkit-font-smoothing: antialiased;
+  position: relative;
 
-  @include breakpoint("mobile-extra-large") {
+  @include viewport.until(sm) {
     background-color: var(--d-content-background);
   }
 }
 
+body:not(.has-full-page-chat, .wizard)::before,
+body:not(.has-full-page-chat, .wizard)::after {
+  content: "";
+  position: fixed;
+  width: min(42vw, 32rem);
+  aspect-ratio: 1 / 1;
+  border-radius: 999px;
+  filter: blur(56px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+body:not(.has-full-page-chat, .wizard)::before {
+  top: 5rem;
+  left: -8rem;
+  background: radial-gradient(circle at 30% 30%, var(--dream-glow-a), transparent 62%);
+  animation: dreamy-float-a 18s ease-in-out infinite alternate;
+}
+
+body:not(.has-full-page-chat, .wizard)::after {
+  right: -6rem;
+  bottom: 2rem;
+  background: radial-gradient(circle at 65% 35%, var(--dream-glow-b), transparent 58%);
+  animation: dreamy-float-b 22s ease-in-out infinite alternate;
+}
+
+.d-header-wrap,
+#main-outlet-wrapper,
+.sidebar-wrapper,
+.sidebar-hamburger-dropdown {
+  position: relative;
+  z-index: 1;
+}
+
+@keyframes dreamy-float-a {
+  from {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    transform: translate3d(3rem, -1.5rem, 0) scale(1.08);
+  }
+}
+
+@keyframes dreamy-float-b {
+  from {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    transform: translate3d(-2.5rem, 2rem, 0) scale(1.1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body:not(.has-full-page-chat, .wizard)::before,
+  body:not(.has-full-page-chat, .wizard)::after {
+    animation: none;
+  }
+}
+
 #main-outlet-wrapper {
   gap: var(--main-grid-gap);
 }
@@ -35,7 +99,7 @@ body.has-full-page-chat:not(.has-sidebar-page) {
   #main-outlet-wrapper {
     gap: var(--main-grid-gap);
 
-    @include breakpoint(medium) {
+    @include viewport.until(lg) {
       gap: 0;
     }
   }
@@ -50,22 +114,22 @@ body.has-sidebar-page #main-outlet-wrapper {
 }
 
 body:not(.has-sidebar-page) #main-outlet-wrapper {
-  @include breakpoint(medium, $rule: min-width) {
+  @include viewport.from(lg) {
     grid-template-columns: 0 minmax(0, 1fr) 0;
   }
 }
 
 body:not(.has-full-page-chat, .wizard) {
-  @include breakpoint(extra-large, $rule: min-width) {
+  @include viewport.from(xl) {
     background-color: var(--background-color);
   }
 
   #main-outlet-wrapper {
-    @include breakpoint(medium) {
+    @include viewport.until(lg) {
       --main-grid-gap: 0;
     }
 
-    @media screen and (min-width: 768px) {
+    @media screen and (width >= 768px) {
       gap: var(--main-grid-gap);
     }
 
@@ -76,7 +140,7 @@ body:not(.has-full-page-chat, .wizard) {
       border-radius: var(--d-border-radius-large);
       background-color: var(--d-content-background);
 
-      @include breakpoint(medium) {
+      @include viewport.until(lg) {
         border-radius: 0;
       }
 
@@ -85,7 +149,7 @@ body:not(.has-full-page-chat, .wizard) {
       }
 
       > *:not(.experimental-screen, .activate-account) {
-        @include breakpoint(medium, $rule: min-width) {
+        @include viewport.from(lg) {
           box-sizing: border-box;
           max-width: 1000px;
           margin-inline: auto;
@@ -96,9 +160,15 @@ body:not(.has-full-page-chat, .wizard) {
   }
 }
 
+@include viewport.until(sm) {
+  .welcome-banner {
+    display: none;
+  }
+}
+
 #list-area {
   .show-more.has-topics {
-    @include breakpoint(medium, $rule: min-width) {
+    @include viewport.from(lg) {
       width: auto;
       right: 50%;
       transform: translateX(50%);

scss/misc.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .user-main .about.collapsed-info .details {
   background: var(--d-content-background);
 }
@@ -69,7 +71,7 @@ input[type="color"]:focus,
   background-color: var(--background-color);
 }
 
-@include breakpoint(mobile-extra-large) {
+@include viewport.until(sm) {
   // pinned topic excerpts are hidden on small screens too
   .fk-d-menu__trigger.topic-list-layout-trigger {
     display: none;
@@ -106,6 +108,34 @@ input[type="color"]:focus,
   border-radius: 0;
 }
 
-.d-modal__container {
-  border-radius: var(--d-border-radius);
+// compatibility with the top contributors sidebar theme component
+// https://meta.discourse.org/t/top-contributors-sidebar/215110
+.list-container
+  #list-area
+  > .contents
+  > .topic-list:has(.discourse-top-contributors) {
+  grid-template-areas: "head head" "body sidebar";
+  grid-template-rows: auto 1fr;
+
+  @include viewport.until(lg) {
+    grid-template-areas: "head head" "body body";
+  }
+
+  tbody {
+    display: flex;
+  }
+
+  .discourse-top-contributors {
+    width: auto;
+    box-sizing: border-box;
+
+    @include viewport.until(lg) {
+      display: none;
+    }
+
+    .top-contributors-heading {
+      font-size: var(--font-up-2);
+      padding-bottom: 0.5em;
+    }
+  }
 }

scss/mobile-stuff.scss

@@ -1,5 +1,7 @@
+@use "lib/viewport";
+
 // temp separate file to avoid merge hell… to be distributed later
-@include breakpoint(medium) {
+@include viewport.until(lg) {
   html,
   .d-header {
     background-color: var(--d-content-background);
@@ -8,19 +10,19 @@
 
 #main-outlet-wrapper {
   *[class*="navigation-"] & {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding: 0;
     }
   }
 }
 
 #main-outlet {
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     padding-top: var(--spacing-block-sm);
   }
 
   .list-controls {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(
         --spacing-inline-m
       ) !important; // override will be fixed when the whole chat page shenanigans is resolved
@@ -29,14 +31,13 @@
     }
 
     .navigation-container {
-      @include breakpoint(mobile-extra-large) {
+      @include viewport.until(sm) {
         gap: var(--spacing-inline-s);
 
-        // don't know why we even hide this crucial navigation on mobile
         .category-breadcrumb.hidden,
         .category-breadcrumb {
           display: flex !important;
-          column-gap: var(--spacing-inline-s);
+          column-gap: var(--spacing-inline-m);
           row-gap: var(--spacing-block-xs);
           flex-basis: 100%;
 
@@ -47,9 +48,12 @@
             ); // 2px is width of the outline
           }
 
+          .select-kit-header-wrapper {
+            gap: 0.25em;
+          }
+
           .select-kit-header {
             background: var(--d-content-background);
-            border: 0;
           }
         }
 
@@ -77,13 +81,13 @@
       #navigation-bar,
       .navigation-controls,
       .category-breadcrumb {
-        @include breakpoint(mobile-extra-large) {
+        @include viewport.until(sm) {
           margin-bottom: 0;
         }
       }
 
       .navigation-controls {
-        @include breakpoint(mobile-extra-large) {
+        @include viewport.until(sm) {
           gap: var(--spacing-inline-s);
         }
       }
@@ -91,12 +95,12 @@
   }
 
   .list-container {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: 0 !important;
     }
 
     .topic-list-body {
-      @include breakpoint(mobile-extra-large) {
+      @include viewport.until(sm) {
         border-top: 0;
         padding-top: 0;
       }
@@ -104,7 +108,7 @@
   }
 
   #topic-title {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(--spacing-inline-s) !important;
 
       .title-wrapper {
@@ -158,7 +162,7 @@
   }
 
   .container.posts {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(--spacing-inline-xs) !important;
 
       .main-avatar .avatar {
@@ -197,7 +201,7 @@
   }
 
   #topic-footer-buttons {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(--spacing-inline-xs) !important;
     }
   }

scss/nav-pills.scss

@@ -17,7 +17,7 @@
   .combo-box .combo-box-header {
     // needs more specificity than just in the button file
     background-color: var(--secondary);
-    border-radius: var(--d-border-radius-large);
+    border-radius: var(--d-border-radius);
     border: 1px solid var(--primary-300);
 
     &:hover {

scss/self.scss

@@ -0,0 +1,70 @@
+@use "lib/viewport";
+
+#main-outlet {
+  @if $home_bg_image != "" {
+    background-image: url($home_bg_image);
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+  }
+}
+
+.container.list-container{
+  position: relative;
+  isolation: isolate;
+}
+
+.container.list-container::before{
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      180deg,
+      rgb(var(--secondary-rgb) / 0.46) 0%,
+      rgb(var(--secondary-rgb) / 0.34) 100%
+    );
+  border-radius: var(--d-border-radius);
+  backdrop-filter: blur(8px);
+  box-shadow: rgb(0 0 0 / 28%) 0 10px 26px -16px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.container.list-container > * {
+  position: relative;
+  z-index: 1;
+}
+
+.topic-list-header{
+  background-color: transparent;
+}
+.list-controls, .search-container{
+  border-radius: var(--d-border-radius);
+}
+
+.welcome-banner {
+  padding: 0 !important;
+  box-shadow: #00000094 0 0 11px 0;
+}
+
+#list-area{
+  background-color: transparent;
+}
+
+#main-outlet-wrapper{
+  z-index: 0;
+}
+
+.regular.ember-view{
+  background-color: rgb(var(--secondary-rgb) / 0.58);
+  border-radius: var(--d-border-radius);
+  backdrop-filter: blur(10px);
+  box-shadow: rgb(0 0 0 / 24%) 0 10px 24px -14px;
+  padding: 24px;
+}

scss/sidebar.scss

@@ -2,7 +2,7 @@
 
 .sidebar-wrapper,
 .sidebar-hamburger-dropdown {
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     background: var(--secondary);
 
     .sidebar-footer-wrapper {
@@ -38,11 +38,11 @@
 }
 
 .sidebar-section-wrapper {
-  @include breakpoint(extra-large, $rule: min-width) {
+  @include viewport.from(xl) {
     padding-block: 0.45em;
   }
 
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     .hamburger-panel .revamped & {
       margin-bottom: var(--spacing-block-m);
     }
@@ -57,7 +57,7 @@
     display: flex;
     flex-direction: column;
 
-    @include breakpoint(extra-large, $rule: min-width) {
+    @include viewport.from(xl) {
       gap: var(--spacing-block-xs);
     }
   }

scss/topic.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .post-stream {
   .contents {
     font-size: var(--font-up-1);
@@ -6,14 +8,6 @@
   }
 }
 
-.container.posts .topic-navigation:not(.with-topic-progress) {
-  // super fragile because new sticky topic title doesn't have a calculated value (= 53px with this font and size but…)
-  top: calc(
-    var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
-  );
-  z-index: 300;
-}
-
 .timeline-container .topic-timeline {
   min-width: unset; // why we have this?
 
@@ -21,7 +15,7 @@
     border-left: 1px solid var(--accent-color);
 
     .timeline-scroller {
-      @include breakpoint("medium", $rule: min-width) {
+      @include viewport.from(lg) {
         margin-left: -4.5px;
         background: var(--d-content-background);
         height: 40px !important; // height is coming from element style have no other choice
@@ -36,7 +30,7 @@
     .timeline-handle {
       background-color: var(--accent-color);
 
-      @include breakpoint("medium", $rule: min-width) {
+      @include viewport.from(lg) {
         width: 8px;
         border-radius: 10px;
         height: calc(100% - 6px);
@@ -47,7 +41,7 @@
 
 // should probably get rid of this extra specificity class in core?
 .timeline-container.timeline-fullscreen {
-  @include breakpoint("medium", $rule: max-width) {
+  @include viewport.until(lg) {
     .topic-timeline
       .timeline-scrollarea
       .timeline-scroller
@@ -60,7 +54,7 @@
 .container.posts {
   grid-template-columns: auto 8em;
 
-  @media screen and (max-width: 924px) {
+  @media screen and (width <= 924px) {
     grid-template-columns: auto auto;
   }
 

scss/welcome-banner.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .welcome-banner {
   &__wrap {
     display: grid;
@@ -9,11 +11,11 @@
     padding: 1.5em 0 2.5em;
     margin-bottom: 0;
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       padding: 1em;
     }
 
-    @include breakpoint("mobile-extra-large") {
+    @include viewport.until(sm) {
       display: block;
       padding: 0.5em;
       margin-top: 0;
@@ -25,22 +27,22 @@
       width: 100%;
       align-self: center;
 
-      @media screen and (max-width: 1028px) {
+      @media screen and (width <= 1028px) {
         grid-row: 2/-1;
         grid-column: 1/-1;
       }
 
-      @media screen and (max-width: 768px) {
+      @media screen and (width <= 768px) {
         grid-column: 2/-1;
         grid-row: 1/-1;
       }
 
-      @media screen and (max-width: 600px) {
+      @media screen and (width <= 600px) {
         grid-row: 2/-1;
         grid-column: 1/-1;
       }
 
-      @include breakpoint("mobile-extra-large") {
+      @include viewport.until(sm) {
         display: none;
       }
     }
@@ -54,7 +56,7 @@
   .search-menu-container .search-input {
     background: var(--d-content-background);
     border: 1px solid var(--search-color);
-    box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
+    box-shadow: 0 4px 10px rgb(52, 6, 121, 15%);
   }
 
   .search-menu .search-input:focus-within,
@@ -86,7 +88,7 @@
     font-weight: 400;
     color: var(--search-color);
 
-    @media screen and (max-width: 1028px) {
+    @media screen and (width <= 1028px) {
       font-size: var(--font-up-4);
       grid-column: 1/-1;
       grid-row: 1;
@@ -94,21 +96,21 @@
       margin-bottom: 0.5em;
     }
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       text-align: left;
       grid-column: 1/2;
       grid-row: 1/-1;
       font-size: var(--font-up-3);
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (width <= 600px) {
       grid-column: 1/-1;
       grid-row: 1;
       text-align: center;
       margin-bottom: 0.5em;
     }
 
-    @include breakpoint("mobile-extra-large") {
+    @include viewport.until(sm) {
       font-size: var(--font-up-2);
     }
   }

settings.yml

@@ -9,3 +9,9 @@ search_experience:
     - search_field
     - search_icon
   description: "Overrides the core `search experience` site setting"
+
+home_bg_image:
+  type: upload
+  default: ""
+  description: "首页背景图"
+

spec/system/horizon_high_level_spec.rb

@@ -36,9 +36,8 @@ describe "Horizon theme | High level", type: :system do
     expect(topic_item.all("td").map { |el| el["class"] }).to eq(
       [
         "main-link topic-list-data",
-        "topic-status-data",
         "topic-category-data",
-        "topic-likes-replies-data",
+        "topic-creator-data",
         "topic-activity-data",
       ],
     )
@@ -49,7 +48,7 @@ describe "Horizon theme | High level", type: :system do
 
     # Can change site colors from the sidebar palette, which are remembered
     # across page reloads.
-    marigold_palette = ColorScheme.find_by(name: "Marigold")
+    marigold_palette = theme.color_schemes.find_by(name: "Marigold")
     palette_selector.open_palette_menu
     palette_selector.click_palette_menu_item(marigold_palette.name)
     expect(palette_selector).to have_no_palette_menu

spec/system/page_objects/components/user_color_palette_selector.rb

@@ -26,7 +26,9 @@ module PageObjects
       end
 
       def has_selected_palette?(palette)
-        has_css?(".user-color-palette-selector[data-selected-color-palette-id='#{palette.id}']")
+        has_css?(
+          ".user-color-palette-selector-trigger[data-selected-color-palette-id=\"#{palette.id}\"]",
+        )
       end
 
       def has_loaded_css?

spec/system/user_color_palette_selector_spec.rb

@@ -6,7 +6,7 @@ describe "Horizon theme | User color palette selector", type: :system do
   let(:set_theme_as_default) { true }
   let!(:theme) do
     horizon_theme = upload_theme(set_theme_as_default: set_theme_as_default)
-    ColorScheme.where(theme_id: horizon_theme.id).update_all(user_selectable: true)
+    horizon_theme.color_schemes.update_all(user_selectable: true)
     horizon_theme
   end
   fab!(:current_user) { Fabricate(:user) }
@@ -16,8 +16,8 @@ describe "Horizon theme | User color palette selector", type: :system do
   let(:interface_color_selector) do
     PageObjects::Components::InterfaceColorSelector.new(".sidebar-footer-actions")
   end
-  let(:marigold_palette) { ColorScheme.find_by(name: "Marigold") }
-  let(:marigold_palette_dark) { ColorScheme.find_by(name: "Marigold Dark") }
+  let(:marigold_palette) { theme.color_schemes.find_by(name: "Marigold") }
+  let(:marigold_palette_dark) { theme.color_schemes.find_by(name: "Marigold Dark") }
 
   before { SiteSetting.interface_color_selector = "sidebar_footer" }