feat: fix format to make text section narrower

aragon · Dec 9, 2024 · c8751bb · c8751bb
1 parent 65169e7
commit c8751bb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/ui/src/css/article.scss b/ui/src/css/article.scss
@@ -1,5 +1,8 @@
 .article {
   padding-bottom: var(--guk-space-5); /* matches nav padding */
+  max-width: 900px;
+  margin:0 auto; 
+  padding: 40px; 
 
   .listingblock {
     position: relative;

diff --git a/ui/src/css/header.scss b/ui/src/css/header.scss
@@ -2,7 +2,6 @@
 
 .header {
   border-bottom: solid 1px var(--guk-color-neutral-200); /* Replaces #e2e2e7 */
-  padding:1em 0em 1em 0em;
 }
 
 .navbar {

diff --git a/ui/src/css/layout.scss b/ui/src/css/layout.scss
@@ -9,9 +9,20 @@
   overflow-y: auto;
   position: sticky;
   top: 0;
-  width: 20%;
-  max-width: 300px;  
   flex: 0 0 auto;
+  width: 300px; // default narrow width
+
+  @media (min-width: 1000px) {
+    width: 300px; // medium screens
+  }
+
+  @media (min-width: 1400px) {
+    width: 350px; // middle screens
+  }
+
+  @media (min-width: 1800px) {
+    width: 400px; // larger screens
+  }
 }
 
 .nav-heading {
@@ -108,6 +119,7 @@ button.collapse-toggle {
 
 .navbar, .article-wrapper {
   margin: 0 var(--side-margin);
+  max-width : 1280px;
 }
 
 .navbar {
@@ -180,12 +192,13 @@ button.collapse-toggle {
   margin-left: var(--lg);
   flex-grow: 0;
   flex-shrink: 0;
-  width: 20%;
-  max-width: 300px;  
   max-height: 80vh;
   position: sticky;
   top: 10vh;
   overflow-y: auto;
+  padding: 1rem;
+  padding-left: 0;
+
 
   @media (max-width: math.div($mobile-breakpoint * 2, 3)) {
     display: none;