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/_message.scss CHANGED
@@ -1,65 +1,88 @@
1
- // Messages
2
- //
3
- // Show alert messages to users. You may add it to single elements like a `<p>`,
4
- // or to a parent if there are multiple elements to show.
5
-
6
- .message {
7
- margin-bottom: 1rem;
8
- padding: 1rem;
9
- color: #717171;
10
- background-color: #f9f9f9;
11
-
12
- @media (prefers-color-scheme: dark) {
13
- color: #bababa;
14
- background-color: #1e1e1e;
15
- }
16
- }
17
-
18
- .danger {
19
- margin-bottom: 15px;
20
- padding: 12px;
21
- color: #fff;
22
- background-color: $danger;
23
- border-left: .3rem solid #e31b0c;
24
- }
25
-
26
- .success {
27
- margin-bottom: 15px;
28
- padding: 12px;
29
- color: #fff;
30
- background-color: $success;
31
- border-left: .3rem solid #2e6b31;
32
- }
33
-
34
- .info {
35
- margin-bottom: 15px;
36
- padding: 12px;
37
- color: #fff;
38
- background-color: $info;
39
- border-left: .3rem solid #0a6dbc;
40
- }
41
-
42
- .warning {
43
- margin-bottom: 15px;
44
- padding: 12px;
45
- color: #fff;
46
- background-color: $warning;
47
- border-left: .3rem solid #c47500;
48
- }
49
-
50
- /* The close button */
51
- .closebtn {
52
- margin-left: 15px;
53
- color: white;
54
- font-weight: bold;
55
- float: right;
56
- font-size: 22px;
57
- line-height: 27px;
58
- cursor: pointer;
59
- transition: 0.3s;
60
- }
61
-
62
- /* When moving the mouse over the close button */
63
- .closebtn:hover {
64
- color: black;
65
- }
1
+ // Messages
2
+
3
+ // Example message box
4
+ // <p class="message-yellow"><small><b>Warning!</b> This is a sentence inside of a message box.</small></p>
5
+
6
+ // Example with close button
7
+ // <p class="message-yellow"><span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
8
+ // <small><b>Warning!</b> This is a sentence inside of a message box.</small></p>
9
+
10
+ .message {
11
+ margin-bottom: 15px;
12
+ padding: 12px;
13
+ color: #fff;
14
+ background-color: #454545;
15
+ border-left: .3rem solid #bebebe;
16
+
17
+
18
+ @media (prefers-color-scheme: dark) {
19
+ color: #fff;
20
+ background-color: #282828;
21
+ border-left: .3rem solid #595959;
22
+ }
23
+ }
24
+
25
+ .green {
26
+ margin-bottom: 15px;
27
+ padding: 12px;
28
+ color: #fff;
29
+ background-color: $message-green;
30
+ border-left: .3rem solid #93d080;
31
+ }
32
+
33
+ .yellow {
34
+ margin-bottom: 15px;
35
+ padding: 12px;
36
+ color: #fff;
37
+ background-color: $message-yellow;
38
+ border-left: .3rem solid #fdcb61;
39
+ }
40
+
41
+ .orange {
42
+ margin-bottom: 15px;
43
+ padding: 12px;
44
+ color: #fff;
45
+ background-color: $message-orange;
46
+ border-left: .3rem solid #f9ac6b;
47
+ }
48
+
49
+ .red {
50
+ margin-bottom: 15px;
51
+ padding: 12px;
52
+ color: #fff;
53
+ background-color: $message-red;
54
+ border-left: .3rem solid #e86c71;
55
+ }
56
+
57
+ .purple {
58
+ margin-bottom: 15px;
59
+ padding: 12px;
60
+ color: #fff;
61
+ background-color: $message-purple;
62
+ border-left: .3rem solid #bf61c0;
63
+ }
64
+
65
+ .blue {
66
+ margin-bottom: 15px;
67
+ padding: 12px;
68
+ color: #fff;
69
+ background-color: $message-blue;
70
+ border-left: .3rem solid #2bc2ff;
71
+ }
72
+
73
+ /* The close button */
74
+ .closebtn {
75
+ margin-left: 15px;
76
+ color: white;
77
+ font-weight: bold;
78
+ float: right;
79
+ font-size: 22px;
80
+ line-height: 27px;
81
+ cursor: pointer;
82
+ transition: 0.3s;
83
+ }
84
+
85
+ /* When moving the mouse over the close button */
86
+ .closebtn:hover {
87
+ color: black;
88
+ }
@@ -1,59 +1,56 @@
1
- // Pagination
2
- //
3
- // Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
4
- // there are no more previous or next posts to show.
5
-
6
- .pagination {
7
- overflow: hidden; // clearfix
8
- margin: 0 -1.5rem 1rem;
9
- color: #ccc;
10
- text-align: center;
11
- }
12
-
13
- // Pagination items can be `span`s or `a`s
14
- .pagination-item {
15
- display: block;
16
- padding: 1rem;
17
- border: solid #eee;
18
- border-width: 1px 0;
19
-
20
- @media (prefers-color-scheme: dark) {
21
- border: solid #111111;
22
- }
23
-
24
- &:first-child {
25
- margin-bottom: -1px;
26
- }
27
- }
28
-
29
- // Only provide a hover state for linked pagination items
30
- a.pagination-item:hover {
31
- background-color: #f5f5f5;
32
-
33
- @media (prefers-color-scheme: dark) {
34
- background-color: #060606;
35
- }
36
- }
37
-
38
- @media (min-width: 30em) {
39
- .pagination {
40
- margin: 3rem 0;
41
- }
42
-
43
- .pagination-item {
44
- float: left;
45
- width: 50%;
46
- border-width: 1px;
47
-
48
- &:first-child {
49
- margin-bottom: 0;
50
- border-top-left-radius: 4px;
51
- border-bottom-left-radius: 4px;
52
- }
53
- &:last-child {
54
- margin-left: -1px;
55
- border-top-right-radius: 4px;
56
- border-bottom-right-radius: 4px;
57
- }
58
- }
59
- }
1
+ // Pagination
2
+
3
+ .pagination {
4
+ overflow: hidden; // clearfix
5
+ margin: 0 -1.5rem 1rem;
6
+ color: #ccc;
7
+ text-align: center;
8
+ }
9
+
10
+ // Pagination items can be `span`s or `a`s
11
+ .pagination-item {
12
+ display: block;
13
+ padding: 1rem;
14
+ border: solid #eee;
15
+ border-width: 1px 0;
16
+
17
+ @media (prefers-color-scheme: dark) {
18
+ border: solid #111111;
19
+ }
20
+
21
+ &:first-child {
22
+ margin-bottom: -1px;
23
+ }
24
+ }
25
+
26
+ // Only provide a hover state for linked pagination items
27
+ a.pagination-item:hover {
28
+ background-color: #eee;
29
+
30
+ @media (prefers-color-scheme: dark) {
31
+ background-color: #1e1e1e;
32
+ }
33
+ }
34
+
35
+ @media (min-width: 30em) {
36
+ .pagination {
37
+ margin: 3rem 0;
38
+ }
39
+
40
+ .pagination-item {
41
+ float: left;
42
+ width: 50%;
43
+ border-width: 1px;
44
+
45
+ &:first-child {
46
+ margin-bottom: 0;
47
+ border-top-left-radius: 4px;
48
+ border-bottom-left-radius: 4px;
49
+ }
50
+ &:last-child {
51
+ margin-left: -1px;
52
+ border-top-right-radius: 4px;
53
+ border-bottom-right-radius: 4px;
54
+ }
55
+ }
56
+ }
data/_sass/_posts.scss CHANGED
@@ -1,11 +1,70 @@
1
1
  // Posts and pages
