vitrina 0.2.2 → 0.3.0

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 (198) 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 +81 -0
  11. data/Gemfile +9 -0
  12. data/LICENSE +21 -0
  13. data/README.md +501 -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 +69 -0
  27. data/_includes/util/navbar_items.html +82 -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 +32 -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 +52 -0
  67. data/index.md +3 -0
  68. data/node_modules/.yarn-integrity +18 -0
  69. data/node_modules/bulma/CHANGELOG.md +1459 -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 +10 -0
  73. data/node_modules/bulma/css/bulma-rtl.css +11331 -0
  74. data/node_modules/bulma/css/bulma-rtl.css.map +1 -0
  75. data/node_modules/bulma/css/bulma-rtl.min.css +1 -0
  76. data/node_modules/bulma/css/bulma.css +11331 -0
  77. data/node_modules/bulma/css/bulma.css.map +1 -0
  78. data/node_modules/bulma/css/bulma.min.css +1 -0
  79. data/node_modules/bulma/package.json +56 -0
  80. data/node_modules/bulma/sass/.DS_Store +0 -0
  81. data/node_modules/bulma/sass/base/_all.sass +4 -0
  82. data/node_modules/bulma/sass/base/generic.sass +142 -0
  83. data/node_modules/bulma/sass/base/helpers.sass +1 -0
  84. data/node_modules/bulma/sass/base/minireset.sass +79 -0
  85. data/node_modules/bulma/sass/components/_all.sass +14 -0
  86. data/node_modules/bulma/sass/components/breadcrumb.sass +75 -0
  87. data/node_modules/bulma/sass/components/card.sass +79 -0
  88. data/node_modules/bulma/sass/components/dropdown.sass +81 -0
  89. data/node_modules/bulma/sass/components/level.sass +77 -0
  90. data/node_modules/bulma/sass/components/media.sass +52 -0
  91. data/node_modules/bulma/sass/components/menu.sass +57 -0
  92. data/node_modules/bulma/sass/components/message.sass +99 -0
  93. data/node_modules/bulma/sass/components/modal.sass +113 -0
  94. data/node_modules/bulma/sass/components/navbar.sass +441 -0
  95. data/node_modules/bulma/sass/components/pagination.sass +150 -0
  96. data/node_modules/bulma/sass/components/panel.sass +119 -0
  97. data/node_modules/bulma/sass/components/tabs.sass +174 -0
  98. data/node_modules/bulma/sass/elements/_all.sass +15 -0
  99. data/node_modules/bulma/sass/elements/box.sass +24 -0
  100. data/node_modules/bulma/sass/elements/button.sass +323 -0
  101. data/node_modules/bulma/sass/elements/container.sass +24 -0
  102. data/node_modules/bulma/sass/elements/content.sass +155 -0
  103. data/node_modules/bulma/sass/elements/form.sass +1 -0
  104. data/node_modules/bulma/sass/elements/icon.sass +21 -0
  105. data/node_modules/bulma/sass/elements/image.sass +71 -0
  106. data/node_modules/bulma/sass/elements/notification.sass +48 -0
  107. data/node_modules/bulma/sass/elements/other.sass +39 -0
  108. data/node_modules/bulma/sass/elements/progress.sass +67 -0
  109. data/node_modules/bulma/sass/elements/table.sass +129 -0
  110. data/node_modules/bulma/sass/elements/tag.sass +136 -0
  111. data/node_modules/bulma/sass/elements/title.sass +70 -0
  112. data/node_modules/bulma/sass/form/_all.sass +8 -0
  113. data/node_modules/bulma/sass/form/checkbox-radio.sass +21 -0
  114. data/node_modules/bulma/sass/form/file.sass +180 -0
  115. data/node_modules/bulma/sass/form/input-textarea.sass +64 -0
  116. data/node_modules/bulma/sass/form/select.sass +85 -0
  117. data/node_modules/bulma/sass/form/shared.sass +55 -0
  118. data/node_modules/bulma/sass/form/tools.sass +213 -0
  119. data/node_modules/bulma/sass/grid/_all.sass +4 -0
  120. data/node_modules/bulma/sass/grid/columns.sass +504 -0
  121. data/node_modules/bulma/sass/grid/tiles.sass +34 -0
  122. data/node_modules/bulma/sass/helpers/_all.sass +10 -0
  123. data/node_modules/bulma/sass/helpers/color.sass +37 -0
  124. data/node_modules/bulma/sass/helpers/float.sass +8 -0
  125. data/node_modules/bulma/sass/helpers/other.sass +8 -0
  126. data/node_modules/bulma/sass/helpers/overflow.sass +2 -0
  127. data/node_modules/bulma/sass/helpers/position.sass +5 -0
  128. data/node_modules/bulma/sass/helpers/spacing.sass +28 -0
  129. data/node_modules/bulma/sass/helpers/typography.sass +98 -0
  130. data/node_modules/bulma/sass/helpers/visibility.sass +122 -0
  131. data/node_modules/bulma/sass/layout/_all.sass +5 -0
  132. data/node_modules/bulma/sass/layout/footer.sass +9 -0
  133. data/node_modules/bulma/sass/layout/hero.sass +145 -0
  134. data/node_modules/bulma/sass/layout/section.sass +13 -0
  135. data/node_modules/bulma/sass/utilities/.DS_Store +0 -0
  136. data/node_modules/bulma/sass/utilities/_all.sass +8 -0
  137. data/node_modules/bulma/sass/utilities/animations.sass +5 -0
  138. data/node_modules/bulma/sass/utilities/controls.sass +50 -0
  139. data/node_modules/bulma/sass/utilities/derived-variables.scss +132 -0
  140. data/node_modules/bulma/sass/utilities/functions.sass +115 -0
  141. data/node_modules/bulma/sass/utilities/initial-variables.sass +78 -0
  142. data/node_modules/bulma/sass/utilities/mixins.sass +285 -0
  143. data/node_modules/fork-awesome/CHANGELOG.md +91 -0
  144. data/node_modules/fork-awesome/CONTRIBUTORS.md +31 -0
  145. data/node_modules/fork-awesome/LICENSES +452 -0
  146. data/node_modules/fork-awesome/README.md +93 -0
  147. data/node_modules/fork-awesome/css/fork-awesome.css +2573 -0
  148. data/node_modules/fork-awesome/css/fork-awesome.min.css +12 -0
  149. data/node_modules/fork-awesome/css/fork-awesome.min.css.map +1 -0
  150. data/node_modules/fork-awesome/css/v5-compat.css +446 -0
  151. data/node_modules/fork-awesome/css/v5-compat.min.css +12 -0
  152. data/node_modules/fork-awesome/css/v5-compat.min.css.map +1 -0
  153. data/node_modules/fork-awesome/fonts/forkawesome-webfont.eot +0 -0
  154. data/node_modules/fork-awesome/fonts/forkawesome-webfont.svg +2849 -0
  155. data/node_modules/fork-awesome/fonts/forkawesome-webfont.ttf +0 -0
  156. data/node_modules/fork-awesome/fonts/forkawesome-webfont.woff +0 -0
  157. data/node_modules/fork-awesome/fonts/forkawesome-webfont.woff2 +0 -0
  158. data/node_modules/fork-awesome/less/animated.less +34 -0
  159. data/node_modules/fork-awesome/less/bordered-pulled.less +25 -0
  160. data/node_modules/fork-awesome/less/core.less +12 -0
  161. data/node_modules/fork-awesome/less/fixed-width.less +6 -0
  162. data/node_modules/fork-awesome/less/fork-awesome.less +27 -0
  163. data/node_modules/fork-awesome/less/icons.less +879 -0
  164. data/node_modules/fork-awesome/less/larger.less +13 -0
  165. data/node_modules/fork-awesome/less/list.less +19 -0
  166. data/node_modules/fork-awesome/less/mixins.less +60 -0
  167. data/node_modules/fork-awesome/less/path.less +15 -0
  168. data/node_modules/fork-awesome/less/rotated-flipped.less +20 -0
  169. data/node_modules/fork-awesome/less/screen-reader.less +5 -0
  170. data/node_modules/fork-awesome/less/stacked.less +20 -0
  171. data/node_modules/fork-awesome/less/v5-compat.less +176 -0
  172. data/node_modules/fork-awesome/less/variables.less +890 -0
  173. data/node_modules/fork-awesome/package.json +49 -0
  174. data/node_modules/fork-awesome/scss/_animated.scss +34 -0
  175. data/node_modules/fork-awesome/scss/_bordered-pulled.scss +25 -0
  176. data/node_modules/fork-awesome/scss/_core.scss +12 -0
  177. data/node_modules/fork-awesome/scss/_fixed-width.scss +6 -0
  178. data/node_modules/fork-awesome/scss/_functions.scss +11 -0
  179. data/node_modules/fork-awesome/scss/_icons.scss +879 -0
  180. data/node_modules/fork-awesome/scss/_larger.scss +13 -0
  181. data/node_modules/fork-awesome/scss/_list.scss +19 -0
  182. data/node_modules/fork-awesome/scss/_mixins.scss +60 -0
  183. data/node_modules/fork-awesome/scss/_path.scss +15 -0
  184. data/node_modules/fork-awesome/scss/_rotated-flipped.scss +20 -0
  185. data/node_modules/fork-awesome/scss/_screen-reader.scss +5 -0
  186. data/node_modules/fork-awesome/scss/_stacked.scss +20 -0
  187. data/node_modules/fork-awesome/scss/_variables.scss +890 -0
  188. data/node_modules/fork-awesome/scss/fork-awesome.scss +28 -0
  189. data/package.json +32 -0
  190. data/papers.md +4 -0
  191. data/projects.md +4 -0
  192. data/resume.md +4 -0
  193. data/screenshot.png +0 -0
  194. data/scripts/build.sh +10 -0
  195. data/scripts/install.sh +4 -0
  196. data/scripts/validate.rb +28 -0
  197. data/vitrina.gemspec +23 -0
  198. metadata +199 -3
