Add focus

docs/_includes/index/focus.html

@@ -0,0 +1,63 @@
+<div class="bd-focus">
+  <nav class="columns">
+    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/overview/responsiveness/">
+      <p class="title is-4">
+        <strong>100% Responsive</strong>
+      </p>
+      <p class="subtitle is-6">Designed for <strong>mobile</strong> first</p>
+      <figure class="bd-focus-icon">
+        <span class="icon is-large">
+          <i class="fas fa-lg fa-mobile-alt"></i>
+        </span>
+        <span class="icon is-large">
+          <i class="fas fa-2x fa-tablet-alt"></i>
+        </span>
+        <span class="icon is-large">
+          <i class="fas fa-3x fa-desktop"></i>
+        </span>
+      </figure>
+    </a>
+
+    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/overview/modular/">
+      <p class="title is-4">
+        <strong>Modular</strong>
+      </p>
+      <p class="subtitle is-6">
+        Just import what you <strong>need</strong>
+      </p>
+      <figure class="bd-focus-icon">
+        <span class="icon is-large">
+          <i class="fas fa-3x fa-cubes"></i>
+        </span>
+      </figure>
+    </a>
+
+    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/columns/basics/">
+      <p class="title is-4">
+        <strong>Modern</strong>
+      </p>
+      <p class="subtitle is-6">
+        Built with <strong>Flexbox</strong>
+      </p>
+      <figure class="bd-focus-icon">
+        <span class="icon is-large">
+          <i class="fab fa-3x fa-css3"></i>
+        </span>
+      </figure>
+    </a>
+
+    <a class="bd-focus-item column has-text-centered" href="{{ site.data.meta.github }}">
+      <p class="title is-4">
+        <strong>Free</strong>
+      </p>
+      <p class="subtitle is-6">
+        Open source on <strong>GitHub</strong>
+      </p>
+      <figure class="bd-focus-icon">
+        <span class="icon is-large">
+          <i class="fab fa-3x fa-github-alt"></i>
+        </span>
+      </figure>
+    </a>
+  </nav>
+</div>

docs/_includes/index/intro.html

@@ -48,14 +48,7 @@
         </div>
       </div>
 
-      <div class="intro-partners">
-        <div class="intro-sponsor">
-          {% include index/sponsor.html %}
-        </div>
-        <div class="intro-carbon">
-          {% include elements/carbon.html %}
-        </div>
-      </div>
+      {% include index/focus.html %}
     </div>
   </div>
 </section>

docs/_includes/index/sponsor.html

@@ -1,38 +1,44 @@
-<div class="bd-sponsor">
-  <p class="bd-sponsor-title">Sponsors</p>
-  <div class="bd-sponsor-list">
-    <a href="https://themeisle.com/" target="_blank" rel="nofollow">
-      <img src="{{ site.url }}/images/sponsors/themeisle.png" alt="themeisle logo">
-    </a>
-    <a href="https://chainaxe.io/" target="_blank" rel="nofollow">
-      {%
-        include elements/responsive-image.html
-        path="sponsors/chainaxe"
-        extension="png"
-        alt="chainaxe logo"
-        width="99"
-        height="70"
-      %}
-    </a>
-    <a href="https://www.keycdn.com/" target="_blank" rel="nofollow">
-      {%
-        include elements/responsive-image.html
-        path="sponsors/keycdn"
-        extension="png"
-        alt="keycdn logo"
-        width="200"
-        height="58"
-      %}
-    </a>
-    <a href="http://tooltwist.com/" target="_blank" rel="nofollow">
-      {%
-        include elements/responsive-image.html
-        path="sponsors/tooltwist"
-        extension="png"
-        alt="tooltwist logo"
-        width="200"
-        height="64"
-      %}
-    </a>
+<div class="intro-partners">
+  <div class="intro-sponsor">
+    <div class="bd-sponsor">
+    <p class="bd-sponsor-title">Sponsors</p>
+    <div class="bd-sponsor-list">
+      <a href="https://themeisle.com/" target="_blank" rel="nofollow">
+        <img src="{{ site.url }}/images/sponsors/themeisle.png" alt="themeisle logo">
+      </a>
+      <a href="https://chainaxe.io/" target="_blank" rel="nofollow">
+        {%
+          include elements/responsive-image.html
+          path="sponsors/chainaxe"
+          extension="png"
+          alt="chainaxe logo"
+          width="99"
+          height="70"
+        %}
+      </a>
+      <a href="https://www.keycdn.com/" target="_blank" rel="nofollow">
+        {%
+          include elements/responsive-image.html
+          path="sponsors/keycdn"
+          extension="png"
+          alt="keycdn logo"
+          width="200"
+          height="58"
+        %}
+      </a>
+      <a href="http://tooltwist.com/" target="_blank" rel="nofollow">
+        {%
+          include elements/responsive-image.html
+          path="sponsors/tooltwist"
+          extension="png"
+          alt="tooltwist logo"
+          width="200"
+          height="64"
+        %}
+      </a>
+    </div>
+  </div>
+  <div class="intro-carbon">
+    {% include elements/carbon.html %}
   </div>
 </div>

