Fix container

docs/_includes/bsa.html

@@ -1,19 +1,28 @@
-<section class="hero is-light bsa">
+<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
-  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
+
+<section class="hero is-info bsa">
   <div class="container">
-    <div class="bsa-container">
+    <div class="columns is-vcentered">
-      <div class="bsa-cpc"></div>
+      <div class="column is-4">
+        <p class="title">Bulma <strong>Partners</strong></p>
+        <p class="subtitle">Keeping the project alive!</p>
+      </div>
+
+      <div class="column is-8">
+        <div class="bsa-cpc"></div>
+      </div>
     </div>
   </div>
-  <script>
-    (function(){
-      if(typeof _bsa !== 'undefined' && _bsa) {
-      _bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
-        target: '.bsa-cpc',
-        align: 'horizontal',
-        disable_css: 'true'
-      });
-        }
-    })();
-  </script>
 </section>
+
+<script>
+  (function(){
+    if(typeof _bsa !== 'undefined' && _bsa) {
+    _bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
+      target: '.bsa-cpc',
+      align: 'horizontal',
+      disable_css: 'true'
+    });
+      }
+  })();
+</script>

docs/_includes/footer.html

@@ -65,7 +65,7 @@
             <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
               <input type="hidden" name="cmd" value="_s-xclick">
               <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
-              <input type="image" src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/gold-rect-paypaldonate-60px.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
+              <input type="image" src="{{site.url}}/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
               <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
             </form>
           </div>
@@ -102,57 +102,6 @@
   </div>
 </footer>
 
-{% if page.route == 'index' %}
-  <style type="text/css">
-    .title.is-2 {
-      position: relative;
-    }
-
-    .title.is-2 a {
-      color: #242424;
-      padding-left: 48px;
-      position: relative;
-    }
-
-    .title.is-2 a:hover {
-      color: #00d1b2;
-    }
-
-    .title.is-2 .icon.is-medium {
-      left: 8px;
-      position: absolute;
-      top: 10px;
-    }
-
-    .hero .title.is-2 a {
-      color: white;
-    }
-
-    .hero .title.is-2 a:hover {
-      color: white;
-    }
-
-    .hero.is-primary a.column,
-    .hero.is-primary a.column:hover {
-      color: white;
-    }
-
-    .hero.is-primary a.column:hover .title strong {
-      border-bottom: 1px solid;
-    }
-
-    @media screen and (max-width: 979px) {
-      .title.is-2 a {
-        padding-left: 0;
-      }
-
-      .title.is-2 .icon.is-medium {
-        display: none;
-      }
-    }
-  </style>
-{% endif %}
-
 <script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
 <script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
 

docs/bulma-docs.sass

@@ -10,6 +10,7 @@
 @import "./sass/specific"
 @import "./sass/example"
 @import "./sass/bsa"
+@import "./sass/route"
 
 html
   \::-moz-selection

docs/css/bulma-docs.css

@@ -2618,23 +2618,24 @@ input[type="submit"].button {
 @media screen and (min-width: 1000px) {
   .container {
     margin: 0 auto;
-    max-width: 960px;
+    width: 960px;
   }
   .container.is-fluid {
     margin: 0 20px;
     max-width: none;
+    width: auto;
   }
 }
 
 @media screen and (min-width: 1192px) {
   .container {
-    max-width: 1152px;
+    width: 1152px;
   }
 }
 
 @media screen and (min-width: 1384px) {
   .container {
-    max-width: 1344px;
+    width: 1344px;
   }
 }
 
@@ -3628,13 +3629,18 @@ a.nav-item.is-tab.is-active {
   align-items: stretch;
   display: flex;
   min-height: 3.25rem;
-  width: 100%;
 }
 
 .nav.has-shadow {
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
 }
 
+@media screen and (max-width: 768px) {
+  .nav > .container {
+    width: 100%;
+  }
+}
+
 .pagination {
   font-size: 1rem;
 }
@@ -6709,12 +6715,17 @@ html.route-index #carbon {
   padding: 2rem;
 }
 
+.bsa-cpc {
+  min-height: 1px;
+}
+
 #_default_ .default-ad {
-  background-color: #00d1b2;
+  background-color: rgba(0, 0, 0, 0.3);
   border-radius: 2px;
-  color: #fff;
+  color: white;
   display: inline-block;
-  font-size: 12px;
+  font-size: 10px;
+  font-weight: bold;
   padding: 0 4px;
   text-transform: uppercase;
   vertical-align: top;
@@ -6724,8 +6735,9 @@ html.route-index #carbon {
   background-color: 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);