2
- //
3
- // Each post is wrapped in `.post` and is used on default and post layouts. Each
4
- // page is wrapped in `.page` and is only used on the page layout.
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: 1.3em;
19
+ font-size: 0.8em;
20
+ }
21
+ &.screenshot {
22
+ margin-left: 0;
23
+ margin-right: 0;
24
+ margin-top: 0;
25
+
26
+ figcaption {
27
+ margin-top: -1em;
28
+ margin-right: 2em;
29
+ margin-left: 2em;
30
+ }
31
+ }
32
+ &.attributed-quote {
33
+ margin-left: 0;
34
+ margin-right: 0;
35
+
36
+ figcaption {
37
+ margin-top: 0.8em;
38
+ margin-left: 4em;
39
+
40
+ p {
41
+ display: inline;
42
+ }
43
+ &::first-letter {
44
+ margin-left: -2.5ex;
45
+ }
46
+ }
47
+ }
48
+ }
49
+
50
+ @media screen and (max-width: 760px) {
51
+ figure {
52
+ margin-left: 1em;
53
+ margin-right: 1em;
54
+ }
55
+ }
56
+
57
+ @media screen and (max-width: 500px) {
58
+ figure.screenshot figcaption {
59
+ margin-top: 0;
60
+ }
61
+ }
62
+
63
+ // End of alterations for captions.
5
64
 
