jekyll-theme-jam 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (82) hide show
  1. checksums.yaml +7 -0
  2. data/CHANGELOG.md +10 -0
  3. data/LICENSE.md +10 -0
  4. data/README.md +63 -0
  5. data/_includes/disqus_comments.html +14 -0
  6. data/_includes/figure +12 -0
  7. data/_includes/footer.html +17 -0
  8. data/_includes/google-analytics.html +7 -0
  9. data/_includes/google-tag-manager-noscript.html +3 -0
  10. data/_includes/google-tag-manager.html +6 -0
  11. data/_includes/head.html +13 -0
  12. data/_includes/netlify-form.html +18 -0
  13. data/_includes/read_time.html +16 -0
  14. data/_layouts/archive.html +15 -0
  15. data/_layouts/default.html +12 -0
  16. data/_layouts/front.html +11 -0
  17. data/_layouts/home.html +25 -0
  18. data/_layouts/page.html +14 -0
  19. data/_layouts/post.html +30 -0
  20. data/_sass/_cms.scss +80 -0
  21. data/_sass/_theme.scss +78 -0
  22. data/_sass/_variables.scss +149 -0
  23. data/_sass/scss/_aspect-ratios.scss +142 -0
  24. data/_sass/scss/_background-position.scss +133 -0
  25. data/_sass/scss/_background-size.scss +41 -0
  26. data/_sass/scss/_border-colors.scss +93 -0
  27. data/_sass/scss/_border-radius.scss +134 -0
  28. data/_sass/scss/_border-style.scss +55 -0
  29. data/_sass/scss/_border-widths.scss +81 -0
  30. data/_sass/scss/_borders.scss +65 -0
  31. data/_sass/scss/_box-shadow.scss +48 -0
  32. data/_sass/scss/_box-sizing.scss +49 -0
  33. data/_sass/scss/_clears.scss +47 -0
  34. data/_sass/scss/_coordinates.scss +153 -0
  35. data/_sass/scss/_debug-children.scss +21 -0
  36. data/_sass/scss/_debug-grid.scss +33 -0
  37. data/_sass/scss/_debug.scss +127 -0
  38. data/_sass/scss/_debug_children.scss +18 -0
  39. data/_sass/scss/_display.scss +111 -0
  40. data/_sass/scss/_flexbox.scss +257 -0
  41. data/_sass/scss/_floats.scss +56 -0
  42. data/_sass/scss/_font-family.scss +99 -0
  43. data/_sass/scss/_font-style.scss +36 -0
  44. data/_sass/scss/_font-weight.scss +87 -0
  45. data/_sass/scss/_forms.scss +23 -0
  46. data/_sass/scss/_gradients.scss +29 -0
  47. data/_sass/scss/_heights.scss +131 -0
  48. data/_sass/scss/_hovers.scss +166 -0
  49. data/_sass/scss/_images.scss +18 -0
  50. data/_sass/scss/_letter-spacing.scss +40 -0
  51. data/_sass/scss/_line-height.scss +41 -0
  52. data/_sass/scss/_links.scss +34 -0
  53. data/_sass/scss/_lists.scss +15 -0
  54. data/_sass/scss/_max-widths.scss +105 -0
  55. data/_sass/scss/_module-template.scss +29 -0
  56. data/_sass/scss/_negative-margins.scss +205 -0
  57. data/_sass/scss/_nested.scss +63 -0
  58. data/_sass/scss/_normalize.scss +454 -0
  59. data/_sass/scss/_opacity.scss +27 -0
  60. data/_sass/scss/_outlines.scss +39 -0
  61. data/_sass/scss/_overflow.scss +82 -0
  62. data/_sass/scss/_position.scss +44 -0
  63. data/_sass/scss/_rotations.scss +50 -0
  64. data/_sass/scss/_skins-pseudo.scss +243 -0
  65. data/_sass/scss/_skins.scss +143 -0
  66. data/_sass/scss/_spacing.scss +947 -0
  67. data/_sass/scss/_styles.scss +15 -0
  68. data/_sass/scss/_tables.scss +42 -0
  69. data/_sass/scss/_text-align.scss +49 -0
  70. data/_sass/scss/_text-decoration.scss +42 -0
  71. data/_sass/scss/_text-transform.scss +53 -0
  72. data/_sass/scss/_type-scale.scss +102 -0
  73. data/_sass/scss/_typography.scss +129 -0
  74. data/_sass/scss/_utilities.scss +57 -0
  75. data/_sass/scss/_vertical-align.scss +43 -0
  76. data/_sass/scss/_visibility.scss +58 -0
  77. data/_sass/scss/_white-space.scss +41 -0
  78. data/_sass/scss/_widths.scss +150 -0
  79. data/_sass/scss/_word-break.scss +43 -0
  80. data/_sass/scss/_z-index.scss +60 -0
  81. data/assets/css/jam.scss +5 -0
  82. metadata +209 -0
