Add drawings

docs/_includes/components/categories.html

@@ -11,7 +11,7 @@
             <i class="fas fa-chevron-down"></i>
           </span>
         </a>
-        <a class="bd-category-name" href="{{ site.url }}{{ category_link.path }}">
+        <a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
           <strong>{{ category_link.name }}</strong>
         </a>
       </header>

docs/_includes/components/more.html

@@ -1,10 +1,12 @@
+{% assign current_link_id = page.breadcrumb | last %}
+
 <nav class="bd-categories">
   {% for link_id in site.data.links.more %}
     {% assign link = site.data.links.by_id[link_id] %}
 
     <div class="bd-category">
       <header class="bd-category-header">
-        <a class="bd-category-name" href="{{ site.url }}{{ link.path }}">
+        <a class="bd-category-name {% if link_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}">
           <strong>{{ link.name }}</strong>
         </a>
       </header>

docs/_includes/elements/drawing.html

@@ -0,0 +1,6 @@
+<img
+  class="bd-drawing bd-is-{{ include.id }}"
+  src="{{ site.url }}/images/drawing/{{ include.id }}.png"
+  width="{{ include.width }}"
+  height="{{ include.height }}"
+>

docs/_includes/elements/tw.html

@@ -1,6 +1,6 @@
 {% assign twUrl = "https://twitter.com/" | append: include.tweet.username | append: "/status/" | append: include.tweet.id %}
 
-<article class="bd-tw {{ include.modifier }}">
+<article class="bd-tw {{ include.modifier }} {% if include.drawing_id %}bd-has-drawing{% endif %}">
   <header class="bd-tw-header">
     <a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
       <figure class="bd-tw-avatar">
@@ -54,4 +54,12 @@
       </a>
     </li>
   </ul>
+
+  {% if include.drawing_id %}
+    {% include elements/drawing.html
+      id=include.drawing_id
+      width=include.drawing_width
+      height=include.drawing_height
+    %}
+  {% endif %}
 </article>

docs/_includes/elements/tws.html

@@ -13,7 +13,14 @@
     </div>
 
     <div class="column is-4">
-      {% assign tweet = site.data.love.tweets_by_id.915580081938018304 %}{% include elements/tw.html tweet=tweet%}
+      {% assign tweet = site.data.love.tweets_by_id.915580081938018304 %}
+      {% include
+        elements/tw.html
+        tweet=tweet
+        drawing_id='love-letters'
+        drawing_width=240
+        drawing_height=120
+      %}
       {% assign tweet = site.data.love.tweets_by_id.903629781744439297 %}{% include elements/tw.html tweet=tweet%}
       {% assign tweet = site.data.love.tweets_by_id.909653512010833920 %}{% include elements/tw.html tweet=tweet%}
     </div>

docs/_includes/global/newsletter.html

@@ -14,7 +14,9 @@
               <span class="icon is-small is-left">
                 <i class="fas fa-envelope"></i>
               </span>
+              {% include elements/drawing.html id='spam-free' width=112 height=88 %}
             </div>
+
             <div class="control">
               <div class="is-hidden">
                 <input type="text" name="hp" id="hp">

docs/_includes/index/columns.html

@@ -97,13 +97,14 @@
 
     <div class="bd-columns-tools">
       <div class="bd-columns-tool bd-is-try">
-        <div class="buttons">
+        <div class="buttons bd-has-drawing">
           <a id="add" class="button is-large is-link is-unselectable">
             <strong>Add column</strong>
           </a>
           <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 %}
         </div>
       </div>
 

docs/_includes/index/customize.html

@@ -15,8 +15,9 @@
 
     <div class="columns">
       <div class="column is-6">
-        <div class="highlight-full">
+        <div class="highlight-full bd-has-drawing">
           {% highlight scss %}{% include snippets/customized.html %}{% endhighlight %}
+          {% include elements/drawing.html id='customize' width=152 height=76 %}
         </div>
       </div>
 

docs/_includes/index/js.html

@@ -20,7 +20,14 @@
       <div class="column">
         <div class="bd-index-js-tweet">
           {% assign tweet = site.data.love.tweets_by_id.860885116909998080 %}
