Style tweaks for content pages (#357)

* style tweaks for content pages * Update 2019.css
HTTPArchive · Nov 8, 2019 · c15768c · c15768c
1 parent 79179f0
commit c15768c
Show file tree

Hide file tree

Showing 20 changed files with 16 additions and 42 deletions.
diff --git a/src/templates/en/2019/base_chapter.html b/src/templates/en/2019/base_chapter.html
@@ -7,6 +7,20 @@
 <link rel="stylesheet" href="/static/css/page.css">
 {% endblock %}
 
+{% block scripts %}
+{{ super() }}
+<script nonce="{{ csp_nonce() }}">
+
+var indexBox = document.querySelector('.index-box');
+var indexBoxTitle = document.querySelector('.index .header');
+
+indexBoxTitle.addEventListener('click', function(e) {
+  indexBox.classList.toggle('show');
+});
+</script>
+{% endblock %}
+
+
 {% macro render_byline() %}
   <div class="byline">Written by
   {% for author in metadata.get('authors') %}

diff --git a/src/templates/en/2019/chapter.html b/src/templates/en/2019/chapter.html
@@ -16,7 +16,6 @@
 
 {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -126,9 +125,4 @@ <h1 class="title">
         </nav>
     </section>
 </article>
-
 {% endblock %}
-
-
-
-
diff --git a/src/templates/en/2019/chapters/accessibility.html b/src/templates/en/2019/chapters/accessibility.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"II","chapter_number":9,"title":"Accessibility","description":"Accessibility chapter of the 2019 Web Almanac covering ease of reading, media, ease of navigation, and compatibility with assistive technologies","authors":["nektarios-paisios","obto","kleinab"],"reviewers":["ljme"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -458,5 +457,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/caching.html b/src/templates/en/2019/chapters/caching.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"IV","chapter_number":16,"title":"Caching","description":"Caching chapter of the 2019 Web Almanac covering cache-control, expires, TTLs, validitaty, vary, set-cookies, AppCache, Service Workers and opportunities","authors":["paulcalvano"],"reviewers":["obto","bkardell"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -657,5 +656,4 @@ <h1 id="conclusion">Conclusion</h1>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/compression.html b/src/templates/en/2019/chapters/compression.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"IV","chapter_number":15,"title":"Compression","description":"Compression chapter of the 2019 Web Almanac covering HTTP compression, algorithms, content types, 1st party and 3rd party compression and opportunities","authors":["paulcalvano"],"reviewers":["obto","yoavweiss"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -355,5 +354,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/css.html b/src/templates/en/2019/chapters/css.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"I","chapter_number":2,"title":"CSS","authors":["una","argyleink"],"reviewers":["meyerweb","huijing"]} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -488,5 +487,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/ecommerce.html b/src/templates/en/2019/chapters/ecommerce.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"III","chapter_number":13,"title":"Ecommerce","description":"Ecommerce chapter of the 2019 Web Almanac covering ecommerce platforms, payloads, images, third parties, performance, seo, and PWAs","authors":["samdutton","alankent"],"reviewers":["voltek62"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -515,5 +514,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/fonts.html b/src/templates/en/2019/chapters/fonts.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"I","chapter_number":6,"title":"Fonts","description":"Fonts chapter of the 2019 Web Almanac covering ecommerce platforms, payloads, images, third parties, performance, seo, and PWAs","authors":["zachleat"],"reviewers":["hyperpress","AymenLoukil"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -210,5 +209,4 @@ <h2 id="introduction">Introduction</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/http2.html b/src/templates/en/2019/chapters/http2.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"IV","chapter_number":20,"title":"HTTP/2","description":"HTTP/2 chapter of the 2019 Web Almanac covering adoption and impact of HTTP/2, HTTP/2 Push, HTTP/2 Issues, and HTTP/3","authors":["bazzadp"],"reviewers":["bagder","rmarx","dotjs"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -799,5 +798,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/javascript.html b/src/templates/en/2019/chapters/javascript.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"II","chapter_number":1,"title":"JavaScript","authors":["housseindjirdeh"],"reviewers":["rviscomi","obto","paulcalvano","mathiasbynens"]} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -307,5 +306,4 @@ <h1 id="conclusion">Conclusion</h1>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/markup.html b/src/templates/en/2019/chapters/markup.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"I","chapter_number":3,"title":"Markup","description":"Markup chapter of the 2019 Web Almanac covering elements used, custom elements, value, products, and common use cases","authors":["bkardell"],"reviewers":["zcorpan","tomhodgins","matthewp"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -439,5 +438,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/media.html b/src/templates/en/2019/chapters/media.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"I","chapter_number":4,"title":"Media","description":"Media chapter of the 2019 Web Almanac covering images, animations, and videos","authors":["colinbendell","dougsillars"],"reviewers":["ahmadawais","kornelski","eeeps"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -454,5 +453,4 @@ <h1 id="conclusion">Conclusion</h1>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/mobile-web.html b/src/templates/en/2019/chapters/mobile-web.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"II","chapter_number":12,"title":"Mobile Web","description":"Mobile Web chapter of the 2019 Web Almanac covering page loading, textual content, zooming and scaling, buttons and links, and ease of filling out forms","authors":["obto"],"reviewers":["AymenLoukil","hyperpress"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -427,5 +426,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/page-weight.html b/src/templates/en/2019/chapters/page-weight.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"IV","chapter_number":18,"title":"Page Weight","description":"Page Weight chapter of the 2019 Web Almanac covering why page weight matters, bandwidth, complex pages, page weight over time, page requests, and file formats","authors":["tammyeverts","khempenius"],"reviewers":["paulcalvano"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z"} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -1003,5 +1002,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/performance.html b/src/templates/en/2019/chapters/performance.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"II","chapter_number":7,"title":"Performance","description":"Performance chapter of the 2019 Web Almanac covering First Contentful Paint (FCP), Time to First Byte (TTFB), and First Input Delay (FID) ","authors":["rviscomi"],"reviewers":["JMPerez","obto","sergeychernyshev","zeman"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -328,5 +327,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/pwa.html b/src/templates/en/2019/chapters/pwa.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"II","chapter_number":11,"title":"PWA","description":"PWA chapter of the 2019 Web Almanac covering Service Workers, Web App Manifests, and Workbox","authors":["tomayac","jeffposnick"],"reviewers":["hyperpress","ahmadawais"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -288,5 +287,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/resource-hints.html b/src/templates/en/2019/chapters/resource-hints.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"IV","chapter_number":19,"title":"Resource Hints","description":"Resource Hints chapter of the 2019 Web Almanac covering usage of dns-prefetch, preconnect, preload, and prefetch as well as priority hints and native lazy loading","authors":["khempenius"],"reviewers":["andydavies","bazzadp","yoavweiss"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -335,5 +334,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/seo.html b/src/templates/en/2019/chapters/seo.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"I","chapter_number":10,"title":"SEO","description":"SEO chapter of the 2019 Web Almanac covering content, meta tags, indexability, linking, speed, structured data, internationalization, SPAs, AMP and security","authors":["ymschaap","rachellcostello","AVGP"],"reviewers":["clarkeclark","andylimn","AymenLoukil","catalinred","mattludwig"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z "} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -341,5 +340,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/chapters/third-parties.html b/src/templates/en/2019/chapters/third-parties.html
@@ -12,7 +12,6 @@
 
 {% set metadata = {"part_number":"II","chapter_number":5,"title":"Third Parties","description":"Third Parties chapter of the 2019 Web Almanac covering data of what third parties are used, what they are used for, performance impacts and privacy impacts","authors":["patrickhulce"],"reviewers":["zcorpan","obto","jasti"],"published":"2019-11-04T12:00:00+00:00:00","last_updated":"2019-11-07T21:46:11.000Z"} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
-
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
 <meta property="og:image" content="https://almanac.httparchive.org/static/images/{{ year }}/{{ get_chapter_image_dir(metadata) }}/hero_lg.jpg" />
@@ -315,5 +314,4 @@ <h2 id="conclusion">Conclusion</h2>
     </nav>
   </section>
 </article>
-
 {% endblock %}
diff --git a/src/templates/en/2019/methodology.html b/src/templates/en/2019/methodology.html
@@ -122,6 +122,7 @@ <h2 class="header">Index</h2>
   </nav>
 
   <div class="content">
+    <div class="subtitle"></div>
     <h1 class="title">Methodology</h1>
 
     <section>
@@ -679,11 +680,10 @@ <h2 id="looking-ahead">Looking ahead</h2>
 <script nonce="{{ csp_nonce() }}">
 
 var indexBox = document.querySelector('.index-box');
-var indexBoxTitle = document.querySelector('.index-box h2.header-mobile');
+var indexBoxTitle = document.querySelector('.index .header');
 
 indexBoxTitle.addEventListener('click', function(e) {
   indexBox.classList.toggle('show');
 });
-
 </script>
 {% endblock %}