UX: general styling improvements, maintenance (#72)

Author: awesomerobot

about.json

@@ -21,7 +21,8 @@
       "highlight": "e6cb37",
       "danger": "d05454",
       "success": "71bd9f",
-      "love": "c16ad7"
+      "love": "c16ad7",
+      "selected": "e1ebfb"
     },
     "air-dark": {
       "primary": "e0e0e0",
@@ -33,7 +34,9 @@
       "highlight": "9a5cfd",
       "danger": "d05454",
       "success": "71bd9f",
-      "love": "c16ad7"
+      "love": "c16ad7",
+      "selected": "2f0177",
+      "hover": "535353"
     }
   },
   "screenshots": ["screenshots/light.png", "screenshots/dark.png"]

common/common.scss

@@ -4,12 +4,17 @@
   max-width: unset;
   color: var(--secondary);
   h1 {
-    font-size: 4em;
+    line-height: var(--line-height-small);
+    @include breakpoint("large", min-width) {
+      font-size: 4em;
+    }
   }
   p {
-    font-size: 1.25em !important;
-    font-weight: bold;
-    margin-bottom: 1em;
+    margin-top: 0.5em;
+    margin-bottom: 2em;
+    @include breakpoint("large", min-width) {
+      font-size: var(--font-up-1);
+    }
   }
   .btn {
     height: 100%;
@@ -368,7 +373,6 @@ html body #main-outlet {
       }
     }
     .topic-list-item {
-      width: 100%;
       display: flex;
       margin-bottom: 0.5em;
       background-color: var(--secondary);
@@ -428,6 +432,15 @@ html body #main-outlet {
         justify-content: center;
         align-items: center;
       }
+      &.selected {
+        td:nth-of-type(1) {
+          box-shadow: none;
+        }
+        &:focus-visible td:nth-of-type(2) {
+          box-shadow: inset 3px 0 0 var(--tertiary);
+          border-radius: calc(1em - 3px);
+        }
+      }
     }
   }
 }
@@ -516,10 +529,6 @@ html body #main-outlet {
   }
 }
 
-.navigation-container {
-  margin-top: 2em;
-}
-
 // published page additions
 .published-page-content-wrapper {
   max-width: 1000px;
@@ -560,20 +569,6 @@ html body #main-outlet {
   border-radius: 0.5em;
 }
 
-.topic-list tr.selected td:nth-child(2),
-.topic-list-item.selected td:nth-child(2),
-.latest-topic-list-item.selected,
-.search-results .fps-result.selected {
-  box-shadow: inset 3px 0 0 var(--danger);
-}
-
-.topic-list tr.selected td:first-child,
-.topic-list-item.selected td:first-child,
-.latest-topic-list-item.selected,
-.search-results .fps-result.selected {
-  box-shadow: none;
-}
-
 .topic-list .main-link.focused + .posters {
   box-shadow: inset 3px 0 0 var(--tertiary);
 }

mobile/mobile.scss

@@ -29,6 +29,10 @@ html
   background-color: transparent;
 }
 
+#main-outlet {
+  margin-inline: auto;
+}
+
 html body #main-outlet .docs {
   padding: 1em;
   background-color: var(--secondary);
@@ -175,10 +179,15 @@ ol.category-breadcrumb {
   flex-wrap: wrap;
 }
 
-.topic-list-item .discourse-tags {
-  order: 3;
-  width: 100%;
-  margin-top: 0.5em;
+.topic-list-item {
+  > .topic-list-data {
+    width: 100%;
+  }
+  .discourse-tags {
+    order: 3;
+    width: 100%;
+    margin-top: 0.5em;
+  }
 }
 
 .full-width .contents .topic-list .topic-list-item .posts-map {
@@ -219,3 +228,7 @@ ol.category-breadcrumb {
     padding-right: 0.25em;
   }
 }
+
+.list-controls .nav-pills .list-control-toggle-link-trigger {
+  color: var(--secondary);
+}

scss/chat-desktop.scss

@@ -12,7 +12,7 @@ html body.has-sidebar-page.has-full-page-chat {
 }
 
 .chat-channel {
-  height: calc(100vh - (var(--header-offset) + 10em));
+  height: calc(100vh - (var(--header-offset) + 7.85em));
 }
 
 .c-navbar-container {