Optimize message docs

docs/_javascript/main.js

@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const target = $el.getAttribute('href');
         const $target = document.getElementById(target.substring(1));
         $target.scrollIntoView(true);
-        window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
+        // window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
         return false;
       });
     });
@@ -152,4 +152,27 @@ document.addEventListener('DOMContentLoaded', () => {
     return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
   }
 
+  let latestKnownScrollY = 0;
+  let ticking = false;
+
+  function scrollUpdate() {
+    ticking = false;
+    // do stuff
+  }
+
+
+  function onScroll() {
+    latestKnownScrollY = window.scrollY;
+    scrollRequestTick();
+  }
+
+  function scrollRequestTick() {
+    if(!ticking) {
+      requestAnimationFrame(scrollUpdate);
+    }
+    ticking = true;
+  }
+
+   window.addEventListener('scroll', onScroll, false);
+
 });

docs/css/bulma-docs.css

@@ -3510,7 +3510,7 @@ a.tag:hover {
 .title {
   color: #363636;
   font-size: 2rem;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 1.125;
 }
 

docs/documentation/components/message.html

@@ -210,29 +210,29 @@ variables:
       </div>
     </div>
 
-    <hr>
+    {% include heading.html name="Colors" %}
 
-    <h3 class="subtitle">Message body only</h3>
-    <div class="content">
-      <p>You can <strong>omit</strong> the message header:</p>
-    </div>
     <div class="columns">
       <div class="column is-half">
-        {{message_body_example}}
+        {{message_colors_example}}
       </div>
       <div class="column is-half">
-        {% highlight html %}{{message_body_example}}{% endhighlight %}
+        {% highlight html %}{{message_colors_example}}{% endhighlight %}
       </div>
     </div>
 
-    {% include heading.html name="Colors" %}
+    <hr>
 
+    <h3 class="title">Message body only</h3>
+    <div class="content">
+      <p>You can <strong>omit</strong> the message header:</p>
+    </div>
     <div class="columns">
       <div class="column is-half">
-        {{message_colors_example}}
+        {{message_body_example}}
       </div>
       <div class="column is-half">
-        {% highlight html %}{{message_colors_example}}{% endhighlight %}
+        {% highlight html %}{{message_body_example}}{% endhighlight %}
       </div>
     </div>
 

docs/lib/main.js

@@ -13,7 +13,7 @@ document.addEventListener('DOMContentLoaded', function () {
         var target = $el.getAttribute('href');
         var $target = document.getElementById(target.substring(1));
         $target.scrollIntoView(true);
-        window.history.replaceState(null, document.title, '' + window.location.origin + window.location.pathname + target);
+        // window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
         return false;
       });
     });
@@ -153,4 +153,26 @@ document.addEventListener('DOMContentLoaded', function () {
   function getAll(selector) {
     return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
   }
+
+  var latestKnownScrollY = 0;
+  var ticking = false;
+
+  function scrollUpdate() {
+    ticking = false;
+    // do stuff
+  }
+
+  function onScroll() {
+    latestKnownScrollY = window.scrollY;
+    scrollRequestTick();
+  }
+
+  function scrollRequestTick() {
+    if (!ticking) {
+      requestAnimationFrame(scrollUpdate);
+    }
+    ticking = true;
+  }
+
+  window.addEventListener('scroll', onScroll, false);
 });

sass/elements/title.sass

@@ -1,6 +1,6 @@
 $title-color: $grey-darker !default
 $title-size: $size-3 !default
-$title-weight: $weight-bold !default
+$title-weight: $weight-semibold !default
 $title-strong-color: inherit !default
 $title-strong-weight: inherit !default