Add embrace

docs/_sass/expo.sass

@@ -33,16 +33,14 @@
   .expo
     padding-bottom: 3rem
     padding-top: 3rem
-  .website:not(:last-child)
+  .website
-    margin-bottom: 3rem
+    margin-top: 3rem
+    &:nth-child(1),
+    &:nth-child(2)
+      margin-top: 0
   .website-image
     margin-bottom: 3rem
 
-+desktop
-  .expo
-    padding-bottom: 6rem
-    padding-top: 6rem
-
 +widescreen
   .websites
     display: flex

docs/_sass/love.sass

@@ -61,10 +61,6 @@
   background-color: $background
   border-radius: $radius
   padding: 1.5rem
-  &:not(:first-child)
-    margin-top: 1.5rem
-  &:not(:last-child)
-    margin-bottom: 1.5rem
 
 +mobile
   .love
@@ -73,6 +69,10 @@
     margin: 1.5rem
   .embrace
     text-align: center
+    &:not(:first-child)
+      margin-top: 1.5rem
+    &:not(:last-child)
+      margin-bottom: 1.5rem
   .embrace-button
     margin-top: 0.75rem
 
@@ -84,6 +84,10 @@
     align-items: center
     display: flex
     justify-content: center
+    &:not(:first-child)
+      margin-top: 3rem
+    &:not(:last-child)
+      margin-bottom: 3rem
   .embrace-button
     margin-left: 1.5rem
   .hugs

docs/bulma-docs.sass

@@ -30,7 +30,3 @@ html
   \::selection
     background: $primary
     color: $primary-invert
-
-@debug "hsl(294, 71%, 79%)"
-@debug colorLuminance(hsl(294, 71%, 79%))
-@debug findColorInvert(hsl(294, 71%, 79%))

docs/expo.html

@@ -1,5 +1,5 @@
 ---
-fulltitle: "Expo: great uses of Bulma"
+fulltitle: "Expo: beautiful websites designed Bulma"
 layout: default
 route: expo
 other:
@@ -47,6 +47,29 @@ websites:
   date: "31 Mar 2016"
 ---
 
+{% capture embrace_expo %}
+<div class="embrace is-expo">
+  <p class="embrace-text">
+    Did you design a gorgeous website with Bulma too? <strong>Tell us about it!</strong> <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>
+{% endcapture %}
+
 <div class="container">
   {% include navbar.html id="ExpoHero" %}
 </div>
@@ -60,7 +83,7 @@ websites:
             Expo
           </h1>
           <p class="subtitle">
-            How people used Bulma to design beautiful websites
+            How people used Bulma to design beautiful websites <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">😍</span>
           </p>
         </div>
         <div class="column is-narrow">
@@ -73,6 +96,8 @@ websites:
 
 <main class="expo">
   <div class="container">
+    {{ embrace_expo }}
+
     <div class="websites">
       {% for website in page.websites %}
         <article class="website {% if website.highlighted %}is-highlighted{% endif %}">
@@ -94,25 +119,6 @@ websites:
       {% endfor %}
     </div>
 
-    <div class="embrace">
+    {{ embrace_expo }}
-      <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

@@ -33,7 +33,7 @@ route: love
 
 <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>
+    Are you a Bulma fan too? <strong>Show your 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" %}