Init v1

docs/expo.html

@@ -1,71 +1,63 @@
 ---
-fulltitle: "Expo: beautiful websites designed Bulma"
-share_title: "⭐️ Bulma Expo: beautiful websites designed with Bulma 😍"
-share_image: "/images/expo/bulma-expo-share.png"
-share_description: "Get inspired! The Bulma Expo is a curated collection of the most beautiful websites designed with Bulma. It showcases how you can easily customize Bulma for your own personal or business needs."
 layout: default
+theme: expo
 route: expo
-breadcrumb:
-  - home
-  - expo
 ---
+{% include global/header.html %}
 
-{% include global/navbar.html id="Expo" %} {% include components/hero.html
-color="expo" icon="fas fa-star" title="The Bulma **Expo**" subtitle="How
-everyone is designing gorgeous websites using Bulma" %} {% assign encoded_url =
-'Here is my lovely website!' | urlencode %} {% assign tweet_href =
-'https://twitter.com/intent/tweet?text=' | append: encoded_url | append:
-'&hashtags=madewithbulma' %} {% capture call_button %} {% include
-elements/tw-button.html label="#madewithbulma" href=tweet_href %} {% endcapture
-%} {% include components/call.html color="twitter" 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
->' button=call_button %}
+{%
+  include docs/hero.html
+  title="Made with Bulma"
+  subtitle="Gorgeous websites built with Bulma."
+  prints=page.hero_prints
+%}
+
+{% assign encoded_url = 'Here is my lovely website!' | urlencode %}
+{% assign tweet_href = 'https://twitter.com/intent/tweet?text=' | append: encoded_url | append: '&hashtags=madewithbulma' %}
+
+{% capture call_button %}
+{% include docs/elements/tw-button.html label="#madewithbulma" href=tweet_href %}
+{% endcapture %}
+
+{% include docs/components/call.html
+  color="twitter"
+  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>'
+  button=call_button
+%}
 
 <div class="bd-websites">
   {% for website_id in site.data.expo.lists.expo %} {% assign website =
   site.data.expo.by_id[website_id] %} {% assign imageName = website_id | slugify
-  %} {% assign imagePath = "/images/expo/" | prepend: site.url | append:
+  %} {% assign imagePath = "/assets/images/expo/" | prepend: site.url | append:
   imageName %}
   <div
     class="bd-website {% if website.highlighted %}bd-is-highlighted{% endif %}"
   >
     <figure class="bd-website-image">
-      {% if website.highlighted %} {% assign size1x = "1344x840" %} {% assign
-      size2x = "2688x1680" %}
-      <img
-        class="lazyload"
-        src="{{ site.url }}/images/placeholders/empty.png"
-        data-src="{{ imagePath }}-{{ size1x }}.jpg"
-        data-srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
-                         {{ imagePath }}-{{ size1x }}.jpg 1x"
-        width="1344"
-        height="840"
-      />
-      {% else %} {% assign size1x = "672x420" %} {% assign size2x = "1344x840"
-      %}
-      <img
-        class="lazyload"
-        src="{{ site.url }}/images/placeholders/empty.png"
-        data-src="{{ imagePath }}-{{ size1x }}.jpg"
-        data-srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
-                         {{ imagePath }}-{{ size1x }}.jpg 1x"
-        width="672"
-        height="420"
-      />
+      {% if website.highlighted %}
+        {% assign size1x = "1344x840" %}
+        {% assign size2x = "2688x1680" %}
+        <img
+          src="{{ imagePath }}-{{ size1x }}.jpg"
+          srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
+                          {{ imagePath }}-{{ size1x }}.jpg 1x"
+          width="1344"
+          height="840"
+        >
+      {% else %}
+        {% assign size1x = "672x420" %} {% assign size2x = "1344x840" %}
+        <img
+          src="{{ imagePath }}-{{ size1x }}.jpg"
+          srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
+                          {{ imagePath }}-{{ size1x }}.jpg 1x"
+          width="672"
+          height="420"
+        >
       {% endif %}
-      <span class="bd-website-overlay is-overlay"></span>
     </figure>
 
     <h2 class="title is-5 bd-website-name is-marginless">{{ website.name }}</h2>
   </div>
   {% endfor %}
 </div>
-
-<script src="{{ site.url }}/vendor/lazyload-2.0.0-beta.2.min.js"></script>
-<script type="text/javascript">
-  (function () {
-    lazyload();
-  })();
-</script>