jekyll-theme-amp 0.1.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 (41) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/README.md +43 -0
  4. data/_includes/extend/image.liquid +10 -0
  5. data/_includes/image +1 -0
  6. data/_layouts/default.liquid +93 -0
  7. data/_layouts/plugins/compress.liquid +14 -0
  8. data/_sass/_rouge.scss +209 -0
  9. data/_sass/_variables.scss +2 -0
  10. data/_sass/amp.noscript.scss +6 -0
  11. data/_sass/amp.scss +51 -0
  12. data/_sass/custom.scss +16 -0
  13. data/_sass/primer/base/base.scss +86 -0
  14. data/_sass/primer/base/index.scss +6 -0
  15. data/_sass/primer/base/kbd.scss +21 -0
  16. data/_sass/primer/base/normalize.scss +418 -0
  17. data/_sass/primer/base/typography-base.scss +88 -0
  18. data/_sass/primer/markdown/blob-csv.scss +29 -0
  19. data/_sass/primer/markdown/code.scss +69 -0
  20. data/_sass/primer/markdown/headings.scss +72 -0
  21. data/_sass/primer/markdown/images.scss +131 -0
  22. data/_sass/primer/markdown/index.scss +8 -0
  23. data/_sass/primer/markdown/lists.scss +77 -0
  24. data/_sass/primer/markdown/markdown-body.scss +99 -0
  25. data/_sass/primer/markdown/tables.scss +38 -0
  26. data/_sass/primer/support/index.scss +11 -0
  27. data/_sass/primer/support/mixins/buttons.scss +172 -0
  28. data/_sass/primer/support/mixins/layout.scss +58 -0
  29. data/_sass/primer/support/mixins/misc.scss +29 -0
  30. data/_sass/primer/support/mixins/typography.scss +84 -0
  31. data/_sass/primer/support/variables/color-system.scss +243 -0
  32. data/_sass/primer/support/variables/colors.scss +55 -0
  33. data/_sass/primer/support/variables/layout.scss +143 -0
  34. data/_sass/primer/support/variables/misc.scss +42 -0
  35. data/_sass/primer/support/variables/typography.scss +42 -0
  36. data/assets/404.liquid +6 -0
  37. data/assets/favicon.liquid +9 -0
  38. data/assets/robots.liquid +9 -0
  39. data/assets/schema.600x60.png +0 -0
  40. data/assets/sitemap.liquid +17 -0
  41. metadata +96 -0