-          {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
+          {% include
+            elements/tw.html
+            tweet=tweet
+            modifier='bd-is-grey'
+            drawing_id='opinion-free'
+            drawing_width=152
+            drawing_height=52
+          %}
         </div>
       </div>
     </div>

docs/_includes/index/modifiers.html

@@ -16,7 +16,14 @@
         </header>
 
         {% assign tweet = site.data.love.tweets_by_id.868829487072464897 %}
-        {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
+        {% include
+          elements/tw.html
+          tweet=tweet
+          modifier='bd-is-grey'
+          drawing_id='crazy'
+          drawing_width=108
+          drawing_height=48
+        %}
       </div>
 
       <div class="column">

docs/_includes/index/start.html

@@ -5,8 +5,9 @@
   <div class="container">
     <header class="bd-index-header">
       <h3 class="title is-3">
-        <a href="{{ docs_url }}">
+        <a class="bd-has-drawing" href="{{ docs_url }}">
           And so <strong>much more</strong>
+          {% include elements/drawing.html id='join-us' width=86 height=86 %}
         </a>
       </h3>
       <h4 class="subtitle is-4">

docs/_sass/main.sass

@@ -124,6 +124,8 @@
 .bd-category-name
   color: $text-strong
   position: relative
+  &.is-active
+    color: $link
 
 .bd-category-list
   @extend %bd-list

docs/_sass/specific.sass

@@ -2,6 +2,39 @@
   background-color: $primary
   color: $primary-invert
 
+.bd-has-drawing
+  position: relative
+
+.bd-drawing
+  display: none
+  pointer-events: none
+  position: absolute
+  &.bd-is-try-it-out
+    bottom: 100%
+    right: 100%
+  &.bd-is-love-letters
+    bottom: 110%
+    right: 10%
+  &.bd-is-crazy
+    left: -10%
+    top: 110%
+  &.bd-is-customize
+    right: -10%
+    top: 105%
+  &.bd-is-opinion-free
+    right: 100%
+    top: 110%
+  &.bd-is-join-us
+    bottom: 80%
+    left: 100%
+  &.bd-is-spam-free
+    bottom: 100%
+    right: 90%
+
++tablet
+  .bd-drawing
+    display: inline
+
 .bd-links
   counter-reset: bd-links
 

docs/css/bulma-docs.css

@@ -9772,6 +9772,10 @@ label.panel-block:hover {
   position: relative;
 }
 
+.bd-category-name.is-active {
+  color: #3273dc;
+}
+
 .bd-category-list {
   display: none;
   padding: 0.5rem;
@@ -11107,6 +11111,57 @@ svg {
   color: #fff;
 }
 
+.bd-has-drawing {
+  position: relative;
+}
+
+.bd-drawing {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+.bd-drawing.bd-is-try-it-out {
+  bottom: 100%;
+  right: 100%;
+}
+
+.bd-drawing.bd-is-love-letters {
+  bottom: 110%;
+  right: 10%;
+}
+
+.bd-drawing.bd-is-crazy {
+  left: -10%;
+  top: 110%;
+}
+
+.bd-drawing.bd-is-customize {
+  right: -10%;
+  top: 105%;
+}
+
+.bd-drawing.bd-is-opinion-free {
+  right: 100%;
+  top: 110%;
+}
+
+.bd-drawing.bd-is-join-us {
+  bottom: 80%;
+  left: 100%;
+}
+
+.bd-drawing.bd-is-spam-free {
+  bottom: 100%;
+  right: 90%;
+}
+
+@media screen and (min-width: 769px), print {
+  .bd-drawing {
+    display: inline;
+  }
+}
+
 .bd-links {
   counter-reset: bd-links;
 }

docs/expo.html

@@ -156,7 +156,7 @@ websites:
               Expo
             </h1>
             <p class="subtitle is-4">
-              How people used Bulma to design beautiful websites <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">😍</span>
+              How people use Bulma to design beautiful websites <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">😍</span>
             </p>
           </div>