6
65
  .page,
7
66
  .post {
8
- margin-bottom: 4em;
67
+ margin-bottom: 2em;
9
68
 
10
69
  li + li {
11
70
  margin-top: .25rem;
@@ -16,10 +75,10 @@
16
75
  .page-title,
17
76
  .post-title,
18
77
  .post-title a {
19
- color: $gray-7;
78
+ color: $body-color;
20
79
 
21
80
  @media (prefers-color-scheme: dark) {
22
- color: $gray-8;
81
+ color: $body-color-dark;
23
82
  }
24
83
  }
25
84
 
@@ -33,10 +92,23 @@
33
92
  display: block;
34
93
  margin-top: -.5rem;
35
94
  margin-bottom: 1rem;
36
- color: $gray-9;
95
+ opacity: .8;
96
+ color: $body-color;
97
+
98
+ @media (prefers-color-scheme: dark) {
99
+ color: $body-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: $body-color;
37
109
 
38
110
  @media (prefers-color-scheme: dark) {
39
- color: $gray-10;
111
+ color: $body-color-dark;
40
112
  }
41
113
  }
42
114
 
@@ -45,15 +117,35 @@
45
117
  padding-top: 2rem;
46
118
  padding-bottom: 2rem;
47
119
  margin-bottom: 2rem;
48
- border-top: 1px solid #eee;
49
- border-bottom: 1px solid #eee;
120
+ border-top: 1px solid #d4d4d4;
121
+ border-bottom: 1px solid #d4d4d4;
50
122
 
51
123
  @media (prefers-color-scheme: dark) {
52
- border-top: 1px solid #8e8e8e;
53
- border-bottom: 1px solid #8e8e8e;
124
+ border-top: 1px solid #333333;
125
+ border-bottom: 1px solid #333333;
54
126
  }
55
127
  }
56
128
 
129
+ .PageNavigation {
130
+ font-size: 18px;
131
+ display: block;
132
+ width: auto;
133
+ overflow: hidden;
134
+ }
135
+
136
+ .PageNavigation a {
137
+ display: inline;
138
+ width: auto;
139
+ float: left;
140
+ margin: 1em 0;
141
+ }
142
+
143
+ .PageNavigation .next {
144
+ float: right;
145
+ width: auto;
146
+ text-align: right;
147
+ }
148
+
57
149
  .related-posts {
58
150
  padding-left: 0;
59
151
  list-style: none;
@@ -69,12 +161,16 @@
69
161
  }
70
162
 
71
163
  a:hover {
72
- color: $green;
164
+ color: $light;
73
165
  text-decoration: none;
166
+
167
+ @media (prefers-color-scheme: dark) {
168
+ color: $dark;
169
+ }
74
170
 
75
171
  small {
76
172
  color: inherit;
77
- }
173
+ }
78
174
  }
