gatherer: swap <article> and <section>

gatherer/assets/style.css

@@ -67,27 +67,27 @@ main {
     justify-content: space-evenly;
 }
 
-article {
+section {
     margin: 2rem 0.5rem;
     border-radius: 0.7rem;
     padding: 0.5rem 0;
     max-width: 100vw;
 }
-article h2 {
+section h2 {
     max-width: 100%;
     text-align: center;
     letter-spacing: 0.3rem;
     font-size: 180%;
     font-variant: small-caps;
 }
-section {
+article {
     position: relative;
     background-color: #5582E0;
     border-radius: 0.8rem;
     padding: 0.5rem;
     margin: 1.5rem 0.5rem;
 }
-section .title {
+article .title {
     margin: 0;
     display: flex;
     flex-direction: row;
@@ -103,11 +103,11 @@ section .title {
         -0.1rem 0.1rem 0.15rem #484B90,
         0.1rem 0.1rem 0.15rem #484B90;
 }
-section.with-image .title {
+article.with-image .title {
     height: 8rem;
     transition: height 1s ease-out 0s;
 }
-section h3 {
+article h3 {
     display: inline-block;
     margin: 0;
     padding: 1rem 0.5rem;
@@ -117,12 +117,12 @@ section h3 {
     font-weight: normal;
     z-index: 10;
 }
-section h3::before {
+article h3::before {
     color: #5582E0;
     font-weight: bold;
     content: '#';
 }
-section .score {
+article .score {
     display: inline-block;
     align-self: center;
     text-align: right;
@@ -130,7 +130,7 @@ section .score {
     padding: 1rem 0.5rem;
     z-index: 10;
 }
-section .hosts {
+article .hosts {
     list-style-type: none;
     padding: 0;
     margin: 0.5rem 0 0 0;
@@ -139,28 +139,28 @@ section .hosts {
     line-height: 1.5rem;
     height: 1.5rem;
 }
-section .hosts li {
+article .hosts li {
     display: inline-block;
     margin: 0 0.2rem;
     font-size: 80%;
 }
 
-section .graph, section .images {
+article .graph, article .images {
     position: absolute;
     width: calc(100% - 1rem);
     margin: 0;
 }
-section .graph {
+article .graph {
     height: calc(100% - 2.4rem);
     z-index: 2;
 }
-section .images {
+article .images {
     overflow: hidden;
     border-radius: 0.5rem 0.5rem 0 0;
     z-index: 1;
     height: calc(100% - 2.4rem);
 }
-section .images .image {
+article .images .image {
     background-position: center;
     background-size: cover;
     position: absolute;

gatherer/assets/tag_images.js

@@ -1,9 +1,9 @@
 (function() {
-    var sectionEls = document.getElementsByTagName("section");
-    for(var i = 0; i < sectionEls.length; i++) {
-        var sectionEl = sectionEls[i];
-        (function(sectionEl) {
-            var images = sectionEl.getAttribute("data-images").split(" ").filter(function(image) { return !!image; });
+    var articleEls = document.getElementsByTagName("article");
+    for(var i = 0; i < articleEls.length; i++) {
+        var articleEl = articleEls[i];
+        (function(articleEl) {
+            var images = articleEl.getAttribute("data-images").split(" ").filter(function(image) { return !!image; });
             if (images.length > 0) {
                 var imageContainer = document.createElement("div");
                 imageContainer.className = "images";
@@ -68,15 +68,15 @@
                     show()
                 }
                 
-                sectionEl.style.backgroundPosition = "center";
-                sectionEl.style.backgroundSize = "cover";
-                sectionEl.className = "with-image";
+                articleEl.style.backgroundPosition = "center";
+                articleEl.style.backgroundSize = "cover";
+                articleEl.className = "with-image";
 
-                var titleEl = sectionEl.getElementsByClassName("title")[0];
+                var titleEl = articleEl.getElementsByClassName("title")[0];
                 if (titleEl) {
                     titleEl.insertBefore(imageContainer, titleEl.firstChild);
                 }
             }
-        })(sectionEl);
+        })(articleEl);
     }
 })()

gatherer/templates/trends.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon16.png"/>
     <link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon48.png"/>
-    <link rel="stylesheet" title="Default" type="text/css" href="/assets/style.css?6"/>
+    <link rel="stylesheet" title="Default" type="text/css" href="/assets/style.css?10"/>
 
     <meta property="og:url" content="https://fedi.buzz/"/>
     <meta property="og:type" content="website"/>
@@ -46,10 +46,10 @@
 
     <main>
       {% for ((_until, period, result), title) in results.iter().zip(["Now", "Today", "This week"]) %}
-        <article>
+        <section>
           <h2>{{ title }}</h2>
           {% for (score, tag) in result %}
-            <section data-images="{{ tag_images.get(tag.name).unwrap() }}">
+            <article data-images="{{ tag_images.get(tag.name).unwrap() }}">
               <div class="title" data-hours="{{ tag.hour_scores_data(4 * period.deref()) }}">
                 <h3>{{ tag.spelling() }}</h3>
                 <p class="score">{{ format!("{}{:.0}%", if *score > 1. { "+" } else { "" }, 100. * *score - 100.) }}</p>
@@ -63,9 +63,9 @@
                   </li>
                 {% endfor %}
               </ul>
-            </section>
+            </article>
           {% endfor %}
-        </article>
+        </section>
       {% endfor %}
     </main>
 
@@ -77,7 +77,7 @@
 
     <script type="text/javascript" src="/assets/hour_graphs.js">
     </script>
-    <script type="text/javascript" src="/assets/tag_images.js">
+    <script type="text/javascript" src="/assets/tag_images.js?1">
     </script>
   </body>
 </html>