mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Bulma v9 website (#3249)
* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
This commit is contained in:
Jeremy Thomas
GitHub
parent
c5edaea84f
commit
08ef4df2c0
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
2
css/bulma-rtl.min.css
vendored
2
css/bulma-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
709
css/bulma.css
vendored
709
css/bulma.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
2
css/bulma.min.css
vendored
2
css/bulma.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,249 +1,114 @@
|
||||
{
|
||||
"10": [
|
||||
{
|
||||
"name": "Beth LeBeau",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "divby0",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Nikola",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Steen Jakobsen",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Osvalds Ozolnieks",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Steve Trambert",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "J.T. Feng",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Felipe Lujan-Bear",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Matthew Tole",
|
||||
"twitter": "matthewtole",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Benjamin Gorez",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Mike Moran",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Manish Malik",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Walter Tommasi",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "James Dernie",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Eric Doversberger",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Ian Ebden",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Thomas Klinger",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Tanel Jõeäär",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Giovanni Panozzo",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Hernán Zubiri",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Andriy Andriyuk",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
}
|
||||
],
|
||||
"30": [
|
||||
{
|
||||
"name": "Arturas",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Al Romano",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Harald Maida",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Harley Hicks",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Brooke Schreier Ganz",
|
||||
"twitter": "Asparagirl",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Clemens Gallhuber",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Dan Weaver",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Neil Dingeldein",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Lord ",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Leonardo Eiji Koshimura",
|
||||
"twitter": "lekoshimura",
|
||||
"start_timestamp": null
|
||||
}
|
||||
],
|
||||
"100": [
|
||||
{
|
||||
"name": "Iaroslav Baklan",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Iaroslav Baklan",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Raj.bet",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"discord": "",
|
||||
"start_timestamp": 1593679726511
|
||||
},
|
||||
{
|
||||
"name": "Maurice Perry",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"discord": "",
|
||||
"start_timestamp": 1575826633076
|
||||
},
|
||||
{
|
||||
"name": "xvxx",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"discord": "",
|
||||
"start_timestamp": 1572311879973
|
||||
},
|
||||
{
|
||||
"name": "Greg Hale",
|
||||
"name": "Al Romano",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
}
|
||||
],
|
||||
"300": [
|
||||
"discord": "vip3rousmango#3357",
|
||||
"start_timestamp": 1551649687685
|
||||
},
|
||||
{
|
||||
"name": "Jason Seminara",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Stuart Stanfield",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"discord": "",
|
||||
"start_timestamp": 1532955289949
|
||||
},
|
||||
{
|
||||
"name": "Jordan Nemrow",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
"discord": "",
|
||||
"start_timestamp": 1510767260223
|
||||
}
|
||||
],
|
||||
"500": [
|
||||
{
|
||||
"name": "MonoVM ",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Fintan Costello",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Adela Belin",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Sparheld International GmbH",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
{
|
||||
"name": "Robert Bolder",
|
||||
"twitter": "",
|
||||
"start_timestamp": null
|
||||
},
|
||||
"30": [
|
||||
{
|
||||
"name": "Garry Newman",
|
||||
"twitter": "garrynewman",
|
||||
"start_timestamp": null
|
||||
"discord": "",
|
||||
"start_timestamp": 1511186868165
|
||||
},
|
||||
{
|
||||
"name": "Adrian Ocneanu",
|
||||
"twitter": "aocneanu",
|
||||
"start_timestamp": null,
|
||||
"discord": "",
|
||||
"start_timestamp": 1510731567799,
|
||||
"website_url": "https://www.earthlink.ro/",
|
||||
"website_name": "Earthlink"
|
||||
}
|
||||
]
|
||||
],
|
||||
"100": [
|
||||
{
|
||||
"name": "123Calendars",
|
||||
"twitter": "",
|
||||
"discord": "",
|
||||
"start_timestamp": 1604304762614
|
||||
},
|
||||
{
|
||||
"name": "Iaroslav Baklan",
|
||||
"twitter": "",
|
||||
"discord": "",
|
||||
"start_timestamp": 1603288719531
|
||||
},
|
||||
{
|
||||
"name": "Iaroslav Baklan",
|
||||
"twitter": "",
|
||||
"discord": "",
|
||||
"start_timestamp": 1603287724728
|
||||
},
|
||||
{
|
||||
"name": "Raj.bet",
|
||||
"twitter": "",
|
||||
"discord": "",
|
||||
"start_timestamp": 1598967631148
|
||||
},
|
||||
{
|
||||
"name": "MonoVM ",
|
||||
"twitter": "",
|
||||
"discord": "",
|
||||
"start_timestamp": 1588271410706
|
||||
},
|
||||
{
|
||||
"name": "Fintan Costello",
|
||||
"twitter": "",
|
||||
"discord": "",
|
||||
"start_timestamp": 1584546730317
|
||||
},
|
||||
{
|
||||
"name": "Adela Belin",
|
||||
"twitter": "",
|
||||
"discord": "",
|
||||
"start_timestamp": 1564993835335
|
||||
},
|
||||
{
|
||||
"name": "Sparheld International GmbH",
|
||||
"twitter": "",
|
||||
"discord": "",
|
||||
"start_timestamp": 1563870141112
|
||||
},
|
||||
{
|
||||
"name": "Robert Bolder",
|
||||
"twitter": "",
|
||||
"discord": "",
|
||||
"start_timestamp": 1546593784071
|
||||
}
|
||||
],
|
||||
"300": [],
|
||||
"500": []
|
||||
}
|
||||
|
||||
@ -1,40 +1,29 @@
|
||||
{
|
||||
"1": [
|
||||
"scott-joe",
|
||||
"KirillOsenkov",
|
||||
"romainnorberg",
|
||||
"rewtraw",
|
||||
"bastien09",
|
||||
"neetso",
|
||||
"cosgrove39264",
|
||||
"bekwam",
|
||||
"smjnab",
|
||||
"timothymiko",
|
||||
"mattsly",
|
||||
"aminah-io",
|
||||
"Carpenter0100",
|
||||
"dangowans",
|
||||
"coyled",
|
||||
"biximilien",
|
||||
"markuswustenberg",
|
||||
"eddielement",
|
||||
"biximilien"
|
||||
"dangowans",
|
||||
"Carpenter0100",
|
||||
"aminah-io",
|
||||
"marcop135",
|
||||
"mattsly",
|
||||
"timothymiko",
|
||||
"smjnab",
|
||||
"bekwam",
|
||||
"Heartz66",
|
||||
"cosgrove39264",
|
||||
"neetso",
|
||||
"bastien09",
|
||||
"rewtraw",
|
||||
"romainnorberg",
|
||||
"KirillOsenkov",
|
||||
"scott-joe"
|
||||
],
|
||||
"10": [
|
||||
"Gomah",
|
||||
"sasmithjr",
|
||||
"seansan",
|
||||
"linkdd",
|
||||
"nafSadh",
|
||||
"mmmonica50",
|
||||
"mieko"
|
||||
],
|
||||
"100": [
|
||||
"patrick136",
|
||||
"airtract",
|
||||
"Pillarwm",
|
||||
"brabusdot"
|
||||
],
|
||||
"300": [
|
||||
"wingerdkm1",
|
||||
"stacho",
|
||||
"kevivmatrix"
|
||||
]
|
||||
"10": ["Mirobit", "mieko", "mmmonica50", "linkdd", "seansan", "Gomah"],
|
||||
"30": [],
|
||||
"100": ["GilmarLangelaan", "aaditysony", "faveable", "patrick136"],
|
||||
"300": ["shereenqumsieh", "kevivmatrix", "stacho", "wingerdkm1"],
|
||||
"500": []
|
||||
}
|
||||
|
||||
@ -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.14.0/js/all.js",
|
||||
"fontawesome5": "https://use.fontawesome.com/releases/v5.15.2/js/all.js",
|
||||
"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"
|
||||
}
|
||||
|
||||
@ -9,6 +9,19 @@
|
||||
"subtitle": "Everything you need to <strong>create a website</strong> with Bulma",
|
||||
"path": "/documentation"
|
||||
},
|
||||
"become-sponsor": {
|
||||
"name": "Become a Bulma sponsor",
|
||||
"subtitle": "Sponsor Bulma and Open Source via <a href=\"https://www.patreon.com/jgthms\" target=\"_blank\">Patreon</a> and <a href=\"https://github.com/sponsors/jgthms\" target=\"_blank\">GitHub</a>",
|
||||
"path": "/become-a-bulma-sponsor"
|
||||
},
|
||||
"bulma-book": {
|
||||
"name": "The official Bulma book",
|
||||
"title": "Book",
|
||||
"subtitle": "A step-by-step guide that teaches you how to build a web interface from scratch using Bulma",
|
||||
"icon": "bookmark",
|
||||
"color": "bleeding",
|
||||
"path": "/the-official-bulma-book"
|
||||
},
|
||||
"overview": {
|
||||
"name": "Overview",
|
||||
"subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
|
||||
@ -190,7 +203,6 @@
|
||||
},
|
||||
"helpers-spacing": {
|
||||
"name": "Spacing",
|
||||
"new": true,
|
||||
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
|
||||
"color": "grey-dark",
|
||||
"icon": "arrows-alt-h",
|
||||
@ -205,7 +217,6 @@
|
||||
},
|
||||
"helpers-flexbox": {
|
||||
"name": "Flexbox",
|
||||
"new": true,
|
||||
"subtitle": "Helpers for all <strong>Flexbox</strong> properties",
|
||||
"color": "primary",
|
||||
"icon": "ellipsis-h",
|
||||
@ -556,7 +567,7 @@
|
||||
"name": "Blog",
|
||||
"title": "Blog",
|
||||
"subtitle": "Stay updated with new features",
|
||||
"color": "orange",
|
||||
"color": "rss",
|
||||
"icon": "rss",
|
||||
"path": "/blog"
|
||||
},
|
||||
@ -565,26 +576,26 @@
|
||||
"title": "Expo",
|
||||
"subtitle": "Official Bulma showcase",
|
||||
"icon": "star",
|
||||
"color": "star",
|
||||
"color": "expo",
|
||||
"path": "/expo"
|
||||
},
|
||||
"love": {
|
||||
"name": "Love",
|
||||
"title": "Love",
|
||||
"subtitle": "Fans of Bulma around the world",
|
||||
"color": "danger",
|
||||
"color": "love",
|
||||
"icon": "heart",
|
||||
"path": "/love"
|
||||
},
|
||||
"backers": {
|
||||
"id": "backers",
|
||||
"name": "Patreon and GitHub Backers",
|
||||
"name": "Backers",
|
||||
"title": "Backers",
|
||||
"color": "patreon",
|
||||
"icon": "patreon",
|
||||
"path": "/backers",
|
||||
"icon_brand": true,
|
||||
"subtitle": "Everyone who is supporting Bulma",
|
||||
"subtitle": "Everyone who is supporting Bulma via Patreon and GitHub",
|
||||
"description": "Everyone who is supporting Bulma"
|
||||
},
|
||||
"more": {
|
||||
@ -593,6 +604,7 @@
|
||||
},
|
||||
"bulma-start": {
|
||||
"name": "Bulma start",
|
||||
"title": "Start",
|
||||
"subtitle": "A tiny npm package to get started",
|
||||
"icon": "rocket",
|
||||
"color": "success",
|
||||
@ -600,9 +612,10 @@
|
||||
},
|
||||
"made-with-bulma": {
|
||||
"name": "Made with Bulma",
|
||||
"title": "Badge",
|
||||
"subtitle": "The official community badge",
|
||||
"icon": "certificate",
|
||||
"color": "primary",
|
||||
"color": "warning",
|
||||
"path": "/made-with-bulma"
|
||||
},
|
||||
"bootstrap": {
|
||||
@ -622,34 +635,116 @@
|
||||
},
|
||||
"extensions": {
|
||||
"name": "Bulma extensions",
|
||||
"title": "Extensions",
|
||||
"subtitle": "Side projects to enhance Bulma",
|
||||
"icon": "plug",
|
||||
"color": "orange",
|
||||
"color": "extensions",
|
||||
"path": "/extensions"
|
||||
}
|
||||
},
|
||||
"navbar": [
|
||||
"videos",
|
||||
"expo",
|
||||
"love",
|
||||
"backers"
|
||||
"navbar": ["videos", "expo", "love", "backers"],
|
||||
"navbarMore": [
|
||||
"extensions",
|
||||
"bulma-book",
|
||||
"blog",
|
||||
"bulma-start",
|
||||
"made-with-bulma"
|
||||
],
|
||||
"more": [
|
||||
"backers",
|
||||
"blog",
|
||||
"made-with-bulma",
|
||||
"bootstrap",
|
||||
"extensions",
|
||||
"bulma-start"
|
||||
"bulma-book",
|
||||
"blog",
|
||||
"bulma-start",
|
||||
"made-with-bulma",
|
||||
"bootstrap"
|
||||
],
|
||||
"categoryIds": [
|
||||
"overview",
|
||||
"customize",
|
||||
"columns",
|
||||
"elements",
|
||||
"components",
|
||||
"form",
|
||||
"layout",
|
||||
"helpers"
|
||||
],
|
||||
"categories": {
|
||||
"overview": ["overview-start", "overview-classes", "overview-modifiers", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
|
||||
"customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"],
|
||||
"helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-flexbox", "helpers-other"],
|
||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
||||
"layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
|
||||
"form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
|
||||
"elements": ["elements-block", "elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
|
||||
"components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
|
||||
"overview": [
|
||||
"overview-start",
|
||||
"overview-classes",
|
||||
"overview-modifiers",
|
||||
"overview-modular",
|
||||
"overview-responsiveness",
|
||||
"overview-colors",
|
||||
"overview-functions",
|
||||
"overview-mixins"
|
||||
],
|
||||
"customize": [
|
||||
"customize-concepts",
|
||||
"customize-variables",
|
||||
"customize-node-sass",
|
||||
"customize-sass-cli",
|
||||
"customize-webpack"
|
||||
],
|
||||
"helpers": [
|
||||
"helpers-color",
|
||||
"helpers-spacing",
|
||||
"helpers-typography",
|
||||
"helpers-visibility",
|
||||
"helpers-flexbox",
|
||||
"helpers-other"
|
||||
],
|
||||
"columns": [
|
||||
"columns-basics",
|
||||
"columns-sizes",
|
||||
"columns-responsiveness",
|
||||
"columns-nesting",
|
||||
"columns-gap",
|
||||
"columns-options"
|
||||
],
|
||||
"layout": [
|
||||
"layout-container",
|
||||
"layout-level",
|
||||
"layout-media",
|
||||
"layout-hero",
|
||||
"layout-section",
|
||||
"layout-footer",
|
||||
"layout-tiles"
|
||||
],
|
||||
"form": [
|
||||
"form-general",
|
||||
"form-input",
|
||||
"form-textarea",
|
||||
"form-select",
|
||||
"form-checkbox",
|
||||
"form-radio",
|
||||
"form-file"
|
||||
],
|
||||
"elements": [
|
||||
"elements-block",
|
||||
"elements-box",
|
||||
"elements-button",
|
||||
"elements-content",
|
||||
"elements-delete",
|
||||
"elements-icon",
|
||||
"elements-image",
|
||||
"elements-notification",
|
||||
"elements-progress",
|
||||
"elements-table",
|
||||
"elements-tag",
|
||||
"elements-title"
|
||||
],
|
||||
"components": [
|
||||
"components-breadcrumb",
|
||||
"components-card",
|
||||
"components-dropdown",
|
||||
"components-menu",
|
||||
"components-message",
|
||||
"components-modal",
|
||||
"components-navbar",
|
||||
"components-pagination",
|
||||
"components-panel",
|
||||
"components-tabs"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,7 +10,13 @@
|
||||
"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",
|
||||
"scrimba_url": "https://scrimba.com/g/gbulma",
|
||||
"scrimba_url": "https://scrimba.com/learn/bulma",
|
||||
"patreon_url": "https://www.patreon.com/jgthms",
|
||||
"sponsorship_url": "https://github.com/users/jgthms/sponsorship"
|
||||
"sponsorship_url": "https://github.com/sponsors/jgthms",
|
||||
"npm": "https://www.npmjs.com/package/bulma",
|
||||
"git_ssh": "git clone git@github.com:jgthms/bulma.git",
|
||||
"git_https": "git clone https://github.com/jgthms/bulma.git",
|
||||
"git_cli": "gh repo clone jgthms/bulma",
|
||||
"jsdelivr": "https://www.jsdelivr.com/package/npm/bulma",
|
||||
"cdnjs": "https://cdnjs.com/libraries/bulma"
|
||||
}
|
||||
|
||||
1
docs/_data/sizes.json
Normal file
1
docs/_data/sizes.json
Normal file
@ -0,0 +1 @@
|
||||
["small", "normal", "medium", "large"]
|
||||
30
docs/_data/tiers.json
Normal file
30
docs/_data/tiers.json
Normal file
@ -0,0 +1,30 @@
|
||||
[
|
||||
{
|
||||
"amount": 1,
|
||||
"message": "Thank you for supporting Bulma and open source!"
|
||||
},
|
||||
{
|
||||
"amount": 10,
|
||||
"message": "Your name will be put on the Bulma website's backers page, and in `backers.md` in the Bulma repository."
|
||||
},
|
||||
{
|
||||
"amount": 30,
|
||||
"message": "Your name will be put at the **top** of the Bulma website's backers page, and at the top of `backers.md` in the Bulma repository."
|
||||
},
|
||||
{
|
||||
"amount": 100,
|
||||
"message": "Your name or company logo will appear on the Bulma **homepage**."
|
||||
},
|
||||
{
|
||||
"amount": 200,
|
||||
"message": "Two of your names or company logos will appear on the Bulma **homepage**."
|
||||
},
|
||||
{
|
||||
"amount": 300,
|
||||
"message": "Your name or company logo will appear on the Bulma **homepage** and in the footer of **each page** of the website."
|
||||
},
|
||||
{
|
||||
"amount": 500,
|
||||
"message": "Your name or company logo will appear on the Bulma **documentation sidebar**."
|
||||
}
|
||||
]
|
||||
@ -5,7 +5,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$breadcrumb-item-hover-color": {
|
||||
"name": "$breadcrumb-item-hover-color",
|
||||
|
||||
@ -17,18 +17,13 @@
|
||||
"$card-shadow": {
|
||||
"name": "$card-shadow",
|
||||
"value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
|
||||
"type": "size"
|
||||
"type": "shadow"
|
||||
},
|
||||
"$card-radius": {
|
||||
"name": "$card-radius",
|
||||
"value": "0.25rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$card-overflow": {
|
||||
"name": "$card-overflow",
|
||||
"value": "hidden",
|
||||
"type": "string"
|
||||
},
|
||||
"$card-header-background-color": {
|
||||
"name": "$card-header-background-color",
|
||||
"value": "transparent",
|
||||
@ -49,7 +44,7 @@
|
||||
"$card-header-shadow": {
|
||||
"name": "$card-header-shadow",
|
||||
"value": "0 0.125em 0.25em rgba($scheme-invert, 0.1)",
|
||||
"type": "size"
|
||||
"type": "shadow"
|
||||
},
|
||||
"$card-header-weight": {
|
||||
"name": "$card-header-weight",
|
||||
@ -96,7 +91,6 @@
|
||||
"$card-background-color",
|
||||
"$card-shadow",
|
||||
"$card-radius",
|
||||
"$card-overflow",
|
||||
"$card-header-background-color",
|
||||
"$card-header-color",
|
||||
"$card-header-padding",
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$dropdown-content-offset": {
|
||||
"name": "$dropdown-content-offset",
|
||||
@ -44,7 +44,7 @@
|
||||
"$dropdown-content-shadow": {
|
||||
"name": "$dropdown-content-shadow",
|
||||
"value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
|
||||
"type": "size"
|
||||
"type": "shadow"
|
||||
},
|
||||
"$dropdown-content-z": {
|
||||
"name": "$dropdown-content-z",
|
||||
@ -84,7 +84,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$dropdown-divider-background-color": {
|
||||
"name": "$dropdown-divider-background-color",
|
||||
|
||||
@ -4,10 +4,52 @@
|
||||
"name": "$media-border-color",
|
||||
"value": "bulmaRgba($border, 0.5)",
|
||||
"type": "compound"
|
||||
},
|
||||
"$media-border-size": {
|
||||
"name": "$media-border-size",
|
||||
"value": "1px",
|
||||
"type": "size"
|
||||
},
|
||||
"$media-spacing": {
|
||||
"name": "$media-spacing",
|
||||
"value": "1rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$media-spacing-large": {
|
||||
"name": "$media-spacing-large",
|
||||
"value": "1.5rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$media-content-spacing": {
|
||||
"name": "$media-content-spacing",
|
||||
"value": "0.75rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$media-level-1-spacing": {
|
||||
"name": "$media-level-1-spacing",
|
||||
"value": "0.75rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$media-level-1-content-spacing": {
|
||||
"name": "$media-level-1-content-spacing",
|
||||
"value": "0.5rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$media-level-2-spacing": {
|
||||
"name": "$media-level-2-spacing",
|
||||
"value": "0.5rem",
|
||||
"type": "size"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$media-border-color"
|
||||
"$media-border-color",
|
||||
"$media-border-size",
|
||||
"$media-spacing",
|
||||
"$media-spacing-large",
|
||||
"$media-content-spacing",
|
||||
"$media-level-1-spacing",
|
||||
"$media-level-1-content-spacing",
|
||||
"$media-level-2-spacing"
|
||||
],
|
||||
"file_path": "components/media.sass"
|
||||
}
|
||||
@ -40,7 +40,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$menu-list-border-left": {
|
||||
"name": "$menu-list-border-left",
|
||||
|
||||
@ -99,8 +99,8 @@
|
||||
"name": "$message-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
"computed_type": "map",
|
||||
"computed_value": "Bulma colors"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
|
||||
@ -46,17 +46,17 @@
|
||||
},
|
||||
"$navbar-item-color": {
|
||||
"name": "$navbar-item-color",
|
||||
"value": "$text",
|
||||
"value": "$text-strong",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(0, 0%, 29%)"
|
||||
"computed_value": "hsl(0, 0%, 21%)"
|
||||
},
|
||||
"$navbar-item-hover-color": {
|
||||
"name": "$navbar-item-hover-color",
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$navbar-item-hover-background-color": {
|
||||
"name": "$navbar-item-hover-background-color",
|
||||
@ -97,14 +97,14 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$navbar-tab-active-color": {
|
||||
"name": "$navbar-tab-active-color",
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$navbar-tab-active-background-color": {
|
||||
"name": "$navbar-tab-active-background-color",
|
||||
@ -116,7 +116,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$navbar-tab-active-border-bottom-style": {
|
||||
"name": "$navbar-tab-active-border-bottom-style",
|
||||
@ -150,7 +150,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$navbar-dropdown-radius": {
|
||||
"name": "$navbar-dropdown-radius",
|
||||
@ -174,7 +174,7 @@
|
||||
"$navbar-dropdown-boxed-shadow": {
|
||||
"name": "$navbar-dropdown-boxed-shadow",
|
||||
"value": "0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1)",
|
||||
"type": "size"
|
||||
"type": "shadow"
|
||||
},
|
||||
"$navbar-dropdown-item-hover-color": {
|
||||
"name": "$navbar-dropdown-item-hover-color",
|
||||
@ -195,7 +195,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$navbar-dropdown-item-active-background-color": {
|
||||
"name": "$navbar-dropdown-item-active-background-color",
|
||||
@ -232,8 +232,8 @@
|
||||
"name": "$navbar-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
"computed_type": "map",
|
||||
"computed_value": "Bulma colors"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
|
||||
@ -44,6 +44,16 @@
|
||||
"value": "0.5em",
|
||||
"type": "size"
|
||||
},
|
||||
"$pagination-nav-padding-left": {
|
||||
"name": "$pagination-nav-padding-left",
|
||||
"value": "0.75em",
|
||||
"type": "size"
|
||||
},
|
||||
"$pagination-nav-padding-right": {
|
||||
"name": "$pagination-nav-padding-right",
|
||||
"value": "0.75em",
|
||||
"type": "size"
|
||||
},
|
||||
"$pagination-hover-color": {
|
||||
"name": "$pagination-hover-color",
|
||||
"value": "$link-hover",
|
||||
@ -70,7 +80,7 @@
|
||||
"value": "$link-focus-border",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$pagination-active-color": {
|
||||
"name": "$pagination-active-color",
|
||||
@ -119,14 +129,14 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$pagination-current-border-color": {
|
||||
"name": "$pagination-current-border-color",
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$pagination-ellipsis-color": {
|
||||
"name": "$pagination-ellipsis-color",
|
||||
@ -134,6 +144,11 @@
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(0, 0%, 71%)"
|
||||
},
|
||||
"$pagination-shadow-inset": {
|
||||
"name": "$pagination-shadow-inset",
|
||||
"value": "inset 0 1px 2px rgba($scheme-invert, 0.2)",
|
||||
"type": "size"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
@ -145,6 +160,8 @@
|
||||
"$pagination-item-margin",
|
||||
"$pagination-item-padding-left",
|
||||
"$pagination-item-padding-right",
|
||||
"$pagination-nav-padding-left",
|
||||
"$pagination-nav-padding-right",
|
||||
"$pagination-hover-color",
|
||||
"$pagination-hover-border-color",
|
||||
"$pagination-focus-color",
|
||||
@ -157,7 +174,8 @@
|
||||
"$pagination-current-color",
|
||||
"$pagination-current-background-color",
|
||||
"$pagination-current-border-color",
|
||||
"$pagination-ellipsis-color"
|
||||
"$pagination-ellipsis-color",
|
||||
"$pagination-shadow-inset"
|
||||
],
|
||||
"file_path": "components/pagination.sass"
|
||||
}
|
||||
@ -22,7 +22,7 @@
|
||||
"$panel-shadow": {
|
||||
"name": "$panel-shadow",
|
||||
"value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
|
||||
"type": "size"
|
||||
"type": "shadow"
|
||||
},
|
||||
"$panel-heading-background-color": {
|
||||
"name": "$panel-heading-background-color",
|
||||
@ -103,7 +103,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$panel-block-color": {
|
||||
"name": "$panel-block-color",
|
||||
@ -124,7 +124,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$panel-block-active-color": {
|
||||
"name": "$panel-block-active-color",
|
||||
@ -138,7 +138,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$panel-icon-color": {
|
||||
"name": "$panel-icon-color",
|
||||
@ -151,8 +151,8 @@
|
||||
"name": "$panel-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
"computed_type": "map",
|
||||
"computed_value": "Bulma colors"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
|
||||
@ -43,14 +43,14 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$tabs-link-active-color": {
|
||||
"name": "$tabs-link-active-color",
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$tabs-link-padding": {
|
||||
"name": "$tabs-link-padding",
|
||||
@ -140,14 +140,14 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$tabs-toggle-link-active-border-color": {
|
||||
"name": "$tabs-toggle-link-active-border-color",
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$tabs-toggle-link-active-color": {
|
||||
"name": "$tabs-toggle-link-active-color",
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
"$box-shadow": {
|
||||
"name": "$box-shadow",
|
||||
"value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
|
||||
"type": "size"
|
||||
"type": "shadow"
|
||||
},
|
||||
"$box-padding": {
|
||||
"name": "$box-padding",
|
||||
@ -34,12 +34,12 @@
|
||||
"$box-link-hover-shadow": {
|
||||
"name": "$box-link-hover-shadow",
|
||||
"value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link",
|
||||
"type": "size"
|
||||
"type": "shadow"
|
||||
},
|
||||
"$box-link-active-shadow": {
|
||||
"name": "$box-link-active-shadow",
|
||||
"value": "inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link",
|
||||
"type": "size"
|
||||
"type": "shadow"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
"value": "$link-focus-border",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$button-focus-box-shadow-size": {
|
||||
"name": "$button-focus-box-shadow-size",
|
||||
@ -119,6 +119,40 @@
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(0, 0%, 21%)"
|
||||
},
|
||||
"$button-ghost-background": {
|
||||
"name": "$button-ghost-background",
|
||||
"value": "none",
|
||||
"type": "string"
|
||||
},
|
||||
"$button-ghost-border-color": {
|
||||
"name": "$button-ghost-border-color",
|
||||
"value": "transparent",
|
||||
"type": "string"
|
||||
},
|
||||
"$button-ghost-color": {
|
||||
"name": "$button-ghost-color",
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$button-ghost-decoration": {
|
||||
"name": "$button-ghost-decoration",
|
||||
"value": "none",
|
||||
"type": "string"
|
||||
},
|
||||
"$button-ghost-hover-color": {
|
||||
"name": "$button-ghost-hover-color",
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$button-ghost-hover-decoration": {
|
||||
"name": "$button-ghost-hover-decoration",
|
||||
"value": "underline",
|
||||
"type": "string"
|
||||
},
|
||||
"$button-disabled-background-color": {
|
||||
"name": "$button-disabled-background-color",
|
||||
"value": "$scheme-main",
|
||||
@ -136,7 +170,7 @@
|
||||
"$button-disabled-shadow": {
|
||||
"name": "$button-disabled-shadow",
|
||||
"value": "none",
|
||||
"type": "string"
|
||||
"type": "shadow"
|
||||
},
|
||||
"$button-disabled-opacity": {
|
||||
"name": "$button-disabled-opacity",
|
||||
@ -168,8 +202,8 @@
|
||||
"name": "$button-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
"computed_type": "map",
|
||||
"computed_value": "Bulma colors"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
@ -192,6 +226,12 @@
|
||||
"$button-text-decoration",
|
||||
"$button-text-hover-background-color",
|
||||
"$button-text-hover-color",
|
||||
"$button-ghost-background",
|
||||
"$button-ghost-border-color",
|
||||
"$button-ghost-color",
|
||||
"$button-ghost-decoration",
|
||||
"$button-ghost-hover-color",
|
||||
"$button-ghost-hover-decoration",
|
||||
"$button-disabled-background-color",
|
||||
"$button-disabled-border-color",
|
||||
"$button-disabled-shadow",
|
||||
|
||||
@ -19,13 +19,19 @@
|
||||
"name": "$icon-dimensions-large",
|
||||
"value": "3rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$icon-text-spacing": {
|
||||
"name": "$icon-text-spacing",
|
||||
"value": "0.25em",
|
||||
"type": "size"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$icon-dimensions",
|
||||
"$icon-dimensions-small",
|
||||
"$icon-dimensions-medium",
|
||||
"$icon-dimensions-large"
|
||||
"$icon-dimensions-large",
|
||||
"$icon-text-spacing"
|
||||
],
|
||||
"file_path": "elements/icon.sass"
|
||||
}
|
||||
@ -40,8 +40,8 @@
|
||||
"name": "$notification-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
"computed_type": "map",
|
||||
"computed_value": "Bulma colors"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
"value": "$radius-rounded",
|
||||
"type": "variable",
|
||||
"computed_type": "size",
|
||||
"computed_value": "290486px"
|
||||
"computed_value": "9999px"
|
||||
},
|
||||
"$progress-indeterminate-duration": {
|
||||
"name": "$progress-indeterminate-duration",
|
||||
@ -30,8 +30,8 @@
|
||||
"name": "$progress-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
"computed_type": "map",
|
||||
"computed_value": "Bulma colors"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
|
||||
@ -114,8 +114,8 @@
|
||||
"name": "$table-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
"computed_type": "map",
|
||||
"computed_value": "Bulma colors"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
|
||||
@ -30,8 +30,8 @@
|
||||
"name": "$tag-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
"computed_type": "map",
|
||||
"computed_value": "Bulma colors"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
"name": "$form-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
"computed_type": "map",
|
||||
"computed_value": "Bulma colors"
|
||||
},
|
||||
"$input-color": {
|
||||
"name": "$input-color",
|
||||
@ -36,7 +36,7 @@
|
||||
"$input-shadow": {
|
||||
"name": "$input-shadow",
|
||||
"value": "inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05)",
|
||||
"type": "size"
|
||||
"type": "shadow"
|
||||
},
|
||||
"$input-placeholder-color": {
|
||||
"name": "$input-placeholder-color",
|
||||
@ -69,7 +69,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$input-focus-box-shadow-size": {
|
||||
"name": "$input-focus-box-shadow-size",
|
||||
@ -112,7 +112,7 @@
|
||||
"value": "$link",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$input-icon-color": {
|
||||
"name": "$input-icon-color",
|
||||
|
||||
@ -5,6 +5,11 @@
|
||||
"value": "3rem 1.5rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$hero-body-padding-tablet": {
|
||||
"name": "$hero-body-padding-tablet",
|
||||
"value": "3rem 3rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$hero-body-padding-small": {
|
||||
"name": "$hero-body-padding-small",
|
||||
"value": "1.5rem",
|
||||
@ -12,24 +17,25 @@
|
||||
},
|
||||
"$hero-body-padding-medium": {
|
||||
"name": "$hero-body-padding-medium",
|
||||
"value": "9rem 1.5rem",
|
||||
"value": "9rem 4.5rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$hero-body-padding-large": {
|
||||
"name": "$hero-body-padding-large",
|
||||
"value": "18rem 1.5rem",
|
||||
"value": "18rem 6rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$hero-colors": {
|
||||
"name": "$hero-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
"computed_type": "map",
|
||||
"computed_value": "Bulma colors"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$hero-body-padding",
|
||||
"$hero-body-padding-tablet",
|
||||
"$hero-body-padding-small",
|
||||
"$hero-body-padding-medium",
|
||||
"$hero-body-padding-large",
|
||||
|
||||
@ -5,19 +5,25 @@
|
||||
"value": "3rem 1.5rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$section-padding-desktop": {
|
||||
"name": "$section-padding-desktop",
|
||||
"value": "3rem 3rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$section-padding-medium": {
|
||||
"name": "$section-padding-medium",
|
||||
"value": "9rem 1.5rem",
|
||||
"value": "9rem 4.5rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$section-padding-large": {
|
||||
"name": "$section-padding-large",
|
||||
"value": "18rem 1.5rem",
|
||||
"value": "18rem 6rem",
|
||||
"type": "size"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$section-padding",
|
||||
"$section-padding-desktop",
|
||||
"$section-padding-medium",
|
||||
"$section-padding-large"
|
||||
],
|
||||
|
||||
@ -12,21 +12,21 @@
|
||||
"value": "$cyan",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(204, 71%, 53%)"
|
||||
"computed_value": "hsl(207, 61%, 53%)"
|
||||
},
|
||||
"$success": {
|
||||
"name": "$success",
|
||||
"value": "$green",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(141, 53%, 53%)"
|
||||
"computed_value": "hsl(153, 53%, 53%)"
|
||||
},
|
||||
"$warning": {
|
||||
"name": "$warning",
|
||||
"value": "$yellow",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(48, 100%, 67%)"
|
||||
"computed_value": "hsl(44, 100%, 77%)"
|
||||
},
|
||||
"$danger": {
|
||||
"name": "$danger",
|
||||
@ -340,7 +340,7 @@
|
||||
"value": "$blue",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$link-invert": {
|
||||
"name": "$link-invert",
|
||||
@ -392,7 +392,7 @@
|
||||
"value": "$blue",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(217, 71%, 53%)"
|
||||
"computed_value": "hsl(229, 53%, 53%)"
|
||||
},
|
||||
"$link-active": {
|
||||
"name": "$link-active",
|
||||
@ -470,12 +470,12 @@
|
||||
"$colors": {
|
||||
"name": "$colors",
|
||||
"value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)",
|
||||
"type": "function"
|
||||
"type": "map"
|
||||
},
|
||||
"$shades": {
|
||||
"name": "$shades",
|
||||
"value": "mergeColorMaps((\"black-bis\": $black-bis, \"black-ter\": $black-ter, \"grey-darker\": $grey-darker, \"grey-dark\": $grey-dark, \"grey\": $grey, \"grey-light\": $grey-light, \"grey-lighter\": $grey-lighter, \"white-ter\": $white-ter, \"white-bis\": $white-bis), $custom-shades)",
|
||||
"type": "function"
|
||||
"type": "map"
|
||||
},
|
||||
"$sizes": {
|
||||
"name": "$sizes",
|
||||
|
||||
@ -67,12 +67,12 @@
|
||||
},
|
||||
"$yellow": {
|
||||
"name": "$yellow",
|
||||
"value": "hsl(48, 100%, 67%)",
|
||||
"value": "hsl(44, 100%, 77%)",
|
||||
"type": "color"
|
||||
},
|
||||
"$green": {
|
||||
"name": "$green",
|
||||
"value": "hsl(141, 53%, 53%)",
|
||||
"value": "hsl(153, 53%, 53%)",
|
||||
"type": "color"
|
||||
},
|
||||
"$turquoise": {
|
||||
@ -82,12 +82,12 @@
|
||||
},
|
||||
"$cyan": {
|
||||
"name": "$cyan",
|
||||
"value": "hsl(204, 71%, 53%)",
|
||||
"value": "hsl(207, 61%, 53%)",
|
||||
"type": "color"
|
||||
},
|
||||
"$blue": {
|
||||
"name": "$blue",
|
||||
"value": "hsl(217, 71%, 53%)",
|
||||
"value": "hsl(229, 53%, 53%)",
|
||||
"type": "color"
|
||||
},
|
||||
"$purple": {
|
||||
@ -237,7 +237,7 @@
|
||||
},
|
||||
"$radius-rounded": {
|
||||
"name": "$radius-rounded",
|
||||
"value": "290486px",
|
||||
"value": "9999px",
|
||||
"type": "size"
|
||||
},
|
||||
"$speed": {
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<div class="bd-book-cover">
|
||||
<a href="{{ site.data.meta.book_url }}" target="_blank">
|
||||
{%
|
||||
include elements/responsive-image.html
|
||||
include elements/responsive-image-2x.html
|
||||
path="book/book-cover"
|
||||
extension="png"
|
||||
extension="jpg"
|
||||
alt="The official Bulma book cover"
|
||||
width="300"
|
||||
height="380"
|
||||
width="504"
|
||||
height="661"
|
||||
%}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div id="anchorsReference" class="bd-anchors-reference"></div>
|
||||
<nav id="anchors" class="bd-anchors">
|
||||
<nav id="anchors" class="bd-anchors bd-is-empty">
|
||||
<p class="bd-anchors-title">
|
||||
On this page
|
||||
</p>
|
||||
|
||||
10
docs/_includes/components/call.html
Normal file
10
docs/_includes/components/call.html
Normal file
@ -0,0 +1,10 @@
|
||||
<div class="bd-call bd-is-{{ include.color }}">
|
||||
<div class="bd-call-body">
|
||||
<p class="bd-call-text">
|
||||
{{ include.text }}
|
||||
</p>
|
||||
<p class="bd-call-button">
|
||||
{{ include.button }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,27 +1,54 @@
|
||||
<nav id="categories" class="bd-categories">
|
||||
{% for category in site.data.links.categories %}
|
||||
{% assign category_id = category[0] %}
|
||||
{% assign category_links = category[1] %}
|
||||
<div class="bd-categories-filter">
|
||||
<input id="categoriesFilter" class="input is-small" type="text" name="" placeholder="Filter links">
|
||||
<span class="bd-key">f</span>
|
||||
</div>
|
||||
|
||||
{% for category_id in site.data.links.categoryIds %}
|
||||
{% assign category_links = site.data.links.categories[category_id] %}
|
||||
{% assign category_link = site.data.links.by_id[category_id] %}
|
||||
|
||||
<div class="bd-category {% if category_id == current_category %}is-active{% endif %}">
|
||||
{% comment %}
|
||||
{% if category_id == 'overview' %}
|
||||
<p class="bd-category-group">
|
||||
Learn
|
||||
</p>
|
||||
{% elsif category_id == 'columns' %}
|
||||
<p class="bd-category-group">
|
||||
Style
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endcomment %}
|
||||
|
||||
<div class="bd-category {% if category_id == current_category %}is-current{% endif %}">
|
||||
<header class="bd-category-header">
|
||||
<a class="bd-category-toggle">
|
||||
<span class="icon">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
|
||||
<strong>{{ category_link.name }}</strong>
|
||||
<a
|
||||
class="
|
||||
bd-category-name
|
||||
{% if category_id == current_link_id %}is-active{% endif %}
|
||||
"
|
||||
href="{{ site.url }}{{ category_link.path }}"
|
||||
data-name="{{ category_link.name }}"
|
||||
>
|
||||
<strong class="bd-name">{{ category_link.name }}</strong>
|
||||
</a>
|
||||
|
||||
<button class="bd-category-toggle icon">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<ul class="bd-category-list">
|
||||
{% for link_id in category_links %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
|
||||
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
<a
|
||||
href="{{ site.url }}{{ link.path }}"
|
||||
data-name="{{ link.name }}"
|
||||
>
|
||||
<span class="bd-name">{{ link.name }}</span>
|
||||
|
||||
{% if link.new %}
|
||||
<span class="ml-1 tag bd-mini-tag is-primary">
|
||||
New!
|
||||
@ -33,10 +60,19 @@
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<p
|
||||
id="categoriesNoResults"
|
||||
class="
|
||||
bd-categories-no-results
|
||||
has-background-primary-light
|
||||
is-size-7
|
||||
has-text-primary-dark
|
||||
has-text-centered
|
||||
p-3
|
||||
">
|
||||
There are no results.
|
||||
<br>
|
||||
<button class="button is-primary is-small">Reset search <span class="bd-key">esc</span></button>
|
||||
</p>
|
||||
</nav>
|
||||
|
||||
{% unless page.hide_fortyfour %}
|
||||
{% include global/fortyfour.html %}
|
||||
{% endunless %}
|
||||
|
||||
{% include global/side-sponsor.html %}
|
||||
|
||||
16
docs/_includes/components/docs-body.html
Normal file
16
docs/_includes/components/docs-body.html
Normal file
@ -0,0 +1,16 @@
|
||||
{%
|
||||
include components/hero.html
|
||||
color="basic"
|
||||
title=page.title
|
||||
subtitle=subtitle
|
||||
%}
|
||||
|
||||
<div class="bd-docs-body">
|
||||
<div class="bd-docs-content bd-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
{% include components/pagination.html %}
|
||||
|
||||
{% include elements/improve-page.html %}
|
||||
</div>
|
||||
29
docs/_includes/components/heading.html
Normal file
29
docs/_includes/components/heading.html
Normal file
@ -0,0 +1,29 @@
|
||||
<div class="bd-heading">
|
||||
<span class="icon has-text-{{ include.color }} is-size-2-widescreen">
|
||||
<i class="{{ include.icon }}"></i>
|
||||
</span>
|
||||
|
||||
<h2 class="title has-text-black mb-0 is-size-2-widescreen">
|
||||
{{ include.title }}
|
||||
</h2>
|
||||
|
||||
<div class="subtitle mb-0 mt-0 is-size-4-widescreen">
|
||||
{{ include.subtitle }}
|
||||
</div>
|
||||
|
||||
<a class="button bd-fat-button is-{{ include.color }} is-light is-size-4-widescreen" href="{{ include.href }}">
|
||||
{% if include.button_icon_before %}
|
||||
<span class="icon">
|
||||
<i class="{{ include.button_icon_before }}"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
<span>
|
||||
{{ include.button_label }}
|
||||
</span>
|
||||
{% if include.button_icon_after %}
|
||||
<span class="icon">
|
||||
<i class="{{ include.button_icon_after }}"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
34
docs/_includes/components/hero.html
Normal file
34
docs/_includes/components/hero.html
Normal file
@ -0,0 +1,34 @@
|
||||
{% capture hero_body %}
|
||||
<div class="bd-hero-body">
|
||||
<div class="bd-hero-heading">
|
||||
<h1 class="title">
|
||||
{% if include.icon %}
|
||||
<span class="icon">
|
||||
<i class="{{ include.icon }}"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
{{ include.title | markdownify }}
|
||||
</h1>
|
||||
<div class="subtitle is-4">
|
||||
{{ include.subtitle | markdownify }}
|
||||
</div>
|
||||
{{ include.content }}
|
||||
</div>
|
||||
|
||||
<div class="bd-hero-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="hero bd-hero bd-is-{{ include.color }}">
|
||||
<div class="hero-body">
|
||||
{% if page.fullwidth %}
|
||||
{{ hero_body }}
|
||||
{% else %}
|
||||
<div class="container">
|
||||
{{ hero_body }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
82
docs/_includes/components/pagination.html
Normal file
82
docs/_includes/components/pagination.html
Normal file
@ -0,0 +1,82 @@
|
||||
{% assign currentLinkId = page.breadcrumb | last %}
|
||||
|
||||
{% assign currentCategoryIndex = page.breadcrumb | size | minus: 2 %}
|
||||
{% assign currentCategoryId = page.breadcrumb[currentCategoryIndex] %}
|
||||
|
||||
{% assign sameCategoryIds = site.data.links.categories[currentCategoryId] %}
|
||||
{% assign categorySize = sameCategoryIds | size %}
|
||||
{% assign lastIndex = categorySize | minus: 1 %}
|
||||
|
||||
{% for categoryId in site.data.links.categoryIds %}
|
||||
{% if categoryId == currentCategoryId %}
|
||||
{% assign prevCategoryIndex = forloop.index0 | minus: 1 %}
|
||||
{% assign nextCategoryIndex = forloop.index0 | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for linkId in sameCategoryIds %}
|
||||
{% if linkId == currentLinkId %}
|
||||
{% assign prevIndex = forloop.index0 | minus: 1 %}
|
||||
{% assign nextIndex = forloop.index0 | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<!-- Previous link -->
|
||||
<!-- If first index in list -->
|
||||
{% if prevIndex == -1 %}
|
||||
{% assign prevCategoryId = site.data.links.categoryIds[prevCategoryIndex] %}
|
||||
{% assign prevCategoryLinks = site.data.links.categories[prevCategoryId] %}
|
||||
{% assign prevCategorySize = prevCategoryLinks | size %}
|
||||
{% assign prevLastIndex = prevCategorySize | minus: 1 %}
|
||||
{% assign prevLinkId = prevCategoryLinks[prevLastIndex] %}
|
||||
{% else %}
|
||||
{% assign prevCategoryId = currentCategoryId %}
|
||||
{% assign prevLinkId = sameCategoryIds[prevIndex] %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Next link -->
|
||||
<!-- If last index in list -->
|
||||
{% if nextIndex == categorySize %}
|
||||
{% assign nextCategoryId = site.data.links.categoryIds[nextCategoryIndex] %}
|
||||
{% assign nextCategory = site.data.links.categories[nextCategoryId] %}
|
||||
{% assign nextLinkId = nextCategory[0] %}
|
||||
{% else %}
|
||||
{% assign nextCategoryId = currentCategoryId %}
|
||||
{% assign nextLinkId = sameCategoryIds[nextIndex] %}
|
||||
{% endif %}
|
||||
|
||||
{% unless page.hide_pagination %}
|
||||
{% if prevLinkId or nextLinkId %}
|
||||
<nav class="bd-docs-pagination bd-pagination-links">
|
||||
{% if prevLinkId %}
|
||||
{% assign prevLink = site.data.links.by_id[prevLinkId] %}
|
||||
<a
|
||||
class="button bd-fat-button is-primary is-light bd-pagination-prev"
|
||||
href="{{ site.url }}{{ prevLink.path }}"
|
||||
title="{{ prevLink.name }}"
|
||||
>
|
||||
<i>←</i>
|
||||
<span>
|
||||
<em>{{ prevCategoryId }}:</em>
|
||||
<strong>{{ prevLink.name }}</strong>
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if nextLinkId %}
|
||||
{% assign nextLink = site.data.links.by_id[nextLinkId] %}
|
||||
<a
|
||||
class="button bd-fat-button is-primary is-light bd-pagination-next"
|
||||
href="{{ site.url }}{{ nextLink.path }}"
|
||||
title="{{ nextLink.name }}"
|
||||
>
|
||||
<span>
|
||||
<em>{{ nextCategoryId }}:</em>
|
||||
<strong>{{ nextLink.name }}</strong>
|
||||
</span>
|
||||
<i>→</i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
23
docs/_includes/components/tabs.html
Normal file
23
docs/_includes/components/tabs.html
Normal file
@ -0,0 +1,23 @@
|
||||
<div class="bd-tabs">
|
||||
<nav class="bd-tabs-nav">
|
||||
<button class="bd-is-active">{{ include.button_a | escape }}</button>
|
||||
<button>{{ include.button_b | escape }}</button>
|
||||
{% if include.button_c %}
|
||||
<button>{{ include.button_c | escape }}</button>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
<div class="bd-tabs-items">
|
||||
<div class="bd-tabs-item bd-is-active">
|
||||
{{ include.item_a }}
|
||||
</div>
|
||||
<div class="bd-tabs-item">
|
||||
{{ include.item_b }}
|
||||
</div>
|
||||
{% if include.item_c %}
|
||||
<div class="bd-tabs-item">
|
||||
{{ include.item_c }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
7
docs/_includes/components/variables-row.html
Normal file
7
docs/_includes/components/variables-row.html
Normal file
@ -0,0 +1,7 @@
|
||||
<div class="bd-var bd-is-body">
|
||||
<div class="bd-var-name">{% highlight css %}{{ include.variable.name }}{% endhighlight %}</div>
|
||||
<div class="bd-var-type bd-is-{{ include.variable.type }}">{{ include.variable.type }}</div>
|
||||
<div class="bd-var-value">{% highlight css %}{{ include.variable.value }}{% endhighlight %}</div>
|
||||
<div class="bd-var-computed-value">{% highlight css %}{{ include.variable.computed_value }}{% endhighlight %}</div>
|
||||
<div class="bd-var-computed-type bd-is-{{ include.variable.computed_type }}">{{ include.variable.computed_type }}</div>
|
||||
</div>
|
||||
49
docs/_includes/components/variables.html
Normal file
49
docs/_includes/components/variables.html
Normal file
@ -0,0 +1,49 @@
|
||||
{% capture content %}
|
||||
{% assign anchor_name = include.anchor_name | default: 'Variables' %}
|
||||
{% assign tab = include.tab | default: page.doc-tab %}
|
||||
{% assign subtab = include.subtab | default: page.doc-subtab %}
|
||||
{% assign type = include.type | default: tab %}
|
||||
{% assign data = include.data | default: site.data.variables[tab][subtab] %}
|
||||
{% assign variables = include.variables | default: data.list %}
|
||||
{% assign table_class = include.table_class | default: 'is-bordered' %}
|
||||
|
||||
You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
{% endcapture %}
|
||||
|
||||
{% capture variables_size %}{{ variables | size }}{% endcapture %}
|
||||
{% capture variables_keys_size %}{{ include.variables_keys | size }}{% endcapture %}
|
||||
|
||||
{% if variables_size != '0' or variables_keys_size != '0' %}
|
||||
<div class="bd-vars">
|
||||
{% include elements/anchor.html name="Variables" %}
|
||||
|
||||
<div class="bd-var bd-is-head">
|
||||
<div class="bd-var-name">
|
||||
Name
|
||||
</div>
|
||||
<div class="bd-var-type">
|
||||
Type
|
||||
</div>
|
||||
<div class="bd-var-value">
|
||||
Value
|
||||
</div>
|
||||
<div class="bd-var-computed-value">
|
||||
Computed Value
|
||||
</div>
|
||||
<div class="bd-var-computed-type">
|
||||
Computed Type
|
||||
</div>
|
||||
</div>
|
||||
{% if include.variables_keys %}
|
||||
{% for key in include.variables_keys %}
|
||||
{% assign variable = site.data.variables[include.folder][include.file].by_name[key] %}
|
||||
{% include components/variables-row.html variable=variable %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for variable_name in variables %}
|
||||
{% assign variable = data.by_name[variable_name] %}
|
||||
{% include components/variables-row.html variable=variable %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -388,13 +388,13 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/components/card/">
|
||||
card
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
<td>
|
||||
card
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="bd-klmn-gaps">
|
||||
<strong class="bd-klmn-label">
|
||||
Gap:
|
||||
<code id="klmnValue"></code>
|
||||
<code id="klmnValue" class="bd-klmn-value"></code>
|
||||
</strong>
|
||||
{% for i in (0..8) %}
|
||||
<a class="bd-klmn-gap" data-value="{{ i }}">
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
<hr class="hr" style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title">
|
||||
<span class="bd-anchor-name">
|
||||
{{ include.name }}
|
||||
|
||||
19
docs/_includes/elements/backers-group.html
Normal file
19
docs/_includes/elements/backers-group.html
Normal file
@ -0,0 +1,19 @@
|
||||
{% if site.data.backers[include.tier].size > 0 or site.data.github[include.tier].size > 0 %}
|
||||
<div class="bd-backers-heading">
|
||||
<h2>{{ include.title }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="bd-backers-group">
|
||||
<ul class="bd-backers-list bd-is-patreon">
|
||||
{% for pt in site.data.backers[include.tier] reversed %}
|
||||
{% include elements/patreon-item.html backer=pt %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<ul class="bd-backers-list bd-is-github">
|
||||
{% for gh in site.data.github[include.tier] reversed %}
|
||||
{% include elements/github-item.html sponsor=gh %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
9
docs/_includes/elements/banner.html
Normal file
9
docs/_includes/elements/banner.html
Normal file
@ -0,0 +1,9 @@
|
||||
<section class="bd-banner bd-is-{{ include.color }}">
|
||||
<div class="bd-banner-body">
|
||||
<p class="bd-banner-title">
|
||||
{{ include.title }}
|
||||
</p>
|
||||
|
||||
{{ include.more }}
|
||||
</div>
|
||||
</section>
|
||||
@ -1,4 +1,8 @@
|
||||
<tr>
|
||||
<td>{{ backer }}</td>
|
||||
<td colspan="2"><a href="https://github.com/{{ backer }}" target="_blank" rel="nofollow">GitHub</a></td>
|
||||
</tr>
|
||||
<li>
|
||||
<span class="icon-text">
|
||||
<span>{{ include.sponsor }}</span>
|
||||
<a class="icon" href="https://github.com/{{ include.sponsor }}" target="_blank" rel="nofollow">
|
||||
<i class="fab fa-github-alt"></i>
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<div id="typo" class="bd-typo">
|
||||
<div id="typo" class="bd-docs-typo">
|
||||
<p class="has-text-grey-light">
|
||||
<a href="{{ site.url }}/made-with-bulma/">
|
||||
<a class="is-pulled-right" href="{{ site.url }}/made-with-bulma/">
|
||||
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
|
||||
</a>
|
||||
<br>
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo? Or something unclear?
|
||||
<br>
|
||||
|
||||
@ -5,31 +5,33 @@
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<h2 class="bd-link-name">
|
||||
<figure class="bd-link-figure">
|
||||
{% if include.icon %}
|
||||
<span class="bd-link-icon has-text-link">
|
||||
<i class="{% if include.icon_brand %}fab{% elsif include.icon_regular %}far{% else %}fas{% endif %} fa-{{ include.icon }}"></i>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="bd-link-counter"></span>
|
||||
{% endif %}
|
||||
</figure>
|
||||
{% if include.new %}
|
||||
<span style="float: right;" class="ml-2 tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
{{ include.name }}
|
||||
</h2>
|
||||
|
||||
<div class="bd-link-subtitle">
|
||||
{{ include.subtitle }}
|
||||
</div>
|
||||
|
||||
{% if include.more %}
|
||||
<div class="bd-link-more">
|
||||
{{ include.more }}
|
||||
</div>
|
||||
{% if include.icon %}
|
||||
<span class="icon bd-link-icon">
|
||||
<i class="{% if include.icon_brand %}fab{% elsif include.icon_regular %}far{% else %}fas{% endif %} fa-{{ include.icon }}"></i>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="bd-link-counter"></span>
|
||||
{% endif %}
|
||||
|
||||
<div class="bd-link-body">
|
||||
<h2 class="bd-link-title">
|
||||
{% if include.new %}
|
||||
<span style="float: right;" class="ml-2 tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{{ include.name }}
|
||||
</h2>
|
||||
|
||||
<div class="bd-link-subtitle">
|
||||
{{ include.subtitle }}
|
||||
</div>
|
||||
|
||||
{% if include.more %}
|
||||
<div class="bd-link-more">
|
||||
{{ include.more }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -1,60 +1,56 @@
|
||||
<div id="meta" class="field is-grouped is-grouped-multiline">
|
||||
<div id="meta" class="bd-features">
|
||||
<div class="bd-features-title">
|
||||
Features
|
||||
</div>
|
||||
|
||||
{% if include.new %}
|
||||
<div class="control">
|
||||
<div class="tags">
|
||||
<span class="tag is-primary">New!</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<ul class="bd-features-list">
|
||||
{% if include.new %}
|
||||
<li class="bd-feature">
|
||||
<span class="bd-feature-label">New!</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if include.experimental %}
|
||||
<div class="control">
|
||||
<div class="tags">
|
||||
<span class="tag is-warning">Experimental</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if include.experimental %}
|
||||
<li class="bd-feature">
|
||||
<strong class="bd-feature-label has-text-danger">Experimental</strong>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if include.since %}
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Since</span>
|
||||
<span class="tag is-info">{{ include.since }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if include.since %}
|
||||
<li class="bd-feature">
|
||||
<span class="bd-feature-label">Since</span>
|
||||
<span class="bd-feature-since">{{ include.since }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<li class="bd-feature">
|
||||
<span class="bd-feature-label">Colors</span>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
{% if include.colors %}
|
||||
<a class="tag is-success" href="#colors">Yes</a>
|
||||
<a class="bd-feature-yes" href="#colors">Yes</a>
|
||||
{% else %}
|
||||
<span class="tag is-danger">No</span>
|
||||
<span class="bd-feature-no">No</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="bd-feature">
|
||||
<span class="bd-feature-label">Sizes</span>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
{% if include.sizes %}
|
||||
<a class="tag is-success" href="#sizes">Yes</a>
|
||||
<a class="bd-feature-yes" href="#sizes">Yes</a>
|
||||
{% else %}
|
||||
<span class="tag is-danger">No</span>
|
||||
<span class="bd-feature-no">No</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="bd-feature">
|
||||
<span class="bd-feature-label">Variables</span>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
{% if include.variables %}
|
||||
<a class="tag is-success" href="#variables">Yes</a>
|
||||
<a class="bd-feature-yes" href="#variables">Yes</a>
|
||||
{% else %}
|
||||
<span class="tag is-danger">No</span>
|
||||
<span class="bd-feature-no">No</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
<tr>
|
||||
<td>{{ backer.name }}</td>
|
||||
<li>
|
||||
<p>{{ include.backer.name }}</p>
|
||||
|
||||
<td>
|
||||
{% if backer.twitter != "" %}
|
||||
<a href="https://twitter.com/{{ backer.twitter }}" target="_blank" rel="nofollow">
|
||||
@{{ backer.twitter }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% if include.backer.twitter != "" %}
|
||||
<a class="icon-text bd-is-twitter" href="https://twitter.com/{{ include.backer.twitter }}" target="_blank" rel="nofollow">
|
||||
<span class="icon"><i class="fab fa-twitter"></i></span>
|
||||
<span>{{ include.backer.twitter }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<td>
|
||||
{% if backer.website_url %}
|
||||
<a href="{{ backer.website_url }}" target="_blank" rel="nofollow">
|
||||
{{ backer.website_name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% if include.backer.discord != "" %}
|
||||
<span class="icon-text bd-is-discord">
|
||||
<span class="icon"><i class="fab fa-discord"></i></span>
|
||||
<span>{{ include.backer.discord }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
34
docs/_includes/elements/post.html
Normal file
34
docs/_includes/elements/post.html
Normal file
@ -0,0 +1,34 @@
|
||||
{% assign date = post.date | date: "%B %-d" %}
|
||||
{% assign title = post.title | markdownify %}
|
||||
{% assign introduction = post.introduction | markdownify %}
|
||||
|
||||
<div class="bd-post {% if post.featured %}is-featured{% endif %}">
|
||||
<a class="bd-post-link" href="{{ site.url }}{{ post.url }}" style="--color: var(--{{ post.color }});">
|
||||
<div class="bd-post-body">
|
||||
<figure class="icon">
|
||||
<i class="{% if post.icon_brand %}fab{% elsif post.icon_regular %}far{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
|
||||
</figure>
|
||||
|
||||
<div class="bd-post-content">
|
||||
<h2 class="title">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<div class="subtitle">
|
||||
{{ introduction }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if post.image %}
|
||||
<figure class="bd-post-image">
|
||||
<img
|
||||
src="https://source.unsplash.com/{{ post.image }}/400x240"
|
||||
srcset="https://source.unsplash.com/{{ post.image }}/400x240 1x,
|
||||
https://source.unsplash.com/{{ post.image }}/800x480 2x"
|
||||
alt="{{ post.alt }}"
|
||||
width="400"
|
||||
height="240">
|
||||
</figure>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
6
docs/_includes/elements/rss-button.html
Normal file
6
docs/_includes/elements/rss-button.html
Normal file
@ -0,0 +1,6 @@
|
||||
<a class="button is-rss" href="{{ site.url }}/atom.xml">
|
||||
<span class="icon">
|
||||
<i class="fas fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
@ -1,24 +1,16 @@
|
||||
{% if include.plain %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="bd-example">
|
||||
{{ include.content }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ include.content }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="
|
||||
bd-snippet
|
||||
{% if include.horizontal %}bd-is-horizontal{% else %}bd-is-vertical{% endif %}
|
||||
{% if include.clipped %}bd-is-clipped{% endif %}
|
||||
{% if include.size %}bd-is-{{ include.size }}{% endif %}
|
||||
{% if include.one_fifth %}bd-is-one-fifth{% endif %}
|
||||
{% if include.fullwidth %}bd-is-fullwidth{% endif %}
|
||||
">
|
||||
<div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
|
||||
<div class="
|
||||
bd-snippet
|
||||
{% if include.horizontal %}bd-is-horizontal{% else %}bd-is-vertical{% endif %}
|
||||
{% if include.fullwidth %}bd-is-fullwidth{% endif %}
|
||||
{% if include.clipped %}bd-is-clipped{% endif %}
|
||||
{% if include.size %}bd-is-size-{{ include.size }}{% endif %}
|
||||
">
|
||||
<div class="bd-snippet-example">
|
||||
<p class="bd-snippet-title">
|
||||
<span class="bd-snippet-tag bd-is-example">Example</span>
|
||||
</p>
|
||||
|
||||
<div class="bd-snippet-preview">
|
||||
{% if include.wrapper %}
|
||||
<div class="{{ include.wrapper }}">
|
||||
{{ include.content }}
|
||||
@ -27,8 +19,21 @@
|
||||
{{ include.content }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %} {% if include.more %}bd-is-more bd-is-more-clipped{% endif %}">
|
||||
</div>
|
||||
|
||||
<div class="bd-snippet-source">
|
||||
<p class="bd-snippet-title">
|
||||
<span class="bd-snippet-tag bd-is-html">HTML</span>
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="
|
||||
bd-snippet-code
|
||||
{% unless include.clipped %}bd-highlight-full{% endunless %}
|
||||
{% if include.more %}bd-is-more bd-is-more-clipped{% endif %}
|
||||
"
|
||||
>
|
||||
{% highlight html %}{{ include.content }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
6
docs/_includes/elements/sponsor-button.html
Normal file
6
docs/_includes/elements/sponsor-button.html
Normal file
@ -0,0 +1,6 @@
|
||||
<a class="button bd-fat-button is-sponsor"
|
||||
href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}">
|
||||
<span>
|
||||
Become a sponsor
|
||||
</span>
|
||||
</a>
|
||||
@ -5,30 +5,28 @@
|
||||
{% assign sponsor_alt = sponsor.title %}
|
||||
{% endif %}
|
||||
|
||||
<div class="{{ include.classname }}">
|
||||
<a
|
||||
class="bd-sponsor-item"
|
||||
href="{{ sponsor.url }}"
|
||||
target="_blank"
|
||||
{% unless sponsor.follow or sponsor.noopener %}
|
||||
rel="nofollow"
|
||||
{% endunless %}
|
||||
{% if sponsor.noopener %}
|
||||
rel="noopener"
|
||||
{% endif %}
|
||||
title="{{ sponsor_alt }}"
|
||||
>
|
||||
{% if sponsor.textOnly %}
|
||||
<strong>{{ sponsor.textOnly }}</strong>
|
||||
{% else %}
|
||||
{%
|
||||
include elements/responsive-image-2x.html
|
||||
path=sponsor_path
|
||||
extension="png"
|
||||
alt=sponsor_alt
|
||||
width=sponsor.width
|
||||
height=sponsor.height
|
||||
%}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
class="bd-sponsor-item {{ include.classname }}"
|
||||
href="{{ sponsor.url }}"
|
||||
target="_blank"
|
||||
{% unless sponsor.follow or sponsor.noopener %}
|
||||
rel="nofollow"
|
||||
{% endunless %}
|
||||
{% if sponsor.noopener %}
|
||||
rel="noopener"
|
||||
{% endif %}
|
||||
title="{{ sponsor_alt }}"
|
||||
>
|
||||
{% if sponsor.textOnly %}
|
||||
<strong>{{ sponsor.textOnly }}</strong>
|
||||
{% else %}
|
||||
{%
|
||||
include elements/responsive-image-2x.html
|
||||
path=sponsor_path
|
||||
extension="png"
|
||||
alt=sponsor_alt
|
||||
width=sponsor.width
|
||||
height=sponsor.height
|
||||
%}
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<a class="bd-tw-button button"
|
||||
<a class="bd-tw-button bd-fat-button button is-twitter"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="https://bulma.io"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text={{ site.data.meta.title | urlencode }}&hashtags=bulmaio&url={{ 'https://bulma.io' | urlencode }}&via=jgthms">
|
||||
href="{{ include.href }}">
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
|
||||
@ -28,27 +28,29 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<ul class="Tweet-actions">
|
||||
<li class="Tweet-action">
|
||||
<a class="TweetAction TweetAction--replyEdge web-intent" href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}">
|
||||
<div class="Icon Icon--reply TweetAction-icon Icon--replyEdge"></div>
|
||||
<ul class="bd-tw-actions">
|
||||
<li class="bd-tw-action is-reply">
|
||||
<a class="bd-tw-action-link" href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}">
|
||||
<div class="bd-tw-icon"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="Tweet-action Tweet-action--retweet">
|
||||
<a class="TweetAction TweetAction--retweetEdge web-intent" href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}">
|
||||
<div class="Icon Icon--retweet TweetAction-icon Icon--retweetEdge"></div>
|
||||
|
||||
<li class="bd-tw-action is-retweet">
|
||||
<a class="bd-tw-action-link" href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}">
|
||||
<div class="bd-tw-icon"></div>
|
||||
{% if tweet.retweets != 0 %}
|
||||
<span class="TweetAction-stat">
|
||||
<span class="bd-tw-action-stat">
|
||||
{{ tweet.retweets }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="Tweet-action Tweet-action--heart">
|
||||
<a class="TweetAction TweetAction--heartEdge web-intent" href="https://twitter.com/intent/like?tweet_id={{ tweet.id }}&ref_src=twsrc%5Etfw&ref_url=http%3A%2F%2Fbulma.io%2F&original_referer=http%3A%2F%2Fbulma.io%2F&tw_i={{ tweet.id }}&tw_p=tweetembed" target="_blank">
|
||||
<div class="Icon Icon--heartEdge TweetAction-icon Icon--heartEdge"></div>
|
||||
|
||||
<li class="bd-tw-action is-heart">
|
||||
<a class="bd-tw-action-link" href="https://twitter.com/intent/like?tweet_id={{ tweet.id }}&ref_src=twsrc%5Etfw&ref_url=http%3A%2F%2Fbulma.io%2F&original_referer=http%3A%2F%2Fbulma.io%2F&tw_i={{ tweet.id }}&tw_p=tweetembed" target="_blank">
|
||||
<div class="bd-tw-icon"></div>
|
||||
{% if tweet.hearts != 0 %}
|
||||
<span class="TweetAction-stat">
|
||||
<span class="bd-tw-action-stat">
|
||||
{{ tweet.hearts }}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
{% include footer/share.html %}
|
||||
</div>
|
||||
</div>
|
||||
{% include footer/boxes.html %}
|
||||
{% include footer/links.html %}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<strong>Support</strong> Bulma <span class="bd-emoji-bis">😃</span>
|
||||
</h4>
|
||||
|
||||
<div class="bd-footer-donations columns">
|
||||
<div class="bd-footer-donations columns is-multiline">
|
||||
<div class="bd-footer-donation column">
|
||||
<p class="bd-footer-donation-title">
|
||||
<strong>One-time</strong> donation
|
||||
@ -40,8 +40,7 @@
|
||||
<strong>Monthly</strong> donation
|
||||
</p>
|
||||
<div class="bd-footer-donation-action">
|
||||
{% include elements/github.html %}
|
||||
{% include elements/patreon.html %}
|
||||
{% include elements/sponsor-button.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{% if site.deprecated %}
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>{{ site.version }}</strong> version of the website.
|
||||
You are viewing the deprecated <strong>{{ site.data.meta.version }}</strong> version of the website.
|
||||
<a href="{{ site.url }}/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -2,12 +2,6 @@
|
||||
|
||||
{% include global/native.html %}
|
||||
|
||||
{% include book/book-banner.html %}
|
||||
|
||||
{% include global/newsletter.html %}
|
||||
|
||||
{% include footer/main.html %}
|
||||
|
||||
{% include book/book-modal.html %}
|
||||
|
||||
{% include global/scripts.html %}
|
||||
|
||||
@ -4,7 +4,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.data.meta.description }}{% endif %}">
|
||||
|
||||
<title>{% if page.fulltitle %}{{ page.fulltitle | strip_html }}{% else %}{% if page.title %}{{ page.title | strip_html }} | {% endif %}{{ site.data.meta.title | strip_html }}{% endif %}</title>
|
||||
<title>{% if page.fulltitle %}{{ page.fulltitle | markdownify | strip_html }}{% else %}{% if page.title %}{{ page.title | markdownify | strip_html }} | {% endif %}{{ site.data.meta.title | markdownify | strip_html }}{% endif %}</title>
|
||||
|
||||
<link rel="stylesheet" href="{{ site.url }}/vendor/fontawesome-free-5.15.2-web/css/all.min.css">
|
||||
|
||||
{% if page.fontawesome4 %}
|
||||
<link rel="stylesheet" href="{{ site.data.icons.fontawesome4 }}">
|
||||
@ -15,6 +17,8 @@
|
||||
{% if page.mdi %}
|
||||
<link rel="stylesheet" href="{{ site.data.icons.mdi }}">
|
||||
{% endif %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
|
||||
<link rel="stylesheet" href="{{ site.url }}/css/{{ site.docs_file }}.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
|
||||
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
|
||||
@ -30,7 +34,6 @@
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
|
||||
|
||||
<!-- Shared social media -->
|
||||
{% if page.share_title %}
|
||||
<meta property="og:title" content="{{ page.share_title }}">
|
||||
@ -82,6 +85,4 @@
|
||||
<link rel="shortcut icon" href="{{ site.url }}/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="{{ site.url }}/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
|
||||
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
|
||||
</head>
|
||||
|
||||
20
docs/_includes/global/navbar-item.html
Normal file
20
docs/_includes/global/navbar-item.html
Normal file
@ -0,0 +1,20 @@
|
||||
{% assign link = site.data.links.by_id[include.link_id] %}
|
||||
{% assign cleanpath = link.path | remove_first: "/" %}
|
||||
|
||||
<a class="
|
||||
navbar-item
|
||||
bd-navbar-item
|
||||
bd-navbar-item-{{ link_id }}
|
||||
{{ include.class }}
|
||||
{% if page.route == cleanpath %}is-active{% endif %}
|
||||
{% if page.path contains '_posts' and link_id == 'blog' %}
|
||||
is-active
|
||||
{% endif %}
|
||||
"
|
||||
href="{{ site.url }}{{ link.path }}/">
|
||||
<span class="icon has-text-{{ link.color }}">
|
||||
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
|
||||
</span>
|
||||
|
||||
<span>{{ link.title }}</span>
|
||||
</a>
|
||||
73
docs/_includes/global/navbar-start.html
Normal file
73
docs/_includes/global/navbar-start.html
Normal file
@ -0,0 +1,73 @@
|
||||
<div id="{{ include.id }}" class="navbar-start bd-navbar-start bd-is-{{ include.version }}">
|
||||
<a class="
|
||||
navbar-item bd-navbar-item bd-navbar-item-base bd-navbar-item-documentation
|
||||
{% if page.route == 'documentation' %}is-active{% endif %}
|
||||
{% if page.layout == 'documentation' %}is-active{% endif %}
|
||||
"
|
||||
href="{{ site.url }}{{ site.data.meta.documentation }}">
|
||||
<span class="icon has-text-primary">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
<span class="is-hidden-tablet-only is-hidden-desktop-only">
|
||||
Documentation
|
||||
</span>
|
||||
<span class="is-hidden-mobile is-hidden-widescreen">
|
||||
Docs
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{% for link_id in site.data.links.navbar %}
|
||||
{%
|
||||
include global/navbar-item.html
|
||||
link_id=link_id
|
||||
class="bd-navbar-item-base"
|
||||
%}
|
||||
{% endfor %}
|
||||
|
||||
{% for link_id in site.data.links.navbarMore %}
|
||||
{%
|
||||
include global/navbar-item.html
|
||||
link_id=link_id
|
||||
class="bd-navbar-item-more"
|
||||
%}
|
||||
{% endfor %}
|
||||
|
||||
<div class="navbar-item bd-navbar-item bd-navbar-item-base has-dropdown is-hoverable">
|
||||
{% assign link = site.data.links.by_id['more'] %}
|
||||
|
||||
<a class="navbar-link bd-navbar-ellipsis" href="{{ site.url }}{{ link.path }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-ellipsis-h"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-dropdown bd-navbar-dropdown is-boxed">
|
||||
{% for link_id in site.data.links.more %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
{% assign cleanpath = link.path | remove_first: "/" %}
|
||||
<a class="
|
||||
navbar-item
|
||||
{% if page.route == cleanpath %}is-active{% endif %}
|
||||
"
|
||||
data-route="{{ page.route }}"
|
||||
href="{{ site.url }}{{ link.path }}">
|
||||
<div>
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-{{ link.color }}">
|
||||
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
|
||||
</span>
|
||||
<span>
|
||||
<strong>{{ link.name }}</strong>
|
||||
</span>
|
||||
</div>
|
||||
{{ link.subtitle }}
|
||||
</div>
|
||||
</span>
|
||||
</a>
|
||||
{% unless forloop.last %}
|
||||
<hr class="navbar-divider {% if forloop.first %}{% endif %}">
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,123 +1,96 @@
|
||||
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
|
||||
<div class="container">
|
||||
<nav id="navbar" class="bd-navbar navbar">
|
||||
<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">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<a class="navbar-item bd-navbar-mobile-icon" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon" style="color: var(--github);">
|
||||
<i class="fab fa-lg fa-github-alt"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.twitter }}" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<a class="navbar-item bd-navbar-mobile-icon" href="{{ site.data.meta.twitter }}" target="_blank">
|
||||
<span class="icon" style="color: var(--twitter);">
|
||||
<i class="fab fa-lg fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div id="navbarBurger" class="navbar-burger" data-target="navMenu{{ include.id }}">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<div class="navbar-item bd-navbar-mobile-sponsor-icon">
|
||||
<a href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}" class="button is-sponsor is-outlined is-small">
|
||||
<span class="icon">
|
||||
<i class="fas fa-thumbs-up"></i>
|
||||
</span>
|
||||
<span>Sponsor</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button id="searchIcon" class="navbar-item bd-navbar-search-icon bd-navbar-mobile-icon">
|
||||
<span class="icon">
|
||||
<i class="fas fa-lg fa-search"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button id="navbarBurger" class="navbar-burger" data-target="navMenu{{ include.id }}">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="navMenu{{ include.id }}" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item bd-navbar-item-documentation {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.url }}{{ site.data.meta.documentation }}">
|
||||
<span class="icon has-text-primary">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
<span class="is-hidden-touch is-hidden-widescreen">
|
||||
Docs
|
||||
</span>
|
||||
<span class="is-hidden-desktop-only">
|
||||
Documentation
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{% for link_id in site.data.links.navbar %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
<a class="navbar-item bd-navbar-item-{{ link_id }} {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}/">
|
||||
<span class="icon has-text-{{ link.color }}">
|
||||
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
|
||||
</span>
|
||||
|
||||
<span>{{ link.title }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
{% assign link = site.data.links.by_id['more'] %}
|
||||
<a class="navbar-link" href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
</a>
|
||||
|
||||
<div id="moreDropdown" class="navbar-dropdown">
|
||||
<a class="navbar-item is-hidden-widescreen" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span>
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fab fa-lg fa-github-alt"></i>
|
||||
</span>
|
||||
<strong>GitHub</strong>
|
||||
<br>
|
||||
The official repository
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<hr class="navbar-divider is-hidden-widescreen">
|
||||
|
||||
{% for link_id in site.data.links.more %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
<a class="navbar-item {% if page.route == link_id %}is-active{% endif %} {% if forloop.first %}is-hidden-widescreen{% endif %}" href="{{ site.url }}{{ link.path }}">
|
||||
<span>
|
||||
<span class="icon has-text-{{ link.color }}">
|
||||
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
|
||||
</span>
|
||||
<strong>{{ link.name }}</strong>
|
||||
<br>
|
||||
{{ link.subtitle }}
|
||||
</span>
|
||||
</a>
|
||||
{% unless forloop.last %}
|
||||
<hr class="navbar-divider {% if forloop.first %}is-hidden-widescreen{% endif %}">
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include global/navbar-start.html id="navbarStartOriginal" version="original" %}
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<span class="icon" style="color: var(--github);">
|
||||
<i class="fab fa-lg fa-github-alt"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.twitter }}" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<span class="icon" style="color: var(--twitter);">
|
||||
<i class="fab fa-lg fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<p class="control">
|
||||
{% include elements/github.html %}
|
||||
</p>
|
||||
<p class="control">
|
||||
{% include elements/patreon.html %}
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" style="height: 2.25em; padding: calc(.375em - 1px) .75em;" href="{{ site.data.meta.download }}">
|
||||
<strong>Download</strong>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="navbar-item bd-navbar-sponsor-button is-hidden-desktop">
|
||||
<a class="button is-sponsor is-light">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-thumbs-up"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-item bd-navbar-sponsor-button is-hidden-touch">
|
||||
<a href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}" class="button is-sponsor is-light">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-thumbs-up"></i>
|
||||
</span>
|
||||
<span>
|
||||
Sponsor
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button class="navbar-item bd-navbar-search-icon">
|
||||
<span class="icon">
|
||||
<i class="fas fa-lg fa-search"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="search" class="bd-search">
|
||||
<p class="control has-icons-left">
|
||||
<input id="algoliaSearch" class="input is-rounded" type="text" placeholder="Search the docs">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="bd-navbar bd-is-clone">
|
||||
{% include global/navbar-start.html id="navbarStartClone" version="clone" %}
|
||||
</div>
|
||||
|
||||
@ -1,34 +1,36 @@
|
||||
<section id="newsletter" class="section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<p class="title">Newsletter</p>
|
||||
<p class="subtitle is-4 has-text-grey-light">Features, releases, showcase… stay in the loop!</p>
|
||||
</div>
|
||||
<div id="newsletter" class="bd-newsletter">
|
||||
<section class="bd-index-section bd-newsletter-box">
|
||||
<div class="bd-newsletter-heading">
|
||||
<span class="icon has-text-primary is-size-2-widescreen">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</span>
|
||||
|
||||
<div class="column">
|
||||
<form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
|
||||
<div class="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="email" class="input is-medium is-flat" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
{% include elements/drawing.html id='spam-free' width=112 height=88 %}
|
||||
</div>
|
||||
<h2 class="title has-text-black mb-0 is-size-2-widescreen">
|
||||
<strong>Newsletter</strong>
|
||||
<small>Features, releases, showcase… stay in the loop!</small>
|
||||
</h2>
|
||||
|
||||
<div class="control">
|
||||
<div class="is-hidden">
|
||||
<input type="text" name="hp" id="hp">
|
||||
</div>
|
||||
<input type="hidden" name="list" value="So5UY3O9gHJkq892bn763Tyf4A">
|
||||
<button class="button is-medium is-link">
|
||||
<strong>Subscribe</strong>
|
||||
</button>
|
||||
</div>
|
||||
<form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
|
||||
<div class="bd-newsletter-fields">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="email" class="input is-medium is-primary" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
{% include elements/drawing.html id='spam-free' width=112 height=88 %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="is-hidden">
|
||||
<input type="text" name="hp" id="hp">
|
||||
</div>
|
||||
<input type="hidden" name="list" value="So5UY3O9gHJkq892bn763Tyf4A">
|
||||
<button class="button is-medium is-primary">
|
||||
<strong>Subscribe</strong>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
|
||||
<script src="{{ site.url }}/vendor/cupcakes-3.1.0.min.js"></script>
|
||||
|
||||
<script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
|
||||
|
||||
{% if page.route == 'index' %}
|
||||
@ -18,35 +20,32 @@
|
||||
s.parentNode.insertBefore(wf, s);
|
||||
})(document);
|
||||
</script>
|
||||
{% elsif page.doc-subtab == 'navbar' %}
|
||||
{% include examples/navbar-bottom.html %}
|
||||
<script type="text/javascript" src="{{ site.url }}/lib/navbar.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
|
||||
{% endif %}
|
||||
|
||||
<div id="fb-root"></div>
|
||||
{% if page.layout == 'documentation' %}
|
||||
<script src="{{ site.url }}/lib/docs.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
|
||||
{% endif %}
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
{% if page.doc-subtab == 'start' %}
|
||||
<script src="{{ site.url }}/lib/start.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
|
||||
{% endif %}
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-82634666-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script type="text/javascript"> docsearch({
|
||||
apiKey: 'cb93c14bebd90678e789c946d95ea94d',
|
||||
indexName: 'bulma',
|
||||
inputSelector: '#algoliaSearch',
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script>
|
||||
|
||||
{% if page.route == 'index' %}
|
||||
<script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
|
||||
{% endif %}
|
||||
<script>
|
||||
window.addEventListener("load", function(){
|
||||
window.cupcakeconsent.initialise({
|
||||
"content": {
|
||||
"message": "Just so you know, this website uses cookies.",
|
||||
"dismiss": "<span>👍</span> Got it!",
|
||||
"link": "What are cookies?"
|
||||
}
|
||||
})});
|
||||
</script>
|
||||
|
||||
33
docs/_includes/index/beautified.html
Normal file
33
docs/_includes/index/beautified.html
Normal file
@ -0,0 +1,33 @@
|
||||
<section class="bd-index-section" style="--bd-section-h: 44deg;">
|
||||
<div class="bd-heading">
|
||||
<span class="icon has-text-expo is-size-2-widescreen">
|
||||
<i class="fas fa-star"></i>
|
||||
</span>
|
||||
|
||||
<h2 class="title has-text-black mb-0 is-size-2-widescreen">
|
||||
<strong>Beautified</strong> by <strong>everyone</strong>
|
||||
</h2>
|
||||
|
||||
<div class="subtitle mb-0 mt-0 has-text-grey-light is-size-4-widescreen">
|
||||
See what Bulma developers are bulding
|
||||
</div>
|
||||
|
||||
<a class="button bd-fat-button is-expo is-light is-size-4-widescreen" href="{{ site.data.links.by_id.love.path }}">
|
||||
<span class="icon has-text-expo">
|
||||
<i class="fas fa-star"></i>
|
||||
</span>
|
||||
<span>
|
||||
Visit the <strong>expo</strong>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bd-screenshots">
|
||||
{% include index/best-screenshot.html website_id="divjoy" %}
|
||||
{% include index/best-screenshot.html website_id="runlet" %}
|
||||
{% include index/best-screenshot.html website_id="gustav" %}
|
||||
{% include index/best-screenshot.html website_id="romes" %}
|
||||
{% include index/best-screenshot.html website_id="getbedtimestories" %}
|
||||
{% include index/best-screenshot.html website_id="signal" %}
|
||||
</div>
|
||||
</section>
|
||||
15
docs/_includes/index/best-screenshot.html
Normal file
15
docs/_includes/index/best-screenshot.html
Normal file
@ -0,0 +1,15 @@
|
||||
{% assign website = site.data.expo.by_id[include.website_id] %}
|
||||
{% assign imageName = include.website_id | slugify %}
|
||||
{% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %}
|
||||
{% assign size1x = "672x420" %}
|
||||
{% assign size2x = "1344x840" %}
|
||||
|
||||
<a class="bd-screenshot {{ include.modifier }}" href="{{ site.url }}/expo">
|
||||
<img
|
||||
src="{{ imagePath }}-{{ size1x }}.jpg"
|
||||
srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
|
||||
{{ imagePath }}-{{ size1x }}.jpg 1x"
|
||||
width="672"
|
||||
height="420"
|
||||
/>
|
||||
</a>
|
||||
23
docs/_includes/index/best.html
Normal file
23
docs/_includes/index/best.html
Normal file
@ -0,0 +1,23 @@
|
||||
{% capture best_duplicates %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="1126857886599122949" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-large" tweet_id="1339242817919590404" %}
|
||||
{% include index/best-screenshot.html modifier="bd-best-item" website_id="signal" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-huge" tweet_id="869284735440363520" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="966731525709619200" %}
|
||||
{% include index/best-screenshot.html modifier="bd-best-item" website_id="getbedtimestories" %}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="bd-best">
|
||||
<div class="bd-best-list">
|
||||
{{ best_duplicates }}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="1254050448711057410" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-large" tweet_id="1240347595106549762" %}
|
||||
{% include index/best-screenshot.html modifier="bd-best-item" website_id="romes" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-medium" tweet_id="1140839283692982274" %}
|
||||
{% include elements/tw.html modifier="bd-best-item bd-is-large" tweet_id="835834634655174658" %}
|
||||
{% include index/best-screenshot.html modifier="bd-best-item" website_id="Gustav" %}
|
||||
<!-- More -->
|
||||
{{ best_duplicates }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,22 +6,24 @@
|
||||
<div class="column">4</div>
|
||||
<div class="column">5</div>
|
||||
</div>
|
||||
{% endcapture %} {% assign columns_link =
|
||||
site.data.links.by_id['columns-basics'] %}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign columns_link = site.data.links.by_id['columns-basics'] %}
|
||||
{% assign heading_href = site.url | append: columns_link.path %}
|
||||
|
||||
<section class="bd-index-section" style="--bd-section-h: 229deg;">
|
||||
{%
|
||||
include components/heading.html
|
||||
color="link"
|
||||
icon="fas fa-columns"
|
||||
title="The <strong>simplest</strong> grid system"
|
||||
subtitle="Just add columns, they will <strong>resize themselves</strong>"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>columns</strong> docs"
|
||||
%}
|
||||
|
||||
<section class="bd-columns section is-medium">
|
||||
<div class="container">
|
||||
<header class="bd-index-header">
|
||||
<h3 class="title is-3">
|
||||
<a href="{{ site.url }}{{ columns_link.path }}">
|
||||
The <strong>simplest</strong> grid system
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
Just add columns, they will resize themselves
|
||||
</h4>
|
||||
</header>
|
||||
|
||||
<div class="message is-warning is-hidden-tablet">
|
||||
<p class="message-header">
|
||||
Better on desktop
|
||||
@ -35,62 +37,62 @@ site.data.links.by_id['columns-basics'] %}
|
||||
|
||||
<div id="grid" class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">4</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">5</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">7</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">8</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">9</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">10</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">11</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<div class="notification is-link has-text-centered">
|
||||
<p class="title">12</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -126,8 +128,5 @@ site.data.links.by_id['columns-basics'] %}
|
||||
<strong>nest</strong> columns.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include components/hero-buttons.html href=columns_link.path
|
||||
content="<span>See <strong>Columns</strong> docs</span>" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,32 +1,33 @@
|
||||
{% assign customize_link = site.data.links.by_id['customize'] %}
|
||||
{% assign heading_href = site.url | append: customize_link.path %}
|
||||
|
||||
<section class="bd-index-section" style="--bd-section-h: 330deg;">
|
||||
{%
|
||||
include components/heading.html
|
||||
color="sass"
|
||||
icon="fab fa-sass"
|
||||
title="So <strong>quick</strong> to customize"
|
||||
subtitle="Simply set your own Sass variables before importing Bulma"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>customization</strong> docs"
|
||||
%}
|
||||
|
||||
<section id="customize" class="bd-easy section is-medium">
|
||||
<div class="container">
|
||||
<header class="bd-index-header">
|
||||
<h3 class="title is-3">
|
||||
<a href="{{ site.url }}{{ customize_link.path }}">
|
||||
So <strong>quick</strong> to customize
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
Simply set your own Sass variables before importing Bulma
|
||||
</h4>
|
||||
<div class="bd-index-custom-tweet">
|
||||
{% include elements/tw.html tweet_id="1070320154452656128"
|
||||
modifier='bd-is-grey' %}
|
||||
</div>
|
||||
<header class="block is-size-5-desktop mb-6">
|
||||
{% include elements/tw.html tweet_id="1070320154452656128" %}
|
||||
</header>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<div class="highlight-full bd-has-drawing">
|
||||
<div class="columns is-variable is-8">
|
||||
<div class="column">
|
||||
<div class="bd-highlight-full bd-has-drawing">
|
||||
{% highlight scss %}{% include snippets/customized.html %}{%
|
||||
endhighlight %} {% include elements/drawing.html id='customize'
|
||||
width=152 height=76 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6">
|
||||
<div class="column">
|
||||
<div class="bd-index-custom bd-is-before">
|
||||
<p class="bd-index-custom-title">Before</p>
|
||||
<div class="bd-index-custom-example">
|
||||
@ -96,8 +97,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include components/hero-buttons.html href=customize_link.path
|
||||
content="<span>Learn how to <strong>customize</strong></span>" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -3,71 +3,85 @@
|
||||
{% assign columns_link = site.data.links.by_id['columns-basics'] %}
|
||||
|
||||
<div class="bd-focus">
|
||||
<nav class="columns">
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ responsiveness_link.path }}">
|
||||
<p class="title is-4">
|
||||
<strong>100% Responsive</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">Designed for <strong>mobile</strong> first</p>
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="bd-focus-mobile icon is-large">
|
||||
<i class="fas fa-lg fa-mobile-alt"></i>
|
||||
</span>
|
||||
<span class="bd-focus-tablet icon is-large">
|
||||
<i class="fas fa-2x fa-tablet-alt"></i>
|
||||
</span>
|
||||
<span class="bd-focus-desktop icon is-large">
|
||||
<i class="fas fa-3x fa-desktop"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
<div class="container">
|
||||
<nav class="columns is-multiline">
|
||||
<a class="bd-focus-item column is-half-tablet is-one-quarter-widescreen" href="{{ site.url }}{{ responsiveness_link.path }}">
|
||||
<div class="bd-focus-graph">
|
||||
<div class="bd-focus-device"></div>
|
||||
</div>
|
||||
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ modularity_link.path }}">
|
||||
<p class="title is-4">
|
||||
<strong>Modular</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Just import what you <strong>need</strong>
|
||||
</p>
|
||||
<figure class="bd-focus-cubes bd-focus-icon">
|
||||
<span class="bd-focus-cube bd-focus-cube-1 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
<span class="bd-focus-cube bd-focus-cube-2 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
<span class="bd-focus-cube bd-focus-cube-3 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
<div class="bd-focus-text">
|
||||
<p class="title is-4">
|
||||
<strong>100% Responsive</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Designed for <strong>mobile</strong> first
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ columns_link.path }}">
|
||||
<p class="title is-4">
|
||||
<strong>Modern</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Built with <strong>Flexbox</strong>
|
||||
</p>
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="bd-focus-css3 icon is-large">
|
||||
<i class="fab fa-3x fa-css3"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
<a class="bd-focus-item column is-half-tablet is-one-quarter-widescreen" href="{{ site.url }}{{ modularity_link.path }}">
|
||||
<div class="bd-focus-graph">
|
||||
<figure class="bd-focus-cubes bd-focus-icon">
|
||||
<span class="bd-focus-cube bd-focus-cube-1 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
<span class="bd-focus-cube bd-focus-cube-2 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
<span class="bd-focus-cube bd-focus-cube-3 icon is-large">
|
||||
<i class="fas fa-2x fa-cube"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<p class="title is-4">
|
||||
<strong>Free</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Open source on <strong>GitHub</strong>
|
||||
</p>
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="bd-focus-github icon is-large">
|
||||
<i class="fab fa-3x fa-github-alt"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="bd-focus-text">
|
||||
<p class="title is-4">
|
||||
<strong>Modular</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Just import what you <strong>need</strong>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="bd-focus-item column is-half-tablet is-one-quarter-widescreen" href="{{ site.url }}{{ columns_link.path }}">
|
||||
<div class="bd-focus-graph">
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="bd-focus-css3 icon is-large">
|
||||
<i class="fab fa-3x fa-css3"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="bd-focus-text">
|
||||
<p class="title is-4">
|
||||
<strong>Modern</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Built with <strong>Flexbox</strong>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="bd-focus-item column is-half-tablet is-one-quarter-widescreen" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<div class="bd-focus-graph">
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="bd-focus-github icon is-large">
|
||||
<i class="fab fa-3x fa-github-alt"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="bd-focus-text">
|
||||
<p class="title is-4">
|
||||
<strong>Free</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Open source on <strong>GitHub</strong>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
65
docs/_includes/index/hello.html
Normal file
65
docs/_includes/index/hello.html
Normal file
File diff suppressed because one or more lines are too long
@ -1,33 +1,33 @@
|
||||
{% assign css_only_link = site.data.links.by_id['overview-classes'] %}
|
||||
{% assign css_only_link = site.data.links.by_id['overview-start'] %}
|
||||
{% assign heading_href = site.url | append: css_only_link.path %}
|
||||
|
||||
<section class="bd-index-section" style="--bd-section-h: 153deg;">
|
||||
{%
|
||||
include components/heading.html
|
||||
color="success"
|
||||
icon="fas fa-check"
|
||||
title="No <strong>JavaScript</strong> required"
|
||||
subtitle="CSS only, so it integrates in <strong>any JS</strong> environment"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>installation</strong> docs"
|
||||
%}
|
||||
|
||||
<section class="bd-easy section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<header class="bd-index-header bd-is-left">
|
||||
<h3 class="title is-3">
|
||||
<a href="{{ site.url }}{{ css_only_link.path }}">
|
||||
No <strong>JavaScript</strong> required
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
CSS only, so it integrates in any JS environment
|
||||
</h4>
|
||||
<img src="{{ site.url }}/images/index/js-frameworks.png" width="568" height="91">
|
||||
</header>
|
||||
<img src="{{ site.url }}/images/index/js-frameworks.png" width="568" height="91">
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="bd-index-js-tweet">
|
||||
{% include
|
||||
elements/tw.html
|
||||
tweet_id="860885116909998080"
|
||||
modifier='bd-is-grey'
|
||||
drawing_id='opinion-free'
|
||||
drawing_width=152
|
||||
drawing_height=52
|
||||
%}
|
||||
</div>
|
||||
<div class="column is-size-5-desktop">
|
||||
{% include
|
||||
elements/tw.html
|
||||
tweet_id="860885116909998080"
|
||||
modifier='bd-is-grey'
|
||||
drawing_id='opinion-free'
|
||||
drawing_width=152
|
||||
drawing_height=52
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
29
docs/_includes/index/love.html
Normal file
29
docs/_includes/index/love.html
Normal file
@ -0,0 +1,29 @@
|
||||
<section class="bd-index-section" style="--bd-section-h: 348deg;">
|
||||
{%
|
||||
include components/heading.html
|
||||
color="love"
|
||||
icon="fas fa-heart"
|
||||
title="<strong>Loved</strong> by the <strong>community</strong>"
|
||||
subtitle="See what Bulma fans are <strong>tweeting</strong>"
|
||||
href=site.data.links.by_id.love.path
|
||||
button_icon_after="fas fa-heart"
|
||||
button_label="See more <strong>love</strong>"
|
||||
%}
|
||||
|
||||
<div class="bd-tws">
|
||||
<div class="bd-tws-list">
|
||||
{% include elements/tw.html tweet_id="910956939886043136" %}
|
||||
{% include elements/tw.html tweet_id="1313236270617972740" %}
|
||||
{% include elements/tw.html tweet_id="1067168440333606912" %}
|
||||
{% include elements/tw.html tweet_id="1106622513159856131" %}
|
||||
{% include elements/tw.html tweet_id="1148364620714958848" %}
|
||||
{% include elements/tw.html tweet_id="1161404522331344896" %}
|
||||
{% include elements/tw.html tweet_id="1254050448711057410" %}
|
||||
{% include elements/tw.html tweet_id="1176845849629995009" %}
|
||||
{% include elements/tw.html tweet_id="835834634655174658" %}
|
||||
{% include elements/tw.html tweet_id="1310481068886118400" %}
|
||||
{% include elements/tw.html tweet_id="903629781744439297" %}
|
||||
{% include elements/tw.html tweet_id="922849122008354817" %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,23 +1,28 @@
|
||||
{% assign modifiers_link = site.data.links.by_id['modifiers-syntax'] %}
|
||||
{% assign heading_href = site.url | append: modifiers_link.path %}
|
||||
|
||||
<section class="bd-index-section">
|
||||
{%
|
||||
include components/heading.html
|
||||
color="primary"
|
||||
icon="fas fa-graduation-cap"
|
||||
title="So <strong>easy</strong> to learn"
|
||||
subtitle="Get a design <strong>started</strong> within <strong>minutes</strong>"
|
||||
href=heading_href
|
||||
button_icon_after="fas fa-arrow-right"
|
||||
button_label="See <strong>modifiers</strong> syntax"
|
||||
%}
|
||||
|
||||
<section class="bd-easy section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<header class="bd-index-header bd-is-left">
|
||||
<h3 class="title is-3">
|
||||
<a href="{{ site.url }}{{ modifiers_link.path }}">
|
||||
So <strong>easy</strong> to learn
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">
|
||||
Get a design started within minutes
|
||||
</h4>
|
||||
</header>
|
||||
|
||||
{% include elements/tw.html tweet_id="868829487072464897"
|
||||
modifier='bd-is-grey' drawing_id='crazy' drawing_width=108
|
||||
drawing_height=48 %}
|
||||
<div class="column is-size-5-desktop">
|
||||
{%
|
||||
include elements/tw.html
|
||||
tweet_id="868829487072464897"
|
||||
drawing_id='crazy'
|
||||
drawing_width=108
|
||||
drawing_height=48
|
||||
%}
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
@ -55,9 +60,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include components/hero-buttons.html href=modifiers_link.path
|
||||
content="<span>Learn the <strong>modifiers syntax</strong></span
|
||||
>" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
39
docs/_includes/index/sponsors.html
Normal file
39
docs/_includes/index/sponsors.html
Normal file
@ -0,0 +1,39 @@
|
||||
<section class="bd-sponsors">
|
||||
<div class="bd-sponsors-body">
|
||||
<div class="bd-sponsors-content bd-index-content">
|
||||
<h1 class="title has-text-black">
|
||||
<strong>Bulma</strong> is thankful to its <a class="has-text-sponsor" href="{{ site.data.meta.patreon_url }}" target="_blank">Patreon</a> and <a class="has-text-sponsor" href="{{ site.data.meta.sponsorship_url }}" target="_blank">GitHub sponsors</a>
|
||||
<span class="icon has-text-sponsor">
|
||||
<i class="fas fa-thumbs-up"></i>
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Their support contributes to the continuous development of Bulma and other open source software.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a class="button bd-fat-button is-sponsor" href="{{ site.url }}{{ site.data.links.by_id.['become-sponsor'].path }}">
|
||||
<span>
|
||||
Become a sponsor
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bd-sponsors-list">
|
||||
<div class="bd-partner-sponsors">
|
||||
{% for sponsor_id in site.data.sponsors.home %}
|
||||
{% include elements/sponsor-item.html
|
||||
sponsor_id=sponsor_id
|
||||
classname="bd-partner-sponsor"
|
||||
%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-sponsors-carbon is-flex is-justify-content-center" style="margin-top: var(--bd-sponsors-spacing);">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</section>
|
||||
@ -1,11 +1,11 @@
|
||||
{% assign docs_link = site.data.links.by_id['overview-start'] %}
|
||||
{% assign docs_url = site.url | append: docs_link.path %}
|
||||
|
||||
<section class="section is-large">
|
||||
<section class="bd-index-section" style="--bd-section-h: 214deg;">
|
||||
<div class="container">
|
||||
<header class="bd-index-header">
|
||||
<header class="has-text-centered">
|
||||
<h3 class="title is-3">
|
||||
<a class="bd-has-drawing" href="{{ docs_url }}">
|
||||
<a class="bd-has-drawing has-text-info" href="{{ docs_url }}">
|
||||
And so <strong>much more</strong>
|
||||
{% include elements/drawing.html id='join-us' width=86 height=86 %}
|
||||
</a>
|
||||
@ -16,13 +16,14 @@
|
||||
</header>
|
||||
|
||||
<div class="hero-buttons">
|
||||
<a class="button is-primary is-large" href="{{ docs_url }}">
|
||||
<a class="button bd-fat-button is-info is-large" href="{{ docs_url }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
<span>Get <strong>started</strong></span>
|
||||
</a>
|
||||
<a class="button is-black is-large" href="{{ site.data.meta.github }}" target="_blank">
|
||||
|
||||
<a class="button bd-fat-button is-black is-large" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ tiles }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -45,7 +45,7 @@ $input-shadow: none;
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight scss %}{{ mystyles }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
20
docs/_includes/svg/github.svg
Normal file
20
docs/_includes/svg/github.svg
Normal file
@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="192px" height="48px" viewBox="0 0 192 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>github</title>
|
||||
<g id="github" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Fill-5" fill="#161514">
|
||||
<path d="M23.9555702,-2.84217094e-15 C10.7270083,-2.84217094e-15 -5.63736385e-15,10.8144 -5.63736385e-15,24.1552 C-5.63736385e-15,34.8276 6.864,43.882 16.382281,47.076 C17.5795041,47.2996 18.0190413,46.552 18.0190413,45.914 C18.0190413,45.338 17.9968264,43.4352 17.9865124,41.4168 C11.3220496,42.878 9.9157686,38.5668 9.9157686,38.5668 C8.82604959,35.7748 7.25593388,35.0324 7.25593388,35.0324 C5.08244628,33.5332 7.4197686,33.564 7.4197686,33.564 C9.82532231,33.7344 11.0919669,36.0532 11.0919669,36.0532 C13.228562,39.746 16.6960661,38.6784 18.0630744,38.0612 C18.2780826,36.5 18.8989091,35.4344 19.584,34.8312 C14.2631405,34.2204 8.66975207,32.1492 8.66975207,22.8936 C8.66975207,20.2564 9.60555372,18.1016 11.1379835,16.41 C10.8892562,15.8016 10.0692893,13.3448 11.3700496,10.0176 C11.3700496,10.0176 13.381686,9.3684 17.9595372,12.4936 C19.8704132,11.9584 21.9197355,11.69 23.9555702,11.6808 C25.991405,11.69 28.042314,11.9584 29.9567603,12.4936 C34.5290579,9.3684 36.5379174,10.0176 36.5379174,10.0176 C37.8418512,13.3448 37.0214876,15.8016 36.7727603,16.41 C38.3087603,18.1016 39.2382149,20.2564 39.2382149,22.8936 C39.2382149,32.1712 33.6341157,34.214 28.2997686,34.812 C29.1590083,35.5616 29.9246281,37.0316 29.9246281,39.2852 C29.9246281,42.5172 29.8968595,45.1184 29.8968595,45.914 C29.8968595,46.5568 30.3280661,47.31 31.5423471,47.0728 C41.0554711,43.8752 47.9107438,34.824 47.9107438,24.1552 C47.9107438,10.8144 37.1853223,-2.84217094e-15 23.9555702,-2.84217094e-15"></path>
|
||||
</g>
|
||||
<g id="GitHub_Logo" transform="translate(74.000000, 8.000000)" fill="#11110F">
|
||||
<g id="Group-12">
|
||||
<path d="M22.948898,13.7103673 L13.0657959,13.7103673 C12.8107755,13.7103673 12.6040816,13.9170612 12.6040816,14.1724082 L12.6040816,19.0044082 C12.6040816,19.259102 12.8107755,19.4667755 13.0657959,19.4667755 L16.9211429,19.4667755 L16.9211429,25.4700408 C16.9211429,25.4700408 16.0555102,25.7652245 13.6620408,25.7652245 C10.8385306,25.7652245 6.89404082,24.7337143 6.89404082,16.0597551 C6.89404082,7.38416327 11.0014694,6.24261224 14.8574694,6.24261224 C18.1955918,6.24261224 19.6333061,6.83004082 20.5485714,7.11346939 C20.8362449,7.20130612 21.1020408,6.91526531 21.1020408,6.65991837 L22.2044082,1.9915102 C22.2044082,1.872 22.1639184,1.728 22.0280816,1.63069388 C21.6564898,1.36555102 19.3893878,0.0969795918 13.6620408,0.0969795918 C7.0644898,0.0969795918 0.296489796,2.90383673 0.296489796,16.3980408 C0.296489796,29.8922449 8.04506122,31.9030204 14.5746939,31.9030204 C19.9810612,31.9030204 23.2607347,29.5928163 23.2607347,29.5928163 C23.3959184,29.5180408 23.4106122,29.3293061 23.4106122,29.2427755 L23.4106122,14.1724082 C23.4106122,13.9170612 23.2039184,13.7103673 22.948898,13.7103673" id="Fill-11"></path>
|
||||
</g>
|
||||
<path d="M73.882449,1.71363265 C73.882449,1.45665306 73.6786939,1.24930612 73.4233469,1.24930612 L67.8586122,1.24930612 C67.6045714,1.24930612 67.3978776,1.45665306 67.3978776,1.71363265 C67.3978776,1.71493878 67.3995102,12.4679184 67.3995102,12.4679184 L58.7252245,12.4679184 L58.7252245,1.71363265 C58.7252245,1.45665306 58.5208163,1.24930612 58.2661224,1.24930612 L52.7017143,1.24930612 C52.4486531,1.24930612 52.2419592,1.45665306 52.2419592,1.71363265 L52.2419592,30.8329796 C52.2419592,31.0899592 52.4486531,31.2989388 52.7017143,31.2989388 L58.2661224,31.2989388 C58.5208163,31.2989388 58.7252245,31.0899592 58.7252245,30.8329796 L58.7252245,18.3777959 L67.3995102,18.3777959 C67.3995102,18.3777959 67.3841633,30.832 67.3841633,30.8329796 C67.3841633,31.0899592 67.5905306,31.2989388 67.8452245,31.2989388 L73.4230204,31.2989388 C73.6780408,31.2989388 73.8817959,31.0899592 73.882449,30.8329796 L73.882449,1.71363265" id="Fill-13"></path>
|
||||
<path d="M33.4497959,5.53502041 C33.4497959,3.53110204 31.8435918,1.91183673 29.861551,1.91183673 C27.8814694,1.91183673 26.2736327,3.53110204 26.2736327,5.53502041 C26.2736327,7.53665306 27.8814694,9.16016327 29.861551,9.16016327 C31.8435918,9.16016327 33.4497959,7.53665306 33.4497959,5.53502041" id="Fill-14"></path>
|
||||
<path d="M33.0520816,24.6906122 C33.0520816,23.9441633 33.0520816,11.2489796 33.0520816,11.2489796 C33.0520816,10.9936327 32.8460408,10.7849796 32.5916735,10.7849796 L27.0442449,10.7849796 C26.7898776,10.7849796 26.5622857,11.0475102 26.5622857,11.3028571 C26.5622857,11.3028571 26.5622857,27.4772245 26.5622857,30.5603265 C26.5622857,31.1262041 26.9149388,31.2946939 27.371102,31.2946939 C27.371102,31.2946939 29.739102,31.2946939 32.3689796,31.2946939 C32.917551,31.2946939 33.0520816,31.0253061 33.0520816,30.5511837 C33.0520816,29.5190204 33.0520816,25.4752653 33.0520816,24.6906122" id="Fill-15"></path>
|
||||
<path d="M95.0308571,10.8290612 L89.508898,10.8290612 C89.2558367,10.8290612 89.0494694,11.0377143 89.0494694,11.2943673 L89.0494694,25.5725714 C89.0494694,25.5725714 87.6463673,26.5988571 85.6551837,26.5988571 C83.6643265,26.5988571 83.136,25.6953469 83.136,23.7459592 C83.136,21.7939592 83.136,11.2943673 83.136,11.2943673 C83.136,11.0377143 82.9302857,10.8290612 82.6765714,10.8290612 L77.072,10.8290612 C76.8192653,10.8290612 76.6119184,11.0377143 76.6119184,11.2943673 C76.6119184,11.2943673 76.6119184,18.8979592 76.6119184,24.6886531 C76.6119184,30.4796735 79.8393469,31.8964898 84.2791837,31.8964898 C87.9219592,31.8964898 90.8587755,29.8840816 90.8587755,29.8840816 C90.8587755,29.8840816 90.9985306,30.9446531 91.0618776,31.0703673 C91.124898,31.1957551 91.2897959,31.322449 91.4680816,31.322449 L95.0334694,31.306449 C95.2862041,31.306449 95.493551,31.0974694 95.493551,30.8417959 L95.4915918,11.2943673 C95.4915918,11.0377143 95.285551,10.8290612 95.0308571,10.8290612" id="Fill-16"></path>
|
||||
<path d="M107.945796,26.5812245 C106.030367,26.523102 104.731102,25.6538776 104.731102,25.6538776 L104.731102,16.4323265 C104.731102,16.4323265 106.012735,15.6466939 107.585306,15.5062857 C109.573878,15.3283265 111.489959,15.9288163 111.489959,20.6726531 C111.489959,25.6747755 110.625306,26.6622041 107.945796,26.5812245 Z M110.123755,10.1746939 C106.987429,10.1746939 104.854204,11.5742041 104.854204,11.5742041 L104.854204,1.71363265 C104.854204,1.45665306 104.64849,1.24930612 104.395102,1.24930612 L98.8143673,1.24930612 C98.5606531,1.24930612 98.3546122,1.45665306 98.3546122,1.71363265 L98.3546122,30.8329796 C98.3546122,31.0899592 98.5606531,31.2989388 98.8150204,31.2989388 C98.8156735,31.2989388 102.685714,31.2989388 102.68702,31.2989388 C102.861388,31.2989388 102.993306,31.2091429 103.090939,31.0517551 C103.187265,30.8953469 103.326041,29.7090612 103.326041,29.7090612 C103.326041,29.7090612 105.607837,31.8713469 109.92751,31.8713469 C114.999184,31.8713469 117.907592,29.2989388 117.907592,20.3235918 C117.907592,11.3475918 113.262367,10.1746939 110.123755,10.1746939 L110.123755,10.1746939 Z" id="Fill-17"></path>
|
||||
<path d="M49.045551,10.7823673 L44.8711837,10.7823673 C44.8711837,10.7823673 44.8649796,5.26889796 44.8649796,5.26791837 C44.8649796,5.05893878 44.7572245,4.95477551 44.5159184,4.95477551 L38.8277551,4.95477551 C38.6063673,4.95477551 38.4878367,5.05208163 38.4878367,5.26465306 L38.4878367,10.9632653 C38.4878367,10.9632653 35.6372245,11.6515918 35.4442449,11.707102 C35.2525714,11.7626122 35.1111837,11.9395918 35.1111837,12.1508571 L35.1111837,15.7319184 C35.1111837,15.989551 35.316898,16.1972245 35.5712653,16.1972245 L38.4878367,16.1972245 C38.4878367,16.1972245 38.4878367,19.9428571 38.4878367,24.8124082 C38.4878367,31.2114286 42.9763265,31.84 46.004898,31.84 C47.3890612,31.84 49.0445714,31.3955918 49.3178776,31.2946939 C49.483102,31.2339592 49.579102,31.0625306 49.579102,30.8770612 L49.584,26.9377959 C49.584,26.6808163 49.3668571,26.4728163 49.1226122,26.4728163 C48.8790204,26.4728163 48.2569796,26.5717551 47.6163265,26.5717551 C45.5657143,26.5717551 44.8711837,25.6182857 44.8711837,24.3843265 C44.8711837,23.1513469 44.8708571,16.1972245 44.8708571,16.1972245 L49.045551,16.1972245 C49.2999184,16.1972245 49.5059592,15.989551 49.5059592,15.7319184 L49.5059592,11.2463673 C49.5059592,10.9893878 49.2999184,10.7823673 49.045551,10.7823673" id="Fill-18"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.3 KiB |
28
docs/_includes/svg/patreon.svg
Normal file
28
docs/_includes/svg/patreon.svg
Normal file
@ -0,0 +1,28 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="232px" height="48px" viewBox="0 0 232 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>patreon</title>
|
||||
<defs>
|
||||
<polygon id="path-1" points="0.00819352321 0.047639485 64.6679672 0.047639485 64.6679672 20.8934842 0.00819352321 20.8934842"></polygon>
|
||||
</defs>
|
||||
<g id="patreon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Digital-Patreon-Logo_FieryCoral" fill="#FF424D">
|
||||
<path d="M32.04075,0.0184166667 C22.11775,0.0184166667 14.0445833,8.09891667 14.0445833,18.0316667 C14.0445833,27.9344167 22.11775,35.991 32.04075,35.991 C41.9330833,35.991 49.9809167,27.9344167 49.9809167,18.0316667 C49.9809167,8.09891667 41.9330833,0.0184166667 32.04075,0.0184166667" id="Fill-1"></path>
|
||||
<polygon id="Fill-3" points="0 47.995 8.78675 47.995 8.78675 0.01825 0 0.01825"></polygon>
|
||||
</g>
|
||||
<g id="Digital-Patreon-Wordmark_Black" transform="translate(82.000000, 13.000000)">
|
||||
<path d="M10.9044089,7.72356613 C10.9044089,5.88236442 9.65788139,4.29615685 7.73199376,4.29615685 L4.58825595,4.29615685 L4.58825595,11.1499805 L7.73199376,11.1499805 C9.65788139,11.1499805 10.9044089,9.56476785 10.9044089,7.72356613 Z M0,0.557686305 L8.29816621,0.557686305 C12.6884901,0.557686305 15.5211666,3.8718494 15.5211666,7.72356613 C15.5211666,11.5752829 12.6884901,14.8883925 8.29816621,14.8883925 L4.58825595,14.8883925 L4.58825595,20.3834959 L0,20.3834959 L0,0.557686305 L0,0.557686305 Z" id="Fill-1" fill="#141518"></path>
|
||||
<path d="M28.8043309,6.22204448 L26.3684549,14.3793991 L31.1830862,14.3793991 L28.8043309,6.22204448 Z M33.0814085,20.3834959 L32.317421,17.9761217 L25.2647288,17.9761217 L24.4996879,20.3834959 L19.5993757,20.3834959 L26.6805696,0.557686305 L30.9005267,0.557686305 L38.0664651,20.3834959 L33.0814085,20.3834959 L33.0814085,20.3834959 Z" id="Fill-2" fill="#141518"></path>
|
||||
<polyline id="Fill-3" fill="#141518" points="45.7698986 4.52264924 41.2959423 4.52264924 41.2959423 0.557686305 54.861666 0.557686305 54.861666 4.52264924 50.358096 4.52264924 50.358096 20.3834959 45.7698986 20.3834959 45.7698986 4.52264924"></polyline>
|
||||
<path d="M72.9036286,7.72356613 C72.9036286,5.88236442 71.6570425,4.29615685 69.7309793,4.29615685 L66.5870074,4.29615685 L66.5870074,11.1499805 L69.7309793,11.1499805 C71.6570425,11.1499805 72.9036286,9.56476785 72.9036286,7.72356613 Z M61.9992197,0.557686305 L70.3267655,0.557686305 C74.7161529,0.557686305 77.548771,3.8718494 77.548771,7.72356613 C77.548771,10.4991221 76.0756925,12.9625634 73.6111978,14.124405 L77.5774483,20.3834959 L72.2528287,20.3834959 L68.739563,14.8883925 L66.5870074,14.8883925 L66.5870074,20.3834959 L61.9992197,20.3834959 L61.9992197,0.557686305 L61.9992197,0.557686305 Z" id="Fill-4" fill="#141518"></path>
|
||||
<g id="Group-9" transform="translate(85.329692, 0.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="Clip-6"></g>
|
||||
<polyline id="Fill-5" fill="#141518" mask="url(#mask-2)" points="4.59656652 4.24008974 4.59656652 8.74260632 12.1018338 8.74260632 12.1018338 12.3403238 4.59656652 12.3403238 4.59656652 16.7010339 12.1018338 16.7010339 12.1018338 20.3834959 0.00819352321 20.3834959 0.00819352321 0.557686305 12.1018338 0.557686305 12.1018338 4.24008974 4.59656652 4.24008974"></polyline>
|
||||
<path d="M35.8653921,10.4705618 C35.8653921,7.21351931 33.6554819,4.18296918 30.0591104,4.18296918 C26.4334764,4.18296918 24.2528287,7.21351931 24.2528287,10.4705618 C24.2528287,13.7276044 26.4334764,16.758213 30.0591104,16.758213 C33.6554819,16.758213 35.8653921,13.7276044 35.8653921,10.4705618 Z M19.5503316,10.4705618 C19.5503316,5.03263753 23.4592275,0.047639485 30.0591104,0.047639485 C36.6291455,0.047639485 40.5380414,5.03263753 40.5380414,10.4705618 C40.5380414,15.9084861 36.6291455,20.8934842 30.0591104,20.8934842 C23.4592275,20.8934842 19.5503316,15.9084861 19.5503316,10.4705618 L19.5503316,10.4705618 Z" id="Fill-7" fill="#141518" mask="url(#mask-2)"></path>
|
||||
<polyline id="Fill-8" fill="#141518" mask="url(#mask-2)" points="60.1100273 13.4726102 60.1100273 0.557686305 64.669723 0.557686305 64.669723 20.3834959 59.8835349 20.3834959 52.7452204 7.63788529 52.7452204 20.3834959 48.1568474 20.3834959 48.1568474 0.557686305 52.9430355 0.557686305 60.1100273 13.4726102"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
614
docs/_javascript/docs.js
Normal file
614
docs/_javascript/docs.js
Normal file
@ -0,0 +1,614 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const tokens = {
|
||||
isFiltering: false,
|
||||
};
|
||||
|
||||
document.addEventListener(
|
||||
'click',
|
||||
function (event) {
|
||||
if (event.target.closest('#categories')) {
|
||||
return (tokens.isFiltering = true);
|
||||
}
|
||||
|
||||
tokens.isFiltering = false;
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Sidebar filter
|
||||
|
||||
const filterCategories = () => {
|
||||
const container = document.getElementById('categories');
|
||||
const noResults = document.getElementById('categoriesNoResults');
|
||||
const noResultsButton = noResults.querySelector('button');
|
||||
|
||||
const input = document.getElementById('categoriesFilter');
|
||||
const allLinks = getAll('#categories .bd-category a');
|
||||
|
||||
const categories = getAll('#categories .bd-category').map((category) => {
|
||||
const links = getAll('a', category).map((link) => {
|
||||
const isHeader = link.classList.contains('bd-category-name');
|
||||
|
||||
return {
|
||||
el: link,
|
||||
isHeader,
|
||||
text: link.dataset.name.toLowerCase(),
|
||||
isMatch: false,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
el: category,
|
||||
name: {
|
||||
el: category.querySelector('.bd-category-name'),
|
||||
},
|
||||
links,
|
||||
hasMatch: false,
|
||||
};
|
||||
});
|
||||
|
||||
const state = {
|
||||
count: 0,
|
||||
hasQuery: false,
|
||||
selectedIndex: -1,
|
||||
selectedEl: null,
|
||||
results: [],
|
||||
};
|
||||
|
||||
const removeFocus = () => {
|
||||
allLinks.forEach((link) => {
|
||||
link.classList.remove('bd-is-focused');
|
||||
});
|
||||
};
|
||||
|
||||
const resetSearch = () => {
|
||||
categories.forEach((category) => {
|
||||
category.hasMatch = false;
|
||||
category.el.classList.remove('bd-has-match');
|
||||
|
||||
category.links.forEach((link) => {
|
||||
link.isMatch = false;
|
||||
link.el.classList.remove('bd-is-match');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const updateUI = () => {
|
||||
categories.forEach((category) => {
|
||||
if (category.hasMatch) {
|
||||
category.el.classList.add('bd-has-match');
|
||||
} else {
|
||||
category.el.classList.remove('bd-has-match');
|
||||
}
|
||||
|
||||
category.links.forEach((link) => {
|
||||
if (link.isMatch) {
|
||||
link.el.classList.add('bd-is-match');
|
||||
} else {
|
||||
link.el.classList.remove('bd-is-match');
|
||||
}
|
||||
|
||||
highlightQuery(link.el, input.value.toLowerCase());
|
||||
});
|
||||
});
|
||||
|
||||
if (state.count > 0) {
|
||||
container.classList.remove('bd-has-no-results');
|
||||
} else {
|
||||
container.classList.add('bd-has-no-results');
|
||||
}
|
||||
|
||||
if (state.hasQuery) {
|
||||
container.classList.add('bd-has-query');
|
||||
} else {
|
||||
container.classList.remove('bd-has-query');
|
||||
}
|
||||
|
||||
removeFocus();
|
||||
|
||||
if (state.selectedIndex > -1 && state.results.length > 0) {
|
||||
container.focus();
|
||||
state.selectedEl = state.results[state.selectedIndex];
|
||||
state.selectedEl.classList.add('bd-is-focused');
|
||||
}
|
||||
};
|
||||
|
||||
const performSearch = () => {
|
||||
const query = input.value.toLowerCase();
|
||||
|
||||
state.count = 0;
|
||||
state.selectedIndex = -1;
|
||||
state.results = [];
|
||||
|
||||
if (query.length > 0) {
|
||||
state.hasQuery = true;
|
||||
|
||||
categories.forEach((category) => {
|
||||
category.hasMatch = false;
|
||||
|
||||
category.links.forEach((link) => {
|
||||
const queryIndex = link.text.indexOf(query);
|
||||
|
||||
if (queryIndex > -1) {
|
||||
link.isMatch = true;
|
||||
category.hasMatch = true;
|
||||
state.count++;
|
||||
|
||||
if (state.results.indexOf(category.name.el) === -1) {
|
||||
state.results.push(category.name.el);
|
||||
}
|
||||
|
||||
if (state.results.indexOf(link.el) === -1) {
|
||||
state.results.push(link.el);
|
||||
}
|
||||
} else {
|
||||
link.isMatch = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
state.hasQuery = false;
|
||||
resetSearch();
|
||||
}
|
||||
|
||||
updateUI();
|
||||
};
|
||||
|
||||
noResultsButton.addEventListener('click', (event) => {
|
||||
input.value = '';
|
||||
input.focus();
|
||||
performSearch();
|
||||
});
|
||||
|
||||
input.addEventListener('focus', (event) => {
|
||||
tokens.isFiltering = true;
|
||||
});
|
||||
|
||||
input.addEventListener('keyup', (event) => {
|
||||
if (!tokens.isFiltering) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowDown' && state.results.length > 0) {
|
||||
input.blur();
|
||||
return;
|
||||
}
|
||||
|
||||
performSearch();
|
||||
});
|
||||
|
||||
window.addEventListener('keydown', (event) => {
|
||||
switch (event.key) {
|
||||
case 'Escape':
|
||||
tokens.isFiltering = false;
|
||||
input.value = '';
|
||||
performSearch();
|
||||
break;
|
||||
}
|
||||
|
||||
if (!tokens.isFiltering) {
|
||||
updateUI();
|
||||
return;
|
||||
}
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
event.preventDefault();
|
||||
|
||||
if (
|
||||
state.selectedIndex === state.results.length - 1 ||
|
||||
state.results.length < 1
|
||||
) {
|
||||
break;
|
||||
}
|
||||
|
||||
state.selectedIndex++;
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
event.preventDefault();
|
||||
|
||||
if (state.selectedIndex === 0) {
|
||||
state.selectedIndex = -1;
|
||||
input.focus();
|
||||
break;
|
||||
}
|
||||
|
||||
state.selectedIndex--;
|
||||
break;
|
||||
case 'Enter':
|
||||
if (state.selectedEl) {
|
||||
window.location.href = state.selectedEl.href;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
updateUI();
|
||||
});
|
||||
};
|
||||
|
||||
filterCategories();
|
||||
|
||||
// Sidebar links
|
||||
|
||||
const setCategoriesToggle = () => {
|
||||
const categories = getAll('#categories .bd-category');
|
||||
|
||||
if (categories.length > 0) {
|
||||
categories.forEach((el) => {
|
||||
const nameEl = el.querySelector('.bd-category-name');
|
||||
|
||||
nameEl.addEventListener('click', (event) => {
|
||||
if (event.metaKey || tokens.isFiltering) {
|
||||
return true;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
el.classList.toggle('is-open');
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
setCategoriesToggle();
|
||||
|
||||
// Docs mobile toggles
|
||||
|
||||
const setDocsToggles = () => {
|
||||
const state = {
|
||||
showNav: false,
|
||||
showSide: false,
|
||||
};
|
||||
const docs = document.getElementById('docs');
|
||||
const overlay = document.getElementById('docsNavOverlay');
|
||||
const nav = document.getElementById('docsNav');
|
||||
const navButton = document.getElementById('docsNavButton');
|
||||
const side = document.getElementById('docsSide');
|
||||
const sideButton = document.getElementById('docsSideButton');
|
||||
|
||||
if (!nav) {
|
||||
return;
|
||||
}
|
||||
|
||||
navButton.addEventListener('click', (event) => {
|
||||
state.showNav = !state.showNav;
|
||||
updateUI();
|
||||
});
|
||||
|
||||
sideButton.addEventListener('click', (event) => {
|
||||
state.showSide = !state.showSide;
|
||||
updateUI();
|
||||
});
|
||||
|
||||
overlay.addEventListener('click', (event) => {
|
||||
state.showNav = false;
|
||||
state.showSide = false;
|
||||
updateUI();
|
||||
});
|
||||
|
||||
const updateUI = () => {
|
||||
if (state.showNav || state.showSide) {
|
||||
docs.classList.add('bd-showing-overlay');
|
||||
toggleClass(nav, state.showNav, 'bd-is-shown');
|
||||
toggleClass(side, state.showSide, 'bd-is-shown');
|
||||
} else {
|
||||
docs.classList.remove('bd-showing-overlay');
|
||||
nav.classList.remove('bd-is-shown');
|
||||
side.classList.remove('bd-is-shown');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
setDocsToggles();
|
||||
|
||||
// Anchors
|
||||
|
||||
const anchors_ref_el = document.getElementById('anchorsReference');
|
||||
const anchors_el = document.getElementById('anchors');
|
||||
const anchor_links_el = getAll('.bd-anchor-link');
|
||||
|
||||
let anchors_by_id = {};
|
||||
let anchors_order = [];
|
||||
let anchor_nav_els = [];
|
||||
|
||||
if (anchors_el && anchor_links_el.length > 0) {
|
||||
anchors_el.classList.remove('bd-is-empty');
|
||||
const anchors_el_list = anchors_el.querySelector('.bd-anchors-list');
|
||||
|
||||
anchor_links_el.forEach((el, index) => {
|
||||
const link_target = el.getAttribute('href');
|
||||
const link_text = el.previousElementSibling.innerText;
|
||||
|
||||
if (link_text != '') {
|
||||
const item_el = createAnchorLink(link_text, link_target);
|
||||
anchors_el_list.appendChild(item_el);
|
||||
|
||||
const anchor_key = link_target.substring(1); // #target -> target
|
||||
anchors_by_id[anchor_key] = {
|
||||
id: anchor_key,
|
||||
index,
|
||||
target: link_target,
|
||||
text: link_text,
|
||||
nav_el: item_el,
|
||||
};
|
||||
anchors_order.push(anchor_key);
|
||||
anchor_nav_els.push(item_el);
|
||||
}
|
||||
});
|
||||
|
||||
const back_to_top_el = createAnchorLink('Back to top', '');
|
||||
back_to_top_el.onclick = scrollToTop;
|
||||
anchors_el_list.appendChild(back_to_top_el);
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
function createAnchorLink(text, target) {
|
||||
const item_el = document.createElement('li');
|
||||
const link_el = document.createElement('a');
|
||||
const text_node = document.createTextNode(text);
|
||||
|
||||
if (target) {
|
||||
link_el.setAttribute('href', target);
|
||||
}
|
||||
|
||||
link_el.appendChild(text_node);
|
||||
item_el.appendChild(link_el);
|
||||
|
||||
return item_el;
|
||||
}
|
||||
|
||||
// Meta links
|
||||
|
||||
const $metalinks = getAll('#meta a');
|
||||
|
||||
if ($metalinks.length > 0) {
|
||||
$metalinks.forEach(($el) => {
|
||||
$el.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
const target = $el.getAttribute('href');
|
||||
const $target = document.getElementById(target.substring(1));
|
||||
$target.scrollIntoView(true);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Docs edge sticky
|
||||
|
||||
const stickiedRef = document.getElementById('docs');
|
||||
const stickied = getAll('.bd-stickied');
|
||||
let isStickied = false;
|
||||
|
||||
function whenScrollingEdges() {
|
||||
if (!stickied || stickied.length < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bounds = stickiedRef.getBoundingClientRect();
|
||||
const fromTop = bounds.top;
|
||||
const shouldSticky = fromTop < 0 || false;
|
||||
|
||||
if (isStickied === shouldSticky) {
|
||||
// Nothing has changed
|
||||
return;
|
||||
}
|
||||
|
||||
isStickied = shouldSticky;
|
||||
|
||||
if (isStickied) {
|
||||
stickied.forEach((st) => {
|
||||
st.classList.add('bd-is-stickied');
|
||||
});
|
||||
} else {
|
||||
stickied.forEach((st) => {
|
||||
st.classList.remove('bd-is-stickied');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Anchors highlight
|
||||
|
||||
let past_anchors = [];
|
||||
anchor_links_el.reverse();
|
||||
const trigger_offset = 24; // In pixels
|
||||
const typo_el = document.getElementById('typo');
|
||||
|
||||
function whenScrollingAnchors() {
|
||||
if (!anchors_ref_el) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bounds = anchors_ref_el.getBoundingClientRect();
|
||||
const anchors_height = anchors_el.clientHeight;
|
||||
const typo_bounds = typo_el.getBoundingClientRect();
|
||||
const typo_height = typo_el.clientHeight;
|
||||
|
||||
if (bounds.top < 1 && typo_bounds.top - anchors_height + typo_height > 0) {
|
||||
anchors_el.classList.add('is-pinned');
|
||||
} else {
|
||||
anchors_el.classList.remove('is-pinned');
|
||||
}
|
||||
|
||||
anchor_links_el.some((el) => {
|
||||
const bounds = el.getBoundingClientRect();
|
||||
const href = el.getAttribute('href');
|
||||
const key = href.substring(1); // #target -> target
|
||||
|
||||
if (bounds.top < 1 + trigger_offset && past_anchors.indexOf(key) == -1) {
|
||||
past_anchors.push(key);
|
||||
highlightAnchor();
|
||||
return;
|
||||
} else if (
|
||||
bounds.top > 0 + trigger_offset &&
|
||||
past_anchors.indexOf(key) != -1
|
||||
) {
|
||||
removeFromArray(past_anchors, key);
|
||||
highlightAnchor();
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function highlightAnchor() {
|
||||
const future_anchors = anchors_order.diff(past_anchors);
|
||||
let highest_index = -1;
|
||||
let highest_anchor_key = '';
|
||||
|
||||
if (past_anchors.length > 0) {
|
||||
past_anchors.forEach((key, index) => {
|
||||
const anchor = anchors_by_id[key];
|
||||
anchor.nav_el.className = 'is-past';
|
||||
|
||||
// Keep track of the bottom most item
|
||||
if (anchor.index > highest_index) {
|
||||
highest_index = anchor.index;
|
||||
highest_anchor_key = key;
|
||||
}
|
||||
});
|
||||
|
||||
if (highest_anchor_key in anchors_by_id) {
|
||||
anchors_by_id[highest_anchor_key].nav_el.className = 'is-current';
|
||||
}
|
||||
}
|
||||
|
||||
if (future_anchors.length > 0) {
|
||||
future_anchors.forEach((key, index) => {
|
||||
const anchor = anchors_by_id[key];
|
||||
anchor.nav_el.className = '';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Spacing table
|
||||
|
||||
const spacingTables = getAll('.bd-spacing-table');
|
||||
|
||||
spacingTables.forEach((spacingEl) => {
|
||||
const spacingRows = getAll('tbody tr', spacingEl);
|
||||
const spacingCells = getAll('tbody td', spacingEl);
|
||||
const spacingValues = getAll('tfoot th', spacingEl);
|
||||
|
||||
spacingEl.addEventListener('mouseleave', () => {
|
||||
resetTable(spacingCells, spacingValues);
|
||||
});
|
||||
|
||||
spacingCells.forEach((el) => {
|
||||
el.addEventListener('mouseenter', () => {
|
||||
resetTable(spacingCells, spacingValues);
|
||||
const row = Array.prototype.indexOf.call(
|
||||
el.parentNode.parentNode.children,
|
||||
el.parentNode
|
||||
);
|
||||
const column = Array.prototype.indexOf.call(el.parentNode.children, el);
|
||||
highlightRowAndColumn(row, column, spacingRows, spacingValues);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function resetTable(cells, values) {
|
||||
cells.forEach((el) =>
|
||||
el.classList.remove('bd-current-row', 'bd-current-column')
|
||||
);
|
||||
values.forEach((el) => el.classList.remove('bd-current-value'));
|
||||
}
|
||||
|
||||
function highlightRowAndColumn(rowIndex, columnIndex, rows, values) {
|
||||
const row = rows[rowIndex];
|
||||
let i = columnIndex;
|
||||
|
||||
while (i > -1) {
|
||||
row.children[i].classList.add('bd-current-row');
|
||||
i--;
|
||||
}
|
||||
|
||||
const nextRows = rows.slice(rowIndex);
|
||||
nextRows.forEach((r) => {
|
||||
r.children[columnIndex].classList.add('bd-current-column');
|
||||
});
|
||||
|
||||
if (columnIndex < 2) {
|
||||
return;
|
||||
}
|
||||
values[columnIndex - 1].classList.add('bd-current-value');
|
||||
}
|
||||
|
||||
// Events
|
||||
|
||||
let ticking = false;
|
||||
let lastY = 0;
|
||||
|
||||
window.addEventListener('scroll', function () {
|
||||
const currentY = window.scrollY;
|
||||
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(function () {
|
||||
whenScrollingAnchors();
|
||||
whenScrollingEdges();
|
||||
ticking = false;
|
||||
lastY = currentY;
|
||||
});
|
||||
}
|
||||
|
||||
ticking = true;
|
||||
});
|
||||
|
||||
// Utils
|
||||
|
||||
function getAll(selector, parent = document) {
|
||||
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
|
||||
}
|
||||
|
||||
function removeFromArray(array, value) {
|
||||
if (array.includes(value)) {
|
||||
const value_index = array.indexOf(value);
|
||||
array.splice(value_index, 1);
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
function toggleClass(el, bool, cn) {
|
||||
if (bool) {
|
||||
return el.classList.add(cn);
|
||||
}
|
||||
|
||||
el.classList.remove(cn);
|
||||
}
|
||||
|
||||
function highlightQuery(el, query) {
|
||||
const text = el.dataset.name;
|
||||
const nameEl = el.querySelector('.bd-name');
|
||||
|
||||
if (!query || query === '') {
|
||||
nameEl.innerHTML = text;
|
||||
return;
|
||||
}
|
||||
|
||||
const lowerText = text.toLowerCase();
|
||||
const queryIndex = lowerText.indexOf(query);
|
||||
|
||||
if (queryIndex >= 0) {
|
||||
const before = text.substring(0, queryIndex);
|
||||
const highlight = `<span class="bd-highlight">${text.substring(
|
||||
queryIndex,
|
||||
queryIndex + query.length
|
||||
)}</span>`;
|
||||
const after = text.substring(queryIndex + query.length);
|
||||
|
||||
nameEl.innerHTML = before + highlight + after;
|
||||
|
||||
return true;
|
||||
} else {
|
||||
nameEl.innerHTML = text;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
Array.prototype.diff = function (a) {
|
||||
return this.filter(function (i) {
|
||||
return a.indexOf(i) < 0;
|
||||
});
|
||||
};
|
||||
});
|
||||
@ -1,135 +1,131 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Search
|
||||
|
||||
const setSearchToggle = () => {
|
||||
const icon = document.getElementById('searchIcon');
|
||||
const search = document.getElementById('search');
|
||||
const input = document.getElementById('algoliaSearch');
|
||||
|
||||
if (!icon) {
|
||||
return;
|
||||
}
|
||||
|
||||
icon.addEventListener('click', (event) => {
|
||||
search.classList.toggle('bd-is-visible');
|
||||
|
||||
if (search.classList.contains('bd-is-visible')) {
|
||||
algoliaSearch.focus();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
return search.classList.remove('bd-is-visible');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
setSearchToggle();
|
||||
|
||||
// Navbar
|
||||
|
||||
const setNavbarVisibility = () => {
|
||||
const navbar = document.getElementById('navbar');
|
||||
|
||||
if (!navbar) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cs = getComputedStyle(navbar);
|
||||
const paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
|
||||
const brand = navbar.querySelector('.navbar-brand');
|
||||
const end = navbar.querySelector('.navbar-end');
|
||||
const search = navbar.querySelector('.bd-search');
|
||||
const original = document.getElementById('navbarStartOriginal');
|
||||
const clone = document.getElementById('navbarStartClone');
|
||||
|
||||
const rest =
|
||||
navbar.clientWidth -
|
||||
paddingX -
|
||||
brand.clientWidth -
|
||||
end.clientWidth -
|
||||
search.clientWidth;
|
||||
|
||||
const space = original.clientWidth;
|
||||
const all = document.querySelectorAll(
|
||||
'#navbarStartClone > .bd-navbar-item'
|
||||
);
|
||||
const base = document.querySelectorAll(
|
||||
'#navbarStartClone > .bd-navbar-item-base'
|
||||
);
|
||||
const more = document.querySelectorAll(
|
||||
'#navbarStartOriginal > .bd-navbar-item-more'
|
||||
);
|
||||
const dropdown = document.querySelectorAll(
|
||||
'#navbarStartOriginal .bd-navbar-dropdown > .navbar-item'
|
||||
);
|
||||
|
||||
let count = 0;
|
||||
let totalWidth = 0;
|
||||
|
||||
const showMore = () => {};
|
||||
|
||||
const hideMore = () => {};
|
||||
|
||||
for (const item of all) {
|
||||
totalWidth += item.offsetWidth;
|
||||
|
||||
if (totalWidth > rest) {
|
||||
break;
|
||||
}
|
||||
|
||||
count++;
|
||||
}
|
||||
|
||||
const howManyMore = Math.max(0, count - base.length);
|
||||
|
||||
if (howManyMore > 0) {
|
||||
for (let i = 0; i < howManyMore; i++) {
|
||||
more[i].classList.add('bd-is-visible');
|
||||
dropdown[i].classList.add('bd-is-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
for (let j = howManyMore; j < more.length; j++) {
|
||||
more[j].classList.remove('bd-is-visible');
|
||||
}
|
||||
|
||||
for (let k = howManyMore; k < dropdown.length; k++) {
|
||||
dropdown[k].classList.remove('bd-is-hidden');
|
||||
}
|
||||
};
|
||||
|
||||
setNavbarVisibility();
|
||||
|
||||
// Cookies
|
||||
|
||||
const cookieBookModalName = 'bulma_closed_book_modal';
|
||||
const cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
|
||||
|
||||
// Sidebar links
|
||||
|
||||
const $categories = getAll('#categories .bd-category');
|
||||
|
||||
if ($categories.length > 0) {
|
||||
$categories.forEach(el => {
|
||||
const toggle_el = el.querySelector('.bd-category-toggle');
|
||||
|
||||
toggle_el.addEventListener('click', event => {
|
||||
// closeCategories(el);
|
||||
el.classList.toggle('is-active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function closeCategories(current_el) {
|
||||
$categories.forEach(el => {
|
||||
if (current_el == el) {
|
||||
return;
|
||||
}
|
||||
el.classList.remove('is-active');
|
||||
});
|
||||
}
|
||||
|
||||
const anchors_ref_el = document.getElementById('anchorsReference');
|
||||
const anchors_el = document.getElementById('anchors');
|
||||
const anchor_links_el = getAll('.bd-anchor-link');
|
||||
|
||||
let anchors_by_id = {};
|
||||
let anchors_order = [];
|
||||
let anchor_nav_els = [];
|
||||
|
||||
if (anchors_el && anchor_links_el.length > 0) {
|
||||
anchors_el.classList.add('is-active');
|
||||
const anchors_el_list = anchors_el.querySelector('.bd-anchors-list');
|
||||
|
||||
anchor_links_el.forEach((el, index) => {
|
||||
const link_target = el.getAttribute('href');
|
||||
const link_text = el.previousElementSibling.innerText;
|
||||
|
||||
if (link_text != '') {
|
||||
const item_el = createAnchorLink(link_text, link_target);
|
||||
anchors_el_list.appendChild(item_el);
|
||||
|
||||
const anchor_key = link_target.substring(1); // #target -> target
|
||||
anchors_by_id[anchor_key] = {
|
||||
id: anchor_key,
|
||||
index,
|
||||
target: link_target,
|
||||
text: link_text,
|
||||
nav_el: item_el,
|
||||
};
|
||||
anchors_order.push(anchor_key);
|
||||
anchor_nav_els.push(item_el);
|
||||
}
|
||||
});
|
||||
|
||||
const back_to_top_el = createAnchorLink('Back to top', '');
|
||||
back_to_top_el.onclick = scrollToTop;
|
||||
anchors_el_list.appendChild(back_to_top_el);
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
function createAnchorLink(text, target) {
|
||||
const item_el = document.createElement('li');
|
||||
const link_el = document.createElement('a');
|
||||
const text_node = document.createTextNode(text);
|
||||
|
||||
if (target) {
|
||||
link_el.setAttribute('href', target);
|
||||
}
|
||||
|
||||
link_el.appendChild(text_node);
|
||||
item_el.appendChild(link_el);
|
||||
|
||||
return item_el;
|
||||
}
|
||||
|
||||
function closeCategories(current_el) {
|
||||
$categories.forEach(el => {
|
||||
if (current_el == el) {
|
||||
return;
|
||||
}
|
||||
el.classList.remove('is-active');
|
||||
});
|
||||
}
|
||||
|
||||
// Meta links
|
||||
|
||||
const $metalinks = getAll('#meta a');
|
||||
|
||||
if ($metalinks.length > 0) {
|
||||
$metalinks.forEach($el => {
|
||||
$el.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
const target = $el.getAttribute('href');
|
||||
const $target = document.getElementById(target.substring(1));
|
||||
$target.scrollIntoView(true);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
|
||||
const $dropdowns = getAll('.dropdown:not(.is-hoverable)');
|
||||
|
||||
if ($dropdowns.length > 0) {
|
||||
$dropdowns.forEach($el => {
|
||||
$el.addEventListener('click', event => {
|
||||
$dropdowns.forEach(($el) => {
|
||||
$el.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
$el.classList.toggle('is-active');
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', event => {
|
||||
document.addEventListener('click', (event) => {
|
||||
closeDropdowns();
|
||||
});
|
||||
}
|
||||
|
||||
function closeDropdowns() {
|
||||
$dropdowns.forEach($el => {
|
||||
$dropdowns.forEach(($el) => {
|
||||
$el.classList.remove('is-active');
|
||||
});
|
||||
}
|
||||
@ -139,7 +135,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const $burgers = getAll('.navbar-burger');
|
||||
|
||||
if ($burgers.length > 0) {
|
||||
$burgers.forEach($el => {
|
||||
$burgers.forEach(($el) => {
|
||||
if (!$el.dataset.target) {
|
||||
return;
|
||||
}
|
||||
@ -158,10 +154,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const rootEl = document.documentElement;
|
||||
const $modals = getAll('.modal');
|
||||
const $modalButtons = getAll('.modal-button');
|
||||
const $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
|
||||
const $modalCloses = getAll(
|
||||
'.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'
|
||||
);
|
||||
|
||||
if ($modalButtons.length > 0) {
|
||||
$modalButtons.forEach($el => {
|
||||
$modalButtons.forEach(($el) => {
|
||||
$el.addEventListener('click', () => {
|
||||
const target = $el.dataset.target;
|
||||
openModal(target);
|
||||
@ -170,7 +168,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
if ($modalCloses.length > 0) {
|
||||
$modalCloses.forEach($el => {
|
||||
$modalCloses.forEach(($el) => {
|
||||
$el.addEventListener('click', () => {
|
||||
closeModals();
|
||||
});
|
||||
@ -185,13 +183,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
function closeModals() {
|
||||
rootEl.classList.remove('is-clipped');
|
||||
$modals.forEach($el => {
|
||||
$modals.forEach(($el) => {
|
||||
$el.classList.remove('is-active');
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', event => {
|
||||
document.addEventListener('keydown', (event) => {
|
||||
const e = event || window.event;
|
||||
|
||||
if (e.keyCode === 27) {
|
||||
closeModals();
|
||||
closeDropdowns();
|
||||
@ -204,20 +203,27 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
let itemsProcessed = 0;
|
||||
|
||||
if ($highlights.length > 0) {
|
||||
$highlights.forEach($el => {
|
||||
const copyEl = '<button class="button is-small bd-copy">Copy</button>';
|
||||
const expandEl = '<button class="button is-small bd-expand">Expand</button>';
|
||||
$highlights.forEach(($el) => {
|
||||
const copyEl = '<button class="button bd-copy">Copy</button>';
|
||||
const expandEl =
|
||||
'<button class="button is-small bd-expand">Expand</button>';
|
||||
$el.insertAdjacentHTML('beforeend', copyEl);
|
||||
|
||||
const $parent = $el.parentNode;
|
||||
|
||||
if ($parent && $parent.classList.contains('bd-is-more')) {
|
||||
const showEl = '<button class="bd-show"><div><span class="icon"><i class="fas fa-code"></i></span> <strong>Show code</strong></div></button>';
|
||||
$el.insertAdjacentHTML('beforeend', showEl);
|
||||
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
|
||||
const showEl =
|
||||
'<button class="button is-small bd-show"><span class="icon"><i class="fas fa-code"></i></span><strong>Show code</strong></button>';
|
||||
$parent.insertAdjacentHTML('afterbegin', showEl);
|
||||
} else if (
|
||||
$el.firstElementChild.scrollHeight > 480 &&
|
||||
$el.firstElementChild.clientHeight <= 480
|
||||
) {
|
||||
$el.insertAdjacentHTML('beforeend', expandEl);
|
||||
}
|
||||
|
||||
itemsProcessed++;
|
||||
|
||||
if (itemsProcessed === $highlights.length) {
|
||||
addHighlightControls();
|
||||
}
|
||||
@ -225,280 +231,67 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
function addHighlightControls() {
|
||||
const $highlightButtons = getAll('.highlight .bd-copy, .highlight .bd-expand');
|
||||
const $highlightButtons = getAll(
|
||||
'.highlight .bd-copy, .highlight .bd-expand'
|
||||
);
|
||||
|
||||
$highlightButtons.forEach($el => {
|
||||
$highlightButtons.forEach(($el) => {
|
||||
$el.addEventListener('mouseenter', () => {
|
||||
$el.parentNode.classList.add('bd-is-hovering');
|
||||
$el.parentNode.parentNode.classList.add('bd-is-hovering');
|
||||
});
|
||||
|
||||
$el.addEventListener('mouseleave', () => {
|
||||
$el.parentNode.classList.remove('bd-is-hovering');
|
||||
$el.parentNode.parentNode.classList.remove('bd-is-hovering');
|
||||
});
|
||||
});
|
||||
|
||||
const $highlightExpands = getAll('.highlight .bd-expand');
|
||||
const $highlightExpands = getAll('.bd-snippet .bd-expand');
|
||||
|
||||
$highlightExpands.forEach($el => {
|
||||
$highlightExpands.forEach(($el) => {
|
||||
$el.addEventListener('click', () => {
|
||||
$el.parentNode.firstElementChild.style.maxHeight = 'none';
|
||||
});
|
||||
});
|
||||
|
||||
const $highlightShows = getAll('.highlight .bd-show');
|
||||
const $highlightShows = getAll('.bd-snippet .bd-show');
|
||||
|
||||
$highlightShows.forEach($el => {
|
||||
$highlightShows.forEach(($el) => {
|
||||
$el.addEventListener('click', () => {
|
||||
$el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
|
||||
const text = $el.querySelector('strong').textContent;
|
||||
const newText = text === 'Show code' ? 'Hide code' : 'Show code';
|
||||
$el.querySelector('strong').textContent = newText;
|
||||
$el.parentNode.classList.toggle('bd-is-more-clipped');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
new Clipboard('.bd-copy', {
|
||||
target: trigger => {
|
||||
target: (trigger) => {
|
||||
return trigger.previousElementSibling.firstElementChild;
|
||||
}
|
||||
},
|
||||
});
|
||||
}, 100);
|
||||
|
||||
// Functions
|
||||
// Events
|
||||
|
||||
let resizeTimer;
|
||||
|
||||
function handleResize() {
|
||||
window.clearTimeout(resizeTimer);
|
||||
|
||||
resizeTimer = window.setTimeout(function () {
|
||||
setNavbarVisibility();
|
||||
}, 10);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// Utils
|
||||
|
||||
function getAll(selector, parent = document) {
|
||||
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
|
||||
}
|
||||
|
||||
// Scrolling
|
||||
|
||||
const html_el = document.documentElement;
|
||||
const navbarEl = document.getElementById('navbar');
|
||||
const navbarBurger = document.getElementById('navbarBurger');
|
||||
const specialShadow = document.getElementById('specialShadow');
|
||||
const NAVBAR_HEIGHT = 52;
|
||||
const THRESHOLD = 160;
|
||||
let horizon = NAVBAR_HEIGHT;
|
||||
let whereYouStoppedScrolling = 0;
|
||||
let scrollFactor = 0;
|
||||
let currentTranslate = 0;
|
||||
|
||||
// Anchors highlight
|
||||
|
||||
let past_anchors = [];
|
||||
anchor_links_el.reverse();
|
||||
const trigger_offset = 24 ; // In pixels
|
||||
const typo_el = document.getElementById('typo');
|
||||
|
||||
function whenScrolling() {
|
||||
if (anchors_ref_el) {
|
||||
const bounds = anchors_ref_el.getBoundingClientRect();
|
||||
const anchors_height = anchors_el.clientHeight;
|
||||
const typo_bounds = typo_el.getBoundingClientRect();
|
||||
const typo_height = typo_el.clientHeight;
|
||||
|
||||
if (bounds.top < 1 && typo_bounds.top - anchors_height + typo_height > 0) {
|
||||
anchors_el.classList.add('is-pinned');
|
||||
} else {
|
||||
anchors_el.classList.remove('is-pinned');
|
||||
}
|
||||
|
||||
anchor_links_el.some(el => {
|
||||
const bounds = el.getBoundingClientRect();
|
||||
const href = el.getAttribute('href');
|
||||
const key = href.substring(1); // #target -> target
|
||||
|
||||
if (bounds.top < 1 + trigger_offset && past_anchors.indexOf(key) == -1) {
|
||||
past_anchors.push(key);
|
||||
highlightAnchor();
|
||||
return;
|
||||
} else if (bounds.top > 0 + trigger_offset && past_anchors.indexOf(key) != -1) {
|
||||
removeFromArray(past_anchors, key);
|
||||
highlightAnchor();
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function highlightAnchor() {
|
||||
const future_anchors = anchors_order.diff(past_anchors);
|
||||
let highest_index = -1;
|
||||
let highest_anchor_key = '';
|
||||
|
||||
if (past_anchors.length > 0) {
|
||||
past_anchors.forEach((key, index) => {
|
||||
const anchor = anchors_by_id[key];
|
||||
anchor.nav_el.className = 'is-past';
|
||||
|
||||
// Keep track of the bottom most item
|
||||
if (anchor.index > highest_index) {
|
||||
highest_index = anchor.index;
|
||||
highest_anchor_key = key;
|
||||
}
|
||||
});
|
||||
|
||||
if (highest_anchor_key in anchors_by_id) {
|
||||
anchors_by_id[highest_anchor_key].nav_el.className = 'is-current';
|
||||
}
|
||||
}
|
||||
|
||||
if (future_anchors.length > 0) {
|
||||
future_anchors.forEach((key, index) => {
|
||||
const anchor = anchors_by_id[key];
|
||||
anchor.nav_el.className = '';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Spacing table
|
||||
|
||||
const spacingTables = getAll('.bd-spacing-table');
|
||||
|
||||
spacingTables.forEach(spacingEl => {
|
||||
const spacingRows = getAll('tbody tr', spacingEl);
|
||||
const spacingCells = getAll('tbody td', spacingEl);
|
||||
const spacingValues = getAll('tfoot th', spacingEl);
|
||||
|
||||
spacingEl.addEventListener('mouseleave', () => {
|
||||
resetTable(spacingCells, spacingValues);
|
||||
});
|
||||
|
||||
spacingCells.forEach(el => {
|
||||
el.addEventListener('mouseenter', () => {
|
||||
resetTable(spacingCells, spacingValues);
|
||||
const row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode);
|
||||
const column = Array.prototype.indexOf.call(el.parentNode.children, el);
|
||||
highlightRowAndColumn(row, column, spacingRows, spacingValues);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function resetTable(cells, values) {
|
||||
cells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
|
||||
values.forEach(el => el.classList.remove('bd-current-value'));
|
||||
}
|
||||
|
||||
function highlightRowAndColumn(rowIndex, columnIndex, rows, values) {
|
||||
const row = rows[rowIndex];
|
||||
let i = columnIndex;
|
||||
|
||||
while (i > -1) {
|
||||
row.children[i].classList.add('bd-current-row');
|
||||
i--;
|
||||
}
|
||||
|
||||
const nextRows = rows.slice(rowIndex);
|
||||
nextRows.forEach(r => {
|
||||
r.children[columnIndex].classList.add('bd-current-column');
|
||||
});
|
||||
|
||||
if (columnIndex < 2) {
|
||||
return;
|
||||
}
|
||||
values[columnIndex - 1].classList.add('bd-current-value');
|
||||
}
|
||||
|
||||
// Scroll
|
||||
|
||||
function upOrDown(lastY, currentY) {
|
||||
if (currentY >= lastY) {
|
||||
return goingDown(currentY);
|
||||
}
|
||||
return goingUp(currentY);
|
||||
}
|
||||
|
||||
function goingDown(currentY) {
|
||||
const trigger = NAVBAR_HEIGHT;
|
||||
whereYouStoppedScrolling = currentY;
|
||||
|
||||
if (currentY > horizon) {
|
||||
horizon = currentY;
|
||||
}
|
||||
|
||||
translateHeader(currentY, false);
|
||||
}
|
||||
|
||||
function goingUp(currentY) {
|
||||
const trigger = 0;
|
||||
|
||||
if (currentY < (whereYouStoppedScrolling - NAVBAR_HEIGHT)) {
|
||||
horizon = currentY + NAVBAR_HEIGHT;
|
||||
}
|
||||
|
||||
translateHeader(currentY, true);
|
||||
}
|
||||
|
||||
function constrainDelta(delta) {
|
||||
return Math.max(0, Math.min(delta, NAVBAR_HEIGHT));
|
||||
}
|
||||
|
||||
function translateHeader(currentY, upwards) {
|
||||
// let topTranslateValue;
|
||||
let translateValue;
|
||||
|
||||
if (upwards && currentTranslate == 0) {
|
||||
translateValue = 0;
|
||||
} else if (currentY <= NAVBAR_HEIGHT) {
|
||||
translateValue = currentY * -1;
|
||||
} else {
|
||||
const delta = constrainDelta(Math.abs(currentY - horizon));
|
||||
translateValue = delta - NAVBAR_HEIGHT;
|
||||
}
|
||||
|
||||
if (translateValue != currentTranslate) {
|
||||
const navbarStyle = `
|
||||
transform: translateY(${translateValue}px);
|
||||
`;
|
||||
currentTranslate = translateValue;
|
||||
navbarEl.setAttribute('style', navbarStyle);
|
||||
}
|
||||
|
||||
if (currentY > THRESHOLD * 2) {
|
||||
scrollFactor = 1;
|
||||
} else if (currentY > THRESHOLD) {
|
||||
scrollFactor = (currentY - THRESHOLD) / THRESHOLD;
|
||||
} else {
|
||||
scrollFactor = 0;
|
||||
}
|
||||
|
||||
const translateFactor = 1 + translateValue / NAVBAR_HEIGHT;
|
||||
|
||||
if (specialShadow) {
|
||||
specialShadow.style.opacity = scrollFactor;
|
||||
specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
|
||||
}
|
||||
}
|
||||
|
||||
let ticking = false;
|
||||
let lastY = 0;
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
const currentY = window.scrollY;
|
||||
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(function() {
|
||||
// upOrDown(lastY, currentY);
|
||||
whenScrolling();
|
||||
ticking = false;
|
||||
lastY = currentY;
|
||||
});
|
||||
}
|
||||
|
||||
ticking = true;
|
||||
});
|
||||
|
||||
// Utils
|
||||
|
||||
function removeFromArray(array, value) {
|
||||
if (array.includes(value)) {
|
||||
const value_index = array.indexOf(value);
|
||||
array.splice(value_index, 1);
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
Array.prototype.diff = function(a) {
|
||||
return this.filter(function(i) {return a.indexOf(i) < 0;});
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
35
docs/_javascript/start.js
Normal file
35
docs/_javascript/start.js
Normal file
@ -0,0 +1,35 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Utils
|
||||
|
||||
const tabs = getAll('.bd-tabs');
|
||||
|
||||
if (tabs && tabs.length > 0) {
|
||||
tabs.forEach((tab) => {
|
||||
const buttons = getAll('.bd-tabs-nav button', tab);
|
||||
const items = getAll('.bd-tabs-item', tab);
|
||||
|
||||
buttons.forEach((button, index) => {
|
||||
button.addEventListener('click', (event) => {
|
||||
showTab(buttons, items, index);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showTab(buttons, items, index) {
|
||||
buttons.forEach((button) => {
|
||||
button.classList.remove('bd-is-active');
|
||||
});
|
||||
|
||||
items.forEach((item) => {
|
||||
item.classList.remove('bd-is-active');
|
||||
});
|
||||
|
||||
buttons[index].classList.add('bd-is-active');
|
||||
items[index].classList.add('bd-is-active');
|
||||
}
|
||||
|
||||
function getAll(selector, parent = document) {
|
||||
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
|
||||
}
|
||||
});
|
||||
@ -7,9 +7,9 @@
|
||||
<body
|
||||
class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}"
|
||||
>
|
||||
<!-- {% include global/notice.html %} -->
|
||||
{% include global/deprecated.html %}
|
||||
{{ content }}
|
||||
{% include global/footer.html %}
|
||||
{% include global/scripts.html %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -8,110 +8,48 @@ route: documentation
|
||||
{% assign current_category = page.doc-tab %}
|
||||
{% assign current_link_id = page.breadcrumb | last %}
|
||||
{% assign current_link = site.data.links.by_id[current_link_id] %}
|
||||
{% assign category_links = site.data.links.categories[current_category] %}
|
||||
|
||||
{% for link_id in category_links %}
|
||||
{% if link_id == current_link_id %}
|
||||
{% unless forloop.first %}
|
||||
{% assign previous_index = forloop.index0 | minus: 1 %}
|
||||
{% assign previous_link_id = category_links[previous_index] %}
|
||||
{% assign previous_link = site.data.links.by_id[previous_link_id] %}
|
||||
{% endunless %}
|
||||
{% assign subtitle = current_link.subtitle %}
|
||||
|
||||
{% unless forloop.last %}
|
||||
{% assign next_index = forloop.index0 | plus: 1 %}
|
||||
{% assign next_link_id = category_links[next_index] %}
|
||||
{% assign next_link = site.data.links.by_id[next_link_id] %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if page.subtitle %}
|
||||
{% assign subtitle = page.subtitle %}
|
||||
{% endif %}
|
||||
|
||||
<main class="bd-main">
|
||||
<div class="bd-side-background"></div>
|
||||
<div class="bd-main-container container">
|
||||
<div class="bd-duo">
|
||||
<div class="bd-lead">
|
||||
{% include components/breadcrumb.html %}
|
||||
<header id="docsToggles" class="bd-docs-toggles">
|
||||
<button class="button is-primary is-light bd-fat-button is-small" id="docsNavButton">Show menu</button>
|
||||
<button class="button is-primary is-light bd-fat-button is-small" id="docsSideButton">Show sidebar</button>
|
||||
</header>
|
||||
|
||||
<header class="bd-header">
|
||||
<div class="bd-header-titles">
|
||||
<h1 class="title">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
<p class="subtitle is-4">
|
||||
{% if page.subtitle %}
|
||||
{{ page.subtitle }}
|
||||
{% else %}
|
||||
{{ current_link.subtitle }}
|
||||
{% endif %}
|
||||
</p>
|
||||
{% if page.meta %}
|
||||
{%
|
||||
include elements/meta.html
|
||||
colors=page.meta.colors
|
||||
sizes=page.meta.sizes
|
||||
variables=page.meta.variables
|
||||
experimental=page.meta.experimental
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="docs" class="bd-docs {% if page.fullwidth %}bd-is-fullwidth{% else %}bd-is-contained{% endif %}">
|
||||
<div id="docsNavOverlay" class="bd-docs-overlay"></div>
|
||||
|
||||
<div class="bd-header-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</header>
|
||||
<nav id="docsNav" class="bd-docs-nav {% if page.fullwidth %}bd-stickied{% endif %}">
|
||||
{% include components/categories.html %}
|
||||
</nav>
|
||||
|
||||
{% if page.hide_tabs %}
|
||||
<hr style="margin: 0 0 3rem;">
|
||||
{% else %}
|
||||
<nav class="bd-tabs">
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
{% for link_id in category_links %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
<li {% if link_id == current_link_id %}class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
{% if link.new %}
|
||||
<span class="ml-2 tag bd-mini-tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<div class="bd-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<nav class="bd-prev-next-bis">
|
||||
{% if previous_link %}
|
||||
<a class="bd-prev-next-bis-previous" href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
|
||||
← {{ previous_link.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if next_link %}
|
||||
<a class="bd-prev-next-bis-next" href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
|
||||
{{ next_link.name }} →
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% include elements/improve-page.html %}
|
||||
<main class="bd-docs-main">
|
||||
{% if page.fullwidth %}
|
||||
{% include components/docs-body.html %}
|
||||
{% else %}
|
||||
<div class="container">
|
||||
{% include components/docs-body.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</main>
|
||||
|
||||
<aside class="bd-side">
|
||||
{% unless page.hide_categories %}
|
||||
{% include components/categories.html %}
|
||||
{% include components/anchors.html %}
|
||||
{% endunless %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<aside id="docsSide" class="bd-docs-side {% if page.fullwidth %}bd-stickied{% endif %}">
|
||||
{% include global/side-sponsor.html %}
|
||||
|
||||
{% if page.meta %}
|
||||
{%
|
||||
include elements/meta.html
|
||||
colors=page.meta.colors
|
||||
sizes=page.meta.sizes
|
||||
variables=page.meta.variables
|
||||
experimental=page.meta.experimental
|
||||
%}
|
||||
{% endif %}
|
||||
|
||||
{% include components/anchors.html %}
|
||||
</aide>
|
||||
</div>
|
||||
|
||||
@ -26,60 +26,18 @@ route: more
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<main class="bd-main">
|
||||
<div class="bd-side-background"></div>
|
||||
<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">
|
||||
{% if page.title %}
|
||||
{{ page.title }}
|
||||
{% else %}
|
||||
{{ current_link.name }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
<p class="subtitle is-4">
|
||||
{% if page.subtitle %}
|
||||
{{ page.subtitle }}
|
||||
{% else %}
|
||||
{{ current_link.subtitle }}
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-header-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</header>
|
||||
{% capture hero_content %}
|
||||
{% include elements/sponsor-button.html %}
|
||||
{% endcapture %}
|
||||
{%
|
||||
include components/hero.html
|
||||
color="sponsor"
|
||||
icon=page.icon
|
||||
title=page.title
|
||||
subtitle=page.subtitle
|
||||
content=page.hero_content
|
||||
%}
|
||||
|
||||
<div class="bd-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<nav class="bd-prev-next-bis">
|
||||
{% if previous_link %}
|
||||
<a class="bd-prev-next-bis-previous" href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
|
||||
← {{ previous_link.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if next_link %}
|
||||
<a class="bd-prev-next-bis-next" href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
|
||||
{{ next_link.name }} →
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% include elements/improve-page.html %}
|
||||
</div>
|
||||
|
||||
<aside class="bd-side">
|
||||
{% include components/more.html %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -8,90 +8,104 @@ breadcrumb:
|
||||
|
||||
{% include global/navbar.html id="Blog" %}
|
||||
|
||||
<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>
|
||||
{% assign title = page.title | markdownify %}
|
||||
{% assign introduction = page.introduction | markdownify %}
|
||||
{% assign m = page.date | date: "%B" %}
|
||||
{% assign d = page.date | date: "%-d" %}
|
||||
{% assign y = page.date | date: "%Y" %}
|
||||
|
||||
{% 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 %}
|
||||
{% capture banner_title %}
|
||||
<a href="{{ site.url }}/blog">
|
||||
The <strong>official</strong> Bulma <strong>blog</strong>
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% if page.next.url %}
|
||||
<a href="{{ site.url }}{{ page.next.url }}">
|
||||
→
|
||||
</a>
|
||||
{% else %}
|
||||
<span>
|
||||
→
|
||||
</span>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% capture banner_more %}
|
||||
{% include elements/rss-button.html %}
|
||||
{% endcapture %}
|
||||
|
||||
<header class="bd-header">
|
||||
<div class="bd-header-titles">
|
||||
<h1 class="title">
|
||||
{{ page.title | markdownify }}
|
||||
</h1>
|
||||
<p class="subtitle is-4">
|
||||
{{ page.date | date_to_string }}
|
||||
</p>
|
||||
</div>
|
||||
{% include
|
||||
elements/banner.html
|
||||
title=banner_title
|
||||
more=banner_more
|
||||
%}
|
||||
|
||||
<div class="bd-header-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="bd-content">
|
||||
<div class="bd-post-container">
|
||||
<div class="bd-post content is-medium">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="bd-prev-next-bis">
|
||||
{% if page.previous.url %}
|
||||
<a class="bd-prev-next-bis-previous" href="{{ page.previous.url }}">
|
||||
← {{ page.previous.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if page.next.url %}
|
||||
<a class="bd-prev-next-bis-next" href="{{ page.next.url }}">
|
||||
{{ page.next.name }} →
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
<header class="bd-single-header">
|
||||
<div class="container is-max-desktop">
|
||||
<div class="bd-single-titles">
|
||||
<h1 class="title">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<div class="subtitle">
|
||||
{{ introduction }}
|
||||
</div>
|
||||
<div class="subtitle is-date">
|
||||
{{ m }}
|
||||
{% case d %}{% when "1" or "21" or "31" %}{{ d }}st{% when "2" or "22" %}{{ d }}nd{% when "3" or "23" %}{{ d }}rd{% else %}{{ d }}th{% endcase %},
|
||||
{{ y }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</header>
|
||||
|
||||
{% if page.image %}
|
||||
<div class="bd-single-image">
|
||||
<div>
|
||||
<figure>
|
||||
<img
|
||||
src="https://source.unsplash.com/{{ page.image }}/800x450"
|
||||
srcset="https://source.unsplash.com/{{ page.image }}/800x450 800w,
|
||||
https://source.unsplash.com/{{ page.image }}/1600x900 1600w,
|
||||
https://source.unsplash.com/{{ page.image }}/3200x1800 3200w
|
||||
"
|
||||
sizes="(max-width: 799px) 100vw, 1600px"
|
||||
alt="{{ page.alt }}"
|
||||
width="1600"
|
||||
height="900"
|
||||
>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="bd-single-hr">
|
||||
<div class="container is-max-desktop">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="bd-single-body">
|
||||
<div class="container is-max-desktop">
|
||||
<div class="bd-single-content content">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-single-hr">
|
||||
<div class="container is-max-desktop">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="bd-pagination">
|
||||
<div class="container is-max-desktop">
|
||||
<div class="bd-pagination-body">
|
||||
{% if page.previous.url %}
|
||||
<a class="button bd-fat-button is-link is-light bd-pagination-previous" href="{{ page.previous.url }}">
|
||||
← {{ page.previous.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if page.next.url %}
|
||||
<a class="button bd-fat-button is-link is-light bd-pagination-next" href="{{ page.next.url }}">
|
||||
{{ page.next.name }} →
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="bd-single-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
|
||||
@ -2,9 +2,12 @@
|
||||
title: "Website redesign: clearer layout, easier navigation, better content, and much more!"
|
||||
layout: post
|
||||
introduction: "A brand new look"
|
||||
color: "star"
|
||||
color: "expo"
|
||||
name: "Website redesign"
|
||||
icon: "star"
|
||||
featured: true
|
||||
image: "9-OCsKoyQlk"
|
||||
alt: "Swimming pool"
|
||||
---
|
||||
|
||||
The Bulma website has been widely redesigned! There's been a lot of work, to say the least:
|
||||
|
||||
@ -2,9 +2,12 @@
|
||||
title: "Light and Dark colors, better look, larger form controls, panel colors, and more"
|
||||
layout: post
|
||||
introduction: "A big update for more colors and flexibility"
|
||||
color: "primary"
|
||||
color: "expo"
|
||||
name: "Light/Dark colors, better look, larger controls"
|
||||
icon: "sun"
|
||||
featured: true
|
||||
image: hgGplX3PFBg
|
||||
alt: "Light and dark clouds"
|
||||
---
|
||||
|
||||
The new version **[Bulma 0.8.0](https://github.com/jgthms/bulma/releases/tag/0.8.0)** is out! 😃 It comes with several bug fixes and a lot of nice new features:
|
||||
|
||||
69
docs/_sass/base/css-vars.scss
Normal file
69
docs/_sass/base/css-vars.scss
Normal file
@ -0,0 +1,69 @@
|
||||
:root {
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
--#{$name}: #{$color};
|
||||
--#{$name}-invert: #{$color-invert};
|
||||
|
||||
@if length($pair) >= 4 {
|
||||
$color-light: nth($pair, 3);
|
||||
$color-dark: nth($pair, 4);
|
||||
--#{$name}-light: #{$color-light};
|
||||
--#{$name}-dark: #{$color-dark};
|
||||
}
|
||||
}
|
||||
|
||||
--bootstrap: #{$bootstrap};
|
||||
--github: #{$github};
|
||||
--twitter: #{$twitter};
|
||||
--patreon: #{$patreon};
|
||||
--patreon-blue: #{$patreon-blue};
|
||||
--fortyfour: #{$fortyfour};
|
||||
--amazon: #{$amazon};
|
||||
--bleeding-green: #{$bleeding-green};
|
||||
--bleeding-red: #{$bleeding-red};
|
||||
--rss: #{$rss};
|
||||
// --search: #{$algolia};
|
||||
// --search-light: #{change-color($algolia, $lightness: 90%)};
|
||||
--search: #{$primary};
|
||||
--search-light: #{$primary-light};
|
||||
--search-dark: #{$primary-dark};
|
||||
|
||||
--html5: #e44d26;
|
||||
--html5-invert: #ebebeb;
|
||||
|
||||
--hl-green: #37e7ac;
|
||||
--hl-cyan: #51fbde;
|
||||
--hl-blue: #00b2ff;
|
||||
--hl-purple: #9a89b4;
|
||||
--hl-lavender: #9b6dff;
|
||||
--hl-pink: #ff5cd3;
|
||||
--hl-rose: #ff6b9d;
|
||||
--hl-orange: #ff9970;
|
||||
--hl-yellow: #fed604;
|
||||
--hl-gray-01: #d9e0e8;
|
||||
--hl-gray-02: #808182;
|
||||
--hl-gray-09: #1f2330;
|
||||
|
||||
--hl-color: var(--hl-orange);
|
||||
--hl-background: var(--hl-gray-09);
|
||||
|
||||
--container-width: calc(100vw - 3rem);
|
||||
--container-width-desktop: #{$desktop - $container-offset};
|
||||
--container-width-widescreen: #{min($widescreen, $container-max-width) -
|
||||
$container-offset};
|
||||
--container-width-fullhd: #{min($fullhd, $container-max-width) -
|
||||
$container-offset};
|
||||
|
||||
@include desktop {
|
||||
--container-width: var(--container-width-desktop);
|
||||
}
|
||||
|
||||
@include widescreen {
|
||||
--container-width: var(--container-width-widescreen);
|
||||
}
|
||||
|
||||
@include fullhd {
|
||||
--container-width: var(--container-width-fullhd);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user