Design tweaks (#333)

* Design tweaks * smoother font * less large h1 + return of the stripe * mobile h1 within viewport (smaller) * don't overflow viewport (hack for <table> * Wrap <tables> to prevent overflow on mobile * Run npm run generate * Fix all .content overflows and styling of unstyled elements * Consistent font * Tad smaller on mobile screens * Match the logo width, so menu options are centered in viewport * Fix issue with wrapper * `npm run generate`
HTTPArchive · Nov 6, 2019 · 1d9ad38 · 1d9ad38
1 parent 584f1a3
commit 1d9ad38
Show file tree

Hide file tree

Showing 24 changed files with 2,121 additions and 1,943 deletions.
diff --git a/src/content/en/2019/media.md b/src/content/en/2019/media.md
@@ -51,7 +51,7 @@ For the median web page on desktop, only 46% of the display would have layout co
 Media resources are critical for the user experience!
 
 # Images 
-Much has already been written on the subject of managing and optimizing images to help reduce the bytes and optimize the user experience. <<TODO: link, link link>> It is an important and critical topic for many because it is the creative media that define a brand experience. Therefore optimizing image and video content is a balancing act between applying best practices that can help reduce the bytes transferred over the network while preserving the fidelity of the intended experience. 
+Much has already been written on the subject of managing and optimizing images to help reduce the bytes and optimize the user experience. `<<TODO: link, link link>>` It is an important and critical topic for many because it is the creative media that define a brand experience. Therefore optimizing image and video content is a balancing act between applying best practices that can help reduce the bytes transferred over the network while preserving the fidelity of the intended experience. 
 
 While the strategies that are utilized for images, videos and animations are, in broad strokes similar, the specific approaches can be very different. In general, these strategies boil down to:
 * File Formats - utilizing the optimal file format 

diff --git a/src/package-lock.json b/src/package-lock.json
diff --git a/src/package.json b/src/package.json
@@ -19,9 +19,9 @@
   "devDependencies": {
     "ejs": "^2.7.1",
     "fs-extra": "^8.1.0",
-    "jsdom": "^15.2.0",
+    "jsdom": "^15.2.1",
     "prettier": "^1.18.2",
-    "showdown": "^1.9.0",
-    "recursive-readdir": "^2.2.2"
+    "recursive-readdir": "^2.2.2",
+    "showdown": "^1.9.0"
   }
 }
