bulma-clean-theme 0.8.1 → 0.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (138) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +37 -0
  3. data/_includes/callouts.html +1 -1
  4. data/_includes/footer.html +1 -1
  5. data/_includes/gallery.html +27 -0
  6. data/_includes/head.html +1 -1
  7. data/_includes/header.html +3 -3
  8. data/_includes/hero.html +1 -1
  9. data/_includes/menubar.html +2 -2
  10. data/_includes/showcase.html +1 -1
  11. data/_includes/tabs.html +1 -1
  12. data/_layouts/default.html +1 -0
  13. data/_layouts/product-category.html +1 -1
  14. data/node_modules/bulma-block-list/docs/Gemfile +3 -0
  15. data/node_modules/bulma-block-list/docs/_config.yml +15 -0
  16. data/node_modules/bulma-block-list/docs/_data/menu.yaml +20 -0
  17. data/node_modules/bulma-block-list/docs/_sass/_block-list.scss +92 -0
  18. data/node_modules/bulma-block-list/docs/_sass/_main.scss +20 -0
  19. data/node_modules/bulma-block-list/docs/assets/css/app.scss +7 -0
  20. data/node_modules/bulma-block-list/docs/favicon.ico +0 -0
  21. data/node_modules/bulma-block-list/docs/index.html +249 -261
  22. data/node_modules/bulma-block-list/node_modules/bulma/CHANGELOG.md +1390 -0
  23. data/node_modules/bulma-block-list/node_modules/bulma/LICENSE +21 -0
  24. data/node_modules/bulma-block-list/node_modules/bulma/README.md +130 -0
  25. data/node_modules/bulma-block-list/node_modules/bulma/bulma.sass +9 -0
  26. data/node_modules/bulma-block-list/node_modules/bulma/css/bulma.css +10855 -0
  27. data/node_modules/bulma-block-list/node_modules/bulma/css/bulma.css.map +1 -0
  28. data/node_modules/bulma-block-list/node_modules/bulma/css/bulma.min.css +1 -0
  29. data/node_modules/bulma-block-list/node_modules/bulma/package.json +77 -0
  30. data/node_modules/bulma-block-list/node_modules/bulma/sass/base/_all.sass +5 -0
  31. data/node_modules/bulma-block-list/node_modules/bulma/sass/base/generic.sass +142 -0
  32. data/node_modules/bulma-block-list/node_modules/bulma/sass/base/helpers.sass +281 -0
  33. data/node_modules/bulma-block-list/node_modules/bulma/sass/base/minireset.sass +79 -0
  34. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/_all.sass +15 -0
  35. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/breadcrumb.sass +75 -0
  36. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/card.sass +79 -0
  37. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/dropdown.sass +81 -0
  38. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/level.sass +77 -0
  39. data/node_modules/{bulma → bulma-block-list/node_modules/bulma}/sass/components/list.sass +0 -0
  40. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/media.sass +50 -0
  41. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/menu.sass +57 -0
  42. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/message.sass +99 -0
  43. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/modal.sass +113 -0
  44. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/navbar.sass +441 -0
  45. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/pagination.sass +150 -0
  46. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/panel.sass +119 -0
  47. data/node_modules/bulma-block-list/node_modules/bulma/sass/components/tabs.sass +151 -0
  48. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/_all.sass +15 -0
  49. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/box.sass +24 -0
  50. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/button.sass +323 -0
  51. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/container.sass +24 -0
  52. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/content.sass +155 -0
  53. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/form.sass +1 -0
  54. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/icon.sass +21 -0
  55. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/image.sass +71 -0
  56. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/notification.sass +43 -0
  57. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/other.sass +39 -0
  58. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/progress.sass +67 -0
  59. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/table.sass +127 -0
  60. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/tag.sass +128 -0
  61. data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/title.sass +70 -0
  62. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/_all.sass +8 -0
  63. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/checkbox-radio.sass +21 -0
  64. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/file.sass +180 -0
  65. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/input-textarea.sass +64 -0
  66. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/select.sass +85 -0
  67. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/shared.sass +55 -0
  68. data/node_modules/bulma-block-list/node_modules/bulma/sass/form/tools.sass +205 -0
  69. data/node_modules/bulma-block-list/node_modules/bulma/sass/grid/_all.sass +4 -0
  70. data/node_modules/bulma-block-list/node_modules/bulma/sass/grid/columns.sass +504 -0
  71. data/node_modules/bulma-block-list/node_modules/bulma/sass/grid/tiles.sass +34 -0
  72. data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/_all.sass +5 -0
  73. data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/footer.sass +9 -0
  74. data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/hero.sass +145 -0
  75. data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/section.sass +13 -0
  76. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/_all.sass +8 -0
  77. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/animations.sass +5 -0
  78. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/controls.sass +50 -0
  79. data/node_modules/{bulma → bulma-block-list/node_modules/bulma}/sass/utilities/derived-variables.sass +0 -0
  80. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/functions.sass +110 -0
  81. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/initial-variables.sass +77 -0
  82. data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/mixins.sass +261 -0
  83. data/node_modules/bulma-block-list/package.json +10 -10
  84. data/node_modules/bulma-block-list/src/block-list.scss +24 -1
  85. data/node_modules/bulma/CHANGELOG.md +69 -0
  86. data/node_modules/bulma/README.md +1 -1
  87. data/node_modules/bulma/bulma.sass +2 -1
  88. data/node_modules/bulma/css/bulma-rtl.css +11331 -0
  89. data/node_modules/bulma/css/bulma-rtl.css.map +1 -0
  90. data/node_modules/bulma/css/bulma-rtl.min.css +1 -0
  91. data/node_modules/bulma/css/bulma.css +6935 -6459
  92. data/node_modules/bulma/css/bulma.css.map +1 -1
  93. data/node_modules/bulma/css/bulma.min.css +1 -1
  94. data/node_modules/bulma/package.json +22 -20
  95. data/node_modules/bulma/sass/base/_all.sass +0 -1
  96. data/node_modules/bulma/sass/base/generic.sass +1 -1
  97. data/node_modules/bulma/sass/base/helpers.sass +1 -281
  98. data/node_modules/bulma/sass/base/minireset.sass +1 -1
  99. data/node_modules/bulma/sass/components/_all.sass +0 -1
  100. data/node_modules/bulma/sass/components/breadcrumb.sass +3 -3
  101. data/node_modules/bulma/sass/components/card.sass +1 -1
  102. data/node_modules/bulma/sass/components/dropdown.sass +3 -3
  103. data/node_modules/bulma/sass/components/level.sass +2 -2
  104. data/node_modules/bulma/sass/components/media.sass +10 -8
  105. data/node_modules/bulma/sass/components/menu.sass +2 -2
  106. data/node_modules/bulma/sass/components/message.sass +1 -1
  107. data/node_modules/bulma/sass/components/modal.sass +2 -2
  108. data/node_modules/bulma/sass/components/navbar.sass +9 -9
  109. data/node_modules/bulma/sass/components/panel.sass +2 -2
  110. data/node_modules/bulma/sass/components/tabs.sass +35 -12
  111. data/node_modules/bulma/sass/elements/button.sass +7 -7
  112. data/node_modules/bulma/sass/elements/content.sass +5 -5
  113. data/node_modules/bulma/sass/elements/notification.sass +7 -2
  114. data/node_modules/bulma/sass/elements/table.sass +3 -1
  115. data/node_modules/bulma/sass/elements/tag.sass +24 -16
  116. data/node_modules/bulma/sass/form/checkbox-radio.sass +1 -1
  117. data/node_modules/bulma/sass/form/file.sass +2 -2
  118. data/node_modules/bulma/sass/form/select.sass +4 -4
  119. data/node_modules/bulma/sass/form/tools.sass +18 -10
  120. data/node_modules/bulma/sass/helpers/_all.sass +10 -0
  121. data/node_modules/bulma/sass/helpers/color.sass +37 -0
  122. data/node_modules/bulma/sass/helpers/float.sass +8 -0
  123. data/node_modules/bulma/sass/helpers/other.sass +8 -0
  124. data/node_modules/bulma/sass/helpers/overflow.sass +2 -0
  125. data/node_modules/bulma/sass/helpers/position.sass +5 -0
  126. data/node_modules/bulma/sass/helpers/spacing.sass +28 -0
  127. data/node_modules/bulma/sass/helpers/typography.sass +98 -0
  128. data/node_modules/bulma/sass/helpers/visibility.sass +122 -0
  129. data/node_modules/bulma/sass/layout/hero.sass +1 -1
  130. data/node_modules/bulma/sass/utilities/_all.sass +1 -1
  131. data/node_modules/bulma/sass/utilities/derived-variables.scss +132 -0
  132. data/node_modules/bulma/sass/utilities/functions.sass +5 -0
  133. data/node_modules/bulma/sass/utilities/initial-variables.sass +1 -0
  134. data/node_modules/bulma/sass/utilities/mixins.sass +24 -0
  135. data/package-lock.json +13 -6
  136. data/package.json +2 -2
  137. metadata +84 -5
  138. data/node_modules/bulma-block-list/docs/demo.css +0 -7241
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 365edf96f993fdb04ab7a6a17438e902546e21b7
4
- data.tar.gz: 88e83adb658f7cda5708136893e8b0f98f3fc004
3
+ metadata.gz: eb9a89330083bcaefc952d6d10120eb130aecfdf
4
+ data.tar.gz: 77fdd31d4dcc2e3927fe3952cce533047a195781
5
5
  SHA512:
