Add love

docs/_includes/elements/tw-button.html

@@ -0,0 +1,13 @@
+<a class="tw-button button"
+  data-social-network="Twitter"
+  data-social-action="tweet"
+  data-social-target="{{ site.url }}"
+  target="_blank"
+  href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&hashtags=bulmaio&url={{ site.url }}&via=jgthms">
+  <span class="icon">
+    <i class="fa fa-twitter"></i>
+  </span>
+  <span>
+    {{ include.label }}
+  </span>
+</a>

docs/_includes/features.html

@@ -125,7 +125,7 @@
 {% endcapture %}
 
 {% capture cards %}
-<div class="columns is-mobile">
+<div class="columns">
   <div class="column is-half">
     <div class="card">
       <div class="card-image">

docs/_includes/head.html

@@ -4,7 +4,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
-  <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
+  <title>{% if page.fulltitle %}{{ page.fulltitle }}{% else %}{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}{% endif %}</title>
 
   <link rel="stylesheet" href="{{ site.fontawesome }}">
   <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">

docs/_includes/navbar.html

@@ -144,6 +144,10 @@
           </a>
         </div>
       </div>
+      <a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
+        <span class="emoji">❤️</span>
+        Love
+      </a>
     </div>
 
     <div class="navbar-end">
@@ -156,18 +160,7 @@
       <div class="navbar-item">
         <div class="field is-grouped">
           <p class="control">
-            <a id="twitter"
+            {% include elements/tw-button.html label="Tweet" %}
-              class="button"
-              data-social-network="Twitter"
-              data-social-action="tweet"
-              data-social-target="{{ site.url }}"
-              target="_blank"
-              href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms">
-              <span class="icon">
-                <i class="fa fa-twitter"></i>
-              </span>
-              <span>Tweet</span>
-            </a>
           </p>
           <p class="control">
             <a class="button is-primary" href="{{ site.download }}">

docs/_includes/testimonials.html

