diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html index 52d06472..86e5d23e 100644 --- a/docs/_layouts/post.html +++ b/docs/_layouts/post.html @@ -7,20 +7,34 @@ route: blog
-
-

- Back -

-

- {{ page.date | date_to_string }} -

-

- {{ page.title }} -

-
-
- {{ content }} +
+
+
+ + + + + + + + {{ page.name }} + +
+

+ Back +

+

+ {{ page.date | date_to_string }} +

+

+ {{ page.title }} +

+
+
+
+ {{ content }} +
- +
diff --git a/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md b/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md index de77fe05..9a4a8d21 100644 --- a/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md +++ b/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md @@ -1,6 +1,10 @@ --- layout: post title: "Blog launched, new responsive columns, new helpers" +introduction: "First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes." +color: "danger" +name: "Launch!" +icon: "rocket" --- First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes. diff --git a/docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md b/docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md index 4f24f6f4..6623a532 100644 --- a/docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md +++ b/docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md @@ -1,6 +1,10 @@ --- layout: post title: "Metro UI CSS grid with Bulma tiles" +introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?
Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element." +color: "info" +name: "Metro UI" +icon: "th-large" --- Have you ever wanted to build a **Metro-UI-like grid in CSS**? diff --git a/docs/_posts/2017-03-10-new-field-element.md b/docs/_posts/2017-03-10-new-field-element.md index 62e5a32c..829383b8 100644 --- a/docs/_posts/2017-03-10-new-field-element.md +++ b/docs/_posts/2017-03-10-new-field-element.md @@ -3,6 +3,9 @@ layout: post title: "New field element (for better controls)" published: true introduction: "

The .control element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its block characteristics with its inline variations.

" +color: "success" +name: "Field element" +icon: "square-o" --- **TL;DR: there's a new `.field` container, and `.control` has been re-purposed.** diff --git a/docs/_posts/2017-07-24-access-previous-bulma-versions.md b/docs/_posts/2017-07-24-access-previous-bulma-versions.md index 438277c5..e2ff423e 100644 --- a/docs/_posts/2017-07-24-access-previous-bulma-versions.md +++ b/docs/_posts/2017-07-24-access-previous-bulma-versions.md @@ -1,8 +1,18 @@ --- layout: post title: "Access previous Bulma versions" +introduction: "It is now possible to **access previous versions** of Bulma. Just head towards: [http://bulma.io/versions/](http://bulma.io/versions/)" +color: "primary" +name: "Versions" +icon: "undo" --- It is now possible to **access previous versions** of Bulma. Just head towards: [http://bulma.io/versions/](http://bulma.io/versions/) +
+ + Previous versions of Bulma + +
+ While only version [0.4.4](http://bulma.io/versions/0.4.4) is accessible now, each **new release** will remain available forever. diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index d59cc5ff..75954645 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -33,3 +33,61 @@ color: $text-strong &:hover border-bottom-color: $primary + +.article-image + background-color: $primary + display: block + height: 240px + margin-left: auto + margin-right: auto + width: 320px + position: relative + text-align: center + @each $name, $pair in $colors + $color: nth($pair, 1) + &.is-#{$name} + background-color: $color + &:hover + .article-overlay + opacity: 0.25 + .article-icon + transform: scale(1.1) + .article-title + transform: scale(0.9) + &.is-single + margin-bottom: 2rem + width: 100% + +mobile + height: 180px + width: 240px + + +.article-overlay + +overlay + background-color: $black + opacity: 0 + transition-duration: $speed + transition-property: opacity + transition-timing-function: $easing + +.article-icon, +.article-title + +overlay + align-items: center + display: flex + justify-content: center + transition-duration: $speed + transition-property: transform + transition-timing-function: $easing + +.article-icon + color: $black + opacity: 0.25 + .fa + font-size: 56px + +.article-title + color: $white + font-size: 2.5rem + font-weight: $weight-bold + line-height: 1.25 diff --git a/docs/blog.html b/docs/blog.html index 0227c8f4..7b76277e 100644 --- a/docs/blog.html +++ b/docs/blog.html @@ -5,26 +5,45 @@ route: blog {% include blog-hero.html %} -{% for post in site.posts %}
-
-
-

- {{ post.date | date_to_string }} -

-

- - {{ post.title }} - -

-
-
-
- {{ post.content }} + {% for post in site.posts %} +
-
+ + {% endfor %}
-{% endfor %} diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 715bbebe..12cbaf6e 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -8432,6 +8432,121 @@ html.route-index #carbon { border-bottom-color: #00d1b2; } +.article-image { + background-color: #00d1b2; + display: block; + height: 240px; + margin-left: auto; + margin-right: auto; + width: 320px; + position: relative; + text-align: center; +} + +.article-image.is-white { + background-color: white; +} + +.article-image.is-black { + background-color: #0a0a0a; +} + +.article-image.is-light { + background-color: whitesmoke; +} + +.article-image.is-dark { + background-color: #363636; +} + +.article-image.is-primary { + background-color: #00d1b2; +} + +.article-image.is-info { + background-color: #3273dc; +} + +.article-image.is-success { + background-color: #23d160; +} + +.article-image.is-warning { + background-color: #ffdd57; +} + +.article-image.is-danger { + background-color: #ff3860; +} + +.article-image:hover .article-overlay { + opacity: 0.25; +} + +.article-image:hover .article-icon { + transform: scale(1.1); +} + +.article-image:hover .article-title { + transform: scale(0.9); +} + +.article-image.is-single { + margin-bottom: 2rem; + width: 100%; +} + +@media screen and (max-width: 768px) { + .article-image { + height: 180px; + width: 240px; + } +} + +.article-overlay { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + background-color: #0a0a0a; + opacity: 0; + transition-duration: 86ms; + transition-property: opacity; + transition-timing-function: ease-out; +} + +.article-icon, +.article-title { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + align-items: center; + display: flex; + justify-content: center; + transition-duration: 86ms; + transition-property: transform; + transition-timing-function: ease-out; +} + +.article-icon { + color: #0a0a0a; + opacity: 0.25; +} + +.article-icon .fa { + font-size: 56px; +} + +.article-title { + color: white; + font-size: 2.5rem; + font-weight: 700; + line-height: 1.25; +} + .example, .structure { border: 1px solid #ffdd57;