fix: css cleanup of nav-related variables (#1786)

* fix: css cleanup of nav-related variables

* changed my mind on this margin

src/routes/_components/Nav.html

@@ -19,7 +19,8 @@
 
 <style>
 	.main-nav {
-		border-bottom: 1px solid var(--nav-border);
+    box-sizing: border-box;
+		border-bottom: var(--nav-border-bottom) solid var(--nav-border);
 		background: var(--nav-bg);
 		position: fixed;
 		left: 0;

src/routes/_components/NavItem.html

@@ -42,7 +42,7 @@
 
   .nav-indicator {
     width: 100%;
-    height: 1px;
+    height: var(--nav-indicator-height);
     background: var(--nav-a-border);
     transform-origin: left;
   }
@@ -82,11 +82,12 @@
   }
 
   .nav-link-label {
-    font-size: 16px;
+    font-size: var(--nav-font-size);
+    line-height: var(--nav-icon-size);
     color: var(--nav-text-color);
     padding-left: 10px;
     white-space: nowrap;
-    overflow: hidden;
+    overflow: visible;
     text-overflow: ellipsis;
   }
 

src/routes/_components/NavItemIcon.html

@@ -15,8 +15,8 @@
   }
 
   :global(.nav-link-svg-wrapper, .nav-link-svg) {
-    width: var(--nav-icon-width);
+    width: var(--nav-icon-size);
-    height: var(--nav-icon-height);
+    height: var(--nav-icon-size);
   }
 
   .nav-link-badge {

src/routes/_components/compose/ComposeStickyButton.html

@@ -25,7 +25,7 @@
 
   :global(.compose-box-button-sticky, .compose-box-button-fixed) {
     z-index: 5000;
-    top: calc(var(--main-content-pad-top) + var(--sticky-pad-top));
+    top: calc(var(--nav-total-height));
   }
 </style>
 <script>

src/routes/_components/list/List.html

@@ -20,11 +20,10 @@
   import { listStore } from './listStore'
   import { getScrollContainer } from '../../_utils/scrollContainer'
   import { observe } from 'svelte-extras'
+  import { mark, stop } from '../../_utils/marks'
 
   function getScrollTopOffset () {
-    const style = getComputedStyle(document.documentElement)
+    return document.getElementById('main-nav').getBoundingClientRect().height
-    return parseInt(style.getPropertyValue('--main-content-pad-top'), 10) +
-      parseInt(style.getPropertyValue('--status-pad-v'), 10)
   }
 
   export default {
@@ -59,9 +58,12 @@
           const element = document.getElementById(`list-item-${scrollToItem}`)
           requestAnimationFrame(() => {
             console.log('scrolling element into view')
-            element.scrollIntoView(true)
+            mark('scrollToElement')
             const scrollTopOffset = getScrollTopOffset()
+            element.scrollIntoView(true)
+            console.log('scrollTopOffset', scrollTopOffset)
             getScrollContainer().scrollTop -= scrollTopOffset
+            stop('scrollToElement')
             this.fire('initialized')
           })
         } else {

src/scss/global.scss

@@ -31,14 +31,11 @@ main {
   max-width: 100%;
   padding: 0;
   box-sizing: border-box;
-  margin: 30px auto 15px;
+  margin: 0 auto var(--main-margin-bottom);
   background: var(--main-bg);
-  border: 1px solid var(--main-border);
+  border: var(--main-border-size) solid var(--main-border);
   border-radius: 1px;
   min-height: 70vh;
-  @media (max-width: 767px) {
-    margin: 5px auto 15px;
-  }
 }
 
 footer {

src/scss/variables.scss

@@ -16,34 +16,44 @@
 
   //
   // Nav and .main-content offset. This is important for things like the sticky header (ComposeStickyButton.html)
-  // as well as deciding how to scroll to the nth item in a list (List.html).
   //
 
+  --nav-font-size: 1rem;
+  --nav-indicator-height: 1px;
+  --nav-border-bottom: 1px;
   --nav-icon-pad-v: 15px;
   --nav-icon-pad-h: 20px;
-  --nav-icon-width: 20px;
+  --nav-icon-size: 20px;
-  --nav-icon-height: 20px;
+
-  --main-content-pad-top: 42px;
+  --nav-total-height: calc(
-  --sticky-pad-top: 10px;
+    (var(--nav-icon-pad-v) * 2) +
+    var(--nav-icon-size) +
+    var(--nav-indicator-height) +
+    var(--nav-border-bottom)
+  );
+
+  --main-content-gap-top: 20px;
+  --main-content-pad-top: calc(
+    var(--nav-total-height) +
+    var(--main-content-gap-top)
+  );
+
+  --main-margin-bottom: 15px;
+  --main-border-size: 1px;
 
   @media (max-width: 991px) {
     --nav-icon-pad-v: 20px;
     --nav-icon-pad-h: 10px;
-    --nav-icon-width: 25px;
+    --nav-icon-size: 25px;
-    --nav-icon-height: 25px;
-    --main-content-pad-top: 52px;
   }
 
   @media (max-width: 767px) {
-    --main-content-pad-top: 62px;
+    --main-content-gap-top: 0px;
-    --sticky-pad-top: 0px;
   }
 
   @media (max-width: 240px) {
     --nav-icon-pad-v: 10px;
     --nav-icon-pad-h: 0px;
-    --main-content-pad-top: 42px;
-    --sticky-pad-top: 0px;
   }
 
   //