More index sections

docs/_includes/elements/tw.html

@@ -1,6 +1,6 @@
 {% assign twUrl = "https://twitter.com/" | append: include.tweet.username | append: "/status/" | append: include.tweet.id %}
 
-<article class="bd-tw">
+<article class="bd-tw {{ include.modifier }}">
   <header class="bd-tw-header">
     <a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
       <figure class="bd-tw-avatar">

docs/_includes/elements/tws.html

@@ -24,7 +24,7 @@
 
   <div class="bd-more-loves">
     <p class="bd-more-loves-container">
-      <a class="button is-medium is-danger bd-rainbow" href="{{ site.url }}/love/">
+      <a class="button is-medium is-danger bd-rainbow" href="{{ love_url }}">
         <span>See more <strong>love</strong> 🤗</span>
       </a>
     </p>

docs/_includes/index/columns.html

@@ -12,7 +12,7 @@
 
 <section class="bd-columns section is-medium">
   <div class="container">
-    <header class="bd-columns-header">
+    <header class="bd-index-header">
       <h3 class="title is-3">
         <a href="{{ site.url }}{{ columns_link.path }}">
           The <strong>simplest</strong> grid system

docs/_includes/index/customize.html

@@ -0,0 +1,55 @@
+{% assign customize_link = site.data.links.by_id['overview-customize'] %}
+
+<section class="bd-easy section is-medium">
+  <div class="container">
+    <div class="columns is-vcentered">
+      <div class="column">
+        <header class="bd-index-header bd-is-left">
+          <h3 class="title is-3">
+            <a href="{{ site.url }}{{ customize_link.path }}">
+              So <strong>quick</strong> to customize
+            </a>
+          </h3>
+          <h4 class="subtitle is-4">
+            Simply set your own Sass variables before importing Bulma
+          </h4>
+        </header>
+      </div>
+
+      <div class="column">
+        <div class="block">
+          <div class="field">
+            <p class="control">
+              <code>button</code>
+            </p>
+          </div>
+          <a class="button">Button</a>
+        </div>
+        <div class="block">
+          <div class="field">
+            <p class="control">
+              <code>button is-primary</code>
+            </p>
+          </div>
+          <a class="button is-primary">Button</a>
+        </div>
+        <div class="block">
+          <div class="field">
+            <p class="control">
+              <code>button is-primary is-large</code>
+            </p>
+          </div>
+          <a class="button is-primary is-large">Button</a>
+        </div>
+        <div class="block">
+          <div class="field">
+            <p class="control">
+              <code>button is-primary is-large is-loading</code>
+            </p>
+          </div>
+          <a class="button is-primary is-large is-loading">Button</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/index/fullheight.html

@@ -13,7 +13,7 @@
     <div class="container has-text-centered">
       <h3 class="title is-2">
         <span class="icon is-medium">
-          <i class="fas fa-arrows-v"></i>
+          <i class="fas fa-arrows-alt-v"></i>
         </span>
         <a href="{{ site.url }}/documentation/layout/hero/">
           Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>

docs/_includes/index/modifiers.html

@@ -1,17 +1,26 @@
-<section class="section is-medium">
+{% assign modifiers_link = site.data.links.by_id['modifiers-syntax'] %}
+
+<section class="bd-easy section is-medium">
   <div class="container">
     <div class="columns is-vcentered">
       <div class="column">
-        <h3 class="title is-2">
-          <span class="icon is-medium">
-            <i class="fas fa-cogs"></i>
-          </span>
-          <a href="{{ site.url }}/documentation/modifiers/syntax/" style="display: block;">
-            Compose your element with <strong>modifier</strong> classes
-          </a>
-        </h3>
-        <h4 class="subtitle is-4">Add and combine <code>is-*</code> CSS classes to quickly alter styles</h4>
+        <header class="bd-index-header bd-is-left">
+          <h3 class="title is-3">
+            <a href="{{ site.url }}{{ modifiers_link.path }}">
+              So <strong>easy</strong> to learn
+            </a>
+          </h3>
+          <h4 class="subtitle is-4">
+            Get a design started within minutes
+          </h4>
+        </header>
+
+        <div class="bd-easy-tweet">
+          {% assign tweet = site.data.love.tweetsById.868829487072464897 %}
+          {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
+        </div>
       </div>
+
       <div class="column">
         <div class="block">
           <div class="field">

docs/_includes/index/start.html

@@ -1,12 +1,22 @@
-<section class="section is-medium">
+{% assign docs_link = site.data.links.by_id['documentation'] %}
+{% assign docs_url = site.url | append: docs_link.path %}
+
+<section class="section is-large">
   <div class="container">
-    <p class="title has-text-centered">Get started</p>
+    <header class="bd-index-header">
+      <h3 class="title is-3">
+        <a href="{{ docs_url }}">
+          Get started
+        </a>
+      </h3>
+    </header>
+
     <div class="hero-buttons">
-      <a class="button is-link is-large" href="{{ site.data.meta.documentation }}">
+      <a class="button is-link is-large" href="{{ docs_url }}">
         <span class="icon">
           <i class="fas fa-book"></i>
         </span>
-        <span>Check the <strong>docs</strong></span>
+        <span>Read the <strong>docs</strong></span>
       </a>
       <a class="button is-black is-large" href="{{ site.data.meta.github }}">
         <span class="icon">

docs/_includes/index/tws.html

@@ -1,3 +1,17 @@
-<section class="bd-tws-home">
+{% assign love_link = site.data.links.by_id['love'] %}
+{% assign love_url = site.url | append: love_link.path %}
+
+<section class="bd-tws-home section is-medium">
+  <header class="bd-index-header">
+    <h3 class="title is-3">
+      <a href="{{ love_url }}">
+        A growing <strong>community</strong>
+      </a>
+    </h3>
+    <h4 class="subtitle is-4">
+      See what <strong>Bulma fans</strong> are saying
+    </h4>
+  </header>
+
   {% include elements/tws.html %}
 </section>