@@ -0,0 +1,149 @@
1
+
2
+ // Converted Variables
3
+
4
+ $sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif !default;
5
+ $serif: georgia, serif !default;
6
+ $code: consolas, monaco, monospace !default;
7
+ $font-size-headline: 6rem !default;
8
+ $font-size-subheadline: 5rem !default;
9
+ $font-size-1: 3rem !default;
10
+ $font-size-2: 2.25rem !default;
11
+ $font-size-3: 1.5rem !default;
12
+ $font-size-4: 1.25rem !default;
13
+ $font-size-5: 1rem !default;
14
+ $font-size-6: .875rem !default;
15
+ $font-size-7: .75rem !default;
16
+ $letter-spacing-tight: -.05em !default;
17
+ $letter-spacing-1: .1em !default;
18
+ $letter-spacing-2: .25em !default;
19
+ $line-height-solid: 1 !default;
20
+ $line-height-title: 1.25 !default;
21
+ $line-height-copy: 1.5 !default;
22
+ $measure: 30em !default;
23
+ $measure-narrow: 20em !default;
24
+ $measure-wide: 34em !default;
25
+ $spacing-none: 0 !default;
26
+ $spacing-extra-small: .25rem !default;
27
+ $spacing-small: .5rem !default;
28
+ $spacing-medium: 1rem !default;
29
+ $spacing-large: 2rem !default;
30
+ $spacing-extra-large: 4rem !default;
31
+ $spacing-extra-extra-large: 8rem !default;
32
+ $spacing-extra-extra-extra-large: 16rem !default;
33
+ $spacing-copy-separator: 1.5em !default;
34
+ $height-1: 1rem !default;
35
+ $height-2: 2rem !default;
36
+ $height-3: 4rem !default;
37
+ $height-4: 8rem !default;
38
+ $height-5: 16rem !default;
39
+ $width-1: 1rem !default;
40
+ $width-2: 2rem !default;
41
+ $width-3: 4rem !default;
42
+ $width-4: 8rem !default;
43
+ $width-5: 16rem !default;
44
+ $max-width-1: 1rem !default;
45
+ $max-width-2: 2rem !default;
46
+ $max-width-3: 4rem !default;
47
+ $max-width-4: 8rem !default;
48
+ $max-width-5: 16rem !default;
49
+ $max-width-6: 32rem !default;
50
+ $max-width-7: 48rem !default;
51
+ $max-width-8: 64rem !default;
52
+ $max-width-9: 96rem !default;
53
+ $border-radius-none: 0 !default;
54
+ $border-radius-1: .125rem !default;
55
+ $border-radius-2: .25rem !default;
56
+ $border-radius-3: .5rem !default;
57
+ $border-radius-4: 1rem !default;
58
+ $border-radius-circle: 100% !default;
59
+ $border-radius-pill: 9999px !default;
60
+ $border-width-none: 0 !default;
61
+ $border-width-1: .125rem !default;
62
+ $border-width-2: .25rem !default;
63
+ $border-width-3: .5rem !default;
64
+ $border-width-4: 1rem !default;
65
+ $border-width-5: 2rem !default;
66
+ $box-shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ) !default;
67
+ $box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ) !default;
68
+ $box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ) !default;
69
+ $box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ) !default;
70
+ $box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ) !default;
71
+ $black: #000 !default;
72
+ $near-black: #111 !default;
73
+ $dark-gray: #333 !default;
74
+ $mid-gray: #555 !default;
75
+ $gray: #777 !default;
76
+ $silver: #999 !default;
77
+ $light-silver: #aaa !default;
78
+ $moon-gray: #ccc !default;
79
+ $light-gray: #eee !default;
80
+ $near-white: #f4f4f4 !default;
81
+ $white: #fff !default;
82
+ $transparent: transparent !default;
83
+ $black-90: rgba(0,0,0,.9) !default;
84
+ $black-80: rgba(0,0,0,.8) !default;
85
+ $black-70: rgba(0,0,0,.7) !default;
86
+ $black-60: rgba(0,0,0,.6) !default;
87
+ $black-50: rgba(0,0,0,.5) !default;
88
+ $black-40: rgba(0,0,0,.4) !default;
89
+ $black-30: rgba(0,0,0,.3) !default;
90
+ $black-20: rgba(0,0,0,.2) !default;
91
+ $black-10: rgba(0,0,0,.1) !default;
92
+ $black-05: rgba(0,0,0,.05) !default;
93
+ $black-025: rgba(0,0,0,.025) !default;
94
+ $black-0125: rgba(0,0,0,.0125) !default;
95
+ $white-90: rgba(255,255,255,.9) !default;
96
+ $white-80: rgba(255,255,255,.8) !default;
97
+ $white-70: rgba(255,255,255,.7) !default;
98
+ $white-60: rgba(255,255,255,.6) !default;
99
+ $white-50: rgba(255,255,255,.5) !default;
100
+ $white-40: rgba(255,255,255,.4) !default;
101
+ $white-30: rgba(255,255,255,.3) !default;
102
+ $white-20: rgba(255,255,255,.2) !default;
103
+ $white-10: rgba(255,255,255,.1) !default;
104
+ $white-05: rgba(255,255,255,.05) !default;
105
+ $white-025: rgba(255,255,255,.025) !default;
106
+ $white-0125: rgba(255,255,255,.0125) !default;
107
+ $dark-red: #e7040f !default;
108
+ $red: #ff4136 !default;
109
+ $light-red: #ff725c !default;
110
+ $orange: #ff6300 !default;
111
+ $gold: #ffb700 !default;
112
+ $yellow: #ffd700 !default;
113
+ $light-yellow: #fbf1a9 !default;
114
+ $purple: #5e2ca5 !default;
115
+ $light-purple: #a463f2 !default;
116
+ $dark-pink: #d5008f !default;
117
+ $hot-pink: #ff41b4 !default;
118
+ $pink: #ff80cc !default;
119
+ $light-pink: #ffa3d7 !default;
120
+ $dark-green: #137752 !default;
121
+ $green: #19a974 !default;
122
+ $light-green: #9eebcf !default;
123
+ $navy: #001b44 !default;
124
+ $dark-blue: #00449e !default;
125
+ $blue: #357edd !default;
126
+ $light-blue: #96ccff !default;
127
+ $lightest-blue: #cdecff !default;
128
+ $washed-blue: #f6fffe !default;
129
+ $washed-green: #e8fdf5 !default;
130
+ $washed-yellow: #fffceb !default;
131
+ $washed-red: #ffdfdf !default;
132
+
133
+ // Custom Media Query Variables
134
+
135
+ $breakpoint-not-small: 'screen and (min-width: 30em)' !default;
136
+ $breakpoint-medium: 'screen and (min-width: 30em) and (max-width: 60em)' !default;
137
+ $breakpoint-large: 'screen and (min-width: 60em)' !default;
138
+
139
+ // Theme Variables
140
+
141
+ $link: $blue;
142
+ $link-hover: $dark-blue;
143
+ $code-font-size: .9rem;
144
+ $code-background-color: $near-white;
145
+ $lineno-color: $gray;
146
+ $blockquote-color: $black;
147
+ $blockquote-border-color: $black;
148
+ $figcaption-color: $gray;
149
+ $footnotes-color: $gray;
@@ -0,0 +1,142 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /*
9
+
10
+ ASPECT RATIOS
11
+
12
+ */
13
+
14
+ /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
15
+ * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
16
+ * Make sure there are no height and width attributes on the embedded media.
17
+ * Adapted from: https://github.com/suitcss/components-flex-embed
18
+ *
19
+ * Example:
20
+ *
21
+ * <div class="aspect-ratio aspect-ratio--16x9">
22
+ * <iframe class="aspect-ratio--object"></iframe>
23
+ * </div>
24
+ *
25
+ * */
26
+
27
+ .aspect-ratio {
28
+ height: 0;
29
+ position: relative;
30
+ }
31
+
32
+ .aspect-ratio--16x9 { padding-bottom: 56.25%; }
33
+ .aspect-ratio--9x16 { padding-bottom: 177.77%; }
34
+
35
+ .aspect-ratio--4x3 { padding-bottom: 75%; }
36
+ .aspect-ratio--3x4 { padding-bottom: 133.33%; }
37
+
38
+ .aspect-ratio--6x4 { padding-bottom: 66.6%; }
39
+ .aspect-ratio--4x6 { padding-bottom: 150%; }
40
+
41
+ .aspect-ratio--8x5 { padding-bottom: 62.5%; }
42
+ .aspect-ratio--5x8 { padding-bottom: 160%; }
43
+
44
+ .aspect-ratio--7x5 { padding-bottom: 71.42%; }
45
+ .aspect-ratio--5x7 { padding-bottom: 140%; }
46
+
47
+ .aspect-ratio--1x1 { padding-bottom: 100%; }
48
+
49
+ .aspect-ratio--object {
50
+ position: absolute;
51
+ top: 0;
52
+ right: 0;
53
+ bottom: 0;
54
+ left: 0;
55
+ width: 100%;
56
+ height: 100%;
57
+ z-index: 100;
58
+ }
59
+
60
+ @media #{$breakpoint-not-small}{
61
+ .aspect-ratio-ns {
62
+ height: 0;
63
+ position: relative;
64
+ }
65
+ .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
66
+ .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
67
+ .aspect-ratio--4x3-ns { padding-bottom: 75%; }
68
+ .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
69
+ .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
70
+ .aspect-ratio--4x6-ns { padding-bottom: 150%; }
71
+ .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
72
+ .aspect-ratio--5x8-ns { padding-bottom: 160%; }
73
+ .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
74
+ .aspect-ratio--5x7-ns { padding-bottom: 140%; }
75
+ .aspect-ratio--1x1-ns { padding-bottom: 100%; }
76
+ .aspect-ratio--object-ns {
77
+ position: absolute;
78
+ top: 0;
79
+ right: 0;
80
+ bottom: 0;
81
+ left: 0;
82
+ width: 100%;
83
+ height: 100%;
84
+ z-index: 100;
85
+ }
86
+ }
87
+
88
+ @media #{$breakpoint-medium}{
89
+ .aspect-ratio-m {
90
+ height: 0;
91
+ position: relative;
92
+ }
93
+ .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
94
+ .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
95
+ .aspect-ratio--4x3-m { padding-bottom: 75%; }
96
+ .aspect-ratio--3x4-m { padding-bottom: 133.33%; }
97
+ .aspect-ratio--6x4-m { padding-bottom: 66.6%; }
98
+ .aspect-ratio--4x6-m { padding-bottom: 150%; }
99
+ .aspect-ratio--8x5-m { padding-bottom: 62.5%; }
100
+ .aspect-ratio--5x8-m { padding-bottom: 160%; }
101
+ .aspect-ratio--7x5-m { padding-bottom: 71.42%; }
102
+ .aspect-ratio--5x7-m { padding-bottom: 140%; }
103
+ .aspect-ratio--1x1-m { padding-bottom: 100%; }
104
+ .aspect-ratio--object-m {
105
+ position: absolute;
106
+ top: 0;
107
+ right: 0;
108
+ bottom: 0;
109
+ left: 0;
110
+ width: 100%;
111
+ height: 100%;
112
+ z-index: 100;
113
+ }
114
+ }
115
+
116
+ @media #{$breakpoint-large}{
117
+ .aspect-ratio-l {
118
+ height: 0;
119
+ position: relative;
120
+ }
121
+ .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
122
+ .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
123
+ .aspect-ratio--4x3-l { padding-bottom: 75%; }
124
+ .aspect-ratio--3x4-l { padding-bottom: 133.33%; }
125
+ .aspect-ratio--6x4-l { padding-bottom: 66.6%; }
126
+ .aspect-ratio--4x6-l { padding-bottom: 150%; }
127
+ .aspect-ratio--8x5-l { padding-bottom: 62.5%; }
128
+ .aspect-ratio--5x8-l { padding-bottom: 160%; }
129
+ .aspect-ratio--7x5-l { padding-bottom: 71.42%; }
130
+ .aspect-ratio--5x7-l { padding-bottom: 140%; }
131
+ .aspect-ratio--1x1-l { padding-bottom: 100%; }
132
+ .aspect-ratio--object-l {
133
+ position: absolute;
134
+ top: 0;
135
+ right: 0;
136
+ bottom: 0;
137
+ left: 0;
138
+ width: 100%;
139
+ height: 100%;
140
+ z-index: 100;
141
+ }
142
+ }
@@ -0,0 +1,133 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /*
9
+
10
+ BACKGROUND POSITION
11
+
12
+ Base:
13
+ bg = background
14
+
15
+ Modifiers:
16
+ -center = center center
17
+ -top = top center
18
+ -right = center right
19
+ -bottom = bottom center
20
+ -left = center left
21
+
22
+ Media Query Extensions:
23
+ -ns = not-small
24
+ -m = medium
25
+ -l = large
26
+
27
+ */
28
+
29
+ .bg-center {
30
+ background-repeat: no-repeat;
31
+ background-position: center center;
32
+ }
33
+
34
+ .bg-top {
35
+ background-repeat: no-repeat;
36
+ background-position: top center;
37
+ }
38
+
39
+ .bg-right {
40
+ background-repeat: no-repeat;
41
+ background-position: center right;
42
+ }
43
+
44
+ .bg-bottom {
45
+ background-repeat: no-repeat;
46
+ background-position: bottom center;
47
+ }
48
+
49
+ .bg-left {
50
+ background-repeat: no-repeat;
51
+ background-position: center left;
52
+ }
53
+
54
+ @media #{$breakpoint-not-small} {
55
+ .bg-center-ns {
56
+ background-repeat: no-repeat;
57
+ background-position: center center;
58
+ }
59
+
60
+ .bg-top-ns {
61
+ background-repeat: no-repeat;
62
+ background-position: top center;
63
+ }
64
+
65
+ .bg-right-ns {
66
+ background-repeat: no-repeat;
67
+ background-position: center right;
68
+ }
69
+
70
+ .bg-bottom-ns {
71
+ background-repeat: no-repeat;
72
+ background-position: bottom center;
73
+ }
74
+
75
+ .bg-left-ns {
76
+ background-repeat: no-repeat;
77
+ background-position: center left;
78
+ }
79
+ }
80
+
81
+ @media #{$breakpoint-medium} {
82
+ .bg-center-m {
83
+ background-repeat: no-repeat;
84
+ background-position: center center;
85
+ }
86
+
87
+ .bg-top-m {
88
+ background-repeat: no-repeat;
89
+ background-position: top center;
90
+ }
91
+
92
+ .bg-right-m {
93
+ background-repeat: no-repeat;
94
+ background-position: center right;
95
+ }
96
+
97
+ .bg-bottom-m {
98
+ background-repeat: no-repeat;
99
+ background-position: bottom center;
100
+ }
101
+
102
+ .bg-left-m {
103
+ background-repeat: no-repeat;
104
+ background-position: center left;
105
+ }
106
+ }
107
+
108
+ @media #{$breakpoint-large} {
109
+ .bg-center-l {
110
+ background-repeat: no-repeat;
111
+ background-position: center center;
112
+ }
113
+
114
+ .bg-top-l {
115
+ background-repeat: no-repeat;
116
+ background-position: top center;
117
+ }
118
+
119
+ .bg-right-l {
120
+ background-repeat: no-repeat;
121
+ background-position: center right;
122
+ }
123
+
124
+ .bg-bottom-l {
125
+ background-repeat: no-repeat;
126
+ background-position: bottom center;
127
+ }
128
+
129
+ .bg-left-l {
130
+ background-repeat: no-repeat;
131
+ background-position: center left;
132
+ }
133
+ }
@@ -0,0 +1,41 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /*
9
+
10
+ BACKGROUND SIZE
11
+ Docs: http://tachyons.io/docs/themes/background-size/
12
+
13
+ Media Query Extensions:
14
+ -ns = not-small
15
+ -m = medium
16
+ -l = large
17
+
18
+ */
19
+
20
+ /*
21
+ Often used in combination with background image set as an inline style
22
+ on an html element.
23
+ */
24
+
25
+ .cover { background-size: cover!important; }
26
+ .contain { background-size: contain!important; }
27
+
28
+ @media #{$breakpoint-not-small} {
29
+ .cover-ns { background-size: cover!important; }
30
+ .contain-ns { background-size: contain!important; }
31
+ }
32
+
33
+ @media #{$breakpoint-medium} {
34
+ .cover-m { background-size: cover!important; }
35
+ .contain-m { background-size: contain!important; }
36
+ }
37
+
38
+ @media #{$breakpoint-large} {
39
+ .cover-l { background-size: cover!important; }
40
+ .contain-l { background-size: contain!important; }
41
+ }