jekyll-theme-primer 0.1.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.
Files changed (68) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.md +21 -0
  3. data/README.md +21 -0
  4. data/_includes/.gitkeep +1 -0
  5. data/_layouts/default.html +14 -0
  6. data/_sass/jekyll-theme-primer.scss +8 -0
  7. data/_sass/normalize.css/CHANGELOG.md +135 -0
  8. data/_sass/normalize.css/LICENSE.md +21 -0
  9. data/_sass/normalize.css/README.md +128 -0
  10. data/_sass/normalize.css/normalize.scss +419 -0
  11. data/_sass/normalize.css/package.json +111 -0
  12. data/_sass/primer-base/CHANGELOG.md +48 -0
  13. data/_sass/primer-base/LICENSE +21 -0
  14. data/_sass/primer-base/README.md +48 -0
  15. data/_sass/primer-base/build/build.css +2 -0
  16. data/_sass/primer-base/index.scss +5 -0
  17. data/_sass/primer-base/lib/base.scss +66 -0
  18. data/_sass/primer-base/lib/typography-base.scss +85 -0
  19. data/_sass/primer-base/package.json +109 -0
  20. data/_sass/primer-layout/CHANGELOG.md +44 -0
  21. data/_sass/primer-layout/LICENSE +21 -0
  22. data/_sass/primer-layout/README.md +141 -0
  23. data/_sass/primer-layout/build/build.css +2 -0
  24. data/_sass/primer-layout/index.scss +4 -0
  25. data/_sass/primer-layout/lib/columns.scss +69 -0
  26. data/_sass/primer-layout/lib/container.scss +33 -0
  27. data/_sass/primer-layout/lib/grid-offset.scss +30 -0
  28. data/_sass/primer-layout/lib/grid.scss +48 -0
  29. data/_sass/primer-layout/package.json +105 -0
  30. data/_sass/primer-markdown/CHANGELOG.md +168 -0
  31. data/_sass/primer-markdown/LICENSE +21 -0
  32. data/_sass/primer-markdown/README.md +223 -0
  33. data/_sass/primer-markdown/build/build.css +2 -0
  34. data/_sass/primer-markdown/index.scss +8 -0
  35. data/_sass/primer-markdown/lib/blob-csv.scss +27 -0
  36. data/_sass/primer-markdown/lib/code.scss +76 -0
  37. data/_sass/primer-markdown/lib/headings.scss +65 -0
  38. data/_sass/primer-markdown/lib/images.scss +119 -0
  39. data/_sass/primer-markdown/lib/lists.scss +72 -0
  40. data/_sass/primer-markdown/lib/markdown-body.scss +111 -0
  41. data/_sass/primer-markdown/lib/tables.scss +29 -0
  42. data/_sass/primer-markdown/package.json +109 -0
  43. data/_sass/primer-support/CHANGELOG.md +66 -0
  44. data/_sass/primer-support/LICENSE +21 -0
  45. data/_sass/primer-support/README.md +42 -0
  46. data/_sass/primer-support/index.scss +7 -0
  47. data/_sass/primer-support/lib/mixins/layout.scss +52 -0
  48. data/_sass/primer-support/lib/mixins/misc.scss +29 -0
  49. data/_sass/primer-support/lib/mixins/typography.scss +76 -0
  50. data/_sass/primer-support/lib/variables.scss +179 -0
  51. data/_sass/primer-support/package.json +105 -0
  52. data/_sass/primer-utilities/CHANGELOG.md +94 -0
  53. data/_sass/primer-utilities/LICENSE +21 -0
  54. data/_sass/primer-utilities/README.md +48 -0
  55. data/_sass/primer-utilities/build/build.css +2 -0
  56. data/_sass/primer-utilities/build/index.js +2 -0
  57. data/_sass/primer-utilities/index.scss +9 -0
  58. data/_sass/primer-utilities/lib/animations.scss +156 -0
  59. data/_sass/primer-utilities/lib/border.scss +29 -0
  60. data/_sass/primer-utilities/lib/colors.scss +45 -0
  61. data/_sass/primer-utilities/lib/layout.scss +109 -0
  62. data/_sass/primer-utilities/lib/margin.scss +58 -0
  63. data/_sass/primer-utilities/lib/padding.scss +54 -0
  64. data/_sass/primer-utilities/lib/typography.scss +155 -0
  65. data/_sass/primer-utilities/package.json +108 -0
  66. data/_sass/rouge.scss +209 -0
  67. data/assets/style.scss +4 -0
  68. metadata +138 -0