6
- metadata.gz: 5bad6e57b63ca40367551dba6f41a881db24871bb643dd61de2a9df24f26585adb40c9635356ba65576219b4bb9645ee4fcd2f147b9aeebd67514ec94edb6d6a
7
- data.tar.gz: 3242a63eca3d967ab9902e3f74de37660044a26c4ff56dab6bdf1a2011f68fcb9c51032c11acd69f720939a6c50a9b1eddbedb978152eb3068226c9754aa41a8
6
+ metadata.gz: 0dea8b7b9bca58b49deb78d8d1cc8741114783db7cd014a3f30b3cc68a31a6837bd13b652702ac4727ca2d66b8b7d7cd527417f32aa1a4769bc7a62de9afdff9
7
+ data.tar.gz: d095475d04419ab8e173277eb8fa179b6f121240089d5bf383bab82c8fde17e9fa35f2b4a317164005119822a7237b7ba4391316b75a6ed2c4d213f7e352dcef
data/README.md CHANGED
@@ -26,6 +26,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
26
26
  * [Favicon](#favicon)
27
27
  * [Showcases](#showcases)
28
28
  * [Sponsors](#sponsors)
29
+ * [Gallery](#gallery)
29
30
  * [Disqus](#disqus)
30
31
  * [Contributing](#contributing)
31
32
  * [Development](#development)
@@ -516,6 +517,42 @@ title: My Sponsors Page
516
517
  sponsors: my_sponsors
517
518
  ```
518
519
 
520
+ ### Gallery
521
+
522
+ Display a simple image gallery on a page, with image descriptions.
523
+
524
+ #### Create an image gallery data file
525
+
526
+ Start by creating a gallery data file using the below format, for example `my_gallery.yml`.
527
+
528
+ ```yaml
529
+ - title: Image Gallery Title
530
+ images:
531
+ - link: https://via.placeholder.com/800x450
532
+ alt: The alt text for the image
533
+ description: |-
534
+ The image description can be written in **markdown** if required
535
+ ratio: is-16by9
536
+ - link: https://via.placeholder.com/800x600
537
+ alt: The alt text for the image
538
+ description: The image description
539
+ ratio: is-4by3
540
+ ```
541
+
542
+ * If a ratio is not provided it will default to 16 by 9. Use [Bulma image](https://bulma.io/documentation/elements/image/) classes to define the image ratio required.
543
+ * The description can be plain text or it can be markdown if required.
544
+ * The alt will be used as the images alt text.
545
+
546
+ #### Displaying the gallery
547
+
548
+ In your pages front matter add a gallery with the datafiles filename without the extension.
549
+
550
+ ```yaml
551
+ layout: page
552
+ title: My Image Gallery
553
+ gallery: my_gallery
554
+ ```
555
+
519
556
  ### Disqus
520
557
 
521
558
  Disqus comments are available for posts. To be able to use them, you need to set your disqus shortname in `_config.yml`. Then you need to set your Jekyll environment to production:
@@ -25,7 +25,7 @@
25
25
  {% endif %}
26
26
 
27
27
  {% if callout.call_to_action_name %}
28
- <a href="{{ callout.call_to_action_link | absolute_url }}" class="button is-primary">
28
+ <a href="{{ callout.call_to_action_link | relative_url }}" class="button is-primary">
29
29
  {{ callout.call_to_action_name }}
30
30
  </a>
31
31
  {% endif %}
@@ -6,7 +6,7 @@
6
6
  {% for item in site.data[site.footer_menu] %}
7
7
  <div class="column has-text-centered">
8
8
  <div>
9
- <a href="{{ item.link | absolute_url }}" class="link">{{ item.name }}</a>
9
+ <a href="{{ item.link | relative_url }}" class="link">{{ item.name }}</a>
10
10
  </div>
11
11
  </div>
12
12
  {% endfor %}
@@ -0,0 +1,27 @@
1
+ {% if page.gallery %}
2
+ {% assign galleries=site.data.[page.gallery] %}
3
+ {% for gallery in galleries %}
4
+ <div class="columns is-multiline">
5
+ <div class="column is-12">
6
+ <p class="title is-3 has-text-centered">{{ gallery.title }}</p>
7
+ </div>
8
+ {% for image in gallery.images %}
9
+ <div class="column is-4-desktop is-6-tablet">
10
+ <div class="card">
11
+ <div class="card-image">
12
+ <figure class="image {{ image.ratio | default: is-16by9 }}">
13
+ <img src="{{ image.link | absolute_url }}" alt="{{ image.alt }}">
14
+ </figure>
15
+ </div>
16
+ <div class="card-content">
17
+ <div class="content">
18
+ {{ image.description | markdownify }}
19
+ </div>
20
+
21
+ </div>
22
+ </div>
23
+ </div>
24
+ {% endfor %}
25
+ </div>
26
+ {% endfor %}
27
+ {% endif %}
@@ -4,7 +4,7 @@
4
4
  <title>{{ page.title }} - {{ site.title }}</title>
5
5
  <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/app.css">
6
6
  <link rel="shortcut icon" type="image/png"
7
- {% if site.favicon %} href="{{ site.favicon | absolute_url }}" {% else %} href="{{ site.baseurl }}/favicon.png" {% endif %}
7
+ {% if site.favicon %} href="{{ site.favicon | relative_url }}" {% else %} href="{{ site.baseurl }}/favicon.png" {% endif %}
8
8
  />
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">
10
10
  {% unless site.hide_share_buttons %}
@@ -18,15 +18,15 @@
18
18
  {% for item in site.data.navigation %}
19
19
  {% if item.dropdown %}
20
20
  <div class="navbar-item has-dropdown is-hoverable">
21
- <a href="{{ item.link | absolute_url }}" class="navbar-link {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
21
+ <a href="{{ item.link | relative_url }}" class="navbar-link {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
22
22
  <div class="navbar-dropdown">
23
23
  {% for subitem in item.dropdown %}
24
- <a href="{{ subitem.link | absolute_url }}" class="navbar-item {% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a>
24
+ <a href="{{ subitem.link | relative_url }}" class="navbar-item {% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a>
25
25
  {% endfor %}
26
26
  </div>
27
27
  </div>
28
28
  {% else %}
29
- <a href="{{ item.link | absolute_url }}" class="navbar-item {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
29
+ <a href="{{ item.link | relative_url }}" class="navbar-item {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
30
30
  {% endif %}
31
31
  {% endfor %}
32
32
  {% endif %}
@@ -4,7 +4,7 @@
4
4
  <h1 class="title is-2">{{ page.title }}</h1>
5
5
  <p class="subtitle is-3">{{ page.subtitle }}</p>
6
6
  {% if page.hero_link %}
7
- <a href="{{ page.hero_link | absolute_url }}" class="button is-info is-large">{{ page.hero_link_text }}</a>
7
+ <a href="{{ page.hero_link | relative_url }}" class="button is-info is-large">{{ page.hero_link_text }}</a>
8
8
  {% endif %}
9
9
  </div>
10
10
  </div>
@@ -6,11 +6,11 @@
6
6
  <ul class="menu-list">
7
7
  {% for item in menu.items %}
8
8
  <li>
9
- <a href="{{ item.link | absolute_url }}" class="{% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
9
+ <a href="{{ item.link | relative_url }}" class="{% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
10
10
  {% if item.items %}
11
11
  <ul>
12
12
  {% for subitem in item.items %}
13
- <li><a href="{{ subitem.link | absolute_url }}" class="{% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a></li>
13
+ <li><a href="{{ subitem.link | relative_url }}" class="{% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a></li>
14
14
  {% endfor %}
15
15
  </ul>
16
16
  {% endif %}
@@ -8,7 +8,7 @@
8
8
  {% for item in showcase.items %}
9
9
  <section class="showcase">
10
10
  <figure class="image {% if item.image_ratio %} {{ item.image_ratio }} {% else %} is-16by9 {% endif %}">
11
- <img src="{{ item.image | absolute_url }}" />
11
+ <img src="{{ item.image | relative_url }}" />
12
12
  </figure>
13
13
  <div class="showcase-content">
14
14
  <div class="columns is-centered">
@@ -5,7 +5,7 @@
5
5
  <ul>
6
6
  {% for tab in tabs.items %}
7
7
  <li {% if tab.link == page.url %} class="is-active" {% endif %}>
8
- <a href="{{ tab.link | absolute_url }}">
8
+ <a href="{{ tab.link | relative_url }}">
9
9
  {% if tab.icon %}
10
10
  <span class="icon is-small"><i class="fas {{ tab.icon }}" aria-hidden="true"></i></span>
11
11
  {% endif %}
@@ -26,6 +26,7 @@
26
26
  {% include tabs.html %}
27
27
  {% include showcase.html %}
28
28
  {% include sponsors.html %}
29
+ {% include gallery.html %}
29
30
  {{ content }}
30
31
  </div>
31
32
  {% if site.posts and page.show_sidebar %}
@@ -14,7 +14,7 @@ show_sidebar: false
14
14
  {% for product in sorted_products %}
15
15
  <div class="column is-4-desktop is-6-tablet">
16
16
 
17
- <a href="{{ product.url | absolute_url }}">
17
+ <a href="{{ product.url | relative_url }}">
18
18
 
19
19
  <div class="card">
20
20
 
@@ -0,0 +1,3 @@
1
+ source 'https://rubygems.org'
2
+ gem "bulma-clean-theme", '0.8'
3
+ gem 'github-pages', group: :jekyll_plugins
@@ -0,0 +1,15 @@
1
+ title: Bulma Block List
2
+ description: >- # this means to ignore newlines until "baseurl:"
3
+ Bulma Block List is a simple scss package extending Bulma with block style list elements
4
+ baseurl: "/bulma-block-list"
5
+ url: "https://www.csrhymes.com"
6
+ gh_sponsor: chrisrhymes
7
+ favicon: /favicon.ico
8
+ google_analytics: UA-49024852-2
9
+ remote_theme: chrisrhymes/bulma-clean-theme
10
+
11
+ # Build settings
12
+ markdown: kramdown
13
+ plugins:
14
+ - jekyll-feed
15
+ - github-pages
@@ -0,0 +1,20 @@
1
+ - label: Docs
2
+ items:
3
+ - name: How To Use
4
+ link: '/#how-to-use'
5
+ - name: Alignment
6
+ link: '/#alignment'
7
+ - name: Sizes
8
+ link: '/#sizes'
9
+ - name: Colours
10
+ link: '/#colours'
11
+ - name: Outlined
12
+ link: '/#outlined'
13
+ - name: Has Radius
14
+ link: '/#has-radius'
15
+ - name: Is Highlighted
16
+ link: '/#highlighted'
17
+ - name: List Item Overrides
18
+ link: '/#list-item-overrides'
19
+ - name: Combinations
20
+ link: '/#combinations'
@@ -0,0 +1,92 @@
1
+ @charset "utf-8";
2
+
3
+ $block-list-separator: 0.25rem !default;
4
+ $block-list-highlight-width: 5px !default;
5
+
6
+ .content {
7
+ ul.block-list {
8
+ list-style: none;
9
+ margin-left: 0;
10
+ }
11
+ }
12
+
13
+ .block-list {
14
+ list-style: none;
15
+
16
+ li {
17
+ padding: ($gap / 2);
18
+ background: $light;
19
+ margin-bottom: $block-list-separator;
20
+ }
21
+
22
+ li.is-left,
23
+ &.is-left > li {
24
+ text-align: left;
25
+ }
26
+
27
+
28
+ li.is-centered,
29
+ &.is-centered > li {
30
+ text-align: center;
31
+ }
32
+
33
+ li.is-right,
34
+ &.is-right > li {
35
+ text-align: right;
36
+ }
37
+
38
+ li.is-small,
39
+ &.is-small > li {
40
+ font-size: $small-font-size;
41
+ padding: ($gap / 3);
42
+ }
43
+
44
+ li.is-normal,
45
+ &.is-normal > li {
46
+ font-size: $body-font-size;
47
+ }
48
+
49
+ li.is-large,
50
+ &.is-large > li {
51
+ font-size: $size-large;
52
+ }
53
+
54
+ li.has-radius,
55
+ &.has-radius > li {
56
+ border-radius: $radius;
57
+ }
58
+
59
+ li.is-highlighted,
60
+ &.is-highlighted > li {
61
+ border-left: $block-list-highlight-width $dark solid;
62
+ }
63
+
64
+ @each $name, $pair in $colors {
65
+
66
+ $color: nth($pair, 1);
67
+ $color-invert: nth($pair, 2);
68
+
69
+ li.is-#{$name},
70
+ &.is-#{$name} > li {
71
+ background: $color;
72
+ color: $color-invert;
73
+ }
74
+
75
+ &.is-#{$name} {
76
+ li.is-outlined,
77
+ &.is-outlined > li {
78
+ background: transparent;
79
+ color: $color;
80
+ border: 1px solid $color;
81
+ }
82
+
83
+ li.is-highlighted,
84
+ &.is-highlighted > li {
85
+ background: transparent;
86
+ color: $color;
87
+ border: 1px solid $color;
88
+ border-left: $block-list-highlight-width $color solid;
89
+ }
90
+ }
91
+ }
92
+ }
@@ -0,0 +1,20 @@
1
+ @charset "utf-8";
2
+ @import url('https://fonts.googleapis.com/css?family=Montserrat');
3
+
4
+ $family-sans-serif: 'Montserrat', sans-serif;
5
+ $primary: #188eac !default;
6
+
7
+ $tabs-link-active-color: $primary;
8
+ $tabs-link-active-border-bottom-color: $primary;
9
+
10
+ @import "../node_modules/bulma/bulma.sass";
11
+ $hero-darken: $dark !default;
12
+
13
+ @import "layout";
14
+ @import "syntax";
15
+ @import "showcase";
16
+ @import "block-list.scss";
17
+
18
+ .gh-sponsor {
19
+ color: #ea4aaa;
20
+ }
@@ -0,0 +1,7 @@
1
+ ---
2
+ ---
3
+
4
+ $primary: hsl(171, 100%, 41%);
5
+
6
+ // Import Main CSS file from theme
7
+ @import "main";
@@ -1,272 +1,260 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <title>Bulma Block List</title>
8
- <meta name="description" content="A simple scss package extending Bulma with block style list elements">
9
- <link rel="stylesheet" href="demo.css">
10
- <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-49024852-2"></script>
11
- <script>
12
- window['ga-disable-UA-49024852-2'] = window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1";
13
- window.dataLayer = window.dataLayer || [];
14
- function gtag(){dataLayer.push(arguments);}
15
- gtag('js', new Date());
16
- gtag('config', 'UA-49024852-2');
17
- </script>
18
- </head>
19
- <body>
20
- <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
21
- <div class="container">
22
- <div class="navbar-brand">
23
- <a class="navbar-item" href="https://www.csrhymes.com">
24
- C.S. Rhymes
25
- </a>
26
-
27
- <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
28
- <span aria-hidden="true"></span>
29
- <span aria-hidden="true"></span>
30
- <span aria-hidden="true"></span>
31
- </a>
32
- </div>
33
- </div>
34
- </nav>
35
- <section class="section">
36
- <div class="container">
1
+ ---
2
+ title: Bulma Block List
3
+ subtitle: Docs
4
+ layout: page
5
+ menubar: menu
6
+ hero_height: is-medium
7
+ ---
37
8
 
38
- <div class="columns is-multiline">
39
- <div class="column is-6">
40
- <p class="title">Bulma Block List</p>
41
- </div>
42
- <div class="column is-6 has-text-right">
43
- <a href="https://github.com/chrisrhymes/bulma-block-list/stargazers">
44
- <img src="https://img.shields.io/github/stars/chrisrhymes/bulma-block-list?style=social" alt="GitHub Stars" />
45
- </a>
46
- <a href="https://github.com/chrisrhymes/bulma-block-list/network/members">
47
- <img alt="GitHub forks" src="https://img.shields.io/github/forks/chrisrhymes/bulma-block-list?label=fork&style=social">
48
- </a>
49
- <img alt="npm" src="https://img.shields.io/npm/dw/bulma-block-list">
50
- </div>
51
- <div class="column is-12">
52
- <div class="content">
53
- <h2>How to use</h2>
54
- <p>View the <a href="https://github.com/chrisrhymes/bulma-block-list">Bulma Block List repo on GitHub</a> and follow the instructions.</p>
55
- <p>Create a ul and give it the class 'block-list' then use the modifyers to style as needed. Only some of the colours are displayed below but the scss loops through the entire Bulma $colors map.</p>
56
- </div>
9
+ <div class="columns is-multiline">
10
+ <div class="column is-12 has-text-right">
11
+ <a href="https://github.com/chrisrhymes/bulma-block-list/stargazers">
12
+ <img src="https://img.shields.io/github/stars/chrisrhymes/bulma-block-list?style=social" alt="GitHub Stars" />
13
+ </a>
14
+ <a href="https://github.com/chrisrhymes/bulma-block-list/network/members">
15
+ <img alt="GitHub forks" src="https://img.shields.io/github/forks/chrisrhymes/bulma-block-list?label=fork&style=social">
16
+ </a>
17
+ <img alt="npm" src="https://img.shields.io/npm/dw/bulma-block-list">
18
+ </div>
19
+ <div class="column is-12">
20
+ <div class="content">
21
+ <h2 id="how-to-use">How to use</h2>
22
+ <p>View the <a href="https://github.com/chrisrhymes/bulma-block-list">Bulma Block List repo on GitHub</a> and follow the instructions.</p>
23
+ <p>Create a ul and give it the class 'block-list' then use the modifyers to style as needed. Only some of the colours are displayed below but the scss loops through the entire Bulma $colors map.</p>
24
+ </div>
57
25
  <div class="highlight highlight-text-html-basic">
58
26
  <pre>
59
27
  &lt;<span class="pl-ent">ul</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>block-list is-small is-outlined is-success is-centered<span class="pl-pds">"</span></span>&gt;
60
- &lt;<span class="pl-ent">li</span>&gt;Item one&lt;/<span class="pl-ent">li</span>&gt;
61
- &lt;<span class="pl-ent">li</span>&gt;Item two&lt;/<span class="pl-ent">li</span>&gt;
62
- &lt;<span class="pl-ent">li</span>&gt;Item three&lt;/<span class="pl-ent">li</span>&gt;
28
+ &lt;<span class="pl-ent">li</span>&gt;Item one&lt;/<span class="pl-ent">li</span>&gt;
29
+ &lt;<span class="pl-ent">li</span>&gt;Item two&lt;/<span class="pl-ent">li</span>&gt;
30
+ &lt;<span class="pl-ent">li</span>&gt;Item three&lt;/<span class="pl-ent">li</span>&gt;
63
31
  &lt;/<span class="pl-ent">ul</span>&gt;</pre>
64
32
  </div>
65
- </div>
66
- <div class="column is-12">
67
- <p class="title is-4">Alignment</p>
68
- </div>
69
- <div class="column is-4">
70
- <p class="title is-5">is-left (default)</p>
71
- <ul class="block-list is-left">
72
- <li>Item one</li>
73
- <li>Item two</li>
74
- <li>Item three</li>
75
- </ul>
76
- </div>
77
- <div class="column is-4">
78
- <p class="title is-5">is-centered</p>
79
- <ul class="block-list is-centered">
80
- <li>Item one</li>
81
- <li>Item two</li>
82
- <li>Item three</li>
83
- </ul>
84
- </div>
85
- <div class="column is-4">
86
- <p class="title is-5">is-right</p>
87
- <ul class="block-list is-right">
88
- <li>Item one</li>
89
- <li>Item two</li>
90
- <li>Item three</li>
91
- </ul>
92
- </div>
33
+ </div>
34
+ <div class="column is-12">
35
+ <p class="title is-4" id="alignment">Alignment</p>
36
+ </div>
37
+ <div class="column is-4">
38
+ <p class="title is-5">is-left (default)</p>
39
+ <ul class="block-list is-left">
40
+ <li>Item one</li>
41
+ <li>Item two</li>
42
+ <li>Item three</li>
43
+ </ul>
44
+ </div>
45
+ <div class="column is-4">
46
+ <p class="title is-5">is-centered</p>
47
+ <ul class="block-list is-centered">
48
+ <li>Item one</li>
49
+ <li>Item two</li>
50
+ <li>Item three</li>
51
+ </ul>
52
+ </div>
53
+ <div class="column is-4">
54
+ <p class="title is-5">is-right</p>
55
+ <ul class="block-list is-right">
56
+ <li>Item one</li>
57
+ <li>Item two</li>
58
+ <li>Item three</li>
59
+ </ul>
60
+ </div>
93
61
 
94
- <div class="column is-12">
95
- <p class="title is-4">Sizes</p>
96
- </div>
97
- <div class="column is-4">
98
- <p class="title is-5">is-small</p>
99
- <ul class="block-list is-small">
100
- <li>Item one</li>
101
- <li>Item two</li>
102
- <li>Item three</li>
103
- </ul>
104
- </div>
105
- <div class="column is-4">
106
- <p class="title is-5">is-normal</p>
107
- <ul class="block-list is-normal">
108
- <li>Item one</li>
109
- <li>Item two</li>
110
- <li>Item three</li>
111
- </ul>
112
- </div>
113
- <div class="column is-4">
114
- <p class="title is-5">is-large</p>
115
- <ul class="block-list is-large">
116
- <li>Item one</li>
117
- <li>Item two</li>
118
- <li>Item three</li>
119
- </ul>
120
- </div>
62
+ <div class="column is-12">
63
+ <p class="title is-4" id="sizes">Sizes</p>
64
+ </div>
65
+ <div class="column is-4">
66
+ <p class="title is-5">is-small</p>
67
+ <ul class="block-list is-small">
68
+ <li>Item one</li>
69
+ <li>Item two</li>
70
+ <li>Item three</li>
71
+ </ul>
72
+ </div>
73
+ <div class="column is-4">
74
+ <p class="title is-5">is-normal</p>
75
+ <ul class="block-list is-normal">
76
+ <li>Item one</li>
77
+ <li>Item two</li>
78
+ <li>Item three</li>
79
+ </ul>
80
+ </div>
81
+ <div class="column is-4">
82
+ <p class="title is-5">is-large</p>
83
+ <ul class="block-list is-large">
84
+ <li>Item one</li>
85
+ <li>Item two</li>
86
+ <li>Item three</li>
87
+ </ul>
88
+ </div>
121
89
 
122
- <div class="column is-12">
123
- <p class="title is-4">Colours</p>
124
- </div>
125
- <div class="column is-4">
126
- <p class="title is-5">is-primary</p>
127
- <ul class="block-list is-primary">
128
- <li>Item one</li>
129
- <li>Item two</li>
130
- <li>Item three</li>
131
- </ul>
132
- </div>
133
- <div class="column is-4">
134
- <p class="title is-5">is-info</p>
135
- <ul class="block-list is-info">
136
- <li>Item one</li>
137
- <li>Item two</li>
138
- <li>Item three</li>
139
- </ul>
140
- </div>
141
- <div class="column is-4">
142
- <p class="title is-5">is-dark</p>
143
- <ul class="block-list is-dark">
144
- <li>Item one</li>
145
- <li>Item two</li>
146
- <li>Item three</li>
147
- </ul>
148
- </div>
149
-
150
- <div class="column is-12">
151
- <p class="title is-4">Outlined</p>
152
- </div>
153
- <div class="column is-4">
154
- <p class="title is-5">is-outlined is-primary</p>
155
- <ul class="block-list is-outlined is-primary">
156
- <li>Item one</li>
157
- <li>Item two</li>
158
- <li>Item three</li>
159
- </ul>
160
- </div>
161
- <div class="column is-4">
162
- <p class="title is-5">is-outlined is-info</p>
163
- <ul class="block-list is-outlined is-info">
164
- <li>Item one</li>
165
- <li>Item two</li>
166
- <li>Item three</li>
167
- </ul>
168
- </div>
169
- <div class="column is-4">
170
- <p class="title is-5">is-outlined is-dark</p>
171
- <ul class="block-list is-outlined is-dark">
172
- <li>Item one</li>
173
- <li>Item two</li>
174
- <li>Item three</li>
175
- </ul>
176
- </div>
90
+ <div class="column is-12">
91
+ <p class="title is-4" id="colours">Colours</p>
92
+ </div>
93
+ <div class="column is-4">
94
+ <p class="title is-5">is-primary</p>
95
+ <ul class="block-list is-primary">
96
+ <li>Item one</li>
97
+ <li>Item two</li>
98
+ <li>Item three</li>
99
+ </ul>
100
+ </div>
101
+ <div class="column is-4">
102
+ <p class="title is-5">is-info</p>
103
+ <ul class="block-list is-info">
104
+ <li>Item one</li>
105
+ <li>Item two</li>
106
+ <li>Item three</li>
107
+ </ul>
108
+ </div>
109
+ <div class="column is-4">
110
+ <p class="title is-5">is-dark</p>
111
+ <ul class="block-list is-dark">
112
+ <li>Item one</li>
113
+ <li>Item two</li>
114
+ <li>Item three</li>
115
+ </ul>
116
+ </div>
177
117
 
178
- <div class="column is-12">
179
- <p class="title is-4">Has Radius</p>
180
- </div>
181
- <div class="column is-4">
182
- <p class="title is-5">has-radius is-primary </p>
183
- <ul class="block-list has-radius is-primary">
184
- <li>Item one</li>
185
- <li>Item two</li>
186
- <li>Item three</li>
187
- </ul>
188
- </div>
189
- <div class="column is-4">
190
- <p class="title is-5">has-radius is-info</p>
191
- <ul class="block-list has-radius is-info">
192
- <li>Item one</li>
193
- <li>Item two</li>
194
- <li>Item three</li>
195
- </ul>
196
- </div>
197
- <div class="column is-4">
198
- <p class="title is-5">has-radius is-dark</p>
199
- <ul class="block-list has-radius is-dark">
200
- <li>Item one</li>
201
- <li>Item two</li>
202
- <li>Item three</li>
203
- </ul>
204
- </div>
118
+ <div class="column is-12">
119
+ <p class="title is-4" id="outlined">Outlined</p>
120
+ </div>
121
+ <div class="column is-4">
122
+ <p class="title is-5">is-outlined is-primary</p>
123
+ <ul class="block-list is-outlined is-primary">
124
+ <li>Item one</li>
125
+ <li>Item two</li>
126
+ <li>Item three</li>
127
+ </ul>
128
+ </div>
129
+ <div class="column is-4">
130
+ <p class="title is-5">is-outlined is-info</p>
131
+ <ul class="block-list is-outlined is-info">
132
+ <li>Item one</li>
133
+ <li>Item two</li>
134
+ <li>Item three</li>
135
+ </ul>
136
+ </div>
137
+ <div class="column is-4">
138
+ <p class="title is-5">is-outlined is-dark</p>
139
+ <ul class="block-list is-outlined is-dark">
140
+ <li>Item one</li>
141
+ <li>Item two</li>
142
+ <li>Item three</li>
143
+ </ul>
144
+ </div>
205
145
 
206
- <div class="column is-12">
207
- <p class="title is-4">List Item Overrides</p>
208
- <p>In v0.3 you can override the classes on a list item</p>
209
- </div>
210
- <div class="column is-4">
211
- <p class="title is-5">li.is-large</p>
212
- <ul class="block-list">
213
- <li>Item one</li>
214
- <li class="is-large">Item two</li>
215
- <li>Item three</li>
216
- </ul>
217
- </div>
218
- <div class="column is-4">
219
- <p class="title is-5">li.is-primary</p>
220
- <ul class="block-list">
221
- <li>Item one</li>
222
- <li class="is-primary">Item two</li>
223
- <li>Item three</li>
224
- </ul>
225
- </div>
226
- <div class="column is-4">
227
- <p class="title is-5">li.is-primary.is-outlined</p>
228
- <ul class="block-list">
229
- <li>Item one</li>
230
- <li class="is-primary is-outlined">Item two</li>
231
- <li>Item three</li>
232
- </ul>
233
- </div>
146
+ <div class="column is-12">
147
+ <p class="title is-4" id="has-radius">Has Radius</p>
148
+ </div>
149
+ <div class="column is-4">
150
+ <p class="title is-5">has-radius is-primary </p>
151
+ <ul class="block-list has-radius is-primary">
152
+ <li>Item one</li>
153
+ <li>Item two</li>
154
+ <li>Item three</li>
155
+ </ul>
156
+ </div>
157
+ <div class="column is-4">
158
+ <p class="title is-5">has-radius is-info</p>
159
+ <ul class="block-list has-radius is-info">
160
+ <li>Item one</li>
161
+ <li>Item two</li>
162
+ <li>Item three</li>
163
+ </ul>
164
+ </div>
165
+ <div class="column is-4">
166
+ <p class="title is-5">has-radius is-dark</p>
167
+ <ul class="block-list has-radius is-dark">
168
+ <li>Item one</li>
169
+ <li>Item two</li>
170
+ <li>Item three</li>
171
+ </ul>
172
+ </div>
234
173
 
235
- <div class="column is-12">
236
- <p class="title is-4">Combinations</p>
237
- </div>
238
- <div class="column is-4">
239
- <p class="title is-5">is-small is-outlined is-success is-centered</p>
240
- <ul class="block-list is-small is-outlined is-success is-centered">
241
- <li>Item one</li>
242
- <li>Item two</li>
243
- <li>Item three</li>
244
- </ul>
245
- </div>
246
- <div class="column is-4">
247
- <p class="title is-5">is-large is-warning is-right has-radius</p>
248
- <ul class="block-list is-large is-warning is-right has-radius">
249
- <li>Item one</li>
250
- <li>Item two</li>
251
- <li>Item three</li>
252
- </ul>
253
- </div>
254
- <div class="column is-4">
255
- <p class="title is-5">ul.is-danger.is-centered</p>
256
- <p class="subtitle">li.is-outlined.is-large</p>
257
- <ul class="block-list is-centered is-danger">
258
- <li>Item one</li>
259
- <li class="is-danger is-outlined is-large">Item two</li>
260
- <li>Item three</li>
261
- </ul>
262
- </div>
263
- </div>
264
- </div>
265
- </section>
266
- <footer class="footer">
267
- <div class="has-text-centered">
268
- <p><a href="https://www.csrhymes.com">C.S. Rhymes</a></p>
269
- </div>
270
- </footer>
271
- </body>
272
- </html>
174
+ <div class="column is-12">
175
+ <p class="title is-4" id="highlighted">Is Highlighted</p>
176
+ <p>In v0.4 you can highlight the all list items or individual list items</p>
177
+ </div>
178
+ <div class="column is-4">
179
+ <p class="title is-5">li.is-highlighted</p>
180
+ <ul class="block-list">
181
+ <li>Item one</li>
182
+ <li class="is-highlighted">Item two</li>
183
+ <li>Item three</li>
184
+ </ul>
185
+ </div>
186
+ <div class="column is-4">
187
+ <p class="title is-5">is-highlighted is-info</p>
188
+ <ul class="block-list is-highlighted is-info">
189
+ <li>Item one</li>
190
+ <li>Item two</li>
191
+ <li>Item three</li>
192
+ </ul>
193
+ </div>
194
+ <div class="column is-4">
195
+ <p class="title is-5">is-highlighted is-danger has-radius</p>
196
+ <ul class="block-list is-highlighted is-danger has-radius">
197
+ <li>Item one</li>
198
+ <li>Item two</li>
199
+ <li>Item three</li>
200
+ </ul>
201
+ </div>
202
+
203
+ <div class="column is-12">
204
+ <p class="title is-4" id="list-item-overrides">List Item Overrides</p>
205
+ <p>In v0.3 you can override the classes on a list item</p>
206
+ </div>
207
+ <div class="column is-4">
208
+ <p class="title is-5">li.is-large</p>
209
+ <ul class="block-list">
210
+ <li>Item one</li>
211
+ <li class="is-large">Item two</li>
212
+ <li>Item three</li>
213
+ </ul>
214
+ </div>
215
+ <div class="column is-4">
216
+ <p class="title is-5">li.is-primary</p>
217
+ <ul class="block-list">
218
+ <li>Item one</li>
219
+ <li class="is-primary">Item two</li>
220
+ <li>Item three</li>
221
+ </ul>
222
+ </div>
223
+ <div class="column is-4">
224
+ <p class="title is-5">li.is-primary.is-outlined</p>
225
+ <ul class="block-list">
226
+ <li>Item one</li>
227
+ <li class="is-primary is-outlined">Item two</li>
228
+ <li>Item three</li>
229
+ </ul>
230
+ </div>
231
+
232
+ <div class="column is-12">
233
+ <p class="title is-4" id="combinations">Combinations</p>
234
+ </div>
235
+ <div class="column is-4">
236
+ <p class="title is-5">is-small is-outlined is-success is-centered</p>
237
+ <ul class="block-list is-small is-outlined is-success is-centered">
238
+ <li>Item one</li>
239
+ <li>Item two</li>
240
+ <li>Item three</li>
241
+ </ul>
242
+ </div>
243
+ <div class="column is-4">
244
+ <p class="title is-5">is-large is-warning is-right has-radius</p>
245
+ <ul class="block-list is-large is-warning is-right has-radius">
246
+ <li>Item one</li>
247
+ <li>Item two</li>
248
+ <li>Item three</li>
249
+ </ul>
250
+ </div>
251
+ <div class="column is-4">
252
+ <p class="title is-5">ul.is-danger.is-centered</p>
253
+ <p class="subtitle">li.is-highlighted.is-large</p>
254
+ <ul class="block-list is-centered is-danger">
255
+ <li>Item one</li>
256
+ <li class="is-danger is-highlighted is-large">Item two</li>
257
+ <li>Item three</li>
258
+ </ul>
259
+ </div>
260
+ </div>