Organize partials

This commit is contained in:
Jeremy Thomas
2018-04-09 22:25:26 +01:00
parent a1c1909001
commit e8d4efb274
97 changed files with 691 additions and 835 deletions

View File

@@ -0,0 +1,8 @@
{% if site.deprecated %}
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
<p>
You are viewing the deprecated <strong>{{site.data.meta.version}}</strong> version of the website.
<a href="/">Click here to view the latest version</a>
</p>
</div>
{% endif %}

View File

@@ -0,0 +1,88 @@
{% include global/native.html %}
{% include book/book-banner.html %}
{% include global/sponsors.html %}
{% 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>
</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>
{% include book/book-modal.html %}
{% include global/scripts.html %}

View File

@@ -0,0 +1,9 @@
<a class="bd-banner is-fortyfour" href="https://jgthms.com/css-in-44-minutes-ebook" target="_blank">
<div class="bd-banner-background"></div>
<p class="bd-banner-text">
<strong class="tag is-danger">New!</strong> My 44-page ebook "<strong>CSS in 44 minutes</strong>" is out! <span class="bd-emoji-bis">😃</span>
</p>
<span class="button is-success is-rounded">
<strong>Get it now →</strong>
</span>
</a>

View File

@@ -0,0 +1,81 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.data.meta.description }}{% endif %}">
<title>{% if page.fulltitle %}{{ page.fulltitle }}{% else %}{% if page.title %}{{ page.title }} | {% endif %}{{ site.data.meta.title }}{% endif %}</title>
{% if page.fontawesome4 %}
<link rel="stylesheet" href="{{ site.data.icons.fontawesome4 }}">
{% endif %}
{% if page.iconic %}
<link rel="stylesheet" href="{{ site.data.icons.iconic }}">
{% endif %}
{% if page.ionicons %}
<link rel="stylesheet" href="{{ site.data.icons.ionicons }}">
{% endif %}
{% if page.mdi %}
<link rel="stylesheet" href="{{ site.data.icons.mdi }}">
{% endif %}
<link rel="stylesheet" href="{{ site.url }}/css/{{ site.docs_file }}.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.data.meta.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
<meta property="og:url" content="{{ site.url }}">
<meta property="og:type" content="website">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@jgthms">
<meta name="twitter:creator" content="@jgthms">
<!-- Shared social media -->
{% if page.share_title %}
<meta property="og:title" content="{{ page.share_title }}">
<meta name="twitter:title" content="{{ page.share_title }}">
{% elsif page.title %}
<meta property="og:title" content="{{ page.title | replace: '&nbsp;', ' ' }}">
<meta name="twitter:title" content="{{ page.title | replace: '&nbsp;', ' ' }}">
{% else %}
<meta property="og:title" content="{{ site.data.meta.title }}">
<meta name="twitter:title" content="{{ site.data.meta.title }}">
{% endif %}
{% if page.share_description %}
<meta property="og:description" content="{{ page.share_description }}">
<meta name="twitter:description" content="{{ page.share_description }}">
{% elsif page.layout == 'post' %}
<meta property="og:description" content="{{ page.content | strip_html | truncate: 400, '…' }}">
<meta name="twitter:description" content="{{ page.content | strip_html | truncate: 400, '…' }}">
{% else %}
<meta property="og:description" content="{{ site.data.meta.description }}">
<meta name="twitter:description" content="{{ site.data.meta.description }}">
{% endif %}
{% if page.share_image %}
<meta property="og:image" content="{{ site.url }}{{ page.share_image }}">
<meta name="twitter:image" content="{{ site.url }}{{ page.share_image }}">
{% elsif page.layout == 'post' %}
<meta property="og:image" content="{{ site.url }}/images/blog/share/{{ page.id | slice: 12,page.id.size }}.jpg">
<meta name="twitter:image" content="{{ site.url }}/images/blog/share/{{ page.id | slice: 12,page.id.size }}.jpg">
{% else %}
<meta property="og:image" content="{{ site.url }}/images/bulma-banner.png">
<meta name="twitter:image" content="{{ site.url }}/images/bulma-banner.png">
{% endif %}
<link rel="apple-touch-icon" sizes="180x180" href="{{ site.url }}/favicons/apple-touch-icon.png?v=201701041855">
<link rel="icon" type="image/png" href="{{ site.url }}/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
<link rel="icon" type="image/png" href="{{ site.url }}/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
<link rel="manifest" href="{{ site.url }}/favicons/manifest.json?v=201701041855">
<link rel="mask-icon" href="{{ site.url }}/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
<link rel="shortcut icon" href="{{ site.url }}/favicons/favicon.ico?v=201701041855">
<meta name="msapplication-config" content="{{ site.url }}/favicons/browserconfig.xml?v=201701041855">
<meta name="theme-color" content="#00d1b2">
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
</head>

