library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix blog

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-09 21:16:50 +01:00
parent e3ecca6432
commit a1c1909001
17 changed files with 262 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_data/links.json
View File

@ -318,6 +318,10 @@
"name": "Tabs",
"subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
"path": "/documentation/components/tabs"
},
"blog": {
"name": "Blog",
"path": "/blog"
}
},
"categories": {

2
docs/_data/meta.json
View File

@ -1,7 +1,7 @@
{
"title": "Bulma: a modern CSS framework based on Flexbox",
"description": "Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.",
"documentation": "/documentation/overview/start/",
"documentation": "/documentation",
"download": "https://github.com/jgthms/bulma/releases/download/0.6.2/bulma-0.6.2.zip",
"github": "https://github.com/jgthms/bulma",
"twitter": "https://twitter.com/jgthms",

45
docs/_includes/blog-hero.html
View File

@ -1,27 +1,20 @@
{% include navbar.html id="BlogHero" %}
<section class="hero is-warning">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h1 class="title">
<a href="{{ site.url }}/blog">Blog</a>
</h1>
<p class="subtitle">
Stay updated about new features, bug fixes, and releases
</p>
<a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
<span class="icon">
<i class="fas fa-rss"></i>
</span>
<span>Subscribe</span>
</a>
</div>
<div class="column is-narrow">
{% include carbon.html %}
</div>
</div>
</div>
<header class="bd-header">
<div class="bd-header-titles">
<h1 class="title">
Blog
</h1>
<p class="subtitle is-4">
Stay updated about new features, bug fixes, and releases
</p>
<a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
<span class="icon">
<i class="fas fa-rss"></i>
</span>
<span>Subscribe</span>
</a>
</div>
</section>
<div class="bd-header-carbon">
{% include carbon.html %}
</div>
</header>

36
docs/_includes/components/breadcrumb.html Normal file
View File

@ -0,0 +1,36 @@
<div class="bd-breadcrumb">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
{% for key in page.breadcrumb %}
{% assign link = site.data.links.by_id[key] %}
<li{% if forloop.last %} class="is-active"{% endif %}>
<a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
</li>
{% endfor %}
</ul>
</nav>
{% if previous_link or next_link %}
<nav class="bd-prev-next">
{% if previous_link %}
<a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
←
</a>
{% else %}
<span>
←
</span>
{% endif %}
{% if next_link %}
<a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
→
</a>
{% else %}
<span>
→
</span>
{% endif %}
</nav>
{% endif %}
</div>

9
docs/_includes/components/links.html
View File

@ -14,8 +14,13 @@
{% assign link = site.data.links.by_id[thingy] %}
{% endif %}
<a class="bd-link" href="{{ site.url }}{{ link.path }}">
<h2 class="bd-link-name">{{ link.name }}</h2>
<p class="bd-link-subtitle">{{ link.subtitle }}</p>
<h2 class="bd-link-name">
<span class="bd-link-counter"></span>
{{ link.name }}
</h2>
<p class="bd-link-subtitle">
{{ link.subtitle }}
</p>
</a>
{% endfor %}
</nav>

2
docs/_includes/navbar.html
View File

@ -1,4 +1,5 @@
<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">
@ -103,4 +104,5 @@
</div>
</div>
</div>
</div>
</nav>

43
docs/_layouts/documentation.html
View File

@ -31,42 +31,7 @@ route: documentation
<div class="bd-main-container container">
<div class="bd-duo">
<div class="bd-lead">
<div class="bd-breadcrumb">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
{% for key in page.breadcrumb %}
{% assign link = site.data.links.by_id[key] %}
<li{% if forloop.last %} class="is-active"{% endif %}>
<a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
</li>
{% endfor %}
</ul>
</nav>
{% if previous_link or next_link %}
<nav class="bd-prev-next">
{% if previous_link %}
<a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
←
</a>
{% else %}
<span>
←
</span>
{% endif %}
{% if next_link %}
<a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
→
</a>
{% else %}
<span>
→
</span>
{% endif %}
</nav>
{% endif %}
</div>
{% include components/breadcrumb.html %}
<header class="bd-header">
<div class="bd-header-titles">
@ -74,10 +39,10 @@ route: documentation
{{ page.title }}
</h1>
<p class="subtitle is-4">
{% if current_link.subtitle %}
{{ current_link.subtitle }}
{% else %}
{% if page.subtitle %}
{{ page.subtitle }}
{% else %}
{{ current_link.subtitle }}
{% endif %}
</p>
{% if page.meta %}

125
docs/_layouts/post.html
View File

@ -1,51 +1,96 @@
---
layout: default
route: blog
breadcrumb:
- home
- blog
---
{% include navbar.html id="BlogHero" %}
{% include navbar.html id="Blog" %}
<div class="bd-article-image is-single is-{{ page.color }}">
<span class="bd-article-overlay"></span>
<span class="bd-article-icon">
<i class="{% if page.icon_brand %}fab{% else %}fas{% endif %} fa-{{ page.icon }}"></i>
</span>
<strong class="bd-article-info">
<span>
<time class="bd-article-date" datetime="{{ page.date | date_to_xmlschema }}">
{{ page.date | date_to_string }}
</time>
<strong class="bd-article-title">
{{ page.name }}
</strong>
</span>
</strong>
</div>
<main class="bd-main">
<div class="bd-side-background"></div>
<div class="bd-main-container container">
<div class="bd-duo">
<div class="bd-lead">
<div class="bd-breadcrumb">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
{% assign link = site.data.links.by_id['home'] %}
<a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
</li>
<li>
{% assign link = site.data.links.by_id['blog'] %}
<a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
</li>
<li class="is-active">
<a href="{{ page.url }}">{{ page.name }}</a>
</li>
</ul>
</nav>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-offset-2 is-8">
<p class="subtitle is-6">
<a class="bd-article-back" href="{{ site.url }}/blog">Back to Blog home</a>
</p>
<h1 class="title is-2">
{{ page.title }}
</h1>
</article>
<hr>
<div class="content is-medium">
{{ content }}
{% if page.previous.url or page.next.url %}
<nav class="bd-prev-next">
{% if page.previous.url %}
<a href="{{ site.url }}{{ page.previous.url }}">
←
</a>
{% else %}
<span>
←
</span>
{% endif %}
{% if page.next.url %}
<a href="{{ site.url }}{{ page.next.url }}">
→
</a>
{% else %}
<span>
→
</span>
{% endif %}
</nav>
{% endif %}
</div>
<header class="bd-header">
<div class="bd-header-titles">
<h1 class="title">
{{ page.title }}
</h1>
<p class="subtitle is-4">
{{ page.date | date_to_string }}
</p>
</div>
<div class="bd-header-carbon">
{% include carbon.html %}
</div>
</header>
<div class="bd-content">
<div class="content is-medium">
{{ content }}
</div>
</div>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
{% if page.previous.url %}
<a class="pagination-previous" href="{{ page.previous.url }}">Previous post</a>
{% endif %}
{% if page.next.url %}
<a class="pagination-next" href="{{ page.next.url }}">Next post</a>
{% endif %}
</nav>
</div>
<aside class="bd-side">
<nav class="bd-categories">
{% for post in site.posts %}
<div class="bd-category">
<header class="bd-category-header">
<a class="bd-category-name" href="{{ post.url }}">
<strong>{{ post.name }}</strong>
</a>
</header>
</div>
{% endfor %}
</nav>
</aside>
</div>
</div>
</section>
</main>

1
docs/_posts/2017-03-10-new-field-element.md
View File

@ -6,6 +6,7 @@ introduction: "<p>The <code>.control</code> element has been a very versatile co
color: "success"
name: "Field element"
icon: "square"
icon_regular: true
---
**TL;DR: there's a new `.field` container, and `.control` has been re-purposed.**

2
docs/_posts/2017-08-03-list-of-tags.md
View File

@ -2,7 +2,7 @@
layout: post
title: "New feature: list of tags"
introduction: "What's better than one tag? Multiple tags!"
color: "orange"
color: "success"
name: "List of tags"
icon: "tag"
---

4
docs/_posts/2017-10-09-roses-are-red-links-are-blue.md
View File

@ -3,8 +3,8 @@ layout: post
title: "Roses are red – Links are blue"
introduction: "What's better than one tag? Multiple tags!"
color: "link"
name: "Roses are red<br>Links are blue"
icon: "tag"
name: "Roses are red and links are blue"
icon: "link"
---
By default, a browser will display links in <strong style="color: blue;">blue</strong>. Bulma has up until now used the `$primary` color as the `$link` color:

2
docs/_posts/2017-11-14-bulma-is-on-patreon.md
View File

@ -2,7 +2,7 @@
title: "Bulma is on Patreon!"
layout: post
introduction: "Support Bulma's future"
color: "primary"
color: "patreon"
name: "Bulma on Patreon"
icon: "patreon"
icon_brand: true

2
docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md
View File

@ -4,7 +4,7 @@ layout: post
introduction: "No change required!"
color: "info"
name: "Font Awesome 5"
icon: "font-awesome-alt"
icon: "font-awesome"
icon_brand: true
---

103
docs/_sass/specific.sass
View File

@ -11,16 +11,29 @@
font-weight: $weight-semibold
&:hover
background-color: $white-bis
&.bd-is-post
padding-left: 5rem
.bd-link-name
line-height: 1.25
margin-bottom: 0.25em
position: relative
.bd-link-counter
color: $link
counter-increment: bd-links
font-weight: $weight-normal
position: absolute
right: calc(100% + 0.625em)
&::before
color: $link
counter-increment: bd-links
content: counter(bd-links)
font-weight: $weight-normal
position: absolute
right: calc(100% + 0.625em)
.bd-link-icon
font-size: 2rem
position: absolute
right: calc(100% + 0.5em)
text-align: center
width: 1.5em
+desktop
.bd-links
@ -162,83 +175,11 @@ $navbar-items: ("documentation": $primary, "templates": $info, "videos": $succes
.has-text-orange
color: $orange !important
.bd-article-image
background-color: $primary
display: block
height: 240px
margin-left: auto
margin-right: auto
overflow: hidden
position: relative
text-align: center
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
background-color: $color
&.is-bootstrap
background-color: $bootstrap
&.is-orange
background-color: $orange
&:hover
.bd-article-overlay
opacity: 0.25
.bd-article-icon
transform: scale(1.4)
.bd-article-date
transform: scale(0.9)
.bd-article-title
transform: scale(1.1)
&.is-single
margin-bottom: 2rem
width: 100%
&.is-share
height: 315px
margin: 2rem auto
width: 600px
.has-text-bootstrap
color: $bootstrap !important
.bd-article-overlay
+overlay
background-color: $black
opacity: 0
transition-duration: $speed
transition-property: opacity
transition-timing-function: $easing
.bd-article-icon,
.bd-article-info
+overlay
align-items: center
display: flex
justify-content: center
.bd-article-icon,
.bd-article-date,
.bd-article-title
transition-duration: $speed
transition-property: transform
transition-timing-function: $easing
.bd-article-icon
color: $black
font-size: 56px
opacity: 0.25
& > span
display: block
.bd-article-info
padding: 20px
.bd-article-date
color: rgba(#000, 0.5)
display: block
.bd-article-title
color: $white
display: block
font-size: 2.5rem
font-weight: $weight-bold
line-height: 1.25
padding: 0 20px
.has-text-patreon
color: $patreon !important
.bd-emoji
margin-right: 0.5em

71
docs/blog.html
View File

@ -1,33 +1,58 @@
---
layout: default
route: blog
breadcrumb:
- home
- blog
---
{% include blog-hero.html %}
{% include navbar.html id="Blog" %}
<section class="section">
<div class="container">
<div class="columns is-multiline">
{% for post in site.posts %}
<article class="column is-4">
<a class="bd-article-image is-{{ post.color }}" href="{{ post.url }}">
<span class="bd-article-overlay"></span>
<span class="bd-article-icon">
<i class="{% if post.icon_brand %}fab{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
</span>
<strong class="bd-article-info">
<span>
<time class="bd-article-date" datetime="{{ post.date | date_to_xmlschema }}">
<main class="bd-main">
<div class="bd-main-container container">
<div class="bd-duo">
<div class="bd-lead">
{% include components/breadcrumb.html %}
<header class="bd-header">
<div class="bd-header-titles">
<h1 class="title">
Blog
</h1>
<p class="subtitle is-4">
Stay updated about new features, bug fixes, and releases
</p>
<a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
<span class="icon">
<i class="fas fa-rss"></i>
</span>
<span>Subscribe</span>
</a>
</div>
<div class="bd-header-carbon">
{% include carbon.html %}
</div>
</header>
<div class="bd-content">
<div class="bd-links">
{% for post in site.posts %}
<a class="bd-link bd-is-post" href="{{ post.url }}">
<h2 class="bd-link-name">
<span class="bd-link-icon has-text-{{ post.color }}">
<i class="{% if post.icon_brand %}fab{% elsif post.icon_regular %}far{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
</span>
{{ post.name }}
</h2>
<time class="bd-link-subtitle" datetime="{{ post.date | date_to_xmlschema }}">
{{ post.date | date_to_string }}
</time>
<strong class="bd-article-title">
{{ post.name }}
</strong>
</span>
</strong>
</a>
</article>
{% endfor %}
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</section>
</main>

161
docs/css/bulma-docs.css
View File

@ -130,8 +130,7 @@
width: 1em;
}
.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon,
.bd-article-info, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
.bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
bottom: 0;
left: 0;
@ -10538,19 +10537,36 @@ svg {
background-color: #fafafa;
}
.bd-link.bd-is-post {
padding-left: 5rem;
}
.bd-link-name {
line-height: 1.25;
margin-bottom: 0.25em;
position: relative;
}
.bd-link-name::before {
.bd-link-counter {
color: #3273dc;
counter-increment: bd-links;
content: counter(bd-links);
font-weight: 400;
position: absolute;
right: calc(100% + 0.625em);
}
.bd-link-counter::before {
content: counter(bd-links);
}
.bd-link-icon {
font-size: 2rem;
position: absolute;
right: calc(100% + 0.5em);
text-align: center;
width: 1.5em;
}
@media screen and (min-width: 1088px) {
.bd-links {
display: flex;
@ -10815,141 +10831,12 @@ svg {
color: #ff470f !important;
}
.bd-article-image {
background-color: #00d1b2;
display: block;
height: 240px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
text-align: center;
.has-text-bootstrap {
color: #6f5499 !important;
}
.bd-article-image.is-white {
background-color: white;
}
.bd-article-image.is-black {
background-color: #0a0a0a;
}
.bd-article-image.is-light {
background-color: whitesmoke;
}
.bd-article-image.is-dark {
background-color: #363636;
}
.bd-article-image.is-primary {
background-color: #00d1b2;
}
.bd-article-image.is-link {
background-color: #3273dc;
}
.bd-article-image.is-info {
background-color: #209cee;
}
.bd-article-image.is-success {
background-color: #23d160;
}
.bd-article-image.is-warning {
background-color: #ffdd57;
}
.bd-article-image.is-danger {
background-color: #ff3860;
}
.bd-article-image.is-bootstrap {
background-color: #6f5499;
}
.bd-article-image.is-orange {
background-color: #ff470f;
}
.bd-article-image:hover .bd-article-overlay {
opacity: 0.25;
}
.bd-article-image:hover .bd-article-icon {
transform: scale(1.4);
}
.bd-article-image:hover .bd-article-date {
transform: scale(0.9);
}
.bd-article-image:hover .bd-article-title {
transform: scale(1.1);
}
.bd-article-image.is-single {
margin-bottom: 2rem;
width: 100%;
}
.bd-article-image.is-share {
height: 315px;
margin: 2rem auto;
width: 600px;
}
.bd-article-overlay {
background-color: #0a0a0a;
opacity: 0;
transition-duration: 86ms;
transition-property: opacity;
transition-timing-function: ease-out;
}
.bd-article-icon,
.bd-article-info {
align-items: center;
display: flex;
justify-content: center;
}
.bd-article-icon,
.bd-article-date,
.bd-article-title {
transition-duration: 86ms;
transition-property: transform;
transition-timing-function: ease-out;
}
.bd-article-icon {
color: #0a0a0a;
font-size: 56px;
opacity: 0.25;
}
.bd-article-icon > span {
display: block;
}
.bd-article-info {
padding: 20px;
}
.bd-article-date {
color: rgba(0, 0, 0, 0.5);
display: block;
}
.bd-article-title {
color: white;
display: block;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.25;
padding: 0 20px;
.has-text-patreon {
color: #f96854 !important;
}
.bd-emoji {

1
docs/documentation/elements/icon.html
View File

@ -1,5 +1,6 @@
---
title: Icon
subtitle: "Bulma is compatible with <strong>all icon font libraries</strong>: <a href=\"https://fontawesome.com/\">Font Awesome 5</a>, <a href=\"http://fontawesome.io/\">Font Awesome 4</a>, <a href=\"https://materialdesignicons.com\">Material Design Icons</a>, <a href=\"https://useiconic.com/open\">Open Iconic</a>, <a href=\"http://ionicons.com/\">Ionicons</a> etc."
fontawesome4: true
iconic: true
ionicons: true