+  color: #4a4a4a;
   display: block;
-  line-height: 1.25;
+  line-height: 1.375;
   margin-top: 15px;
   padding: 15px;
   padding-left: 70px;
@@ -6765,6 +6777,9 @@ html.route-index #carbon {
 }
 
 @media screen and (min-width: 769px) {
+  .bsa .columns {
+    min-height: 120px;
+  }
   #_default_ {
     display: flex;
     justify-content: center;
@@ -6784,6 +6799,52 @@ html.route-index #carbon {
   }
 }
 
+html.route-index .title.is-2 {
+  position: relative;
+}
+
+html.route-index .title.is-2 a {
+  color: #242424;
+  padding-left: 48px;
+  position: relative;
+}
+
+html.route-index .title.is-2 a:hover {
+  color: #00d1b2;
+}
+
+html.route-index .title.is-2 .icon.is-medium {
+  left: 8px;
+  position: absolute;
+  top: 10px;
+}
+
+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;
+  }
+  html.route-index .title.is-2 .icon.is-medium {
+    display: none;
+  }
+}
+
 html ::-moz-selection {
   background: #00d1b2;
   color: #fff;

docs/documentation/components/card.html

@@ -138,15 +138,22 @@ doc-subtab: card
 <div class="card">
   <div class="card-content">
     <p class="title">
-      If Tetris has taught me anything it's that errors pile up and accomplishments disappear.
+      “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
     </p>
     <p class="subtitle">
-      Mark Twain
+      Jeff Atwood
     </p>
   </div>
   <footer class="card-footer">
     <p class="card-footer-item">
-      <span>More quotes by <a href="#">Mark Twain</a></span>
+      <span>
+        View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
+      </span>
+    </p>
+    <p class="card-footer-item">
+      <span>
+        Share on <a href="#">Facebook</a>
+      </span>
     </p>
   </footer>
 </div>

docs/sass/bsa.sass

@@ -1,13 +1,17 @@
 .bsa
   padding: 2rem
 
+.bsa-cpc
+  min-height: 1px
+
 #_default_
   .default-ad
-    background-color: $primary
+    background-color: rgba(black, 0.3)
     border-radius: 2px
-    color: $primary-invert
+    color: $white
     display: inline-block
-    font-size: 12px
+    font-size: 10px
+    font-weight: bold
     padding: 0 4px
     text-transform: uppercase
     vertical-align: top
@@ -15,8 +19,9 @@
     background-color: $white
     border-radius: $radius-large
     box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+    color: $text
     display: block
-    line-height: 1.25
+    line-height: 1.375
     margin-top: 15px
     padding: 15px
     padding-left: 70px
@@ -44,6 +49,9 @@
       font-weight: $weight-bold
 
 +tablet
+  .bsa
+    .columns
+      min-height: 120px
   #_default_
     display: flex
     justify-content: center

docs/sass/route.sass

@@ -0,0 +1,36 @@
+html.route-index
+  .title.is-2
+    position: relative
+
+  .title.is-2 a
+    color: #242424
+    padding-left: 48px
+    position: relative
+
+  .title.is-2 a:hover
+    color: #00d1b2
+
+  .title.is-2 .icon.is-medium
+    left: 8px
+    position: absolute
+    top: 10px
+
+  .hero .title.is-2 a
+    color: white
+
+  .hero .title.is-2 a:hover
+    color: white
+
+  .hero.is-primary a.column,
+  .hero.is-primary a.column:hover
+    color: white
+
+  .hero.is-primary a.column:hover .title strong
+    border-bottom: 1px solid
+
+  @media screen and (max-width: 979px)
+    .title.is-2 a
+      padding-left: 0
+
+    .title.is-2 .icon.is-medium
+      display: none

sass/components/nav.sass

@@ -124,7 +124,10 @@ a.nav-item
     align-items: stretch
     display: flex
     min-height: $nav-height
-    width: 100%
   // Modifiers
   &.has-shadow
     box-shadow: 0 2px 3px rgba($black, 0.1)
+  // Responsiveness
+  +mobile
+    & > .container
+      width: 100%

sass/elements/other.sass

@@ -5,15 +5,16 @@
   position: relative
   +desktop
     margin: 0 auto
-    max-width: $desktop - 40px
+    width: $desktop - 40px
     // Modifiers
     &.is-fluid
       margin: 0 20px
       max-width: none
+      width: auto
   +widescreen
-    max-width: $widescreen - 40px
+    width: $widescreen - 40px
   +fullhd
-    max-width: $fullhd - 40px
+    width: $fullhd - 40px
 
 .delete
   +delete