<footer class="footer">
<div class="container">
- <div class="content has-text-centered">
- <p>
- <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="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>. The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
- </p>
- <div id="social">
- <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="105px" height="20px"></iframe>
- <a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en">@jgthms</a>
- <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma">Tweet</a>
+ <div class="columns">
+ <div class="column is-one-third">
+ <div id="about" class="content">
+ <div>
+ <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="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
+ <div class="twitter-container">
+ <a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
+ </div>
+ </div>
+ <small>
+ Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
+ <br>
+ Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
+ </small>
+ </div>
+ </div>
+ <div class="column">
+ <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.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
+ </div>
+
+ <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="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/gold-rect-paypaldonate-60px.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="column">
+ <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>
- <p>
- Want to learn how to <strong>create a website</strong>?
- <br>
- Read <a href="http://marksheet.io">MarkSheet: a free HTML & CSS tutorial</a>.
- </p>
- <p>
- Want to make a <strong>donation</strong>?
- </p>
- <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="https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
- <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
- </form>
</div>
</div>
</footer>
.tag .delete {
margin-left: 0.25em;
- margin-right: -0.5em;
+ margin-right: -0.375em;
}
.tag.is-white {
color: white;
}
-#mc_embed_signup .control {
+#about .twitter-container {
+ display: block;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 5px;
+}
+
+#about small {
+ display: block;
+ margin-top: 5px;
+}
+
+#mc_embed_signup .field {
margin-bottom: 0;
}
margin-top: 0.75rem;
}
+#share form {
+ height: 30px;
+ margin-top: 10px;
+}
+
#social {
align-items: center;
display: flex;
flex-wrap: wrap;
- margin-bottom: 1em;
- justify-content: center;
+ margin-top: 5px;
+ justify-content: flex-start;
}
#social a {
display: inline-block;
font-size: 11px;
- height: 20px;
- line-height: 20px;
- margin: 5px;
-}
-
-#social iframe {
- margin: 5px;
+ height: 30px;
+ line-height: 30px;
}
#newsletter .input {
box-shadow: none;
}
+#sister ul {
+ display: flex;
+}
+
+#sister li {
+ display: flex;
+ height: 30px;
+ margin: 5px 1rem 0 0;
+}
+
+#sister img {
+ height: 30px;
+}
+
#images tr td:nth-child(2) {
width: 320px;
}
border-radius: 5px;
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
display: block;
+ line-height: 1.25;
margin-top: 15px;
- max-width: 400px;
padding: 15px;
padding-left: 70px;
position: relative;
#_default_ {
display: flex;
justify-content: center;
- padding: 0 60px;
position: relative;
}
#_default_ .default-ad {
+ left: 100%;
+ margin-left: 2rem;
position: absolute;
- right: 0;
top: 0;
}
#_default_ > a {
- margin: 0 20px;
+ margin: 0;
+ }
+ #_default_ > a:not(:nth-child(2)) {
+ margin-left: 2rem;
}
}