]> git.ipfire.org Git - thirdparty/bulma.git/commitdiff
Footer stars
authorJeremy Thomas <bbxdesign@gmail.com>
Tue, 10 Apr 2018 16:33:43 +0000 (17:33 +0100)
committerJeremy Thomas <bbxdesign@gmail.com>
Tue, 10 Apr 2018 16:33:43 +0000 (17:33 +0100)
27 files changed:
docs/_data/links.json
docs/_includes/elements/patreon.html
docs/_includes/footer/about.html [new file with mode: 0644]
docs/_includes/footer/boxes.html [new file with mode: 0644]
docs/_includes/footer/contribute.html [new file with mode: 0644]
docs/_includes/footer/share.html [new file with mode: 0644]
docs/_includes/footer/support.html [new file with mode: 0644]
docs/_includes/global/footer.html
docs/_includes/global/navbar.html
docs/_includes/global/newsletter.html
docs/_includes/global/sponsors.html
docs/_sass/footer.sass
docs/_sass/global.sass
docs/bulma-docs.sass
docs/css/bulma-docs.css
docs/images/become-a-patron.png [new file with mode: 0644]
docs/images/become_a_patron_button.png [deleted file]
docs/images/become_a_patron_button@2x.png [deleted file]
docs/images/become_a_patron_button@3x.png [deleted file]
docs/images/footer/bootstrap-to-bulma.png [new file with mode: 0644]
docs/images/footer/expo-examples.png [new file with mode: 0644]
docs/images/footer/jesse.png [new file with mode: 0644]
docs/images/footer/love-film.png [new file with mode: 0644]
docs/images/footer/love.png [new file with mode: 0644]
docs/test.html
sass/base/minireset.sass
sass/layout/footer.sass

