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">
+        <header class="bd-index-header bd-is-left">
-          <span class="icon is-medium">
+          <h3 class="title is-3">
-            <i class="fas fa-cogs"></i>
+            <a href="{{ site.url }}{{ modifiers_link.path }}">
-          </span>
+              So <strong>easy</strong> to learn
-          <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>
+          <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>

docs/_sass/index.sass

@@ -1,13 +1,27 @@
-// Columns
+// Index common
 
-.bd-columns-header
+.bd-index-header
   margin-bottom: 3rem
   text-align: center
+  a
+    color: currentColor
+    &:hover
+      color: $blue
+      strong
+        color: currentColor
+  strong
+    font-weight: $weight-semibold
+  .title
     strong
       color: $primary
-    font-weight: $weight-semibold
   .subtitle
     color: $grey-light
+    strong
+      color: currentColor
+  &.bd-is-left
+    text-align: left
+
+// Columns
 
 #grid
   .notification

docs/_sass/twitter.sass

@@ -1,23 +1,24 @@
 $tw-black: #1c2022
 $tw-blue: #2b7bb9
 $tw-grey: #697882
+$tw-border: #e1e8ed
 
 .bd-tws-home
-  background-color: $background
+  background-color: $white-bis
-  display: flex
-  flex-wrap: wrap
-  overflow: auto
-  padding: 20px
 
 .bd-tw
   background-color: #fff
-  border: 2px solid #e1e8ed
+  border: 2px solid $background
   border-radius: $radius-large
   color: $tw-grey
   flex-shrink: 0
   font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif
   font-size: 16px
+  max-width: 420px
   padding: 20px
+  &.bd-is-grey
+    background-color: $white-bis
+    border: none
 
 .bd-tw-header
   align-items: stretch
@@ -163,7 +164,7 @@ $tw-grey: #697882
 
 .twitter-tweet:not(.twitter-tweet-rendered)
   background-color: $white
-  border: 1px solid #e1e8ed
+  border: 1px solid $tw-border
   border-radius: 5px
   color: $tw-grey
   font-size: 14px

docs/bulma-docs.sass

@@ -46,7 +46,7 @@ $intro-width: 1130px
 @import "./_sass/example"
 @import "./_sass/callout"
 @import "./_sass/bsa"
-@import "./_sass/route"
+// @import "./_sass/route"
 @import "./_sass/twitter"
 @import "./_sass/expo"
 @import "./_sass/love"

docs/css/bulma-docs.css

@@ -10095,20 +10095,43 @@ svg {
   text-decoration: underline;
 }
 
-.bd-columns-header {
+.bd-index-header {
   margin-bottom: 3rem;
   text-align: center;
 }
 
-.bd-columns-header strong {
+.bd-index-header a {
-  color: #00d1b2;
+  color: currentColor;
+}
+
+.bd-index-header a:hover {
+  color: #3273dc;
+}
+
+.bd-index-header a:hover strong {
+  color: currentColor;
+}
+
+.bd-index-header strong {
   font-weight: 600;
 }
 
-.bd-columns-header .subtitle {
+.bd-index-header .title strong {
+  color: #00d1b2;
+}
+
+.bd-index-header .subtitle {
   color: #b5b5b5;
 }
 
+.bd-index-header .subtitle strong {
+  color: currentColor;
+}
+
+.bd-index-header.bd-is-left {
+  text-align: left;
+}
+
 #grid .notification {
   padding-left: 0;
   padding-right: 0;
@@ -11446,64 +11469,27 @@ svg {
   }
 }
 
-html.route-index .title.is-2,
-html.route-index .title.is-3 {
-  position: relative;
-}
-
-html.route-index .title.is-2 a,
-html.route-index .title.is-3 a {
-  color: #363636;
-  position: relative;
-}
-
-html.route-index .title.is-2 a:hover,
-html.route-index .title.is-3 a:hover {
-  color: #3273dc;
-}
-
-html.route-index .hero .title.is-2 a {
-  color: white;
-}
-
-html.route-index .hero .title.is-2 a:hover {
-  color: white;
-}
-
-html.route-index .hero.is-primary a.column,
-html.route-index .hero.is-primary a.column:hover {
-  color: white;
-}
-
-html.route-index .hero.is-primary a.column:hover .title strong {
-  border-bottom: 1px solid;
-}
-
-@media screen and (max-width: 979px) {
-  html.route-index .title.is-2 a {
-    padding-left: 0;
-  }
-}
-
 .bd-tws-home {
-  background-color: whitesmoke;
+  background-color: #fafafa;
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-  padding: 20px;
 }
 
 .bd-tw {
   background-color: #fff;
-  border: 2px solid #e1e8ed;
+  border: 2px solid whitesmoke;
   border-radius: 6px;
   color: #697882;
   flex-shrink: 0;
   font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif;
   font-size: 16px;
+  max-width: 420px;
   padding: 20px;
 }
 
+.bd-tw.bd-is-grey {
+  background-color: #fafafa;
+  border: none;
+}
+
 .bd-tw-header {
   align-items: stretch;
   display: flex;

docs/index.html

@@ -9,9 +9,12 @@ fixed_navbar: true
 {% include index/sponsor.html %}
 {% include index/columns.html %}
 {% include index/tws.html %}
+{% include index/modifiers.html %}
+<hr>
+{% include index/customize.html %}
 <!-- {% include index/tiles.html %} -->
-{% include index/level.html %}
+<!-- {% include index/level.html %} -->
-{% include index/media-object.html %}
+<!-- {% include index/media-object.html %} -->
 {% include index/fullheight.html %}
 <!-- {% include index/usual.html %} -->
 <!-- {% include index/features.html %} -->