ols-theme 0.8.0 → 0.9.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 (146) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.txt +21 -21
  3. data/README.md +50 -50
  4. data/_includes/announcement-blog-metadata.html +78 -0
  5. data/_includes/cohort-loop.html +41 -0
  6. data/_includes/cohort-metadata.html +34 -0
  7. data/_includes/default-footer.html +3 -3
  8. data/_includes/default-header.html +33 -34
  9. data/_includes/detailed-schedule.md +11 -11
  10. data/_includes/external-entities.html +1 -1
  11. data/_includes/overall-schedule.md +5 -5
  12. data/_includes/people.html +79 -81
  13. data/_includes/projects-participants.html +61 -0
  14. data/_includes/schedule.md +123 -2
  15. data/_includes/timeline.md +24 -24
  16. data/_includes/toc.html +11 -11
  17. data/_includes/week.md +54 -49
  18. data/_layouts/base.html +64 -66
  19. data/_layouts/default.html +39 -37
  20. data/_layouts/index.html +7 -0
  21. data/_layouts/page.html +8 -8
  22. data/_layouts/people.html +105 -373
  23. data/_layouts/post.html +5 -5
  24. data/_layouts/posts.html +51 -51
  25. data/_sass/bulma/CHANGELOG.md +1254 -1254
  26. data/_sass/bulma/LICENSE +21 -21
  27. data/_sass/bulma/README.md +124 -124
  28. data/_sass/bulma/bulma.sass +9 -9
  29. data/_sass/bulma/css/bulma.css +10598 -10598
  30. data/_sass/bulma/package.json +52 -52
  31. data/_sass/bulma/sass/base/_all.sass +5 -5
  32. data/_sass/bulma/sass/base/generic.sass +142 -142
  33. data/_sass/bulma/sass/base/helpers.sass +281 -281
  34. data/_sass/bulma/sass/base/minireset.sass +85 -85
  35. data/_sass/bulma/sass/components/_all.sass +15 -15
  36. data/_sass/bulma/sass/components/breadcrumb.sass +75 -75
  37. data/_sass/bulma/sass/components/card.sass +79 -79
  38. data/_sass/bulma/sass/components/dropdown.sass +81 -81
  39. data/_sass/bulma/sass/components/level.sass +77 -77
  40. data/_sass/bulma/sass/components/list.sass +39 -39
  41. data/_sass/bulma/sass/components/media.sass +48 -48
  42. data/_sass/bulma/sass/components/menu.sass +57 -57
  43. data/_sass/bulma/sass/components/message.sass +87 -87
  44. data/_sass/bulma/sass/components/modal.sass +113 -113
  45. data/_sass/bulma/sass/components/navbar.sass +443 -443
  46. data/_sass/bulma/sass/components/pagination.sass +149 -149
  47. data/_sass/bulma/sass/components/panel.sass +103 -103
  48. data/_sass/bulma/sass/components/tabs.sass +151 -151
  49. data/_sass/bulma/sass/elements/_all.sass +15 -15
  50. data/_sass/bulma/sass/elements/box.sass +24 -24
  51. data/_sass/bulma/sass/elements/button.sass +305 -305
  52. data/_sass/bulma/sass/elements/container.sass +23 -23
  53. data/_sass/bulma/sass/elements/content.sass +155 -155
  54. data/_sass/bulma/sass/elements/form.sass +1 -1
  55. data/_sass/bulma/sass/elements/icon.sass +21 -21
  56. data/_sass/bulma/sass/elements/image.sass +69 -69
  57. data/_sass/bulma/sass/elements/notification.sass +35 -35
  58. data/_sass/bulma/sass/elements/other.sass +39 -39
  59. data/_sass/bulma/sass/elements/progress.sass +67 -67
  60. data/_sass/bulma/sass/elements/table.sass +127 -127
  61. data/_sass/bulma/sass/elements/tag.sass +121 -121
  62. data/_sass/bulma/sass/elements/title.sass +70 -70
  63. data/_sass/bulma/sass/form/_all.sass +8 -8
  64. data/_sass/bulma/sass/form/checkbox-radio.sass +21 -21
  65. data/_sass/bulma/sass/form/file.sass +180 -180
  66. data/_sass/bulma/sass/form/input-textarea.sass +60 -60
  67. data/_sass/bulma/sass/form/select.sass +85 -85
  68. data/_sass/bulma/sass/form/shared.sass +55 -55
  69. data/_sass/bulma/sass/form/tools.sass +205 -205
  70. data/_sass/bulma/sass/grid/_all.sass +4 -4
  71. data/_sass/bulma/sass/grid/columns.sass +504 -504
  72. data/_sass/bulma/sass/grid/tiles.sass +34 -34
  73. data/_sass/bulma/sass/layout/_all.sass +5 -5
  74. data/_sass/bulma/sass/layout/footer.sass +9 -9
  75. data/_sass/bulma/sass/layout/hero.sass +143 -143
  76. data/_sass/bulma/sass/layout/section.sass +13 -13
  77. data/_sass/bulma/sass/utilities/_all.sass +8 -8
  78. data/_sass/bulma/sass/utilities/animations.sass +5 -5
  79. data/_sass/bulma/sass/utilities/controls.sass +50 -50
  80. data/_sass/bulma/sass/utilities/derived-variables.sass +85 -85
  81. data/_sass/bulma/sass/utilities/functions.sass +62 -62
  82. data/_sass/bulma/sass/utilities/initial-variables.sass +76 -76
  83. data/_sass/bulma/sass/utilities/mixins.sass +261 -261
  84. data/_sass/bulma-collapsible.sass +15 -0
  85. metadata +9 -64
  86. data/assets/css/custom.scss +0 -422
  87. data/assets/images/2019-09-24-application.png +0 -0
  88. data/assets/images/2019-10-18-projects.jpg +0 -0
  89. data/assets/images/2019-10-21-storytelling.jpeg +0 -0
  90. data/assets/images/2019-11-13-difference-with-elife-innovation-leaders.jpg +0 -0
  91. data/assets/images/2019-11-25-blog2.png +0 -0
  92. data/assets/images/2019-11-25-blog3.png +0 -0
  93. data/assets/images/2019-11-25-blog4.png +0 -0
  94. data/assets/images/2019-11-25-blog5.png +0 -0
  95. data/assets/images/2019-11-25-blog6.png +0 -0
  96. data/assets/images/2019-11-25-header-expert.jpeg +0 -0
  97. data/assets/images/2020-ally-training.jpg +0 -0
  98. data/assets/images/2021-04-30-ols-2-blog-2.png +0 -0
  99. data/assets/images/2021-04-30-ols-2-blog.png +0 -0
  100. data/assets/images/2021-12-21-wt-open-research-fund-header.png +0 -0
  101. data/assets/images/2022-01-04-esthers-mentoring-blog-illustration.jpg +0 -0
  102. data/assets/images/2022-01-27-ols-czi-funding.jpg +0 -0
  103. data/assets/images/2022-02-18-for-hire.jpg +0 -0
  104. data/assets/images/2022-04-01-header-image-speed-blod-nadine.jpg +0 -0
  105. data/assets/images/2022-05-13-os-hobby-blog.jpg +0 -0
  106. data/assets/images/2022-07-18-ismaelkg-crinkle.png +0 -0
  107. data/assets/images/2022-07-18-ismaelkg-timeline-image.png +0 -0
  108. data/assets/images/2022-07-18-ismaelkg-watches.jpg +0 -0
  109. data/assets/images/2022-07-18-osmooc-logo.png +0 -0
  110. data/assets/images/2022-07-18-osmooc-modules.png +0 -0
  111. data/assets/images/2022-07-18-tudelft-history.png +0 -0
  112. data/assets/images/2022-07-18-twitter.png +0 -0
  113. data/assets/images/2022-08-adi-goldstein-unsplash.jpg +0 -0
  114. data/assets/images/2022-08-paz-meme.png +0 -0
  115. data/assets/images/2022-08-paz.jpg +0 -0
  116. data/assets/images/2022-12-andrea-sanchez.jpg +0 -0
  117. data/assets/images/2022-12-ecg-grant-announcement.png +0 -0
  118. data/assets/images/2022-12-jon-tyson-unsplash.jpg +0 -0
  119. data/assets/images/2022-12-melissa-black.jpg +0 -0
  120. data/assets/images/2022-12-mitchell-luo-unsplash.jpg +0 -0
  121. data/assets/images/2022-12-ols-resident-fellows.jpg +0 -0
  122. data/assets/images/2022-12-pexels-linda-ellershein.jpg +0 -0
  123. data/assets/images/2022-12-reina-camacho.png +0 -0
  124. data/assets/images/2022-WT-OLS-Job-Description.pdf +0 -0
  125. data/assets/images/2023-02-1-milad-fakurian-0n1pmev3w2A-unsplash.jpg +0 -0
  126. data/assets/images/2023-04-18-introducing-the-new-OLS/colourrefresh.png +0 -0
  127. data/assets/images/2023-04-18-introducing-the-new-OLS/identity-poster.png +0 -0
  128. data/assets/images/2023-04-18-introducing-the-new-OLS/logo-refresh.png +0 -0
  129. data/assets/images/2023-04-18-introducing-the-new-OLS/logomark.png +0 -0
  130. data/assets/images/2023-04-18-introducing-the-new-OLS/open-by-design.png +0 -0
  131. data/assets/images/2023-04-18-introducing-the-new-OLS/open-seeds.png +0 -0
  132. data/assets/images/2023-05-debs.jpg +0 -0
  133. data/assets/images/2023-05-taj.jpg +0 -0
  134. data/assets/images/about.jpg +0 -0
  135. data/assets/images/code-of-conduct.jpg +0 -0
  136. data/assets/images/index.jpg +0 -0
  137. data/assets/images/logo.png +0 -0
  138. data/assets/images/ols-1/project-participants.jpg +0 -0
  139. data/assets/images/organizations/denbi.png +0 -0
  140. data/assets/images/organizations/elixir.png +0 -0
  141. data/assets/images/organizations/mozilla.jpg +0 -0
  142. data/assets/images/posts.jpg +0 -0
  143. data/assets/images/schedule.png +0 -0
  144. data/assets/images/syllabus.jpg +0 -0
  145. data/assets/js/posts.js +0 -21
  146. data/assets/js/scripts.js +0 -52