index c22fd67dd05fb7586dfb12f47833cb582094c79b..ef01cc05e5f11c28dccbfb6a6be992464d915cd4 100644 (file)
     "love": {
       "name": "Love",
       "path": "/love"
+    },
+    "bootstrap": {
+      "name": "Alternative to Bootstrap",
+      "path": "/alternative-to-bootstrap"
     }
   },
   "categories": {
index 1277955ca533618d0f64b2e6faf3575a9df6783d..067315573b2820024fc9e9b07b367399448a616a 100644 (file)
@@ -1,8 +1,3 @@
-<div class="bd-banner is-patreon">
-  <p class="bd-banner-text">
-    <strong>Support Bulma</strong> on Patreon
-  </p>
-  <a class="bd-banner-button" href="https://www.patreon.com/jgthms" target="_blank">
-    <img src="/images/patreon.png" alt="Become a patron">
-  </a>
-</div>
+<a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
+  <img src="{{ site.url }}/images/become-a-patron.png" alt="Become a patron" width="148" height="36">
+</a>
diff --git a/docs/_includes/footer/about.html b/docs/_includes/footer/about.html
new file mode 100644 (file)
index 0000000..97d39d8
--- /dev/null
@@ -0,0 +1,13 @@
+<h4 class="bd-footer-title">
+  <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://jgthms.com" property="cc:attributionName" rel="cc:attributionURL" target="_blank">Jeremy Thomas</a>.
+</h4>
+
+<div class="bd-footer-iframe">
+  <a href="{{ site.data.meta.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
+</div>
+
+<div class="bd-footer-tsp">
+  Source code licensed <a href="https://opensource.org/licenses/mit-license.php">MIT</a>.
+  <br>
+  Website content licensed <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>
+</div>
diff --git a/docs/_includes/footer/boxes.html b/docs/_includes/footer/boxes.html
new file mode 100644 (file)
index 0000000..624bb11
--- /dev/null
@@ -0,0 +1,48 @@
+{% assign boostrap_link = site.data.links.by_id['boostrap'] %}
+{% assign expo_link = site.data.links.by_id['expo'] %}
+{% assign love_link = site.data.links.by_id['love'] %}
+
+<div class="bd-footer-stars">
+  <a class="bd-footer-star bd-is-bootstrap" href="{{ site.url }}{{ boostrap_link.path }}">
+    <header class="bd-footer-star-header">
+      <h4 class="bd-footer-title">
+        <strong>Coming from Bootstrap</strong>
+      </h4>
+      <p class="bd-footer-subtitle">
+        An alternative to Bootstrap
+      </p>
+    </header>
+
+    <figure class="bd-footer-star-figure">
+      <img src="{{ site.url }}/images/footer/bootstrap-to-bulma.png" width="160" height="48">
+    </figure>
+  </a>
+
+  <a class="bd-footer-star bd-is-expo" href="{{ site.url }}{{ expo_link.path }}">
+    <header class="bd-footer-star-header">
+      <h4 class="bd-footer-title">
+        <span class="icon bd-has-text-star">
+          <i class="fas fa-star"></i>
+        </span>
+        <strong>Expo</strong>
+      </h4>
+      <p class="bd-footer-subtitle">
+        See what you can build with Bulma
+      </p>
+    </header>
+  </a>
+
+  <a class="bd-footer-star bd-is-love" href="{{ site.url }}{{ love_link.path }}">
+    <header class="bd-footer-star-header">
+      <h4 class="bd-footer-title">
+        <span class="icon has-text-danger">
+          <i class="fas fa-heart"></i>
+        </span>
+        <strong>Love</strong>
+      </h4>
+      <p class="bd-footer-subtitle">
+        Fans of Bulma
+      </p>
+    </header>
+  </a>
+</div>
diff --git a/docs/_includes/footer/contribute.html b/docs/_includes/footer/contribute.html
new file mode 100644 (file)
index 0000000..5045490
--- /dev/null
@@ -0,0 +1,9 @@
+<h4 class="bd-footer-title">
+  <strong>Contribute</strong> on GitHub
+</h4>
+
+<div class="bd-footer-iframe">
+  <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
+
+  <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&type=follow&count=true&size=large" frameborder="0" scrolling="0" width="170px" height="30px"></iframe>
+</div>
diff --git a/docs/_includes/footer/share.html b/docs/_includes/footer/share.html
new file mode 100644 (file)
index 0000000..71174f0
--- /dev/null
@@ -0,0 +1,9 @@
+<h4 class="bd-footer-title">
+  <strong>Share</strong> on social media
+</h4>
+
+<div class="bd-footer-iframe">
+  <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.data.meta.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
+
+  <div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
+</div>
diff --git a/docs/_includes/footer/support.html b/docs/_includes/footer/support.html
new file mode 100644 (file)
index 0000000..936995c
--- /dev/null
@@ -0,0 +1,30 @@
+<div class="bd-footer-support">
+  <h4 class="bd-footer-title">
+    <strong>Support</strong> Bulma
+  </h4>
+
+  <div class="bd-footer-donations columns">
+    <div class="bd-footer-donation column">
+      <p class="bd-footer-donation-title">
+        <strong>One-time</strong> donation
+      </p>
+      <div class="bd-footer-donation-action">
+        <form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+          <input type="hidden" name="cmd" value="_s-xclick">
+          <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
+          <input type="image" src="{{site.url}}/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
+          <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
+        </form>
+      </div>
+    </div>
+
+    <div class="bd-footer-donation column">
+      <p class="bd-footer-donation-title">
+        <strong>Monthly</strong> donation
+      </p>
+      <div class="bd-footer-donation-action">
+        {% include elements/patreon.html %}
+      </div>
+    </div>
+  </div>
+</div>
index 05be9bfd2124088d3546b1f0561ee360ad2e706f..fe9a63ebff903f64b9ac0a1d78876eabfe8370e3 100644 (file)
@@ -4,81 +4,16 @@
 
 {% include global/sponsors.html %}
 
+<hr class="is-marginless">
+
 {% include global/newsletter.html %}
 
 <footer class="footer">
   <div class="container">
     <div class="columns">
       <div class="column is-4">
-        <div id="about" class="content">
-          <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
-          <div class="twitter-container">
-            <a href="{{ site.data.meta.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
-          </div>
-          <p id="alternative">
-            <a href="{{ site.url }}/alternative-to-bootstrap/">An alternative to <strong>Bootstrap</strong></a>
-          </p>
-        </div>
+        {% include footer/about.html %}
       </div>
-      <div class="column is-4">
-        <div id="share" class="content">
-          <div>
-            <strong>Support</strong> and share the love!
-          </div>
-          <div id="social">
-            <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
-
-            <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.data.meta.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
-
-            <div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
-
-            <a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
-              <img src="/images/patreon.png" alt="Become a patron">
-            </a>
-
-            <form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
-              <input type="hidden" name="cmd" value="_s-xclick">
-              <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
-              <input type="image" src="{{site.url}}/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
-              <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
-            </form>
-          </div>
-        </div>
-      </div>
-      <div class="column is-4">
-        <div id="sister">
-          <p>
-            More <strong>helpful</strong> tools:
-          </p>
-          <ul>
-            <li>
-              <a href="http://cssreference.io">
-                <img src="{{site.url}}/images/css-reference-logo.png" alt="CSS Reference logo">
-              </a>
-            </li>
-            <li>
-              <a href="http://htmlreference.io">
-                <img src="{{site.url}}/images/html-reference-logo.png" alt="HTML Reference logo">
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-
-    <div id="tsp">
-      <p>
-        <a href="{{ site.url }}/made-with-bulma/">
-          <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
-        </a>
-        <small>
-          Get the <a href="{{ site.url }}/made-with-bulma/">badge</a>!
-          <br>
-          Source code licensed <a href="https://opensource.org/licenses/mit-license.php">MIT</a>.
-          <br>
-          Website content licensed <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
-        </small>
-      </p>
     </div>
   </div>
 </footer>
index a9a8a95968463442bd34b5080f2c113333c72fcc..d5eed5830460aa2114f9e17c4927c3b943764337 100644 (file)
       <div class="navbar-item">
         <div class="field is-grouped is-grouped-multiline">
           <p class="control">
-            <a href="https://www.patreon.com/jgthms" target="_blank" style="display: block;">
-              <img
-                style="border-radius: 3px; display: block; max-height: 36px;"
-                src="/images/become_a_patron_button.png"
-                width="153"
-                height="36"
-                srcset="/images/become_a_patron_button@3x.png 3x,
-                        /images/become_a_patron_button@2x.png 2x,
-                        /images/become_a_patron_button.png 1x"
-                alt="Become a patron">
-            </a>
+            {% include elements/patreon.html %}
           </p>
           <p class="control">
             <a class="button is-primary" href="{{ site.data.meta.download }}">
index fcabda793d7171361c4cca0374033c50f5a3c0cf..1eb55756adbdf98b6982a58db9184909061c765e 100644 (file)
@@ -1,32 +1,32 @@
-<section id="newsletter" class="hero is-primary">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column is-one-third is-left">
-          <p class="title">Bulma <strong>Newsletter</strong></p>
-          <p class="subtitle">Get notified when v1 is ready!</p>
-        </div>
+<section id="newsletter" class="section is-medium">
+  <div class="container">
+    <div class="columns is-vcentered">
+      <div class="column">
+        <p class="title">Newsletter</p>
+        <p class="subtitle is-4 has-text-grey-light">Features, releases, showcase… stay in the loop!</p>
+      </div>
 
-        <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-flat required email" 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">
-                  <input type="submit" value="Subscribe" name="submit" id="mc-embedded-subscribe" class="button is-white is-outlined">
+      <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-flat required email" 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-link">
+                  <strong>Subscribe</strong>
+                </button>
               </div>
-          </form>
-        </div>
+            </div>
+        </form>
       </div>
     </div>
   </div>
-</section>
\ No newline at end of file
+</section>
index ff441e967dae09926a8bbbb4c4bb1572aa1a0caa..36fe8537c0536a44adef297328b236e03b935122 100644 (file)
@@ -1,23 +1,21 @@
-<section class="hero">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column is-4">
-          <p class="title">Bulma <strong>Sponsors</strong></p>
-        </div>
-        <div class="column is-8">
-          <div class="bd-sponsors">
-            <a href="https://chainaxe.io/" target="_blank" rel="nofollow">
-              {%
-                include elements/responsive-image.html
-                path="sponsors/chainaxe"
-                extension="png"
-                alt="chainaxe logo"
-                width="99"
-                height="70"
-              %}
-            </a>
-          </div>
+<section class="section">
+  <div class="container">
+    <div class="columns is-vcentered">
+      <div class="column is-4">
+        <p class="title">Sponsors</p>
+      </div>
+      <div class="column is-8">
+        <div class="bd-sponsors">
+          <a href="https://chainaxe.io/" target="_blank" rel="nofollow">
+            {%
+              include elements/responsive-image.html
+              path="sponsors/chainaxe"
+              extension="png"
+              alt="chainaxe logo"
+              width="99"
+              height="70"
+            %}
+          </a>
         </div>
       </div>
     </div>
index cd98dd89a927e86d2e64d87e11173e48c993fb2b..cd9359646a17f1c4a2e6286431b3c4a75f92daf5 100644 (file)
-#about
-  .twitter-container
-    display: block
-    height: 30px
-    line-height: 30px
-    margin-top: 0.5rem
-  small
-    display: block
-    margin-top: 5px
-
-#mc_embed_signup
-  .field
-    margin-bottom: 0
-  .notification
-    margin-top: 0.75rem
-
-#share
-  form
-    height: 30px
-    margin-top: 10px
+.bd-footer-title
+  color: $text-strong
+  font-size: 1.25rem
+  line-height: 1.25
+  margin-bottom: 1rem
+  transition-duration: $speed
+  transition-property: color
+  strong
+    font-weight: $weight-semibold
+
+.bd-footer-subtitle
+  color: $grey-light
+  margin-top: -1rem
+  transition-duration: $speed
+  transition-property: color
 
-#social
-  align-items: center
+.bd-footer-iframe
   display: flex
   flex-wrap: wrap
-  justify-content: flex-start
-  max-width: 400px
-  > iframe,
-  > a,
-  > form,
-  > div
-    display: inline-block
-    font-size: 11px
-    height: 30px
-    line-height: 30px
-    margin-top: 0.5rem
-  .github-btn
-    width: 160px
-  .twitter-share-button
-    margin-right: 10px
-    min-width: 76px
-  .paypal-form
-    min-width: 148px
+  min-height: 30px
   .fb-like
-    align-items: center
-    display: flex
-    width: 130px
-  .bd-patreon-button
+    margin-left: 10px
+
+.bd-footer-tsp
+  color: $grey-light
+  margin-top: 1.5rem
+
+%bd-footer-box
+  background-color: $white
+  border-radius: $radius-large
+  box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.1)
+  display: block
+  text-align: center
+  .bd-footer-title
+    font-size: 1.5rem
+    margin-bottom: 1rem
+
+// Support
+
+.bd-footer-support
+  @extend %bd-footer-box
+  margin-bottom: 3rem
+  margin-top: 2.25rem
+  padding: 2.5rem
+
+.bd-footer-donations
+  justify-content: center
+
+.bd-footer-donation
+  flex: none
+  width: 240px
+
+.bd-footer-donation-title
+  color: $grey-light
+  margin-bottom: 0.5rem
+  strong
+    color: currentColor
+
+.bd-footer-donation-action
+  @extend %center
+  min-height: 36px
+  .paypal-form
     height: 30px