diff --git a/src/static/css/2019.css b/src/static/css/2019.css
@@ -4,6 +4,9 @@ body {
   color: #1A2B49;
   margin: 0;
   font-weight: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-size: 17px;
+  line-height: 30px;
 }
 
 * {
@@ -27,9 +30,8 @@ a:focus, a:hover {
 }
 
 h1.title {
-  margin-top: 0;
-  font-size: 72px;
-  line-height: 80px;
+  margin-top: 20px;
+  font-size: 50px;
 }
 
 div.subtitle {
@@ -46,6 +48,15 @@ div.subtitle::before {
   width: 70px;
 }
 
+h2.header {
+  font-size: 25px;
+  margin: 14px;
+}
+.subtitle {
+  font-size: 28px;
+  line-height: 42px;
+}
+
 .btn {
   border: 1px solid #1A2B49;
   border-radius: 50px;
@@ -116,8 +127,8 @@ header.alt-bg a:focus, footer.alt-bg a:focus {
 header, footer {
   padding: 40px 60px;
 }
-.main {
-  margin: 0px 60px;
+article.main {
+  max-width: 1324px;
 }
 header, footer .nav {
   display: flex;
@@ -143,6 +154,8 @@ nav a {
 
 header .cta {
   display: flex;
+  min-width: 205px;
+  flex-direction: row-reverse;
 }
 
 header .btn + .language-switcher {
@@ -192,6 +205,32 @@ header .btn + .language-switcher {
   display: none;
 }
 
+.main {
+  margin: 0px auto;
+  font-size: 17px;
+}
+.content, section.main {
+  max-width: 1024px;
+}
+
+.main a,
+.main a:visited {
+  color: #0b1423;
+  word-break: break-all;
+}
+
+h2, h3, h4 {
+  margin-top: 2em;
+}
+
+p, td, th, code, li {
+  font-size: 17px;
+}
+
+pre {
+  margin: 0;
+}
+
 hr {
   opacity: 0.2;
 }
@@ -200,15 +239,15 @@ blockquote {
   position: relative;
   font-style: italic;
   font-size: 19px;
-  line-height: 26px;
 }
+
 blockquote::before {
   content: '"';
   position: absolute;
   z-index: -1;
   top: -4rem;
   left: -7rem;
-  opacity: .05;  
+  opacity: .05;
   font-size: 20rem;
   font-family: 'Courier New', Courier, monospace;
   line-height: 1;
@@ -347,6 +386,10 @@ p.copyright {
 
 /* Mobile View */
 @media (max-width: 600px) {
+   body, p, td, th, code, li {
+     font-size: 16px;
+   }
+
   .alt-bg.decorative-line,
   .alt-bg .decorative-line {
     margin: 0 40% !important;
@@ -373,7 +416,9 @@ p.copyright {
   header nav > a:last-child {
     margin: 0;
   }
-
+  h1.title {
+    font-size: 40px;
+  }
   .menu {
     position: absolute;
     display: none;
@@ -384,15 +429,15 @@ p.copyright {
     width: 100%;
     padding: 60px 30px 30px;
     background-color: #677486;
-    box-shadow: 0px 12px 12px 3px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 16px 0 rgba(78, 85, 100, 0.2);
     opacity: 0.95;
     z-index: 1;
   }
   .menu-btn {
     background: none;
     border: 0;
-    display: block; 
-    cursor: pointer;   
+    display: block;
+    cursor: pointer;
   }
 
   .menu-open .menu {

diff --git a/src/static/css/index.css b/src/static/css/index.css
@@ -58,8 +58,6 @@ header.alt-bg {
 }
 
 p {
-  font-size: 16px;
-  line-height: 24px;
   margin-bottom: 40px;
 }
 

diff --git a/src/static/css/methodology.css b/src/static/css/methodology.css
@@ -23,7 +23,7 @@
 }
 .floating-card {
   border-radius: 16px;
-  box-shadow: 0 0 5px 5px #f6f7f9;
+  box-shadow: 0 0 16px 0 rgba(78, 85, 100, 0.2);
 }
 .code-block {
   margin: 8px 0;

diff --git a/src/static/css/page.css b/src/static/css/page.css
@@ -1,26 +1,30 @@
 .main {
-  margin-top: 32px;
-  overflow: visible;
+  padding-top: 32px;
   display: grid;
   grid-template-areas: 'index content';
   grid-template-columns: 300px auto;
-  font-size: 18px;
-  line-height: 30px;
 }
-table,
+.table-wrap,
 .floating-card {
   border-radius: 16px;
-  box-shadow: 0 0 5px 5px #f6f7f9;
+  box-shadow: 0 0 16px 0 rgba(78, 85, 100, 0.2);
+}
+.table-wrap {
+  display: inline-block;
+  margin: 10px 0;
+  max-width: 100%;
+  overflow: auto;
 }
+
 .code-block {
   margin: 8px 0;
-  padding: 16px;
+  padding: 24px;
 }
 .code-block .divider {
   position: relative;
   border: 1px solid #1A2B490A;
   width: calc(100% + 32px);
-  left: -16px;
+  left: -24px;
 }
 .code-block pre {
   overflow-y: hidden;
@@ -177,10 +181,13 @@ table,
   height: 60px;
   border-radius: 50%;
 }
-
+.authors .social {
+  display: inline-block;
+  vertical-align: top;
+}
 .authors .social img{
-  width: 24px;
-  height: 24px;
+  width: auto;
+  height: 18px;
   display: inline-block;
   margin-left: 16px;
   vertical-align: middle;
@@ -235,11 +242,6 @@ table,
   right:-24px;
 }
 
-.main a,
-.main a:visited {
-  color: initial;
-}
-
 img,
 table,
 figure {
@@ -272,11 +274,11 @@ figcaption {
   margin-top: 20px;
   text-align: center;
 }
-
 table {
   margin: 0 auto;
   max-width: 100%;
   border-collapse: collapse;
+  display: block;
 }
 thead {
   font-family: 'Poppins', sans-serif;
@@ -299,7 +301,6 @@ figure .big-number {
 
 @media (max-width: 900px) {
   .main {
-    padding: 0;
     grid-template-areas:
       'index'
       'content';
@@ -353,6 +354,10 @@ figure .big-number {
     max-height: 100%;
     transition: max-height 0.25s ease-in;
   }
+
+  table {
+    font-size: .8em;
+  }
 }
 
 @media (max-width: 600px) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,8 +58,6 @@ header.alt-bg { @@
     }
     p {
-      font-size: 16px;
-      line-height: 24px;
       margin-bottom: 40px;
     }
@@ Expand Down @@