@@ -0,0 +1,41 @@
+<div class="container">
+  <div class="columns">
+    <div class="column is-4">
+      <article class="love">
+        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">So, I was making an exam and in a matter of 30 minutes I had my structure complete with responsive, Bulma is crazy. Thanks <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; Francisco Cruz (@atFranCruz) <a href="https://twitter.com/atFranCruz/status/868829487072464897">May 28, 2017</a></blockquote>
+      </article>
+
+      <article class="love">
+        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey Jeremy! Been putting Bulma into a project during the last days - absolutely love it! Well done! 😍</p>&mdash; Simon Jaeger (@simonjaegr) <a href="https://twitter.com/simonjaegr/status/834140257054502913">February 21, 2017</a></blockquote>
+      </article>
+    </div>
+
+    <div class="column is-4">
+      <article class="love">
+        <blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Bulma, I think I&#39;m in love. <a href="https://t.co/APYefmC1Bs">https://t.co/APYefmC1Bs</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; Jesse Schoff (@jesseschoff) <a href="https://twitter.com/jesseschoff/status/869284735440363520">May 29, 2017</a></blockquote>
+      </article>
+
+      <article class="love">
+        <blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/ClYmBd8tGR">https://t.co/ClYmBd8tGR</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>.</p>&mdash; scottgallant (@scottgallant) <a href="https://twitter.com/scottgallant/status/835834634655174658">February 26, 2017</a></blockquote>
+      </article>
+    </div>
+
+    <div class="column is-4">
+      <article class="love">
+        <blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I usually hate having to write CSS, but I really like working with the lightweight Bulma (<a href="https://t.co/OAMLjKWzak">https://t.co/OAMLjKWzak</a>) by <a href="https://twitter.com/jgthms">@jgthms</a> so far 👍</p>&mdash; mario zupan (@mzupzup) <a href="https://twitter.com/mzupzup/status/874925154475929602">June 14, 2017</a></blockquote>
+      </article>
+
+      <article class="love">
+        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey.I just stopped by here to say thank you so much for Bulma. It made my website looks 100 times better 😍</p>&mdash; juliooooo (@juliooooo000) <a href="https://twitter.com/juliooooo000/status/819710615337857024">January 13, 2017</a></blockquote>
+      </article>
+    </div>
+  </div>
+
+  <div class="more-loves">
+    <p class="more-loves-container">
+      <a class="button is-medium is-danger rainbow" href="{{ site.url }}/love/">
+        <span>See more <strong>love</strong> 🤗</span>
+      </a>
+    </p>
+  </div>
+</div>

docs/_sass/header.sass

@@ -1,6 +1,3 @@
-$github: #333333
-$twitter: #55acee
-
 #github
   color: $github
   border-color: $github
@@ -9,12 +6,16 @@ $twitter: #55acee
     border-color: $github
     color: $white
 
-#twitter
+.tw-button
-  color: $twitter
+  background-color: $twitter
-  border-color: $twitter
+  color: $white
+  border-color: transparent !important
   &:hover
-    background: $twitter
+    background-color: darken($twitter, 2.5%)
-    border-color: $twitter
+    color: $white
+  &:active,
+  &:focus
+    background-color: darken($twitter, 5%)
     color: $white
 
 +desktop

docs/_sass/love.sass

@@ -0,0 +1,91 @@
+.testimonials
+  background-color: $background
+
+.love
+  align-items: flex-start
+  display: flex
+  justify-content: center
+
+.more-loves
+  align-items: center
+  display: flex
+  justify-content: center
+  margin-top: 1.5rem
+  text-align: center
+  .button
+    height: auto
+    padding: 0.75em 1.5em
+    span
+      transform-origin: center center
+      transition: transform $speed $easing
+    &:hover
+      span
+        transform: scale(1.04)
+
++mobile
+  .testimonials
+    padding: 1.5rem
+  .love
+    margin-bottom: 1.5rem
+
++tablet
+  .testimonials
+    padding: 3rem
+  .love + .love
+    margin-top: 1.5rem
+
+.rainbow
+  animation: rainbow 8s ease infinite
+  background-image: linear-gradient(124deg, $orange, $red, $purple, $blue)
+  background-size: 800% 800%
+
+.hero.is-love
+  .title,
+  .subtitle
+    color: $white
+
+@keyframes rainbow
+    0%
+      background-position: 0% 80%
+    50%
+      background-position: 100% 20%
+    100%
+      background-position: 0% 80%
+
+.hug
+  align-items: flex-start
+  display: flex
+  justify-content: center
+
+.more-love-container
+  align-items: center
+  background-color: $background
+  border-radius: $radius
+  display: flex
+  justify-content: center
+  padding: 1.5rem
+  .tw-button
+    margin-left: 1.5rem
+
++mobile
+  .hug,
+  .more-love
+    margin: 1.5rem
+
++tablet
+  .more-love
+    margin: 3rem 0 1.5rem
+  .hugs
+    display: flex
+    flex-wrap: wrap
+    padding-bottom: 3rem
+  .hug
+    margin-top: 1.5rem
+    width: calc(33.3333% - 1rem)
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3)
+      margin-top: 0
+    &:nth-child(3n-1),
+    &:nth-child(3n)
+      margin-left: 1.5rem

docs/_sass/specific.sass

@@ -74,7 +74,6 @@
     height: 180px
     width: 240px
 
-
 .article-overlay
   +overlay
   background-color: $black
@@ -104,3 +103,7 @@
   font-size: 2.5rem
   font-weight: $weight-bold
   line-height: 1.25
+
+.emoji
+  margin-right: 0.5em
+  margin-top: 2px

docs/_sass/twitter.sass

@@ -0,0 +1,47 @@
+.tws
+  display: flex
+  flex-wrap: wrap
+  overflow: auto
+  padding: 20px
+
+.tw
+  color: #697882
+  flex-shrink: 0
+  font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif
+  font-size: 16px
+  // height: 270px
+  line-height: 1.4
+  padding: 10px
+  width: 520px
+  a
+    color: currentColor
+  p
+    color: #1c2022
+    font-size: 16px
+    margin-bottom: 3.2px
+    a
+      color: #2b7bb9
+
+.twitter-tweet:not(.twitter-tweet-rendered)
+  background-color: $white
+  border: 1px solid #e1e8ed
+  border-radius: 5px
+  color: #697882
+  font-size: 14px
+  padding: 20px 20px 11.6px
+  a
+    color: currentColor
+    &:hover
+      text-decoration: underline
+  p
+    color: #1c2022
+    font-size: 16px
+    margin-bottom: 3.2px
+    a
+      color: #2b7bb9
+
+.twitter-tweet-rendered
+  border: none
+  border-radius: 0
+  margin: 0 !important
+  padding: 0 !important

