noir-for-jekyll 1.7.0 → 1.7.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.
@@ -0,0 +1,193 @@
1
+ // Typography
2
+
3
+ h1, h2, h3, h4, h5, h6 {
4
+ margin-bottom: .5rem;
5
+ font-weight: 600;
6
+ line-height: 1.25;
7
+ text-rendering: optimizeLegibility;
8
+ color: #55555c;
9
+ position: relative;
10
+
11
+ @media (prefers-color-scheme: dark) {
12
+ color: #d0f6db;
13
+ }
14
+ }
15
+
16
+ h2::before,h4::before,h5::before,h6::before {
17
+ content: "#";
18
+ color: #55555c;
19
+ left: -1.2em;
20
+ top: 0;
21
+ position: absolute;
22
+
23
+ @media (prefers-color-scheme: dark) {
24
+ color: #d0f6db;
25
+ }
26
+ }
27
+
28
+ h1 {
29
+ font-size: 1.5rem;
30
+ }
31
+
32
+ h2 {
33
+ margin-top: 1rem;
34
+ font-size: 1.5rem;
35
+ }
36
+
37
+ h3 {
38
+ margin-top: 1.5rem;
39
+ font-size: 1.25rem;
40
+ }
41
+
42
+ h4, h5, h6 {
43
+ margin-top: 1rem;
44
+ font-size: 1rem;
45
+ }
46
+
47
+ p {
48
+ margin-top: 0;
49
+ margin-bottom: 1rem;
50
+ }
51
+
52
+ ul, ol, dl {
53
+ margin-top: 0;
54
+ }
55
+
56
+ dt {
57
+ font-weight: bold;
58
+ }
59
+
60
+ dd {
61
+ margin-bottom: .5rem;
62
+ }
63
+
64
+ hr {
65
+ position: relative;
66
+ margin: 1.5rem 0;
67
+ border: 0;
68
+ border-top: 1px solid #d4d4d4;
69
+ border-bottom: 1px solid #d4d4d4;
70
+
71
+ @media (prefers-color-scheme: dark) {
72
+ border-top: 1px solid #333333;
73
+ border-bottom: 1px solid #333333;
74
+ }
75
+ }
76
+
77
+ abbr {
78
+ font-size: 85%;
79
+ font-weight: bold;
80
+ opacity: .5;
81
+ color: $body-color;
82
+ text-transform: uppercase;
83
+
84
+ @media (prefers-color-scheme: dark) {
85
+ color: $body-color-dark;
86
+ }
87
+
88
+ &[title] {
89
+ cursor: help;
90
+ border-bottom: 1px dotted #e5e5e5;
91
+ }
92
+ }
93
+
94
+ span.link-arrow {
95
+ color: $light;
96
+
97
+ @media (prefers-color-scheme: dark) {
98
+ color: $dark;
99
+ }
100
+ }
101
+
102
+ blockquote {
103
+ width: 100%;
104
+ padding:.25em 90px .25em 25px;
105
+ margin: 30px auto;
106
+ font-style: italic;
107
+ position: relative;
108
+ opacity: .7;
109
+ border-left: 3px solid #d4d4d4;
110
+
111
+ @media (prefers-color-scheme: dark) {
112
+ border-left: 3px solid #333333;
113
+ }
114
+
115
+ p:last-child {
116
+ margin-bottom: 0;
117
+ }
118
+
119
+ @media (min-width: 30em) {
120
+ padding-right: 5rem;
121
+ padding-left: 1.25rem;
122
+ }
123
+ }
124
+
125
+ figure {
126
+ margin: 0;
127
+ }
128
+
129
+ mark {
130
+ background: #cefce8;
131
+ color: $body-color;
132
+ padding: 2px 2px;
133
+
134
+ @media (prefers-color-scheme: dark) {
135
+ background: #0fb47c;
136
+ color: $body-color-dark;
137
+ }
138
+ }
139
+
140
+ // Footnote number within body text
141
+ a[href^="#fn:"] {
142
+ display: inline-block;
143
+ position: relative;
144
+ font-weight: bold;
145
+ min-width: 35px;
146
+ margin: 0 0.1em 0 0.2em;
147
+ text-align: center;
148
+ background: #eee;
149
+ color: $light;
150
+ border: 1px solid #eee;
151
+ border-radius: 1em;
152
+ vertical-align: middle;
153
+
154
+ @media (prefers-color-scheme: dark) {
155
+ color: $dark;
156
+ background: #2c2c2c;
157
+ border: 1px solid #2c2c2c;
158
+ }
159
+ }
160
+
161
+ // Back to footnote link
162
+ a[href^="#fnref:"] {
163
+ display: inline-block;
164
+ margin-left: .1rem;
165
+ font-weight: bold;
166
+ padding: 0.1em 0.1em 0.1em;
167
+ }
168
+
169
+ // List of footnotes
170
+ .footnotes {
171
+ margin-top: 2rem;
172
+ font-size: 80%;
173
+
174
+ :target {
175
+ padding: 5px;
176
+ background: #eee;
177
+ border: solid 1px $light;
178
+
179
+ @media (prefers-color-scheme: dark) {
180
+ background: #2c2c2c;
181
+ border: solid 1px $dark;
182
+ }
183
+ }
184
+ }
185
+
186
+ // Custom type
187
+ //
188
+ // Extend paragraphs with `.lead` for larger introductory text.
189
+
190
+ .lead {
191
+ font-size: 1.25rem;
192
+ font-weight: 300;
193
+ }
@@ -0,0 +1,29 @@
1
+ // Color scheme for light and dark modes.
2
+
3
+ $light: #ff0066;
4
+ $dark: #1ba77e;
5
+
6
+ // Highlighting color for code block borders and language name.
7
+
8
+ $code-light: #ff0066;
9
+ $code-dark: #d0f6db;
10
+
11
+ $message-green: #62bb47;
12
+ $message-yellow: #fcb827;
13
+ $message-orange: #f6821f;
14
+ $message-red: #e03940;
15
+ $message-purple: #953c96;
16
+ $message-blue: #009ddc;
17
+
18
+ $root-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
19
+ $code-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
20
+ $root-font-size: 16px;
21
+ $root-line-height: 1.5;
22
+
23
+ $body-color: rgba(0,0,0,.8);
24
+ $body-bg: rgba(0,0,0,.03);
25
+ $body-color-dark: hsla(0,0%,100%,.8);
26
+ $body-bg-dark: rgba(0,0,0,.9);
27
+
28
+ $large-breakpoint: 38em;
29
+ $large-font-size: 20px;
@@ -0,0 +1,102 @@
1
+ // Body
2
+
3
+ * {
4
+ -webkit-box-sizing: border-box;
5
+ -moz-box-sizing: border-box;
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ html,
10
+ body {
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+
15
+ html {
16
+ font-family: $root-font-family;
17
+ font-size: $root-font-size;
18
+ line-height: $root-line-height;
19
+
20
+ @media (min-width: $large-breakpoint) {
21
+ font-size: $large-font-size;
22
+ }
23
+ }
24
+
25
+ body {
26
+ color: $midnight-text-color;
27
+ background-color: $midnight-body-bg;
28
+ -webkit-text-size-adjust: 100%;
29
+ -ms-text-size-adjust: 100%;
30
+
31
+ @media (prefers-color-scheme: dark) {
32
+ color: $midnight-text-color-dark;
33
+ background-color: $midnight-body-bg-dark;
34
+ }
35
+ }
36
+
37
+ // No `:visited` state is required by default (browsers will use `a`)
38
+ a {
39
+ color: $midnight-accent-light;
40
+ text-decoration: none;
41
+
42
+ // `:focus` is linked to `:hover` for basic accessibility
43
+ &:hover,
44
+ &:focus {
45
+ text-decoration: none;
46
+ color: $midnight-accent-light;
47
+
48
+ @media (prefers-color-scheme: dark) {
49
+ color: $midnight-accent-dark;
50
+ }
51
+ }
52
+
53
+ strong {
54
+ color: inherit;
55
+ }
56
+
57
+ @media (prefers-color-scheme: dark) {
58
+ color: $midnight-accent-dark;
59
+ }
60
+ }
61
+
62
+ img {
63
+ display: block;
64
+ max-width: 100%;
65
+ margin: 0 0 1rem;
66
+ border-radius: 5px;
67
+ }
68
+
69
+ table {
70
+ margin-bottom: 1rem;
71
+ width: 100%;
72
+ font-size: 85%;
73
+ border: 1px solid #d4d4d4;
74
+ border-collapse: collapse;
75
+
76
+ @media (prefers-color-scheme: dark) {
77
+ border: 1px solid #555555;
78
+ }
79
+ }
80
+
81
+ td,
82
+ th {
83
+ padding: .25rem .5rem;
84
+ border: 1px solid #d4d4d4;
85
+
86
+ @media (prefers-color-scheme: dark) {
87
+ border: 1px solid #555555;
88
+ }
89
+ }
90
+
91
+ th {
92
+ text-align: left;
93
+ }
94
+
95
+ tbody tr:nth-child(odd) td,
96
+ tbody tr:nth-child(odd) th {
97
+ background-color: #eee;
98
+
99
+ @media (prefers-color-scheme: dark) {
100
+ background-color: #2d2d2d;
101
+ }
102
+ }
@@ -0,0 +1,236 @@
1
+ // Code blocks and syntax highlighting
2
+
3
+ /* Applies to inline `code blocks` */
4
+ .highlighter-rouge {
5
+ font-family: $root-font-family;
6
+ font-size: 100%;
7
+ padding: 3px 4px;
8
+ background-color: #e0e0e0;
9
+ color: $midnight-code-light;
10
+ white-space: nowrap;
11
+
12
+ @media (prefers-color-scheme: dark) {
13
+ background-color: #212c2d;
14
+ color: $midnight-code-dark;
15
+ }
16
+ }
17
+
18
+ /* Applies to all code */
19
+ pre, code {
20
+ font-size: 14px;
21
+ font-family: $code-font-family;
22
+ font-style: normal;
23
+
24
+ font-feature-settings: "kern" off;
25
+ font-kerning: none;
26
+ font-variant: none;
27
+
28
+ background-color: #eef;
29
+
30
+ ::selection {
31
+ color: $code-bg;
32
+ background: #bdbdb3;
33
+ }
34
+
35
+ ::-moz-selection {
36
+ color: $code-bg;
37
+ background: #bdbdb3;
38
+ }
39
+
40
+ ::-webkit-selection {
41
+ color: $code-bg;
42
+ background: #bdbdb3;
43
+ }
44
+ }
45
+
46
+ /* Inline code, no highlight */
47
+ code {
48
+ padding: 2px 4px;
49
+ border-radius: 3px;
50
+
51
+ white-space: nowrap;
52
+ }
53
+
54
+ blockquote code {
55
+ color: #656565;
56
+ }
57
+
58
+ /* Inline code, highlight */
59
+ code.highlight {
60
+ border-radius: 3px;
61
+
62
+ color: #bdbdb3;
63
+ background-color: $code-bg;
64
+ }
65
+
66
+ /* Block code, no highlight */
67
+ pre {
68
+ border-radius: 5px;
69
+ margin: 30px * 0.75 30px / 2;
70
+ padding: 15px 17px;
71
+ overflow-x: auto;
72
+ background-color: #f1f1ff;
73
+
74
+ code {
75
+ border: 0;
76
+ padding: 0;
77
+
78
+ white-space: pre;
79
+ }
80
+ }
81
+
82
+ /* Block code, highlight */
83
+ figure.highlight, div.highlight {
84
+ position: relative;
85
+
86
+ pre {
87
+ background-color: $code-bg;
88
+ border: 1px solid $midnight-code-light;
89
+ border-radius: 15px;
90
+ box-shadow: 0 4px 30px rgba(0,0,0,.4);
91
+
92
+ @media (prefers-color-scheme: dark) {
93
+ border: 1px solid $midnight-code-dark;
94
+ }
95
+
96
+ code {
97
+ background-color: $code-bg;
98
+ color: #bdbdb3;
99
+
100
+ counter-reset: code;
101
+ display: block;
102
+ line-height: 1.5;
103
+
104
+ /* Display language name */
105
+ &[data-lang]::before {
106
+ content: attr(data-lang);
107
+ position: absolute;
108
+ right: 20px; // 15 + 5
109
+
110
+ font-size: 16px;
111
+ top: -12px;
112
+ padding: 0px 7px;
113
+ text-transform: uppercase;
114
+ font-weight: bold;
115
+
116
+ border: 1px solid $midnight-code-light;
117
+ border-top-left-radius: 15px;
118
+ border-top-right-radius: 15px;
119
+ border-bottom-left-radius: 15px;
120
+ border-bottom-right-radius: 15px;
121
+
122
+ min-width: 30px;
123
+ text-align: center;
124
+
125
+ color: $midnight-code-light;
126
+ background-color: $code-bg;
127
+
128
+ @media (prefers-color-scheme: dark) {
129
+ border: 1px solid $midnight-code-dark;
130
+ color: $midnight-code-dark;
131
+ }
132
+
133
+ @mixin media-query($device) {
134
+ @media screen and (max-width: $device) {
135
+ @content;
136
+ }
137
+ }
138
+
139
+ @include media-query(300px) {
140
+ visibility: hidden;
141
+ }
142
+ }
143
+
144
+ div {
145
+ counter-increment: code;
146
+
147
+ /* Line numbers */
148
+ &::before {
149
+ color: #608079;
150
+ content: counter(code);
151
+
152
+ width: 14px;
153
+ text-align: right;
154
+
155
+ /* Add a nice border */
156
+ display: inline-block;
157
+ padding-right: 30px / 4;
158
+ margin-right: 30px * 0.4;
159
+ border-right: 1px solid #656565;
160
+
161
+ /* For older browsers and Safari */
162
+ -webkit-touch-callout: none;
163
+ -webkit-user-select: none;
164
+ -khtml-user-select: none;
165
+ -moz-user-select: none;
166
+ -ms-user-select: none;
167
+ user-select: none;
168
+ }
169
+ }
170
+ }
171
+ }
172
+ }
173
+
174
+ /* Hide language */
175
+ .hide-lang + figure code::before {
176
+ visibility: hidden;
177
+ }
178
+
179
+ /**
180
+ * Language-specific settings
181
+ */
182
+
183
+ .language-liquid {
184
+ .p {
185
+ color: #6aaf50;
186
+ }
187
+ }
188
+
189
+ /**
190
+ * ID-specific overrides
191
+ */
192
+
193
+ #c-example + figure {
194
+ .kt {
195
+ color: #5180b3;
196
+ }
197
+ }
198
+
199
+ #liquid-example + figure {
200
+ .p {
201
+ color: #bdbdb3;
202
+ }
203
+ }
204
+
205
+ #borders-example + figure {
206
+ div {
207
+ &::before {
208
+ padding-left: 0.625em;
209
+ border-left: 1px solid #656565;
210
+ }
211
+
212
+ &:first-of-type::before {
213
+ padding-top: 0.25em;
214
+ border-top: 1px solid #656565;
215
+ border-top-left-radius: 4px;
216
+ border-top-right-radius: 4px;
217
+ }
218
+
219
+ &:last-of-type::before {
220
+ padding-bottom: 0.25em;
221
+ border-bottom: 1px solid #656565;
222
+ border-bottom-left-radius: 4px;
223
+ border-bottom-right-radius: 4px;
224
+ }
225
+ }
226
+ }
227
+
228
+ #yaml-example + figure {
229
+ .na, .s {
230
+ color: #ab75c3;
231
+ }
232
+ }
233
+
234
+ .hl-1 + figure .line-1 {
235
+ background-color: #112b47;
236
+ }