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,99 @@
1
+ // All of our block level items should have the same margin
2
+ // stylelint-disable selector-max-type
3
+
4
+ // This is styling for generic markdownized text. Anything you put in a
5
+ // container with .markdown-body on it should render generally well. It also
6
+ // includes some GitHub Flavored Markdown specific styling (like @mentions)
7
+ .markdown-body {
8
+ font-family: $body-font;
9
+ font-size: $h4-size;
10
+ line-height: $body-line-height;
11
+ word-wrap: break-word;
12
+
13
+ @import "../base/kbd.scss"; // adds support for keyboard shortcuts
14
+
15
+ // Clearfix on the markdown body
16
+ &::before {
17
+ display: table;
18
+ content: "";
19
+ }
20
+
21
+ &::after {
22
+ display: table;
23
+ clear: both;
24
+ content: "";
25
+ }
26
+
27
+ > *:first-child {
28
+ margin-top: 0 !important;
29
+ }
30
+
31
+ > *:last-child {
32
+ margin-bottom: 0 !important;
33
+ }
34
+
35
+ // Anchors like <a name="examples">. These sometimes end up wrapped around
36
+ // text when users mistakenly forget to close the tag or use self-closing tag
37
+ // syntax. We don't want them to appear like links.
38
+ // FIXME: a:not(:link):not(:visited) would be a little clearer here (and
39
+ // possibly faster to match), but it breaks styling of <a href> elements due
40
+ // to https://bugs.webkit.org/show_bug.cgi?id=142737.
41
+ a:not([href]) {
42
+ color: inherit;
43
+ text-decoration: none;
44
+ }
45
+
46
+ // Link Colors
47
+ .absent {
48
+ color: $text-red;
49
+ }
50
+
51
+ .anchor {
52
+ float: left;
53
+ padding-right: $spacer-1;
54
+ // stylelint-disable-next-line primer/spacing
55
+ margin-left: -20px;
56
+ line-height: $lh-condensed-ultra;
57
+
58
+ &:focus {
59
+ outline: none;
60
+ }
61
+ }
62
+
63
+ p,
64
+ blockquote,
65
+ ul,
66
+ ol,
67
+ dl,
68
+ table,
69
+ pre,
70
+ details {
71
+ margin-top: 0;
72
+ margin-bottom: $spacer-3;
73
+ }
74
+
75
+ hr {
76
+ height: $em-spacer-3;
77
+ padding: 0;
78
+ margin: $spacer-4 0;
79
+ // stylelint-disable-next-line primer/colors
80
+ background-color: $gray-200;
81
+ border: 0;
82
+ }
83
+
84
+ blockquote {
85
+ // stylelint-disable-next-line primer/spacing
86
+ padding: 0 1em;
87
+ color: $text-gray-light;
88
+ // stylelint-disable-next-line primer/borders
89
+ border-left: 0.25em $border-style lighten($gray-300, 5%);
90
+
91
+ > :first-child {
92
+ margin-top: 0;
93
+ }
94
+
95
+ > :last-child {
96
+ margin-bottom: 0;
97
+ }
98
+ }
99
+ }
@@ -0,0 +1,38 @@
1
+ // Needs refactoring
2
+ // stylelint-disable selector-max-type
3
+ .markdown-body {
4
+ // Tables
5
+ table {
6
+ display: block;
7
+ width: 100%; // keep for backwards compatibility
8
+ width: max-content;
9
+ max-width: 100%;
10
+ overflow: auto;
11
+
12
+ th {
13
+ font-weight: $font-weight-bold;
14
+ }
15
+
16
+ th,
17
+ td {
18
+ // stylelint-disable-next-line primer/spacing
19
+ padding: 6px 13px;
20
+ // stylelint-disable-next-line primer/borders
21
+ border: $border-width $border-style lighten($gray-300, 5%);
22
+ }
23
+
24
+ tr {
25
+ background-color: $bg-white;
26
+ // stylelint-disable-next-line primer/borders
27
+ border-top: $border-width $border-style darken($gray-300, 4%);
28
+
29
+ &:nth-child(2n) {
30
+ background-color: $bg-gray;
31
+ }
32
+ }
33
+
34
+ img {
35
+ background-color: transparent;
36
+ }
37
+ }
38
+ }
@@ -0,0 +1,11 @@
1
+ // variables
2
+ @import "./variables/typography.scss";
3
+ @import "./variables/colors.scss";
4
+ @import "./variables/layout.scss";
5
+ @import "./variables/misc.scss";
6
+
7
+ // mixins
8
+ @import "./mixins/typography.scss";
9
+ @import "./mixins/layout.scss";
10
+ @import "./mixins/buttons.scss";
11
+ @import "./mixins/misc.scss";
@@ -0,0 +1,172 @@
1
+
2
+ // TODO: See if the mixins below can be deprecated
3
+ // Might still be needed for .btn-blue
4
+ // ------------------------------------------------------------------
5
+
6
+ // Button color generator for primary and themed buttons
7
+
8
+ // New button hotness
9
+ @mixin btn-solid($color, $bg, $bg2) {
10
+ color: $color;
11
+ background-color: $bg2;
12
+ background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
13
+
14
+ @if $bg == $gray-000 {
15
+ &:focus,
16
+ &.focus {
17
+ box-shadow: $btn-input-focus-shadow;
18
+ }
19
+
20
+ &:hover,
21
+ &.hover {
22
+ background-color: darken($bg2, 3%);
23
+ background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
24
+ background-position: 0 -$em-spacer-5;
25
+ border-color: rgba($black, 0.35);
26
+ }
27
+
28
+ &:active,
29
+ &.selected,
30
+ &[aria-selected=true],
31
+ [open] > & {
32
+ background-color: darken(desaturate($bg, 10%), 6%);
33
+ background-image: none;
34
+ border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
35
+ box-shadow: $btn-active-shadow;
36
+ }
37
+
38
+ &:disabled,
39
+ &.disabled,
40
+ &[aria-disabled=true] {
41
+ color: rgba($color, 0.4);
42
+ background-color: $bg2;
43
+ background-image: none;
44
+ border-color: $border-color-button;
45
+ box-shadow: none;
46
+ }
47
+
48
+ }
49
+ @else {
50
+ &:focus,
51
+ &.focus {
52
+ box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
53
+ }
54
+
55
+ &:hover,
56
+ &.hover {
57
+ background-color: darken($bg2, 2%);
58
+ background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
59
+ background-position: 0 -$em-spacer-5;
60
+ border-color: $black-fade-50;
61
+ }
62
+
63
+ &:active,
64
+ &.selected,
65
+ &[aria-selected=true],
66
+ [open] > & {
67
+ background-color: darken(mix($bg, $bg2, 50%), 7%);
68
+ background-image: none;
69
+ border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
70
+ box-shadow: $btn-active-shadow;
71
+ }
72
+
73
+ &:disabled,
74
+ &.disabled,
75
+ &[aria-disabled=true] {
76
+ color: rgba($color, 0.75);
77
+ background-color: mix($bg2, $white, 50%);
78
+ background-image: none;
79
+ border-color: $border-color-button;
80
+ box-shadow: none;
81
+ }
82
+
83
+ .Counter {
84
+ color: darken($bg, 8%);
85
+ background-color: $white;
86
+ }
87
+ }
88
+ }
89
+
90
+ // Inverse button hover style
91
+ @mixin btn-inverse($color, $bg, $bg2) {
92
+ color: $color;
93
+ background-color: $bg;
94
+ background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
95
+
96
+ &:focus {
97
+ box-shadow: 0 0 0 0.2em rgba($color, 0.4);
98
+ }
99
+
100
+ &:hover {
101
+ color: $text-white;
102
+ background-color: $color;
103
+ background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
104
+ border-color: $black-fade-50;
105
+
106
+ .Counter {
107
+ color: $text-white;
108
+ }
109
+ }
110
+
111
+ &:active,
112
+ &.selected,
113
+ &[aria-selected=true],
114
+ [open] > & {
115
+ color: $text-white;
116
+ background-color: darken($color, 5%);
117
+ background-image: none;
118
+ border-color: $black-fade-50;
119
+ box-shadow: $btn-active-shadow;
120
+ }
121
+
122
+ &:disabled,
123
+ &.disabled,
124
+ &[aria-disabled=true] {
125
+ color: rgba($color, 0.4);
126
+ background-color: $bg2;
127
+ background-image: none;
128
+ border-color: $border-color-button;
129
+ box-shadow: none;
130
+ }
131
+ }
132
+
133
+ // Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
134
+ @mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
135
+ color: $text-color;
136
+ background-color: $bg-color;
137
+ background-image: none;
138
+
139
+ .Counter {
140
+ background-color: rgba($black, 0.07);
141
+ }
142
+
143
+ &:hover,
144
+ &:active,
145
+ &.selected,
146
+ &[aria-selected=true],
147
+ [open] > & {
148
+ color: $bg-color;
149
+ background-color: $text-color;
150
+ background-image: none;
151
+ border-color: $text-color;
152
+
153
+ .Counter {
154
+ color: $text-color;
155
+ background-color: $bg-color;
156
+ }
157
+ }
158
+
159
+ &:focus {
160
+ border-color: $text-color;
161
+ box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
162
+ }
163
+
164
+ &:disabled,
165
+ &.disabled,
166
+ &[aria-disabled=true] {
167
+ color: $black-fade-30;
168
+ background-color: $bg-white;
169
+ border-color: $black-fade-15;
170
+ box-shadow: none;
171
+ }
172
+ }
@@ -0,0 +1,58 @@
1
+ // Responsive media queries
2
+
3
+ @mixin breakpoint($breakpoint) {
4
+ @if $breakpoint == "" {
5
+ @content;
6
+ }
7
+
8
+ @else {
9
+ // Retrieves the value from the key
10
+ $value: map-get($breakpoints, $breakpoint);
11
+
12
+ // If the key exists in the map
13
+ @if $value != null {
14
+ // Prints a media query based on the value
15
+ @media (min-width: $value) {
16
+ @content;
17
+ }
18
+ }
19
+
20
+ // If the key doesn't exist in the map
21
+ @else {
22
+ @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
23
+ + "Please make sure it is defined in `$breakpoints` map.";
24
+ }
25
+ }
26
+ }
27
+
28
+ // Retina media query
29
+
30
+ @mixin retina-media-query {
31
+ @media
32
+ only screen and (-webkit-min-device-pixel-ratio: 2),
33
+ only screen and (min--moz-device-pixel-ratio: 2),
34
+ only screen and (-moz-min-device-pixel-ratio: 2),
35
+ only screen and (-o-min-device-pixel-ratio: 2/1),
36
+ only screen and (min-device-pixel-ratio: 2),
37
+ only screen and (min-resolution: 192dpi),
38
+ only screen and (min-resolution: 2dppx) {
39
+ @content;
40
+ }
41
+ }
42
+
43
+ // Clearfix
44
+ //
45
+ // Clears floats via mixin.
46
+
47
+ @mixin clearfix {
48
+ &::before {
49
+ display: table;
50
+ content: "";
51
+ }
52
+
53
+ &::after {
54
+ display: table;
55
+ clear: both;
56
+ content: "";
57
+ }
58
+ }
@@ -0,0 +1,29 @@
1
+ // Generate a two-color caret for any element.
2
+ @mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
3
+ &::after,
4
+ &::before {
5
+ position: absolute;
6
+ top: 11px;
7
+ right: 100%;
8
+ left: -16px;
9
+ display: block;
10
+ width: 0;
11
+ height: 0;
12
+ pointer-events: none;
13
+ content: " ";
14
+ border-color: transparent;
15
+ border-style: solid solid outset;
16
+ }
17
+
18
+ &::after {
19
+ margin-top: 1px;
20
+ margin-left: 2px;
21
+ border-width: 7px;
22
+ border-right-color: $foreground;
23
+ }
24
+
25
+ &::before {
26
+ border-width: 8px;
27
+ border-right-color: $background;
28
+ }
29
+ }
@@ -0,0 +1,84 @@
1
+ // Text hiding for image based text replacement.
2
+ // Higher performance than -9999px because it only renders
3
+ // the size of the actual text, not a full 9999px box.
4
+ @mixin hide-text() {
5
+ overflow: hidden;
6
+ text-indent: 100%;
7
+ white-space: nowrap;
8
+ }
9
+
10
+ // Heading mixins for use within components
11
+ // These match heading utilities in utilities/typography
12
+ @mixin h1 {
13
+ font-size: $h1-size;
14
+ font-weight: $font-weight-bold;
15
+ }
16
+
17
+ @mixin h2 {
18
+ font-size: $h2-size;
19
+ font-weight: $font-weight-bold;
20
+ }
21
+
22
+ @mixin h3 {
23
+ font-size: $h3-size;
24
+ font-weight: $font-weight-bold;
25
+ }
26
+
27
+ @mixin h4 {
28
+ font-size: $h4-size;
29
+ font-weight: $font-weight-bold;
30
+ }
31
+
32
+ @mixin h5 {
33
+ font-size: $h5-size;
34
+ font-weight: $font-weight-bold;
35
+ }
36
+
37
+ @mixin h6 {
38
+ font-size: $h6-size;
39
+ font-weight: $font-weight-bold;
40
+ }
41
+
42
+ // Responsive heading mixins
43
+ // There are no responsive mixins for h4-h6 because they are small
44
+ // and don't need to be smaller on mobile.
45
+ @mixin f1-responsive {
46
+ font-size: $h1-size-mobile;
47
+
48
+ // 32px on desktop
49
+ @include breakpoint(md) { font-size: $h1-size; }
50
+
51
+ }
52
+
53
+ @mixin f2-responsive {
54
+ font-size: $h2-size-mobile;
55
+
56
+ // 24px on desktop
57
+ @include breakpoint(md) { font-size: $h2-size; }
58
+ }
59
+
60
+ @mixin f3-responsive {
61
+ font-size: $h3-size-mobile;
62
+
63
+ // 20px on desktop
64
+ @include breakpoint(md) { font-size: $h3-size; }
65
+
66
+ }
67
+
68
+ // These use the mixins from above for responsive heading sizes.
69
+ // The following mixins can be used where it's convenient or necessary to
70
+ // couple the responsive font-size with the font-weight.
71
+ @mixin h1-responsive {
72
+ @include f1-responsive;
73
+ font-weight: $font-weight-bold;
74
+ }
75
+
76
+ @mixin h2-responsive {
77
+ @include f2-responsive;
78
+ font-weight: $font-weight-bold;
79
+ }
80
+
81
+ @mixin h3-responsive {
82
+ @include f3-responsive;
83
+ font-weight: $font-weight-bold;
84
+ }