Add GitHub sponsor button

docs/_data/expo.json

@@ -1,5 +1,10 @@
 {
   "by_id": {
+    "sinuous": {
+      "name": "Sinuous",
+      "url": "https://sinuous.netlify.com/",
+      "date": "21 Sep 2019"
+    },
     "divjoy": {
       "name": "Divjoy",
       "url": "https://divjoy.com/",
@@ -50,7 +55,6 @@
     },
     "mynameismirko2018": {
       "name": "mynameismirko",
-      "highlighted": true,
       "url": "http://2018.mynameismirko.it/",
       "date": "26 Jan 2019"
     },
@@ -347,6 +351,7 @@
       "bulmaplay",
       "filegator",
       "counternetwork",
+      "sinuous",
       "agilox",
       "pingstack",
       "mynameismirko2018",

docs/_data/links.json

@@ -482,14 +482,22 @@
     },
     "videos": {
       "name": "Videos",
+      "color": "success",
+      "icon": "play-circle",
+      "title": "Videos",
       "path": "/videos"
     },
     "blog": {
       "name": "Blog",
+      "title": "Blog",
+      "subtitle": "Stay updated with new features",
+      "color": "orange",
+      "icon": "rss",
       "path": "/blog"
     },
     "expo": {
       "name": "Expo",
+      "title": "Expo",
       "subtitle": "Official Bulma showcase",
       "icon": "star",
       "color": "star",
@@ -497,11 +505,23 @@
     },
     "love": {
       "name": "Love",
+      "title": "Love",
       "subtitle": "Fans of Bulma around the world",
       "color": "danger",
       "icon": "heart",
       "path": "/love"
     },
+    "backers": {
+      "id": "backers",
+      "name": "Patreon Backers",
+      "title": "Backers",
+      "color": "patreon",
+      "icon": "patreon",
+      "path": "/backers",
+      "icon_brand": true,
+      "subtitle": "Everyone who is supporting Bulma",
+      "description": "Everyone who is supporting Bulma"
+    },
     "more": {
       "name": "More",
       "path": "/more"
@@ -543,8 +563,15 @@
       "path": "/extensions"
     }
   },
+  "navbar": [
+    "videos",
+    "expo",
+    "love",
+    "backers"
+  ],
   "more": [
-    "patreon-backers",
+    "backers",
+    "blog",
     "made-with-bulma",
     "bootstrap",
     "extensions",

docs/_includes/components/categories.html

@@ -14,7 +14,7 @@
         <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>
           {% if category_link.name == 'Customize' %}
-            <span class="tag is-success">
+            <span class="tag bd-mini-tag is-success">
               New!
             </span>
           {% endif %}

docs/_includes/elements/github.html

@@ -0,0 +1,7 @@
+<a class="button bd-github-button" href="https://github.com/users/jgthms/sponsorship" target="_blank">
+  <span class="icon">
+    <i class="fas fa-heart"></i>
+  </span>
+  <strong>Sponsor</strong>
+  <em class="tag bd-mini-tag is-small is-success">New!</em>
+</a>

docs/_includes/footer/support.html

@@ -38,6 +38,7 @@
         <strong>Monthly</strong> donation
       </p>
       <div class="bd-footer-donation-action">
+        {% include elements/github.html %}
         {% include elements/patreon.html %}
       </div>
     </div>

docs/_includes/global/navbar.html

@@ -33,18 +33,19 @@
         <span class="is-hidden-touch is-hidden-widescreen">
           Docs
         </span>
-        <span class="is-hidden-desktop-only">
+        <span class="is-hidden-tablet-only is-hidden-desktop-only">
           Documentation
         </span>
       </a>
 
-      {% for item in site.data.global.navbar_items %}
-        <a class="navbar-item bd-navbar-item-{{ item.id }} {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
-          <span class="icon {{ item.color }}">
-            <i class="{{ item.fa_type }} {{ item.fa_icon }}"></i>
+      {% for link_id in site.data.links.navbar %}
+        {% assign link = site.data.links.by_id[link_id] %}
+        <a class="navbar-item bd-navbar-item-{{ link.id }} {% if page.route == link.id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}/">
+          <span class="icon has-text-{{ link.color }}">
+            <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
           </span>
 
-          <span>{{ item.title }}</span>
+          <span>{{ link.title }}</span>
         </a>
       {% endfor %}
 
@@ -57,7 +58,7 @@
         <div id="moreDropdown" class="navbar-dropdown">
           {% for link_id in site.data.links.more %}
             {% assign link = site.data.links.by_id[link_id] %}
-            <a class="navbar-item {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}/{{ link.path }}">
+            <a class="navbar-item {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}">
               <span>
                 <span class="icon has-text-{{ link.color }}">
                   <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
@@ -90,6 +91,9 @@
 
       <div class="navbar-item">
         <div class="field is-grouped is-grouped-multiline">
+          <p class="control">
+            {% include elements/github.html %}
+          </p>
           <p class="control">
             {% include elements/patreon.html %}
           </p>

docs/_sass/footer.sass

@@ -60,7 +60,7 @@
 
 +tablet
   .bd-footer-donation
-    width: 240px
+    padding: 0.75rem 1.5rem
 
 .bd-footer-donation-title
   color: $grey-light
@@ -71,6 +71,11 @@
 .bd-footer-donation-action
   @extend %center
   height: 70px
+  .bd-github-button
+    margin-right: 0.5rem
+  .bd-github-button,
+  .bd-patreon-button
+    flex-shrink: 0
   .paypal-form
     height: 30px
     img

docs/_sass/global.sass

@@ -37,6 +37,30 @@ svg
     p:first-child
       margin-right: 1em
 
+.bd-github-button
+  background-color: #eff3f6
+  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%)
+  border-color: #1b1f2333
+  color: #24292e
+  font-size: 0.875rem
+  height: auto
+  padding: calc(0.5em - 1px) 1em
+  position: relative
+  strong
+    font-weight: $weight-semibold
+    margin-top: -2px
+  .icon
+    color: #ea4aaa
+  .tag
+    font-size: 0.5rem
+    font-style: normal
+    margin: -1px -8px 0 7px
+  &:hover
+    background-color: #e6ebf1
+    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%)
+    background-position: -.5em
+    border-color: #1b1f2359
+
 .bd-patreon-button
   display: inline-block
   position: relative