View File

@@ -0,0 +1,75 @@
<script src="{{ site.url }}/vendor/native.js"></script>
<script>
_native.init("CVAIKK3E", {
targetClass: 'native-js',
fallback: `<a href="https://jgthms.com/css-in-44-minutes-ebook" class="native-flex" target="_blank">
<style>
.native-js {
background: linear-gradient(-30deg, #4f38a4, #a244bc 45%, #4f38a4 45%) #4f38a4;
}
.native-details {
color: #FFFFFF !important;
}
.native-details:hover {
color: #FFFFFF !important;
}
.native-cta {
color: #FFFFFF;
background-color: #3bb76d;
}
.native-cta:hover {
color: #native_cta_color_hover;
background-color: #3bb76d;
}
</style>
<div class="native-main">
<img class="native-img" src="/images/fortyfour-native.png">
<div class="native-details">
<span class="native-company">CSS in 44 minutes</span>
<span class="native-desc">Learn how to build your own webpage from scratch!</span>
</div>
</div>
<span class="native-cta">Buy the book</span>
</a>`
});
</script>
<div class="native-js">
<a href="#native_link#" class="native-flex">
<style>
.native-js {
background: linear-gradient(-30deg, #native_bg_color#E5, #native_bg_color#E5 45%, #native_bg_color# 45%) #fff;
}
.native-details {
color: #native_color# !important;
}
.native-details:hover {
color: #native_color_hover# !important;
}
.native-cta {
color: #native_cta_color#;
background-color: #native_cta_bg_color#;
}
.native-cta:hover {
color: #native_cta_color_hover;
background-color: #native_cta_bg_color_hover#;
}
</style>
<div class="native-main">
<img class="native-img" src="#native_logo#">
<div class="native-details">
<span class="native-company">#native_company#</span>
<span class="native-desc">#native_desc#</span>
</div>
</div>
<span class="native-cta">#native_cta#</span>
</a>
</div>

View File

@@ -0,0 +1,108 @@
<nav id="navbar" class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
</a>
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
<span class="icon" style="color: #333;">
<i class="fab fa-lg fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.twitter }}" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fab fa-lg fa-twitter"></i>
</span>
</a>
<div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenu{{ include.id }}" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item bd-navbar-item-documentation {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
<span class="icon has-text-primary">
<i class="fas fa-book"></i>
</span>
<span>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>
</span>
<span>{{ item.title }}</span>
</a>
{% endfor %}
<div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-link">
More
</div>
<div id="moreDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
{% for item in site.data.global.more_items %}
<a class="navbar-item {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
<div class="media">
<div class="media-left">
<span class="icon is-large has-text-{{ item.color }}">
<i class="{{ item.fa_type }} {{ item.fa_icon }} fa-2x"></i>
</span>
</div>
<div class="media-content">
<p>
<strong>{{ item.title }}</strong>
<br>
<small>{{ item.description }}</small>
</p>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</div>
<div class="navbar-end">
<a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.github }}" target="_blank">
<span class="icon" style="color: #333;">
<i class="fab fa-lg fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.twitter }}" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fab fa-lg fa-twitter"></i>
</span>
</a>
<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>
</p>
<p class="control">
<a class="button is-primary" href="{{ site.data.meta.download }}">
<strong>Download</strong>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</nav>

View File

@@ -0,0 +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>
<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>
</div>
</form>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,39 @@
<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>
{% if page.route == 'index' %}
<script src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript" src="{{ site.url }}/lib/index.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
{% elsif page.doc-subtab == 'navbar' %}
{% include examples/navbar-bottom.html %}
<script type="text/javascript" src="{{ site.url }}/lib/navbar.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
{% endif %}
<div id="fb-root"></div>
<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 async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
<script async defer type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-82634666-2', 'auto');
ga('send', 'pageview');
</script>
{% if page.route == 'index' %}
<script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
{% endif %}

View File

@@ -0,0 +1,25 @@
<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>
</div>
</div>
</div>
</div>
</section>