quattle 1.2.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,16 @@
1
+ // Site structure
2
+
3
+ .container {
4
+ max-width: 38rem;
5
+ padding-left: 1.5rem;
6
+ padding-right: 1.5rem;
7
+ margin-left: auto;
8
+ margin-right: auto;
9
+ }
10
+
11
+ footer {
12
+ margin-top: 2rem;
13
+ margin-bottom: 2rem;
14
+ text-align: center;
15
+ font-size: 90%;
16
+ }
@@ -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: $body-color;
16
+ position: relative;
17
+ text-align: center;
18
+ padding-right: 12px;
19
+
20
+ @media (prefers-color-scheme: dark) {
21
+ color: $body-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: #d4d4d4;
40
+
41
+ @media (prefers-color-scheme: dark) {
42
+ color: #333333;
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,88 @@
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
+ }
@@ -0,0 +1,56 @@
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 ADDED
@@ -0,0 +1,197 @@
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: $body-color;
80
+
81
+ @media (prefers-color-scheme: dark) {
82
+ color: $body-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: $body-color;
97
+
98
+ @media (prefers-color-scheme: dark) {
99
+ color: $body-color-dark;
100
+ }
101
+ }
102
+
103
+ .permalink {
104
+ display: block;
105
+ margin-top: -.9rem;
106
+ margin-bottom: 1.5rem;
107
+ color: $body-color;
108
+
109
+ @media (prefers-color-scheme: dark) {
110
+ color: $body-color-dark;
111
+ }
112
+ }
113
+
114
+ .external-link {
115
+ display: block;
116
+ margin-top: -.9rem;
117
+ margin-bottom: 1.5rem;
118
+ opacity: .5;
119
+ color: $body-color;
120
+
121
+ @media (prefers-color-scheme: dark) {
122
+ color: $body-color-dark;
123
+ }
124
+ }
125
+
126
+ .tag-list {
127
+ padding-top: 0px;
128
+ padding-bottom: 4px;
129
+ padding-right: 8px;
130
+ border-radius: 5px;
131
+ color: $body-color;
132
+
133
+ @media (prefers-color-scheme: dark) {
134
+ color: #C06337;
135
+ }
136
+ }
137
+
138
+ // Related posts
139
+ .related {
140
+ padding-top: 2rem;
141
+ padding-bottom: 2rem;
142
+ margin-bottom: 2rem;
143
+ border-top: 1px solid #d4d4d4;
144
+ border-bottom: 1px solid #d4d4d4;
145
+
146
+ @media (prefers-color-scheme: dark) {
147
+ border-top: 1px solid #333333;
148
+ border-bottom: 1px solid #333333;
149
+ }
150
+ }
151
+
152
+ .PageNavigation {
153
+ font-size: 18px;
154
+ display: block;
155
+ width: auto;
156
+ overflow: hidden;
157
+ }
158
+
159
+ .PageNavigation a {
160
+ display: inline;
161
+ width: auto;
162
+ float: left;
163
+ margin: 1em 0;
164
+ }
165
+
166
+ .PageNavigation .next {
167
+ float: right;
168
+ width: auto;
169
+ text-align: right;
170
+ }
171
+
172
+ .related-posts {
173
+ padding-left: 0;
174
+ list-style: none;
175
+
176
+ h3 {
177
+ margin-top: 0;
178
+ }
179
+
180
+ li {
181
+ small {
182
+ font-size: 75%;
183
+ color: #999;
184
+ }
185
+
186
+ a:hover {
187
+ color: $light;
188
+ text-decoration: none;
189
+
190
+ @media (prefers-color-scheme: dark) {
191
+ color: $dark;
192
+ }
193
+
194
+
195
+ }
196
+ }
197
+ }
@@ -0,0 +1,103 @@
1
+ // Colors
2
+
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: rgba(36,37,43,1);
28
+ $code-fg: #bdbdb3;
29
+
30
+ // Syntax highlighting styles
31
+
32
+ .highlight .hll { background-color: $code-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 */
data/_sass/_type.scss ADDED
@@ -0,0 +1,200 @@
1
+ // Typography
2
+
3
+ h1, h2, h3, h4, h6 {
4
+ margin-bottom: .5rem;
5
+ font-weight: 600;
6
+ line-height: 1.25;
7
+ text-rendering: optimizeLegibility;
8
+ color: #767676;
9
+ position: relative;
10
+
11
+ @media (prefers-color-scheme: dark) {
12
+ color: #6968A7;
13
+ }
14
+ }
15
+
16
+ h2::before,h4::before,h6::before {
17
+ content: "#";
18
+ color: #767676;
19
+ left: -0.9em;
20
+ top: 0;
21
+ position: absolute;
22
+
23
+ @media (prefers-color-scheme: dark) {
24
+ color: #6968A7;
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: #767676;
96
+
97
+ @media (prefers-color-scheme: dark) {
98
+ color: #6968A7;
99
+ }
100
+ }
101
+
102
+ blockquote {
103
+ width: 100%;
104
+ padding:.25em 90px .25em 25px;
105
+ margin: 40px auto;
106
+ font-style: italic;
107
+ position: relative;
108
+ border-left: 3px solid $light;
109
+
110
+ @media (prefers-color-scheme: dark) {
111
+ border-left: 3px solid #6968A7;
112
+ }
113
+
114
+ p:last-child {
115
+ margin-bottom: 0;
116
+ }
117
+
118
+ @media (min-width: 30em) {
119
+ padding-right: 5rem;
120
+ padding-left: 1.25rem;
121
+ }
122
+ }
123
+
124
+ figure {
125
+ margin: 0;
126
+ }
127
+
128
+ mark {
129
+ background: #cefce8;
130
+ color: $body-color;
131
+ padding: 2px 2px;
132
+
133
+ @media (prefers-color-scheme: dark) {
134
+ background: #6968A7;
135
+ color: $body-color-dark;
136
+ }
137
+ }
138
+
139
+ // Footnote number within body text
140
+ a[href^="#fn:"] {
141
+ display: inline-block;
142
+ position: relative;
143
+ font-weight: bold;
144
+ min-width: 35px;
145
+ margin: 0 0.1em 0 0.2em;
146
+ text-align: center;
147
+ background: #eee;
148
+ color: $light;
149
+ border: 1px solid #eee;
150
+ border-radius: 1em;
151
+ vertical-align: middle;
152
+
153
+ @media (prefers-color-scheme: dark) {
154
+ color: #6968A7;
155
+ background: #2c2c2c;
156
+ border: 1px solid #2c2c2c;
157
+ }
158
+ }
159
+
160
+ // Back to footnote link
161
+ a[href^="#fnref:"] {
162
+ display: inline-block;
163
+ margin-left: .1rem;
164
+ font-weight: bold;
165
+ padding: 0.1em 0.1em 0.1em;
166
+ }
167
+
168
+ // List of footnotes
169
+ .footnotes {
170
+ margin-top: 2rem;
171
+ font-size: 80%;
172
+
173
+ :target {
174
+ padding: 5px;
175
+ background: #eee;
176
+ border: solid 1px $light;
177
+
178
+ @media (prefers-color-scheme: dark) {
179
+ background: #24252b;
180
+ border: solid 1px #6968A7;
181
+ }
182
+ }
183
+ }
184
+
185
+ // Custom type
186
+ //
187
+ // Extend paragraphs with `.lead` for larger introductory text.
188
+
189
+ .lead {
190
+ font-size: 1.25rem;
191
+ font-weight: 300;
192
+ }
193
+
194
+ .reversefootnote {
195
+ text-decoration: none;
196
+
197
+ @media (prefers-color-scheme: dark) {
198
+ color: #6968A7;
199
+ }
200
+ }