@@ -1,85 +1,85 @@
1
- $primary: $turquoise !default
2
-
3
- $info: $cyan !default
4
- $success: $green !default
5
- $warning: $yellow !default
6
- $danger: $red !default
7
-
8
- $light: $white-ter !default
9
- $dark: $grey-darker !default
10
-
11
- // Invert colors
12
-
13
- $orange-invert: findColorInvert($orange) !default
14
- $yellow-invert: findColorInvert($yellow) !default
15
- $green-invert: findColorInvert($green) !default
16
- $turquoise-invert: findColorInvert($turquoise) !default
17
- $cyan-invert: findColorInvert($cyan) !default
18
- $blue-invert: findColorInvert($blue) !default
19
- $purple-invert: findColorInvert($purple) !default
20
- $red-invert: findColorInvert($red) !default
21
-
22
- $primary-invert: $turquoise-invert !default
23
- $info-invert: $cyan-invert !default
24
- $success-invert: $green-invert !default
25
- $warning-invert: $yellow-invert !default
26
- $danger-invert: $red-invert !default
27
- $light-invert: $dark !default
28
- $dark-invert: $light !default
29
-
30
- // General colors
31
-
32
- $background: $white-ter !default
33
-
34
- $border: $grey-lighter !default
35
- $border-hover: $grey-light !default
36
-
37
- // Text colors
38
-
39
- $text: $grey-dark !default
40
- $text-invert: findColorInvert($text) !default
41
- $text-light: $grey !default
42
- $text-strong: $grey-darker !default
43
-
44
- // Code colors
45
-
46
- $code: $red !default
47
- $code-background: $background !default
48
-
49
- $pre: $text !default
50
- $pre-background: $background !default
51
-
52
- // Link colors
53
-
54
- $link: $blue !default
55
- $link-invert: $blue-invert !default
56
- $link-visited: $purple !default
57
-
58
- $link-hover: $grey-darker !default
59
- $link-hover-border: $grey-light !default
60
-
61
- $link-focus: $grey-darker !default
62
- $link-focus-border: $blue !default
63
-
64
- $link-active: $grey-darker !default
65
- $link-active-border: $grey-dark !default
66
-
67
- // Typography
68
-
69
- $family-primary: $family-sans-serif !default
70
- $family-secondary: $family-sans-serif !default
71
- $family-code: $family-monospace !default
72
-
73
- $size-small: $size-7 !default
74
- $size-normal: $size-6 !default
75
- $size-medium: $size-5 !default
76
- $size-large: $size-4 !default
77
-
78
- // Lists and maps
79
- $custom-colors: null !default
80
- $custom-shades: null !default
81
-
82
- $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
83
- $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
84
-
85
- $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
1
+ $primary: $turquoise !default
2
+
3
+ $info: $cyan !default
4
+ $success: $green !default
5
+ $warning: $yellow !default
6
+ $danger: $red !default
7
+
8
+ $light: $white-ter !default
9
+ $dark: $grey-darker !default
10
+
11
+ // Invert colors
12
+
13
+ $orange-invert: findColorInvert($orange) !default
14
+ $yellow-invert: findColorInvert($yellow) !default
15
+ $green-invert: findColorInvert($green) !default
16
+ $turquoise-invert: findColorInvert($turquoise) !default
17
+ $cyan-invert: findColorInvert($cyan) !default
18
+ $blue-invert: findColorInvert($blue) !default
19
+ $purple-invert: findColorInvert($purple) !default
20
+ $red-invert: findColorInvert($red) !default
21
+
22
+ $primary-invert: $turquoise-invert !default
23
+ $info-invert: $cyan-invert !default
24
+ $success-invert: $green-invert !default
25
+ $warning-invert: $yellow-invert !default
26
+ $danger-invert: $red-invert !default
27
+ $light-invert: $dark !default
28
+ $dark-invert: $light !default
29
+
30
+ // General colors
31
+
32
+ $background: $white-ter !default
33
+
34
+ $border: $grey-lighter !default
35
+ $border-hover: $grey-light !default
36
+
37
+ // Text colors
38
+
39
+ $text: $grey-dark !default
40
+ $text-invert: findColorInvert($text) !default
41
+ $text-light: $grey !default
42
+ $text-strong: $grey-darker !default
43
+
44
+ // Code colors
45
+
46
+ $code: $red !default
47
+ $code-background: $background !default
48
+
49
+ $pre: $text !default
50
+ $pre-background: $background !default
51
+
52
+ // Link colors
53
+
54
+ $link: $blue !default
55
+ $link-invert: $blue-invert !default
56
+ $link-visited: $purple !default
57
+
58
+ $link-hover: $grey-darker !default
59
+ $link-hover-border: $grey-light !default
60
+
61
+ $link-focus: $grey-darker !default
62
+ $link-focus-border: $blue !default
63
+
64
+ $link-active: $grey-darker !default
65
+ $link-active-border: $grey-dark !default
66
+
67
+ // Typography
68
+
69
+ $family-primary: $family-sans-serif !default
70
+ $family-secondary: $family-sans-serif !default
71
+ $family-code: $family-monospace !default
72
+
73
+ $size-small: $size-7 !default
74
+ $size-normal: $size-6 !default
75
+ $size-medium: $size-5 !default
76
+ $size-large: $size-4 !default
77
+
78
+ // Lists and maps
79
+ $custom-colors: null !default
80
+ $custom-shades: null !default
81
+
82
+ $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
83
+ $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
84
+
85
+ $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
@@ -1,62 +1,62 @@
1
- @function mergeColorMaps($bulma-colors, $custom-colors)
2
- // we return at least bulma hardcoded colors
3
- $merged-colors: $bulma-colors
4
-
5
- // we want a map as input
6
- @if type-of($custom-colors) == 'map'
7
- @each $name, $components in $custom-colors
8
- // color name should be a string and colors pair a list with at least one element
9
- @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
10
- $color-base: null
11
-
12
- // the param can either be a single color
13
- // or a list of 2 colors
14
- @if type-of($components) == 'color'
15
- $color-base: $components
16
- @else if type-of($components) == 'list'
17
- $color-base: nth($components, 1)
18
-
19
- $color-invert: null
20
- // is an inverted color provided in the list
21
- @if length($components) > 1
22
- $color-invert: nth($components, 2)
23
-
24
- // we only want a color as base color
25
- @if type-of($color-base) == 'color'
26
- // if inverted color is not provided or is not a color we compute it
27
- @if type-of($color-invert) != 'color'
28
- $color-invert: findColorInvert($color-base)
29
-
30
- // we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
31
- $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
32
-
33
- @return $merged-colors
34
-
35
- @function powerNumber($number, $exp)
36
- $value: 1
37
- @if $exp > 0
38
- @for $i from 1 through $exp
39
- $value: $value * $number
40
- @else if $exp < 0
41
- @for $i from 1 through -$exp
42
- $value: $value / $number
43
- @return $value
44
-
45
- @function colorLuminance($color)
46
- $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
47
- @each $name, $value in $color-rgb
48
- $adjusted: 0
49
- $value: $value / 255
50
- @if $value < 0.03928
51
- $value: $value / 12.92
52
- @else
53
- $value: ($value + .055) / 1.055
54
- $value: powerNumber($value, 2)
55
- $color-rgb: map-merge($color-rgb, ($name: $value))
56
- @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
57
-
58
- @function findColorInvert($color)
59
- @if (colorLuminance($color) > 0.55)
60
- @return rgba(#000, 0.7)
61
- @else
62
- @return #fff
1
+ @function mergeColorMaps($bulma-colors, $custom-colors)
2
+ // we return at least bulma hardcoded colors
3
+ $merged-colors: $bulma-colors
4
+
5
+ // we want a map as input
6
+ @if type-of($custom-colors) == 'map'
7
+ @each $name, $components in $custom-colors
8
+ // color name should be a string and colors pair a list with at least one element
9
+ @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
10
+ $color-base: null
11
+
12
+ // the param can either be a single color
13
+ // or a list of 2 colors
14
+ @if type-of($components) == 'color'
15
+ $color-base: $components
16
+ @else if type-of($components) == 'list'
17
+ $color-base: nth($components, 1)
18
+
19
+ $color-invert: null
20
+ // is an inverted color provided in the list
21
+ @if length($components) > 1
22
+ $color-invert: nth($components, 2)
23
+
24
+ // we only want a color as base color
25
+ @if type-of($color-base) == 'color'
26
+ // if inverted color is not provided or is not a color we compute it
27
+ @if type-of($color-invert) != 'color'
28
+ $color-invert: findColorInvert($color-base)
29
+
30
+ // we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
31
+ $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
32
+
33
+ @return $merged-colors
34
+
35
+ @function powerNumber($number, $exp)
36
+ $value: 1
37
+ @if $exp > 0
38
+ @for $i from 1 through $exp
39
+ $value: $value * $number
40
+ @else if $exp < 0
41
+ @for $i from 1 through -$exp
42
+ $value: $value / $number
43
+ @return $value
44
+
45
+ @function colorLuminance($color)
46
+ $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
47
+ @each $name, $value in $color-rgb
48
+ $adjusted: 0
49
+ $value: $value / 255
50
+ @if $value < 0.03928
51
+ $value: $value / 12.92
52
+ @else
53
+ $value: ($value + .055) / 1.055
54
+ $value: powerNumber($value, 2)
55
+ $color-rgb: map-merge($color-rgb, ($name: $value))
56
+ @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
57
+
58
+ @function findColorInvert($color)
59
+ @if (colorLuminance($color) > 0.55)
60
+ @return rgba(#000, 0.7)
61
+ @else
62
+ @return #fff
@@ -1,76 +1,76 @@
1
- // Colors
2
-
3
- $black: hsl(0, 0%, 4%) !default
4
- $black-bis: hsl(0, 0%, 7%) !default
5
- $black-ter: hsl(0, 0%, 14%) !default
6
-
7
- $grey-darker: hsl(0, 0%, 21%) !default
8
- $grey-dark: hsl(0, 0%, 29%) !default
9
- $grey: hsl(0, 0%, 48%) !default
10
- $grey-light: hsl(0, 0%, 71%) !default
11
- $grey-lighter: hsl(0, 0%, 86%) !default
12
-
13
- $white-ter: hsl(0, 0%, 96%) !default
14
- $white-bis: hsl(0, 0%, 98%) !default
15
- $white: hsl(0, 0%, 100%) !default
16
-
17
- $orange: hsl(14, 100%, 53%) !default
18
- $yellow: hsl(48, 100%, 67%) !default
19
- $green: hsl(141, 71%, 48%) !default
20
- $turquoise: hsl(171, 100%, 41%) !default
21
- $cyan: hsl(204, 86%, 53%) !default
22
- $blue: hsl(217, 71%, 53%) !default
23
- $purple: hsl(271, 100%, 71%) !default
24
- $red: hsl(348, 100%, 61%) !default
25
-
26
- // Typography
27
-
28
- $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
29
- $family-monospace: monospace !default
30
- $render-mode: optimizeLegibility !default
31
-
32
- $size-1: 3rem !default
33
- $size-2: 2.5rem !default
34
- $size-3: 2rem !default
35
- $size-4: 1.5rem !default
36
- $size-5: 1.25rem !default
37
- $size-6: 1rem !default
38
- $size-7: 0.75rem !default
39
-
40
- $weight-light: 300 !default
41
- $weight-normal: 400 !default
42
- $weight-medium: 500 !default
43
- $weight-semibold: 600 !default
44
- $weight-bold: 700 !default
45
-
46
- // Spacing
47
-
48
- $block-spacing: 1.5rem !default
49
-
50
- // Responsiveness
51
-
52
- // The container horizontal gap, which acts as the offset for breakpoints
53
- $gap: 32px !default
54
- // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
55
- $tablet: 769px !default
56
- // 960px container + 4rem
57
- $desktop: 960px + (2 * $gap) !default
58
- // 1152px container + 4rem
59
- $widescreen: 1152px + (2 * $gap) !default
60
- $widescreen-enabled: true !default
61
- // 1344px container + 4rem
62
- $fullhd: 1344px + (2 * $gap) !default
63
- $fullhd-enabled: true !default
64
-
65
- // Miscellaneous
66
-
67
- $easing: ease-out !default
68
- $radius-small: 2px !default
69
- $radius: 4px !default
70
- $radius-large: 6px !default
71
- $radius-rounded: 290486px !default
72
- $speed: 86ms !default
73
-
74
- // Flags
75
-
76
- $variable-columns: true !default
1
+ // Colors
2
+
3
+ $black: hsl(0, 0%, 4%) !default
4
+ $black-bis: hsl(0, 0%, 7%) !default
5
+ $black-ter: hsl(0, 0%, 14%) !default
6
+
7
+ $grey-darker: hsl(0, 0%, 21%) !default
8
+ $grey-dark: hsl(0, 0%, 29%) !default
9
+ $grey: hsl(0, 0%, 48%) !default
10
+ $grey-light: hsl(0, 0%, 71%) !default
11
+ $grey-lighter: hsl(0, 0%, 86%) !default
12
+
13
+ $white-ter: hsl(0, 0%, 96%) !default
14
+ $white-bis: hsl(0, 0%, 98%) !default
15
+ $white: hsl(0, 0%, 100%) !default
16
+
17
+ $orange: hsl(14, 100%, 53%) !default
18
+ $yellow: hsl(48, 100%, 67%) !default
19
+ $green: hsl(141, 71%, 48%) !default
20
+ $turquoise: hsl(171, 100%, 41%) !default
21
+ $cyan: hsl(204, 86%, 53%) !default
22
+ $blue: hsl(217, 71%, 53%) !default
23
+ $purple: hsl(271, 100%, 71%) !default
24
+ $red: hsl(348, 100%, 61%) !default
25
+
26
+ // Typography
27
+
28
+ $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
29
+ $family-monospace: monospace !default
30
+ $render-mode: optimizeLegibility !default
31
+
32
+ $size-1: 3rem !default
33
+ $size-2: 2.5rem !default
34
+ $size-3: 2rem !default
35
+ $size-4: 1.5rem !default
36
+ $size-5: 1.25rem !default
37
+ $size-6: 1rem !default
38
+ $size-7: 0.75rem !default
39
+
40
+ $weight-light: 300 !default
41
+ $weight-normal: 400 !default
42
+ $weight-medium: 500 !default
43
+ $weight-semibold: 600 !default
44
+ $weight-bold: 700 !default
45
+
46
+ // Spacing
47
+
48
+ $block-spacing: 1.5rem !default
49
+
50
+ // Responsiveness
51
+
52
+ // The container horizontal gap, which acts as the offset for breakpoints
53
+ $gap: 32px !default
54
+ // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
55
+ $tablet: 769px !default
56
+ // 960px container + 4rem
57
+ $desktop: 960px + (2 * $gap) !default
58
+ // 1152px container + 4rem
59
+ $widescreen: 1152px + (2 * $gap) !default
60
+ $widescreen-enabled: true !default
61
+ // 1344px container + 4rem
62
+ $fullhd: 1344px + (2 * $gap) !default
63
+ $fullhd-enabled: true !default
64
+
65
+ // Miscellaneous
66
+
67
+ $easing: ease-out !default
68
+ $radius-small: 2px !default
69
+ $radius: 4px !default
70
+ $radius-large: 6px !default
71
+ $radius-rounded: 290486px !default
72
+ $speed: 86ms !default
73
+
74
+ // Flags
75
+
76
+ $variable-columns: true !default