More index sections

diff --git a/docs/_includes/elements/tw.html b/docs/_includes/elements/tw.html
index f2fcbdcc5d52ff31fcc39cc5085f1a1a793f2fb8..70f16378f7dd230dc362ec5f08297ec48a1356c1 100644 (file)
--- a/docs/_includes/elements/tw.html
+++ b/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">

diff --git a/docs/_includes/elements/tws.html b/docs/_includes/elements/tws.html
index 55e5d3cd77bc0b47758ebae6ffb65f3b23481b29..942913fd88491ae8be52b18fbc2921c090bb5023 100644 (file)
--- a/docs/_includes/elements/tws.html
+++ b/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>

diff --git a/docs/_includes/index/columns.html b/docs/_includes/index/columns.html
index 8aa126b7f18d44cae2923cf0d6c58d99af8d7cbe..4907a381fdbce9fd09169edb0b2af7ef07a25a60 100644 (file)
--- a/docs/_includes/index/columns.html
+++ b/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

diff --git a/docs/_includes/index/customize.html b/docs/_includes/index/customize.html
new file mode 100644 (file)
index 0000000..621f344
--- /dev/null
+++ b/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>

diff --git a/docs/_includes/index/fullheight.html b/docs/_includes/index/fullheight.html
index 79dd934360fa5efe73e115e97c72832a1b64647a..6d32da900f9794e951ceb73138aea3b07a62672e 100644 (file)
--- a/docs/_includes/index/fullheight.html
+++ b/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>

diff --git a/docs/_includes/index/modifiers.html b/docs/_includes/index/modifiers.html
index 32eede46073767d7f660f4d58e5059e0d2354d8d..86a92cf0486f31fe1851c3db3df84559e9249f30 100644 (file)
--- a/docs/_includes/index/modifiers.html
+++ b/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">

diff --git a/docs/_includes/index/start.html b/docs/_includes/index/start.html
index fbbe19ffb5577af1e4ad8ae0574655c9e9b4436d..fb933cc84aa7594a4797ff4ac0d90ad8394cd10b 100644 (file)
--- a/docs/_includes/index/start.html
+++ b/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">

diff --git a/docs/_includes/index/tws.html b/docs/_includes/index/tws.html
index de1cf176695aa19804729521fd21ed4fb35de997..31bb7711af2e76b36af01a7a75eefafb1496da06 100644 (file)
--- a/docs/_includes/index/tws.html
+++ b/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>

diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass
index 2378bf6d5c73bb9492175bd8dbf5eb9cd1c8f805..a304de39ebfb26f509c0cab48a0f29d887a01936 100644 (file)
--- a/docs/_sass/index.sass
+++ b/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
-    color: $primary
     font-weight: $weight-semibold
+  .title
+    strong
+      color: $primary
   .subtitle
     color: $grey-light
+    strong
+      color: currentColor
+  &.bd-is-left
+    text-align: left
+
+// Columns
 
 #grid
   .notification

diff --git a/docs/_sass/twitter.sass b/docs/_sass/twitter.sass
index b837a51090c04297da956835b572eea50f9cf7e5..4d7683f1b0657569fc94b5dcb80f353507b8ad3e 100644 (file)
--- a/docs/_sass/twitter.sass
+++ b/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
-  display: flex
-  flex-wrap: wrap
-  overflow: auto
-  padding: 20px
+  background-color: $white-bis
 
 .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

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index f0b6356240183e9c089ba064743d5144979a26b9..00ed3a5ed14d62b5008dc8a431586ef27ecbed9f 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/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"

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 1b45110a12689e9b01031f93e219881693fcc44d..f8f21f3f1ff46382e6d05b98acd9fe90d97a1e29 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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 {
-  color: #00d1b2;
+.bd-index-header a {
+  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;
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-  padding: 20px;
+  background-color: #fafafa;
 }
 
 .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;

diff --git a/docs/index.html b/docs/index.html
index 271e053244f2657936644c5d4953d5967574fe37..8118c99f30a3bc394c1542dc2773c3e78593bf28 100644 (file)
--- a/docs/index.html
+++ b/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/media-object.html %}
+<!-- {% include index/level.html %} -->
+<!-- {% include index/media-object.html %} -->
 {% include index/fullheight.html %}
 <!-- {% include index/usual.html %} -->
 <!-- {% include index/features.html %} -->