@@ -0,0 +1,243 @@
1
+ // Black based on same hue as $gray-900
2
+ $black: #1b1f23 !default;
3
+ $white: #fff !default;
4
+
5
+ //
6
+ //
7
+ // -------- Grays --------
8
+ $gray-000: #fafbfc !default;
9
+ $gray-100: #f6f8fa !default;
10
+ $gray-200: #e1e4e8 !default;
11
+ $gray-300: #d1d5da !default;
12
+ $gray-400: #959da5 !default;
13
+ $gray-500: #6a737d !default;
14
+ $gray-600: #586069 !default;
15
+ $gray-700: #444d56 !default;
16
+ $gray-800: #2f363d !default;
17
+ $gray-900: #24292e !default; // body font color
18
+
19
+ // -------- Blue --------
20
+ $blue-000: #f1f8ff !default;
21
+ $blue-100: #dbedff !default;
22
+ $blue-200: #c8e1ff !default;
23
+ $blue-300: #79b8ff !default;
24
+ $blue-400: #2188ff !default;
25
+ $blue-500: #0366d6 !default; // Default: Passes AA with #fff
26
+ $blue-600: #005cc5 !default;
27
+ $blue-700: #044289 !default;
28
+ $blue-800: #032f62 !default;
29
+ $blue-900: #05264c !default; // Passes with 1/2/300 blues
30
+
31
+ // -------- Green --------
32
+ $green-000: #f0fff4 !default;
33
+ $green-100: #dcffe4 !default;
34
+ $green-200: #bef5cb !default;
35
+ $green-300: #85e89d !default;
36
+ $green-400: #34d058 !default;
37
+ $green-500: #28a745 !default; // Default. passes AA Large
38
+ $green-600: #22863a !default; // Text green, passes AA on #fff
39
+ $green-700: #176f2c !default;
40
+ $green-800: #165c26 !default;
41
+ $green-900: #144620 !default;
42
+
43
+ // -------- Yellow --------
44
+ $yellow-000: #fffdef !default;
45
+ $yellow-100: #fffbdd !default;
46
+ $yellow-200: #fff5b1 !default;
47
+ $yellow-300: #ffea7f !default;
48
+ $yellow-400: #ffdf5d !default;
49
+ $yellow-500: #ffd33d !default;
50
+ $yellow-600: #f9c513 !default;
51
+ $yellow-700: #dbab09 !default;
52
+ $yellow-800: #b08800 !default;
53
+ $yellow-900: #735c0f !default;
54
+
55
+ // -------- Orange --------
56
+ $orange-000: #fff8f2 !default;
57
+ $orange-100: #ffebda !default;
58
+ $orange-200: #ffd1ac !default;
59
+ $orange-300: #ffab70 !default;
60
+ $orange-400: #fb8532 !default;
61
+ $orange-500: #f66a0a !default; // Default. passes AA Large with #fff
62
+ $orange-600: #e36209 !default;
63
+ $orange-700: #d15704 !default;
64
+ $orange-800: #c24e00 !default;
65
+ $orange-900: #a04100 !default;
66
+
67
+ // -------- Red --------
68
+ $red-000: #ffeef0 !default;
69
+ $red-100: #ffdce0 !default;
70
+ $red-200: #fdaeb7 !default;
71
+ $red-300: #f97583 !default;
72
+ $red-400: #ea4a5a !default;
73
+ $red-500: #d73a49 !default; // Default. passes AA
74
+ $red-600: #cb2431 !default;
75
+ $red-700: #b31d28 !default;
76
+ $red-800: #9e1c23 !default;
77
+ $red-900: #86181d !default;
78
+
79
+ // -------- Purple --------
80
+ $purple-000: #f5f0ff !default;
81
+ $purple-100: #e6dcfd !default;
82
+ $purple-200: #d1bcf9 !default;
83
+ $purple-300: #b392f0 !default;
84
+ $purple-400: #8a63d2 !default;
85
+ $purple-500: #6f42c1 !default; // passes AA with #fff
86
+ $purple-600: #5a32a3 !default;
87
+ $purple-700: #4c2889 !default;
88
+ $purple-800: #3a1d6e !default;
89
+ $purple-900: #29134e !default;
90
+
91
+ // -------- Pink --------
92
+ $pink-000: #ffeef8 !default;
93
+ $pink-100: #fedbf0 !default;
94
+ $pink-200: #f9b3dd !default;
95
+ $pink-300: #f692ce !default;
96
+ $pink-400: #ec6cb9 !default;
97
+ $pink-500: #ea4aaa !default;
98
+ $pink-600: #d03592 !default;
99
+ $pink-700: #b93a86 !default;
100
+ $pink-800: #99306f !default;
101
+ $pink-900: #6d224f !default;
102
+
103
+ // -------- Fades --------
104
+ $black-fade-15: rgba($black, 0.15) !default;
105
+ $black-fade-30: rgba($black, 0.3) !default;
106
+ $black-fade-50: rgba($black, 0.5) !default;
107
+ $black-fade-70: rgba($black, 0.7) !default;
108
+ $black-fade-85: rgba($black, 0.85) !default;
109
+
110
+ $white-fade-15: rgba($white, 0.15) !default;
111
+ $white-fade-30: rgba($white, 0.3) !default;
112
+ $white-fade-50: rgba($white, 0.5) !default;
113
+ $white-fade-70: rgba($white, 0.7) !default;
114
+ $white-fade-85: rgba($white, 0.85) !default;
115
+
116
+ // -------- Color defaults --------
117
+ $red: $red-500 !default;
118
+ $purple: $purple-500 !default;
119
+ $blue: $blue-500 !default;
120
+ $green: $green-500 !default;
121
+ $yellow: $yellow-500 !default;
122
+ $orange: $orange-500 !default;
123
+
124
+ $gray-dark: $gray-900 !default;
125
+ $gray-light: $gray-400 !default;
126
+ $gray: $gray-500 !default;
127
+
128
+ // -------- Color gradient maps --------
129
+
130
+ $grays: (
131
+ 0: $gray-000,
132
+ 1: $gray-100,
133
+ 2: $gray-200,
134
+ 3: $gray-300,
135
+ 4: $gray-400,
136
+ 5: $gray-500,
137
+ 6: $gray-600,
138
+ 7: $gray-700,
139
+ 8: $gray-800,
140
+ 9: $gray-900,
141
+ ) !default;
142
+
143
+ $blues: (
144
+ 0: $blue-000,
145
+ 1: $blue-100,
146
+ 2: $blue-200,
147
+ 3: $blue-300,
148
+ 4: $blue-400,
149
+ 5: $blue-500,
150
+ 6: $blue-600,
151
+ 7: $blue-700,
152
+ 8: $blue-800,
153
+ 9: $blue-900,
154
+ ) !default;
155
+
156
+ $greens: (
157
+ 0: $green-000,
158
+ 1: $green-100,
159
+ 2: $green-200,
160
+ 3: $green-300,
161
+ 4: $green-400,
162
+ 5: $green-500,
163
+ 6: $green-600,
164
+ 7: $green-700,
165
+ 8: $green-800,
166
+ 9: $green-900,
167
+ ) !default;
168
+
169
+ $yellows: (
170
+ 0: $yellow-000,
171
+ 1: $yellow-100,
172
+ 2: $yellow-200,
173
+ 3: $yellow-300,
174
+ 4: $yellow-400,
175
+ 5: $yellow-500,
176
+ 6: $yellow-600,
177
+ 7: $yellow-700,
178
+ 8: $yellow-800,
179
+ 9: $yellow-900,
180
+ ) !default;
181
+
182
+ $oranges: (
183
+ 0: $orange-000,
184
+ 1: $orange-100,
185
+ 2: $orange-200,
186
+ 3: $orange-300,
187
+ 4: $orange-400,
188
+ 5: $orange-500,
189
+ 6: $orange-600,
190
+ 7: $orange-700,
191
+ 8: $orange-800,
192
+ 9: $orange-900,
193
+ ) !default;
194
+
195
+ $reds: (
196
+ 0: $red-000,
197
+ 1: $red-100,
198
+ 2: $red-200,
199
+ 3: $red-300,
200
+ 4: $red-400,
201
+ 5: $red-500,
202
+ 6: $red-600,
203
+ 7: $red-700,
204
+ 8: $red-800,
205
+ 9: $red-900,
206
+ ) !default;
207
+
208
+ $purples: (
209
+ 0: $purple-000,
210
+ 1: $purple-100,
211
+ 2: $purple-200,
212
+ 3: $purple-300,
213
+ 4: $purple-400,
214
+ 5: $purple-500,
215
+ 6: $purple-600,
216
+ 7: $purple-700,
217
+ 8: $purple-800,
218
+ 9: $purple-900,
219
+ ) !default;
220
+
221
+ $pinks: (
222
+ 0: $pink-000,
223
+ 1: $pink-100,
224
+ 2: $pink-200,
225
+ 3: $pink-300,
226
+ 4: $pink-400,
227
+ 5: $pink-500,
228
+ 6: $pink-600,
229
+ 7: $pink-700,
230
+ 8: $pink-800,
231
+ 9: $pink-900,
232
+ ) !default;
233
+
234
+ $hue-maps: (
235
+ "gray": $grays,
236
+ "blue": $blues,
237
+ "green": $greens,
238
+ "yellow": $yellows,
239
+ "orange": $oranges,
240
+ "red": $reds,
241
+ "purple": $purples,
242
+ "pink": $pinks,
243
+ ) !default;
@@ -0,0 +1,55 @@
1
+ @import "color-system.scss";
2
+ // Color variables
3
+
4
+ // Border colors
5
+ $border-white: $white !default;
6
+ $border-black-fade: $black-fade-15 !default;
7
+ $border-white-fade: $white-fade-15 !default;
8
+ $border-gray-dark: $gray-300 !default;
9
+ $border-gray-darker: $gray-700 !default;
10
+ $border-gray-light: lighten($gray-200, 3%) !default;
11
+ $border-gray: $gray-200 !default;
12
+ $border-blue: $blue-500 !default;
13
+ $border-blue-light: $blue-200 !default;
14
+ $border-green: $green-400 !default;
15
+ $border-green-light: desaturate($green-300, 40%) !default;
16
+ $border-purple: $purple !default;
17
+ $border-red: $red !default;
18
+ $border-red-light: $red-300 !default;
19
+ $border-yellow: $yellow-600 !default;
20
+
21
+ // Background colors
22
+ $bg-white: $white !default;
23
+ $bg-black: $black !default;
24
+ $bg-black-fade: $black-fade-50 !default;
25
+ $bg-blue-light: $blue-000 !default;
26
+ $bg-blue: $blue-500 !default;
27
+ $bg-gray-dark: $gray-900 !default;
28
+ $bg-gray-light: $gray-000 !default;
29
+ $bg-gray: $gray-100 !default;
30
+ $bg-green: $green-500 !default;
31
+ $bg-green-light: $green-100 !default;
32
+ $bg-orange: $orange-700 !default;
33
+ $bg-purple: $purple-500 !default;
34
+ $bg-purple-light: $purple-000 !default;
35
+ $bg-pink: $pink-500 !default;
36
+ $bg-red: $red-500 !default;
37
+ $bg-red-light: $red-000 !default;
38
+ $bg-yellow: $yellow-500 !default;
39
+ $bg-yellow-light: $yellow-200 !default;
40
+ $bg-yellow-dark: $yellow-700 !default;
41
+
42
+ // Text colors
43
+ $text-black: $black !default;
44
+ $text-white: $white !default;
45
+ $text-blue: $blue-500 !default;
46
+ $text-gray-dark: $gray-900 !default;
47
+ $text-gray-light: $gray-500 !default;
48
+ $text-gray: $gray-600 !default;
49
+ $text-green: $green-600 !default;
50
+ $text-orange: $orange-900 !default;
51
+ $text-orange-light: $orange-600 !default;
52
+ $text-purple: $purple !default;
53
+ $text-pink: $pink-500 !default;
54
+ $text-red: $red-600 !default;
55
+ $text-yellow: $yellow-800 !default;
@@ -0,0 +1,143 @@
1
+ // Layout variables
2
+
3
+ // these are values for the display CSS property
4
+ $display-values: (
5
+ block,
6
+ flex,
7
+ inline,
8
+ inline-block,
9
+ inline-flex,
10
+ none,
11
+ table,
12
+ table-cell
13
+ ) !default;
14
+
15
+ // maps edges to respective corners for border-radius
16
+ $edges: (
17
+ top: (top-left, top-right),
18
+ right: (top-right, bottom-right),
19
+ bottom: (bottom-right, bottom-left),
20
+ left: (bottom-left, top-left)
21
+ ) !default;
22
+
23
+ // These are our margin and padding utility spacers. The default step size we
24
+ // use is 8px. This gives us a key of:
25
+ // 0 => 0px
26
+ // 1 => 4px
27
+ // 2 => 8px
28
+ // 3 => 16px
29
+ // 4 => 24px
30
+ // 5 => 32px
31
+ // 6 => 40px
32
+ $spacer: 8px !default;
33
+
34
+ // Our spacing scale
35
+ $spacer-0: 0 !default; // 0
36
+ $spacer-1: round($spacer / 2) !default; // 4px
37
+ $spacer-2: $spacer !default; // 8px
38
+ $spacer-3: $spacer * 2 !default; // 16px
39
+ $spacer-4: $spacer * 3 !default; // 24px
40
+ $spacer-5: $spacer * 4 !default; // 32px
41
+ $spacer-6: $spacer * 5 !default; // 40px
42
+
43
+ // The list of spacer values
44
+ $spacers: (
45
+ $spacer-0,
46
+ $spacer-1,
47
+ $spacer-2,
48
+ $spacer-3,
49
+ $spacer-4,
50
+ $spacer-5,
51
+ $spacer-6,
52
+ ) !default;
53
+
54
+ // And the map of spacers, for easier looping:
55
+ // @each $scale, $length in $spacer-map { ... }
56
+ $spacer-map: (
57
+ 0: $spacer-0,
58
+ 1: $spacer-1,
59
+ 2: $spacer-2,
60
+ 3: $spacer-3,
61
+ 4: $spacer-4,
62
+ 5: $spacer-5,
63
+ 6: $spacer-6,
64
+ ) !default;
65
+
66
+ // Em spacer variables
67
+ $em-spacer-1: 0.0625em !default; // 1/16
68
+ $em-spacer-2: 0.125em !default; // 1/8
69
+ $em-spacer-3: 0.25em !default; // 1/4
70
+ $em-spacer-4: 0.375em !default; // 3/8
71
+ $em-spacer-5: 0.5em !default; // 1/2
72
+ $em-spacer-6: 0.75em !default; // 3/4
73
+
74
+ // Size scale
75
+ // Used for buttons, inputs, labels, avatars etc.
76
+ $size: 16px !default;
77
+
78
+ $size-0: 0 !default;
79
+ $size-1: $size !default; // 16px
80
+ $size-2: $size-1 + 4px !default; // 20px
81
+ $size-3: $size-2 + 4px !default; // 24px
82
+ $size-4: $size-3 + 4px !default; // 28px
83
+ $size-5: $size-4 + 4px !default; // 32px
84
+ $size-6: $size-5 + 8px !default; // 40px
85
+ $size-7: $size-6 + 8px !default; // 48px
86
+ $size-8: $size-7 + 16px !default; // 64px
87
+
88
+ // Fixed-width container variables
89
+ $container-width: 980px !default;
90
+ $grid-gutter: 10px !default;
91
+
92
+ // Breakpoint widths
93
+ $width-xs: 0 !default;
94
+ // Small screen / phone
95
+ $width-sm: 544px !default;
96
+ // Medium screen / tablet
97
+ $width-md: 768px !default;
98
+ // Large screen / desktop (980 + (16 * 2)) <= container + gutters
99
+ $width-lg: 1012px !default;
100
+ // Extra large screen / wide desktop
101
+ $width-xl: 1280px !default;
102
+
103
+ // Responsive container widths
104
+ $container-sm: $width-sm !default;
105
+ $container-md: $width-md !default;
106
+ $container-lg: $width-lg !default;
107
+ $container-xl: $width-xl !default;
108
+
109
+ // Breakpoints in the form (name: length)
110
+ $breakpoints: (
111
+ sm: $width-sm,
112
+ md: $width-md,
113
+ lg: $width-lg,
114
+ xl: $width-xl
115
+ ) !default;
116
+
117
+ // This map in the form (breakpoint: variant) is used to iterate over
118
+ // breakpoints and create both responsive and non-responsive classes in one
119
+ // loop:
120
+ //
121
+ // ```scss
122
+ // @each $breakpoint, $variant of $responsive-variants {
123
+ // @include breakpoint($breakpoint) {
124
+ // .foo#{$variant}-bar { foo: bar !important; }
125
+ // }
126
+ // }
127
+ // ```
128
+ $responsive-variants: (
129
+ "": "",
130
+ sm: "-sm",
131
+ md: "-md",
132
+ lg: "-lg",
133
+ xl: "-xl",
134
+ ) !default;
135
+
136
+ // responive utility position values
137
+ $responsive-positions: (
138
+ static,
139
+ relative,
140
+ absolute,
141
+ fixed,
142
+ sticky
143
+ ) !default;
@@ -0,0 +1,42 @@
1
+ // Miscellaneous variables
2
+
3
+ // Border
4
+ $border-width: 1px !default;
5
+ $border-color: $border-gray !default;
6
+ $border-style: solid !default;
7
+ $border: $border-width $border-color $border-style !default;
8
+
9
+ // Border Radius
10
+ $border-radius-1: 4px !default;
11
+ $border-radius-2: 6px !default;
12
+ $border-radius: $border-radius-2 !default;
13
+
14
+ // Box shadow
15
+ $box-shadow: 0 1px 0 rgba($black, 0.04) !default;
16
+ $box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default;
17
+ $box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default;
18
+ $box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default;
19
+
20
+ $box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default; // top highlight
21
+ $box-shadow-inset: inset 0 1px 0 rgba($border-color, 0.2) !default; // top inner shadow
22
+ $box-shadow-focus: 0 0 0 3px rgba($border-blue, 0.3) !default; // blue focus ring
23
+
24
+ // Button variables
25
+ $border-color-button: $black-fade-15 !default;
26
+ $btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate?
27
+
28
+ // Form variables
29
+ $form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate?
30
+ $btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $box-shadow-focus
31
+
32
+ // Tooltips
33
+ $tooltip-max-width: 250px !default;
34
+ $tooltip-background-color: $black !default;
35
+ $tooltip-text-color: $white !default;
36
+ $tooltip-delay: 0.4s !default;
37
+ $tooltip-duration: 0.1s !default;
38
+
39
+ // diffstat background colors
40
+ $bg-diffstat-added: darken($green-400, 5%) !default;
41
+ $bg-diffstat-deleted: $red-600 !default;
42
+ $bg-diffstat-neutral: $gray-300 !default;