docs/_layouts/post.html

@@ -76,6 +76,20 @@ breadcrumb:
             {{ content }}
           </div>
         </div>
+
+        <nav class="bd-prev-next-bis">
+          {% if page.previous.url %}
+            <a class="bd-prev-next-bis-previous" href="{{ page.previous.url }}">
+              ← {{ page.previous.title }}
+            </a>
+          {% endif %}
+
+          {% if page.next.url %}
+            <a class="bd-prev-next-bis-next" href="{{ page.next.url }}">
+              {{ page.next.title }} →
+            </a>
+          {% endif %}
+        </nav>
       </div>
 
       <aside class="bd-side">

docs/_sass/example.sass

@@ -5,7 +5,7 @@
   position: relative
   &::before
     background: $yellow
-    border-radius: $radius $radius 0 0
+    border-radius: $radius-small $radius-small 0 0
     bottom: 100%
     color: $yellow-invert
     content: "Example"
@@ -53,6 +53,7 @@
     content: "Snippet"
     align-items: stretch
     display: flex
+    margin-left: -1px
 
 .bd-snippet-preview
   padding: 1.5rem

docs/_sass/index.sass

@@ -1,3 +1,32 @@
+.bd-focus
+  margin: 6rem auto 0
+  max-width: 1080px
+
+.bd-focus-item
+  .subtitle
+    color: $grey-light
+    strong
+      color: currentColor
+
+.bd-focus-icon
+  .fa-mobile-alt
+    color: $purple
+    margin-right: -20px
+  .fa-tablet-alt
+    color: $red
+    margin-left: -20px
+  .fa-desktop
+    color: $orange
+    margin-left: -20px
+    position: relative
+    top: 2px
+  .fa-cubes
+    color: $green
+  .fa-css3
+    color: $blue
+  .fa-github-alt
+    color: $github
+
 .intro-content
   margin-left: auto
   margin-right: auto

docs/_sass/main.sass

@@ -50,7 +50,6 @@
   padding-bottom: $main-spacing
   .subtitle
     color: $text-light
-    max-width: 16em
     strong
       color: currentColor
   #meta
@@ -155,6 +154,8 @@ $sidebar-width: 14rem
   .bd-lead
     margin-left: -3rem
     padding: 3rem
+    &:last-child
+      margin-right: -3rem
   .bd-header
     align-items: center
     display: flex
@@ -165,7 +166,7 @@ $sidebar-width: 14rem
   .bd-header-carbon
     flex-grow: 0
     flex-shrink: 0
-    margin: -15px 0 -15px $main-spacing
+    margin: -15px 0 -15px ($main-spacing * 2)
     width: $carbon-width
   .bd-side
     padding: 3rem 0 3rem 1.5rem

docs/_sass/specific.sass

@@ -90,23 +90,23 @@
 .bd-has-text-star
   color: $star
 
