more

common/common.scss

@@ -8,6 +8,5 @@
 @import "buttons";
 @import "chat";
 @import "hiddenstuff";
-@import "topics";
-@import "misc";
-@import "box-view";
+@import "topic";
+@import "user";

javascripts/discourse/api-initializers/next-gen.gjs

@@ -1,19 +0,0 @@
-import Component from "@glimmer/component";
-import { apiInitializer } from "discourse/lib/api";
-
-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>
-    }
-  );
-});

javascripts/discourse/api-initializers/next-gen.js

@@ -0,0 +1,5 @@
+import { apiInitializer } from "discourse/lib/api";
+
+export default apiInitializer("1.8.0", (/* api */) => {
+  // console.log("hello world from api initializer!");
+});

scss/box-view.scss

@@ -1,122 +0,0 @@
-.experimental-screen {
-  @media screen and (max-width: 488px) {
-    display: none;
-  }
-  @media screen and (min-width: 1600px) {
-    display: none;
-  }
-  width: 100%;
-  display: block;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  container: content-width / inline-size;
-  li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  &__top-left,
-  &__top-right,
-  &__bottom-left,
-  &__bottom-right {
-    position: fixed;
-    width: var(--d-border-radius-large);
-    height: var(--d-border-radius-large);
-    background-color: var(--secondary);
-    z-index: 999;
-    -webkit-mask: radial-gradient(
-      circle at var(--d-border-radius-large) var(--d-border-radius-large),
-      transparent var(--d-border-radius-large),
-      transparent var(--d-border-radius-large),
-      black var(--d-border-radius-large)
-    );
-  }
-  &__top-left {
-    top: var(--header-offset);
-    left: calc(var(--main-grid-gap) * 2 + 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) * 2 + 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-left {
-    transform: rotate(-90deg);
-    bottom: var(--d-border-radius-large);
-    left: calc(var(--main-grid-gap) * 2 + 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) * 2 + 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);
-      }
-    }
-  }
-  &__bottom-bar {
-    position: fixed;
-    width: 100%;
-    z-index: 999;
-    background-color: var(--secondary);
-    bottom: 0;
-    left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
-    @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;
-    }
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .with-topic-progress {
-    bottom: calc(
-      env(safe-area-inset-bottom) + var(--composer-height, 0px) +
-        var(--d-border-radius-large)
-    );
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .with-topic-progress {
-    bottom: calc(
-      env(safe-area-inset-bottom) + var(--composer-height, 0px) +
-        calc(var(--d-border-radius-large) * 2)
-    );
-  }
-}
-
-@media screen and (max-width: 400px) {
-  .with-topic-progress {
-    bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
-  }
-}

scss/buttons.scss

@@ -1,15 +1,20 @@
+:root {
+  --d-button-border-radius: 6.25rem;
+}
+
 .btn {
   padding: 0.5em 1rem;
 }
 
