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,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
+ }