Add expo

docs/_includes/navbar.html

@@ -144,6 +144,10 @@
           </a>
         </div>
       </div>
+      <a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
+        <span class="emoji">🎨</span>
+        Expo
+      </a>
       <a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
         <span class="emoji">❤️</span>
         Love
@@ -151,10 +155,10 @@
     </div>
 
     <div class="navbar-end">
-      <a class="navbar-item" href="{{ site.github }}" target="_blank">
+      <a class="navbar-item is-hidden-desktop-only" href="{{ site.github }}" target="_blank">
         Github
       </a>
-      <a class="navbar-item" href="{{ site.twitter }}" target="_blank">
+      <a class="navbar-item is-hidden-desktop-only" href="{{ site.twitter }}" target="_blank">
         Twitter
       </a>
       <div class="navbar-item">

docs/_includes/testimonials.html

@@ -1,31 +1,31 @@
 <div class="container">
   <div class="columns">
     <div class="column is-4">
-      <article class="love">
+      <article class="testimonial">
         <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">
+      <article class="testimonial">
         <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">
+      <article class="testimonial">
         <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">
+      <article class="testimonial">
         <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">
+      <article class="testimonial">
         <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">
+      <article class="testimonial">
         <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>

docs/_sass/expo.sass

@@ -0,0 +1,54 @@
+.expo
+  background-color: $background
+  background-color: $white
+  padding: 1.5rem
+
+.website
+  display: block
+  position: relative
+  text-align: center
+  &:last-child
+    margin-bottom: 0
+
+.website-image
+  align-items: center
+  display: flex
+  justify-content: center
+  margin-bottom: 1.5rem
+  position: relative
+  &:hover
+    .website-overlay
+      opacity: 0.25
+
+.website-overlay
+  background-color: $black
+  opacity: 0
+  transition: opacity 200ms $easing
+
++mobile
+  .website:not(:last-child)
+    margin-bottom: 1.5rem
+
++tablet
+  .expo
+    padding-bottom: 3rem
+    padding-top: 3rem
+  .website:not(:last-child)
+    margin-bottom: 3rem
+  .website-image
+    margin-bottom: 3rem
+
++desktop
+  .expo
+    padding-bottom: 6rem
+    padding-top: 6rem
+
++widescreen
+  .websites
+    display: flex
+    flex-wrap: wrap
+    justify-content: space-between
+  .website
+    width: calc(50% - 3rem)
+    &.is-highlighted
+      width: 100%

docs/_sass/love.sass

@@ -1,7 +1,7 @@
 .testimonials
   background-color: $background
 
-.love
+.testimonial
   align-items: flex-start
   display: flex
   justify-content: center
@@ -25,13 +25,13 @@
 +mobile
   .testimonials
     padding: 1.5rem
-  .love
+  .testimonial
     margin-bottom: 1.5rem
 
 +tablet
   .testimonials
     padding: 3rem
-  .love + .love
+  .testimonial + .testimonial
     margin-top: 1.5rem
 
 .rainbow
@@ -57,24 +57,35 @@
   display: flex
   justify-content: center
 
-.more-love-container
-  align-items: center
+.embrace
   background-color: $background
   border-radius: $radius
-  display: flex
-  justify-content: center
   padding: 1.5rem
-  .tw-button
-    margin-left: 1.5rem
+  &:not(:first-child)
+    margin-top: 1.5rem
+  &:not(:last-child)
+    margin-bottom: 1.5rem
 
 +mobile
-  .hug,
-  .more-love
+  .love
+    padding: 1.5rem
+  .hug
     margin: 1.5rem
+  .embrace
+    text-align: center
+  .embrace-button
+    margin-top: 0.75rem
 
 +tablet
-  .more-love
-    margin: 3rem 0 1.5rem
+  .love
+    padding-bottom: 3rem
+    padding-top: 3rem
+  .embrace
+    align-items: center
+    display: flex
+    justify-content: center
+  .embrace-button
+    margin-left: 1.5rem
   .hugs
     display: flex
     flex-wrap: wrap

docs/bulma-docs.sass

@@ -16,6 +16,7 @@ $twitter: #55acee
 @import "./_sass/bsa"
 @import "./_sass/route"
 @import "./_sass/twitter"
+@import "./_sass/expo"
 @import "./_sass/love"
 
 \:root

docs/expo.html

