Fix index

docs/css/bulma-docs.css

@@ -2693,11 +2693,6 @@ a.box:active {
   font-weight: 300;
 }
 
-.title a:hover,
-.subtitle a:hover {
-  border-bottom: 1px solid;
-}
-
 .title strong,
 .subtitle strong {
   font-weight: 500;
@@ -5442,13 +5437,13 @@ label.panel-block:hover {
   color: #0a0a0a;
 }
 
-.hero.is-white .title {
+.hero.is-white a,
-  color: #0a0a0a;
+.hero.is-white strong {
+  color: inherit;
 }
 
-.hero.is-white .title a,
+.hero.is-white .title {
-.hero.is-white .title strong {
+  color: #0a0a0a;
-  color: inherit;
 }
 
 .hero.is-white .subtitle {
@@ -5532,13 +5527,13 @@ label.panel-block:hover {
   color: white;
 }
 
-.hero.is-black .title {
+.hero.is-black a,
-  color: white;
+.hero.is-black strong {
+  color: inherit;
 }
 
-.hero.is-black .title a,
+.hero.is-black .title {
-.hero.is-black .title strong {
+  color: white;
-  color: inherit;
 }
 
 .hero.is-black .subtitle {
@@ -5622,13 +5617,13 @@ label.panel-block:hover {
   color: #363636;
 }
 
-.hero.is-light .title {
+.hero.is-light a,
-  color: #363636;
+.hero.is-light strong {
+  color: inherit;
 }
 
-.hero.is-light .title a,
+.hero.is-light .title {
-.hero.is-light .title strong {
+  color: #363636;
-  color: inherit;
 }
 
 .hero.is-light .subtitle {
@@ -5712,13 +5707,13 @@ label.panel-block:hover {
   color: whitesmoke;
 }
 
-.hero.is-dark .title {
+.hero.is-dark a,
-  color: whitesmoke;
+.hero.is-dark strong {
+  color: inherit;
 }
 
-.hero.is-dark .title a,
+.hero.is-dark .title {
-.hero.is-dark .title strong {
+  color: whitesmoke;
-  color: inherit;
 }
 
 .hero.is-dark .subtitle {
@@ -5802,13 +5797,13 @@ label.panel-block:hover {
   color: #fff;
 }
 
-.hero.is-primary .title {
+.hero.is-primary a,
-  color: #fff;
+.hero.is-primary strong {
+  color: inherit;
 }
 
-.hero.is-primary .title a,
+.hero.is-primary .title {
-.hero.is-primary .title strong {
+  color: #fff;
-  color: inherit;
 }
 
 .hero.is-primary .subtitle {
@@ -5892,13 +5887,13 @@ label.panel-block:hover {
   color: #fff;
 }
 
-.hero.is-info .title {
+.hero.is-info a,
-  color: #fff;
+.hero.is-info strong {
+  color: inherit;
 }
 
-.hero.is-info .title a,
+.hero.is-info .title {
-.hero.is-info .title strong {
+  color: #fff;
-  color: inherit;
 }
 
 .hero.is-info .subtitle {
@@ -5982,13 +5977,13 @@ label.panel-block:hover {
   color: #fff;
 }
 
-.hero.is-success .title {
+.hero.is-success a,
-  color: #fff;
+.hero.is-success strong {
+  color: inherit;
 }
 
-.hero.is-success .title a,
+.hero.is-success .title {
-.hero.is-success .title strong {
+  color: #fff;
-  color: inherit;
 }
 
 .hero.is-success .subtitle {
@@ -6072,13 +6067,13 @@ label.panel-block:hover {
   color: rgba(0, 0, 0, 0.7);
 }
 
-.hero.is-warning .title {
+.hero.is-warning a,
-  color: rgba(0, 0, 0, 0.7);
+.hero.is-warning strong {
+  color: inherit;
 }
 
-.hero.is-warning .title a,
+.hero.is-warning .title {
-.hero.is-warning .title strong {
+  color: rgba(0, 0, 0, 0.7);
-  color: inherit;
 }
 
 .hero.is-warning .subtitle {
@@ -6162,13 +6157,13 @@ label.panel-block:hover {
   color: #fff;
 }
 
-.hero.is-danger .title {
+.hero.is-danger a,
-  color: #fff;
+.hero.is-danger strong {
+  color: inherit;
 }
 
-.hero.is-danger .title a,
+.hero.is-danger .title {
-.hero.is-danger .title strong {
+  color: #fff;
-  color: inherit;
 }
 
 .hero.is-danger .subtitle {
@@ -6293,3 +6288,529 @@ label.panel-block:hover {
   background-color: whitesmoke;
   padding: 3rem 1.5rem 6rem;
 }
+
+@media screen and (min-width: 769px) {
+  .button small {
+    color: #4a4a4a;
+    left: 0;
+    margin-top: 10px;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+  }
+}
+
+body.page-grid .column > .notification {
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+}
+
+@media screen and (min-width: 769px) {
+  .header-item .button + .button {
+    margin-left: 0.75rem;
+  }
+}
+
+svg {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+#carbon {
+  max-width: 340px;
+  min-height: 130px;
+  padding: 15px;
+}
+
+@media screen and (min-width: 769px) {
+  #carbon {
+    margin-left: auto;
+    margin-right: auto;
+    width: 340px;
+  }
+}
+
+#carbonads {
+  text-align: left;
+}
+
+#carbonads a:hover {
+  text-decoration: underline;
+}
+
+#carbonads span {
+  display: block;
+}
+
+#carbonads .carbon-img {
+  float: left;
+  height: 100px;
+  width: 130px;
+}
+
+#carbonads .carbon-img img {
+  display: block;
+}
+
+#carbonads .carbon-text {
+  display: block;
+  color: #363636;
+  margin-left: 145px;
+}
+
+#carbonads .carbon-poweredby {
+  font-size: 0.75rem;
+  margin-left: 15px;
+}
+
+#github {
+  color: #333333;
+  border-color: #333333;
+}
+
+#github:hover {
+  background: #333333;
+  border-color: #333333;
+  color: white;
+}
+
+#twitter {
+  color: #55acee;
+  border-color: #55acee;
+}
+
+#twitter:hover {
+  background: #55acee;
+  border-color: #55acee;
+  color: white;
+}
+
+@keyframes floatUp {
+  0% {
+    box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
+    transform: scale(0.86);
+  }
+  67% {
+    box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+    transform: scale(1);
+  }
+  100% {
+    box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+    transform: scale(1);
+  }
+}
+
+@keyframes strokePath {
+  from {
+    stroke-dashoffset: 880;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.86);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+    transform: scale(0.86);
+  }
+  67% {
+    opacity: 1;
+    transform: scale(0.86);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+#b {
+  animation-delay: 1s;
+  animation-duration: 1.5s;
+  animation-fill-mode: both;
+  animation-name: floatUp;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  border-radius: 24px;
+  display: inline-block;
+  height: 240px;
+  margin-bottom: 40px;
+  position: relative;
+  vertical-align: top;
+  width: 240px;
+}
+
+#b svg {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: block;
+  height: 240px;
+  width: 240px;
+}
+
+#b svg:first-child {
+  animation-duration: 1.5s;
+  animation-fill-mode: both;
+  animation-name: fadeOut;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+}
+
+#b svg:first-child g {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: strokePath;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  fill: none;
+  stroke: #00d1b2;
+  stroke-dasharray: 880;
+  stroke-width: 2px;
+}
+
+#b svg:last-child {
+  animation-delay: 1s;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: fadeIn;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+}
+
+#b svg:last-child g {
+  fill: #00d1b2;
+}
+
+@media screen and (max-width: 768px) {
+  #b {
+    border-radius: 16px;
+    height: 160px;
+    width: 160px;
+  }
+}
+
+#bulma {
+  animation: slideDown 500ms both;
+  animation-delay: 1s;
+}
+
+#modern-framework {
+  animation: slideUp 500ms both;
+  animation-delay: 1.2s;
+}
+
+#npm {
+  animation: fadeIn 500ms both;
+  animation-delay: 1.4s;
+  margin: -10px 0 20px;
+}
+
+#npm code {
+  border-radius: 3px;
+  color: #00d1b2;
+  display: inline-block;
+  font-size: 16px;
+  padding: 16px 32px;
+}
+
+#ghbtns {
+  animation: slideDown 500ms both;
+  animation-delay: 1.6s;
+}
+
+html.route-index #carbon {
+  animation: slideUp 500ms both;
+  animation-delay: 1.8s;
+}
+
+#download {
+  animation: fadeIn 500ms both;
+  animation-delay: 2s;
+}
+
+#grid .notification {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+#message {
+  display: none;
+}
+
+#tweet {
+  background: white;
+  border-radius: 5px;
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  padding: 1.5rem;
+}
+
+#mc_embed_signup .control {
+  margin-bottom: 0;
+}
+
+#mc_embed_signup .notification {
+  margin-top: 0.75rem;
+}
+
+#social {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 1em;
+  justify-content: center;
+}
+
+#social a {
+  display: inline-block;
+  font-size: 11px;
+  height: 20px;
+  line-height: 20px;
+  margin: 5px;
+}
+
+#social iframe {
+  margin: 5px;
+}
+
+#images tr td:nth-child(2) {
+  width: 320px;
+}
+
+.color {
+  display: inline-block;
+  float: left;
+  height: 18px;
+  margin-right: 5px;
+  width: 18px;
+}
+
+.example,
+.structure {
+  border: 1px solid #ffdd57;
+  border-top-right-radius: 3px;
+  color: rgba(0, 0, 0, 0.7);
+  padding: 1.25rem 1.5rem;
+  position: relative;
+}
+
+.example:not(:first-child),
+.structure:not(:first-child) {
+  margin-top: 2rem;
+}
+
+.example:not(:last-child),
+.structure:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+.example:before,
+.structure:before {
+  background: #ffdd57;
+  border-radius: 3px 3px 0 0;
+  bottom: 100%;
+  content: "Example";
+  display: inline-block;
+  font-size: 7px;
+  font-weight: bold;
+  left: -1px;
+  letter-spacing: 1px;
+  padding: 3px 5px;
+  position: absolute;
+  text-transform: uppercase;
+  vertical-align: top;
+}
+
+@media screen and (min-width: 769px) {
+  .example.is-fullwidth,
+  .structure.is-fullwidth {
+    border-left: none;
+    border-right: none;
+    padding: 0;
+  }
+}
+
+.example + .highlight {
+  border: 1px solid #ffdd57;
+  border-radius: 0 0 3px 3px;
+  border-top: none;
+  margin-top: -1.5rem;
+}
+
+.example + .highlight pre {
+  max-height: 600px;
+}
+
+.example + .highlight:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+.structure {
+  border-color: #ff3860;
+  border-radius: 3px;
+  padding: 1.5rem;
+}
+
+.structure:before {
+  background: #ff3860;
+  color: #fff;
+  content: "Structure";
+}
+
+.structure-item {
+  position: relative;
+}
+
+.structure-item:before {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: rgba(10, 10, 10, 0.7);
+  background: whitesmoke;
+  border: 1px solid #dbdbdb;
+  content: "";
+  display: block;
+  z-index: 1;
+}
+
+.structure-item:after {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  align-items: center;
+  content: attr(title);
+  display: flex;
+  font-family: "Inconsolata", "Consolas", "Monaco", monospace;
+  font-size: 11px;
+  justify-content: center;
+  padding: 3px 5px;
+  z-index: 2;
+}
+
+.structure-item.is-structure-container {
+  padding: 1.5rem 0.75rem 0.75rem;
+}
+
+.structure-item.is-structure-container:after {
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0.5rem 0.75rem;
+}
+
+.highlight {
+  position: relative;
+}
+
+.highlight .copy,
+.highlight .expand {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background: white;
+  border: solid #dbdbdb;
+  border-width: 0 0 1px 1px;
+  color: #7a7a7a;
+  cursor: pointer;
+  outline: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.highlight .copy:hover,
+.highlight .expand:hover {
+  border-color: #ff3860;
+  color: #ff3860;
+}
+
+.highlight .expand {
+  border-right-width: 1px;
+  right: 50px;
+}
+
+@media screen and (min-width: 769px) {
+  .highlight pre {
+    white-space: pre-wrap;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .section:not(.is-fullwidth) > .example:not(.is-fullwidth) {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+  .section:not(.is-fullwidth) > .example:not(.is-fullwidth) + .highlight {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+}
+
+.section.is-fullwidth {
+  padding: 0 !important;
+}
+
+.section.is-fullwidth .example {
+  border-left: none;
+  border-radius: 0;
+  border-right: none;
+  padding: 0;
+}
+
+.section.is-fullwidth .example + .highlight {
+  border-left: none;
+  border-radius: 0;
+  border-right: none;
+}
+
+#newsletter .input {
+  border-color: white;
+  box-shadow: none;
+}
+
+html ::-moz-selection {
+  background: #00d1b2;
+  color: #fff;
+}
+
+html ::selection {
+  background: #00d1b2;
+  color: #fff;
+}

docs/documentation/grid/columns.html

@@ -17,6 +17,7 @@ doc-subtab: columns
         <li>Add a <code>columns</code> container</li>
         <li>Add as many <code>column</code> elements as you want</li>
       </ol>
+      <p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
     </div>
 
     <div class="columns">

docs/documentation/modifiers/responsive-helpers.html

@@ -200,15 +200,15 @@ doc-subtab: responsive-helpers
           </th>
           <th>
             Tablet<br>
-            Between <code>769px</code> and <code>979px</code>
+            Between <code>769px</code> and <code>999px</code>
           </th>
           <th>
             Desktop<br>
-            Between <code>980px</code> and <code>1179px</code>
+            Between <code>1000px</code> and <code>1239px</code>
           </th>
           <th>
             Widescreen<br>
-            Above <code>1180px</code>
+            Above <code>1240px</code>
           </th>
         </tr>
       </thead>

docs/documentation/modifiers/syntax.html

@@ -17,16 +17,19 @@ doc-subtab: syntax
       <div class="column">
         <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
       </div>
+{% capture button_example %}
+<a class="button">
+  Button
+</a>
+{% endcapture %}
       <div class="column">
         <p>
-          <a class="button">Button</a>
+          {{button_example}}
         </p>
       </div>
       <div class="column is-half">
 {% highlight html %}
-<a class="button">
+{{button_example}}
-  Button
-</a>
 {% endhighlight %}
       </div>
     </div>
@@ -34,16 +37,19 @@ doc-subtab: syntax
       <div class="column">
         <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
       </div>
+{% capture button_primary_example %}
+<a class="button is-primary">
+  Button
+</a>
+{% endcapture %}
       <div class="column">
         <p>
-          <a class="button is-primary">Button</a>
+{{button_primary_example}}
         </p>
       </div>
       <div class="column is-half">
 {% highlight html %}
-<a class="button is-primary">
+{{button_primary_example}}
-  Button
-</a>
 {% endhighlight %}
       </div>
     </div>
@@ -124,18 +130,18 @@ doc-subtab: syntax
       </div>
       <div class="column is-half">
 {% highlight html %}
-<p class="control">
+<a class="button is-small">
-  <a class="button is-small">Button</a>
+  Button
-</p>
+</a>
-<p class="control">
+<a class="button">
-  <a class="button">Button</a>
+  Button
-</p>
+</a>
-<p class="control">
+<a class="button is-medium">
-  <a class="button is-medium">Button</a>
+  Button
-</p>
+</a>
-<p class="control">
+<a class="button is-large">
-  <a class="button is-large">Button</a>
+  Button
-</p>
+</a>
 {% endhighlight %}
       </div>
     </div>

docs/documentation/overview/modular.html

@@ -47,6 +47,7 @@ doc-subtab: modular
         What if you only want the <strong>button</strong> styles instead?
       </p>
 {% highlight sass %}
+@import "bulma/sass/utilities/_all
 @import "bulma/sass/elements/button.sass"
 {% endhighlight %}
       <p>

docs/index.html

@@ -486,22 +486,22 @@ route: index
     <h4 class="subtitle is-4">Buttons, form controls, menus, tabs, titles, notifications, etc.</h4>
 
     <div class="columns">
-      <div class="column is-one-third">
+      <div class="column is-one-quarter">
         <div class="card">
           <div class="card-image">
             <figure class="image is-4by3">
-              <img src="{{site.url}}/images/placeholders/300x225.png" alt="">
+              <img src="{{site.url}}/images/placeholders/1280x960.png" alt="Image">
             </figure>
           </div>
           <div class="card-content">
             <div class="media">
               <div class="media-left">
-                <figure class="image is-32x32">
+                <figure class="image is-48x48">
-                  <img src="{{site.url}}/images/placeholders/64x64.png" alt="Image">
+                  <img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
                 </figure>
               </div>
               <div class="media-content">
-                <p class="title is-5">Card</p>
+                <p class="title is-4">Card</p>
                 <p class="subtitle is-6">Subtitle</p>
               </div>
             </div>

sass/elements/title.sass

@@ -15,9 +15,6 @@ $subtitle-weight:   $weight-light !default
   em,
   span
     font-weight: $title-weight
-  a
-    &:hover
-      border-bottom: 1px solid
   strong
     font-weight: $title-weight-bold
   .tag

sass/layout/hero.sass

@@ -68,11 +68,11 @@
     &.is-#{$name}
       background-color: $color
       color: $color-invert
+      a,
+      strong
+        color: inherit
       .title
         color: $color-invert
-        a,
-        strong
-          color: inherit
       .subtitle
         color: rgba($color-invert, 0.9)
         a,