vitrina 0.2.5 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (187) hide show
  1. checksums.yaml +4 -4
  2. data/.editorconfig +13 -0
  3. data/.github/FUNDING.yml +4 -0
  4. data/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
  5. data/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
  6. data/.github/workflows/gempush.yml +41 -0
  7. data/.gitignore +7 -0
  8. data/.travis.yml +8 -0
  9. data/404.md +5 -0
  10. data/CHANGELOG.md +59 -0
  11. data/Gemfile +9 -0
  12. data/LICENSE +21 -0
  13. data/README.md +407 -0
  14. data/_config.yml +39 -0
  15. data/_data/general.json +133 -0
  16. data/_data/home.json +316 -0
  17. data/_data/links.json +34 -0
  18. data/_data/resume.json +80 -0
  19. data/_includes/foot.html +6 -0
  20. data/_includes/footer.html +21 -0
  21. data/_includes/head.html +13 -0
  22. data/_includes/header.html +63 -0
  23. data/_includes/pagination.html +75 -0
  24. data/_includes/util/grid_columns.html +49 -0
  25. data/_includes/util/item_content.html +8 -0
  26. data/_includes/util/items.html +63 -0
  27. data/_includes/util/navbar_items.html +76 -0
  28. data/_includes/util/prepend_link.html +5 -0
  29. data/_includes/util/timeline_cards.html +20 -0
  30. data/_layouts/blog.html +53 -0
  31. data/_layouts/compress.html +10 -0
  32. data/_layouts/contact.html +80 -0
  33. data/_layouts/default.html +33 -0
  34. data/_layouts/error.html +10 -0
  35. data/_layouts/home.html +103 -0
  36. data/_layouts/papers.html +80 -0
  37. data/_layouts/post.html +33 -0
  38. data/_layouts/projects.html +58 -0
  39. data/_layouts/resume.html +62 -0
  40. data/_papers/A-systematic-review-on-the-productive-effects-of-hobbies.md +15 -0
  41. data/_papers/Applications-of-open-collaboration-in-software-development.md +14 -0
  42. data/_posts/2019-04-03-welcome-human.md +52 -0
  43. data/_projects/Make.md +5 -0
  44. data/_projects/Meet.md +5 -0
  45. data/_projects/Mood.md +5 -0
  46. data/_projects/Take.md +5 -0
  47. data/_projects/Think.md +5 -0
  48. data/_sass/_bulma.scss +3 -0
  49. data/_sass/_fork_awesome.scss +11 -0
  50. data/_sass/code.scss +128 -0
  51. data/_sass/customize.scss +69 -0
  52. data/_sass/elements.scss +489 -0
  53. data/assets/css/styles.scss +15 -0
  54. data/assets/img/card.png +0 -0
  55. data/assets/img/icon.png +0 -0
  56. data/assets/img/logo.png +0 -0
  57. data/assets/img/made-with-bulma.png +0 -0
  58. data/assets/img/make.png +0 -0
  59. data/assets/img/meet.png +0 -0
  60. data/assets/img/mood.png +0 -0
  61. data/assets/img/take.png +0 -0
  62. data/assets/img/think.png +0 -0
  63. data/assets/js/navbar.js +10 -0
  64. data/assets/js/validate.js +77 -0
  65. data/blog/index.html +4 -0
  66. data/contact.md +4 -0
  67. data/index.md +3 -0
  68. data/node_modules/.yarn-integrity +18 -0
  69. data/node_modules/bulma/CHANGELOG.md +1390 -0
  70. data/node_modules/bulma/LICENSE +21 -0
  71. data/node_modules/bulma/README.md +130 -0
  72. data/node_modules/bulma/bulma.sass +9 -0
  73. data/node_modules/bulma/css/bulma.css +10855 -0
  74. data/node_modules/bulma/css/bulma.css.map +1 -0
  75. data/node_modules/bulma/css/bulma.min.css +1 -0
  76. data/node_modules/bulma/package.json +52 -0
  77. data/node_modules/bulma/sass/.DS_Store +0 -0
  78. data/node_modules/bulma/sass/base/_all.sass +5 -0
  79. data/node_modules/bulma/sass/base/generic.sass +142 -0
  80. data/node_modules/bulma/sass/base/helpers.sass +281 -0
  81. data/node_modules/bulma/sass/base/minireset.sass +79 -0
  82. data/node_modules/bulma/sass/components/_all.sass +15 -0
  83. data/node_modules/bulma/sass/components/breadcrumb.sass +75 -0
  84. data/node_modules/bulma/sass/components/card.sass +79 -0
  85. data/node_modules/bulma/sass/components/dropdown.sass +81 -0
  86. data/node_modules/bulma/sass/components/level.sass +77 -0
  87. data/node_modules/bulma/sass/components/list.sass +39 -0
  88. data/node_modules/bulma/sass/components/media.sass +50 -0
  89. data/node_modules/bulma/sass/components/menu.sass +57 -0
  90. data/node_modules/bulma/sass/components/message.sass +99 -0
  91. data/node_modules/bulma/sass/components/modal.sass +113 -0
  92. data/node_modules/bulma/sass/components/navbar.sass +441 -0
  93. data/node_modules/bulma/sass/components/pagination.sass +150 -0
  94. data/node_modules/bulma/sass/components/panel.sass +119 -0
  95. data/node_modules/bulma/sass/components/tabs.sass +151 -0
  96. data/node_modules/bulma/sass/elements/_all.sass +15 -0
  97. data/node_modules/bulma/sass/elements/box.sass +24 -0
  98. data/node_modules/bulma/sass/elements/button.sass +323 -0
  99. data/node_modules/bulma/sass/elements/container.sass +24 -0
  100. data/node_modules/bulma/sass/elements/content.sass +155 -0
  101. data/node_modules/bulma/sass/elements/form.sass +1 -0
  102. data/node_modules/bulma/sass/elements/icon.sass +21 -0
  103. data/node_modules/bulma/sass/elements/image.sass +71 -0
  104. data/node_modules/bulma/sass/elements/notification.sass +43 -0
  105. data/node_modules/bulma/sass/elements/other.sass +39 -0
  106. data/node_modules/bulma/sass/elements/progress.sass +67 -0
  107. data/node_modules/bulma/sass/elements/table.sass +127 -0
  108. data/node_modules/bulma/sass/elements/tag.sass +128 -0
  109. data/node_modules/bulma/sass/elements/title.sass +70 -0
  110. data/node_modules/bulma/sass/form/_all.sass +8 -0
  111. data/node_modules/bulma/sass/form/checkbox-radio.sass +21 -0
  112. data/node_modules/bulma/sass/form/file.sass +180 -0
  113. data/node_modules/bulma/sass/form/input-textarea.sass +64 -0
  114. data/node_modules/bulma/sass/form/select.sass +85 -0
  115. data/node_modules/bulma/sass/form/shared.sass +55 -0
  116. data/node_modules/bulma/sass/form/tools.sass +205 -0
  117. data/node_modules/bulma/sass/grid/_all.sass +4 -0
  118. data/node_modules/bulma/sass/grid/columns.sass +504 -0
  119. data/node_modules/bulma/sass/grid/tiles.sass +34 -0
  120. data/node_modules/bulma/sass/layout/_all.sass +5 -0
  121. data/node_modules/bulma/sass/layout/footer.sass +9 -0
  122. data/node_modules/bulma/sass/layout/hero.sass +145 -0
  123. data/node_modules/bulma/sass/layout/section.sass +13 -0
  124. data/node_modules/bulma/sass/utilities/.DS_Store +0 -0
  125. data/node_modules/bulma/sass/utilities/_all.sass +8 -0
  126. data/node_modules/bulma/sass/utilities/animations.sass +5 -0
  127. data/node_modules/bulma/sass/utilities/controls.sass +50 -0
  128. data/node_modules/bulma/sass/utilities/derived-variables.sass +106 -0
  129. data/node_modules/bulma/sass/utilities/functions.sass +110 -0
  130. data/node_modules/bulma/sass/utilities/initial-variables.sass +77 -0
  131. data/node_modules/bulma/sass/utilities/mixins.sass +261 -0
  132. data/node_modules/fork-awesome/CHANGELOG.md +91 -0
  133. data/node_modules/fork-awesome/CONTRIBUTORS.md +31 -0
  134. data/node_modules/fork-awesome/LICENSES +452 -0
  135. data/node_modules/fork-awesome/README.md +93 -0
  136. data/node_modules/fork-awesome/css/fork-awesome.css +2573 -0
  137. data/node_modules/fork-awesome/css/fork-awesome.min.css +12 -0
  138. data/node_modules/fork-awesome/css/fork-awesome.min.css.map +1 -0
  139. data/node_modules/fork-awesome/css/v5-compat.css +446 -0
  140. data/node_modules/fork-awesome/css/v5-compat.min.css +12 -0
  141. data/node_modules/fork-awesome/css/v5-compat.min.css.map +1 -0
  142. data/node_modules/fork-awesome/fonts/forkawesome-webfont.eot +0 -0
  143. data/node_modules/fork-awesome/fonts/forkawesome-webfont.svg +2849 -0
  144. data/node_modules/fork-awesome/fonts/forkawesome-webfont.ttf +0 -0
  145. data/node_modules/fork-awesome/fonts/forkawesome-webfont.woff +0 -0
  146. data/node_modules/fork-awesome/fonts/forkawesome-webfont.woff2 +0 -0
  147. data/node_modules/fork-awesome/less/animated.less +34 -0
  148. data/node_modules/fork-awesome/less/bordered-pulled.less +25 -0
  149. data/node_modules/fork-awesome/less/core.less +12 -0
  150. data/node_modules/fork-awesome/less/fixed-width.less +6 -0
  151. data/node_modules/fork-awesome/less/fork-awesome.less +27 -0
  152. data/node_modules/fork-awesome/less/icons.less +879 -0
  153. data/node_modules/fork-awesome/less/larger.less +13 -0
  154. data/node_modules/fork-awesome/less/list.less +19 -0
  155. data/node_modules/fork-awesome/less/mixins.less +60 -0
  156. data/node_modules/fork-awesome/less/path.less +15 -0
  157. data/node_modules/fork-awesome/less/rotated-flipped.less +20 -0
  158. data/node_modules/fork-awesome/less/screen-reader.less +5 -0
  159. data/node_modules/fork-awesome/less/stacked.less +20 -0
  160. data/node_modules/fork-awesome/less/v5-compat.less +176 -0
  161. data/node_modules/fork-awesome/less/variables.less +890 -0
  162. data/node_modules/fork-awesome/package.json +49 -0
  163. data/node_modules/fork-awesome/scss/_animated.scss +34 -0
  164. data/node_modules/fork-awesome/scss/_bordered-pulled.scss +25 -0
  165. data/node_modules/fork-awesome/scss/_core.scss +12 -0
  166. data/node_modules/fork-awesome/scss/_fixed-width.scss +6 -0
  167. data/node_modules/fork-awesome/scss/_functions.scss +11 -0
  168. data/node_modules/fork-awesome/scss/_icons.scss +879 -0
  169. data/node_modules/fork-awesome/scss/_larger.scss +13 -0
  170. data/node_modules/fork-awesome/scss/_list.scss +19 -0
  171. data/node_modules/fork-awesome/scss/_mixins.scss +60 -0
  172. data/node_modules/fork-awesome/scss/_path.scss +15 -0
  173. data/node_modules/fork-awesome/scss/_rotated-flipped.scss +20 -0
  174. data/node_modules/fork-awesome/scss/_screen-reader.scss +5 -0
  175. data/node_modules/fork-awesome/scss/_stacked.scss +20 -0
  176. data/node_modules/fork-awesome/scss/_variables.scss +890 -0
  177. data/node_modules/fork-awesome/scss/fork-awesome.scss +28 -0
  178. data/package.json +32 -0
  179. data/papers.md +4 -0
  180. data/projects.md +4 -0
  181. data/resume.md +4 -0
  182. data/screenshot.png +0 -0
  183. data/scripts/build.sh +10 -0
  184. data/scripts/install.sh +4 -0
  185. data/scripts/validate.rb +28 -0
  186. data/vitrina.gemspec +23 -0
  187. metadata +187 -2