@@ -0,0 +1,118 @@
+---
+fulltitle: "Expo: great uses of Bulma"
+layout: default
+route: expo
+other:
+- name: Apache BookKeeper
+  url: https://lucperkins.github.io/bookkeeper/
+  date: "26 Jul 2017"
+websites:
+- name: Bashful Birdie
+  url: http://www.bashfulbirdie.com/
+  date: "24 Jul 2017"
+- name: Bugcraft Studio
+  url: https://noggaholic.github.io
+  date: "24 Jul 2017"
+- name: Booknshelf
+  url: https://booknshelf.com/
+  date: "20 Jul 2017"
+- name: MD5
+  url: https://desforets.github.io/md5/
+  date: "24 Jun 2017"
+- name: Driftrock
+  url: https://www.driftrock.com/
+  date: "13 Jul 2017"
+  highlighted: true
+- name: Jubiwee
+  url: https://www.jubiwee.com/fr/
+  date: "24 Jun 2017"
+- name: Pragonauts
+  url: http://pragonauts.com/
+  date: "23 Jun 2017"
+- name: Kappamon
+  url: https://kappamon.com/
+  date: "23 Jun 2017"
+- name: Elevo
+  url: http://www.elevo.fr/
+  date: "23 Jun 2017"
+- name: Oneday
+  url: https://www.oneday.design/
+  date: "8 Dec 2016"
+  highlighted: true
+- name: Buefy
+  url: https://buefy.github.io/
+  date: "10 Apr 2017"
+- name: Alt Three
+  url: https://alt-three.com/
+  date: "31 Mar 2016"
+---
+
+<div class="container">
+  {% include navbar.html id="ExpoHero" %}
+</div>
+
+<section class="hero is-success">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-vcentered">
+        <div class="column">
+          <h1 class="title">
+            Expo
+          </h1>
+          <p class="subtitle">
+            How people used Bulma to design beautiful websites
+          </p>
+        </div>
+        <div class="column is-narrow">
+          {% include carbon.html %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<main class="expo">
+  <div class="container">
+    <div class="websites">
+      {% for website in page.websites %}
+        <article class="website {% if website.highlighted %}is-highlighted{% endif %}">
+          <a class="website-image" href="{{ website.url }}" target="_blank">
+            <img
+              src="{{ site.url }}/images/expo/{{ website.name | slugify }}.jpg"
+              srcset="{{ site.url }}/images/expo/{{ website.name | slugify }}@2x.jpg 2x"
+              width="1344"
+              height="840">
+            <span class="website-overlay is-overlay"></span>
+          </a>
+          <h2 class="title is-5 website-name is-marginless">
+            {{ website.name }}
+          </h2>
+          <p class="has-text-grey-light website-date">
+            {{ website.date }}
+          </p>
+        </article>
+      {% endfor %}
+    </div>
+
+    <div class="embrace">
+      <p class="embrace-text">
+        Did you design a <strong>gorgeous website</strong> with Bulma too? <strong>Tell us</strong> about it! <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">🤗</span>
+      </p>
+      <p class="embrace-button">
+        <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={{ 'Here is my lovely website!' | urlencode }}&hashtags=madewithbulma&url={{ site.url }}">
+          <span class="icon">
+            <i class="fa fa-twitter"></i>
+          </span>
+          <span>
+            #madewithbulma
+          </span>
+        </a>
+      </p>
+    </div>
+  </div>
+</main>

docs/love.html

@@ -28,18 +28,19 @@ route: love
   </div>
 </section>
 
+<main class="love">
 <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>
+<div class="embrace">
+  <p class="embrace-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>
+  <p class="embrace-button">
     {% include elements/tw-button.html label="Tweet #bulmaio" %}
-  </div>
+  </p>
 </div>
 
-<main class="hugs">
+<div 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>
 
@@ -113,5 +114,6 @@ route: love
 
 <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>
+</div>
+</main>

sass/elements/other.sass

@@ -6,26 +6,26 @@
   position: relative
   +desktop
     max-width: $desktop - (2 * $gap)
-    width: $desktop - (2 * $gap)
+    // width: $desktop - (2 * $gap)
     &.is-fluid
       margin-left: $gap
       margin-right: $gap
       max-width: none
-      width: auto
+      // width: auto
   +until($widescreen)
     &.is-widescreen
       max-width: $widescreen - (2 * $gap)
-      width: auto
+      // width: auto
   +until($fullhd)
     &.is-fullhd
       max-width: $fullhd - (2 * $gap)
-      width: auto
+      // width: auto
   +widescreen
     max-width: $widescreen - (2 * $gap)
-    width: $widescreen - (2 * $gap)
+    // width: $widescreen - (2 * $gap)
   +fullhd
     max-width: $fullhd - (2 * $gap)
-    width: $fullhd - (2 * $gap)
+    // width: $fullhd - (2 * $gap)
 
 .delete
   +delete