@@ -0,0 +1,85 @@
1
+ .select
2
+ display: inline-block
3
+ max-width: 100%
4
+ position: relative
5
+ vertical-align: top
6
+ &:not(.is-multiple)
7
+ height: $input-height
8
+ &:not(.is-multiple):not(.is-loading)
9
+ &::after
10
+ @extend %arrow
11
+ border-color: $input-arrow
12
+ +ltr-position(1.125em)
13
+ z-index: 4
14
+ &.is-rounded
15
+ select
16
+ border-radius: $radius-rounded
17
+ +ltr-property("padding", 1em, false)
18
+ select
19
+ @extend %input
20
+ cursor: pointer
21
+ display: block
22
+ font-size: 1em
23
+ max-width: 100%
24
+ outline: none
25
+ &::-ms-expand
26
+ display: none
27
+ &[disabled]:hover,
28
+ fieldset[disabled] &:hover
29
+ border-color: $input-disabled-border-color
30
+ &:not([multiple])
31
+ +ltr-property("padding", 2.5em)
32
+ &[multiple]
33
+ height: auto
34
+ padding: 0
35
+ option
36
+ padding: 0.5em 1em
37
+ // States
38
+ &:not(.is-multiple):not(.is-loading):hover
39
+ &::after
40
+ border-color: $input-hover-color
41
+ // Colors
42
+ @each $name, $pair in $colors
43
+ $color: nth($pair, 1)
44
+ &.is-#{$name}
45
+ &:not(:hover)::after
46
+ border-color: $color
47
+ select
48
+ border-color: $color
49
+ &:hover,
50
+ &.is-hovered
51
+ border-color: bulmaDarken($color, 5%)
52
+ &:focus,
53
+ &.is-focused,
54
+ &:active,
55
+ &.is-active
56
+ box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
57
+ // Sizes
58
+ &.is-small
59
+ +control-small
60
+ &.is-medium
61
+ +control-medium
62
+ &.is-large
63
+ +control-large
64
+ // Modifiers
65
+ &.is-disabled
66
+ &::after
67
+ border-color: $input-disabled-color
68
+ &.is-fullwidth
69
+ width: 100%
70
+ select
71
+ width: 100%
72
+ &.is-loading
73
+ &::after
74
+ @extend %loader
75
+ margin-top: 0
76
+ position: absolute
77
+ +ltr-position(0.625em)
78
+ top: 0.625em
79
+ transform: none
80
+ &.is-small:after
81
+ font-size: $size-small
82
+ &.is-medium:after
83
+ font-size: $size-medium
84
+ &.is-large:after
85
+ font-size: $size-large
@@ -0,0 +1,55 @@
1
+ $input-color: $text-strong !default
2
+ $input-background-color: $scheme-main !default
3
+ $input-border-color: $border !default
4
+ $input-height: $control-height !default
5
+ $input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
6
+ $input-placeholder-color: bulmaRgba($input-color, 0.3) !default
7
+
8
+ $input-hover-color: $text-strong !default
9
+ $input-hover-border-color: $border-hover !default
10
+
11
+ $input-focus-color: $text-strong !default
12
+ $input-focus-border-color: $link !default
13
+ $input-focus-box-shadow-size: 0 0 0 0.125em !default
14
+ $input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
15
+
16
+ $input-disabled-color: $text-light !default
17
+ $input-disabled-background-color: $background !default
18
+ $input-disabled-border-color: $background !default
19
+ $input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
20
+
21
+ $input-arrow: $link !default
22
+
23
+ $input-icon-color: $border !default
24
+ $input-icon-active-color: $text !default
25
+
26
+ $input-radius: $radius !default
27
+
28
+ =input
29
+ @extend %control
30
+ background-color: $input-background-color
31
+ border-color: $input-border-color
32
+ border-radius: $input-radius
33
+ color: $input-color
34
+ +placeholder
35
+ color: $input-placeholder-color
36
+ &:hover,
37
+ &.is-hovered
38
+ border-color: $input-hover-border-color
39
+ &:focus,
40
+ &.is-focused,
41
+ &:active,
42
+ &.is-active
43
+ border-color: $input-focus-border-color
44
+ box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
45
+ &[disabled],
46
+ fieldset[disabled] &
47
+ background-color: $input-disabled-background-color
48
+ border-color: $input-disabled-border-color
49
+ box-shadow: none
50
+ color: $input-disabled-color
51
+ +placeholder
52
+ color: $input-disabled-placeholder-color
53
+
54
+ %input
55
+ +input
@@ -0,0 +1,213 @@
1
+ $label-color: $text-strong !default
2
+ $label-weight: $weight-bold !default
3
+
4
+ $help-size: $size-small !default
5
+
6
+ .label
7
+ color: $label-color
8
+ display: block
9
+ font-size: $size-normal
10
+ font-weight: $label-weight
11
+ &:not(:last-child)
12
+ margin-bottom: 0.5em
13
+ // Sizes
14
+ &.is-small
15
+ font-size: $size-small
16
+ &.is-medium
17
+ font-size: $size-medium
18
+ &.is-large
19
+ font-size: $size-large
20
+
21
+ .help
22
+ display: block
23
+ font-size: $help-size
24
+ margin-top: 0.25rem
25
+ @each $name, $pair in $colors
26
+ $color: nth($pair, 1)
27
+ &.is-#{$name}
28
+ color: $color
29
+
30
+ // Containers
31
+
32
+ .field
33
+ &:not(:last-child)
34
+ margin-bottom: 0.75rem
35
+ // Modifiers
36
+ &.has-addons
37
+ display: flex
38
+ justify-content: flex-start
39
+ .control
40
+ &:not(:last-child)
41
+ +ltr-property("margin", -1px)
42
+ &:not(:first-child):not(:last-child)
43
+ .button,
44
+ .input,
45
+ .select select
46
+ border-radius: 0
47
+ &:first-child:not(:only-child)
48
+ .button,
49
+ .input,
50
+ .select select
51
+ +ltr
52
+ border-bottom-right-radius: 0
53
+ border-top-right-radius: 0
54
+ +rtl
55
+ border-bottom-left-radius: 0
56
+ border-top-left-radius: 0
57
+ &:last-child:not(:only-child)
58
+ .button,
59
+ .input,
60
+ .select select
61
+ +ltr
62
+ border-bottom-left-radius: 0
63
+ border-top-left-radius: 0
64
+ +rtl
65
+ border-bottom-right-radius: 0
66
+ border-top-right-radius: 0
67
+ .button,
68
+ .input,
69
+ .select select
70
+ &:not([disabled])
71
+ &:hover,
72
+ &.is-hovered
73
+ z-index: 2
74
+ &:focus,
75
+ &.is-focused,
76
+ &:active,
77
+ &.is-active
78
+ z-index: 3
79
+ &:hover
80
+ z-index: 4
81
+ &.is-expanded
82
+ flex-grow: 1
83
+ flex-shrink: 1
84
+ &.has-addons-centered
85
+ justify-content: center
86
+ &.has-addons-right
87
+ justify-content: flex-end
88
+ &.has-addons-fullwidth
89
+ .control
90
+ flex-grow: 1
91
+ flex-shrink: 0
92
+ &.is-grouped
93
+ display: flex
94
+ justify-content: flex-start
95
+ & > .control
96
+ flex-shrink: 0
97
+ &:not(:last-child)
98
+ margin-bottom: 0
99
+ +ltr-property("margin", 0.75rem)
100
+ &.is-expanded
101
+ flex-grow: 1
102
+ flex-shrink: 1
103
+ &.is-grouped-centered
104
+ justify-content: center
105
+ &.is-grouped-right
106
+ justify-content: flex-end
107
+ &.is-grouped-multiline
108
+ flex-wrap: wrap
109
+ & > .control
110
+ &:last-child,
111
+ &:not(:last-child)
112
+ margin-bottom: 0.75rem
113
+ &:last-child
114
+ margin-bottom: -0.75rem
115
+ &:not(:last-child)
116
+ margin-bottom: 0
117
+ &.is-horizontal
118
+ +tablet
119
+ display: flex
120
+
121
+ .field-label
122
+ .label
123
+ font-size: inherit
124
+ +mobile
125
+ margin-bottom: 0.5rem
126
+ +tablet
127
+ flex-basis: 0
128
+ flex-grow: 1
129
+ flex-shrink: 0
130
+ +ltr-property("margin", 1.5rem)
131
+ text-align: right
132
+ &.is-small
133
+ font-size: $size-small
134
+ padding-top: 0.375em
135
+ &.is-normal
136
+ padding-top: 0.375em
137
+ &.is-medium
138
+ font-size: $size-medium
139
+ padding-top: 0.375em
140
+ &.is-large
141
+ font-size: $size-large
142
+ padding-top: 0.375em
143
+
144
+ .field-body
145
+ .field .field
146
+ margin-bottom: 0
147
+ +tablet
148
+ display: flex
149
+ flex-basis: 0
150
+ flex-grow: 5
151
+ flex-shrink: 1
152
+ .field
153
+ margin-bottom: 0
154
+ & > .field
155
+ flex-shrink: 1
156
+ &:not(.is-narrow)
157
+ flex-grow: 1
158
+ &:not(:last-child)
159
+ +ltr-property("margin", 0.75rem)
160
+
161
+ .control
162
+ box-sizing: border-box
163
+ clear: both
164
+ font-size: $size-normal
165
+ position: relative
166
+ text-align: inherit
167
+ // Modifiers
168
+ &.has-icons-left,
169
+ &.has-icons-right
170
+ .input,
171
+ .select
172
+ &:focus
173
+ & ~ .icon
174
+ color: $input-icon-active-color
175
+ &.is-small ~ .icon
176
+ font-size: $size-small
177
+ &.is-medium ~ .icon
178
+ font-size: $size-medium
179
+ &.is-large ~ .icon
180
+ font-size: $size-large
181
+ .icon
182
+ color: $input-icon-color
183
+ height: $input-height
184
+ pointer-events: none
185
+ position: absolute
186
+ top: 0
187
+ width: $input-height
188
+ z-index: 4
189
+ &.has-icons-left
190
+ .input,
191
+ .select select
192
+ padding-left: $input-height
193
+ .icon.is-left
194
+ left: 0
195
+ &.has-icons-right
196
+ .input,
197
+ .select select
198
+ padding-right: $input-height
199
+ .icon.is-right
200
+ right: 0
201
+ &.is-loading
202
+ &::after
203
+ @extend %loader
204
+ position: absolute !important
205
+ +ltr-position(0.625em)
206
+ top: 0.625em
207
+ z-index: 4
208
+ &.is-small:after
209
+ font-size: $size-small
210
+ &.is-medium:after
211
+ font-size: $size-medium
212
+ &.is-large:after
213
+ font-size: $size-large
@@ -0,0 +1,4 @@
1
+ @charset "utf-8"
2
+
3
+ @import "columns.sass"
4
+ @import "tiles.sass"
@@ -0,0 +1,504 @@
1
+ $column-gap: 0.75rem !default
2
+
3
+ .column
4
+ display: block
5
+ flex-basis: 0
6
+ flex-grow: 1
7
+ flex-shrink: 1
8
+ padding: $column-gap
9
+ .columns.is-mobile > &.is-narrow
10
+ flex: none
11
+ .columns.is-mobile > &.is-full
12
+ flex: none
13
+ width: 100%
14
+ .columns.is-mobile > &.is-three-quarters
15
+ flex: none
16
+ width: 75%
17
+ .columns.is-mobile > &.is-two-thirds
18
+ flex: none
19
+ width: 66.6666%
20
+ .columns.is-mobile > &.is-half
21
+ flex: none
22
+ width: 50%
23
+ .columns.is-mobile > &.is-one-third
24
+ flex: none
25
+ width: 33.3333%
26
+ .columns.is-mobile > &.is-one-quarter
27
+ flex: none
28
+ width: 25%
29
+ .columns.is-mobile > &.is-one-fifth
30
+ flex: none
31
+ width: 20%
32
+ .columns.is-mobile > &.is-two-fifths
33
+ flex: none
34
+ width: 40%
35
+ .columns.is-mobile > &.is-three-fifths
36
+ flex: none
37
+ width: 60%
38
+ .columns.is-mobile > &.is-four-fifths
39
+ flex: none
40
+ width: 80%
41
+ .columns.is-mobile > &.is-offset-three-quarters
42
+ margin-left: 75%
43
+ .columns.is-mobile > &.is-offset-two-thirds
44
+ margin-left: 66.6666%
45
+ .columns.is-mobile > &.is-offset-half
46
+ margin-left: 50%
47
+ .columns.is-mobile > &.is-offset-one-third
48
+ margin-left: 33.3333%
49
+ .columns.is-mobile > &.is-offset-one-quarter
50
+ margin-left: 25%
51
+ .columns.is-mobile > &.is-offset-one-fifth
52
+ margin-left: 20%
53
+ .columns.is-mobile > &.is-offset-two-fifths
54
+ margin-left: 40%
55
+ .columns.is-mobile > &.is-offset-three-fifths
56
+ margin-left: 60%
57
+ .columns.is-mobile > &.is-offset-four-fifths
58
+ margin-left: 80%
59
+ @for $i from 0 through 12
60
+ .columns.is-mobile > &.is-#{$i}
61
+ flex: none
62
+ width: percentage($i / 12)
63
+ .columns.is-mobile > &.is-offset-#{$i}
64
+ margin-left: percentage($i / 12)
65
+ +mobile
66
+ &.is-narrow-mobile
67
+ flex: none
68
+ &.is-full-mobile
69
+ flex: none
70
+ width: 100%
71
+ &.is-three-quarters-mobile
72
+ flex: none
73
+ width: 75%
74
+ &.is-two-thirds-mobile
75
+ flex: none
76
+ width: 66.6666%
77
+ &.is-half-mobile
78
+ flex: none
79
+ width: 50%
80
+ &.is-one-third-mobile
81
+ flex: none
82
+ width: 33.3333%
83
+ &.is-one-quarter-mobile
84
+ flex: none
85
+ width: 25%
86
+ &.is-one-fifth-mobile
87
+ flex: none
88
+ width: 20%
89
+ &.is-two-fifths-mobile
90
+ flex: none
91
+ width: 40%
92
+ &.is-three-fifths-mobile
93
+ flex: none
94
+ width: 60%
95
+ &.is-four-fifths-mobile
96
+ flex: none
97
+ width: 80%
98
+ &.is-offset-three-quarters-mobile
99
+ margin-left: 75%
100
+ &.is-offset-two-thirds-mobile
101
+ margin-left: 66.6666%
102
+ &.is-offset-half-mobile
103
+ margin-left: 50%
104
+ &.is-offset-one-third-mobile
105
+ margin-left: 33.3333%
106
+ &.is-offset-one-quarter-mobile
107
+ margin-left: 25%
108
+ &.is-offset-one-fifth-mobile
109
+ margin-left: 20%
110
+ &.is-offset-two-fifths-mobile
111
+ margin-left: 40%
112
+ &.is-offset-three-fifths-mobile
113
+ margin-left: 60%
114
+ &.is-offset-four-fifths-mobile
115
+ margin-left: 80%
116
+ @for $i from 0 through 12
117
+ &.is-#{$i}-mobile
118
+ flex: none
119
+ width: percentage($i / 12)
120
+ &.is-offset-#{$i}-mobile
121
+ margin-left: percentage($i / 12)
122
+ +tablet
123
+ &.is-narrow,
124
+ &.is-narrow-tablet
125
+ flex: none
126
+ &.is-full,
127
+ &.is-full-tablet
128
+ flex: none
129
+ width: 100%
130
+ &.is-three-quarters,
131
+ &.is-three-quarters-tablet
132
+ flex: none
133
+ width: 75%
134
+ &.is-two-thirds,
135
+ &.is-two-thirds-tablet
136
+ flex: none
137
+ width: 66.6666%
138
+ &.is-half,
139
+ &.is-half-tablet
140
+ flex: none
141
+ width: 50%
142
+ &.is-one-third,
143
+ &.is-one-third-tablet
144
+ flex: none
145
+ width: 33.3333%
146
+ &.is-one-quarter,
147
+ &.is-one-quarter-tablet
148
+ flex: none
149
+ width: 25%
150
+ &.is-one-fifth,
151
+ &.is-one-fifth-tablet
152
+ flex: none
153
+ width: 20%
154
+ &.is-two-fifths,
155
+ &.is-two-fifths-tablet
156
+ flex: none
157
+ width: 40%
158
+ &.is-three-fifths,
159
+ &.is-three-fifths-tablet
160
+ flex: none
161
+ width: 60%
162
+ &.is-four-fifths,
163
+ &.is-four-fifths-tablet
164
+ flex: none
165
+ width: 80%
166
+ &.is-offset-three-quarters,
167
+ &.is-offset-three-quarters-tablet
168
+ margin-left: 75%
169
+ &.is-offset-two-thirds,
170
+ &.is-offset-two-thirds-tablet
171
+ margin-left: 66.6666%
172
+ &.is-offset-half,
173
+ &.is-offset-half-tablet
174
+ margin-left: 50%
175
+ &.is-offset-one-third,
176
+ &.is-offset-one-third-tablet
177
+ margin-left: 33.3333%
178
+ &.is-offset-one-quarter,
179
+ &.is-offset-one-quarter-tablet
180
+ margin-left: 25%
181
+ &.is-offset-one-fifth,
182
+ &.is-offset-one-fifth-tablet
183
+ margin-left: 20%
184
+ &.is-offset-two-fifths,
185
+ &.is-offset-two-fifths-tablet
186
+ margin-left: 40%
187
+ &.is-offset-three-fifths,
188
+ &.is-offset-three-fifths-tablet
189
+ margin-left: 60%
190
+ &.is-offset-four-fifths,
191
+ &.is-offset-four-fifths-tablet
192
+ margin-left: 80%
193
+ @for $i from 0 through 12
194
+ &.is-#{$i},
195
+ &.is-#{$i}-tablet
196
+ flex: none
197
+ width: percentage($i / 12)
198
+ &.is-offset-#{$i},
199
+ &.is-offset-#{$i}-tablet
200
+ margin-left: percentage($i / 12)
201
+ +touch
202
+ &.is-narrow-touch
203
+ flex: none
204
+ &.is-full-touch
205
+ flex: none
206
+ width: 100%
207
+ &.is-three-quarters-touch
208
+ flex: none
209
+ width: 75%
210
+ &.is-two-thirds-touch
211
+ flex: none
212
+ width: 66.6666%
213
+ &.is-half-touch
214
+ flex: none
215
+ width: 50%
216
+ &.is-one-third-touch
217
+ flex: none
218
+ width: 33.3333%
219
+ &.is-one-quarter-touch
220
+ flex: none
221
+ width: 25%
222
+ &.is-one-fifth-touch
223
+ flex: none
224
+ width: 20%
225
+ &.is-two-fifths-touch
226
+ flex: none
227
+ width: 40%
228
+ &.is-three-fifths-touch
229
+ flex: none
230
+ width: 60%
231
+ &.is-four-fifths-touch
232
+ flex: none
233
+ width: 80%
234
+ &.is-offset-three-quarters-touch
235
+ margin-left: 75%
236
+ &.is-offset-two-thirds-touch
237
+ margin-left: 66.6666%
238
+ &.is-offset-half-touch
239
+ margin-left: 50%
240
+ &.is-offset-one-third-touch
241
+ margin-left: 33.3333%
242
+ &.is-offset-one-quarter-touch
243
+ margin-left: 25%
244
+ &.is-offset-one-fifth-touch
245
+ margin-left: 20%
246
+ &.is-offset-two-fifths-touch
247
+ margin-left: 40%
248
+ &.is-offset-three-fifths-touch
249
+ margin-left: 60%
250
+ &.is-offset-four-fifths-touch
251
+ margin-left: 80%
252
+ @for $i from 0 through 12
253
+ &.is-#{$i}-touch
254
+ flex: none
255
+ width: percentage($i / 12)
256
+ &.is-offset-#{$i}-touch
257
+ margin-left: percentage($i / 12)
258
+ +desktop
259
+ &.is-narrow-desktop
260
+ flex: none
261
+ &.is-full-desktop
262
+ flex: none
263
+ width: 100%
264
+ &.is-three-quarters-desktop
265
+ flex: none
266
+ width: 75%
267
+ &.is-two-thirds-desktop
268
+ flex: none
269
+ width: 66.6666%
270
+ &.is-half-desktop
271
+ flex: none
272
+ width: 50%
273
+ &.is-one-third-desktop
274
+ flex: none
275
+ width: 33.3333%
276
+ &.is-one-quarter-desktop
277
+ flex: none
278
+ width: 25%
279
+ &.is-one-fifth-desktop
280
+ flex: none
281
+ width: 20%
282
+ &.is-two-fifths-desktop
283
+ flex: none
284
+ width: 40%
285
+ &.is-three-fifths-desktop
286
+ flex: none
287
+ width: 60%
288
+ &.is-four-fifths-desktop
289
+ flex: none
290
+ width: 80%
291
+ &.is-offset-three-quarters-desktop
292
+ margin-left: 75%
293
+ &.is-offset-two-thirds-desktop
294
+ margin-left: 66.6666%
295
+ &.is-offset-half-desktop
296
+ margin-left: 50%
297
+ &.is-offset-one-third-desktop
298
+ margin-left: 33.3333%
299
+ &.is-offset-one-quarter-desktop
300
+ margin-left: 25%
301
+ &.is-offset-one-fifth-desktop
302
+ margin-left: 20%
303
+ &.is-offset-two-fifths-desktop
304
+ margin-left: 40%
305
+ &.is-offset-three-fifths-desktop
306
+ margin-left: 60%
307
+ &.is-offset-four-fifths-desktop
308
+ margin-left: 80%
309
+ @for $i from 0 through 12
310
+ &.is-#{$i}-desktop
311
+ flex: none
312
+ width: percentage($i / 12)
313
+ &.is-offset-#{$i}-desktop
314
+ margin-left: percentage($i / 12)
315
+ +widescreen
316
+ &.is-narrow-widescreen
317
+ flex: none
318
+ &.is-full-widescreen
319
+ flex: none
320
+ width: 100%
321
+ &.is-three-quarters-widescreen
322
+ flex: none
323
+ width: 75%
324
+ &.is-two-thirds-widescreen
325
+ flex: none
326
+ width: 66.6666%
327
+ &.is-half-widescreen
328
+ flex: none
329
+ width: 50%
330
+ &.is-one-third-widescreen
331
+ flex: none
332
+ width: 33.3333%
333
+ &.is-one-quarter-widescreen
334
+ flex: none
335
+ width: 25%
336
+ &.is-one-fifth-widescreen
337
+ flex: none
338
+ width: 20%
339
+ &.is-two-fifths-widescreen
340
+ flex: none
341
+ width: 40%
342
+ &.is-three-fifths-widescreen
343
+ flex: none
344
+ width: 60%
345
+ &.is-four-fifths-widescreen
346
+ flex: none
347
+ width: 80%
348
+ &.is-offset-three-quarters-widescreen
349
+ margin-left: 75%
350
+ &.is-offset-two-thirds-widescreen
351
+ margin-left: 66.6666%
352
+ &.is-offset-half-widescreen
353
+ margin-left: 50%
354
+ &.is-offset-one-third-widescreen
355
+ margin-left: 33.3333%
356
+ &.is-offset-one-quarter-widescreen
357
+ margin-left: 25%
358
+ &.is-offset-one-fifth-widescreen
359
+ margin-left: 20%
360
+ &.is-offset-two-fifths-widescreen
361
+ margin-left: 40%
362
+ &.is-offset-three-fifths-widescreen
363
+ margin-left: 60%
364
+ &.is-offset-four-fifths-widescreen
365
+ margin-left: 80%
366
+ @for $i from 0 through 12
367
+ &.is-#{$i}-widescreen
368
+ flex: none
369
+ width: percentage($i / 12)
370
+ &.is-offset-#{$i}-widescreen
371
+ margin-left: percentage($i / 12)
372
+ +fullhd
373
+ &.is-narrow-fullhd
374
+ flex: none
375
+ &.is-full-fullhd
376
+ flex: none
377
+ width: 100%
378
+ &.is-three-quarters-fullhd
379
+ flex: none
380
+ width: 75%
381
+ &.is-two-thirds-fullhd
382
+ flex: none
383
+ width: 66.6666%
384
+ &.is-half-fullhd
385
+ flex: none
386
+ width: 50%
387
+ &.is-one-third-fullhd
388
+ flex: none
389
+ width: 33.3333%
390
+ &.is-one-quarter-fullhd
391
+ flex: none
392
+ width: 25%
393
+ &.is-one-fifth-fullhd
394
+ flex: none
395
+ width: 20%
396
+ &.is-two-fifths-fullhd
397
+ flex: none
398
+ width: 40%
399
+ &.is-three-fifths-fullhd
400
+ flex: none
401
+ width: 60%
402
+ &.is-four-fifths-fullhd
403
+ flex: none
404
+ width: 80%
405
+ &.is-offset-three-quarters-fullhd
406
+ margin-left: 75%
407
+ &.is-offset-two-thirds-fullhd
408
+ margin-left: 66.6666%
409
+ &.is-offset-half-fullhd
410
+ margin-left: 50%
411
+ &.is-offset-one-third-fullhd
412
+ margin-left: 33.3333%
413
+ &.is-offset-one-quarter-fullhd
414
+ margin-left: 25%
415
+ &.is-offset-one-fifth-fullhd
416
+ margin-left: 20%
417
+ &.is-offset-two-fifths-fullhd
418
+ margin-left: 40%
419
+ &.is-offset-three-fifths-fullhd
420
+ margin-left: 60%
421
+ &.is-offset-four-fifths-fullhd
422
+ margin-left: 80%
423
+ @for $i from 0 through 12
424
+ &.is-#{$i}-fullhd
425
+ flex: none
426
+ width: percentage($i / 12)
427
+ &.is-offset-#{$i}-fullhd
428
+ margin-left: percentage($i / 12)
429
+
430
+ .columns
431
+ margin-left: (-$column-gap)
432
+ margin-right: (-$column-gap)
433
+ margin-top: (-$column-gap)
434
+ &:last-child
435
+ margin-bottom: (-$column-gap)
436
+ &:not(:last-child)
437
+ margin-bottom: calc(1.5rem - #{$column-gap})
438
+ // Modifiers
439
+ &.is-centered
440
+ justify-content: center
441
+ &.is-gapless
442
+ margin-left: 0
443
+ margin-right: 0
444
+ margin-top: 0
445
+ & > .column
446
+ margin: 0
447
+ padding: 0 !important
448
+ &:not(:last-child)
449
+ margin-bottom: 1.5rem
450
+ &:last-child
451
+ margin-bottom: 0
452
+ &.is-mobile
453
+ display: flex
454
+ &.is-multiline
455
+ flex-wrap: wrap
456
+ &.is-vcentered
457
+ align-items: center
458
+ // Responsiveness
459
+ +tablet
460
+ &:not(.is-desktop)
461
+ display: flex
462
+ +desktop
463
+ // Modifiers
464
+ &.is-desktop
465
+ display: flex
466
+
467
+ @if $variable-columns
468
+ .columns.is-variable
469
+ --columnGap: 0.75rem
470
+ margin-left: calc(-1 * var(--columnGap))
471
+ margin-right: calc(-1 * var(--columnGap))
472
+ .column
473
+ padding-left: var(--columnGap)
474
+ padding-right: var(--columnGap)
475
+ @for $i from 0 through 8
476
+ &.is-#{$i}
477
+ --columnGap: #{$i * 0.25rem}
478
+ +mobile
479
+ &.is-#{$i}-mobile
480
+ --columnGap: #{$i * 0.25rem}
481
+ +tablet
482
+ &.is-#{$i}-tablet
483
+ --columnGap: #{$i * 0.25rem}
484
+ +tablet-only
485
+ &.is-#{$i}-tablet-only
486
+ --columnGap: #{$i * 0.25rem}
487
+ +touch
488
+ &.is-#{$i}-touch
489
+ --columnGap: #{$i * 0.25rem}
490
+ +desktop
491
+ &.is-#{$i}-desktop
492
+ --columnGap: #{$i * 0.25rem}
493
+ +desktop-only
494
+ &.is-#{$i}-desktop-only
495
+ --columnGap: #{$i * 0.25rem}
496
+ +widescreen
497
+ &.is-#{$i}-widescreen
498
+ --columnGap: #{$i * 0.25rem}
499
+ +widescreen-only
500
+ &.is-#{$i}-widescreen-only
501
+ --columnGap: #{$i * 0.25rem}
502
+ +fullhd
503
+ &.is-#{$i}-fullhd
504
+ --columnGap: #{$i * 0.25rem}