-    margin-right: 0.5rem
-    width: 128px
+    img
+      display: block
 
-#newsletter
-  .input
-    border-color: $white
-    box-shadow: none
+// Stars
 
-#sister
-  ul
-    display: flex
-    flex-wrap: wrap
-  li
+$star-figure-height: 156px
+
+.bd-footer-stars
+  +tablet
+    align-items: stretch
     display: flex
-    height: 30px
-    margin: 5px 1rem 0 0
-  img
-    height: 30px
+    justify-content: space-between
 
-#tsp
-  margin-top: 3rem
-  text-align: center
-  small
-    display: block
-
-#alternative
-  font-size: 0.875rem
-  margin-top: 0.5rem
-  a
-    color: $text-light
-    &:hover
-      text-decoration: underline
+.bd-footer-star
+  @extend %bd-footer-box
+  transition-duration: $speed
+  transition-property: box-shadow, transform
+  will-change: box-shadow, transform
+  +mobile
+    &:not(:last-child)
+      margin-bottom: 1.5rem
+  +tablet
+    width: calc(33.3333% - 2rem)
+  &:hover
+    box-shadow: 0 3rem 3rem -1.25rem rgba($black, 0.1)
+    transform: translateY(-0.5rem)
+    .bd-footer-title,
+    .bd-footer-subtitle
+      color: $link
+  &.bd-is-expo,
+  &.bd-is-love
+    padding-bottom: $star-figure-height
+    .bd-footer-title
+      align-items: center
+      display: flex
+      justify-content: center
+      .icon
+        margin-right: 0.25em
+  &.bd-is-expo
+    background-image: url("/images/footer/expo-examples.png")
+    background-repeat: repeat-x
+    background-position: bottom center
+    background-size: 352px $star-figure-height
+  &.bd-is-love
+    background-image: url("/images/footer/love.png")
+    background-repeat: no-repeat
+    background-position: bottom center
+    background-size: 440px 180px
+
+
+.bd-footer-star-header
+  padding: 1.5rem
+
+.bd-footer-star-figure
+  @extend %center
+  height: $star-figure-height
+  margin-top: -1rem
index af545e69010944a8b3ce7332785205b42474b6b5..67abb258b19b423c2077494642ed5fe0dc49c9e2 100644 (file)
@@ -2,6 +2,10 @@ svg
   max-height: 100%
   max-width: 100%
 
