From: Jeremy Thomas Date: Tue, 10 Apr 2018 21:38:00 +0000 (+0100) Subject: Add documentation icons X-Git-Tag: 0.7.0~1^2~29 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a88b024dcc280fa7c5125a920addf09f622009a6;p=thirdparty%2Fbulma.git Add documentation icons --- diff --git a/docs/_data/icons.json b/docs/_data/icons.json index 72f712f42..b5ed5b53b 100644 --- a/docs/_data/icons.json +++ b/docs/_data/icons.json @@ -1,6 +1,6 @@ { "fontawesome4": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", - "fontawesome5": "https://use.fontawesome.com/releases/v5.0.6/js/all.js", + "fontawesome5": "https://use.fontawesome.com/releases/v5.0.7/js/all.js", "iconic": "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css", "ionicons": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css", "mdi": "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css" diff --git a/docs/_data/links.json b/docs/_data/links.json index 962d6c72f..cddf5800f 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -12,6 +12,8 @@ "overview": { "name": "Overview", "subtitle": "An overview of what Bulma as a framework is all about", + "color": "primary", + "icon": "eye", "path": "/documentation/overview" }, "overview-start": { @@ -62,6 +64,8 @@ "modifiers": { "name": "Modifiers", "subtitle": "An easy-to-read naming system designed for humans", + "color": "info", + "icon": "cogs", "path": "/documentation/modifiers" }, "modifiers-syntax": { @@ -92,6 +96,8 @@ "columns": { "name": "Columns", "subtitle": "The power of Flexbox in a simple interface", + "color": "star", + "icon": "columns", "path": "/documentation/columns" }, "columns-basics": { @@ -127,6 +133,8 @@ "layout": { "name": "Layout", "subtitle": "Design the structure of your webpage with these CSS classes", + "color": "success", + "icon": "warehouse", "path": "/documentation/layout" }, "layout-container": { @@ -167,6 +175,9 @@ "form": { "name": "Form", "subtitle": "The indispensable form controls, designed for maximum clarity", + "color": "link", + "icon_brand": "true", + "icon": "wpforms", "path": "/documentation/form" }, "form-general": { @@ -207,6 +218,8 @@ "elements": { "name": "Elements", "subtitle": "Essential interface elements that only require a single CSS class", + "color": "orange", + "icon": "cube", "path": "/documentation/elements" }, "elements-box": { @@ -267,6 +280,8 @@ "components": { "name": "Components", "subtitle": "Advanced multi-part components with lots of possibilities", + "color": "danger", + "icon": "cubes", "path": "/documentation/components" }, "components-breadcrumb": { diff --git a/docs/_includes/components/links.html b/docs/_includes/components/links.html index 35363a5f7..5e2faa964 100644 --- a/docs/_includes/components/links.html +++ b/docs/_includes/components/links.html @@ -15,7 +15,15 @@ {% endif %}

- +
+ {% if include.icons %} + + + + {% else %} + + {% endif %} +
{{ link.name }}

diff --git a/docs/_includes/global/navbar.html b/docs/_includes/global/navbar.html index d5eed5830..996852eb4 100644 --- a/docs/_includes/global/navbar.html +++ b/docs/_includes/global/navbar.html @@ -43,39 +43,38 @@ {% endfor %}

-
- More -
-
- + - + diff --git a/docs/_includes/index/start.html b/docs/_includes/index/start.html index 127859c43..1120d1719 100644 --- a/docs/_includes/index/start.html +++ b/docs/_includes/index/start.html @@ -1,4 +1,4 @@ -{% assign docs_link = site.data.links.by_id['documentation'] %} +{% assign docs_link = site.data.links.by_id['overview-start'] %} {% assign docs_url = site.url | append: docs_link.path %}
@@ -6,9 +6,12 @@

- And much more! + And so much more

+

+ Join more than 100,000 developers +

diff --git a/docs/_sass/header.sass b/docs/_sass/header.sass index b77c2af23..dc42104ef 100644 --- a/docs/_sass/header.sass +++ b/docs/_sass/header.sass @@ -18,6 +18,17 @@ background-color: darken($twitter, 5%) color: $white +#moreDropdown + .navbar-item + padding-left: 3em + position: relative + .icon + left: 1rem + position: absolute + text-align: center + top: 0.375rem + width: 1em + #moreDropdownBootstrap .icon color: $bootstrap @@ -32,7 +43,7 @@ .navbar-item white-space: normal #moreDropdown - width: 18rem + width: 14rem .navbar-item padding-right: 1rem white-space: normal diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index c21bbd997..f792ad604 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -10,35 +10,38 @@ color: $text-light display: block font-size: $size-5 - padding: 1rem 3rem 1.5rem + padding: 1rem 3rem 1.5rem 5rem + position: relative transition-duration: $speed transition-property: background-color, color strong 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-figure + position: absolute + right: calc(100% + 0.5em) + text-align: center + top: 0 + min-width: 1.5em + .bd-link-counter color: $link + display: block counter-increment: bd-links font-weight: $weight-normal - position: absolute - right: calc(100% + 0.625em) &::before content: counter(bd-links) .bd-link-icon + display: block font-size: 2rem - position: absolute - right: calc(100% + 0.5em) - text-align: center width: 1.5em +desktop diff --git a/docs/_sass/sponsors.sass b/docs/_sass/sponsors.sass index 6659cd018..020cf4904 100644 --- a/docs/_sass/sponsors.sass +++ b/docs/_sass/sponsors.sass @@ -37,6 +37,9 @@ .bd-partners-list align-items: flex-start display: flex + margin-left: auto + margin-right: auto + max-width: 1130px .bd-partner &.bd-is-sponsor flex-grow: 1 diff --git a/docs/blog.html b/docs/blog.html index 1576f0331..51243d1e7 100644 --- a/docs/blog.html +++ b/docs/blog.html @@ -40,9 +40,11 @@ breadcrumb: {% for post in site.posts %}

- - - +
+ + + +
{{ post.name }}

{% endcapture %} -

6 badges available

+{% include elements/anchor.html name="6 badges available" %} +

The Made with Bulma badge is available in 6 different versions: diff --git a/docs/more.html b/docs/more.html index 9e448f7bd..d42cd1f15 100644 --- a/docs/more.html +++ b/docs/more.html @@ -35,9 +35,11 @@ breadcrumb: {% assign link = site.data.links.by_id[link_id] %}

- - - +
+ + + +
{{ link.name }}

diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass index eaeaba37d..0cd812df4 100644 --- a/sass/components/navbar.sass +++ b/sass/components/navbar.sass @@ -33,7 +33,8 @@ $navbar-dropdown-item-hover-background-color: $background !default $navbar-dropdown-item-active-color: $link !default $navbar-dropdown-item-active-background-color: $background !default -$navbar-divider-background-color: $border !default +$navbar-divider-background-color: $background !default +$navbar-divider-height: 2px !default =navbar-fixed left: 0 @@ -124,6 +125,11 @@ body flex-shrink: 0 min-height: $navbar-height +.navbar-brand + a.navbar-item + &:hover + background-color: transparent + .navbar-tabs +overflow-touch max-width: 100vw @@ -155,7 +161,7 @@ a.navbar-item, color: $navbar-item-hover-color .navbar-item - display: flex + display: block flex-grow: 0 flex-shrink: 0 img @@ -201,7 +207,7 @@ a.navbar-item, background-color: $navbar-divider-background-color border: none display: none - height: 1px + height: $navbar-divider-height margin: 0.5rem 0 +touch @@ -279,6 +285,7 @@ a.navbar-item, align-items: center display: flex .navbar-item + display: flex &.has-dropdown align-items: stretch &.has-dropdown-up