79
175
  }
80
176
  }
data/_sass/_syntax.scss CHANGED
@@ -1,65 +1,103 @@
1
- .highlight .hll { background-color: #ffc; }
2
- .highlight .c { color: #999; } /* Comment */
3
- .highlight .err { color: #a00; background-color: #faa } /* Error */
4
- .highlight .k { color: #069; } /* Keyword */
5
- .highlight .o { color: #555 } /* Operator */
6
- .highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */
7
- .highlight .cp { color: #099 } /* Comment.Preproc */
8
- .highlight .c1 { color: #999; } /* Comment.Single */
9
- .highlight .cs { color: #999; } /* Comment.Special */
10
- .highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */
11
- .highlight .ge { font-style: italic } /* Generic.Emph */
12
- .highlight .gr { color: #f00 } /* Generic.Error */
13
- .highlight .gh { color: #030; } /* Generic.Heading */
14
- .highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */
15
- .highlight .go { color: #aaa } /* Generic.Output */
16
- .highlight .gp { color: #009; } /* Generic.Prompt */
17
- .highlight .gs { } /* Generic.Strong */
18
- .highlight .gu { color: #030; } /* Generic.Subheading */
19
- .highlight .gt { color: #9c6 } /* Generic.Traceback */
20
- .highlight .kc { color: #069; } /* Keyword.Constant */
21
- .highlight .kd { color: #069; } /* Keyword.Declaration */
22
- .highlight .kn { color: #069; } /* Keyword.Namespace */
23
- .highlight .kp { color: #069 } /* Keyword.Pseudo */
24
- .highlight .kr { color: #069; } /* Keyword.Reserved */
25
- .highlight .kt { color: #078; } /* Keyword.Type */
26
- .highlight .m { color: #f60 } /* Literal.Number */
27
- .highlight .s { color: #d44950 } /* Literal.String */
28
- .highlight .na { color: #4f9fcf } /* Name.Attribute */
29
- .highlight .nb { color: #366 } /* Name.Builtin */
30
- .highlight .nc { color: #0a8; } /* Name.Class */
31
- .highlight .no { color: #360 } /* Name.Constant */
32
- .highlight .nd { color: #99f } /* Name.Decorator */
33
- .highlight .ni { color: #999; } /* Name.Entity */
34
- .highlight .ne { color: #c00; } /* Name.Exception */
35
- .highlight .nf { color: #c0f } /* Name.Function */
36
- .highlight .nl { color: #99f } /* Name.Label */
37
- .highlight .nn { color: #0cf; } /* Name.Namespace */
38
- .highlight .nt { color: #2f6f9f; } /* Name.Tag */
39
- .highlight .nv { color: #033 } /* Name.Variable */
40
- .highlight .ow { color: #000; } /* Operator.Word */
41
- .highlight .w { color: #bbb } /* Text.Whitespace */
42
- .highlight .mf { color: #f60 } /* Literal.Number.Float */
43
- .highlight .mh { color: #f60 } /* Literal.Number.Hex */
44
- .highlight .mi { color: #f60 } /* Literal.Number.Integer */
45
- .highlight .mo { color: #f60 } /* Literal.Number.Oct */
46
- .highlight .sb { color: #c30 } /* Literal.String.Backtick */
47
- .highlight .sc { color: #c30 } /* Literal.String.Char */
48
- .highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */
49
- .highlight .s2 { color: #c30 } /* Literal.String.Double */
50
- .highlight .se { color: #c30; } /* Literal.String.Escape */
51
- .highlight .sh { color: #c30 } /* Literal.String.Heredoc */
52
- .highlight .si { color: #a00 } /* Literal.String.Interpol */
53
- .highlight .sx { color: #c30 } /* Literal.String.Other */
54
- .highlight .sr { color: #3aa } /* Literal.String.Regex */
55
- .highlight .s1 { color: #c30 } /* Literal.String.Single */
56
- .highlight .ss { color: #fc3 } /* Literal.String.Symbol */
57
- .highlight .bp { color: #366 } /* Name.Builtin.Pseudo */
58
- .highlight .vc { color: #033 } /* Name.Variable.Class */
59
- .highlight .vg { color: #033 } /* Name.Variable.Global */
60
- .highlight .vi { color: #033 } /* Name.Variable.Instance */
61
- .highlight .il { color: #f60 } /* Literal.Number.Integer.Long */
1
+ // Colors
62
2
 
63
- .css .o,
64
- .css .o + .nt,
65
- .css .nt + .nt { color: #999; }
3
+ $code-lightest-green: #8fbc8f;
4
+ $code-light-green: #9ccc65;
5
+ $code-green: #6aaf50;
6
+ $code-dark-green: #1d9a79;
7
+ $code-green-bg: #042b11;
8
+ $code-light-blue: #68a5e9;
9
+ $code-blue: #5180b3;
10
+ $code-blue-bg: #112b47;
11
+ $code-orange: #df9522;
12
+ $code-tan: #bdbc61;
13
+ $code-dark-tan: #7d7c61;
14
+ $code-bright-yellow: #fffe0a;
15
+ $code-yellow: #baba36;
16
+ $code-purple: #ab75c3;
17
+ $code-light-gray: #858585;
18
+ $code-gray: #757575;
19
+ $code-dark-gray: #656565;
20
+ $code-darker-gray: #454545;
21
+ $code-darkest-gray: #252525;
22
+ $code-blue-gray: #608079;
23
+ $code-brown: #987654;
24
+ $code-red: #d65946;
25
+ $code-dark-red: #9d2512;
26
+
27
+ $code-bg: #1a1a1a;
28
+ $code-fg: #bdbdb3;
29
+
30
+ // Syntax highlighting styles
31
+
32
+ .highlight .hll { background-color: $code-blue-bg; } /* Line highlight */
33
+ .highlight .lineno { color: $code-blue-gray; } /* Line numbers */
34
+ // .highlight { background-color: $code-bg; color: $code-fg; }
35
+ .highlight .c { color: $code-gray } /* Comment */
36
+ .highlight .err { color: $code-dark-red } /* Error */
37
+ .highlight .g { color: $code-fg } /* Generic */
38
+ .highlight .k { color: $code-blue } /* Keyword */
39
+ .highlight .l { color: $code-purple } /* Literal */
40
+ .highlight .n { color: $code-purple } /* Name */
41
+ .highlight .o { color: $code-fg } /* Operator */
42
+ .highlight .x { color: $code-purple } /* Other */
43
+ .highlight .p { color: $code-fg } /* Punctuation */
44
+ .highlight .cm { color: $code-gray } /* Comment.Multiline */
45
+ .highlight .cp { color: $code-yellow } /* Comment.Preproc */
46
+ .highlight .c1 { color: $code-gray } /* Comment.Single */
47
+ .highlight .cs { color: $code-yellow } /* Comment.Special */
48
+ .highlight .gd { color: $code-green } /* Generic.Deleted */
49
+ .highlight .ge { color: $code-fg; font-style: italic } /* Generic.Emph */
50
+ .highlight .gr { color: $code-red } /* Generic.Error */
51
+ .highlight .gh { color: $code-purple } /* Generic.Heading */
52
+ .highlight .gi { color: $code-yellow } /* Generic.Inserted */
53
+ .highlight .go { color: $code-fg } /* Generic.Output */
54
+ .highlight .gp { color: $code-fg } /* Generic.Prompt */
55
+ .highlight .gs { color: $code-fg } /* Generic.Strong */
56
+ .highlight .gu { color: $code-purple } /* Generic.Subheading */
57
+ .highlight .gt { color: $code-fg } /* Generic.Traceback */
58
+ .highlight .kc { color: $code-purple } /* Keyword.Constant */
59
+ .highlight .kd { color: $code-blue } /* Keyword.Declaration */
60
+ .highlight .kn { color: $code-yellow } /* Keyword.Namespace */
61
+ .highlight .kp { color: $code-yellow } /* Keyword.Pseudo */
62
+ .highlight .kr { color: $code-blue } /* Keyword.Reserved */
63
+ .highlight .kt { color: $code-red } /* Keyword.Type */
64
+ .highlight .ld { color: $code-fg } /* Literal.Date */
65
+ .highlight .m { color: $code-orange } /* Literal.Number */
66
+ .highlight .s { color: $code-green } /* Literal.String */
67
+ .highlight .na { color: $code-yellow } /* Name.Attribute */
68
+ .highlight .nb { color: $code-purple } /* Name.Builtin */
69
+ .highlight .nc { color: $code-dark-green } /* Name.Class */
70
+ .highlight .no { color: $code-purple } /* Name.Constant */
71
+ .highlight .nd { color: $code-blue } /* Name.Decorator */
72
+ .highlight .ni { color: $code-orange } /* Name.Entity */
73
+ .highlight .ne { color: $code-purple } /* Name.Exception */
74
+ .highlight .nf { color: $code-dark-green } /* Name.Function */
75
+ .highlight .nl { color: $code-yellow } /* Name.Label */
76
+ .highlight .nn { color: $code-fg } /* Name.Namespace */
77
+ .highlight .nx { color: $code-fg } /* Name.Other */
78
+ .highlight .py { color: $code-yellow } /* Name.Property */
79
+ .highlight .nt { color: $code-blue } /* Name.Tag */
80
+ .highlight .nv { color: $code-blue } /* Name.Variable */
81
+ .highlight .ow { color: $code-yellow } /* Operator.Word */
82
+ .highlight .w { color: $code-fg } /* Text.Whitespace */
83
+ .highlight .mf { color: $code-orange } /* Literal.Number.Float */
84
+ .highlight .mh { color: $code-orange } /* Literal.Number.Hex */
85
+ .highlight .mi { color: $code-orange } /* Literal.Number.Integer */
86
+ .highlight .mo { color: $code-orange } /* Literal.Number.Oct */
87
+ .highlight .sb { color: $code-purple } /* Literal.String.Backtick */
88
+ .highlight .sc { color: $code-green } /* Literal.String.Char */
89
+ .highlight .sd { color: $code-fg } /* Literal.String.Doc */
90
+ .highlight .s2 { color: $code-green } /* Literal.String.Double */
91
+ .highlight .se { color: $code-purple } /* Literal.String.Escape */
92
+ .highlight .sh { color: $code-fg } /* Literal.String.Heredoc */
93
+ .highlight .si { color: $code-green } /* Literal.String.Interpol */
94
+ .highlight .sx { color: $code-green } /* Literal.String.Other */
95
+ .highlight .sr { color: $code-red } /* Literal.String.Regex */
96
+ .highlight .s1 { color: $code-green } /* Literal.String.Single */
97
+ .highlight .ss { color: $code-green } /* Literal.String.Symbol */
98
+ .highlight .bp { color: $code-blue } /* Name.Builtin.Pseudo */
99
+ .highlight .vc { color: $code-blue } /* Name.Variable.Class */
100
+ .highlight .vg { color: $code-blue } /* Name.Variable.Global */
101
+ .highlight .vi { color: $code-blue } /* Name.Variable.Instance */
102
+ .highlight .vm { color: $code-blue } /* Name.Variable.Magic */
103
+ .highlight .il { color: $code-green } /* Literal.Number.Integer.Long */