-.sidebar-new-topic-button__wrapper {
-  margin: 1.5rem 1rem;
+.btn-default {
+  border: 1px solid var(--accent-color);
+  background: var(--secondary);
 }
-
-.sidebar-new-topic-button__wrapper .btn {
+#create-topic.btn,
+.topic-drafts-menu-trigger {
   background-color: var(--accent-color);
   color: var(--accent-text-color);
-  svg {
+  .d-icon {
     color: var(--accent-text-color);
   }
 }

scss/chat.scss

@@ -1,10 +1,10 @@
-// .c-navbar-container {
-//   background-color: light-dark(#ffffff, #000000);
-//   border-top-right-radius: var(--d-border-radius-large);
-//   border-top-left-radius: var(--d-border-radius-large);
-// }
+.c-navbar-container {
+  background-color: light-dark(#ffffff, #000000);
+  border-top-right-radius: var(--d-border-radius-large);
+  border-top-left-radius: var(--d-border-radius-large);
+}
 
-// .chat-message-container,
-// .chat-transcript {
-//   background: transparent;
-// }
+.chat-message-container,
+.chat-transcript {
+  background: transparent;
+}

scss/header.scss

@@ -1,3 +1,6 @@
 .d-header {
   box-shadow: none;
 }
+.desktop-view .d-header {
+  background: transparent;
+}

scss/main.scss

@@ -1,72 +1,68 @@
-html:not(:has(.has-full-page-chat)) {
+body,
+html {
   background-color: #f5f8ff;
 }
 
-body.has-sidebar-page #main-outlet-wrapper {
-  grid-template-columns: 0px 1fr minmax(0, var(--d-max-width)) 1fr;
-  grid-template-areas:
-    "space sidebar content"
-    "space sidebar content";
-  gap: 0 var(--main-grid-gap);
-}
-
-@media screen and (max-width: 488px) {
-  #main-outlet-wrapper {
-    gap: 0;
-  }
-}
-
-.powered-by-discourse {
-  display: none;
-}
-
-body:not(.has-full-page-chat) {
+body:not(.archetype-regular, .has-full-page-chat)
+  #main-outlet-wrapper
   #main-outlet {
-    // 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;
-    background-color: #ffffff;
-    padding-bottom: calc(var(--d-border-radius-large) * 2);
-  }
-  #main-outlet-wrapper {
-    // margin-top: 1.5rem;
-    // gap: 2em !important;
-    // height: calc(100vh - var(--header-offset) - 4rem);
-    // box-sizing: border-box;
-    // what does this do?
-    // > * {
-    //   height: inherit;
-    //   box-sizing: border-box;
-    // }
-    #main-outlet {
-      position: relative;
-      // height: inherit;
-      // overflow: scroll;
-      // &:has(.list-controls) {
-      //   padding-top: 0;
-      // }
-      // &:has(#topic-title) {
-      //   padding-top: 0;
-      // }
-      > *:not(.full-page-chat) {
-        padding-inline: 1.5em;
-      }
-      // border-radius: var(--d-border-radius-large);
-      // border-radius: 1.25rem;
-      // box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
-      // background-color: light-dark(#ffffff, #000000);
-    }
+  overflow: scroll;
+  border-radius: var(--d-border-radius-large);
+  @media screen and (max-width: 600px) {
+    border-radius: 0;
   }
 }
 
-.boxed.white {
-  background-color: #fff;
+#main-outlet-wrapper {
+  margin-top: 1.5rem;
+  gap: 2em;
+  height: calc(100vh - var(--header-offset) - 4rem);
+  box-sizing: border-box;
+  @media screen and (max-width: 600px) {
+    gap: 0;
+    margin-top: 0;
+    height: 100%;
+  }
+  #main-outlet {
+    width: calc(100% - 48px);
+    height: inherit;
+    overflow: scroll;
+    padding: 12px 24px;
+    @media screen and (max-width: 600px) {
+      border-radius: 0px;
+    }
+    @media screen and (max-width: 425px) {
+      padding: 12px 0;
+      width: 100%;
+    }
+    &:has(.list-controls) {
+      padding-top: 0;
+    }
+    &:has(#topic-title) {
+      padding-top: 0;
+      max-width: 1000px;
+    }
+    > *:not(.full-page-chat) {
+      max-width: 1000px;
+      margin-inline: auto;
+    }
+    border-radius: var(--d-border-radius-large);
+    border-radius: 1.25rem;
+    .navigation-topics &,
+    .navigation-category & {
+      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(
+          75.11% 79.17% at 66.02% 41.71%,
+          rgba(162, 164, 225, 0.2) 0%,
+          rgba(255, 255, 255, 0) 100%
+        ),
+        #fff;
+    }
+    box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
+    background-color: light-dark(#ffffff, #000000);
+  }
 }

scss/nav-pills.scss

@@ -1,20 +1,26 @@
 .list-controls {
-  position: sticky;
-  top: var(--header-offset);
-  background: #ffffff;
+  // position: sticky;
+  // top: 0;
+  // background: transparent;
+  // this does not work properly without using a background color
+  // which if used, conflicts with the gradient background
   z-index: 100;
-  padding: 1.5rem 0 1rem 0;
+  padding-top: 1.5rem;
   max-width: unset;
+  width: 100%;
 
   .navigation-container {
     .category-breadcrumb {
       order: 1;
+      margin-left: 0.5em;
     }
   }
-  .combo-box .combo-box-header,
-  .select-kit.is-expanded .select-kit-body,
-  .discourse-post-event .discourse-post-event-widget {
-    background-color: #ffffff;
+  .combo-box .combo-box-header {
+    background-color: var(--secondary);
+    border-radius: 6.25rem;
+  }
+  .select-kit.is-expanded .select-kit-body {
+    background: #ffffff;
     border-radius: var(--d-border-radius);
   }
 }

scss/search-banner.scss

@@ -8,7 +8,7 @@
   padding: 2.5em 0 2.5em;
   margin-bottom: 2.5em;
   --search-color: #595bca;
-  @media screen and (max-width: 700px) {
+  @media screen and (max-width: 425px) {
     padding: 1em 1em 0 1em;
     margin-bottom: 0.5em;
     border-bottom: none;

scss/sidebar.scss

@@ -1,26 +1,9 @@
 :root {
-  // --d-sidebar-background: #f5f8ff;
-}
-
-.sidebar-section-link-wrapper .sidebar-section-link {
-  border-radius: var(--d-border-radius);
+  --d-sidebar-background: #f5f8ff;
 }
 
 .sidebar-wrapper {
-  background: #f5f8ff;
-
-  .has-full-page-chat & {
-    background: transparent;
-  }
   .sidebar-container {
     border-right: none;
   }
-
-  .sidebar-sections {
-    padding: 0;
-  }
-}
-
-.admin-area .sidebar-wrapper .admin-panel {
-  background-color: var(--secondary);
 }

scss/topic-cards.scss

@@ -5,3 +5,22 @@
   }
   border: 1px solid #cedde3;
 }
+
+.more-topics__container
+  .more-topics__list
+  .topic-list-body
+  .topic-list-item:last-of-type {
+  border: 1px solid #cedde3;
+}
+
+@media screen and (max-width: 480px) {
+  .topic-list-body {
+    border-top: none;
+  }
+  .topic-list-item {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+  }
+}

scss/topic.scss

@@ -0,0 +1,32 @@
+.topic-post.sticky-avatar > article > .row > .topic-avatar {
+  position: sticky;
+  top: calc(var(--header-offset) + 0.75em);
+  margin-bottom: 25px;
+}
+
+.container.posts .topic-navigation {
+  top: calc(var(--header-offset, 60px) + 4em);
+}
+
+#topic-title {
+  z-index: 999;
+  margin-bottom: 1em;
+  padding: 12px 24px;
+  position: sticky;
+  top: 0;
+  background-image: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.container.posts,
+.more-topics__container,
+#topic-footer-buttons {
+  padding: 0 24px;
+}
+
+.more-topics__lists.single-list {
+  padding: 12px 0;
+}

scss/topics.scss

@@ -1,29 +0,0 @@
-#topic-title {
-  z-index: 999;
-  margin-bottom: 1em;
-  padding: 1.5rem 2rem 0.5em;
-  position: sticky;
-  top: var(--header-offset);
-  background: #ffffff;
-}
-
-// .container.posts,
-// .more-topics__container,
-// #topic-footer-buttons {
-//   padding: 0 24px;
-// }
-
-.container.posts .topic-navigation {
-  top: calc(var(--header-offset, 60px) + 6em);
-}
-
-.discourse-post-event .discourse-post-event-widget {
-  background-color: #ffffff;
-}
-
-.more-topics__container
-  .more-topics__list
-  .topic-list-body
-  .topic-list-item:last-of-type {
-  border-bottom: 1px solid #cedde3;
-}

scss/user.scss

@@ -1,3 +1,3 @@
 .user-main .about.collapsed-info .details {
-  background: #fff;
+  background-color: #ffffff;
 }

scss/variables.scss

@@ -1,12 +1,8 @@
 :root {
   --d-border-radius-large: 20px;
-  --d-button-border-radius: 20px;
   --d-border-radius: 6px;
   --d-input-border-radius: 6px;
   --accent-color: #595bca;
   --accent-text-color: #ffffff;
   --d-nav-color--active: var(--accent-color);
-  --primary: #0c0d27;
-  --main-grid-gap: 2em;
-  --d-max-width: 1000px;
 }