noir-for-jekyll 1.1.0 → 1.2.0

Sign up to get free protection for your applications and to get access to all the features.
data/_sass/_type.scss CHANGED
@@ -1,21 +1,32 @@
1
1
  // Typography
2
- //
3
- // Headings, body text, lists, and other misc typographic elements.
4
2
 
5
3
  h1, h2, h3, h4, h5, h6 {
6
4
  margin-bottom: .5rem;
7
5
  font-weight: 600;
8
6
  line-height: 1.25;
9
- color: $gray-5;
10
7
  text-rendering: optimizeLegibility;
8
+ color: #55555c;
9
+ position: relative;
10
+
11
+ @media (prefers-color-scheme: dark) {
12
+ color: #d0f6db;
13
+ }
14
+ }
11
15
 
12
- @media (prefers-color-scheme: dark) {
13
- color: $gray-9;
14
- }
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
+ }
15
26
  }
16
27
 
17
28
  h1 {
18
- font-size: 2rem;
29
+ font-size: 1.5rem;
19
30
  }
20
31
 
21
32
  h2 {
@@ -40,7 +51,6 @@ p {
40
51
 
41
52
  ul, ol, dl {
42
53
  margin-top: 0;
43
- margin-bottom: 1rem;
44
54
  }
45
55
 
46
56
  dt {
@@ -55,41 +65,52 @@ hr {
55
65
  position: relative;
56
66
  margin: 1.5rem 0;
57
67
  border: 0;
58
- border-top: 1px solid #eee;
59
- border-bottom: 1px solid #fff;
68
+ border-top: 1px solid #d4d4d4;
69
+ border-bottom: 1px solid #d4d4d4;
60
70
 
61
71
  @media (prefers-color-scheme: dark) {
62
- border-top: 1px solid #090909;
63
- border-bottom: 1px solid #070707;
72
+ border-top: 1px solid #333333;
73
+ border-bottom: 1px solid #333333;
64
74
  }
65
75
  }
66
76
 
67
77
  abbr {
68
78
  font-size: 85%;
69
79
  font-weight: bold;
70
- color: #555;
80
+ opacity: .5;
81
+ color: $body-color;
71
82
  text-transform: uppercase;
72
83
 
73
84
  @media (prefers-color-scheme: dark) {
74
- color: #777;
85
+ color: $body-color-dark;
75
86
  }
76
87
 
77
88
  &[title] {
78
89
  cursor: help;
79
- border-bottom: 1px dotted $border-color;
90
+ border-bottom: 1px dotted #e5e5e5;
80
91
  }
81
92
  }
82
93
 
94
+ span.link-arrow {
95
+ color: $light;
96
+
97
+ @media (prefers-color-scheme: dark) {
98
+ color: $dark;
99
+ }
100
+ }
101
+
83
102
  blockquote {
84
- padding: .5rem 1rem;
85
- margin: .8rem 0;
86
- color: #7a7a7a;
87
- border-left: .25rem solid $border-color;
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;
88
110
 
89
- @media (prefers-color-scheme: dark) {
90
- color: #5d5d5d;
91
- border-left: .25rem solid #838383;
92
- }
111
+ @media (prefers-color-scheme: dark) {
112
+ border-left: 3px solid #333333;
113
+ }
93
114
 
94
115
  p:last-child {
95
116
  margin-bottom: 0;
@@ -106,16 +127,37 @@ figure {
106
127
  }
107
128
 
108
129
  mark {
109
- background: #fbe428;
130
+ background: #cefce8;
131
+ color: $body-color;
110
132
  padding: 2px 2px;
133
+
134
+ @media (prefers-color-scheme: dark) {
135
+ background: #0fb47c;
136
+ color: $body-color-dark;
137
+ }
111
138
  }
112
139
 
113
- // Markdown footnotes
114
- //
115
- // See the example content post for an example.
116
-
117
140
  // Footnote number within body text
118
- a[href^="#fn:"],
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
+
119
161
  // Back to footnote link
120
162
  a[href^="#fnref:"] {
121
163
  display: inline-block;
@@ -124,14 +166,6 @@ a[href^="#fnref:"] {
124
166
  padding: 0.1em 0.1em 0.1em;
125
167
  }
126
168
 
127
- a.footnote:before {
128
- content: "[";
129
- }
130
-
131
- a.footnote:after {
132
- content: "]";
133
- }
134
-
135
169
  // List of footnotes
136
170
  .footnotes {
137
171
  margin-top: 2rem;
@@ -140,10 +174,11 @@ a.footnote:after {
140
174
  :target {
141
175
  padding: 5px;
142
176
  background: #eee;
143
- border: solid 1px $green;
177
+ border: solid 1px $light;
144
178
 
145
179
  @media (prefers-color-scheme: dark) {
146
- background: #202020;
180
+ background: #2c2c2c;
181
+ border: solid 1px $dark;
147
182
  }
148
183
  }
149
184
  }
@@ -1,35 +1,29 @@
1
- $gray-1: #f9f9f9;
2
- $gray-2: #ccc;
3
- $gray-3: #767676;
4
- $gray-4: #515151;
5
- $gray-5: #313131;
6
- $gray-6: #e1e1e1;
7
- $gray-7: #303030;
8
- $gray-8: #bababa;
9
- $gray-9: #909090;
10
- $gray-10: #a4a4a4;
11
-
12
- $green: #1ba77e;
13
- $link-color: $green;
14
-
15
- $danger: #f44336;
16
- $success: #4CAF50;
17
- $info: #2196F3;
18
- $warning: #ff9800;
19
-
20
- $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;
21
- $root-font-size: 16px;
22
- $root-line-height: 1.5;
23
-
24
- $body-color: #515151;
25
- $body-bg: #fff;
26
- $body-color-dark: #bababa;
27
- $body-bg-dark: #000;
28
-
29
- $border-color: #e5e5e5;
30
-
31
- $large-breakpoint: 38em;
32
- $large-font-size: 20px;
33
-
34
- $code-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
35
- $code-color: #bf616a;
1
+ // Color scheme for light and dark modes.
2
+
3
+ $light: #f76b48;
4
+ $dark: #1ba77e;
5
+
6
+ // Highlighting color for code block borders and language name.
7
+
8
+ $code-light: #f76b48;
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;
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: noir-for-jekyll
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.1.0
4
+ version: 1.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Victor Johnson
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-01-03 00:00:00.000000000 Z
11
+ date: 2020-01-21 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -94,7 +94,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
94
94
  - !ruby/object:Gem::Version
95
95
  version: '0'
96
96
  requirements: []
97
- rubygems_version: 3.0.3
97
+ rubygems_version: 3.1.2
98
98
  signing_key:
99
99
  specification_version: 4
100
100
  summary: Noir. An automatic dark mode adaptation of the Poole theme for Jekyll.