jekyll-theme-jam 0.0.1

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 (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,36 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /*
9
+
10
+ FONT STYLE
11
+ Docs: http://tachyons.io/docs/typography/font-style/
12
+
13
+ Media Query Extensions:
14
+ -ns = not-small
15
+ -m = medium
16
+ -l = large
17
+
18
+ */
19
+
20
+ .i { font-style: italic; }
21
+ .fs-normal { font-style: normal; }
22
+
23
+ @media #{$breakpoint-not-small} {
24
+ .i-ns { font-style: italic; }
25
+ .fs-normal-ns { font-style: normal; }
26
+ }
27
+
28
+ @media #{$breakpoint-medium} {
29
+ .i-m { font-style: italic; }
30
+ .fs-normal-m { font-style: normal; }
31
+ }
32
+
33
+ @media #{$breakpoint-large} {
34
+ .i-l { font-style: italic; }
35
+ .fs-normal-l { font-style: normal; }
36
+ }
@@ -0,0 +1,87 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /*
9
+
10
+ FONT WEIGHT
11
+ Docs: http://tachyons.io/docs/typography/font-weight/
12
+
13
+ Base
14
+ fw = font-weight
15
+
16
+ Modifiers:
17
+ 1 = literal value 100
18
+ 2 = literal value 200
19
+ 3 = literal value 300
20
+ 4 = literal value 400
21
+ 5 = literal value 500
22
+ 6 = literal value 600
23
+ 7 = literal value 700
24
+ 8 = literal value 800
25
+ 9 = literal value 900
26
+
27
+ Media Query Extensions:
28
+ -ns = not-small
29
+ -m = medium
30
+ -l = large
31
+
32
+ */
33
+
34
+ .normal { font-weight: normal; }
35
+ .b { font-weight: bold; }
36
+ .fw1 { font-weight: 100; }
37
+ .fw2 { font-weight: 200; }
38
+ .fw3 { font-weight: 300; }
39
+ .fw4 { font-weight: 400; }
40
+ .fw5 { font-weight: 500; }
41
+ .fw6 { font-weight: 600; }
42
+ .fw7 { font-weight: 700; }
43
+ .fw8 { font-weight: 800; }
44
+ .fw9 { font-weight: 900; }
45
+
46
+
47
+ @media #{$breakpoint-not-small} {
48
+ .normal-ns { font-weight: normal; }
49
+ .b-ns { font-weight: bold; }
50
+ .fw1-ns { font-weight: 100; }
51
+ .fw2-ns { font-weight: 200; }
52
+ .fw3-ns { font-weight: 300; }
53
+ .fw4-ns { font-weight: 400; }
54
+ .fw5-ns { font-weight: 500; }
55
+ .fw6-ns { font-weight: 600; }
56
+ .fw7-ns { font-weight: 700; }
57
+ .fw8-ns { font-weight: 800; }
58
+ .fw9-ns { font-weight: 900; }
59
+ }
60
+
61
+ @media #{$breakpoint-medium} {
62
+ .normal-m { font-weight: normal; }
63
+ .b-m { font-weight: bold; }
64
+ .fw1-m { font-weight: 100; }
65
+ .fw2-m { font-weight: 200; }
66
+ .fw3-m { font-weight: 300; }
67
+ .fw4-m { font-weight: 400; }
68
+ .fw5-m { font-weight: 500; }
69
+ .fw6-m { font-weight: 600; }
70
+ .fw7-m { font-weight: 700; }
71
+ .fw8-m { font-weight: 800; }
72
+ .fw9-m { font-weight: 900; }
73
+ }
74
+
75
+ @media #{$breakpoint-large} {
76
+ .normal-l { font-weight: normal; }
77
+ .b-l { font-weight: bold; }
78
+ .fw1-l { font-weight: 100; }
79
+ .fw2-l { font-weight: 200; }
80
+ .fw3-l { font-weight: 300; }
81
+ .fw4-l { font-weight: 400; }
82
+ .fw5-l { font-weight: 500; }
83
+ .fw6-l { font-weight: 600; }
84
+ .fw7-l { font-weight: 700; }
85
+ .fw8-l { font-weight: 800; }
86
+ .fw9-l { font-weight: 900; }
87
+ }
@@ -0,0 +1,23 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /*
9
+
10
+ FORMS
11
+
12
+ */
13
+
14
+ .input-reset {
15
+ -webkit-appearance: none;
16
+ -moz-appearance: none;
17
+ }
18
+
19
+ .button-reset::-moz-focus-inner,
20
+ .input-reset::-moz-focus-inner {
21
+ border: 0;
22
+ padding: 0;
23
+ }
@@ -0,0 +1,29 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /*
9
+
10
+ GRADIENTS
11
+
12
+
13
+ */
14
+
15
+ .gradient-blue {
16
+ background-image: linear-gradient(#4570B0, #0081C2);
17
+ }
18
+
19
+ .gradient-blue-reversed {
20
+ background-image: linear-gradient(#0081C2, #4570B0);
21
+ }
22
+
23
+ .gradient-light-blue {
24
+ background-image: linear-gradient(#76D3FE, #008AE0);
25
+ }
26
+
27
+ .gradient-light-blue-reversed {
28
+ background-image: linear-gradient(#008AE0, #76D3FE);
29
+ }
@@ -0,0 +1,131 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /*
9
+
10
+ HEIGHTS
11
+ Docs: http://tachyons.io/docs/layout/heights/
12
+
13
+ Base:
14
+ h = height
15
+ min-h = min-height
16
+ min-vh = min-height vertical screen height
17
+ vh = vertical screen height
18
+
19
+ Modifiers
20
+ 1 = 1st step in height scale
21
+ 2 = 2nd step in height scale
22
+ 3 = 3rd step in height scale
23
+ 4 = 4th step in height scale
24
+ 5 = 5th step in height scale
25
+
26
+ -25 = literal value 25%
27
+ -50 = literal value 50%
28
+ -75 = literal value 75%
29
+ -100 = literal value 100%
30
+
31
+ -auto = string value of auto
32
+ -inherit = string value of inherit
33
+
34
+ Media Query Extensions:
35
+ -ns = not-small
36
+ -m = medium
37
+ -l = large
38
+
39
+ */
40
+
41
+ /* Height Scale */
42
+
43
+ .h1 { height: $height-1; }
44
+ .h2 { height: $height-2; }
45
+ .h3 { height: $height-3; }
46
+ .h4 { height: $height-4; }
47
+ .h5 { height: $height-5; }
48
+
49
+ /* Height Percentages - Based off of height of parent */
50
+
51
+ .h-25 { height: 25%; }
52
+ .h-50 { height: 50%; }
53
+ .h-75 { height: 75%; }
54
+ .h-100 { height: 100%; }
55
+
56
+ .min-h-100 { min-height: 100%; }
57
+
58
+ /* Screen Height Percentage */
59
+
60
+ .vh-25 { height: 25vh; }
61
+ .vh-50 { height: 50vh; }
62
+ .vh-75 { height: 75vh; }
63
+ .vh-100 { height: 100vh; }
64
+
65
+ .min-vh-100 { min-height: 100vh; }
66
+
67
+
68
+ /* String Properties */
69
+
70
+ .h-auto { height: auto; }
71
+ .h-inherit { height: inherit; }
72
+
73
+ @media #{$breakpoint-not-small} {
74
+ .h1-ns { height: $height-1; }
75
+ .h2-ns { height: $height-2; }
76
+ .h3-ns { height: $height-3; }
77
+ .h4-ns { height: $height-4; }
78
+ .h5-ns { height: $height-5; }
79
+ .h-25-ns { height: 25%; }
80
+ .h-50-ns { height: 50%; }
81
+ .h-75-ns { height: 75%; }
82
+ .h-100-ns { height: 100%; }
83
+ .min-h-100-ns { min-height: 100%; }
84
+ .vh-25-ns { height: 25vh; }
85
+ .vh-50-ns { height: 50vh; }
86
+ .vh-75-ns { height: 75vh; }
87
+ .vh-100-ns { height: 100vh; }
88
+ .min-vh-100-ns { min-height: 100vh; }
89
+ .h-auto-ns { height: auto; }
90
+ .h-inherit-ns { height: inherit; }
91
+ }
92
+
93
+ @media #{$breakpoint-medium} {
94
+ .h1-m { height: $height-1; }
95
+ .h2-m { height: $height-2; }
96
+ .h3-m { height: $height-3; }
97
+ .h4-m { height: $height-4; }
98
+ .h5-m { height: $height-5; }
99
+ .h-25-m { height: 25%; }
100
+ .h-50-m { height: 50%; }
101
+ .h-75-m { height: 75%; }
102
+ .h-100-m { height: 100%; }
103
+ .min-h-100-m { min-height: 100%; }
104
+ .vh-25-m { height: 25vh; }
105
+ .vh-50-m { height: 50vh; }
106
+ .vh-75-m { height: 75vh; }
107
+ .vh-100-m { height: 100vh; }
108
+ .min-vh-100-m { min-height: 100vh; }
109
+ .h-auto-m { height: auto; }
110
+ .h-inherit-m { height: inherit; }
111
+ }
112
+
113
+ @media #{$breakpoint-large} {
114
+ .h1-l { height: $height-1; }
115
+ .h2-l { height: $height-2; }
116
+ .h3-l { height: $height-3; }
117
+ .h4-l { height: $height-4; }
118
+ .h5-l { height: $height-5; }
119
+ .h-25-l { height: 25%; }
120
+ .h-50-l { height: 50%; }
121
+ .h-75-l { height: 75%; }
122
+ .h-100-l { height: 100%; }
123
+ .min-h-100-l { min-height: 100%; }
124
+ .vh-25-l { height: 25vh; }
125
+ .vh-50-l { height: 50vh; }
126
+ .vh-75-l { height: 75vh; }
127
+ .vh-100-l { height: 100vh; }
128
+ .min-vh-100-l { min-height: 100vh; }
129
+ .h-auto-l { height: auto; }
130
+ .h-inherit-l { height: inherit; }
131
+ }
@@ -0,0 +1,166 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /*
9
+
10
+ HOVER EFFECTS
11
+ Docs: http://tachyons.io/docs/themes/hovers/
12
+
13
+ - Dim
14
+ - Glow
15
+ - Hide Child
16
+ - Underline text
17
+ - Grow
18
+ - Pointer
19
+ - Shadow
20
+
21
+ */
22
+
23
+ /*
24
+
25
+ Dim element on hover by adding the dim class.
26
+
27
+ */
28
+ .dim {
29
+ opacity: 1;
30
+ transition: opacity .15s ease-in;
31
+ }
32
+ .dim:hover,
33
+ .dim:focus {
34
+ opacity: .5;
35
+ transition: opacity .15s ease-in;
36
+ }
37
+ .dim:active {
38
+ opacity: .8; transition: opacity .15s ease-out;
39
+ }
40
+
41
+ /*
42
+
43
+ Animate opacity to 100% on hover by adding the glow class.
44
+
45
+ */
46
+ .glow {
47
+ transition: opacity .15s ease-in;
48
+ }
49
+ .glow:hover,
50
+ .glow:focus {
51
+ opacity: 1;
52
+ transition: opacity .15s ease-in;
53
+ }
54
+
55
+ /*
56
+
57
+ Hide child & reveal on hover:
58
+
59
+ Put the hide-child class on a parent element and any nested element with the
60
+ child class will be hidden and displayed on hover or focus.
61
+
62
+ <div class="hide-child">
63
+ <div class="child"> Hidden until hover or focus </div>
64
+ <div class="child"> Hidden until hover or focus </div>
65
+ <div class="child"> Hidden until hover or focus </div>
66
+ <div class="child"> Hidden until hover or focus </div>
67
+ </div>
68
+ */
69
+
70
+ .hide-child .child {
71
+ opacity: 0;
72
+ transition: opacity .15s ease-in;
73
+ }
74
+ .hide-child:hover .child,
75
+ .hide-child:focus .child,
76
+ .hide-child:active .child {
77
+ opacity: 1;
78
+ transition: opacity .15s ease-in;
79
+ }
80
+
81
+ .underline-hover:hover,
82
+ .underline-hover:focus {
83
+ text-decoration: underline;
84
+ }
85
+
86
+ /* Can combine this with overflow-hidden to make background images grow on hover
87
+ * even if you are using background-size: cover */
88
+
89
+ .grow {
90
+ -moz-osx-font-smoothing: grayscale;
91
+ backface-visibility: hidden;
92
+ transform: translateZ(0);
93
+ transition: transform 0.25s ease-out;
94
+ }
95
+
96
+ .grow:hover,
97
+ .grow:focus {
98
+ transform: scale(1.05);
99
+ }
100
+
101
+ .grow:active {
102
+ transform: scale(.90);
103
+ }
104
+
105
+ .grow-large {
106
+ -moz-osx-font-smoothing: grayscale;
107
+ backface-visibility: hidden;
108
+ transform: translateZ(0);
109
+ transition: transform .25s ease-in-out;
110
+ }
111
+
112
+ .grow-large:hover,
113
+ .grow-large:focus {
114
+ transform: scale(1.2);
115
+ }
116
+
117
+ .grow-large:active {
118
+ transform: scale(.95);
119
+ }
120
+
121
+ /* Add pointer on hover */
122
+
123
+ .pointer:hover {
124
+ cursor: pointer;
125
+ }
126
+
127
+ /*
128
+ Add shadow on hover.
129
+
130
+ Performant box-shadow animation pattern from
131
+ http://tobiasahlin.com/blog/how-to-animate-box-shadow/
132
+ */
133
+
134
+ .shadow-hover {
135
+ cursor: pointer;
136
+ position: relative;
137
+ transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
138
+ }
139
+
140
+ .shadow-hover::after {
141
+ content: '';
142
+ box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
143
+ border-radius: inherit;
144
+ opacity: 0;
145
+ position: absolute;
146
+ top: 0;
147
+ left: 0;
148
+ width: 100%;
149
+ height: 100%;
150
+ z-index: -1;
151
+ transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
152
+ }
153
+
154
+ .shadow-hover:hover::after,
155
+ .shadow-hover:focus::after {
156
+ opacity: 1;
157
+ }
158
+
159
+ /* Combine with classes in skins and skins-pseudo for
160
+ * many different transition possibilities. */
161
+
162
+ .bg-animate,
163
+ .bg-animate:hover,
164
+ .bg-animate:focus {
165
+ transition: background-color .15s ease-in-out;
166
+ }