Add drawings

diff --git a/docs/_includes/components/categories.html b/docs/_includes/components/categories.html
index 8011ebe0062f0f93c04db488f387d3b61b4ed633..e7f23740dfb3a0d3fefafe2da39f2869daf0ada9 100644 (file)
--- a/docs/_includes/components/categories.html
+++ b/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>

diff --git a/docs/_includes/components/more.html b/docs/_includes/components/more.html
index de2d22a2d2999526c62c431aa1744da658a9d01c..f209d00c66241c9c5076c9c9c7032ad23968abfe 100644 (file)
--- a/docs/_includes/components/more.html
+++ b/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>

diff --git a/docs/_includes/elements/drawing.html b/docs/_includes/elements/drawing.html
new file mode 100644 (file)
index 0000000..52e2508
--- /dev/null
+++ b/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 }}"
+>

diff --git a/docs/_includes/elements/tw.html b/docs/_includes/elements/tw.html
index 70f16378f7dd230dc362ec5f08297ec48a1356c1..e3aaa18d8843b16e96a804ba841251697f1261e3 100644 (file)
--- a/docs/_includes/elements/tw.html
+++ b/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>

diff --git a/docs/_includes/elements/tws.html b/docs/_includes/elements/tws.html
index 009edf03030340d9cb22d92e9cd385fb83d81a01..45b54e0f631d999a857b0ad1b2118af1aecdfbba 100644 (file)
--- a/docs/_includes/elements/tws.html
+++ b/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>

diff --git a/docs/_includes/global/newsletter.html b/docs/_includes/global/newsletter.html
index dc58609a5627d5213b630b062ba1b5155f2602cd..3442823dc16612f2fa965af7ea5576629fbcbfe3 100644 (file)
--- a/docs/_includes/global/newsletter.html
+++ b/docs/_includes/global/newsletter.html
@@ -8,23 +8,25 @@
 
       <div class="column">
         <form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
-            <div class="field is-grouped">
-              <div class="control has-icons-left is-expanded">
-                <input type="email" value="" name="email" class="input is-medium is-flat" placeholder="email address" required>
-                <span class="icon is-small is-left">
-                  <i class="fas fa-envelope"></i>
-                </span>
-              </div>
-              <div class="control">
-                <div class="is-hidden">
-                  <input type="text" name="hp" id="hp">
-                </div>
-                <input type="hidden" name="list" value="So5UY3O9gHJkq892bn763Tyf4A">
-                <button class="button is-medium is-link">
-                  <strong>Subscribe</strong>
-                </button>
+          <div class="field is-grouped">
+            <div class="control has-icons-left is-expanded">
+              <input type="email" value="" name="email" class="input is-medium is-flat" placeholder="email address" required>
+              <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">
               </div>
+              <input type="hidden" name="list" value="So5UY3O9gHJkq892bn763Tyf4A">
+              <button class="button is-medium is-link">
+                <strong>Subscribe</strong>
+              </button>
             </div>
+          </div>
         </form>
       </div>
     </div>

diff --git a/docs/_includes/index/columns.html b/docs/_includes/index/columns.html
index 4907a381fdbce9fd09169edb0b2af7ef07a25a60..dfe0b40ce2c4c940f2a0242bb5b444a5ff04fb2f 100644 (file)
--- a/docs/_includes/index/columns.html
+++ b/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>
 

diff --git a/docs/_includes/index/customize.html b/docs/_includes/index/customize.html
index 8a1680a891a9f3b5579b58ee5cfc57876e23f584..7352811c1aa3207246e90eed0b2f40c548a36dc9 100644 (file)
--- a/docs/_includes/index/customize.html
+++ b/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>
 

diff --git a/docs/_includes/index/js.html b/docs/_includes/index/js.html
index 543c4e1e143268193fc60b1d5ae736a03c566676..787deade3c031b3f58155bb4e01885294d2fa1c2 100644 (file)
--- a/docs/_includes/index/js.html
+++ b/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>

diff --git a/docs/_includes/index/modifiers.html b/docs/_includes/index/modifiers.html
index f03254027ff0592cd5b0670bfc76df4fab3e8786..b50a600f8c83a1791f75b9f0027d946759d65715 100644 (file)
--- a/docs/_includes/index/modifiers.html
+++ b/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">

diff --git a/docs/_includes/index/start.html b/docs/_includes/index/start.html
index 1120d1719fbef4478ef83ddb6b44c541c88a53c9..9710dd3d54e1181c5c0bdd5e5814a8b162150437 100644 (file)
--- a/docs/_includes/index/start.html
+++ b/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">

diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass
index a6ca2d2a7a895bbb72373eec25d9a205e1cbde91..2327bc78eb51a1a4fbdf321f794e5c5b3d09cd21 100644 (file)
--- a/docs/_sass/main.sass
+++ b/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

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index 8e69a1bddb404039e0968d6233d77ae6022e4546..076ad59885c6cce4cdb7b24eea3d41ad7bf71999 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/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
 

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 8cb186f4030cf4c0d48a742c11c126514063da6e..5f0c7692e820e65a9ec0fed43112ec35792ca740 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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;
 }

diff --git a/docs/expo.html b/docs/expo.html
index 350bb26595e300a5ae10d7e13fe22f830e3558bf..14e0af4d4de30530739601fe58dfb00c19eeeb27 100644 (file)
--- a/docs/expo.html
+++ b/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>
 

diff --git a/docs/images/drawing/crazy.png b/docs/images/drawing/crazy.png
new file mode 100644 (file)
index 0000000..92b808a
Binary files /dev/null and b/docs/images/drawing/crazy.png differ

diff --git a/docs/images/drawing/customize.png b/docs/images/drawing/customize.png
new file mode 100644 (file)
index 0000000..026ae31
Binary files /dev/null and b/docs/images/drawing/customize.png differ

diff --git a/docs/images/drawing/join-us.png b/docs/images/drawing/join-us.png
new file mode 100644 (file)
index 0000000..21060e7
Binary files /dev/null and b/docs/images/drawing/join-us.png differ

diff --git a/docs/images/drawing/love-letters.png b/docs/images/drawing/love-letters.png
new file mode 100644 (file)
index 0000000..8eae042
Binary files /dev/null and b/docs/images/drawing/love-letters.png differ

diff --git a/docs/images/drawing/opinion-free.png b/docs/images/drawing/opinion-free.png
new file mode 100644 (file)
index 0000000..b865eb9
Binary files /dev/null and b/docs/images/drawing/opinion-free.png differ

diff --git a/docs/images/drawing/spam-free.png b/docs/images/drawing/spam-free.png
new file mode 100644 (file)
index 0000000..7154587
Binary files /dev/null and b/docs/images/drawing/spam-free.png differ

diff --git a/docs/images/drawing/try-it-out.png b/docs/images/drawing/try-it-out.png
new file mode 100644 (file)
index 0000000..cb7b251
Binary files /dev/null and b/docs/images/drawing/try-it-out.png differ