Design tweaks

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 

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"
   }
 }

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 {

src/static/css/index.css

@@ -58,8 +58,6 @@ header.alt-bg {
 }
 
 p {
-  font-size: 16px;
-  line-height: 24px;
   margin-bottom: 40px;
 }
 

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;

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) {