Add JS

docs/_data/love.json

@@ -83,7 +83,7 @@
     "835834634655174658": {
       "id": "835834634655174658",
       "date": "12:51 PM - 26 Feb 2017",
-      "content": "<a href=\"https://t.co/ClYmBd8tGR\">bulma.io</a> is an impressive CSS framework.  Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯 <a href=\"https://twitter.com/jgthms\">@jgthms</a>s.",
+      "content": "<a href=\"https://t.co/ClYmBd8tGR\">bulma.io</a> is an impressive CSS framework.  Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯 <a href=\"https://twitter.com/jgthms\">@jgthms</a>.",
       "fullname": "scottgallant",
       "username": "scottgallant",
       "avatar": "https://pbs.twimg.com/profile_images/737847066030936064/1yHqQT-h_normal.jpg",
@@ -693,7 +693,7 @@
     "915580081938018304": {
       "id": "915580081938018304",
       "date": "3:11 PM - 4 Oct 2017",
-      "content": "Best css framework, amazing implementation. No idea how I lived without this.<br><a href=\"https://t.co/FhBPLhWVIU\">bulma.io</a> <a href=\"https://twitter.com/search?q=%23bulmaio\">#bulmaio</a> via <a href=\"https://twitter.com/jgthms\">@jgthms</a>",
+      "content": "Best css framework, amazing implementation. No idea how I lived without this.",
       "fullname": "Juan Carlos Andreu",
       "username": "andreujuanc",
       "avatar": "https://pbs.twimg.com/profile_images/530443756114153472/nSmN8eUj_normal.jpeg",
@@ -1281,4 +1281,4 @@
     "963476902324391937",
     "966731525709619200"
   ]
-}
+}

docs/_includes/elements/tws.html

@@ -1,21 +1,18 @@
 <div class="container">
   <div class="columns">
     <div class="column is-4">
-      {% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include elements/tw.html tweet=tweet%}
+      {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include elements/tw.html tweet=tweet%}
       {% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include elements/tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include elements/tw.html tweet=tweet%}
       {% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include elements/tw.html tweet=tweet%}
     </div>
 
     <div class="column is-4">
       {% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include elements/tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include elements/tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include elements/tw.html tweet=tweet%}
       {% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include elements/tw.html tweet=tweet%}
+      {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include elements/tw.html tweet=tweet%}
     </div>
 
     <div class="column is-4">
-      {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include elements/tw.html tweet=tweet%}
       {% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include elements/tw.html tweet=tweet%}
       {% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include elements/tw.html tweet=tweet%}
       {% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include elements/tw.html tweet=tweet%}

docs/_includes/global/head.html

@@ -18,9 +18,6 @@
   {% if page.mdi %}
     <link rel="stylesheet" href="{{ site.data.icons.mdi }}">
   {% endif %}
-  {% if page.route == 'index' %}
-    <link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
-  {% endif %}
   <link rel="stylesheet" href="{{ site.url }}/css/{{ site.docs_file }}.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">

docs/_includes/global/scripts.html

@@ -3,8 +3,21 @@
 <script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
 
 {% if page.route == 'index' %}
-  <script src="https://player.vimeo.com/api/player.js"></script>
+  <script src="https://player.vimeo.com/api/player.js" ></script>
   <script type="text/javascript" src="{{ site.url }}/lib/index.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
+  <script>
+    WebFont.load({
+      google: {
+        families: ['Nunito:400,700']
+      }
+    });
+    (function(d) {
+      var wf = d.createElement('script'), s = d.scripts[0];
+      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
+      wf.async = true;
+      s.parentNode.insertBefore(wf, s);
+   })(document);
+  </script>
 {% elsif page.doc-subtab == 'navbar' %}
   {% include examples/navbar-bottom.html %}
   <script type="text/javascript" src="{{ site.url }}/lib/navbar.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>

docs/_includes/index/focus.html

