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,57 @@
1
+ // Masthead
2
+ //
3
+ // The style of the site's title and optional secondary description.
4
+
5
+ .masthead {
6
+ padding-top: 1rem;
7
+ padding-bottom: 1rem;
8
+ margin-bottom: 3rem;
9
+ text-align: center;
10
+ }
11
+
12
+ .masthead-title {
13
+ margin-top: 0;
14
+ margin-bottom: 20px;
15
+ color: $midnight-text-color;
16
+ position: relative;
17
+ text-align: center;
18
+ padding-right: 12px;
19
+
20
+ @media (prefers-color-scheme: dark) {
21
+ color: $midnight-text-color-dark;
22
+ }
23
+
24
+ a {
25
+ color: inherit;
26
+ }
27
+
28
+ small {
29
+ font-size: 75%;
30
+ font-weight: 400;
31
+ opacity: .5;
32
+ }
33
+ }
34
+
35
+ .navigation {
36
+ display: block;
37
+ font-size: 100%;
38
+ font-weight: 500;
39
+ color: $midnight-text-color;
40
+
41
+ @media (prefers-color-scheme: dark) {
42
+ color: $midnight-text-color-dark;
43
+ }
44
+
45
+ ul#navigation-list {
46
+ list-style: none;
47
+ margin: 0;
48
+ padding: 0;
49
+ }
50
+ ul#navigation-list li {
51
+ display: inline;
52
+ list-style: none;
53
+ padding-left: 0;
54
+ padding-right: 12px;
55
+ margin: 0;
56
+ }
57
+ }
@@ -0,0 +1,201 @@
1
+ // Posts and pages
2
+
3
+ figure {
4
+ margin-right: 0;
5
+ margin-left: 0;
6
+ margin-top: 1.5em;
7
+ margin-bottom: 2em;
8
+
9
+ & > :nth-last-child(2) {
10
+ margin-bottom: 0;
11
+
12
+ & > :last-child {
13
+ margin-bottom: 0;
14
+ }
15
+ }
16
+ figcaption {
17
+ color: #878787;
18
+ margin-top: 0.3em;
19
+ font-size: 0.8em;
20
+ text-align: center
21
+ }
22
+ &.screenshot {
23
+ margin-left: 0;
24
+ margin-right: 0;
25
+ margin-top: 0;
26
+
27
+ figcaption {
28
+ margin-top: -1em;
29
+ margin-right: 2em;
30
+ margin-left: 2em;
31
+ }
32
+ }
33
+ &.attributed-quote {
34
+ margin-left: 0;
35
+ margin-right: 0;
36
+
37
+ figcaption {
38
+ margin-top: 0.8em;
39
+ margin-left: 4em;
40
+
41
+ p {
42
+ display: inline;
43
+ }
44
+ &::first-letter {
45
+ margin-left: -2.5ex;
46
+ }
47
+ }
48
+ }
49
+ }
50
+
51
+ @media screen and (max-width: 760px) {
52
+ figure {
53
+ margin-left: 1em;
54
+ margin-right: 1em;
55
+ }
56
+ }
57
+
58
+ @media screen and (max-width: 500px) {
59
+ figure.screenshot figcaption {
60
+ margin-top: 0;
61
+ }
62
+ }
63
+
64
+ // End of alterations for captions.
65
+
66
+ .page,
67
+ .post {
68
+ margin-bottom: 1em;
69
+
70
+ li + li {
71
+ margin-top: .25rem;
72
+ }
73
+ }
74
+
75
+ // Blog post or page title
76
+ .page-title,
77
+ .post-title,
78
+ .post-title a {
79
+ color: $midnight-text-color;
80
+
81
+ @media (prefers-color-scheme: dark) {
82
+ color: $midnight-text-color-dark;
83
+ }
84
+ }
85
+
86
+ .page-title,
87
+ .post-title {
88
+ margin-top: 0;
89
+ }
90
+
91
+ // Meta data line below post title
92
+ .post-date {
93
+ display: block;
94
+ margin-top: -.5rem;
95
+ margin-bottom: 1rem;
96
+ color: $midnight-text-color;
97
+
98
+ @media (prefers-color-scheme: dark) {
99
+ color: $midnight-text-color-dark;
100
+ }
101
+ }
102
+
103
+ .permalink {
104
+ display: block;
105
+ font-size: 90%;
106
+ margin-top: -.9rem;
107
+ margin-bottom: 1.5rem;
108
+ color: $midnight-text-color;
109
+
110
+ @media (prefers-color-scheme: dark) {
111
+ color: $midnight-text-color-dark;
112
+ }
113
+ }
114
+
115
+ .external-link {
116
+ display: block;
117
+ font-size: 90%;
118
+ margin-top: -.9rem;
119
+ margin-bottom: 1.5rem;
120
+ opacity: .5;
121
+ color: $midnight-text-color;
122
+
123
+ @media (prefers-color-scheme: dark) {
124
+ color: $midnight-text-color-dark;
125
+ }
126
+ }
127
+
128
+ .tag-list {
129
+ padding-top: 0px;
130
+ padding-bottom: 4px;
131
+ padding-right: 8px;
132
+ border-radius: 5px;
133
+ color: $midnight-text-color;
134
+
135
+ @media (prefers-color-scheme: dark) {
136
+ color: $midnight-code-dark;
137
+ }
138
+ }
139
+
140
+ // Related posts
141
+ .related {
142
+ padding-top: 2rem;
143
+ padding-bottom: 2rem;
144
+ margin-bottom: 2rem;
145
+ border-top: 1px solid #d4d4d4;
146
+ border-bottom: 1px solid #d4d4d4;
147
+
148
+ @media (prefers-color-scheme: dark) {
149
+ border-top: 1px solid #333333;
150
+ border-bottom: 1px solid #333333;
151
+ }
152
+ }
153
+
154
+ .PageNavigation {
155
+ font-size: 18px;
156
+ display: block;
157
+ width: auto;
158
+ overflow: hidden;
159
+ }
160
+
161
+ .PageNavigation a {
162
+ display: inline;
163
+ width: auto;
164
+ float: left;
165
+ margin: 1em 0;
166
+ }
167
+
168
+ .PageNavigation .next {
169
+ float: right;
170
+ width: auto;
171
+ text-align: right;
172
+ }
173
+
174
+ .related-posts {
175
+ padding-left: 0;
176
+ list-style: none;
177
+
178
+ h3 {
179
+ margin-top: 0;
180
+ }
181
+
182
+ li {
183
+ small {
184
+ font-size: 75%;
185
+ color: #999;
186
+ }
187
+
188
+ a:hover {
189
+ color: $midnight-accent-light;
190
+ text-decoration: none;
191
+
192
+ @media (prefers-color-scheme: dark) {
193
+ color: $midnight-accent-dark;
194
+ }
195
+
196
+ small {
197
+ color: inherit;
198
+ }
199
+ }
200
+ }
201
+ }
@@ -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: $midnight-header-light;
9
+ position: relative;
10
+
11
+ @media (prefers-color-scheme: dark) {
12
+ color: $midnight-header-dark;
13
+ }
14
+ }
15
+
16
+ h2::before,h4::before,h5::before,h6::before {
17
+ content: "#";
18
+ color: $midnight-accent-light;
19
+ left: -1.2em;
20
+ top: 0;
21
+ position: absolute;
22
+
23
+ @media (prefers-color-scheme: dark) {
24
+ color: $midnight-accent-dark;
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: $midnight-text-color;
82
+ text-transform: uppercase;
83
+
84
+ @media (prefers-color-scheme: dark) {
85
+ color: $midnight-text-color-dark;
86
+ }
87
+
88
+ &[title] {
89
+ cursor: help;
90
+ border-bottom: 1px dotted #e5e5e5;
91
+ }
92
+ }
93
+
94
+ span.link-arrow {
95
+ color: #989898;
96
+
97
+ @media (prefers-color-scheme: dark) {
98
+ color: #989898;
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: $midnight-text-color;
132
+ padding: 2px 2px;
133
+
134
+ @media (prefers-color-scheme: dark) {
135
+ background: #0fb47c;
136
+ color: $midnight-text-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: $midnight-accent-light;
150
+ border: 1px solid #eee;
151
+ border-radius: 1em;
152
+ vertical-align: middle;
153
+
154
+ @media (prefers-color-scheme: dark) {
155
+ color: $midnight-accent-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 $midnight-accent-light;
178
+
179
+ @media (prefers-color-scheme: dark) {
180
+ background: #2c2c2c;
181
+ border: solid 1px $midnight-accent-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
+ }