docs/bulma-docs.sass

@@ -1,5 +1,8 @@
 @charset "utf-8"
 
+$github: #333333
+$twitter: #55acee
+
 @import "../bulma"
 @import "./_sass/highlight"
 @import "./_sass/override"
@@ -12,6 +15,8 @@
 @import "./_sass/callout"
 @import "./_sass/bsa"
 @import "./_sass/route"
+@import "./_sass/twitter"
+@import "./_sass/love"
 
 \:root
   --primary: #{$primary}

docs/index.html

@@ -85,6 +85,10 @@ route: index
   </div>
 </section>
 
+<section class="testimonials">
+{% include testimonials.html %}
+</section>
+
 <section class="section is-medium">
   <div class="container">
     <h3 class="title is-2">

docs/love.html

@@ -0,0 +1,117 @@
+---
+fulltitle: Love for Bulma 😍
+layout: default
+route: love
+---
+
+<div class="container">
+  {% include navbar.html id="LoveHero" %}
+</div>
+
+<section class="hero is-love rainbow">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-vcentered">
+        <div class="column">
+          <h1 class="title">
+            Love
+          </h1>
+          <p class="subtitle">
+            Happy thoughts from Twitter <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">😃</span>
+          </p>
+        </div>
+        <div class="column is-narrow">
+          {% include carbon.html %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<div class="container">
+
+<div class="more-love">
+  <div class="more-love-container">
+    <p class="more-love-text">
+      Are you a <strong>Bulma fan</strong> too? Show your <strong>support</strong>! <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">🤗</span>
+    </p>
+    {% include elements/tw-button.html label="Tweet #bulmaio" %}
+  </div>
+</div>
+
+<main class="hugs">
+
+<article class="hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Love using Bulma for my last <a href="https://twitter.com/rails">@rails</a> project. What I like the most is that it shipped without js so it works easily with Turbolinks.</p>&mdash; Thomas Galibert (@thomasgalibert) <a href="https://twitter.com/thomasgalibert/status/889499262136045569">July 24, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> I got to know about Bulma today and love it already. Thank you for your work! Exactly I was looking for to build a landing page.</p>&mdash; Raathigeshan (@Raathigesh) <a href="https://twitter.com/Raathigesh/status/888602569148211203">July 22, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Thanks for the dropdowns man, I love &#39;em</p>&mdash; Oliver Dvorski (@oliverdvorski) <a href="https://twitter.com/oliverdvorski/status/884449239291580416">July 10, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Updated my Bulma css framework to the latest and used the new Navbar! Good stuff! <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; Josh Weaver (@3cordguy) <a href="https://twitter.com/3cordguy/status/884443272948658176">July 10, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">New bulma release solves like 7 things I was building from scratch. Thank you! <a href="https://t.co/xwMKTXd68G">https://t.co/xwMKTXd68G</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; Sarah C (@sarahsellaphix) <a href="https://twitter.com/sarahsellaphix/status/882772930194747392">July 6, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">today I&#39;ve created a reasonable static website via bulma.io by <a href="https://twitter.com/jgthms">@jgthms</a><br>I&#39;ve used 3 little JS scripts to handle classes and it was smooth AF!</p>&mdash; Andrea Giammarchi (@WebReflection) <a href="https://twitter.com/WebReflection/status/880554577187266560">June 29, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I&#39;m really liking <a href="https://twitter.com/hashtag/bulma?src=hash">#bulma</a> CSS from <a href="https://twitter.com/jgthms">@jgthms</a> - way less fragile to theme yourself than a lot of CSS frameworks. <a href="https://t.co/VX9s6VuUKX">https://t.co/VX9s6VuUKX</a></p>&mdash; Joe B (@JoeBlubaugh) <a href="https://twitter.com/JoeBlubaugh/status/879918120143540224">June 28, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">This looks awesome. Espec. horiz. &amp; vert. alignments  Bulma: a modern CSS framework based on Flexbox : <a href="https://t.co/iF8LQye3TD">https://t.co/iF8LQye3TD</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; Brentley Broughton (@babroughton) <a href="https://twitter.com/babroughton/status/879725003306147840">June 27, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Been spending an inordinate amount of time playing w/ various css frameworks for my <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a> site. Settled on <a href="https://t.co/KoRlyeoaI1">https://t.co/KoRlyeoaI1</a></p>&mdash; Julian Currie (@julian_currie) <a href="https://twitter.com/julian_currie/status/879294487301718016">June 26, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I just discovered <a href="https://t.co/5xcp1Bwfpz">https://t.co/5xcp1Bwfpz</a> by <a href="https://twitter.com/jgthms">@jgthms</a> - looks great. I&#39;m gonna take it out for a test drive <a href="https://t.co/E5bbXjCD5H">pic.twitter.com/E5bbXjCD5H</a></p>&mdash; Jeff Kelley (@JeffKelleyBV) <a href="https://twitter.com/JeffKelleyBV/status/878220062007504897">June 23, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Best framework on the web right now. Well done, please keep it up. World needs it!</p>&mdash; Anders (@anders0x) <a href="https://twitter.com/anders0x/status/877764422466322432">June 22, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Best Flexbox CSS Framework:<br>Bulma <a href="https://t.co/3BtGymZWMB">https://t.co/3BtGymZWMB</a><br><br>Thank you <a href="https://twitter.com/jgthms">@jgthms</a>, thank you.</p>&mdash; Seth Davis (@Setholito) <a href="https://twitter.com/Setholito/status/877691760226562048">June 22, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Really Appreciate <a href="https://twitter.com/jgthms">@jgthms</a>. <br>As I beginner, because of bulma.io, I could write the code and I get self‐confidence! <a href="https://twitter.com/hashtag/bulma?src=hash">#bulma</a> <a href="https://twitter.com/hashtag/css?src=hash">#css</a> <a href="https://twitter.com/hashtag/framework?src=hash">#framework</a></p>&mdash; b_y (@by_snm) <a href="https://twitter.com/by_snm/status/877010184463294465">June 20, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Bulma might be Bootstrap killer. I&#39;m really liking it.</p>&mdash; Umar Farooq Khawaja (@UmarFKhawaja) <a href="https://twitter.com/UmarFKhawaja/status/875511410008219649">June 16, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I usually hate having to write CSS, but I really like working with the lightweight Bulma (<a href="https://t.co/OAMLjKWzak">https://t.co/OAMLjKWzak</a>) by <a href="https://twitter.com/jgthms">@jgthms</a> so far 👍</p>&mdash; mario zupan (@mzupzup) <a href="https://twitter.com/mzupzup/status/874925154475929602">June 14, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Bulma framework just made my weekend better :) <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; Victor Heid K.Miko (@victorheid) <a href="https://twitter.com/victorheid/status/874200312378269696">June 12, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Redesigning a website with 500K+ visitors/yr, going to give a Bulma a try <a href="https://twitter.com/jgthms">@jgthms</a> <a href="https://t.co/IcuGfvTQrI">https://t.co/IcuGfvTQrI</a></p>&mdash; Anand Chowdhary (@AnandChowdhary) <a href="https://twitter.com/AnandChowdhary/status/871410394622865408">June 4, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Having a lot of fun building a website with <a href="https://twitter.com/GoHugoIO">@GoHugoIO</a> and <a href="https://twitter.com/jgthms">@jgthms</a> &#39;s bulma!</p>&mdash; Martin Angers (@___mna___) <a href="https://twitter.com/___mna___/status/871163877622460417">June 4, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Bulma, I think I&#39;m in love. <a href="https://t.co/APYefmC1Bs">https://t.co/APYefmC1Bs</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; Jesse Schoff (@jesseschoff) <a href="https://twitter.com/jesseschoff/status/869284735440363520">May 29, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Just found <a href="https://twitter.com/jgthms">@jgthms</a>&#39;s <a href="https://t.co/sa8Hy25rDH">https://t.co/sa8Hy25rDH</a>, an amazing css framework. Officially switching all new front-end work to this, this is amazing</p>&mdash; Alexander H. Black (@alexanderhblack) <a href="https://twitter.com/alexanderhblack/status/868730725926711296">May 28, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">So, I was making an exam and in a matter of 30 minutes I had my structure complete with responsive, Bulma is crazy. Thanks <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; Francisco Cruz (@atFranCruz) <a href="https://twitter.com/atFranCruz/status/868829487072464897">May 28, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The more I use <a href="https://twitter.com/hashtag/bulmacss?src=hash">#bulmacss</a> from the <a href="https://twitter.com/jgthms">@jgthms</a> combined with <a href="https://twitter.com/vuejs">@vuejs</a> it&#39;s truly a joy to code <a href="https://twitter.com/hashtag/webdev?src=hash">#webdev</a></p>&mdash; Kieran Glover (@kierglover) <a href="https://twitter.com/kierglover/status/864788587493154816">May 17, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Simple, beautiful and most importantly, very light. Bulma: a modern CSS framework based on Flexbox <a href="https://t.co/uv6JF2dDGJ">https://t.co/uv6JF2dDGJ</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; Anas Red (@AnasAhmar) <a href="https://twitter.com/AnasAhmar/status/862586112770023425">May 11, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/vY1ZsRScYM">https://t.co/vY1ZsRScYM</a> -- a CSS framework by <a href="https://twitter.com/jgthms">@jgthms</a> -- is lovely! No JS included, which means no JS opinions included!</p>&mdash; Robert Stuttaford (@RobStuttaford) <a href="https://twitter.com/RobStuttaford/status/860885116909998080">May 6, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Loving Bulma! This is making my day right now. Imported it into the starter theme I&#39;m using.</p>&mdash; Scott Stewart (@CarlisleStewart) <a href="https://twitter.com/CarlisleStewart/status/857590406724243456">April 27, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">.<a href="https://twitter.com/jgthms">@jgthms</a> I&#39;ve just discovered your suite of tools for web development: bulma.io &amp; cssreference.io among others. Fabulous work - thanks!</p>&mdash; Victor Verhaegen (@vicver82) <a href="https://twitter.com/vicver82/status/839423865205977088">March 8, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/ClYmBd8tGR">https://t.co/ClYmBd8tGR</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>.</p>&mdash; scottgallant (@scottgallant) <a href="https://twitter.com/scottgallant/status/835834634655174658">February 26, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey Jeremy! Been putting Bulma into a project during the last days - absolutely love it! Well done! 😍</p>&mdash; Simon Jaeger (@simonjaegr) <a href="https://twitter.com/simonjaegr/status/834140257054502913">February 21, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Reply to <a href="https://twitter.com/jgthms">@jgthms</a> Your framework is very good and lightweight compared to Twitter Bootstrap. I really like it.</p>&mdash; Ranie Santos (@raniesantos32) <a href="https://twitter.com/raniesantos32/status/834030605847326726">February 21, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Jeremys reference sites are just so friendly. Love them. <a href="https://t.co/FhNs944XH6">https://t.co/FhNs944XH6</a></p>&mdash; Ville V. Vanninen (@sakamies) <a href="https://twitter.com/sakamies/status/831866770755579904">February 15, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Are you the one behind Bulma? I am using it in one project and I am completely delightful. Thank you so much!!</p>&mdash; Francisco Cruz (@atFranCruz) <a href="https://twitter.com/atFranCruz/status/824053457527209984">January 25, 2017</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey.I just stopped by here to say thank you so much for Bulma. It made my website looks 100 times better 😍</p>&mdash; juliooooo (@juliooooo000) <a href="https://twitter.com/juliooooo000/status/819710615337857024">January 13, 2017</a></blockquote></article>
+
+<!-- 2016 -->
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Bulma is badass. Nice work all around!</p>&mdash; Shaimoom Newaz (@shaimoomn) <a href="https://twitter.com/shaimoomn/status/808825432233558016">December 14, 2016</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> love your work on bulma, you rock</p>&mdash; Andrew Cantos (@andrewcantos) <a href="https://twitter.com/andrewcantos/status/783630950718504960">October 5, 2016</a></blockquote></article>
+
+<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Thanks <a href="https://twitter.com/jgthms">@jgthms</a> for updating my favourite css framework <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a></p>&mdash; Juampe Ruiz (@juampe84) <a href="https://twitter.com/juampe84/status/779966186121560064">September 25, 2016</a></blockquote></article>
+
+</main>
+</div>

sass/components/navbar.sass

@@ -48,6 +48,7 @@ $navbar-divider-background-color: $border !default
   +overflow-touch
   align-items: stretch
   display: flex
+  flex-shrink: 0
   min-height: $navbar-height
   overflow-x: auto
   overflow-y: hidden

sass/elements/button.sass

@@ -73,7 +73,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
   &:focus,
   &.is-focused
     border-color: $button-focus-border-color
-    box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25)
+    // box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25)
     color: $button-focus-color
   &:active,
   &.is-active