Update Expo April 2020

docs/_data/expo.json

@@ -1,5 +1,31 @@
 {
   "by_id": {
+    "romes": {
+      "name": "romes",
+      "url": "https://alt-romes.github.io/romes/",
+      "highlighted": true,
+      "date": "24 Mar 2020"
+    },
+    "pentos": {
+      "name": "Pentos",
+      "url": "https://pentos.co/",
+      "date": "Feb 26 2020"
+    },
+    "infinitysearch": {
+      "name": "Infinity Search",
+      "url": "https://infinitysearch.co/",
+      "date": "18 Mar 2020"
+    },
+    "vinetos": {
+      "name": "Vinetos",
+      "url": "https://www.vinetos.fr/",
+      "date": "9 Mar 2020"
+    },
+    "vivohostel": {
+      "name": "Vivo Hostel",
+      "url": "https://vivohostel.co/",
+      "date": "27 Feb 2020"
+    },
     "oneprofile": {
       "name": "oneprofile",
       "url": "https://www.oneprofile.info/",
@@ -363,13 +389,13 @@
     }
   },
   "lists": {
-    "home": [
-      "getbedtimestories",
-      "divjoy",
-      "counternetwork",
-      "Gustav"
-    ],
+    "home": ["getbedtimestories", "divjoy", "counternetwork", "Gustav"],
     "expo": [
+      "romes",
+      "vinetos",
+      "infinitysearch",
+      "pentos",
+      "vivohostel",
       "oneprofile",
       "formalfounder",
       "klimchuk",

docs/_includes/components/hero-buttons.html

@@ -0,0 +1,11 @@
+<div class="bd-index-buttons hero-buttons">
+  <a
+    class="button is-large is-primary is-light"
+    href="{{ site.url }}{{ include.href }}"
+  >
+    {{ include.content }}
+    <span class="icon">
+      <i class="fas fa-arrow-right"></i>
+    </span>
+  </a>
+</div>

docs/_includes/index/columns.html

@@ -6,9 +6,8 @@
   <div class="column">4</div>
   <div class="column">5</div>
 </div>
-{% endcapture %}
-
-{% assign columns_link = site.data.links.by_id['columns-basics'] %}
+{% endcapture %} {% assign columns_link =
+site.data.links.by_id['columns-basics'] %}
 
 <section class="bd-columns section is-medium">
   <div class="container">
@@ -28,7 +27,9 @@
         Better on desktop
       </p>
       <p class="message-body">
-        This interactive tool works better on larger screens! That's because Bulma columns are <strong>vertical by default</strong>. I recommend revisiting this page later when you're on desktop. 😉
+        This interactive tool works better on larger screens! That's because
+        Bulma columns are <strong>vertical by default</strong>. I recommend
+        revisiting this page later when you're on desktop. 😉
       </p>
     </div>
 
@@ -104,7 +105,8 @@
           <a id="remove" class="button is-large is-light is-unselectable">
             <strong>Remove</strong>
           </a>
-          {% include elements/drawing.html id='try-it-out' width=150 height=65 %}
+          {% include elements/drawing.html id='try-it-out' width=150 height=65
+          %}
         </div>
       </div>
 
@@ -117,8 +119,15 @@
 
     <div id="message" class="message is-info">
       <p class="message-header">Info</p>
-      <p class="message-body">While it's possible to add as many columns as you want, it is recommended to stick with <strong>12 columns</strong>.<br>
-      If you want smaller divisions, you can always <strong>nest</strong> columns.</p>
+      <p class="message-body">
+        While it's possible to add as many columns as you want, it is
+        recommended to stick with <strong>12 columns</strong>.<br />
+        If you want smaller divisions, you can always
+        <strong>nest</strong> columns.
+      </p>
     </div>
+
+    {% include components/hero-buttons.html href=columns_link.path
+    content="<span>See <strong>Columns</strong> docs</span>" %}
   </div>
 </section>

docs/_includes/index/customize.html

@@ -12,19 +12,17 @@
         Simply set your own Sass variables before importing Bulma
       </h4>
       <div class="bd-index-custom-tweet">
-        {% include
-          elements/tw.html
-          tweet_id="1070320154452656128"
-          modifier='bd-is-grey'
-        %}
+        {% include elements/tw.html tweet_id="1070320154452656128"
+        modifier='bd-is-grey' %}
       </div>
     </header>
 
     <div class="columns">
       <div class="column is-6">
         <div class="highlight-full bd-has-drawing">
-          {% highlight scss %}{% include snippets/customized.html %}{% endhighlight %}
-          {% include elements/drawing.html id='customize' width=152 height=76 %}
+          {% highlight scss %}{% include snippets/customized.html %}{%
+          endhighlight %} {% include elements/drawing.html id='customize'
+          width=152 height=76 %}
         </div>
       </div>
 
@@ -36,11 +34,15 @@
               Bulma
             </h1>
             <p class="subtitle">
-              Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
+              Modern CSS framework based on
+              <a
+                href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
+                >Flexbox</a
+              >
             </p>
             <div class="field">
               <div class="control">
-                <input class="input" type="text" placeholder="Input">
+                <input class="input" type="text" placeholder="Input" />
               </div>
             </div>
             <div class="field">
@@ -66,11 +68,15 @@
               Bulma
             </h1>
             <p class="subtitle">
-              Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
+              Modern CSS framework based on
+              <a
+                href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
+                >Flexbox</a
+              >
             </p>
             <div class="field">
               <div class="control">
-                <input class="input" type="text" placeholder="Input">
+                <input class="input" type="text" placeholder="Input" />
               </div>
             </div>
             <div class="field">
@@ -90,5 +96,9 @@
         </div>
       </div>
     </div>
+
+    {% include components/hero-buttons.html href=customize_link.path
+    content="<span>Learn how to <strong>customize</strong></span
+    >" %}
   </div>
 </section>

docs/_includes/index/fullheight.html

@@ -23,6 +23,18 @@
           Include any content you want, it's always centered
         </h4>
       </header>
+
+      <nav class="buttons is-centered">
+        <a
+          class="button is-large is-primary"
+          href="{{ site.url }}{{ hero_link.path }}"
+        >
+          <span>Check out the <strong>Hero component</strong></span>
+          <span class="icon">
+            <i class="fas fa-arrow-right"></i>
+          </span>
+        </a>
+      </nav>
     </div>
   </div>
 

docs/_includes/index/modifiers.html

@@ -15,14 +15,9 @@
           </h4>
         </header>
 
-        {% include
-          elements/tw.html
-          tweet_id="868829487072464897"
-          modifier='bd-is-grey'
-          drawing_id='crazy'
-          drawing_width=108
-          drawing_height=48
-        %}
+        {% include elements/tw.html tweet_id="868829487072464897"
+        modifier='bd-is-grey' drawing_id='crazy' drawing_width=108
+        drawing_height=48 %}
       </div>
 
       <div class="column">
@@ -60,5 +55,9 @@
         </div>
       </div>
     </div>
+
+    {% include components/hero-buttons.html href=modifiers_link.path
+    content="<span>Learn the <strong>modifiers syntax</strong></span
+    >" %}
   </div>
 </section>

docs/_includes/index/sponsor.html

@@ -2,29 +2,31 @@
   <div class="container">
     <div class="bd-minis">
       <p class="bd-minis-title">
-        {% assign mini_item = site.data.global.navbar_items[2] %}
+        {% assign mini_item = site.data.global.navbar_items[1] %}
         <a class="bd-minis-link" href="{{ site.url }}/{{ mini_item.id }}">
           <span class="icon {{ mini_item.color }}">
-            <i class="{{ mini_item.fa_type }} {{ mini_item.fa_icon }}"></i>
-          </span>From the expo <strong>#builtwithbulma</strong>
+            <i
+              class="{{ mini_item.fa_type }} {{ mini_item.fa_icon }}"
+            ></i> </span
+          >From the expo <strong>#builtwithbulma</strong>
         </a>
       </p>
       <div class="bd-minis-list">
-        {% for website_id in site.data.expo.lists.home %}
-          {% assign website = site.data.expo.by_id[website_id] %}
-          {% assign imageName = website_id | slugify %}
-          {% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %}
-          {% assign size1x = "672x420" %}
-          {% assign size2x = "1344x840" %}
-          <a class="bd-mini" href="{{ site.url }}/{{ mini_item.id }}">
-            <img
-              src="{{ imagePath }}-{{ size1x }}.jpg"
-              data-src="{{ imagePath }}-{{ size1x }}.jpg"
-              data-srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
+        {% for website_id in site.data.expo.lists.home %} {% assign website =
+        site.data.expo.by_id[website_id] %} {% assign imageName = website_id |
+        slugify %} {% assign imagePath = "/images/expo/" | prepend: site.url |
+        append: imageName %} {% assign size1x = "672x420" %} {% assign size2x =
+        "1344x840" %}
+        <a class="bd-mini" href="{{ site.url }}/{{ mini_item.id }}">
+          <img
+            src="{{ imagePath }}-{{ size1x }}.jpg"
+            data-src="{{ imagePath }}-{{ size1x }}.jpg"
+            data-srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
                            {{ imagePath }}-{{ size1x }}.jpg 1x"
-              width="672"
-              height="420">
-          </a>
+            width="672"
+            height="420"
+          />
+        </a>
         {% endfor %}
       </div>
     </div>

docs/_sass/index.sass

@@ -1,5 +1,13 @@
 // Index common
 
++mobile
+  .bd-index-buttons
+    margin-top: 3rem
+
++tablet
+  .bd-index-buttons
+    margin-top: 6rem
+
 .bd-index-header
   text-align: center
   a,

docs/css/bulma-docs.css

@@ -11771,6 +11771,18 @@ svg {
   }
 }
 
+@media screen and (max-width: 768px) {
+  .bd-index-buttons {
+    margin-top: 3rem;
+  }
+}
+
+@media screen and (min-width: 769px), print {
+  .bd-index-buttons {
+    margin-top: 6rem;
+  }
+}
+
 .bd-index-header {
   text-align: center;
 }