From a1c19090014eb0e59800be94b605fa5a671babe8 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 21:16:50 +0100 Subject: [PATCH] Fix blog --- docs/_data/links.json | 4 + docs/_data/meta.json | 4 +- docs/_includes/blog-hero.html | 45 +++-- docs/_includes/components/breadcrumb.html | 36 ++++ docs/_includes/components/links.html | 9 +- docs/_includes/navbar.html | 2 + docs/_layouts/documentation.html | 43 +---- docs/_layouts/post.html | 125 +++++++++----- docs/_posts/2017-03-10-new-field-element.md | 1 + docs/_posts/2017-08-03-list-of-tags.md | 4 +- ...2017-10-09-roses-are-red-links-are-blue.md | 6 +- docs/_posts/2017-11-14-bulma-is-on-patreon.md | 2 +- ...018-01-18-bulma-supports-font-awesome-5.md | 2 +- docs/_sass/specific.sass | 103 +++-------- docs/blog.html | 71 +++++--- docs/css/bulma-docs.css | 161 +++--------------- docs/documentation/elements/icon.html | 1 + 17 files changed, 262 insertions(+), 357 deletions(-) create mode 100644 docs/_includes/components/breadcrumb.html diff --git a/docs/_data/links.json b/docs/_data/links.json index 944d1085..470ee9d1 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -318,6 +318,10 @@ "name": "Tabs", "subtitle": "Simple responsive horizontal navigation tabs, with different styles", "path": "/documentation/components/tabs" + }, + "blog": { + "name": "Blog", + "path": "/blog" } }, "categories": { diff --git a/docs/_data/meta.json b/docs/_data/meta.json index a171d2d6..83273d3c 100644 --- a/docs/_data/meta.json +++ b/docs/_data/meta.json @@ -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", @@ -9,4 +9,4 @@ "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/", "book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/", "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf" -} \ No newline at end of file +} diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html index 3a49c3c5..b43648da 100644 --- a/docs/_includes/blog-hero.html +++ b/docs/_includes/blog-hero.html @@ -1,27 +1,20 @@ -{% include navbar.html id="BlogHero" %} - -
-
-
-
-
-

- Blog -

-

- Stay updated about new features, bug fixes, and releases -

- - - - - Subscribe - -
-
- {% include carbon.html %} -
-
-
+
+
+

+ Blog +

+

+ Stay updated about new features, bug fixes, and releases +

+ + + + + Subscribe +
-
+ +
+ {% include carbon.html %} +
+ diff --git a/docs/_includes/components/breadcrumb.html b/docs/_includes/components/breadcrumb.html new file mode 100644 index 00000000..26a63db2 --- /dev/null +++ b/docs/_includes/components/breadcrumb.html @@ -0,0 +1,36 @@ +
+ + + {% if previous_link or next_link %} + + {% endif %} +
diff --git a/docs/_includes/components/links.html b/docs/_includes/components/links.html index 0bb3ddbd..35363a5f 100644 --- a/docs/_includes/components/links.html +++ b/docs/_includes/components/links.html @@ -14,8 +14,13 @@ {% assign link = site.data.links.by_id[thingy] %} {% endif %} -

{{ link.name }}

-

{{ link.subtitle }}

+

+ + {{ link.name }} +

+

+ {{ link.subtitle }} +

{% endfor %} diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index c4493e24..ef57d4ac 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -1,4 +1,5 @@ diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 3689cdb2..89b8dea4 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -31,42 +31,7 @@ route: documentation
-
- - - {% if previous_link or next_link %} - - {% endif %} -
+ {% include components/breadcrumb.html %}
@@ -74,10 +39,10 @@ route: documentation {{ page.title }}

- {% if current_link.subtitle %} - {{ current_link.subtitle }} - {% else %} + {% if page.subtitle %} {{ page.subtitle }} + {% else %} + {{ current_link.subtitle }} {% endif %}

{% if page.meta %} diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html index e9a0c648..188b020f 100644 --- a/docs/_layouts/post.html +++ b/docs/_layouts/post.html @@ -1,51 +1,96 @@ --- layout: default route: blog +breadcrumb: +- home +- blog --- -{% include navbar.html id="BlogHero" %} +{% include navbar.html id="Blog" %} -
- - - - - - - - - {{ page.name }} - - - -
+
+
+
+
+
+
+ -
-
-
-
-

- Back to Blog home -

-

- {{ page.title }} -

- -
-
- {{ content }} + {% if page.previous.url or page.next.url %} + + {% endif %} +
+ + +
+
+

+ {{ page.title }} +

+

+ {{ page.date | date_to_string }} +

+
+ +
+ {% include carbon.html %} +
+
+ +
+
+ {{ content }} +
-
+ +
-
+
diff --git a/docs/_posts/2017-03-10-new-field-element.md b/docs/_posts/2017-03-10-new-field-element.md index f01ab647..75cf7dc3 100644 --- a/docs/_posts/2017-03-10-new-field-element.md +++ b/docs/_posts/2017-03-10-new-field-element.md @@ -6,6 +6,7 @@ introduction: "

The .control 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.** diff --git a/docs/_posts/2017-08-03-list-of-tags.md b/docs/_posts/2017-08-03-list-of-tags.md index 4806fb49..88794dcc 100644 --- a/docs/_posts/2017-08-03-list-of-tags.md +++ b/docs/_posts/2017-08-03-list-of-tags.md @@ -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" --- @@ -17,4 +17,4 @@ A tag rarely comes on its own though, so Bulma now supports [list of tags](/docu -As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available! \ No newline at end of file +As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available! diff --git a/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md b/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md index 2e3afbc8..223e7852 100644 --- a/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md +++ b/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md @@ -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
Links are blue" -icon: "tag" +name: "Roses are red and links are blue" +icon: "link" --- By default, a browser will display links in blue. Bulma has up until now used the `$primary` color as the `$link` color: @@ -89,4 +89,4 @@ If you want to use the `$primary` color for your links, just **customize** your $link: $primary !default $link-invert: $primary-invert !default $link-focus-border: $primary !default -``` \ No newline at end of file +``` diff --git a/docs/_posts/2017-11-14-bulma-is-on-patreon.md b/docs/_posts/2017-11-14-bulma-is-on-patreon.md index b57b61ef..6c75c269 100644 --- a/docs/_posts/2017-11-14-bulma-is-on-patreon.md +++ b/docs/_posts/2017-11-14-bulma-is-on-patreon.md @@ -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 diff --git a/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md b/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md index cf4ca5cb..59ad057c 100644 --- a/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md +++ b/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md @@ -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 --- diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index f557a5f0..89bbf036 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -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 diff --git a/docs/blog.html b/docs/blog.html index e4cd4136..fe865409 100644 --- a/docs/blog.html +++ b/docs/blog.html @@ -1,33 +1,58 @@ --- layout: default route: blog +breadcrumb: +- home +- blog --- -{% include blog-hero.html %} +{% include navbar.html id="Blog" %} -

-
-
- {% for post in site.posts %} - - {% endfor %} + + {% endfor %} +
+
+
- + diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 30b901fc..bd49c968 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -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 { diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html index d7deafa7..c5ee6ab8 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -1,5 +1,6 @@ --- title: Icon +subtitle: "Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons etc." fontawesome4: true iconic: true ionicons: true