@@ -1,6 +1,10 @@
+{% assign responsiveness_link = site.data.links.by_id['overview-responsiveness'] %}
+{% assign modularity_link = site.data.links.by_id['overview-modular'] %}
+{% assign columns_link = site.data.links.by_id['columns-basics'] %}
+
 <div class="bd-focus">
   <nav class="columns">
-    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/overview/responsiveness/">
+    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ responsiveness_link.path }}">
       <p class="title is-4">
         <strong>100% Responsive</strong>
       </p>
@@ -18,7 +22,7 @@
       </figure>
     </a>
 
-    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/overview/modular/">
+    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ modularity_link.path }}">
       <p class="title is-4">
         <strong>Modular</strong>
       </p>
@@ -32,7 +36,7 @@
       </figure>
     </a>
 
-    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/columns/basics/">
+    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ columns_link.path }}">
       <p class="title is-4">
         <strong>Modern</strong>
       </p>
@@ -46,7 +50,7 @@
       </figure>
     </a>
 
-    <a class="bd-focus-item column has-text-centered" href="{{ site.data.meta.github }}">
+    <a class="bd-focus-item column has-text-centered" href="{{ site.data.meta.github }}" target="_blank">
       <p class="title is-4">
         <strong>Free</strong>
       </p>

docs/_includes/index/js.html

