Top-level pages

docs/_data/global.json

@@ -1,19 +1,5 @@
 {
   "navbar_items": [
-    {
-      "id": "templates",
-      "color": "has-text-info",
-      "fa_type": "fas",
-      "fa_icon": "fa-code",
-      "title": "Templates"
-    },
-    {
-      "id": "videos",
-      "color": "has-text-success",
-      "fa_type": "fas",
-      "fa_icon": "fa-play-circle",
-      "title": "Videos"
-    },
     {
       "id": "blog",
       "color": "bd-has-text-rss",

docs/_data/links.json

@@ -6,46 +6,62 @@
     },
     "documentation": {
       "name": "Documentation",
+      "subtitle": "Everything you need to <strong>create a website</strong> with Bulma",
       "path": "/documentation"
     },
     "overview": {
       "name": "Overview",
+      "subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
       "path": "/documentation/overview"
     },
     "overview-start": {
-      "name": "Start",
+      "name": "Getting started",
+      "subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
       "path": "/documentation/overview/start"
     },
+    "overview-customize": {
+      "name": "Customize",
+      "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
+      "path": "/documentation/overview/customize"
+    },
     "overview-classes": {
-      "name": "Classes",
+      "name": "CSS Classes",
+      "subtitle": "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.",
       "path": "/documentation/overview/classes"
     },
     "overview-modular": {
-      "name": "Modular",
+      "name": "Modularity",
+      "subtitle": "Just import what you <strong>need</strong>",
       "path": "/documentation/overview/modular"
     },
     "overview-responsiveness": {
       "name": "Responsiveness",
+      "subtitle": "Bulma is a <strong>mobile-first</strong> framework",
       "path": "/documentation/overview/responsiveness"
     },
     "overview-variables": {
       "name": "Variables",
+      "subtitle": "Easily <strong>customize</strong> Bulma to match your design",
       "path": "/documentation/overview/variables"
     },
     "overview-colors": {
       "name": "Colors",
+      "subtitle": "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components",
       "path": "/documentation/overview/colors"
     },
     "overview-functions": {
       "name": "Functions",
+      "subtitle": "Utility functions to calculate colors and other values",
       "path": "/documentation/overview/functions"
     },
     "overview-mixins": {
       "name": "Mixins",
+      "subtitle": "Utility mixins for custom elements and responsive helpers",
       "path": "/documentation/overview/mixins"
     },
     "modifiers": {
       "name": "Modifiers",
+      "subtitle": "An <strong>easy-to-read</strong> naming system designed for humans",
       "path": "/documentation/modifiers"
     },
     "modifiers-syntax": {
@@ -70,6 +86,7 @@
     },
     "columns": {
       "name": "Columns",
+      "subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
       "path": "/documentation/columns"
     },
     "columns-basics": {
@@ -98,6 +115,7 @@
     },
     "layout": {
       "name": "Layout",
+      "subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
       "path": "/documentation/layout"
     },
     "layout-level": {
@@ -251,8 +269,9 @@
   },
   "categories": {
     "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
-    "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
     "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
+    "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
+    "layout": ["layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
     "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
     "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
     "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]

docs/_includes/components/docs.html

@@ -0,0 +1,28 @@
+<nav class="bd-docs">
+  {% for category in site.data.links.categories %}
+    {% assign category_id = category[0] %}
+    {% assign category_links = category[1] %}
+    {% assign category_link = site.data.links.by_id[category_id] %}
+
+    <article class="bd-doc">
+      <h2 class="bd-doc-title title is-5">
+        <a href="{{ site.url }}{{ category_link.path }}">
+          <strong>{{ category_link.name }}</strong>
+        </a>
+      </h2>
+
+      <div class="bd-doc-content">
+        <ul class="bd-doc-list">
+          {% for link_id in category_links %}
+            {% assign link = site.data.links.by_id[link_id] %}
+            <li {% if link_id == current_link_id %}class="is-current"{% endif %}>
+              <a href="{{ site.url }}{{ link.path }}">
+                {{ link.name }}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </article>
+  {% endfor %}
+</nav>

docs/_includes/components/links.html

@@ -0,0 +1,21 @@
+<nav class="bd-links">
+  {% if include.category_id %}
+    {% assign category_id = include.category_id %}
+    {% assign category_links = site.data.links.categories[category_id] %}
+  {% else %}
+    {% assign category_links = site.data.links.categories %}
+  {% endif %}
+
+  {% for link_id in category_links %}
+    {% if include.category_id %}
+      {% assign link = site.data.links.by_id[link_id] %}
+    {% else %}
+      {% assign thingy = link_id[0] %}
+      {% assign link = site.data.links.by_id[thingy] %}
+    {% endif %}
+    <a class="bd-link" href="{{ site.url }}{{ link.path }}">
+      <h2 class="bd-link-name">{{ link.name }}</h2>
+      <p class="bd-link-subtitle">{{ link.subtitle }}</p>
+    </a>
+  {% endfor %}
+</nav>

docs/_includes/elements/categories-nav.html

@@ -0,0 +1,31 @@
+<nav id="categories" class="bd-categories">
+  {% for category in site.data.links.categories %}
+    {% assign category_id = category[0] %}
+    {% assign category_links = category[1] %}
+    {% assign category_link = site.data.links.by_id[category_id] %}
+
+    <div class="bd-category {% if category_id == current_category %}is-active{% endif %}">
+      <header class="bd-category-header">
+        <a class="bd-category-toggle">
+          <span class="icon">
+            <i class="fas fa-chevron-down"></i>
+          </span>
+        </a>
+        <a class="bd-category-name" href="{{ site.url }}{{ category_link.path }}">
+          <strong>{{ category_link.name }}</strong>
+        </a>
+      </header>
+
+      <ul class="bd-category-list">
+        {% for link_id in category_links %}
+          {% assign link = site.data.links.by_id[link_id] %}
+          <li {% if link_id == current_link_id %}class="is-current"{% endif %}>
+            <a href="{{ site.url }}{{ link.path }}">
+              {{ link.name }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endfor %}
+</nav>

docs/_includes/layout/main-close.html

@@ -1,8 +1,14 @@
+{% assign current_category = page.doc-tab %}
+{% assign current_link_id = page.breadcrumb | last %}
+{% assign category_links = site.data.links.categories[current_category] %}
+
         </div>
       </div>
 
       <aside class="bd-side">
-        <!-- Empty on purpose -->
+        {% if include.show_categories %}
+          {% include elements/categories-nav.html %}
+        {% endif %}
       </aside>
     </div>
   </div>

docs/_includes/navbar.html

@@ -4,7 +4,7 @@
       <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
     </a>
 
-    <!-- <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
+    <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
       <span class="icon" style="color: #333;">
         <i class="fab fa-lg fa-github"></i>
       </span>
@@ -14,7 +14,7 @@
       <span class="icon" style="color: #55acee;">
         <i class="fab fa-lg fa-twitter"></i>
       </span>
-    </a> -->
+    </a>
 
     <div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
       <span></span>

docs/_javascript/main.js

@@ -25,6 +25,30 @@ document.addEventListener('DOMContentLoaded', () => {
   //   });
   // }
 
+  // Sidebar links
+
+  const $categories = getAll('#categories .bd-category');
+
+  if ($categories.length > 0) {
+    $categories.forEach(el => {
+      const toggle_el = el.querySelector('.bd-category-toggle');
+
+      toggle_el.addEventListener('click', event => {
+        closeCategories(el);
+        el.classList.toggle('is-active');
+      });
+    });
+  }
+
+  function closeCategories(current_el) {
+    $categories.forEach(el => {
+      if (current_el == el) {
+        return;
+      }
+      el.classList.remove('is-active');
+    });
+  }
+
   // Meta links
 
   const $metalinks = getAll('#meta a');
@@ -36,7 +60,6 @@ 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}`);
         return false;
       });
     });
@@ -289,8 +312,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // translateHeader(window.scrollY, false);
 
-  let ticking = false;
+  // let ticking = false;
-  let lastY = 0;
+  // let lastY = 0;
 
   // window.addEventListener('scroll', function() {
   //   const currentY = window.scrollY;

docs/_layouts/documentation.html

@@ -7,6 +7,7 @@ route: documentation
 
 {% assign current_category = page.doc-tab %}
 {% assign current_link_id = page.breadcrumb | last %}
+{% assign current_link = site.data.links.by_id[current_link_id] %}
 {% assign category_links = site.data.links.categories[current_category] %}
 
 {% for link_id in category_links %}
@@ -73,7 +74,11 @@ route: documentation
               {{ page.title }}
             </h1>
             <p class="subtitle is-4">
-              {{ page.subtitle }}
+              {% if current_link.subtitle %}
+                {{ current_link.subtitle }}
+              {% else %}
+                {{ page.subtitle }}
+              {% endif %}
             </p>
             {% if page.meta %}
               {%
@@ -95,42 +100,27 @@ route: documentation
           {{ content }}
         </div>
 
+        <nav class="bd-prev-next-bis">
+          {% if previous_link %}
+            <a class="bd-prev-next-bis-previous" href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
+              ← {{ previous_link.name }}
+            </a>
+          {% endif %}
+
+          {% if next_link %}
+            <a class="bd-prev-next-bis-next" href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
+              {{ next_link.name }} →
+            </a>
+          {% endif %}
+        </nav>
+
         {% include elements/improve-page.html %}
       </div>
 
       <aside class="bd-side">
-        <nav class="bd-categories">
+        {% unless page.hide_categories %}
-          {% for category in site.data.links.categories %}
+          {% include elements/categories-nav.html %}
-            <div class="bd-category">
+        {% endunless %}
-              {% assign category_id = category[0] %}
-              {% assign category_links = category[1] %}
-
-              {% assign category_link = site.data.links.by_id[category_id] %}
-
-              <header class="bd-category-header">
-                <a class="bd-category-toggle">
-                  <span class="icon">
-                    <i class="fas fa-chevron-down"></i>
-                  </span>
-                </a>
-                <a class="bd-category-name" href="{{ site.url }}{{ category_link.path }}">
-                  <strong>{{ category_link.name }}</strong>
-                </a>
-              </header>
-
-              <ul class="bd-category-list {% if category_id == current_category %}is-active{% endif %}">
-                {% for link_id in category_links %}
-                  {% assign link = site.data.links.by_id[link_id] %}
-                  <li {% if link_id == current_link_id %}class="is-current"{% endif %}>
-                    <a href="{{ site.url }}{{ link.path }}">
-                      {{ link.name }}
-                    </a>
-                  </li>
-                {% endfor %}
-              </ul>
-            </div>
-          {% endfor %}
-        </nav>
       </aside>
     </div>
   </div>

docs/_sass/example.sass

@@ -46,7 +46,7 @@
 // Snippet
 .bd-snippet
   +block
-  border: 1px solid $yellow
+  border: 2px solid $background
   margin-top: 2rem
   position: relative
   &::before

docs/_sass/global.sass

@@ -40,8 +40,12 @@ $carbon-poweredby-height: 20px
     min-height: $carbon-height
     position: relative
     &:hover
-      .carbon-img
+      .carbon-img::after
-        opacity: 0.9
+        +overlay
+        background-color: rgba(#000, 0.05)
+        content: ""
+        display: block
+        right: $carbon-spacing
   .carbon-img
     bottom: 0
     float: left
@@ -70,7 +74,7 @@ $carbon-poweredby-height: 20px
       color: $link
   .carbon-poweredby
     bottom: 0
-    color: $text-light
+    color: $grey-light
     display: inline
     font-size: $size-small
     line-height: $carbon-poweredby-height

docs/_sass/highlight.sass

@@ -1,6 +1,8 @@
 .highlight
   background-color: #f5f5f5
   color: #586e75
+  pre
+    font-size: 12px
   .c
     color: #93a1a1
   .err,

docs/_sass/main.sass

@@ -1,5 +1,3 @@
-$main-spacing: 2.5rem
-
 .bd-main
   overflow: hidden
   position: relative
@@ -32,6 +30,20 @@ $main-spacing: 2.5rem
     &:hover
       background-color: $background
 
+.bd-prev-next-bis
+  border-top: 2px solid $background
+  display: flex
+  justify-content: space-between
+  margin-top: $main-spacing
+  a
+    margin-top: $main-spacing / 2
+
+.bd-prev-next-bis-previous
+  margin-right: auto
+
+.bd-prev-next-bis-next
+  margin-left: auto
+
 .bd-header
   border-bottom: 2px solid $background
   margin-bottom: $main-spacing
@@ -72,6 +84,12 @@ $main-spacing: 2.5rem
       color: $link
   &:not(:last-child)
     margin-bottom: 0.5rem
+  &.is-active
+    .bd-category-toggle
+      .icon
+        transform: rotate(180deg)
+    .bd-category-list
+      display: block
 
 .bd-category-header
   position: relative
@@ -84,6 +102,9 @@ $main-spacing: 2.5rem
   justify-content: flex-end
   .icon
     font-size: 0.75rem
+    transform-origin: center
+    transition-duration: $speed
+    transition-property: transform
 
 .bd-category-name
   color: $text-strong
@@ -101,8 +122,6 @@ $main-spacing: 2.5rem
         color: $link
   a
     color: $text-light
-  &.is-active
-    display: block
 
 +touch
   .bd-lead,
@@ -146,7 +165,7 @@ $sidebar-width: 14rem
   .bd-header-carbon
     flex-grow: 0
     flex-shrink: 0
-    margin: -15px 0 -15px 1.5rem
+    margin: -15px 0 -15px $main-spacing
     width: $carbon-width
   .bd-side
     padding: 3rem 0 3rem 1.5rem

docs/_sass/specific.sass

@@ -1,6 +1,75 @@
+.bd-links
+  counter-reset: bd-links
+
+.bd-link
+  border-radius: $radius-large
+  color: $text-light
+  display: block
+  font-size: $size-5
+  padding: 1rem 3rem 1.5rem
+  strong
+    font-weight: $weight-semibold
+  &:hover
+    background-color: $white-bis
+
+.bd-link-name
+  position: relative
+  &::before
+    color: $link
+    counter-increment: bd-links
+    content: counter(bd-links)
+    font-weight: $weight-normal
+    position: absolute
+    right: calc(100% + 0.625em)
+
++desktop
+  .bd-links
+    display: flex
+    flex-wrap: wrap
+  .bd-link
+    width: 50%
+
+.bd-link-name
+  color: $text-strong
+  font-size: $size-4
+  font-weight: $weight-semibold
+
+.bd-docs
+  display: flex
+  flex-wrap: wrap
+
+.bd-doc
+  margin: 0 3rem 1.5rem 0
+  +mobile
+    min-width: calc(50% - 3rem)
+  +tablet
+    min-width: calc(33.3333% - 3rem)
+
+.bd-doc-title
+  color: $text-strong
+  a
+    color: currentColor
+    &:hover
+      color: $link
+  &:not(:last-child)
+    margin-bottom: 0.75rem
+
+.bd-boxes
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
+
+.bd-box
+  border: 4px solid $background
+  border-radius: $radius
+
+.bd-box-header
+  text-align: center
+
 .bd-typo
+  text-align: center
   &:not(:first-child)
-    margin-top: 3rem
+    margin-top: $main-spacing
 
 .bd-has-text-rss
   color: $rss
@@ -22,10 +91,9 @@ $navbar-items: ("documentation": $primary, "templates": $info, "videos": $succes
 
 .bd-navbar-item-expo
   &:hover
-    color: #744F09 !important
+    color: #8F6900 !important
     .icon
-      color: #FF7B00 !important
+      color: #F4B300 !important
-
 
 .bd-special-shadow
   background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))

docs/bulma-docs.sass

@@ -13,6 +13,7 @@ $star: #FFD257
 $rss: #f26522
 
 $carbon-width: 300px
+$main-spacing: 3rem
 
 @import "../bulma"
 @import "./_sass/main"

docs/documentation.html

@@ -1,8 +1,9 @@
 ---
 title: Documentation
-subtitle: "Everything you need to <strong>create a website</strong> with Bulma"
 layout: documentation
 breadcrumb:
 - home
 - documentation
 ---
+
+{% include components/links.html %}

docs/documentation/columns.html

@@ -0,0 +1,11 @@
+---
+title: Columns
+layout: documentation
+doc-tab: columns
+breadcrumb:
+- home
+- documentation
+- columns
+---
+
+{% include components/links.html category_id='columns' %}

docs/documentation/components.html

@@ -0,0 +1,11 @@
+---
+title: Components
+layout: documentation
+doc-tab: components
+breadcrumb:
+- home
+- documentation
+- components
+---
+
+{% include components/links.html category_id='components' %}

docs/documentation/elements.html

@@ -0,0 +1,11 @@
+---
+title: Elements
+layout: documentation
+doc-tab: elements
+breadcrumb:
+- home
+- documentation
+- elements
+---
+
+{% include components/links.html category_id='elements' %}

docs/documentation/form.html

@@ -1,9 +1,11 @@
 ---
 title: Form
-subtitle: "All <strong>form controls</strong>"
 layout: documentation
+doc-tab: form
 breadcrumb:
 - home
 - documentation
 - form
 ---
+
+{% include components/links.html category_id='form' %}

docs/documentation/modifiers.html

@@ -0,0 +1,11 @@
+---
+title: Modifiers
+layout: documentation
+doc-tab: modifiers
+breadcrumb:
+- home
+- documentation
+- modifiers
+---
+
+{% include components/links.html category_id='modifiers' %}

docs/documentation/modifiers/typography-helpers.html

@@ -2,6 +2,7 @@
 title: Typography helpers
 subtitle: "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width"
 layout: documentation
+hide_categories: true
 doc-tab: modifiers
 doc-subtab: typography-helpers
 breadcrumb:
@@ -96,7 +97,7 @@ breadcrumb:
   </p>
 </div>
 
-{% include layout/main-close.html %}
+{% include layout/main-close.html show_categories=true %}
 
 <div class="container">
   <div class="table-container">

docs/documentation/overview.html

@@ -0,0 +1,11 @@
+---
+title: Overview
+layout: documentation
+doc-tab: overview
+breadcrumb:
+- home
+- documentation
+- overview
+---
+
+{% include components/links.html category_id='overview' %}

docs/documentation/overview/classes.html

@@ -1,6 +1,5 @@
 ---
 title: CSS classes
-subtitle: "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want."
 layout: documentation
 doc-tab: overview
 doc-subtab: classes

docs/documentation/overview/colors.html

@@ -1,6 +1,5 @@
 ---
 title: Colors
-subtitle: "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components"
 layout: documentation
 doc-tab: overview
 doc-subtab: colors

docs/documentation/overview/customize.html

@@ -1,6 +1,5 @@
 ---
 title: Customize Bulma with Sass
-subtitle: "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>"
 layout: documentation
 doc-tab: overview
 doc-subtab: customize

docs/documentation/overview/functions.html

@@ -1,6 +1,5 @@
 ---
 title: Functions
-subtitle: "Utility functions to calculate colors and other values"
 layout: documentation
 doc-tab: overview
 doc-subtab: functions

docs/documentation/overview/mixins.html

@@ -1,6 +1,5 @@
 ---
 title: Mixins
-subtitle: "Utility mixins for custom elements and responsive helpers"
 layout: documentation
 doc-tab: overview
 doc-subtab: mixins

docs/documentation/overview/modular.html

@@ -1,6 +1,5 @@
 ---
 title: Modularity
-subtitle: "Just import what you <strong>need</strong>"
 layout: documentation
 doc-tab: overview
 doc-subtab: modular
@@ -99,5 +98,8 @@ breadcrumb:
       <code>[disabled]</code>
     </li>
   </ul>
-  {% highlight html %}{{ buttons }}{% endhighlight %}
+
+  <div class="bd-snippet-code highlight-full">
+    {% highlight html %}{{ buttons }}{% endhighlight %}
+  </div>
 </div>

docs/documentation/overview/responsiveness.html

@@ -1,6 +1,5 @@
 ---
 title: Responsiveness
-subtitle: "Bulma is a <strong>mobile-first</strong> framework"
 layout: documentation
 doc-tab: overview
 doc-subtab: responsiveness
@@ -36,7 +35,7 @@ $fullhd-enabled: false
     <li>the <code>level</code> component will show its children stacked vertically</li>
     <li>the <code>nav</code> menu will be hidden</li>
   </ul>
-  <p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
+  <p>You can however enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
 </div>
 
 {% include anchor.html name="Breakpoints" %}

docs/documentation/overview/start.html

@@ -1,6 +1,5 @@
 ---
 title: Getting started with Bulma
-subtitle: "You only need <strong>1 CSS file</strong> to use Bulma"
 layout: documentation
 doc-tab: overview
 doc-subtab: start

docs/documentation/overview/variables.html

@@ -1,6 +1,5 @@
 ---
 title: Variables
-subtitle: "Easily <strong>customize</strong> Bulma to match your design"
 layout: documentation
 doc-tab: overview
 doc-subtab: variables

docs/lib/main.js

@@ -27,6 +27,30 @@ document.addEventListener('DOMContentLoaded', function () {
   //   });
   // }
 
+  // Sidebar links
+
+  var $categories = getAll('#categories .bd-category');
+
+  if ($categories.length > 0) {
+    $categories.forEach(function (el) {
+      var toggle_el = el.querySelector('.bd-category-toggle');
+
+      toggle_el.addEventListener('click', function (event) {
+        closeCategories(el);
+        el.classList.toggle('is-active');
+      });
+    });
+  }
+
+  function closeCategories(current_el) {
+    $categories.forEach(function (el) {
+      if (current_el == el) {
+        return;
+      }
+      el.classList.remove('is-active');
+    });
+  }
+
   // Meta links
 
   var $metalinks = getAll('#meta a');
@@ -38,7 +62,6 @@ 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}`);
         return false;
       });
     });
@@ -289,8 +312,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // translateHeader(window.scrollY, false);
 
-  var ticking = false;
+  // let ticking = false;
-  var lastY = 0;
+  // let lastY = 0;
 
   // window.addEventListener('scroll', function() {
   //   const currentY = window.scrollY;

sass/utilities/initial-variables.sass

@@ -46,7 +46,7 @@ $weight-bold: 700 !default
 // Responsiveness
 
 // The container horizontal gap, which acts as the offset for breakpoints
-$gap: 32px !default
+$gap: 64px !default
 // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
 $tablet: 769px !default
 // 960px container + 4rem
@@ -62,8 +62,8 @@ $fullhd-enabled: true !default
 
 $easing: ease-out !default
 $radius-small: 2px !default
-$radius: 3px !default
+$radius: 4px !default
-$radius-large: 5px !default
+$radius-large: 6px !default
 $radius-rounded: 290486px !default
 $speed: 86ms !default