@@ -0,0 +1,50 @@
1
+ $media-border-color: bulmaRgba($border, 0.5) !default
2
+
3
+ .media
4
+ align-items: flex-start
5
+ display: flex
6
+ text-align: left
7
+ .content:not(:last-child)
8
+ margin-bottom: 0.75rem
9
+ .media
10
+ border-top: 1px solid $media-border-color
11
+ display: flex
12
+ padding-top: 0.75rem
13
+ .content:not(:last-child),
14
+ .control:not(:last-child)
15
+ margin-bottom: 0.5rem
16
+ .media
17
+ padding-top: 0.5rem
18
+ & + .media
19
+ margin-top: 0.5rem
20
+ & + .media
21
+ border-top: 1px solid $media-border-color
22
+ margin-top: 1rem
23
+ padding-top: 1rem
24
+ // Sizes
25
+ &.is-large
26
+ & + .media
27
+ margin-top: 1.5rem
28
+ padding-top: 1.5rem
29
+
30
+ .media-left,
31
+ .media-right
32
+ flex-basis: auto
33
+ flex-grow: 0
34
+ flex-shrink: 0
35
+
36
+ .media-left
37
+ margin-right: 1rem
38
+
39
+ .media-right
40
+ margin-left: 1rem
41
+
42
+ .media-content
43
+ flex-basis: auto
44
+ flex-grow: 1
45
+ flex-shrink: 1
46
+ text-align: left
47
+
48
+ +mobile
49
+ .media-content
50
+ overflow-x: auto
@@ -0,0 +1,57 @@
1
+ $menu-item-color: $text !default
2
+ $menu-item-radius: $radius-small !default
3
+ $menu-item-hover-color: $text-strong !default
4
+ $menu-item-hover-background-color: $background !default
5
+ $menu-item-active-color: $link-invert !default
6
+ $menu-item-active-background-color: $link !default
7
+
8
+ $menu-list-border-left: 1px solid $border !default
9
+ $menu-list-line-height: 1.25 !default
10
+ $menu-list-link-padding: 0.5em 0.75em !default
11
+ $menu-nested-list-margin: 0.75em !default
12
+ $menu-nested-list-padding-left: 0.75em !default
13
+
14
+ $menu-label-color: $text-light !default
15
+ $menu-label-font-size: 0.75em !default
16
+ $menu-label-letter-spacing: 0.1em !default
17
+ $menu-label-spacing: 1em !default
18
+
19
+ .menu
20
+ font-size: $size-normal
21
+ // Sizes
22
+ &.is-small
23
+ font-size: $size-small
24
+ &.is-medium
25
+ font-size: $size-medium
26
+ &.is-large
27
+ font-size: $size-large
28
+
29
+ .menu-list
30
+ line-height: $menu-list-line-height
31
+ a
32
+ border-radius: $menu-item-radius
33
+ color: $menu-item-color
34
+ display: block
35
+ padding: $menu-list-link-padding
36
+ &:hover
37
+ background-color: $menu-item-hover-background-color
38
+ color: $menu-item-hover-color
39
+ // Modifiers
40
+ &.is-active
41
+ background-color: $menu-item-active-background-color
42
+ color: $menu-item-active-color
43
+ li
44
+ ul
45
+ border-left: $menu-list-border-left
46
+ margin: $menu-nested-list-margin
47
+ padding-left: $menu-nested-list-padding-left
48
+
49
+ .menu-label
50
+ color: $menu-label-color
51
+ font-size: $menu-label-font-size
52
+ letter-spacing: $menu-label-letter-spacing
53
+ text-transform: uppercase
54
+ &:not(:first-child)
55
+ margin-top: $menu-label-spacing
56
+ &:not(:last-child)
57
+ margin-bottom: $menu-label-spacing
@@ -0,0 +1,99 @@
1
+ $message-background-color: $background !default
2
+ $message-radius: $radius !default
3
+
4
+ $message-header-background-color: $text !default
5
+ $message-header-color: $text-invert !default
6
+ $message-header-weight: $weight-bold !default
7
+ $message-header-padding: 0.75em 1em !default
8
+ $message-header-radius: $radius !default
9
+
10
+ $message-body-border-color: $border !default
11
+ $message-body-border-width: 0 0 0 4px !default
12
+ $message-body-color: $text !default
13
+ $message-body-padding: 1.25em 1.5em !default
14
+ $message-body-radius: $radius !default
15
+
16
+ $message-body-pre-background-color: $scheme-main !default
17
+ $message-body-pre-code-background-color: transparent !default
18
+
19
+ $message-header-body-border-width: 0 !default
20
+ $message-colors: $colors !default
21
+
22
+ .message
23
+ @extend %block
24
+ background-color: $message-background-color
25
+ border-radius: $message-radius
26
+ font-size: $size-normal
27
+ strong
28
+ color: currentColor
29
+ a:not(.button):not(.tag):not(.dropdown-item)
30
+ color: currentColor
31
+ text-decoration: underline
32
+ // Sizes
33
+ &.is-small
34
+ font-size: $size-small
35
+ &.is-medium
36
+ font-size: $size-medium
37
+ &.is-large
38
+ font-size: $size-large
39
+ // Colors
40
+ @each $name, $components in $message-colors
41
+ $color: nth($components, 1)
42
+ $color-invert: nth($components, 2)
43
+ $color-light: null
44
+ $color-dark: null
45
+
46
+ @if length($components) >= 3
47
+ $color-light: nth($components, 3)
48
+ @if length($components) >= 4
49
+ $color-dark: nth($components, 4)
50
+ @else
51
+ $color-luminance: colorLuminance($color)
52
+ $darken-percentage: $color-luminance * 70%
53
+ $desaturate-percentage: $color-luminance * 30%
54
+ $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
55
+ @else
56
+ $color-lightning: max((100% - lightness($color)) - 2%, 0%)
57
+ $color-light: lighten($color, $color-lightning)
58
+
59
+ &.is-#{$name}
60
+ background-color: $color-light
61
+ .message-header
62
+ background-color: $color
63
+ color: $color-invert
64
+ .message-body
65
+ border-color: $color
66
+ color: $color-dark
67
+
68
+ .message-header
69
+ align-items: center
70
+ background-color: $message-header-background-color
71
+ border-radius: $message-header-radius $message-header-radius 0 0
72
+ color: $message-header-color
73
+ display: flex
74
+ font-weight: $message-header-weight
75
+ justify-content: space-between
76
+ line-height: 1.25
77
+ padding: $message-header-padding
78
+ position: relative
79
+ .delete
80
+ flex-grow: 0
81
+ flex-shrink: 0
82
+ margin-left: 0.75em
83
+ & + .message-body
84
+ border-width: $message-header-body-border-width
85
+ border-top-left-radius: 0
86
+ border-top-right-radius: 0
87
+
88
+ .message-body
89
+ border-color: $message-body-border-color
90
+ border-radius: $message-body-radius
91
+ border-style: solid
92
+ border-width: $message-body-border-width
93
+ color: $message-body-color
94
+ padding: $message-body-padding
95
+ code,
96
+ pre
97
+ background-color: $message-body-pre-background-color
98
+ pre code
99
+ background-color: $message-body-pre-code-background-color
@@ -0,0 +1,113 @@
1
+ $modal-z: 40 !default
2
+
3
+ $modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
4
+
5
+ $modal-content-width: 640px !default
6
+ $modal-content-margin-mobile: 20px !default
7
+ $modal-content-spacing-mobile: 160px !default
8
+ $modal-content-spacing-tablet: 40px !default
9
+
10
+ $modal-close-dimensions: 40px !default
11
+ $modal-close-right: 20px !default
12
+ $modal-close-top: 20px !default
13
+
14
+ $modal-card-spacing: 40px !default
15
+
16
+ $modal-card-head-background-color: $background !default
17
+ $modal-card-head-border-bottom: 1px solid $border !default
18
+ $modal-card-head-padding: 20px !default
19
+ $modal-card-head-radius: $radius-large !default
20
+
21
+ $modal-card-title-color: $text-strong !default
22
+ $modal-card-title-line-height: 1 !default
23
+ $modal-card-title-size: $size-4 !default
24
+
25
+ $modal-card-foot-radius: $radius-large !default
26
+ $modal-card-foot-border-top: 1px solid $border !default
27
+
28
+ $modal-card-body-background-color: $scheme-main !default
29
+ $modal-card-body-padding: 20px !default
30
+
31
+ .modal
32
+ @extend %overlay
33
+ align-items: center
34
+ display: none
35
+ flex-direction: column
36
+ justify-content: center
37
+ overflow: hidden
38
+ position: fixed
39
+ z-index: $modal-z
40
+ // Modifiers
41
+ &.is-active
42
+ display: flex
43
+
44
+ .modal-background
45
+ @extend %overlay
46
+ background-color: $modal-background-background-color
47
+
48
+ .modal-content,
49
+ .modal-card
50
+ margin: 0 $modal-content-margin-mobile
51
+ max-height: calc(100vh - #{$modal-content-spacing-mobile})
52
+ overflow: auto
53
+ position: relative
54
+ width: 100%
55
+ // Responsiveness
56
+ +tablet
57
+ margin: 0 auto
58
+ max-height: calc(100vh - #{$modal-content-spacing-tablet})
59
+ width: $modal-content-width
60
+
61
+ .modal-close
62
+ @extend %delete
63
+ background: none
64
+ height: $modal-close-dimensions
65
+ position: fixed
66
+ right: $modal-close-right
67
+ top: $modal-close-top
68
+ width: $modal-close-dimensions
69
+
70
+ .modal-card
71
+ display: flex
72
+ flex-direction: column
73
+ max-height: calc(100vh - #{$modal-card-spacing})
74
+ overflow: hidden
75
+ -ms-overflow-y: visible
76
+
77
+ .modal-card-head,
78
+ .modal-card-foot
79
+ align-items: center
80
+ background-color: $modal-card-head-background-color
81
+ display: flex
82
+ flex-shrink: 0
83
+ justify-content: flex-start
84
+ padding: $modal-card-head-padding
85
+ position: relative
86
+
87
+ .modal-card-head
88
+ border-bottom: $modal-card-head-border-bottom
89
+ border-top-left-radius: $modal-card-head-radius
90
+ border-top-right-radius: $modal-card-head-radius
91
+
92
+ .modal-card-title
93
+ color: $modal-card-title-color
94
+ flex-grow: 1
95
+ flex-shrink: 0
96
+ font-size: $modal-card-title-size
97
+ line-height: $modal-card-title-line-height
98
+
99
+ .modal-card-foot
100
+ border-bottom-left-radius: $modal-card-foot-radius
101
+ border-bottom-right-radius: $modal-card-foot-radius
102
+ border-top: $modal-card-foot-border-top
103
+ .button
104
+ &:not(:last-child)
105
+ margin-right: 0.5em
106
+
107
+ .modal-card-body
108
+ +overflow-touch
109
+ background-color: $modal-card-body-background-color
110
+ flex-grow: 1
111
+ flex-shrink: 1
112
+ overflow: auto
113
+ padding: $modal-card-body-padding
@@ -0,0 +1,441 @@
1
+ $navbar-background-color: $scheme-main !default
2
+ $navbar-box-shadow-size: 0 2px 0 0 !default
3
+ $navbar-box-shadow-color: $background !default
4
+ $navbar-height: 3.25rem !default
5
+ $navbar-padding-vertical: 1rem !default
6
+ $navbar-padding-horizontal: 2rem !default
7
+ $navbar-z: 30 !default
8
+ $navbar-fixed-z: 30 !default
9
+
10
+ $navbar-item-color: $text !default
11
+ $navbar-item-hover-color: $link !default
12
+ $navbar-item-hover-background-color: $scheme-main-bis !default
13
+ $navbar-item-active-color: $scheme-invert !default
14
+ $navbar-item-active-background-color: transparent !default
15
+ $navbar-item-img-max-height: 1.75rem !default
16
+
17
+ $navbar-burger-color: $navbar-item-color !default
18
+
19
+ $navbar-tab-hover-background-color: transparent !default
20
+ $navbar-tab-hover-border-bottom-color: $link !default
21
+ $navbar-tab-active-color: $link !default
22
+ $navbar-tab-active-background-color: transparent !default
23
+ $navbar-tab-active-border-bottom-color: $link !default
24
+ $navbar-tab-active-border-bottom-style: solid !default
25
+ $navbar-tab-active-border-bottom-width: 3px !default
26
+
27
+ $navbar-dropdown-background-color: $scheme-main !default
28
+ $navbar-dropdown-border-top: 2px solid $border !default
29
+ $navbar-dropdown-offset: -4px !default
30
+ $navbar-dropdown-arrow: $link !default
31
+ $navbar-dropdown-radius: $radius-large !default
32
+ $navbar-dropdown-z: 20 !default
33
+
34
+ $navbar-dropdown-boxed-radius: $radius-large !default
35
+ $navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
36
+
37
+ $navbar-dropdown-item-hover-color: $scheme-invert !default
38
+ $navbar-dropdown-item-hover-background-color: $background !default
39
+ $navbar-dropdown-item-active-color: $link !default
40
+ $navbar-dropdown-item-active-background-color: $background !default
41
+
42
+ $navbar-divider-background-color: $background !default
43
+ $navbar-divider-height: 2px !default
44
+
45
+ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
46
+
47
+ $navbar-breakpoint: $desktop !default
48
+
49
+ =navbar-fixed
50
+ left: 0
51
+ position: fixed
52
+ right: 0
53
+ z-index: $navbar-fixed-z
54
+
55
+ .navbar
56
+ background-color: $navbar-background-color
57
+ min-height: $navbar-height
58
+ position: relative
59
+ z-index: $navbar-z
60
+ @each $name, $pair in $colors
61
+ $color: nth($pair, 1)
62
+ $color-invert: nth($pair, 2)
63
+ &.is-#{$name}
64
+ background-color: $color
65
+ color: $color-invert
66
+ .navbar-brand
67
+ & > .navbar-item,
68
+ .navbar-link
69
+ color: $color-invert
70
+ & > a.navbar-item,
71
+ .navbar-link
72
+ &:focus,
73
+ &:hover,
74
+ &.is-active
75
+ background-color: bulmaDarken($color, 5%)
76
+ color: $color-invert
77
+ .navbar-link
78
+ &::after
79
+ border-color: $color-invert
80
+ .navbar-burger
81
+ color: $color-invert
82
+ +from($navbar-breakpoint)
83
+ .navbar-start,
84
+ .navbar-end
85
+ & > .navbar-item,
86
+ .navbar-link
87
+ color: $color-invert
88
+ & > a.navbar-item,
89
+ .navbar-link
90
+ &:focus,
91
+ &:hover,
92
+ &.is-active
93
+ background-color: bulmaDarken($color, 5%)
94
+ color: $color-invert
95
+ .navbar-link
96
+ &::after
97
+ border-color: $color-invert
98
+ .navbar-item.has-dropdown:focus .navbar-link,
99
+ .navbar-item.has-dropdown:hover .navbar-link,
100
+ .navbar-item.has-dropdown.is-active .navbar-link
101
+ background-color: bulmaDarken($color, 5%)
102
+ color: $color-invert
103
+ .navbar-dropdown
104
+ a.navbar-item
105
+ &.is-active
106
+ background-color: $color
107
+ color: $color-invert
108
+ & > .container
109
+ align-items: stretch
110
+ display: flex
111
+ min-height: $navbar-height
112
+ width: 100%
113
+ &.has-shadow
114
+ box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
115
+ &.is-fixed-bottom,
116
+ &.is-fixed-top
117
+ +navbar-fixed
118
+ &.is-fixed-bottom
119
+ bottom: 0
120
+ &.has-shadow
121
+ box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
122
+ &.is-fixed-top
123
+ top: 0
124
+
125
+ html,
126
+ body
127
+ &.has-navbar-fixed-top
128
+ padding-top: $navbar-height
129
+ &.has-navbar-fixed-bottom
130
+ padding-bottom: $navbar-height
131
+
132
+ .navbar-brand,
133
+ .navbar-tabs
134
+ align-items: stretch
135
+ display: flex
136
+ flex-shrink: 0
137
+ min-height: $navbar-height
138
+
139
+ .navbar-brand
140
+ a.navbar-item
141
+ &:focus,
142
+ &:hover
143
+ background-color: transparent
144
+
145
+ .navbar-tabs
146
+ +overflow-touch
147
+ max-width: 100vw
148
+ overflow-x: auto
149
+ overflow-y: hidden
150
+
151
+ .navbar-burger
152
+ color: $navbar-burger-color
153
+ +hamburger($navbar-height)
154
+ margin-left: auto
155
+
156
+ .navbar-menu
157
+ display: none
158
+
159
+ .navbar-item,
160
+ .navbar-link
161
+ color: $navbar-item-color
162
+ display: block
163
+ line-height: 1.5
164
+ padding: 0.5rem 0.75rem
165
+ position: relative
166
+ .icon
167
+ &:only-child
168
+ margin-left: -0.25rem
169
+ margin-right: -0.25rem
170
+
171
+ a.navbar-item,
172
+ .navbar-link
173
+ cursor: pointer
174
+ &:focus,
175
+ &:focus-within,
176
+ &:hover,
177
+ &.is-active
178
+ background-color: $navbar-item-hover-background-color
179
+ color: $navbar-item-hover-color
180
+
181
+ .navbar-item
182
+ flex-grow: 0
183
+ flex-shrink: 0
184
+ img
185
+ max-height: $navbar-item-img-max-height
186
+ &.has-dropdown
187
+ padding: 0
188
+ &.is-expanded
189
+ flex-grow: 1
190
+ flex-shrink: 1
191
+ &.is-tab
192
+ border-bottom: 1px solid transparent
193
+ min-height: $navbar-height
194
+ padding-bottom: calc(0.5rem - 1px)
195
+ &:focus,
196
+ &:hover
197
+ background-color: $navbar-tab-hover-background-color
198
+ border-bottom-color: $navbar-tab-hover-border-bottom-color
199
+ &.is-active
200
+ background-color: $navbar-tab-active-background-color
201
+ border-bottom-color: $navbar-tab-active-border-bottom-color
202
+ border-bottom-style: $navbar-tab-active-border-bottom-style
203
+ border-bottom-width: $navbar-tab-active-border-bottom-width
204
+ color: $navbar-tab-active-color
205
+ padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
206
+
207
+ .navbar-content
208
+ flex-grow: 1
209
+ flex-shrink: 1
210
+
211
+ .navbar-link:not(.is-arrowless)
212
+ padding-right: 2.5em
213
+ &::after
214
+ @extend %arrow
215
+ border-color: $navbar-dropdown-arrow
216
+ margin-top: -0.375em
217
+ right: 1.125em
218
+
219
+ .navbar-dropdown
220
+ font-size: 0.875rem
221
+ padding-bottom: 0.5rem
222
+ padding-top: 0.5rem
223
+ .navbar-item
224
+ padding-left: 1.5rem
225
+ padding-right: 1.5rem
226
+
227
+ .navbar-divider
228
+ background-color: $navbar-divider-background-color
229
+ border: none
230
+ display: none
231
+ height: $navbar-divider-height
232
+ margin: 0.5rem 0
233
+
234
+ +until($navbar-breakpoint)
235
+ .navbar > .container
236
+ display: block
237
+ .navbar-brand,
238
+ .navbar-tabs
239
+ .navbar-item
240
+ align-items: center
241
+ display: flex
242
+ .navbar-link
243
+ &::after
244
+ display: none
245
+ .navbar-menu
246
+ background-color: $navbar-background-color
247
+ box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
248
+ padding: 0.5rem 0
249
+ &.is-active
250
+ display: block
251
+ // Fixed navbar
252
+ .navbar
253
+ &.is-fixed-bottom-touch,
254
+ &.is-fixed-top-touch
255
+ +navbar-fixed
256
+ &.is-fixed-bottom-touch
257
+ bottom: 0
258
+ &.has-shadow
259
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
260
+ &.is-fixed-top-touch
261
+ top: 0
262
+ &.is-fixed-top,
263
+ &.is-fixed-top-touch
264
+ .navbar-menu
265
+ +overflow-touch
266
+ max-height: calc(100vh - #{$navbar-height})
267
+ overflow: auto
268
+ html,
269
+ body
270
+ &.has-navbar-fixed-top-touch
271
+ padding-top: $navbar-height
272
+ &.has-navbar-fixed-bottom-touch
273
+ padding-bottom: $navbar-height
274
+
275
+ +from($navbar-breakpoint)
276
+ .navbar,
277
+ .navbar-menu,
278
+ .navbar-start,
279
+ .navbar-end
280
+ align-items: stretch
281
+ display: flex
282
+ .navbar
283
+ min-height: $navbar-height
284
+ &.is-spaced
285
+ padding: $navbar-padding-vertical $navbar-padding-horizontal
286
+ .navbar-start,
287
+ .navbar-end
288
+ align-items: center
289
+ a.navbar-item,
290
+ .navbar-link
291
+ border-radius: $radius
292
+ &.is-transparent
293
+ a.navbar-item,
294
+ .navbar-link
295
+ &:focus,
296
+ &:hover,
297
+ &.is-active
298
+ background-color: transparent !important
299
+ .navbar-item.has-dropdown
300
+ &.is-active,
301
+ &.is-hoverable:focus,
302
+ &.is-hoverable:focus-within,
303
+ &.is-hoverable:hover
304
+ .navbar-link
305
+ background-color: transparent !important
306
+ .navbar-dropdown
307
+ a.navbar-item
308
+ &:focus,
309
+ &:hover
310
+ background-color: $navbar-dropdown-item-hover-background-color
311
+ color: $navbar-dropdown-item-hover-color
312
+ &.is-active
313
+ background-color: $navbar-dropdown-item-active-background-color
314
+ color: $navbar-dropdown-item-active-color
315
+ .navbar-burger
316
+ display: none
317
+ .navbar-item,
318
+ .navbar-link
319
+ align-items: center
320
+ display: flex
321
+ .navbar-item
322
+ &.has-dropdown
323
+ align-items: stretch
324
+ &.has-dropdown-up
325
+ .navbar-link::after
326
+ transform: rotate(135deg) translate(0.25em, -0.25em)
327
+ .navbar-dropdown
328
+ border-bottom: $navbar-dropdown-border-top
329
+ border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
330
+ border-top: none
331
+ bottom: 100%
332
+ box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
333
+ top: auto
334
+ &.is-active,
335
+ &.is-hoverable:focus,
336
+ &.is-hoverable:focus-within,
337
+ &.is-hoverable:hover
338
+ .navbar-dropdown
339
+ display: block
340
+ .navbar.is-spaced &,
341
+ &.is-boxed
342
+ opacity: 1
343
+ pointer-events: auto
344
+ transform: translateY(0)
345
+ .navbar-menu
346
+ flex-grow: 1
347
+ flex-shrink: 0
348
+ .navbar-start
349
+ justify-content: flex-start
350
+ margin-right: auto
351
+ .navbar-end
352
+ justify-content: flex-end
353
+ margin-left: auto
354
+ .navbar-dropdown
355
+ background-color: $navbar-dropdown-background-color
356
+ border-bottom-left-radius: $navbar-dropdown-radius
357
+ border-bottom-right-radius: $navbar-dropdown-radius
358
+ border-top: $navbar-dropdown-border-top
359
+ box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
360
+ display: none
361
+ font-size: 0.875rem
362
+ left: 0
363
+ min-width: 100%
364
+ position: absolute
365
+ top: 100%
366
+ z-index: $navbar-dropdown-z
367
+ .navbar-item
368
+ padding: 0.375rem 1rem
369
+ white-space: nowrap
370
+ a.navbar-item
371
+ padding-right: 3rem
372
+ &:focus,
373
+ &:hover
374
+ background-color: $navbar-dropdown-item-hover-background-color
375
+ color: $navbar-dropdown-item-hover-color
376
+ &.is-active
377
+ background-color: $navbar-dropdown-item-active-background-color
378
+ color: $navbar-dropdown-item-active-color
379
+ .navbar.is-spaced &,
380
+ &.is-boxed
381
+ border-radius: $navbar-dropdown-boxed-radius
382
+ border-top: none
383
+ box-shadow: $navbar-dropdown-boxed-shadow
384
+ display: block
385
+ opacity: 0
386
+ pointer-events: none
387
+ top: calc(100% + (#{$navbar-dropdown-offset}))
388
+ transform: translateY(-5px)
389
+ transition-duration: $speed
390
+ transition-property: opacity, transform
391
+ &.is-right
392
+ left: auto
393
+ right: 0
394
+ .navbar-divider
395
+ display: block
396
+ .navbar > .container,
397
+ .container > .navbar
398
+ .navbar-brand
399
+ margin-left: -.75rem
400
+ .navbar-menu
401
+ margin-right: -.75rem
402
+ // Fixed navbar
403
+ .navbar
404
+ &.is-fixed-bottom-desktop,
405
+ &.is-fixed-top-desktop
406
+ +navbar-fixed
407
+ &.is-fixed-bottom-desktop
408
+ bottom: 0
409
+ &.has-shadow
410
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
411
+ &.is-fixed-top-desktop
412
+ top: 0
413
+ html,
414
+ body
415
+ &.has-navbar-fixed-top-desktop
416
+ padding-top: $navbar-height
417
+ &.has-navbar-fixed-bottom-desktop
418
+ padding-bottom: $navbar-height
419
+ &.has-spaced-navbar-fixed-top
420
+ padding-top: $navbar-height + ($navbar-padding-vertical * 2)
421
+ &.has-spaced-navbar-fixed-bottom
422
+ padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
423
+ // Hover/Active states
424
+ a.navbar-item,
425
+ .navbar-link
426
+ &.is-active
427
+ color: $navbar-item-active-color
428
+ &.is-active:not(:focus):not(:hover)
429
+ background-color: $navbar-item-active-background-color
430
+ .navbar-item.has-dropdown
431
+ &:focus,
432
+ &:hover,
433
+ &.is-active
434
+ .navbar-link
435
+ background-color: $navbar-item-hover-background-color
436
+
437
+ // Combination
438
+
439
+ .hero
440
+ &.is-fullheight-with-navbar
441
+ min-height: calc(100vh - #{$navbar-height})