Add JS

diff --git a/docs/_data/love.json b/docs/_data/love.json
index 42d4d79ec76deed25f010ab2df989741c1f0113a..c60330445d1bb186471e5f948a1092cb632dfb58 100644 (file)
--- a/docs/_data/love.json
+++ b/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"
   ]
-}
\ No newline at end of file
+}

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

diff --git a/docs/_includes/global/head.html b/docs/_includes/global/head.html
index 29ce1e02c2fb71988e7389953be449c9bdfb8e27..39fba8bc0be38e93a6ed9d92f12c6f5301116422 100644 (file)
--- a/docs/_includes/global/head.html
+++ b/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 }}">

diff --git a/docs/_includes/global/scripts.html b/docs/_includes/global/scripts.html
index 42cd1b0406bc0c210ee8938b644b3557f60c5652..c4241cfd288070d25dcad921253ce4bb0f4a8451 100644 (file)
--- a/docs/_includes/global/scripts.html
+++ b/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>

diff --git a/docs/_includes/index/focus.html b/docs/_includes/index/focus.html
index f987e501a6359a6473b79e831f581583de6c0ae0..4282477d28a0370d5716344a1b50e5658a23cdfc 100644 (file)
--- a/docs/_includes/index/focus.html
+++ b/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>

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

diff --git a/docs/_includes/index/modifiers.html b/docs/_includes/index/modifiers.html
index 86a92cf0486f31fe1851c3db3df84559e9249f30..f679faff377df4fa112196c0f41918240bfc6ee7 100644 (file)
--- a/docs/_includes/index/modifiers.html
+++ b/docs/_includes/index/modifiers.html
@@ -15,10 +15,8 @@
           </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>
+        {% assign tweet = site.data.love.tweetsById.868829487072464897 %}
+        {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
       </div>
 
       <div class="column">

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

diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass
index e01572fe2fe189d3797d3cbf76afa5a2ce69225f..c5d0bd1ce5a5fda756a64e293ad96f5cad75b6d8 100644 (file)
--- a/docs/_sass/index.sass
+++ b/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

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index 949839548643591c45e9208bc1815c6cfe128412..6a260f4760550853f2dd9c2bacaf23d636388116 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/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

diff --git a/docs/_sass/sponsors.sass b/docs/_sass/sponsors.sass
index 8556a6453a183efcace2a49f98f20d1221353ff1..6659cd018bd2cafc26220483d3e87b7f74f1a9f0 100644 (file)
--- a/docs/_sass/sponsors.sass
+++ b/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

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index f43e6a9359bc9339e1ba89225fcbc1a2a803c26d..0477776d07a8793d7a5c3a7671fd0c845a1c0adf 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/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

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index b7ee680c3a94fe03a76ad0501d9eaa967fc1e734..24715d72424fd1e440c3836fffa72f8d01b5c7ee 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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;
 }

diff --git a/docs/images/index/js-frameworks.png b/docs/images/index/js-frameworks.png
new file mode 100644 (file)
index 0000000..5db9084
Binary files /dev/null and b/docs/images/index/js-frameworks.png differ

diff --git a/docs/index.html b/docs/index.html
index 8118c99f30a3bc394c1542dc2773c3e78593bf28..dd1e03034005c3cb20c4757207336362b3e02b1b 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,10 +12,7 @@ fixed_navbar: true
 {% include index/modifiers.html %}
 <hr>
 {% include index/customize.html %}
-<!-- {% include index/tiles.html %} -->
-<!-- {% include index/level.html %} -->
-<!-- {% include index/media-object.html %} -->
+<hr>
+{% include index/js.html %}
 {% include index/fullheight.html %}
-<!-- {% include index/usual.html %} -->
-<!-- {% include index/features.html %} -->
 {% include index/start.html %}