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.
- checksums.yaml +7 -0
- data/CHANGELOG.md +10 -0
- data/LICENSE.md +10 -0
- data/README.md +63 -0
- data/_includes/disqus_comments.html +14 -0
- data/_includes/figure +12 -0
- data/_includes/footer.html +17 -0
- data/_includes/google-analytics.html +7 -0
- data/_includes/google-tag-manager-noscript.html +3 -0
- data/_includes/google-tag-manager.html +6 -0
- data/_includes/head.html +13 -0
- data/_includes/netlify-form.html +18 -0
- data/_includes/read_time.html +16 -0
- data/_layouts/archive.html +15 -0
- data/_layouts/default.html +12 -0
- data/_layouts/front.html +11 -0
- data/_layouts/home.html +25 -0
- data/_layouts/page.html +14 -0
- data/_layouts/post.html +30 -0
- data/_sass/_cms.scss +80 -0
- data/_sass/_theme.scss +78 -0
- data/_sass/_variables.scss +149 -0
- data/_sass/scss/_aspect-ratios.scss +142 -0
- data/_sass/scss/_background-position.scss +133 -0
- data/_sass/scss/_background-size.scss +41 -0
- data/_sass/scss/_border-colors.scss +93 -0
- data/_sass/scss/_border-radius.scss +134 -0
- data/_sass/scss/_border-style.scss +55 -0
- data/_sass/scss/_border-widths.scss +81 -0
- data/_sass/scss/_borders.scss +65 -0
- data/_sass/scss/_box-shadow.scss +48 -0
- data/_sass/scss/_box-sizing.scss +49 -0
- data/_sass/scss/_clears.scss +47 -0
- data/_sass/scss/_coordinates.scss +153 -0
- data/_sass/scss/_debug-children.scss +21 -0
- data/_sass/scss/_debug-grid.scss +33 -0
- data/_sass/scss/_debug.scss +127 -0
- data/_sass/scss/_debug_children.scss +18 -0
- data/_sass/scss/_display.scss +111 -0
- data/_sass/scss/_flexbox.scss +257 -0
- data/_sass/scss/_floats.scss +56 -0
- data/_sass/scss/_font-family.scss +99 -0
- data/_sass/scss/_font-style.scss +36 -0
- data/_sass/scss/_font-weight.scss +87 -0
- data/_sass/scss/_forms.scss +23 -0
- data/_sass/scss/_gradients.scss +29 -0
- data/_sass/scss/_heights.scss +131 -0
- data/_sass/scss/_hovers.scss +166 -0
- data/_sass/scss/_images.scss +18 -0
- data/_sass/scss/_letter-spacing.scss +40 -0
- data/_sass/scss/_line-height.scss +41 -0
- data/_sass/scss/_links.scss +34 -0
- data/_sass/scss/_lists.scss +15 -0
- data/_sass/scss/_max-widths.scss +105 -0
- data/_sass/scss/_module-template.scss +29 -0
- data/_sass/scss/_negative-margins.scss +205 -0
- data/_sass/scss/_nested.scss +63 -0
- data/_sass/scss/_normalize.scss +454 -0
- data/_sass/scss/_opacity.scss +27 -0
- data/_sass/scss/_outlines.scss +39 -0
- data/_sass/scss/_overflow.scss +82 -0
- data/_sass/scss/_position.scss +44 -0
- data/_sass/scss/_rotations.scss +50 -0
- data/_sass/scss/_skins-pseudo.scss +243 -0
- data/_sass/scss/_skins.scss +143 -0
- data/_sass/scss/_spacing.scss +947 -0
- data/_sass/scss/_styles.scss +15 -0
- data/_sass/scss/_tables.scss +42 -0
- data/_sass/scss/_text-align.scss +49 -0
- data/_sass/scss/_text-decoration.scss +42 -0
- data/_sass/scss/_text-transform.scss +53 -0
- data/_sass/scss/_type-scale.scss +102 -0
- data/_sass/scss/_typography.scss +129 -0
- data/_sass/scss/_utilities.scss +57 -0
- data/_sass/scss/_vertical-align.scss +43 -0
- data/_sass/scss/_visibility.scss +58 -0
- data/_sass/scss/_white-space.scss +41 -0
- data/_sass/scss/_widths.scss +150 -0
- data/_sass/scss/_word-break.scss +43 -0
- data/_sass/scss/_z-index.scss +60 -0
- data/assets/css/jam.scss +5 -0
- 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
|
+
}
|