add very basic styling (#1)

common/common.scss

@@ -7,10 +7,4 @@
 @import "nav-pills";
 @import "buttons";
 @import "chat";
-
+@import "hiddenstuff";
-.list-controls .combo-box .combo-box-header,
-.select-kit.is-expanded .select-kit-body,
-.discourse-post-event .discourse-post-event-widget {
-  background-color: light-dark(#ffffff, #000000);
-  border-radius: var(--d-input-border-radius);
-}

scss/buttons.scss

@@ -1,3 +1,15 @@
+:root {
+  --d-button-border-radius: 6.25rem;
+}
+
+.btn {
+  padding: 0.5em 1rem;
+}
+
+.btn-default {
+  border: 1px solid var(--accent-color);
+  background: var(--secondary);
+}
 #create-topic.btn {
   background-color: var(--accent-color);
   color: var(--accent-text-color);

scss/header.scss

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

scss/hiddenstuff.scss

@@ -0,0 +1,5 @@
+.sidebar__panel-switch-button,
+.sidebar-section[data-section-name="messages"],
+.list-controls #create-topic {
+  display: none;
+}

scss/main.scss

@@ -1,54 +1,65 @@
+body,
+html {
+  background-color: #f5f8ff;
+}
+
 body:not(.archetype-regular, .has-full-page-chat)
   #main-outlet-wrapper
   #main-outlet {
-  height: 85vh;
   overflow: scroll;
-  padding: 16px 24px;
   border-radius: var(--d-border-radius-large);
-  background: radial-gradient(
-      600px 600px at 50% 75%,
-      rgba(188, 241, 238, 0.2),
-      rgba(255, 255, 255, 0.2)
-    ),
-    radial-gradient(
-      600px 600px at 75% 50%,
-      rgba(162, 165, 225, 0.2),
-      rgba(255, 255, 255, 0)
-    );
-  background-color: light-dark(#ffffff, #000000);
 }
 
-#main-outlet-wrapper #main-outlet {
+#main-outlet-wrapper {
-  border-radius: var(--d-border-radius-large);
+  margin-top: 1.5rem;
-  //   padding: 0 24px;
+  gap: 2em !important;
-  box-shadow: 0 10px 24px 4px #e2e8f8, 0 0 0 3px #e2e8f8,
+  height: calc(100vh - var(--header-offset) - 4rem);
-    0 0 0 1px var(--primary-low);
+  box-sizing: border-box;
-  width: calc(100% - 48px);
+  > * {
-  max-width: 1000px !important;
+    height: inherit;
-  background: radial-gradient(
+    box-sizing: border-box;
-      600px 600px at 50% 75%,
+  }
-      rgba(188, 241, 238, 0.2),
+  #main-outlet {
-      rgba(255, 255, 255, 0.2)
+    width: 100%;
-    ),
+    height: inherit;
-    radial-gradient(
+    overflow: scroll;
-      600px 600px at 75% 50%,
+    &:has(.list-controls) {
-      rgba(162, 165, 225, 0.2),
+      padding-top: 0;
-      rgba(255, 255, 255, 0)
+    }
-    );
+    &:has(#topic-title) {
-  background-color: light-dark(#ffffff, #000000);
+      padding-top: 0;
+    }
+    > *:not(.full-page-chat) {
+      max-width: 1000px;
+      margin-inline: auto;
+    }
+    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(
+          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);
+  }
 }
 
 #topic-title {
   z-index: 999;
   margin-bottom: 1em;
-  padding: 0.5em 24px;
+  padding: 1.5rem 2rem 0.5em;
   position: sticky;
   top: 0;
-  background-image: linear-gradient(
+  background: var(--secondary);
-    to right,
-    rgba(255, 255, 255, 1) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
 }
 
 .container.posts,
@@ -56,3 +67,7 @@ body:not(.archetype-regular, .has-full-page-chat)
 #topic-footer-buttons {
   padding: 0 24px;
 }
+
+.container.posts .topic-navigation {
+  top: calc(var(--header-offset, 60px) + 4em);
+}

scss/nav-pills.scss

@@ -1,3 +1,24 @@
+.list-controls {
+  position: sticky;
+  top: 0;
+  background: var(--secondary);
+  z-index: 100;
+  padding-top: 1.5rem;
+  max-width: unset;
+  width: 100%;
+
+  .navigation-container {
+    .category-breadcrumb {
+      order: 1;
+    }
+  }
+  .combo-box .combo-box-header,
+  .select-kit.is-expanded .select-kit-body,
+  .discourse-post-event .discourse-post-event-widget {
+    background-color: var(--secondary);
+    border-radius: 6.25rem;
+  }
+}
 .nav-pills > li > a:hover,
 .nav-pills > li button:hover {
   background: transparent;

scss/sidebar.scss

@@ -1,3 +1,13 @@
-.sidebar-wrapper .sidebar-container {
+:root {
-  border-right: none;
+  --d-sidebar-background: #f5f8ff;
+}
+
+.sidebar-wrapper {
+  .sidebar-container {
+    border-right: none;
+  }
+
+  .sidebar-sections {
+    padding: 0;
+  }
 }

scss/variables.scss

@@ -1,8 +1,9 @@
 :root {
   --d-border-radius-large: 20px;
-  --d-border-radius: 8px;
+  --d-border-radius: 6px;
-  --d-input-border-radius: 8px;
+  --d-input-border-radius: 6px;
   --accent-color: #595bca;
   --accent-text-color: #ffffff;
   --d-nav-color--active: var(--accent-color);
+  --primary: #0c0d27;
 }