@@ -0,0 +1,29 @@
1
+ // Border utilities
2
+ // stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
3
+ .border { border: $border !important; }
4
+ .border-top { border-top: $border !important; }
5
+ .border-right { border-right: $border !important; }
6
+ .border-bottom { border-bottom: $border !important; }
7
+ .border-left { border-left: $border !important; }
8
+
9
+ .border-y {
10
+ border-top: $border !important;
11
+ border-bottom: $border !important;
12
+ }
13
+
14
+ // Border colors
15
+ .border-blue { border-color: $border-blue !important; }
16
+ .border-gray-light { border-color: $border-gray-light !important; }
17
+ .border-gray-dark { border-color: $border-gray-dark !important; }
18
+
19
+ // Without borders
20
+ .border-0 { border: 0 !important; }
21
+ .border-top-0 { border-top: 0 !important; }
22
+ .border-right-0 { border-right: 0 !important; }
23
+ .border-bottom-0 { border-bottom: 0 !important; }
24
+ .border-left-0 { border-left: 0 !important; }
25
+
26
+ // Rounded corners
27
+ .rounded-0 { border-radius: 0 !important; }
28
+ .rounded-1 { border-radius: $border-radius !important; }
29
+ .rounded-2 { border-radius: $border-radius * 2 !important; }
@@ -0,0 +1,45 @@
1
+ // Color utilities
2
+ // stylelint-disable block-opening-brace-space-before, block-closing-brace-newline-before, block-opening-brace-newline-after, selector-list-comma-newline-after, block-opening-brace-space-after, primer/selector-no-utility, rule-non-nested-empty-line-before
3
+
4
+ // background colors
5
+ .bg-white { background-color: $bg-white !important; }
6
+ .bg-blue { background-color: $bg-blue !important; }
7
+ .bg-blue-light { background-color: $bg-blue-light !important; }
8
+ .bg-gray-dark { background-color: $bg-gray-dark !important; }
9
+ .bg-gray { background-color: $bg-gray !important; }
10
+ .bg-gray-light { background-color: $bg-gray-light !important; }
11
+ .bg-green { background-color: $bg-green !important; }
12
+ .bg-red { background-color: $bg-red !important; }
13
+
14
+ // text colors
15
+ .text-blue { color: $text-blue !important; }
16
+ .text-red { color: $text-red !important; }
17
+ .text-gray-light { color: $text-gray-light !important; }
18
+ .text-gray { color: $text-gray !important; }
19
+ .text-gray-dark { color: $text-gray-dark !important; }
20
+ .text-green { color: $text-green !important; }
21
+ .text-orange { color: $text-orange !important; }
22
+ .text-purple { color: $text-purple !important; }
23
+ .text-white { color: $text-white !important; }
24
+ .text-inherit { color: inherit !important; }
25
+
26
+ // link colors
27
+ .link-blue { color: $text-blue !important; }
28
+ .link-gray-dark { color: $text-gray-dark !important; }
29
+ .link-gray { color: $text-gray !important; }
30
+
31
+ // Text states
32
+ .text-renamed { color: $status-renamed !important; }
33
+ .text-pending { color: $status-pending !important; }
34
+
35
+ // Muted link
36
+ //
37
+ // Have a link you need to be gray to start, and blue on hover? Use this.
38
+ .muted-link {
39
+ color: $text-gray !important;
40
+
41
+ &:hover {
42
+ color: $text-blue !important;
43
+ text-decoration: none;
44
+ }
45
+ }
@@ -0,0 +1,109 @@
1
+ // Layout
2
+ // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
3
+ // stylelint-disable block-closing-brace-newline-before, block-opening-brace-newline-after
4
+ // stylelint-disable rule-non-nested-empty-line-before
5
+
6
+ // position utilites
7
+ .position-static { position: static !important; }
8
+ .position-relative { position: relative !important; }
9
+ .position-absolute { position: absolute !important; }
10
+ .position-fixed { position: fixed !important; }
11
+
12
+ .top-0 { top: 0 !important; }
13
+ .right-0 { right: 0 !important; }
14
+ .bottom-0 { bottom: 0 !important; }
15
+ .left-0 { left: 0 !important; }
16
+
17
+ // Vertical alignment
18
+ .v-align-middle { vertical-align: middle !important; }
19
+ .v-align-top { vertical-align: top !important; }
20
+ .v-align-bottom { vertical-align: bottom !important; }
21
+ .v-align-text-top { vertical-align: text-top !important; }
22
+ .v-align-text-bottom { vertical-align: text-bottom !important; }
23
+
24
+ // Overflow utilities
25
+ // overflow-hidden can also be used to create a new
26
+ // block formatting context or clear floats.
27
+ .overflow-hidden { overflow: hidden !important; }
28
+ .overflow-scroll { overflow: scroll !important; }
29
+ .overflow-auto { overflow: auto !important; }
30
+
31
+ // Clear floats
32
+ .clearfix {
33
+ @include clearfix;
34
+ }
35
+
36
+ // Floats
37
+ .float-right { float: right !important; }
38
+ .float-left { float: left !important; }
39
+
40
+ // Responsive float utlities
41
+ // .float-md-left, .float-lg-right, ...
42
+ @each $breakpoint in map-keys($breakpoints) {
43
+ @include breakpoint($breakpoint) {
44
+ .float-#{$breakpoint}-left { float: left !important; }
45
+ .float-#{$breakpoint}-right { float: right !important; }
46
+ }
47
+ }
48
+
49
+ // Width and height utilities, helpful in combination
50
+ // with display-table utilities and images
51
+ .width-fit { max-width: 100% !important; }
52
+ .width-full { width: 100% !important; }
53
+ .height-full { height: 100% !important; }
54
+
55
+ // Remove min-width from element
56
+ .min-width-0 { min-width: 0 !important; }
57
+
58
+ // Visibility utilities
59
+ .v-hidden { visibility: hidden !important; }
60
+ .v-visible { visibility: visible !important; }
61
+
62
+ // Display utilites
63
+ .d-table { display: table !important; }
64
+ .d-table-cell { display: table-cell !important; }
65
+ .table-fixed { table-layout: fixed !important; }
66
+
67
+ .d-block { display: block !important; }
68
+ .d-inline { display: inline !important; }
69
+ .d-inline-block { display: inline-block !important; }
70
+ .d-none { display: none !important; }
71
+
72
+ // Responsive display utlities
73
+ // .d-sm-none, .d-lg-inline, ...
74
+ @each $breakpoint in map-keys($breakpoints) {
75
+ @include breakpoint($breakpoint) {
76
+ .d-#{$breakpoint}-table { display: table !important; }
77
+ .d-#{$breakpoint}-table-cell { display: table-cell !important; }
78
+ .d-#{$breakpoint}-block { display: block !important; }
79
+ .d-#{$breakpoint}-inline { display: inline !important; }
80
+ .d-#{$breakpoint}-inline-block { display: inline-block !important; }
81
+ .d-#{$breakpoint}-none { display: none !important; }
82
+ }
83
+ }
84
+
85
+ // Hide utilities for each breakpoint
86
+ // Each hide utility only applies to one breakpoint range.
87
+ @media (max-width: $width-sm) {
88
+ .hide-sm {
89
+ display: none !important;
90
+ }
91
+ }
92
+
93
+ @media (min-width: $width-sm) and (max-width: $width-md) {
94
+ .hide-md {
95
+ display: none !important;
96
+ }
97
+ }
98
+
99
+ @media (min-width: $width-md) and (max-width: $width-lg) {
100
+ .hide-lg {
101
+ display: none !important;
102
+ }
103
+ }
104
+
105
+ @media (min-width: $width-lg) {
106
+ .hide-xl {
107
+ display: none !important;
108
+ }
109
+ }
@@ -0,0 +1,58 @@
1
+ // Margin spacer utilities
2
+ // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility
3
+ @for $i from 1 through length($spacers) {
4
+ $size: #{nth($spacers, $i)};
5
+ $scale: #{$i - 1};
6
+
7
+ // .m-0, .m-1, .m-2...
8
+ .m-#{$scale} { margin : #{$size} !important; }
9
+ .mt-#{$scale} { margin-top : #{$size} !important; }
10
+ .mr-#{$scale} { margin-right : #{$size} !important; }
11
+ .mb-#{$scale} { margin-bottom: #{$size} !important; }
12
+ .ml-#{$scale} { margin-left : #{$size} !important; }
13
+
14
+ .mx-#{$scale} {
15
+ margin-right: #{$size} !important;
16
+ margin-left : #{$size} !important;
17
+ }
18
+
19
+ .my-#{$scale} {
20
+ margin-top : #{$size} !important;
21
+ margin-bottom: #{$size} !important;
22
+ }
23
+ }
24
+
25
+ // Loop through the breakpoint values
26
+ @each $breakpoint in map-keys($breakpoints) {
27
+
28
+ // Loop through the spacer values
29
+ @for $i from 1 through length($spacers) {
30
+ @include breakpoint($breakpoint) {
31
+ $size: #{nth($spacers, $i)}; // sm, md, lg, xl
32
+ $scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
33
+
34
+ // .m-sm-0, .m-md-1, .m-lg-2...
35
+ .m-#{$breakpoint}-#{$scale} { margin: #{$size} !important; }
36
+ .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
37
+ .mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; }
38
+ .mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
39
+ .ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
40
+
41
+ .mx-#{$breakpoint}-#{$scale} {
42
+ margin-right: #{$size} !important;
43
+ margin-left: #{$size} !important;
44
+ }
45
+
46
+ .my-#{$breakpoint}-#{$scale} {
47
+ margin-top: #{$size} !important;
48
+ margin-bottom: #{$size} !important;
49
+ }
50
+ }
51
+ }
52
+ }
53
+
54
+ // Auto
55
+ .mx-auto {
56
+ margin-right: auto !important;
57
+ margin-left: auto !important;
58
+ }
@@ -0,0 +1,54 @@
1
+ // Padding spacer utilities
2
+ // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility
3
+ @for $i from 1 through length($spacers) {
4
+ $size: #{nth($spacers, $i)};
5
+ $scale: #{$i - 1};
6
+
7
+ // .p-0, .p-1, .p-2...
8
+ .p-#{$scale} { padding : #{$size} !important; }
9
+ .pt-#{$scale} { padding-top : #{$size} !important; }
10
+ .pr-#{$scale} { padding-right : #{$size} !important; }
11
+ .pb-#{$scale} { padding-bottom: #{$size} !important; }
12
+ .pl-#{$scale} { padding-left : #{$size} !important; }
13
+
14
+ .px-#{$scale} {
15
+ padding-right: #{$size} !important;
16
+ padding-left: #{$size} !important;
17
+ }
18
+
19
+ .py-#{$scale} {
20
+ padding-top: #{$size} !important;
21
+ padding-bottom: #{$size} !important;
22
+ }
23
+ }
24
+
25
+ // Responsive padding spacer utilities
26
+
27
+ // Loop through the breakpoint values
28
+ @each $breakpoint in map-keys($breakpoints) {
29
+
30
+ // Loop through the spacer values
31
+ @for $i from 1 through length($spacers) {
32
+ @include breakpoint($breakpoint) {
33
+ $size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl
34
+ $scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
35
+
36
+ // .p-sm-0, .p-md-1, .p-lg-2...
37
+ .p-#{$breakpoint}-#{$scale} { padding: #{$size} !important; }
38
+ .pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
39
+ .pr-#{$breakpoint}-#{$scale} { padding-right: #{$size} !important; }
40
+ .pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
41
+ .pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; }
42
+
43
+ .px-#{$breakpoint}-#{$scale} {
44
+ padding-right: #{$size} !important;
45
+ padding-left: #{$size} !important;
46
+ }
47
+
48
+ .py-#{$breakpoint}-#{$scale} {
49
+ padding-top: #{$size} !important;
50
+ padding-bottom: #{$size} !important;
51
+ }
52
+ }
53
+ }
54
+ }
@@ -0,0 +1,155 @@
1
+ // stylelint-disable block-closing-brace-space-before, primer/selector-no-utility, selector-list-comma-newline-after, declaration-block-semicolon-newline-after, declaration-block-single-line-max-declarations
2
+ // Type scale variables found in primer-support/lib/variables.scss
3
+ // $h00-size: 48px;
4
+ // $h0-size: 40px;
5
+ // $h1-size: 32px;
6
+ // $h2-size: 24px;
7
+ // $h3-size: 20px;
8
+ // $h4-size: 16px;
9
+ // $h5-size: 14px;
10
+ // $h6-size: 12px;
11
+
12
+ // Heading utilities
13
+ .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: $font-weight-bold !important; }
14
+
15
+ .h1 {
16
+ font-size: 26px !important;
17
+
18
+ @include breakpoint(md) { font-size: $h1-size !important; }
19
+
20
+ }
21
+
22
+ .h2 {
23
+ font-size: 22px !important;
24
+
25
+ @include breakpoint(md) { font-size: $h2-size !important; }
26
+ }
27
+
28
+ .h3 {
29
+ font-size: 18px !important;
30
+
31
+ @include breakpoint(md) { font-size: $h3-size !important; }
32
+
33
+ }
34
+
35
+ .h4 {
36
+ font-size: 16px !important;
37
+
38
+ @include breakpoint(md) { font-size: $h4-size !important; }
39
+
40
+ }
41
+
42
+ .h5 { font-size: $h5-size !important; }
43
+
44
+ // Does not include color property like typography base
45
+ // styles, color should be applied with color utilities.
46
+ .h6 { font-size: $h6-size !important; }
47
+
48
+ // Type utilities that match type sale
49
+ .f1 {
50
+ font-size: 26px !important;
51
+
52
+ @include breakpoint(md) { font-size: $h1-size !important; }
53
+
54
+ }
55
+
56
+ .f2 {
57
+ font-size: 22px !important;
58
+
59
+ @include breakpoint(md) { font-size: $h2-size !important; }
60
+ }
61
+
62
+ .f3 {
63
+ font-size: 18px !important;
64
+
65
+ @include breakpoint(md) { font-size: $h3-size !important; }
66
+
67
+ }
68
+
69
+ .f4 {
70
+ font-size: 16px !important;
71
+
72
+ @include breakpoint(md) { font-size: $h4-size !important; }
73
+
74
+ }
75
+
76
+ .f5 { font-size: $h5-size !important; }
77
+ .f6 { font-size: $h6-size !important; }
78
+
79
+ // Type utils with light weight that match type scale
80
+ .f00-light {
81
+ font-size: 40px !important;
82
+ font-weight: $font-weight-light !important;
83
+
84
+ @include breakpoint(md) { font-size: $h00-size !important; }
85
+
86
+ }
87
+
88
+ .f0-light {
89
+ font-size: 32px !important;
90
+ font-weight: $font-weight-light !important;
91
+
92
+ @include breakpoint(md) { font-size: $h0-size !important; }
93
+
94
+ }
95
+
96
+ .f1-light {
97
+ font-size: 26px !important;
98
+ font-weight: $font-weight-light !important;
99
+
100
+ @include breakpoint(md) { font-size: $h1-size !important; }
101
+
102
+ }
103
+
104
+ .f2-light {
105
+ font-size: 22px !important;
106
+ font-weight: $font-weight-light !important;
107
+
108
+ @include breakpoint(md) { font-size: $h2-size !important; }
109
+
110
+ }
111
+ // Same size and weight as .lead but without color property
112
+ .f3-light {
113
+ font-size: 18px !important;
114
+ font-weight: $font-weight-light !important;
115
+
116
+ @include breakpoint(md) { font-size: $h3-size !important; }
117
+
118
+ }
119
+
120
+ // Smallest text size
121
+ .text-small { font-size: $h6-size !important; } // 12px
122
+
123
+ // Large leading paragraphs
124
+ .lead {
125
+ margin-bottom: 30px;
126
+ font-size: $h3-size;
127
+ font-weight: $font-weight-light;
128
+ color: #555;
129
+ }
130
+
131
+ // Line-height variations
132
+ // Close to commonly used line-heights. Most line-heights
133
+ // combined with type size equate to whole pixels.
134
+ // Will be improved with future typography scale updates.
135
+ .lh-condensed-ultra { line-height: $lh-condensed-ultra !important; }
136
+ .lh-condensed { line-height: $lh-condensed !important; }
137
+ .lh-default { line-height: $lh-default !important; }
138
+
139
+ // Text alignments
140
+ .text-right { text-align: right !important; }
141
+ .text-left { text-align: left !important; }
142
+ .text-center { text-align: center !important; }
143
+
144
+ // Text styles
145
+ .text-normal { font-weight: normal !important; }
146
+ .text-bold { font-weight: $font-weight-bold !important;}
147
+ .text-italic { font-style: italic !important;}
148
+ .text-uppercase { text-transform: uppercase !important; }
149
+ .no-underline { text-decoration: none !important; }
150
+ .no-wrap { white-space: nowrap !important;}
151
+
152
+ .text-emphasized {
153
+ font-weight: $font-weight-bold;
154
+ color: $text-gray-dark;
155
+ }