@@ -0,0 +1,28 @@
+{% assign css_only_link = site.data.links.by_id['overview-classes'] %}
+
+<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 }}{{ css_only_link.path }}">
+              No <strong>JavaScript</strong> required
+            </a>
+          </h3>
+          <h4 class="subtitle is-4">
+            CSS only, so it integrates in any JS environment
+          </h4>
+          <img src="{{ site.url }}/images/index/js-frameworks.png" width="568" height="91">
+        </header>
+      </div>
+
+      <div class="column">
+        <div class="bd-index-js-tweet">
+          {% assign tweet = site.data.love.tweetsById.860885116909998080 %}
+          {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/index/modifiers.html

@@ -15,10 +15,8 @@
           </h4>
         </header>
 
-        <div class="bd-easy-tweet">
+        {% assign tweet = site.data.love.tweetsById.868829487072464897 %}
-          {% assign tweet = site.data.love.tweetsById.868829487072464897 %}
+        {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
-          {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
-        </div>
       </div>
 
       <div class="column">

docs/_includes/index/start.html

@@ -18,7 +18,7 @@
         </span>
         <span>Read the <strong>docs</strong></span>
       </a>
-      <a class="button is-black is-large" href="{{ site.data.meta.github }}">
+      <a class="button is-black is-large" href="{{ site.data.meta.github }}" target="_blank">
         <span class="icon">
           <i class="fab fa-github"></i>
         </span>

docs/_sass/index.sass

@@ -1,7 +1,6 @@
 // Index common
 
 .bd-index-header
-  margin-bottom: 3rem
   text-align: center
   a
     color: currentColor
@@ -18,9 +17,18 @@
     color: $grey-light !important
     strong
       color: currentColor
+  &:not(:last-child)
+    margin-bottom: 3rem
   &.bd-is-left
     text-align: left
 
+// JS
+
+.bd-index-js-tweet
+  .bd-tw
+    margin-left: auto
+    margin-right: auto
+
 // Customize
 
 .bd-index-custom-title
@@ -72,6 +80,9 @@
         background-color: darken($pink, 2.5%)
       &:active
         background-color: darken($pink, 5%)
+  +selection
+    background-color: $pink
+    color: $white
 
 // Fullscreen
 
@@ -129,10 +140,21 @@
   max-width: $intro-width
 
 .bd-focus-item
+  border-radius: $radius-large
+  padding-top: 1.25rem
+  transition-duration: $speed * 2
+  transition-property: background-color
   .subtitle
     color: $grey-light
     strong
       color: currentColor
+  .title
+    transition-duration: $speed * 2
+    transition-property: color
+  &:hover
+    background-color: $white-bis
+    .title
+      color: $link
 
 .bd-focus-icon
   .fa-mobile-alt

docs/_sass/specific.sass

@@ -11,6 +11,8 @@
   display: block
   font-size: $size-5
   padding: 1rem 3rem 1.5rem
+  transition-duration: $speed
+  transition-property: background-color, color
   strong
     font-weight: $weight-semibold
   &:hover

docs/_sass/sponsors.sass

@@ -22,8 +22,6 @@
 
 .bd-partners
   background-color: $white-bis
-  .container
-    max-width: $intro-width
   #carbonads
     .carbon-text
       padding-bottom: 0

docs/bulma-docs.sass

@@ -21,7 +21,7 @@ $beige-lighter: #EFF0EB;
 $carbon-width: 300px
 $carbon-height: 100px
 $main-spacing: 3rem
-$intro-width: 1130px
+$intro-width: 1080px
 
 %center
   align-items: center

docs/css/bulma-docs.css

@@ -10096,7 +10096,6 @@ svg {
 }
 
 .bd-index-header {
-  margin-bottom: 3rem;
   text-align: center;
 }
 
@@ -10128,10 +10127,19 @@ svg {
   color: currentColor;
 }
 
+.bd-index-header:not(:last-child) {
+  margin-bottom: 3rem;
+}
+
 .bd-index-header.bd-is-left {
   text-align: left;
 }
 
+.bd-index-js-tweet .bd-tw {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .bd-index-custom-title {
   color: #b5b5b5;
 }
@@ -10212,6 +10220,16 @@ svg {
   background-color: #f9637c;
 }
 
+.bd-index-custom.bd-is-after ::-moz-selection {
+  background-color: #FA7C91;
+  color: white;
+}
+
+.bd-index-custom.bd-is-after ::selection {
+  background-color: #FA7C91;
+  color: white;
+}
+
 .bd-index-fullscreen .tabs a {
   color: #b5b5b5 !important;
 }
@@ -10267,7 +10285,14 @@ svg {
 
 .bd-focus {
   margin: 6rem auto 0;
-  max-width: 1130px;
+  max-width: 1080px;
+}
+
+.bd-focus-item {
+  border-radius: 6px;
+  padding-top: 1.25rem;
+  transition-duration: 172ms;
+  transition-property: background-color;
 }
 
 .bd-focus-item .subtitle {
@@ -10278,6 +10303,19 @@ svg {
   color: currentColor;
 }
 
+.bd-focus-item .title {
+  transition-duration: 172ms;
+  transition-property: color;
+}
+
+.bd-focus-item:hover {
+  background-color: #fafafa;
+}
+
+.bd-focus-item:hover .title {
+  color: #3273dc;
+}
+
 .bd-focus-icon .fa-mobile-alt {
   color: #b86bff;
   margin-right: -20px;
@@ -10737,6 +10775,8 @@ svg {
   display: block;
   font-size: 1.25rem;
   padding: 1rem 3rem 1.5rem;
+  transition-duration: 86ms;
+  transition-property: background-color, color;
 }
 
 .bd-link strong {
@@ -12304,10 +12344,6 @@ svg {
   background-color: #fafafa;
 }
 
-.bd-partners .container {
-  max-width: 1130px;
-}
-
 .bd-partners #carbonads .carbon-text {
   padding-bottom: 0;
 }

docs/index.html

@@ -12,10 +12,7 @@ fixed_navbar: true
 {% include index/modifiers.html %}
 <hr>
 {% include index/customize.html %}
-<!-- {% include index/tiles.html %} -->
+<hr>
-<!-- {% include index/level.html %} -->
+{% include index/js.html %}
-<!-- {% include index/media-object.html %} -->
 {% include index/fullheight.html %}
-<!-- {% include index/usual.html %} -->
-<!-- {% include index/features.html %} -->
 {% include index/start.html %}