Fix website transfer includes

docs/_includes/book/book-banner.html

@@ -0,0 +1,15 @@
+<section id="bulma-book" class="bd-book-banner hero is-medium">
+  <!-- <div class="bd-book-pattern"></div> -->
+  <div class="hero-body">
+    <div class="container">
+      <div class="bd-book-columns">
+        <div class="bd-book-column bd-is-cover">
+          {% include book/book-cover.html %}
+        </div>
+        <div class="bd-book-column bd-is-content">
+          {% include book/book-content.html show_cover=false %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/book/book-content.html

@@ -0,0 +1,59 @@
+<div class="bd-book-content">
+  <header class="block bd-book-header">
+    <strong class="tag is-success">New!</strong>
+    <h3 class="title">The official Bulma book! 😲</h3>
+    <p class="subtitle is-6 has-text-grey">by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,<br>Mikko Lauhakari, Aslam Shah and David Berning</p>
+  </header>
+
+  {% if include.show_cover %}
+    <div class="bd-book-inline-cover">
+      {% include book/book-cover.html %}
+    </div>
+  {% endif %}
+
+  <div class="block bd-book-description is-size-5">
+    <p>A <strong>step-by-step guide</strong> that teaches you how to build a <strong>web interface from scratch</strong> using Bulma.</p>
+  </div>
+  <div class="bd-book-tags">
+    <div class="field is-grouped is-grouped-multiline">
+      <div class="control">
+        <span class="tag is-white has-text-grey is-paddingless">Formats available:</span>
+      </div>
+      <div class="control">
+        <div class="tags has-addons">
+          <strong class="tag has-text-danger">PDF</strong>
+          <strong class="tag has-text-info">Epub</strong>
+          <strong class="tag has-text-success">Mobi</strong>
+        </div>
+      </div>
+      <div class="control">
+        <span class="tag is-white has-text-grey is-paddingless">or</span>
+      </div>
+      <div class="control">
+        <div class="tags has-addons">
+          <strong class="tag has-text-orange">Kindle</strong>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="block bd-book-buttons">
+    <div class="buttons">
+      <a class="button bd-is-bleeding is-large" href="{{ site.data.meta.book_url }}" target="_blank" rel="nofollow">
+        <span>
+          <em>PDF + Epub + Mobi</em>
+          <strong>Buy</strong> from <img src="{{ site.url }}/images/book/bleedingedge-type.png">
+        </span>
+      </a>
+      <a class="button bd-is-amazon is-large" href="{{ site.data.meta.book_amazon }}" target="_blank" rel="nofollow">
+        <span>
+          <em>Kindle version</em>
+          <strong>Buy</strong> from <img src="{{ site.url }}/images/book/amazon-logo.png">
+        </span>
+      </a>
+    </div>
+    <div class="bd-book-sample">
+      Or <a href="{{ site.data.meta.book_sample }}" target="_blank" rel="nofollow">
+        download a free sample</a>!
+    </div>
+  </div>
+</div>

docs/_includes/book/book-cover.html

@@ -0,0 +1,12 @@
+<div class="bd-book-cover">
+  <a href="{{ site.data.meta.book_url }}" target="_blank">
+    {%
+      include docs/elements/responsive-image-2x.html
+      path="book/book-cover"
+      extension="jpg"
+      alt="The official Bulma book cover"
+      width="504"
+      height="661"
+    %}
+  </a>
+</div>

docs/_includes/book/book-modal.html

@@ -0,0 +1,14 @@
+<div id="bookModal" class="bd-book-modal modal">
+  <div class="bd-book-modal-background"></div>
+  <div class="modal-content">
+    <div class="bd-book-modal-columns">
+      <div class="bd-book-modal-column bd-is-cover">
+        {% include book/book-cover.html %}
+      </div>
+      <div class="bd-book-modal-column bd-is-content">
+        {% include book/book-content.html show_cover=true %}
+      </div>
+    </div>
+  </div>
+  <button  class="bd-book-modal-close modal-close is-large" aria-label="close"></button>
+</div>

docs/_includes/docs/components/hero.html

@@ -0,0 +1,30 @@
+{% capture hero_body %}
+<div class="bd-hero-body">
+  <div class="bd-hero-heading">
+    <h1 class="title algolia-lvl0">
+      {% if include.icon %}
+        <span class="icon">
+          <i class="{{ include.icon }}"></i>
+        </span>
+      {% endif %}
+      {{ include.title | markdownify }}
+    </h1>
+    <div class="subtitle is-4 algolia-lvl1">
+      {{ include.subtitle | markdownify }}
+    </div>
+    {{ include.content }}
+  </div>
+</div>
+{% endcapture %}
+
+<section class="hero bd-hero bd-is-{{ include.color }}">
+  <div class="hero-body">
+    {% if page.fullwidth %}
+      {{ hero_body }}
+    {% else %}
+      <div class="container">
+        {{ hero_body }}
+      </div>
+    {% endif %}
+  </div>
+</section>

docs/_includes/docs/elements/backers-paragraph.html

@@ -0,0 +1,16 @@
+{% if site.data.backers[include.tier].size > 0 or site.data.github[include.tier].size > 0 %}
+<h2>{{ include.title }}</h2>
+
+<ul>
+  {% for pt in site.data.backers[include.tier] reversed %}
+  <li>
+    {{ pt.name }}
+  </li>
+  {% endfor %}
+  {% for gh in site.data.github[include.tier] reversed %}
+  <li>
+    {{ gh }}
+  </li>
+  {% endfor %}
+</ul>
+{% endif %}

docs/_includes/docs/elements/banner.html

@@ -0,0 +1,9 @@
+<section class="bd-banner bd-is-{{ include.color }}">
+  <div class="bd-banner-body">
+    <p class="bd-banner-title">
+      {{ include.title }}
+    </p>
+
+    {{ include.more }}
+  </div>
+</section>

docs/_includes/docs/elements/post.html

@@ -0,0 +1,34 @@
+{% assign date = post.date | date: "%B %-d" %}
+{% assign title = post.title | markdownify %}
+{% assign introduction = post.introduction | markdownify %}
+
+<div class="bd-post {% if post.featured %}is-featured{% endif %}">
+  <a class="bd-post-link" href="{{ site.url }}{{ post.url }}" style="--color: var(--{{ post.color }});">
+    <div class="bd-post-body">
+      <figure class="icon">
+        <i class="{% if post.icon_brand %}fab{% elsif post.icon_regular %}far{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
+      </figure>
+
+      <div class="bd-post-content">
+        <h2 class="title">
+          {{ title }}
+        </h2>
+        <div class="subtitle">
+          {{ introduction }}
+        </div>
+      </div>
+    </div>
+
+    {% if post.image %}
+      <figure class="bd-post-image">
+        <img
+             src="https://source.unsplash.com/{{ post.image }}/400x240"
+          srcset="https://source.unsplash.com/{{ post.image }}/400x240 1x,
+                  https://source.unsplash.com/{{ post.image }}/800x480 2x"
+          alt="{{ post.alt }}"
+          width="400"
+          height="240">
+      </figure>
+    {% endif %}
+  </a>
+</div>

docs/_includes/docs/elements/responsive-image-2x.html

@@ -0,0 +1,7 @@
+<img
+  src="{{ site.url }}/images/{{ include.path }}.{{ include.extension }}"
+  srcset="{{ site.url }}/images/{{ include.path }}.{{ include.extension }} 1x,
+          {{ site.url }}/images/{{ include.path }}@2x.{{ include.extension }} 2x"
+  alt="{{ include.alt }}"
+  width="{{ include.width }}"
+  height="{{ include.height }}">

docs/_includes/docs/elements/responsive-image.html

@@ -0,0 +1,8 @@
+<img
+  src="{{ site.url }}/images/{{ include.path }}.{{ include.extension }}"
+  srcset="{{ site.url }}/images/{{ include.path }}.{{ include.extension }} 1x,
+          {{ site.url }}/images/{{ include.path }}@2x.{{ include.extension }} 2x,
+          {{ site.url }}/images/{{ include.path }}@3x.{{ include.extension }} 3x"
+  alt="{{ include.alt }}"
+  width="{{ include.width }}"
+  height="{{ include.height }}">

docs/_includes/docs/elements/rss-button.html

@@ -0,0 +1,6 @@
+<a class="button is-rss" href="{{ site.url }}/atom.xml">
+  <span class="icon">
+    <i class="fas fa-rss"></i>
+  </span>
+  <span>Subscribe</span>
+</a>

docs/_includes/global/header.html

@@ -4,14 +4,12 @@
   </a>
 
   <nav id="js-nav" class="bd-nav">
-    {% for link_id in site.data.links.navbar %}
-      {% include global/nav-item.html link_id=link_id %}
-    {% endfor %}
+    {% for link_id in site.data.links.navbar %} {% include global/nav-item.html
+    link_id=link_id %} {% endfor %}
 
     <div class="bd-nav-icons">
-      {% for link_id in site.data.links.navbar_icons %}
-        {% include global/nav-item.html link_id=link_id %}
-      {% endfor %}
+      {% for link_id in site.data.links.navbar_icons %} {% include
+      global/nav-item.html link_id=link_id %} {% endfor %}
 
       <button class="bd-nav-item is-search is-icon">
         <span class="icon">
@@ -19,20 +17,27 @@
         </span>
       </button>
 
-      <button class="bd-nav-item is-icon is-ellipsis js-burger" data-target="js-more">
+      <button
+        class="bd-nav-item is-icon is-ellipsis js-burger"
+        data-target="js-more"
+      >
         <span class="icon">
           <i class="fa-solid fa-ellipsis fa-lg"></i>
         </span>
       </button>
 
       <div id="js-more" class="bd-nav-menu is-more js-menu">
-        {% for link_id in site.data.links.navbar_more %}
-          {% include global/nav-item.html link_id=link_id %}
-        {% endfor %}
+        {% for link_id in site.data.links.navbar_more %} {% include
+        global/nav-item.html link_id=link_id %} {% endfor %}
       </div>
     </div>
 
-    <a class="button is-primary bd-nav-mobile-download"> Download </a>
+    <a
+      class="button is-primary bd-nav-mobile-download"
+      href="{{ site.data.meta.download }}"
+    >
+      Download
+    </a>
   </nav>
 
   <div class="bd-nav-themes">
@@ -53,21 +58,33 @@
     </button>
 
     <div id="js-themes" class="bd-nav-menu is-cycles js-menu js-themes">
-      <button data-scheme="light" class="bd-nav-item is-sun" aria-label="Light mode">
+      <button
+        data-scheme="light"
+        class="bd-nav-item is-sun"
+        aria-label="Light mode"
+      >
         <span class="icon">
           <i class="fas fa-sun" aria-hidden="true"></i>
         </span>
         <span>Light</span>
       </button>
 
-      <button data-scheme="dark" class="bd-nav-item is-moon" aria-label="Dark mode">
+      <button
+        data-scheme="dark"
+        class="bd-nav-item is-moon"
+        aria-label="Dark mode"
+      >
         <span class="icon">
           <i class="fas fa-moon" aria-hidden="true"></i>
         </span>
         <span>Dark</span>
       </button>
 
-      <button data-scheme="system" class="bd-nav-item is-system" aria-label="System mode">
+      <button
+        data-scheme="system"
+        class="bd-nav-item is-system"
+        aria-label="System mode"
+      >
         <span class="icon">
           <i class="fas fa-display" aria-hidden="true"></i>
         </span>
@@ -76,19 +93,27 @@
     </div>
   </div>
 
-  <div class="bd-nav-search">
-    <button class="bd-nav-item is-search-desktop is-icon js-burger" data-target="js-search">
+  <div class="bd-nav-search is-hidden">
+    <button
+      class="bd-nav-item is-search-desktop is-icon js-burger"
+      data-target="js-search"
+    >
       <span class="icon">
         <i class="fa-solid fa-magnifying-glass fa-lg"></i>
       </span>
     </button>
 
     <div id="js-search" class="bd-nav-menu is-search js-menu">
-      <input id="form-search" class="input" type="text" placeholder="Search">
+      <input id="form-search" class="input" type="text" placeholder="Search" />
     </div>
   </div>
 
-  <a class="button is-primary bd-nav-desktop-download"> Download </a>
+  <a
+    class="button is-primary bd-nav-desktop-download"
+    href="{{ site.data.meta.download }}"
+  >
+    Download
+  </a>
 
   <button class="navbar-burger bd-nav-burger js-burger" data-target="js-nav">
     <span></span>

docs/_includes/global/navbar.html

@@ -0,0 +1,97 @@
+<nav id="navbar" class="bd-navbar navbar">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="{{ site.url }}">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
+    </a>
+
+    <a class="navbar-item bd-navbar-mobile-icon" href="{{ site.data.meta.github }}" target="_blank">
+      <span class="icon" style="color: var(--github);">
+        <i class="fab fa-lg fa-github-alt"></i>
+      </span>
+    </a>
+
+    <a class="navbar-item bd-navbar-mobile-icon" href="{{ site.data.meta.twitter }}" target="_blank">
+      <span class="icon" style="color: var(--twitter);">
+        <i class="fab fa-lg fa-twitter"></i>
+      </span>
+    </a>
+
+    <div class="navbar-item bd-navbar-mobile-sponsor-icon">
+      <a href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}" class="button is-sponsor is-outlined is-small">
+        <span class="icon">
+          <i class="fas fa-thumbs-up"></i>
+        </span>
+        <span>Sponsor</span>
+      </a>
+    </div>
+
+    <button id="searchIcon" class="navbar-item bd-navbar-search-icon bd-navbar-search-mobile-icon">
+      <span class="icon">
+        <i class="fas fa-lg fa-search"></i>
+      </span>
+    </button>
+
+    <button id="navbarBurger" class="navbar-burger" data-target="navMenu{{ include.id }}">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+  </div>
+
+  <div id="navMenu{{ include.id }}" class="navbar-menu">
+    {% include global/navbar-start.html id="navbarStartOriginal" version="original" %}
+
+    <div class="navbar-end">
+      <a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.github }}" target="_blank">
+        <span class="icon" style="color: var(--github);">
+          <i class="fab fa-lg fa-github-alt"></i>
+        </span>
+      </a>
+
+      <a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.twitter }}" target="_blank">
+        <span class="icon" style="color: var(--twitter);">
+          <i class="fab fa-lg fa-twitter"></i>
+        </span>
+      </a>
+
+      <div class="navbar-item bd-navbar-sponsor-button is-hidden-desktop">
+        <a class="button is-sponsor is-light">
+          <span class="icon is-small">
+            <i class="fas fa-thumbs-up"></i>
+          </span>
+        </a>
+      </div>
+
+      <div class="navbar-item bd-navbar-download-button is-hidden-touch">
+        <a class="button is-primary mr-3" href="{{ site.data.meta.download }}">
+          <span class="icon is-hidden-touch is-hidden-desktop-only">
+            <i class="fas fa-download"></i>
+          </span>
+          <span>Download</span>
+        </a>
+
+        <a href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}" class="button is-sponsor is-light">
+          <span class="icon is-small is-hidden-touch is-hidden-desktop-only">
+            <i class="fas fa-thumbs-up"></i>
+          </span>
+          <span>
+            Sponsor
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div id="search" class="bd-search">
+    <p class="control has-icons-left">
+      <input id="algoliaSearch" class="input is-rounded" type="text" placeholder="Search the docs">
+      <span class="icon is-small is-left">
+        <i class="fas fa-search"></i>
+      </span>
+    </p>
+  </div>
+</nav>
+
+<div class="bd-navbar bd-is-clone">
+  {% include global/navbar-start.html id="navbarStartClone" version="clone" %}
+</div>

docs/_includes/home/intro.html

@@ -108,13 +108,14 @@
   <div class="bd-home-intro-body">
     <div class="bd-home-intro-content">
       <h1 class="bd-home-title js-animated">
-        The Modern<br>
+        The Modern<br />
         CSS Framework
       </h1>
 
       <p class="bd-home-tagline">
-        Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily
-        combine to build responsive web interfaces.
+        Bulma is a free, open source framework that provides ready-to-use
+        frontend components that you can easily combine to build responsive web
+        interfaces.
       </p>
 
       <span class="thing bd-home-knowledge">
@@ -123,13 +124,16 @@
       </span>
 
       <div class="bd-home-buttons buttons is-centered">
-        <span class="button is-primary">
+        <a
+          class="button is-primary"
+          href="{{ site.url }}{{ site.data.meta.documentation }}"
+        >
           <strong>Get Started</strong>
-        </span>
+        </a>
 
-        <span class="button">
+        <a class="button" href="{{ site.data.meta.download }}">
           <strong>Download</strong>
-        </span>
+        </a>
       </div>
 
       <div class="bd-home-features things">