@@ -135,3 +159,13 @@ $carbon-poweredby-height: 20px
     right: 0
     &:hover
       text-decoration: underline
+
++until($widescreen)
+  #navMenuLove .bd-navbar-item-backers
+    display: none
+
++widescreen
+  #moreDropdown
+    .navbar-item:first-child,
+    .navbar-divider:nth-child(2)
+      display: none

docs/_sass/main.sass

@@ -165,19 +165,21 @@
     transition-duration: $speed
     transition-property: transform
 
+.tag.bd-mini-tag
+  border-radius: 2px !important
+  font-family: Verdana, sans-serif
+  font-size: 0.5rem
+  font-weight: bold
+  height: 2.25em
+  vertical-align: text-bottom
+
 .bd-category-name
   color: $text-strong
   position: relative
   &.is-active
     color: $link
-  .tag
-    border-radius: 2px
-    font-family: Verdana
-    font-size: 0.5rem
-    font-weight: bold
-    height: 2.25em
+  .bd-mini-tag
     margin-left: 0.5em
-    vertical-align: text-bottom
 
 .bd-category-list
   @extend %bd-list

docs/backers.html

@@ -4,7 +4,6 @@ layout: more
 route: backers
 breadcrumb:
 - home
-- more
 - patreon-backers
 ---
 

docs/css/bulma-docs.css

