more

common/common.scss

@@ -8,3 +8,5 @@
 @import "buttons";
 @import "chat";
 @import "hiddenstuff";
+@import "topic";
+@import "user";

scss/buttons.scss

@@ -10,10 +10,11 @@
   border: 1px solid var(--accent-color);
   background: var(--secondary);
 }
-#create-topic.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/main.scss

@@ -8,26 +8,39 @@ body:not(.archetype-regular, .has-full-page-chat)
   #main-outlet {
   overflow: scroll;
   border-radius: var(--d-border-radius-large);
+  @media screen and (max-width: 600px) {
+    border-radius: 0;
+  }
 }
 
 #main-outlet-wrapper {
   margin-top: 1.5rem;
-  gap: 2em !important;
+  gap: 2em;
   height: calc(100vh - var(--header-offset) - 4rem);
   box-sizing: border-box;
-  > * {
-    height: inherit;
-    box-sizing: border-box;
+  @media screen and (max-width: 600px) {
+    gap: 0;
+    margin-top: 0;
+    height: 100%;
   }
   #main-outlet {
-    width: 100%;
+    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;
@@ -35,7 +48,8 @@ body:not(.archetype-regular, .has-full-page-chat)
     }
     border-radius: var(--d-border-radius-large);
     border-radius: 1.25rem;
-    .navigation-topics & {
+    .navigation-topics &,
+    .navigation-category & {
       background: radial-gradient(
           100.59% 70.87% at 41.19% 73.28%,
           rgba(188, 241, 238, 0.2) 0%,
@@ -52,22 +66,3 @@ body:not(.archetype-regular, .has-full-page-chat)
     background-color: light-dark(#ffffff, #000000);
   }
 }
-
-#topic-title {
-  z-index: 999;
-  margin-bottom: 1em;
-  padding: 1.5rem 2rem 0.5em;
-  position: sticky;
-  top: 0;
-  background: var(--secondary);
-}
-
-.container.posts,
-.more-topics__container,
-#topic-footer-buttons {
-  padding: 0 24px;
-}
-
-.container.posts .topic-navigation {
-  top: calc(var(--header-offset, 60px) + 4em);
-}

scss/nav-pills.scss

@@ -1,7 +1,9 @@
 .list-controls {
-  position: sticky;
-  top: 0;
-  background: var(--secondary);
+  // 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-top: 1.5rem;
   max-width: unset;
@@ -10,14 +12,17 @@
   .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 {
+  .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);
+  }
 }
 .nav-pills > li > a:hover,
 .nav-pills > li button:hover {

scss/search-banner.scss

@@ -1,13 +1,18 @@
 .custom-search-banner-wrap {
   display: grid;
   grid-template-rows: 0.33fr 0.33fr 0.33fr;
-  grid-template-columns: 0.5fr 0.5fr;
+  grid-template-columns: 1fr 1fr;
   grid-column-gap: 1em;
   grid-row-gap: 0.5em;
   border-bottom: 1px solid var(--primary-300);
   padding: 2.5em 0 2.5em;
   margin-bottom: 2.5em;
   --search-color: #595bca;
+  @media screen and (max-width: 425px) {
+    padding: 1em 1em 0 1em;
+    margin-bottom: 0.5em;
+    border-bottom: none;
+  }
   h1 {
     grid-column: 1/2;
     grid-row: 1/-1;
@@ -17,12 +22,43 @@
     margin: 0;
     font-weight: 400;
     color: #350c73;
+    @media screen and (max-width: 1028px) {
+      font-size: var(--font-up-4);
+      grid-column: 1/-1;
+      grid-row: 1;
+      text-align: center;
+      margin-bottom: 0.5em;
+    }
+    @media screen and (max-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) {
+      grid-column: 1/-1;
+      grid-row: 1;
+      text-align: center;
+      margin-bottom: 0.5em;
+    }
   }
   .search-menu {
     grid-column: 2/3;
     grid-row: 1/-1;
     width: 100%;
     align-self: center;
+    @media screen and (max-width: 1028px) {
+      grid-row: 2/-1;
+      grid-column: 1/-1;
+    }
+    @media screen and (max-width: 768px) {
+      grid-column: 2/-1;
+      grid-row: 1/-1;
+    }
+    @media screen and (max-width: 600px) {
+      grid-row: 2/-1;
+      grid-column: 1/-1;
+    }
   }
   p {
     display: none;

scss/sidebar.scss

@@ -6,8 +6,4 @@
   .sidebar-container {
     border-right: none;
   }
-
-  .sidebar-sections {
-    padding: 0;
-  }
 }

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/user.scss

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

scss/variables.scss

@@ -5,5 +5,4 @@
   --accent-color: #595bca;
   --accent-text-color: #ffffff;
   --d-nav-color--active: var(--accent-color);
-  --primary: #0c0d27;
 }