diff --git a/docs/_includes/index/customize.html b/docs/_includes/index/customize.html index 7352811c..e87d5d9f 100644 --- a/docs/_includes/index/customize.html +++ b/docs/_includes/index/customize.html @@ -1,6 +1,6 @@ {% assign customize_link = site.data.links.by_id['overview-customize'] %} -
+

diff --git a/docs/_posts/2018-04-13-new-website.md b/docs/_posts/2018-04-13-new-website.md new file mode 100644 index 00000000..dd6e2748 --- /dev/null +++ b/docs/_posts/2018-04-13-new-website.md @@ -0,0 +1,132 @@ +--- +title: "Website redesign: clearer layout, easier navigation, better content, and much more!" +layout: post +introduction: "A brand new look" +color: "star" +name: "Website redesign" +icon: "star" +--- + +The Bulma website has been widely redesigned! + +
+
+

Before

+ + v7 website + +
+
+

After

+ + v7 website + +
+
+ +{% include elements/anchor.html name="Navbar" %} + +The **navbar** has been updated with a ligther markup and cleaner design: + +
+ + navbar + +
+ +This doesn't affect the current navbars. There's actually a new modifier called `is-spaced` that was created for this new navbar. Documentation coming soon! + +{% include elements/anchor.html name="Customize example" %} + +On the homepage, there's a new [**customization** section with a live example](/#customize): + +
+ + customize + +
+ +{% include elements/anchor.html name="Breadcrumb" %} + +
+ + breadcrumb + +
+ +A **breadcrumb** is not visible at the top of each page, to easily navigate up and down the hierarchy. + +This has led to the creation of new **intermediate pages**: + +* [documentation](/documentation) +* [documentation/modifiers](/documentation/modifiers) +* [documentation/columns](/documentation/columns) +* [documentation/layout](/documentation/layout) +* [documentation/form](/documentation/form) +* [documentation/elements](/documentation/elements) +* [documentation/components](/documentation/components) +* [more](/more) + +{% include elements/anchor.html name="Links" %} + +These intermediate pages have new **link boxes** that help dive into each sub-category: + +
+ + footer links + +
+ +{% include elements/anchor.html name="Previous/Next" %} + +Next to the breadcrumb, you can easily navigate to the **sibling** pages with the **previous** and **next** links: + +
+ + prevnext buttons + +
+ +These links are also available at the bottom: + +
+ + prevnextbis buttons + +
+ +{% include elements/anchor.html name="Categories" %} + +There's a new **sidebar** including a navigation menu with all the categories and sub-categories: + +
+ + categories menu + +
+ +{% include elements/anchor.html name="Scroll spy" %} + +On some pages below the categories, you'll find a new menu called "On this page" which is actually a **scroll spy**: + +
+ + scrollspy menu + +
+ +{% include elements/anchor.html name="Footer" %} + +The footer has been redesigned as well. Among other things, there's a **sitemap** available: + +
+ + footer links + +
+ +{% include elements/anchor.html name="Code" %} + +The Bulma website is built with **Jekyll**. In the process of this redesign, the underlying code that helps maintain this website has been optimized and cleaned up as well. + +This well help further updates to be easier. diff --git a/docs/_sass/global.sass b/docs/_sass/global.sass index f90ea789..838d1544 100644 --- a/docs/_sass/global.sass +++ b/docs/_sass/global.sass @@ -30,7 +30,7 @@ $carbon-poweredby-height: 20px margin-left: auto margin-right: auto max-width: $carbon-width - min-height: $carbon-height + min-height: $carbon-height + $carbon-poweredby-height min-width: 280px #carbon @@ -55,11 +55,14 @@ $carbon-poweredby-height: 20px position: relative &:hover .carbon-img::after - +overlay background-color: rgba(#000, 0.05) content: "" display: block + height: $carbon-height + left: 0 + position: absolute right: $carbon-spacing + top: 0 .carbon-img bottom: 0 float: left diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 5eef2fd7..cc8c7afb 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -133,7 +133,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, .bd-patreon-button:hover::after, #carbonads .carbon-wrap:hover .carbon-img::after, .bd-focus-item::before, .intro-spinner, .intro-shadow, .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, .bd-patreon-button:hover::after, .bd-focus-item::before, .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; @@ -10201,7 +10201,7 @@ svg { margin-left: auto; margin-right: auto; max-width: 300px; - min-height: 100px; + min-height: 120px; min-width: 280px; } @@ -10242,7 +10242,11 @@ svg { background-color: rgba(0, 0, 0, 0.05); content: ""; display: block; + height: 100px; + left: 0; + position: absolute; right: 1rem; + top: 0; } #carbonads .carbon-img {