@@ -1567,14 +1567,14 @@ a.has-text-danger:hover, a.has-text-danger:focus {
 .box {
   background-color: white;
   border-radius: 6px;
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
   color: #4a4a4a;
   display: block;
   padding: 1.25rem;
 }
 
 a.box:hover, a.box:focus {
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc;
+  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc;
 }
 
 a.box:active {
@@ -2872,15 +2872,17 @@ fieldset[disabled] .button {
   width: auto;
 }
 
+.container.is-fluid {
+  max-width: none;
+  padding-left: 32px;
+  padding-right: 32px;
+  width: 100%;
+}
+
 @media screen and (min-width: 1024px) {
   .container {
     max-width: 960px;
   }
-  .container.is-fluid {
-    margin-left: 32px;
-    margin-right: 32px;
-    max-width: none;
-  }
 }
 
 @media screen and (max-width: 1215px) {
@@ -3371,7 +3373,7 @@ fieldset[disabled] .button {
 }
 
 .progress::-webkit-progress-bar {
-  background-color: #dbdbdb;
+  background-color: #ededed;
 }
 
 .progress::-webkit-progress-value {
@@ -3400,7 +3402,7 @@ fieldset[disabled] .button {
 }
 
 .progress.is-white:indeterminate {
-  background-image: linear-gradient(to right, white 30%, #dbdbdb 30%);
+  background-image: linear-gradient(to right, white 30%, #ededed 30%);
 }
 
 .progress.is-black::-webkit-progress-value {
@@ -3416,7 +3418,7 @@ fieldset[disabled] .button {
 }
 
 .progress.is-black:indeterminate {
-  background-image: linear-gradient(to right, #0a0a0a 30%, #dbdbdb 30%);
+  background-image: linear-gradient(to right, #0a0a0a 30%, #ededed 30%);
 }
 
 .progress.is-light::-webkit-progress-value {
@@ -3432,7 +3434,7 @@ fieldset[disabled] .button {
 }
 
 .progress.is-light:indeterminate {
-  background-image: linear-gradient(to right, whitesmoke 30%, #dbdbdb 30%);
+  background-image: linear-gradient(to right, whitesmoke 30%, #ededed 30%);
 }
 
 .progress.is-dark::-webkit-progress-value {
@@ -3448,7 +3450,7 @@ fieldset[disabled] .button {
 }
 
 .progress.is-dark:indeterminate {
-  background-image: linear-gradient(to right, #363636 30%, #dbdbdb 30%);
+  background-image: linear-gradient(to right, #363636 30%, #ededed 30%);
 }
 
 .progress.is-primary::-webkit-progress-value {
@@ -3464,7 +3466,7 @@ fieldset[disabled] .button {
 }
 
 .progress.is-primary:indeterminate {
-  background-image: linear-gradient(to right, #00d1b2 30%, #dbdbdb 30%);
+  background-image: linear-gradient(to right, #00d1b2 30%, #ededed 30%);
 }
 
 .progress.is-link::-webkit-progress-value {
@@ -3480,7 +3482,7 @@ fieldset[disabled] .button {
 }
 
 .progress.is-link:indeterminate {
-  background-image: linear-gradient(to right, #3273dc 30%, #dbdbdb 30%);
+  background-image: linear-gradient(to right, #3273dc 30%, #ededed 30%);
 }
 
 .progress.is-info::-webkit-progress-value {
@@ -3496,7 +3498,7 @@ fieldset[disabled] .button {
 }
 
 .progress.is-info:indeterminate {
-  background-image: linear-gradient(to right, #209cee 30%, #dbdbdb 30%);
+  background-image: linear-gradient(to right, #209cee 30%, #ededed 30%);
 }
 
 .progress.is-success::-webkit-progress-value {
@@ -3512,7 +3514,7 @@ fieldset[disabled] .button {
 }
 
 .progress.is-success:indeterminate {
-  background-image: linear-gradient(to right, #23d160 30%, #dbdbdb 30%);
+  background-image: linear-gradient(to right, #23d160 30%, #ededed 30%);
 }
 
 .progress.is-warning::-webkit-progress-value {
@@ -3528,7 +3530,7 @@ fieldset[disabled] .button {
 }
 
 .progress.is-warning:indeterminate {
-  background-image: linear-gradient(to right, #ffdd57 30%, #dbdbdb 30%);
+  background-image: linear-gradient(to right, #ffdd57 30%, #ededed 30%);
 }
 
 .progress.is-danger::-webkit-progress-value {
@@ -3544,7 +3546,7 @@ fieldset[disabled] .button {
 }
 
 .progress.is-danger:indeterminate {
-  background-image: linear-gradient(to right, #ff3860 30%, #dbdbdb 30%);
+  background-image: linear-gradient(to right, #ff3860 30%, #ededed 30%);
 }
 
 .progress:indeterminate {
@@ -3556,8 +3558,8 @@ fieldset[disabled] .button {
           animation-name: moveIndeterminate;
   -webkit-animation-timing-function: linear;
           animation-timing-function: linear;
-  background-color: #dbdbdb;
-  background-image: linear-gradient(to right, #4a4a4a 30%, #dbdbdb 30%);
+  background-color: #ededed;
+  background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
   background-position: top left;
   background-repeat: no-repeat;
   background-size: 150% 150%;
@@ -4238,7 +4240,7 @@ fieldset[disabled] .select select:-ms-input-placeholder,
 }
 
 .input, .textarea {
-  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.05);
   max-width: 100%;
   width: 100%;
 }
@@ -5538,7 +5540,7 @@ fieldset[disabled] .select select:hover {
 
 .card {
   background-color: white;
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
   color: #4a4a4a;
   max-width: 100%;
   position: relative;
@@ -5547,7 +5549,7 @@ fieldset[disabled] .select select:hover {
 .card-header {
   background-color: transparent;
   align-items: stretch;
-  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 0.125em 0.25em rgba(10, 10, 10, 0.1);
   display: flex;
 }
 
@@ -5557,7 +5559,7 @@ fieldset[disabled] .select select:hover {
   display: flex;
   flex-grow: 1;
   font-weight: 700;
-  padding: 0.75rem;
+  padding: 0.75rem 1rem;
 }
 
 .card-header-title.is-centered {
@@ -5569,7 +5571,7 @@ fieldset[disabled] .select select:hover {
   cursor: pointer;
   display: flex;
   justify-content: center;
-  padding: 0.75rem;
+  padding: 0.75rem 1rem;
 }
 
 .card-image {
@@ -5584,7 +5586,7 @@ fieldset[disabled] .select select:hover {
 
 .card-footer {
   background-color: transparent;
-  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid #ededed;
   align-items: stretch;
   display: flex;
 }
@@ -5600,7 +5602,7 @@ fieldset[disabled] .select select:hover {
 }
 
 .card-footer-item:not(:last-child) {
-  border-right: 1px solid #dbdbdb;
+  border-right: 1px solid #ededed;
 }
 
 .card .media:not(:last-child) {
@@ -5642,7 +5644,7 @@ fieldset[disabled] .select select:hover {
 .dropdown-content {
   background-color: white;
   border-radius: 4px;
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
   padding-bottom: 0.5rem;
   padding-top: 0.5rem;
 }
@@ -10838,6 +10840,15 @@ label.panel-block:hover {
   transition-property: transform, -webkit-transform;
 }
 
+.tag.bd-mini-tag {
+  border-radius: 2px !important;
+  font-family: Verdana, sans-serif;
+  font-size: 0.5rem;
+  font-weight: bold;
+  height: 2.25em;
+  vertical-align: text-bottom;
+}
+
 .bd-category-name {
   color: #363636;
   position: relative;
@@ -10847,14 +10858,8 @@ label.panel-block:hover {
   color: #3273dc;
 }
 
-.bd-category-name .tag {
-  border-radius: 2px;
-  font-family: Verdana;
-  font-size: 0.5rem;
-  font-weight: bold;
-  height: 2.25em;
+.bd-category-name .bd-mini-tag {
   margin-left: 0.5em;
-  vertical-align: text-bottom;
 }
 
 .bd-category-list {
@@ -11304,6 +11309,39 @@ svg {
   }
 }
 
+.bd-github-button {
+  background-color: #eff3f6;
+  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
+  border-color: #1b1f2333;
+  color: #24292e;
+  font-size: 0.875rem;
+  height: auto;
+  padding: calc(0.5em - 1px) 1em;
+  position: relative;
+}
+
+.bd-github-button strong {
+  font-weight: 600;
+  margin-top: -2px;
+}
+
+.bd-github-button .icon {
+  color: #ea4aaa;
+}
+
+.bd-github-button .tag {
+  font-size: 0.5rem;
+  font-style: normal;
+  margin: -1px -8px 0 7px;
+}
+
+.bd-github-button:hover {
+  background-color: #e6ebf1;
+  background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
+  background-position: -.5em;
+  border-color: #1b1f2359;
+}
+
 .bd-patreon-button {
   display: inline-block;
   position: relative;
@@ -11434,6 +11472,19 @@ svg {
   text-decoration: underline;
 }
 
+@media screen and (max-width: 1215px) {
+  #navMenuLove .bd-navbar-item-backers {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1216px) {
+  #moreDropdown .navbar-item:first-child,
+  #moreDropdown .navbar-divider:nth-child(2) {
+    display: none;
+  }
+}
+
 .bd-index-header {
   text-align: center;
 }
@@ -12233,7 +12284,7 @@ svg {
 
 @media screen and (min-width: 769px), print {
   .bd-footer-donation {
-    width: 240px;
+    padding: 0.75rem 1.5rem;
   }
 }
 
@@ -12250,6 +12301,15 @@ svg {
   height: 70px;
 }
 
+.bd-footer-donation-action .bd-github-button {
+  margin-right: 0.5rem;
+}
+
+.bd-footer-donation-action .bd-github-button,
+.bd-footer-donation-action .bd-patreon-button {
+  flex-shrink: 0;
+}
+
 .bd-footer-donation-action .paypal-form {
   height: 30px;
 }