Change desktop layout to a fixed width column, increase font-size and legibility

Author: Mark-H

src/scss/_pagecontent.scss

@@ -24,7 +24,7 @@ h1 {
 
 p, td, th {
     margin: 0 0 $paragraph-margin-bottom;
-    font-size: rem(15);
+    font-size: rem(16);
     line-height: $paragraph-lineheight;
     text-rendering: $paragraph-text-rendering;
 }
@@ -97,3 +97,9 @@ blockquote {
     margin-bottom: 0;
   }
 }
+.Permalink {
+  margin-left: -1em;
+  width: 1em;
+  display: inline-block;
+  text-align: center;
+}

src/scss/_settings.scss

@@ -45,7 +45,7 @@
 
 $global-font-size: 100%;
 $body-font-size: 100%;
-$global-width: rem-calc(664);
+$global-width: rem-calc(708);
 $global-lineheight: 1.5;
 $foundation-palette: (
         primary: #1f4a7f,
@@ -563,4 +563,4 @@ $topbar-background: $light-gray;
 $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 1rem;
 $topbar-input-width: 200px;
-$topbar-unstack-breakpoint: medium;
+$topbar-unstack-breakpoint: medium;

src/scss/_sidebar.scss

@@ -4,7 +4,7 @@ aside.sidebar {
     text-shadow: 0 0 rem(15) rgba(0,0,0,0.15);
 
     @include breakpoint(large) {
-        border-right: 3px solid #132843;
+        //border-right: 3px solid #132843;
     }
 }
 
@@ -180,9 +180,9 @@ nav.pagenav {
 
     // 2nd level link
     > ul > li > ul > li > a {
-        padding-left: rem(45);
-        font-size: rem(12);
-        text-transform: uppercase;
+        padding-left: rem(30);
+        font-size: rem(14);
+        //text-transform: uppercase;
         //background-image: #{"url(\"data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='216' height='146' viewBox='0 0 216 146' fill='#fff'><path d='M144.988 65.667l-53.12-53.04c-1.955-2.063-4.398-3.095-7.332-3.095s-5.377 1.033-7.333 3.096l-6.192 6.11c-2.01 2.01-3.014 4.454-3.014 7.333 0 2.825 1.005 5.297 3.015 7.415L110.608 73 71.01 112.596c-2.01 2.01-3.015 4.454-3.015 7.334 0 2.823 1.005 5.295 3.015 7.414l6.192 6.11c2.01 2.01 4.455 3.015 7.333 3.015 2.88 0 5.324-1.007 7.333-3.017l53.12-53.04c2.01-2.117 3.016-4.59 3.016-7.413 0-2.88-1.006-5.323-3.016-7.333z'/></svg>\")"};
        // background-size: rem(13);
         //background-repeat: no-repeat;
@@ -193,8 +193,8 @@ nav.pagenav {
 
     // 3rd level link
     li li li a {
-        padding-left: rem(60);
-        font-size: rem(12);
+        padding-left: rem(45);
+        font-size: rem(14);
         font-weight: $global-weight-normal;
     }
 
@@ -262,4 +262,4 @@ nav.pagenav .Nav__item--open>a {
     margin-left: -20px;
     width: 16px;
     margin-right: 4px;
-}
+}

src/scss/_template.scss

@@ -5,10 +5,11 @@ html, body {
     background: $body-background;
 }
 body {
-    visibility: visible;
-    opacity: 1;
-    -webkit-font-smoothing: antialiased;
-    font-size: $body-font-size;
+  visibility: visible;
+  opacity: 1;
+  -webkit-font-smoothing: antialiased;
+  font-size: $body-font-size;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
 }
 
 * {
@@ -52,12 +53,10 @@ body {
         position: absolute;
         top: 0;
         right: 0;
-        left: rem(300);
+        left: rem(350);
         width: auto;
-        left: auto;
         padding-top: rem(56);
-        padding-right: calc((100% - #{rem(1024)})/2);
-        width: rem(724);
+        padding-right: calc((100% - #{rem(1280)})/2);
     }
 }
 
@@ -78,12 +77,12 @@ aside.sidebar {
         left: 0;
         width: rem(300);
         height: 100%;
-        padding-left: calc((100% - #{rem(1024)})/2);
+        padding-left: rem(50);
     }
 }
 
 .editfooter {
     p {
         font-size: $small-font-size;
     }
-}
+}

src/scss/main.scss

@@ -91,9 +91,10 @@ aside.sidebar {
     max-width: 100%;
 }
 .s-content li {
-    font-size: .875rem;
+    font-size: 1em;
     line-height: 1.6;
     text-rendering: optimizeLegibility;
+  margin-bottom: 0.4em;
 }
 .s-content li > p:last-of-type {
     margin-bottom: 0;