Center on desktop, overflow on mobile, lazyload

src/static/css/2019.css

@@ -15,6 +15,7 @@ body {
 
 h1, h2, h3, h4, h5, h6, .subtitle {
   font-family: 'Poppins', sans-serif;
+  line-height: 1.2em;
 }
 
 b {
@@ -216,7 +217,6 @@ header .btn + .language-switcher {
 .main a,
 .main a:visited {
   color: #0b1423;
-  word-break: break-all;
 }
 
 h2, h3, h4 {
@@ -374,9 +374,9 @@ p.copyright {
   }
 }
 
-.visually-hidden { 
+.visually-hidden {
   position: absolute !important;
-  height: 1px; 
+  height: 1px;
   width: 1px;
   overflow: hidden;
   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

src/static/css/methodology.css

@@ -8,7 +8,7 @@
 
 #methodology p,
 #methodology li {
-  font-size: 18px;
+  font-size: 17px;
   line-height: 30px;
 }
 .decorative-line {

src/static/css/page.css

@@ -4,16 +4,22 @@
   grid-template-areas: 'index content';
   grid-template-columns: 300px auto;
 }
-.table-wrap,
+.table-wrap-container,
 .floating-card {
   border-radius: 16px;
   box-shadow: 0 0 16px 0 rgba(78, 85, 100, 0.2);
 }
 .table-wrap {
-  display: inline-block;
-  margin: 10px 0;
+  display: flex;
+  margin: 0 auto;
+  padding: 16px;
   max-width: 100%;
+  justify-content: center;
+}
+.table-wrap-container {
   overflow: auto;
+  display: inline-block;
+  margin: 0 -16px;
 }
 
 .code-block {
@@ -107,7 +113,6 @@
   margin-top: 0;
   padding-top: 0;
   min-width: 320px;
-  font-size: 18px;
 }
 .content > section {
   margin-bottom: 64px;
@@ -173,7 +178,7 @@
 }
 
 .authors .tagline{
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .authors .avatar{
@@ -271,14 +276,13 @@ figure iframe {
   margin: 0 auto;
 }
 figcaption {
-  margin-top: 20px;
+  margin-top: 8px;
   text-align: center;
 }
 table {
   margin: 0 auto;
   max-width: 100%;
   border-collapse: collapse;
-  display: block;
 }
 thead {
   font-family: 'Poppins', sans-serif;
@@ -354,7 +358,9 @@ figure .big-number {
     max-height: 100%;
     transition: max-height 0.25s ease-in;
   }
-
+  .table-wrap {
+    justify-content: left;
+  }
   table {
     font-size: .8em;
   }

src/templates/en/2019/chapters/accessibility.html

@@ -39,9 +39,9 @@
     "headline": "{{ metadata.get('title') }}",
     "image": {
     	  "@type": "ImageObject",
-    	  "url": "https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_sm.jpg",
-    	  "height": 163,
-    	  "width": 326
+    	  "url": "https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg",
+    	  "height": 433,
+    	  "width": 866
     },
     "publisher": {
     	  "@type": "Organization",
@@ -265,7 +265,7 @@ <h2 id="ease-of-reading">Ease of reading</h2>
       <h3 id="color-contrast">Color contrast</h3>
       <p>There are many cases in which website visitors may not be able to see a website perfectly. Visitors may be colorblind and unable to distinguish between the font and background color (<a href="https://web.archive.org/web/20180304115406/http://www.allpsych.uni-giessen.de/karl/colbook/sharpe.pdf">1 in every 12 men and 1 in 200 women</a> of European descent). Perhaps they’re simply reading while the sun is out and creating tons of glare on their screen—significantly impairing their vision. Or maybe they’ve just grown older, and their eyes can't distinguish colors as well as they used to.</p>
       <p>To allow your users to be able to read your website under these conditions, be sure that your text has sufficient color contrast with its background.</p>
-      <p><img src="/static/images/2019/09_Accessibility/example-of-good-and-bad-color-contrast-lookzook.png" alt="Figure 1. Four colored boxes of orange and gray shades with white text overlayed inside creating two columns. The left column says Too lightly colored and has the orange background color written as #FCA469. The right column says Recommended and the orange background color is written as #F56905. The top box in each column has an orange background with white text #FFFFFF and the bottom box has a gray background with white text #FFFFFF. The grey background shows the orange color in grayscale. Courtesy of LookZook." /></p>
+      <p><img src="/static/images/2019/09_Accessibility/example-of-good-and-bad-color-contrast-lookzook.png" alt="Figure 1. Four colored boxes of orange and gray shades with white text overlayed inside creating two columns. The left column says Too lightly colored and has the orange background color written as #FCA469. The right column says Recommended and the orange background color is written as #F56905. The top box in each column has an orange background with white text #FFFFFF and the bottom box has a gray background with white text #FFFFFF. The grey background shows the orange color in grayscale. Courtesy of LookZook." loading="lazy" /></p>
       <p><em>Figure 1. Example of what text with insufficient color contrast looks like. Courtesy of LookZook</em></p>
       <p>So how well did the sites we analyzed do? <strong>Only 22.04%</strong> of sites gave all of their text sufficient color contrast. Or in other words: 4 out of every 5 sites have text that easily blends into the background, making it unreadable.</p>
       <p>
@@ -365,7 +365,7 @@ <h3 id="other-html-elements-used-for-navigation">Other HTML elements used for na
       <h3 id="skip-links">Skip Links</h3>
       <p>A <a href="https://webaim.org/techniques/skipnav/">skip link</a> is a link placed at the top of a page which allows screen readers or keyboard-only users to jump straight to the main content. It effectively "skips" over all navigational links and menus at the top of the page. Skip links are especially useful to keyboard users who don't use a screen reader, as these users don’t usually have access to other modes of quick navigation (like landmarks and headings). <strong>14.19%</strong> of the pages in our sample were found to have skip links.</p>
       <p>If you’d like to see a skip link in action for yourself, you can! Just do a quick Google search and hit "tab" as soon as you land on the search result pages. You’ll be greeted with a previously hidden link just like the one in Figure 7.</p>
-      <p><img src="./../../../static/images/2019/09_Accessibility/example-of-a-skip-link-on-google.com.png" alt='Figure 7. Screenshot of Google search results page for search "http archive". The visible “Skip to main content” link is surrounded by a blue focus highlight and a yellow overlayed box with a red arrow pointing to the skip link reads “A skip link on google.com”.' /></p>
+      <p><img src="./../../../static/images/2019/09_Accessibility/example-of-a-skip-link-on-google.com.png" alt='Figure 7. Screenshot of Google search results page for search "http archive". The visible “Skip to main content” link is surrounded by a blue focus highlight and a yellow overlayed box with a red arrow pointing to the skip link reads “A skip link on google.com”.' loading="lazy" /></p>
       <p><em>Figure 7. What a skip link looks like on google.com</em></p>
       <p>
         <strong><em>Note:</em></strong> It’s hard to accurately determine what a skip link is when analyzing sites. For this analysis, if we found an anchor link (href=#heading1) within the first 3 links on the page, we defined this as a page with a skip link. So, this 14.19% we reported is an upper bound and could be far worse.