+.bd-patreon-button
+  img
+    border-radius: $radius
+
 $carbon-spacing: 1rem
 $carbon-shadow-size: 0.75rem
 $carbon-image-height: 100px
index 0477776d07a8793d7a5c3a7671fd0c845a1c0adf..f648481235161a24b354718f30b859c084ae26d2 100644 (file)
@@ -23,6 +23,8 @@ $carbon-height: 100px
 $main-spacing: 3rem
 $intro-width: 1080px
 
+$navbar-item-img-max-height: none
+
 %center
   align-items: center
   display: flex
index 2df869aeb985ca63d433bba71357efa15672c293..7fe2f624c1da06103ccb27babb69eeef854d866c 100644 (file)
@@ -1,5 +1,5 @@
 @charset "UTF-8";
-.bd-columns-tool {
+.bd-columns-tool, .bd-footer-donation-action, .bd-footer-star-figure {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -261,9 +261,6 @@ html {
 }
 
 img,
-embed,
-iframe,
-object,
 audio,
 video {
   height: auto;
@@ -6519,7 +6516,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
 }
 
 .navbar-item img {
-  max-height: 1.75rem;
+  max-height: none;
 }
 
 .navbar-item.has-dropdown {
@@ -9488,7 +9485,7 @@ label.panel-block:hover {
 }
 
 .footer {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   padding: 3rem 1.5rem 6rem;
 }
 
@@ -9993,6 +9990,10 @@ svg {
   max-width: 100%;
 }
 
+.bd-patreon-button img {
+  border-radius: 4px;
+}
+
 #carboncontainer {
   align-items: center;
   display: flex;
@@ -10649,115 +10650,161 @@ svg {
   }
 }
 
-#about .twitter-container {
-  display: block;
-  height: 30px;
-  line-height: 30px;
-  margin-top: 0.5rem;
+.bd-footer-title {
+  color: #363636;
+  font-size: 1.25rem;
+  line-height: 1.25;
+  margin-bottom: 1rem;
+  transition-duration: 86ms;
+  transition-property: color;
+}
+
+.bd-footer-title strong {
+  font-weight: 600;
+}
+
+.bd-footer-subtitle {
+  color: #b5b5b5;
+  margin-top: -1rem;
+  transition-duration: 86ms;
+  transition-property: color;
+}
+
+.bd-footer-iframe {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 30px;
 }
 
-#about small {
+.bd-footer-iframe .fb-like {
+  margin-left: 10px;
+}
+
+.bd-footer-tsp {
+  color: #b5b5b5;
+  margin-top: 1.5rem;
+}
+
+.bd-footer-support, .bd-footer-star {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10, 10, 10, 0.1);
   display: block;
-  margin-top: 5px;
+  text-align: center;
 }
 
-#mc_embed_signup .field {
-  margin-bottom: 0;
+.bd-footer-support .bd-footer-title, .bd-footer-star .bd-footer-title {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
 }
 
-#mc_embed_signup .notification {
-  margin-top: 0.75rem;
+.bd-footer-support {
+  margin-bottom: 3rem;
+  margin-top: 2.25rem;
+  padding: 2.5rem;
 }
 
-#share form {
-  height: 30px;
-  margin-top: 10px;
+.bd-footer-donations {
+  justify-content: center;
 }
 
-#social {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  max-width: 400px;
+.bd-footer-donation {
+  flex: none;
+  width: 240px;
 }
 
-#social > iframe,
-#social > a,
-#social > form,
-#social > div {
-  display: inline-block;
-  font-size: 11px;
+.bd-footer-donation-title {
+  color: #b5b5b5;
+  margin-bottom: 0.5rem;
+}
+
+.bd-footer-donation-title strong {
+  color: currentColor;
+}
+
+.bd-footer-donation-action {
+  min-height: 36px;
+}
+
+.bd-footer-donation-action .paypal-form {
   height: 30px;
-  line-height: 30px;
-  margin-top: 0.5rem;
 }
 
-#social .github-btn {
-  width: 160px;
+.bd-footer-donation-action .paypal-form img {
+  display: block;
 }
 
-#social .twitter-share-button {
-  margin-right: 10px;
-  min-width: 76px;
+@media screen and (min-width: 769px), print {
+  .bd-footer-stars {
+    align-items: stretch;
+    display: flex;
+    justify-content: space-between;
+  }
 }
 
-#social .paypal-form {
-  min-width: 148px;
+.bd-footer-star {
+  transition-duration: 86ms;
+  transition-property: box-shadow, transform;
+  will-change: box-shadow, transform;
 }
 
-#social .fb-like {
-  align-items: center;
-  display: flex;
-  width: 130px;
+@media screen and (max-width: 768px) {
+  .bd-footer-star:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
 }
 
-#social .bd-patreon-button {
-  height: 30px;
-  margin-right: 0.5rem;
-  width: 128px;
+@media screen and (min-width: 769px), print {
+  .bd-footer-star {
+    width: calc(33.3333% - 2rem);
+  }
 }
 
-#newsletter .input {
-  border-color: white;
-  box-shadow: none;
+.bd-footer-star:hover {
+  box-shadow: 0 3rem 3rem -1.25rem rgba(10, 10, 10, 0.1);
+  transform: translateY(-0.5rem);
 }
 
-#sister ul {
-  display: flex;
-  flex-wrap: wrap;
+.bd-footer-star:hover .bd-footer-title,
+.bd-footer-star:hover .bd-footer-subtitle {
+  color: #3273dc;
 }
 
-#sister li {
-  display: flex;
-  height: 30px;
-  margin: 5px 1rem 0 0;
+.bd-footer-star.bd-is-expo, .bd-footer-star.bd-is-love {
+  padding-bottom: 156px;
 }
 
-#sister img {
-  height: 30px;
+.bd-footer-star.bd-is-expo .bd-footer-title, .bd-footer-star.bd-is-love .bd-footer-title {
+  align-items: center;
+  display: flex;
+  justify-content: center;
 }
 
-#tsp {
-  margin-top: 3rem;
-  text-align: center;
+.bd-footer-star.bd-is-expo .bd-footer-title .icon, .bd-footer-star.bd-is-love .bd-footer-title .icon {
+  margin-right: 0.25em;
 }
 
-#tsp small {
-  display: block;
+.bd-footer-star.bd-is-expo {
+  background-image: url("/images/footer/expo-examples.png");
+  background-repeat: repeat-x;
+  background-position: bottom center;
+  background-size: 352px 156px;
 }
 
-#alternative {
-  font-size: 0.875rem;
-  margin-top: 0.5rem;
+.bd-footer-star.bd-is-love {
+  background-image: url("/images/footer/love.png");
+  background-repeat: no-repeat;
+  background-position: bottom center;
+  background-size: 440px 180px;
 }
 
-#alternative a {
-  color: #7a7a7a;
+.bd-footer-star-header {
+  padding: 1.5rem;
 }
 
-#alternative a:hover {
-  text-decoration: underline;
+.bd-footer-star-figure {
+  height: 156px;
+  margin-top: -1rem;
 }
 
 ::-moz-selection {
diff --git a/docs/images/become-a-patron.png b/docs/images/become-a-patron.png
new file mode 100644 (file)
index 0000000..dcd6cb3
Binary files /dev/null and b/docs/images/become-a-patron.png differ
diff --git a/docs/images/become_a_patron_button.png b/docs/images/become_a_patron_button.png
deleted file mode 100644 (file)
index 291b7bc..0000000
Binary files a/docs/images/become_a_patron_button.png and /dev/null differ
diff --git a/docs/images/become_a_patron_button@2x.png b/docs/images/become_a_patron_button@2x.png
deleted file mode 100644 (file)
index 5443ec9..0000000
Binary files a/docs/images/become_a_patron_button@2x.png and /dev/null differ
diff --git a/docs/images/become_a_patron_button@3x.png b/docs/images/become_a_patron_button@3x.png
deleted file mode 100644 (file)
index 81cb33f..0000000
Binary files a/docs/images/become_a_patron_button@3x.png and /dev/null differ
diff --git a/docs/images/footer/bootstrap-to-bulma.png b/docs/images/footer/bootstrap-to-bulma.png
new file mode 100644 (file)
index 0000000..6ba9b1b
Binary files /dev/null and b/docs/images/footer/bootstrap-to-bulma.png differ
diff --git a/docs/images/footer/expo-examples.png b/docs/images/footer/expo-examples.png
new file mode 100644 (file)
index 0000000..fddfd8c
Binary files /dev/null and b/docs/images/footer/expo-examples.png differ
diff --git a/docs/images/footer/jesse.png b/docs/images/footer/jesse.png
new file mode 100644 (file)
index 0000000..6bc7f24
Binary files /dev/null and b/docs/images/footer/jesse.png differ
diff --git a/docs/images/footer/love-film.png b/docs/images/footer/love-film.png
new file mode 100644 (file)
index 0000000..76fd01a
Binary files /dev/null and b/docs/images/footer/love-film.png differ
diff --git a/docs/images/footer/love.png b/docs/images/footer/love.png
new file mode 100644 (file)
index 0000000..8ae142f
Binary files /dev/null and b/docs/images/footer/love.png differ
index 3d198abf23b7bc58b0d55547dc57924ea241c815..cf9f18a2bd3a58e109f934e588fcb2a95046bdb8 100644 (file)
@@ -8,13 +8,48 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Bulma test page</title>
-    <link rel="stylesheet" href="{{ site.url }}/css/bulma-test.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
+    <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
     <script defer src="{{ site.data.icons.fontawesome5 }}"></script>
   </head>
   <body>
+    <!-- <object type="application/x-shockwave-flash" data="https://htmlreference.io/assets/golf.swf">
+      <param name="movie" value="https://htmlreference.io/assets/golf.swf">
+      <param name="wmode" value="transparent">
+      <p>You need to enable Flash to view this content.</p>
+    </object> -->
+    <!-- <embed src="https://www.youtube.com/embed/kmk43_2dtn0" width="640" height="480"> -->
+    <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/hK8ONv4wcbA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
+    <!-- <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> -->
     {% include global/navbar.html %}
-    {% include test/from-to.html %}
-    {% include test/features.html %}
+    <footer class="footer">
+      <div class="container">
+        <div class="columns">
+          <div class="column is-4">
+            {% include footer/about.html %}
+          </div>
+          <div class="column is-4">
+            {% include footer/contribute.html %}
+          </div>
+          <div class="column is-4">
+            {% include footer/share.html %}
+          </div>
+        </div>
+        {% include footer/support.html %}
+        {% include footer/boxes.html %}
+      </div>
+    </footer>
+    <!-- {% include test/from-to.html %} -->
+    <!-- {% include test/features.html %} -->
+    <script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
+    <script async defer type="text/javascript">(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.async = true;
+  js.defer = true;
+  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
     <script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
     <script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
     <script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
index ea5f1031f810b35e31d37529b498de58e7828996..e99311cf1fb7d5b8013203aaac7a01da0f5b21c1 100644 (file)
@@ -59,9 +59,6 @@ html
 
 // Media
 img,
-embed,
-iframe,
-object,
 audio,
 video
   height: auto
index 5b59e2541741082959c97d81ca80c2210fcb4d18..6688482ab1d161f53547fd12e353331874361903 100644 (file)
@@ -1,4 +1,4 @@
-$footer-background-color: $background !default
+$footer-background-color: $white-bis !default
 
 .footer
   background-color: $footer-background-color