UX: desktop tweaks (#14)

common/color_definitions.scss

@@ -2,4 +2,5 @@ $accent-color: dark-light-choose(#3c41c3, #6e4bbc);
 
 :root {
   --accent-color: #{$accent-color};
+  --background-color: #f5f8ff;
 }

scss/header.scss

@@ -1,6 +1,7 @@
 .d-header {
   box-shadow: none;
-  background: var(--tertiary-50);
+  background: var(--background-color);
+  padding-bottom: 1.5em;
 }
 
 .user-menu .quick-access-panel,

scss/main.scss

@@ -1,5 +1,5 @@
 html:not(:has(.has-full-page-chat)) {
-  background-color: var(--tertiary-50);
+  background-color: var(--background-color);
 }
 
 :root {
@@ -7,7 +7,7 @@ html:not(:has(.has-full-page-chat)) {
 }
 
 body:not(.has-full-page-chat) {
-  background-color: var(--tertiary-50);
+  background-color: var(--background-color);
   #main-outlet-wrapper {
     // margin-top: 1.5rem;
     @media screen and (max-width: 485px) {
@@ -22,6 +22,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,7 +31,13 @@ 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 {
         max-width: 1000px;
         margin-inline: auto;
         padding-inline: 1.5em;
@@ -38,21 +45,8 @@ body:not(.has-full-page-chat) {
           padding-inline: 0.5em;
         }
       }
-      // border-radius: var(--d-border-radius-large);
+      border-radius: var(--d-border-radius-large);
-      // border-radius: 1.25rem;
+      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;
-      // }
       // box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
       background-color: var(--d-content-background);
     }
@@ -63,6 +57,15 @@ body:not(.has-full-page-chat) {
   // }
 }
 
+.list-container {
+  .topic-list-body {
+    padding-top: var(--spacing-block-m);
+  }
+  .topic-list-item {
+    box-shadow: 0px 0px 26px 1px hsl(224 61% 96% / 1);
+  }
+}
+
 aside.onebox {
   background-color: var(--d-content-background);
 }

scss/nav-pills.scss

@@ -28,7 +28,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);
 }
 

scss/sidebar.scss

@@ -10,7 +10,9 @@
     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-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
     // font-family: "inter";
     letter-spacing: 0.5px;
     border-radius: 10px; //visually somewhat consistent with border on main outlet (?)
@@ -20,7 +22,7 @@
 .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;

scss/topic-cards.scss

@@ -1,6 +1,6 @@
 .topic-list-item {
   background: var(--d-content-background);
   &:hover {
-    background: var(--primary-very-low);
+    border: 1px solid var(--accent-color);
   }
 }

scss/topic.scss

@@ -1,12 +1,15 @@
 .post-stream {
   .contents p {
-    // font-size: var(--font-up-1);
+    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 {
@@ -45,9 +48,9 @@
 
 #topic-title {
   z-index: 999;
-  margin-bottom: 1em;
+  padding: var(--spacing-block-l) var(--spacing-inline-xl);
-  padding: 1.5rem 2rem 0.5em;
   position: sticky;
+  margin-bottom: 0;
   top: var(--header-offset);
   background: var(--d-content-background);
 }