pleroma-fe

commit: 0ff34f8a5ae88d3e0a3456a7054273e361689af6
parent 4750d9bb4c67b5a759a1eb0fde64d0270553e74c
Author: Henry Jameson <me@hjkos.com>
Date:   Sun, 10 Apr 2022 14:23:30 +0300

clean up and organize CSS, use ems for widths, use vars more

Diffstat:
M
src/App.scss
29
+++++++++++++++++------------

1 file changed, 17 insertions(+), 12 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -154,8 +154,8 @@ nav {
   grid-column-end: span 3;
   grid-row-start: 1;
   grid-row-end: 1;
-  margin: 0 -0.5em;
-  padding: 0 0.5em;
+  margin: 0 calc(var(--columnGap) * -2);
+  padding: 0 calc(var(--columnGap) * 2);
   pointer-events: none;
   background-color: rgba(0, 0, 0, 0.15);
   background-color: var(--underlay, rgba(0, 0, 0, 0.15));
@@ -163,6 +163,10 @@ nav {
 }
 
 .app-layout {
+  --miniColumn: 25em;
+  --maxiColumn: minmax(var(--miniColumn), 45em);
+  --columnGap: 1em;
+
   position: relative;
   display: grid;
   grid-template-columns: var(--miniColumn) var(--maxiColumn);
@@ -173,39 +177,40 @@ nav {
   height: calc(100vh - var(--navbar-height));
   align-content: flex-start;
   flex-wrap: wrap;
-  padding: 0 10px 0 10px;
+  padding: 0 10px;
   justify-content: center;
 
-  --miniColumn: 345px;
-  --maxiColumn: minmax(345px, 615px);
-
   .column {
+    --___columnMargin: var(--columnGap);
+
     display: grid;
     grid-template-columns: 100%;
     box-sizing: border-box;
     padding-top: 10px;
     grid-row-start: 1;
     grid-row-end: 1;
-    margin: 0 0.5em;
-    row-gap: 1em;
+    margin: 0 calc(var(--___columnMargin) / 2);
+    row-gap: var(--___columnMargin);
     align-content: start;
 
     &.-scrollable {
+      --___paddingIncrease: calc(var(--columnGap) / 2);
+
       padding-top: 10px;
       position: sticky;
       top: 0;
       max-height: calc(100vh - var(--navbar-height));
       overflow-y: auto;
       overflow-x: hidden;
-      margin-left: -2em;
-      padding-left: 2.5em;
+      margin-left: calc(var(--___paddingIncrease) * -1);
+      padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
 
       // Only show custom scrollbars on devices which
       // have a cursor/pointer to operate them
       &:not(.-show-scrollbar) {
         scrollbar-width: none;
-        margin-right: -2em;
-        padding-right: 2.5em;
+        margin-right: calc(var(--___paddingIncrease) * -1);
+        padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
 
         &::-webkit-scrollbar {
           display: block;