From 63fd917f8e0718d8570171c85198ed884df09930 Mon Sep 17 00:00:00 2001
From: Rob <rob@robsheldon.com>
Date: Thu, 2 Jan 2020 23:13:01 -0800
Subject: [PATCH] Multiple minor adjustments for display in webkit, small
 iPhone, and desktop browser configurations.

---
 sscaffold.css | 97 +++++++++++++++++++++++++++++----------------------
 1 file changed, 55 insertions(+), 42 deletions(-)

diff --git a/sscaffold.css b/sscaffold.css
index e4f9101..99f29c5 100644
--- a/sscaffold.css
+++ b/sscaffold.css
@@ -17,8 +17,6 @@
 html {
 	/* Fix the line height in all browsers. [1] */
 	line-height: 1.15;
-	/* Prevent adjustments of font size after orientation changes in iOS. [1] */
-	-webkit-text-size-adjust: 100%;
 	/* Set universal box sizing with inheritance. [3] */
 	box-sizing: border-box;
 }
@@ -27,6 +25,8 @@ html {
 body {
 	/* Smoothly scroll between anchors. [4] */
 	scroll-behavior: smooth;
+	/* Prevent adjustments of font size after orientation changes in iOS. [1] */
+	-webkit-text-size-adjust: 100%;
 	/* optimizeLegibility may cause some performance issues in some browsers
 	   (https://marco.org/2012/11/15/text-rendering-optimize-legibility) -- not sure if
 	   this is still current. Probably safe to assume that an appropriately legible
@@ -132,16 +132,6 @@ dl[class] {
 }
 
 
-img {
-	/* Remove the border on images inside links in IE 10. [1] */
-	border-style: none;
-	/* Go ahead and make these block-level elements. I'm not sure about this. [4] */
-	display: block;
-	/* [2] */
-	max-width: 100%;
-}
-
-
 a {
 	/* Remove the gray background on active links in IE 10. [1] */
 	background-color: transparent;
@@ -201,9 +191,14 @@ sup {
 }
 
 
-table {
+body img {
+	/* Remove the border on images inside links in IE 10. [1] */
+	border-style: none;
+	/* Go ahead and make these block-level elements. I'm not sure about this. [4] */
+	display: block;
 	/* [2] */
 	width: 100%;
+	max-width: 100%;
 }
 
 
@@ -379,22 +374,6 @@ progress {
 * 
 ******************************************************************************/
 
-main article,
-main section {
-	padding: 7.5rem 1.0rem;
-	position: relative;
-	width: 100%;
-}
-
-
-main section > *,
-main article > * {
-	max-width: 80rem;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-
 .row {
 	display: flex;
 	flex-direction: column;
@@ -826,10 +805,18 @@ main {
 *
 *   UTILITY CLASSES
 *
-*   A handful of common utility classes.
+*   Some helpful utility classes.
 * 
 ******************************************************************************/
 
+.table-container {
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	overflow-x: auto;
+}
+
+
 .clearfix:after {
 	clear: both;
 	content: ' ';
@@ -869,12 +856,33 @@ html {
 
 body {
     font-family: "Montserrat", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
-	font-size: 2.0em;
+	font-size: 1.8em;
 	font-weight: 300;
 	line-height: 1.6;
 }
 
 
+main article,
+main section {
+	padding: 7.5rem 1.0rem;
+	position: relative;
+	width: 100%;
+}
+
+
+main section > *,
+main article > * {
+	max-width: 80rem;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+
+main section .table-container table {
+	width: 100%;
+}
+
+
 code {
 	font-size: 86%;
 }
@@ -886,43 +894,43 @@ h3,
 h4,
 h5,
 h6 {
-	font-family: "Crimson Text", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
-	font-weight: 300;
+	font-family: "Montserrat", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
+	font-weight: 500;
 }
 
 
 h1 {
-	font-size: 4.6rem;
+	font-size: 3.9rem;
 	line-height: 1.2;
 }
 
 
 h2 {
-	font-size: 3.6rem;
+	font-size: 3.4rem;
 	line-height: 1.25;
 }
 
 
 h3 {
-	font-size: 2.8rem;
+	font-size: 2.9rem;
 	line-height: 1.3;
 }
 
 
 h4 {
-	font-size: 2.2rem;
+	font-size: 2.6rem;
 	line-height: 1.35;
 }
 
 
 h5 {
-	font-size: 1.8rem;
+	font-size: 2.4rem;
 	line-height: 1.5;
 }
 
 
 h6 {
-	font-size: 1.6rem;
+	font-size: 2.2rem;
 	line-height: 1.4;
 }
 
@@ -988,6 +996,11 @@ legend.inline {
  * Layout: Display, margin, padding, height, and width.
  */
 
+.table-container {
+	max-width: 80rem;
+}
+
+
 blockquote,
 dl,
 figure,
@@ -1033,8 +1046,8 @@ h3,
 h4,
 h5,
 h6 {
-	margin-top: 2.0rem;
-	margin-bottom: 1.0rem;
+	margin-top: 2.0em;
+	margin-bottom: .75em;
 }
 
 
@@ -1383,7 +1396,7 @@ select:focus {
 
 @media (min-width: 40rem) {
 	body {
-		font-size: 1.8em;
+		font-size: 2.0em;
 	}
 }