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.
- checksums.yaml +7 -0
- data/LICENSE +21 -0
- data/README.md +43 -0
- data/_includes/extend/image.liquid +10 -0
- data/_includes/image +1 -0
- data/_layouts/default.liquid +93 -0
- data/_layouts/plugins/compress.liquid +14 -0
- data/_sass/_rouge.scss +209 -0
- data/_sass/_variables.scss +2 -0
- data/_sass/amp.noscript.scss +6 -0
- data/_sass/amp.scss +51 -0
- data/_sass/custom.scss +16 -0
- data/_sass/primer/base/base.scss +86 -0
- data/_sass/primer/base/index.scss +6 -0
- data/_sass/primer/base/kbd.scss +21 -0
- data/_sass/primer/base/normalize.scss +418 -0
- data/_sass/primer/base/typography-base.scss +88 -0
- data/_sass/primer/markdown/blob-csv.scss +29 -0
- data/_sass/primer/markdown/code.scss +69 -0
- data/_sass/primer/markdown/headings.scss +72 -0
- data/_sass/primer/markdown/images.scss +131 -0
- data/_sass/primer/markdown/index.scss +8 -0
- data/_sass/primer/markdown/lists.scss +77 -0
- data/_sass/primer/markdown/markdown-body.scss +99 -0
- data/_sass/primer/markdown/tables.scss +38 -0
- data/_sass/primer/support/index.scss +11 -0
- data/_sass/primer/support/mixins/buttons.scss +172 -0
- data/_sass/primer/support/mixins/layout.scss +58 -0
- data/_sass/primer/support/mixins/misc.scss +29 -0
- data/_sass/primer/support/mixins/typography.scss +84 -0
- data/_sass/primer/support/variables/color-system.scss +243 -0
- data/_sass/primer/support/variables/colors.scss +55 -0
- data/_sass/primer/support/variables/layout.scss +143 -0
- data/_sass/primer/support/variables/misc.scss +42 -0
- data/_sass/primer/support/variables/typography.scss +42 -0
- data/assets/404.liquid +6 -0
- data/assets/favicon.liquid +9 -0
- data/assets/robots.liquid +9 -0
- data/assets/schema.600x60.png +0 -0
- data/assets/sitemap.liquid +17 -0
- 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
|
+
}
|