-$navbar-items: ("documentation": $primary, "templates": $info, "videos": $success, "blog": $rss, "expo": $star, "love": $red)
-
-@each $name, $color in $navbar-items
-  .bd-navbar-item-#{$name}
-    .icon
-      color: $color
-    &:hover
-      background-color: $color !important
-      color: #fff !important
-      .icon
-        color: currentColor !important
-
-.bd-navbar-item-expo
-  &:hover
-    color: #8F6900 !important
-    .icon
-      color: #F4B300 !important
+// $navbar-items: ("documentation": $primary, "templates": $info, "videos": $success, "blog": $rss, "expo": $star, "love": $red)
+
+// @each $name, $color in $navbar-items
+//   .bd-navbar-item-#{$name}
+//     .icon
+//       color: $color
+//     &:hover
+//       background-color: $color !important
+//       color: #fff !important
+//       .icon
+//         color: currentColor !important
+
+// .bd-navbar-item-expo
+//   &:hover
+//     color: #8F6900 !important
+//     .icon
+//       color: #F4B300 !important
 
 .bd-special-shadow
   background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))

docs/css/bulma-docs.css

@@ -9552,7 +9552,6 @@ label.panel-block:hover {
 
 .bd-header .subtitle {
   color: #7a7a7a;
-  max-width: 16em;
 }
 
 .bd-header .subtitle strong {
@@ -9687,6 +9686,9 @@ label.panel-block:hover {
     margin-left: -3rem;
     padding: 3rem;
   }
+  .bd-lead:last-child {
+    margin-right: -3rem;
+  }
   .bd-header {
     align-items: center;
     display: flex;
@@ -9699,7 +9701,7 @@ label.panel-block:hover {
   .bd-header-carbon {
     flex-grow: 0;
     flex-shrink: 0;
-    margin: -15px 0 -15px 3rem;
+    margin: -15px 0 -15px 6rem;
     width: 300px;
   }
   .bd-side {
@@ -10086,6 +10088,48 @@ svg {
   text-decoration: underline;
 }
 
+.bd-focus {
+  margin: 6rem auto 0;
+  max-width: 1080px;
+}
+
+.bd-focus-item .subtitle {
+  color: #b5b5b5;
+}
+
+.bd-focus-item .subtitle strong {
+  color: currentColor;
+}
+
+.bd-focus-icon .fa-mobile-alt {
+  color: #b86bff;
+  margin-right: -20px;
+}
+
+.bd-focus-icon .fa-tablet-alt {
+  color: #ff3860;
+  margin-left: -20px;
+}
+
+.bd-focus-icon .fa-desktop {
+  color: #ff470f;
+  margin-left: -20px;
+  position: relative;
+  top: 2px;
+}
+
+.bd-focus-icon .fa-cubes {
+  color: #23d160;
+}
+
+.bd-focus-icon .fa-css3 {
+  color: #3273dc;
+}
+
+.bd-focus-icon .fa-github-alt {
+  color: #333333;
+}
+
 .intro-content {
   margin-left: auto;
   margin-right: auto;
@@ -10651,92 +10695,6 @@ svg {
   color: #FFD257;
 }
 
-.bd-navbar-item-documentation .icon {
-  color: #00d1b2;
-}
-
-.bd-navbar-item-documentation:hover {
-  background-color: #00d1b2 !important;
-  color: #fff !important;
-}
-
-.bd-navbar-item-documentation:hover .icon {
-  color: currentColor !important;
-}
-
-.bd-navbar-item-templates .icon {
-  color: #209cee;
-}
-
-.bd-navbar-item-templates:hover {
-  background-color: #209cee !important;
-  color: #fff !important;
-}
-
-.bd-navbar-item-templates:hover .icon {
-  color: currentColor !important;
-}
-
-.bd-navbar-item-videos .icon {
-  color: #23d160;
-}
-
-.bd-navbar-item-videos:hover {
-  background-color: #23d160 !important;
-  color: #fff !important;
-}
-
-.bd-navbar-item-videos:hover .icon {
-  color: currentColor !important;
-}
-
-.bd-navbar-item-blog .icon {
-  color: #f26522;
-}
-
-.bd-navbar-item-blog:hover {
-  background-color: #f26522 !important;
-  color: #fff !important;
-}
-
-.bd-navbar-item-blog:hover .icon {
-  color: currentColor !important;
-}
-
-.bd-navbar-item-expo .icon {
-  color: #FFD257;
-}
-
-.bd-navbar-item-expo:hover {
-  background-color: #FFD257 !important;
-  color: #fff !important;
-}
-
-.bd-navbar-item-expo:hover .icon {
-  color: currentColor !important;
-}
-
-.bd-navbar-item-love .icon {
-  color: #ff3860;
-}
-
-.bd-navbar-item-love:hover {
-  background-color: #ff3860 !important;
-  color: #fff !important;
-}
-
-.bd-navbar-item-love:hover .icon {
-  color: currentColor !important;
-}
-
-.bd-navbar-item-expo:hover {
-  color: #8F6900 !important;
-}
-
-.bd-navbar-item-expo:hover .icon {
-  color: #F4B300 !important;
-}
-
 .bd-special-shadow {
   background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
   height: 8px;
@@ -10946,7 +10904,7 @@ svg {
 .bd-structure::before,
 .bd-snippet::before {
   background: #ffdd57;
-  border-radius: 4px 4px 0 0;
+  border-radius: 2px 2px 0 0;
   bottom: 100%;
   color: rgba(0, 0, 0, 0.7);
   content: "Example";
@@ -11011,6 +10969,7 @@ svg {
   content: "Snippet";
   align-items: stretch;
   display: flex;
+  margin-left: -1px;
 }
 
 .bd-snippet-preview {

docs/documentation/modifiers/responsive-helpers.html

@@ -36,13 +36,13 @@ breadcrumb:
 
 {% capture flex %}
 <td class="is-narrow">
-  <p class="notification is-success">flex</p>
+  <p class="notification is-primary">flex</p>
 </td>
 {% endcapture %}
 
 {% capture visible %}
 <td class="is-narrow">
-  <p class="notification is-success">visible</p>
+  <p class="notification is-primary">visible</p>
 </td>
 {% endcapture %}
 

docs/documentation/modifiers/syntax.html

@@ -22,6 +22,66 @@ breadcrumb:
 </a>
 {% endcapture %}
 
+{% capture button_colors %}
+<a class="button is-primary">
+  Button
+</a>
+<a class="button is-link">
+  Button
+</a>
+<a class="button is-info">
+  Button
+</a>
+<a class="button is-success">
+  Button
+</a>
+<a class="button is-warning">
+  Button
+</a>
+<a class="button is-danger">
+  Button
+</a>
+{% endcapture %}
+
+{% capture button_sizes %}
+<a class="button is-small">
+  Button
+</a>
+<a class="button">
+  Button
+</a>
+<a class="button is-medium">
+  Button
+</a>
+<a class="button is-large">
+  Button
+</a>
+{% endcapture %}
+
+{% capture button_states %}
+<a class="button is-primary is-outlined">
+  Button
+</a>
+<a class="button is-loading">
+  Button
+</a>
+<a class="button" disabled>
+  Button
+</a>
+{% endcapture %}
+
+{% capture button_combinations %}
+<a class="button is-primary is-small" disabled>
+  Button
+</a>
+<a class="button is-info is-loading">
+  Button
+</a>
+<a class="button is-danger is-outlined is-large">
+  Button
+</a>
+{% endcapture %}
+
 <div class="columns">
   <div class="column">
     <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
@@ -84,26 +144,7 @@ breadcrumb:
   </div>
   <div class="column is-half">
     <div class="highlight-full">
-{% highlight html %}
-<a class="button is-primary">
-  Button
-</a>
-<a class="button is-link">
-  Button
-</a>
-<a class="button is-info">
-  Button
-</a>
-<a class="button is-success">
-  Button
-</a>
-<a class="button is-warning">
-  Button
-</a>
-<a class="button is-danger">
-  Button
-</a>
-{% endhighlight %}
+      {% highlight html %}{{ button_colors }}{% endhighlight %}
     </div>
   </div>
 </div>
@@ -134,21 +175,8 @@ breadcrumb:
     </p>
   </div>
   <div class="column is-half">
-{% highlight html %}
-<a class="button is-small">
-  Button
-</a>
-<a class="button">
-  Button
-</a>
-<a class="button is-medium">
-  Button
-</a>
-<a class="button is-large">
-  Button
-</a>
-{% endhighlight %}
-      </div>
+    {% highlight html %}{{ button_sizes }}{% endhighlight %}
+  </div>
 </div>
 
 <div class="columns">
@@ -167,23 +195,35 @@ breadcrumb:
       <a class="button is-primary is-outlined">Button</a>
     </p>
     <p class="field">
-      <a class="button is-primary is-loading">Button</a>
+      <a class="button is-loading">Button</a>
     </p>
     <p class="field">
-      <a class="button is-primary" disabled>Button</a>
+      <a class="button" disabled>Button</a>
     </p>
   </div>
   <div class="column is-half">
-{% highlight html %}
-<a class="button is-primary is-outlined">
-  Button
-</a>
-<a class="button is-primary is-loading">
-  Button
-</a>
-<a class="button is-primary" disabled>
-  Button
-</a>
-{% endhighlight %}
-      </div>
+    {% highlight html %}{{ button_states }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      As a result, it's very easy to <strong>combine modifiers:</strong>
+    </div>
+  </div>
+  <div class="column">
+    <p class="field">
+      <a class="button is-primary is-small" disabled>Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-info is-loading">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-danger is-outlined is-large">Button</a>
+    </p>
+  </div>
+  <div class="column is-half">
+    {% highlight html %}{{ button_combinations }}{% endhighlight %}
+  </div>
 </div>

docs/documentation/modifiers/typography-helpers.html

@@ -39,7 +39,7 @@ breadcrumb:
 
 {% capture size1 %}
 <td class="is-narrow">
-  <p class="notification is-success"><code>{{ initial_vars.size-1.value }}</code></p>
+  <p class="notification is-primary"><code>{{ initial_vars.size-1.value }}</code></p>
 </td>
 {% endcapture %}
 
@@ -51,7 +51,7 @@ breadcrumb:
 
 {% capture left %}
 <td class="is-narrow">
-  <p class="notification is-success">left-aligned</p>
+  <p class="notification is-primary">left-aligned</p>
 </td>
 {% endcapture %}
 

docs/index.html

@@ -8,49 +8,6 @@ fixed_navbar: true
 
 {% include index/intro.html %}
 
-<section class="hero is-primary">
-  <div class="hero-body">
-    <div class="container">
-      <nav class="columns">
-        <a class="column has-text-centered" href="{{ site.url }}/documentation/overview/responsiveness/">
-          <span class="icon is-large" style="margin-right: -15px;">
-            <i class="fas fa-lg fa-mobile-alt"></i>
-          </span>
-          <span class="icon is-large">
-            <i class="fas fa-2x fa-tablet-alt"></i>
-          </span>
-          <span class="icon is-large" style="margin-right: 10px;">
-            <i class="fas fa-3x fa-desktop"></i>
-          </span>
-          <p class="title is-4" style="margin-top: 0.5em;"><strong>100% Responsive</strong></p>
-          <p class="subtitle">Designed for <strong>mobile</strong> first</p>
-        </a>
-        <a class="column has-text-centered" href="{{ site.url }}/documentation/overview/modular/">
-          <span class="icon is-large">
-            <i class="fas fa-3x fa-cubes"></i>
-          </span>
-          <p class="title is-4" style="margin-top: 0.5em;"><strong>Modular</strong></p>
-          <p class="subtitle">Just import what you <strong>need</strong></p>
-        </a>
-        <a class="column has-text-centered" href="{{ site.url }}/documentation/columns/basics/">
-          <span class="icon is-large">
-            <i class="fab fa-3x fa-css3"></i>
-          </span>
-          <p class="title is-4" style="margin-top: 0.5em;"><strong>Modern</strong></p>
-          <p class="subtitle">Built with <strong>Flexbox</strong></p>
-        </a>
-        <a class="column has-text-centered" href="{{ site.data.meta.github }}">
-          <span class="icon is-large">
-            <i class="fab fa-3x fa-github"></i>
-          </span>
-          <p class="title is-4" style="margin-top: 0.5em;"><strong>Free</strong></p>
-          <p class="subtitle">Open source on <strong>GitHub</strong></p>
-        </a>
-      </nav>
-    </div>
-  </div>
-</section>
-
 <section class="bd-tws-home">
   {% include elements/tws.html %}
 </section>