quattle 1.2.1 → 1.3.0
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.
- checksums.yaml +4 -4
- data/README.md +25 -30
- data/_includes/head.html +1 -0
- data/_layouts/default.html +5 -17
- data/_layouts/post.html +14 -24
- data/_sass/_base.scss +20 -22
- data/_sass/_code.scss +14 -20
- data/_sass/_layout.scss +33 -1
- data/_sass/_masthead.scss +9 -12
- data/_sass/_message.scss +8 -8
- data/_sass/_pagination.scss +1 -9
- data/_sass/_posts.scss +65 -62
- data/_sass/_type.scss +68 -62
- data/_sass/_variables.scss +14 -14
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f7519254b8a172a3cd2f3a77096ad06ee5db6d21a2ed0458f740f32af785b8ef
|
|
4
|
+
data.tar.gz: 830b7ae2492cf0ff3735f977c2f2b0c606947ddb5eac895a085626141a9a689e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 410434c94a4ce040b5fbe6113d6f902f946982006c589e1226738d5e24976e1cdbff9f1d9dc9f23b7d4d958682cbc8b321008a2081e64071dcdc72cda8ed2315
|
|
7
|
+
data.tar.gz: 440e54f636f092b2122c50b1c9c26ccd7d11e5a8f530f5ee334a148a58cdfe580a2c76fb9d6a5e10962bf758bb38bd1ca677d21477aefca7b3293d67ce15d0f1
|
data/README.md
CHANGED
|
@@ -1,49 +1,44 @@
|
|
|
1
|
-
Quattle is a modern
|
|
1
|
+
Quattle is a modern and customizable theme for the static site generator Jekyll.
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## <small>Demo</small>
|
|
4
|
+
[quattle.victorwynne.com](https://quattle.victorwynne.com)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
## <small>Download</small>
|
|
7
|
+
[GitHub](https://github.com/victorwynne/quattle/releases) or [RubyGems](https://rubygems.org/gems/quattle)
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
## <small>Features</small>
|
|
10
|
+
Fully responsive with an emphasis on mobile friendly design, typography and interaction
|
|
8
11
|
|
|
9
|
-
|
|
12
|
+
HTML, SASS, XML, supporting assets and config files are included for the theme's design and functionality
|
|
10
13
|
|
|
11
|
-
|
|
14
|
+
CSS media feature `prefers-color-scheme` to detect if the visitor has requested a light or dark color mode
|
|
12
15
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
HTML, SASS and config files are included for the theme's design and functionality
|
|
16
|
-
|
|
17
|
-
A navigation area for linking to pages/posts or external URLs such as social media accounts
|
|
18
|
-
|
|
19
|
-
404, Archive, Category, Tag, Style, Privacy and About pages
|
|
20
|
-
|
|
21
|
-
Pagination, related posts and per-post navigation to older/newer entries
|
|
16
|
+
`$variables` based color schemes for light and dark mode, syntax highlighting for code blocks and styling of elements
|
|
22
17
|
|
|
23
18
|
HTML/CSS compression (minification)
|
|
24
19
|
|
|
25
|
-
|
|
20
|
+
Valid Atom syndicated feed
|
|
21
|
+
|
|
22
|
+
GDPR valid and compliant cookie consent banner
|
|
26
23
|
|
|
27
|
-
|
|
24
|
+
404, site map, navigation, archive, category, tag, about, style and privacy pages
|
|
28
25
|
|
|
29
|
-
|
|
26
|
+
Archive displays a tag cloud and number of posts per month, year, category, tag
|
|
30
27
|
|
|
31
|
-
|
|
28
|
+
Excerpt, pagination and per-post navigation to older/newer entries
|
|
32
29
|
|
|
33
|
-
|
|
30
|
+
Smart quotes across all content with the `{ | smartify }` liquid filter
|
|
34
31
|
|
|
35
|
-
|
|
32
|
+
Rich preview links when shared via iMessage and social media services
|
|
36
33
|
|
|
37
|
-
A wide variety of HTML elements commonly used in
|
|
34
|
+
A wide variety of HTML elements commonly used in Markdown writing are styled (mark, source references, blockquotes, headers, tables, boxes/buttons, figure captions, code blocks, footnotes)
|
|
38
35
|
|
|
39
|
-
|
|
36
|
+
Additional supported and styled front matter:
|
|
37
|
+
* Author attribution
|
|
38
|
+
* Last modified date
|
|
39
|
+
* Permalinks for linked list style posts that have an external source reference
|
|
40
40
|
|
|
41
|
-
A single line added to a post's front matter can enable:
|
|
42
|
-
* Adding categories or tags to a post
|
|
43
|
-
* Per-post author attribution
|
|
44
|
-
* The creation of **linked-list** style posts which link to external URLs, maintain a permalink and display a styled arrow to help indicate this to the reader
|
|
45
|
-
* Additional date line listing the last date a post was modified on
|
|
46
41
|
|
|
47
|
-
|
|
42
|
+
## <small>License</small>
|
|
48
43
|
|
|
49
|
-
Quattle is free software
|
|
44
|
+
Quattle is free software distributed under a [MIT license](https://github.com/victorwynne/quattle/blob/main/LICENSE).
|
data/_includes/head.html
CHANGED
data/_layouts/default.html
CHANGED
|
@@ -12,10 +12,10 @@ layout: compress
|
|
|
12
12
|
<div class="container content">
|
|
13
13
|
<header class="masthead">
|
|
14
14
|
|
|
15
|
-
<
|
|
15
|
+
<h2 class="masthead-title">
|
|
16
16
|
<a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a><br>
|
|
17
17
|
<small>{{ site.tagline }}</small>
|
|
18
|
-
</
|
|
18
|
+
</h2>
|
|
19
19
|
|
|
20
20
|
<!-- Change navigation links here -->
|
|
21
21
|
<div class="navigation">
|
|
@@ -32,24 +32,12 @@ layout: compress
|
|
|
32
32
|
{{ content | smartify }}
|
|
33
33
|
</main>
|
|
34
34
|
|
|
35
|
-
<footer class="footer">
|
|
35
|
+
<br><footer class="footer">
|
|
36
36
|
<p>Made with ❤️ on a Mac 💻</p>
|
|
37
37
|
</footer>
|
|
38
38
|
</div>
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
43
|
-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
44
|
-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
45
|
-
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
46
|
-
ga('create', '{{ site.ga_analytics }}', 'auto');
|
|
47
|
-
ga('send', 'pageview');
|
|
48
|
-
</script>
|
|
49
|
-
{% endif %}
|
|
50
|
-
|
|
51
|
-
<!-- Add scripts to include by editing the below referenced HTML file -->
|
|
52
|
-
{% include cookie-consent.html%}
|
|
53
|
-
|
|
40
|
+
{% include cookie-consent.html%}
|
|
41
|
+
|
|
54
42
|
</body>
|
|
55
43
|
</html>
|
data/_layouts/post.html
CHANGED
|
@@ -4,11 +4,11 @@ layout: default
|
|
|
4
4
|
|
|
5
5
|
<article class="post">
|
|
6
6
|
{% if page.link %}
|
|
7
|
-
<
|
|
7
|
+
<h2 class="post-title"><a href="{{ page.link }}">
|
|
8
8
|
{{ page.title | smartify }} <span class="link-arrow">→</span></a>
|
|
9
|
-
</
|
|
9
|
+
</h2>
|
|
10
10
|
{% else %}
|
|
11
|
-
<
|
|
11
|
+
<h2 class="post-title">{{ page.title | smartify }}</h2>
|
|
12
12
|
{% endif %}
|
|
13
13
|
|
|
14
14
|
<time datetime="{{ page.date | date_to_xmlschema }}" class="post-date">{{ page.date | date_to_long_string: "ordinal", "US" }}
|
|
@@ -24,8 +24,7 @@ layout: default
|
|
|
24
24
|
{%- if page.last_modified_at -%}
|
|
25
25
|
<br><i>Last updated on: {{ page.last_modified_at | date_to_long_string: "ordinal", "US" }}</i>
|
|
26
26
|
{%- endif -%}
|
|
27
|
-
</time>
|
|
28
|
-
{% if page.link %}<span class="external-link">⌘ External Link</span>{% endif %}
|
|
27
|
+
</time>{% if page.link %}<span class="external-link">⌘ External Link</span>{% endif %}
|
|
29
28
|
|
|
30
29
|
{{ content | smartify }}
|
|
31
30
|
|
|
@@ -37,34 +36,25 @@ layout: default
|
|
|
37
36
|
{% assign tags = page.tags %}
|
|
38
37
|
{% endif %}
|
|
39
38
|
{% for tag in tags %}
|
|
40
|
-
<a href="{{site.baseurl}}/tags/#{{tag|slugize}}"
|
|
39
|
+
<a href="{{site.baseurl}}/tags/#{{tag|slugize}}">{{tag}}</a>
|
|
41
40
|
{% unless forloop.last %} {% endunless %}
|
|
42
41
|
{% endfor %}
|
|
43
42
|
</div>
|
|
44
43
|
|
|
44
|
+
{% if page.link %}
|
|
45
|
+
<span class="source" role="doc-endnotes">
|
|
46
|
+
source: <a href="{{ page.link }}">{{ page.link | remove:'http://' | remove:'www.' | remove:'https://' | split:'/' | first }}</a>
|
|
47
|
+
</span><br>
|
|
48
|
+
{% endif %}
|
|
49
|
+
<br><br>
|
|
50
|
+
|
|
45
51
|
</article>
|
|
46
52
|
|
|
47
53
|
<div class="PageNavigation">
|
|
48
54
|
{% if page.previous.url %}
|
|
49
|
-
|
|
55
|
+
<br><a class="prev" href="{{page.previous.url}}">← Previous</a>
|
|
50
56
|
{% endif %}
|
|
51
57
|
{% if page.next.url %}
|
|
52
|
-
|
|
58
|
+
<br><a class="next" href="{{page.next.url}}">Next →</a>
|
|
53
59
|
{% endif %}
|
|
54
60
|
</div>
|
|
55
|
-
|
|
56
|
-
{% if site.related_posts != empty %}
|
|
57
|
-
<aside class="related">
|
|
58
|
-
<h3>Related Posts</h3>
|
|
59
|
-
<ul class="related-posts">
|
|
60
|
-
{% for post in site.related_posts limit:3 %}
|
|
61
|
-
<li>
|
|
62
|
-
<a href="{{ site.baseurl }}{{ post.url }}">
|
|
63
|
-
{{ post.title | smartify }}
|
|
64
|
-
<small><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_long_string: "ordinal", "US" }}</time></small>
|
|
65
|
-
</a>
|
|
66
|
-
</li>
|
|
67
|
-
{% endfor %}
|
|
68
|
-
</ul>
|
|
69
|
-
</aside>
|
|
70
|
-
{% endif %}
|
data/_sass/_base.scss
CHANGED
|
@@ -27,31 +27,33 @@ body {
|
|
|
27
27
|
background-color: $body-bg;
|
|
28
28
|
-webkit-text-size-adjust: 100%;
|
|
29
29
|
-ms-text-size-adjust: 100%;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
@media (prefers-color-scheme: light) {
|
|
33
|
+
color: $light-scheme-text;
|
|
34
|
+
background-color: $light-scheme-bg;
|
|
35
|
+
}
|
|
36
|
+
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
// No `:visited` state is required by default (browsers will use `a`)
|
|
38
40
|
a {
|
|
39
|
-
color: $
|
|
41
|
+
color: $color;
|
|
40
42
|
text-decoration: none;
|
|
43
|
+
|
|
44
|
+
@media (prefers-color-scheme: light) {
|
|
45
|
+
color: $light-scheme-color;
|
|
46
|
+
}
|
|
41
47
|
|
|
42
48
|
// `:focus` is linked to `:hover` for basic accessibility
|
|
43
49
|
&:hover,
|
|
44
50
|
&:focus {
|
|
45
|
-
|
|
51
|
+
text-decoration: none;
|
|
46
52
|
}
|
|
47
53
|
|
|
48
54
|
strong {
|
|
49
55
|
color: inherit;
|
|
50
56
|
}
|
|
51
|
-
|
|
52
|
-
@media (prefers-color-scheme: dark) {
|
|
53
|
-
color: $dark;
|
|
54
|
-
}
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
img {
|
|
@@ -65,22 +67,18 @@ table {
|
|
|
65
67
|
margin-bottom: 1rem;
|
|
66
68
|
width: 100%;
|
|
67
69
|
font-size: 85%;
|
|
68
|
-
border: 1px solid #
|
|
70
|
+
border: 1px solid #555555;
|
|
69
71
|
border-collapse: collapse;
|
|
70
72
|
|
|
71
|
-
@media (prefers-color-scheme:
|
|
72
|
-
|
|
73
|
-
|
|
73
|
+
@media (prefers-color-scheme: light) {
|
|
74
|
+
border: 1px solid #D2D2D2;
|
|
75
|
+
}
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
td,
|
|
77
79
|
th {
|
|
78
80
|
padding: .25rem .5rem;
|
|
79
|
-
border: 1px solid #d4d4d4;
|
|
80
|
-
|
|
81
|
-
@media (prefers-color-scheme: dark) {
|
|
82
81
|
border: 1px solid #555555;
|
|
83
|
-
}
|
|
84
82
|
}
|
|
85
83
|
|
|
86
84
|
th {
|
|
@@ -89,9 +87,9 @@ th {
|
|
|
89
87
|
|
|
90
88
|
tbody tr:nth-child(odd) td,
|
|
91
89
|
tbody tr:nth-child(odd) th {
|
|
92
|
-
background-color: #eee;
|
|
93
|
-
|
|
94
|
-
@media (prefers-color-scheme: dark) {
|
|
95
90
|
background-color: #2d2d2d;
|
|
91
|
+
|
|
92
|
+
@media (prefers-color-scheme: light) {
|
|
93
|
+
background-color: #d2d2d2;
|
|
96
94
|
}
|
|
97
95
|
}
|
data/_sass/_code.scss
CHANGED
|
@@ -4,15 +4,18 @@
|
|
|
4
4
|
.highlighter-rouge {
|
|
5
5
|
font-family: $root-font-family;
|
|
6
6
|
font-size: 100%;
|
|
7
|
-
padding:
|
|
8
|
-
background-color: #494949;
|
|
9
|
-
color: $code-light;
|
|
10
|
-
white-space: nowrap;
|
|
11
|
-
|
|
12
|
-
@media (prefers-color-scheme: dark) {
|
|
7
|
+
padding: 4px 4px;
|
|
13
8
|
background-color: #212c2d;
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
color: $code;
|
|
10
|
+
white-space: nowrap;
|
|
11
|
+
border: 1.5px solid $code;
|
|
12
|
+
border-radius: .25em;
|
|
13
|
+
|
|
14
|
+
@media (prefers-color-scheme: light) {
|
|
15
|
+
color: $light-scheme-text;
|
|
16
|
+
background-color: #F8F8F8;
|
|
17
|
+
border: 1.5px solid #D2D2D2;
|
|
18
|
+
}
|
|
16
19
|
}
|
|
17
20
|
|
|
18
21
|
/* Applies to all code */
|
|
@@ -85,14 +88,10 @@ figure.highlight, div.highlight {
|
|
|
85
88
|
|
|
86
89
|
pre {
|
|
87
90
|
background-color: $code-bg;
|
|
88
|
-
border: 1px solid $code
|
|
91
|
+
border: 1px solid $code;
|
|
89
92
|
border-radius: 15px;
|
|
90
93
|
box-shadow: 0 4px 30px rgba(0,0,0,.4);
|
|
91
94
|
|
|
92
|
-
@media (prefers-color-scheme: dark) {
|
|
93
|
-
border: 1px solid $code-dark;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
95
|
code {
|
|
97
96
|
background-color: $code-bg;
|
|
98
97
|
color: #bdbdb3;
|
|
@@ -113,7 +112,7 @@ figure.highlight, div.highlight {
|
|
|
113
112
|
text-transform: uppercase;
|
|
114
113
|
font-weight: bold;
|
|
115
114
|
|
|
116
|
-
border: 1px solid $code
|
|
115
|
+
border: 1px solid $code;
|
|
117
116
|
border-top-left-radius: 15px;
|
|
118
117
|
border-top-right-radius: 15px;
|
|
119
118
|
border-bottom-left-radius: 15px;
|
|
@@ -122,14 +121,9 @@ figure.highlight, div.highlight {
|
|
|
122
121
|
min-width: 30px;
|
|
123
122
|
text-align: center;
|
|
124
123
|
|
|
125
|
-
color: $code
|
|
124
|
+
color: $code;
|
|
126
125
|
background-color: $code-bg;
|
|
127
126
|
|
|
128
|
-
@media (prefers-color-scheme: dark) {
|
|
129
|
-
border: 1px solid $code-dark;
|
|
130
|
-
color: $code-dark;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
127
|
@mixin media-query($device) {
|
|
134
128
|
@media screen and (max-width: $device) {
|
|
135
129
|
@content;
|
data/_sass/_layout.scss
CHANGED
|
@@ -12,5 +12,37 @@ footer {
|
|
|
12
12
|
margin-top: 2rem;
|
|
13
13
|
margin-bottom: 2rem;
|
|
14
14
|
text-align: center;
|
|
15
|
-
font-size:
|
|
15
|
+
font-size: 80%;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.post-nav {
|
|
19
|
+
display: flex;
|
|
20
|
+
justify-content: space-between;
|
|
21
|
+
flex-wrap: wrap;
|
|
22
|
+
|
|
23
|
+
div {
|
|
24
|
+
flex: 1 1 0;
|
|
25
|
+
|
|
26
|
+
&:first-child {
|
|
27
|
+
padding-right: 0.5em;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:last-child {
|
|
31
|
+
padding-left: 0.5em;
|
|
32
|
+
text-align: right;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.unsighted {
|
|
38
|
+
border: 0;
|
|
39
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
40
|
+
clip-path: inset(50%);
|
|
41
|
+
height: 1px;
|
|
42
|
+
margin: -1px;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
padding: 0;
|
|
45
|
+
position: absolute;
|
|
46
|
+
width: 1px;
|
|
47
|
+
word-wrap: normal !important;
|
|
16
48
|
}
|
data/_sass/_masthead.scss
CHANGED
|
@@ -15,11 +15,12 @@
|
|
|
15
15
|
color: $body-color;
|
|
16
16
|
position: relative;
|
|
17
17
|
text-align: center;
|
|
18
|
-
padding-
|
|
18
|
+
padding-left: 0px;
|
|
19
|
+
padding-right: 0px;
|
|
19
20
|
|
|
20
|
-
@media (prefers-color-scheme:
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
@media (prefers-color-scheme: light) {
|
|
22
|
+
color: $light-scheme-text;
|
|
23
|
+
}
|
|
23
24
|
|
|
24
25
|
a {
|
|
25
26
|
color: inherit;
|
|
@@ -36,11 +37,7 @@
|
|
|
36
37
|
display: block;
|
|
37
38
|
font-size: 100%;
|
|
38
39
|
font-weight: 500;
|
|
39
|
-
color: #d4d4d4;
|
|
40
|
-
|
|
41
|
-
@media (prefers-color-scheme: dark) {
|
|
42
40
|
color: #333333;
|
|
43
|
-
}
|
|
44
41
|
|
|
45
42
|
ul#navigation-list {
|
|
46
43
|
list-style: none;
|
|
@@ -48,10 +45,10 @@ ul#navigation-list {
|
|
|
48
45
|
padding: 0;
|
|
49
46
|
}
|
|
50
47
|
ul#navigation-list li {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
padding-left:
|
|
54
|
-
|
|
48
|
+
display: inline;
|
|
49
|
+
list-style: none;
|
|
50
|
+
padding-left: 6.5px;
|
|
51
|
+
padding-right: 6.5px;
|
|
55
52
|
margin: 0;
|
|
56
53
|
}
|
|
57
54
|
}
|
data/_sass/_message.scss
CHANGED
|
@@ -11,15 +11,9 @@
|
|
|
11
11
|
margin-bottom: 15px;
|
|
12
12
|
padding: 12px;
|
|
13
13
|
color: #fff;
|
|
14
|
-
background-color:
|
|
15
|
-
border-left: .3rem solid #bebebe;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
@media (prefers-color-scheme: dark) {
|
|
19
|
-
color: #fff;
|
|
20
|
-
background-color: #282828;
|
|
14
|
+
background-color: $message-default;
|
|
21
15
|
border-left: .3rem solid #595959;
|
|
22
|
-
|
|
16
|
+
border-radius: .5em;
|
|
23
17
|
}
|
|
24
18
|
|
|
25
19
|
.green {
|
|
@@ -28,6 +22,7 @@
|
|
|
28
22
|
color: #fff;
|
|
29
23
|
background-color: $message-green;
|
|
30
24
|
border-left: .3rem solid #93d080;
|
|
25
|
+
border-radius: .5em;
|
|
31
26
|
}
|
|
32
27
|
|
|
33
28
|
.yellow {
|
|
@@ -36,6 +31,7 @@
|
|
|
36
31
|
color: #fff;
|
|
37
32
|
background-color: $message-yellow;
|
|
38
33
|
border-left: .3rem solid #fdcb61;
|
|
34
|
+
border-radius: .5em;
|
|
39
35
|
}
|
|
40
36
|
|
|
41
37
|
.orange {
|
|
@@ -44,6 +40,7 @@
|
|
|
44
40
|
color: #fff;
|
|
45
41
|
background-color: $message-orange;
|
|
46
42
|
border-left: .3rem solid #f9ac6b;
|
|
43
|
+
border-radius: .5em;
|
|
47
44
|
}
|
|
48
45
|
|
|
49
46
|
.red {
|
|
@@ -52,6 +49,7 @@
|
|
|
52
49
|
color: #fff;
|
|
53
50
|
background-color: $message-red;
|
|
54
51
|
border-left: .3rem solid #e86c71;
|
|
52
|
+
border-radius: .5em;
|
|
55
53
|
}
|
|
56
54
|
|
|
57
55
|
.purple {
|
|
@@ -60,6 +58,7 @@
|
|
|
60
58
|
color: #fff;
|
|
61
59
|
background-color: $message-purple;
|
|
62
60
|
border-left: .3rem solid #bf61c0;
|
|
61
|
+
border-radius: .5em;
|
|
63
62
|
}
|
|
64
63
|
|
|
65
64
|
.blue {
|
|
@@ -68,6 +67,7 @@
|
|
|
68
67
|
color: #fff;
|
|
69
68
|
background-color: $message-blue;
|
|
70
69
|
border-left: .3rem solid #2bc2ff;
|
|
70
|
+
border-radius: .5em;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
/* The close button */
|
data/_sass/_pagination.scss
CHANGED
|
@@ -11,12 +11,8 @@
|
|
|
11
11
|
.pagination-item {
|
|
12
12
|
display: block;
|
|
13
13
|
padding: 1rem;
|
|
14
|
-
border: solid #eee;
|
|
15
|
-
border-width: 1px 0;
|
|
16
|
-
|
|
17
|
-
@media (prefers-color-scheme: dark) {
|
|
18
14
|
border: solid #111111;
|
|
19
|
-
|
|
15
|
+
border-width: 1px 0;
|
|
20
16
|
|
|
21
17
|
&:first-child {
|
|
22
18
|
margin-bottom: -1px;
|
|
@@ -25,11 +21,7 @@
|
|
|
25
21
|
|
|
26
22
|
// Only provide a hover state for linked pagination items
|
|
27
23
|
a.pagination-item:hover {
|
|
28
|
-
background-color: #eee;
|
|
29
|
-
|
|
30
|
-
@media (prefers-color-scheme: dark) {
|
|
31
24
|
background-color: #1e1e1e;
|
|
32
|
-
}
|
|
33
25
|
}
|
|
34
26
|
|
|
35
27
|
@media (min-width: 30em) {
|
data/_sass/_posts.scss
CHANGED
|
@@ -15,7 +15,7 @@ figure {
|
|
|
15
15
|
}
|
|
16
16
|
figcaption {
|
|
17
17
|
color: #878787;
|
|
18
|
-
margin-top: 0.
|
|
18
|
+
margin-top: 0.4em;
|
|
19
19
|
font-size: 0.8em;
|
|
20
20
|
text-align: center
|
|
21
21
|
}
|
|
@@ -25,7 +25,7 @@ figure {
|
|
|
25
25
|
margin-top: 0;
|
|
26
26
|
|
|
27
27
|
figcaption {
|
|
28
|
-
margin-top:
|
|
28
|
+
margin-top: 1em;
|
|
29
29
|
margin-right: 2em;
|
|
30
30
|
margin-left: 2em;
|
|
31
31
|
}
|
|
@@ -78,9 +78,9 @@ figure {
|
|
|
78
78
|
.post-title a {
|
|
79
79
|
color: $body-color;
|
|
80
80
|
|
|
81
|
-
@media (prefers-color-scheme:
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
@media (prefers-color-scheme: light) {
|
|
82
|
+
color: $light-scheme-text;
|
|
83
|
+
}
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
.page-title,
|
|
@@ -91,70 +91,91 @@ figure {
|
|
|
91
91
|
// Meta data line below post title
|
|
92
92
|
.post-date {
|
|
93
93
|
display: block;
|
|
94
|
-
margin-top: -.
|
|
94
|
+
margin-top: -.4rem;
|
|
95
95
|
margin-bottom: 1rem;
|
|
96
96
|
color: $body-color;
|
|
97
97
|
|
|
98
|
-
@media (prefers-color-scheme:
|
|
99
|
-
|
|
100
|
-
|
|
98
|
+
@media (prefers-color-scheme: light) {
|
|
99
|
+
color: $light-scheme-text;
|
|
100
|
+
}
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.permalink {
|
|
104
104
|
display: block;
|
|
105
|
-
margin-top:
|
|
105
|
+
margin-top: -1rem;
|
|
106
106
|
margin-bottom: 1.5rem;
|
|
107
107
|
color: $body-color;
|
|
108
108
|
|
|
109
|
-
@media (prefers-color-scheme:
|
|
110
|
-
|
|
111
|
-
|
|
109
|
+
@media (prefers-color-scheme: light) {
|
|
110
|
+
color: $light-scheme-color;
|
|
111
|
+
}
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
.external-link {
|
|
115
115
|
display: block;
|
|
116
|
-
margin-top:
|
|
116
|
+
margin-top: -1rem;
|
|
117
117
|
margin-bottom: 1.5rem;
|
|
118
|
-
opacity: .
|
|
118
|
+
opacity: .7;
|
|
119
119
|
color: $body-color;
|
|
120
|
-
|
|
121
|
-
@media (prefers-color-scheme:
|
|
122
|
-
|
|
123
|
-
|
|
120
|
+
|
|
121
|
+
@media (prefers-color-scheme: light) {
|
|
122
|
+
color: $light-scheme-accent;
|
|
123
|
+
opacity: 1;
|
|
124
|
+
}
|
|
124
125
|
}
|
|
125
126
|
|
|
126
127
|
.tag-list {
|
|
127
|
-
padding-top: 0px;
|
|
128
|
-
padding-bottom: 4px;
|
|
129
|
-
padding-right: 8px;
|
|
130
|
-
border-radius: 5px;
|
|
131
|
-
color: $body-color;
|
|
132
128
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
129
|
+
a:link {
|
|
130
|
+
color: $color;
|
|
131
|
+
display: inline-block;
|
|
132
|
+
padding-top: 1px;
|
|
133
|
+
padding-bottom: 1px;
|
|
134
|
+
padding-left: 5px;
|
|
135
|
+
padding-right: 5px;
|
|
136
|
+
border: 1.5px solid $accent;
|
|
137
|
+
border-radius: .25em;
|
|
138
|
+
margin-bottom: .5rem;
|
|
139
|
+
margin-right: .1rem;
|
|
140
|
+
font-size: 90%;
|
|
141
|
+
|
|
142
|
+
@media (prefers-color-scheme: light) {
|
|
143
|
+
color: $light-scheme-color;
|
|
144
|
+
border: 1.5px solid #d2d2d2;
|
|
145
|
+
background-color: #f8f8f8;
|
|
146
|
+
}
|
|
136
147
|
}
|
|
137
148
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
+
a:visited {
|
|
150
|
+
color: $color;
|
|
151
|
+
display: inline-block;
|
|
152
|
+
padding-top: 1px;
|
|
153
|
+
padding-bottom: 1px;
|
|
154
|
+
padding-left: 5px;
|
|
155
|
+
padding-right: 5px;
|
|
156
|
+
border: 1px solid $accent;
|
|
157
|
+
border-radius: .25em;
|
|
158
|
+
margin-bottom: .5rem;
|
|
159
|
+
margin-right: .1rem;
|
|
160
|
+
font-size: 90%;
|
|
161
|
+
|
|
162
|
+
@media (prefers-color-scheme: light) {
|
|
163
|
+
color: $light-scheme-color;
|
|
164
|
+
border: 1.5px solid #d2d2d2;
|
|
165
|
+
background-color: #f8f8f8;
|
|
166
|
+
}
|
|
149
167
|
}
|
|
150
168
|
}
|
|
151
169
|
|
|
152
|
-
.
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
170
|
+
.source {
|
|
171
|
+
display: inline-block;
|
|
172
|
+
width: 100%;
|
|
173
|
+
overflow: hidden;
|
|
174
|
+
white-space: nowrap;
|
|
175
|
+
margin-top: 2rem;
|
|
176
|
+
font-variant: small-caps;
|
|
177
|
+
}
|
|
178
|
+
|
|
158
179
|
|
|
159
180
|
.PageNavigation a {
|
|
160
181
|
display: inline;
|
|
@@ -176,22 +197,4 @@ figure {
|
|
|
176
197
|
h3 {
|
|
177
198
|
margin-top: 0;
|
|
178
199
|
}
|
|
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
200
|
}
|
data/_sass/_type.scss
CHANGED
|
@@ -5,24 +5,24 @@ h1, h2, h3, h4, h6 {
|
|
|
5
5
|
font-weight: 600;
|
|
6
6
|
line-height: 1.25;
|
|
7
7
|
text-rendering: optimizeLegibility;
|
|
8
|
-
color:
|
|
8
|
+
color: $accent;
|
|
9
9
|
position: relative;
|
|
10
10
|
|
|
11
|
-
@media (prefers-color-scheme:
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
@media (prefers-color-scheme: light) {
|
|
12
|
+
color: $light-scheme-accent;
|
|
13
|
+
}
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
h3::before {
|
|
17
17
|
content: "#";
|
|
18
|
-
color:
|
|
19
|
-
left: -
|
|
18
|
+
color: $accent;
|
|
19
|
+
left: -1em;
|
|
20
20
|
top: 0;
|
|
21
21
|
position: absolute;
|
|
22
|
-
|
|
23
|
-
@media (prefers-color-scheme:
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
|
|
23
|
+
@media (prefers-color-scheme: light) {
|
|
24
|
+
color: $light-scheme-accent;
|
|
25
|
+
}
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
h1 {
|
|
@@ -65,13 +65,15 @@ hr {
|
|
|
65
65
|
position: relative;
|
|
66
66
|
margin: 1.5rem 0;
|
|
67
67
|
border: 0;
|
|
68
|
-
border-top: 1px solid
|
|
69
|
-
border-bottom: 1px solid
|
|
68
|
+
border-top: 1px solid $body-color;
|
|
69
|
+
border-bottom: 1px solid $body-color;
|
|
70
|
+
opacity: .2;
|
|
70
71
|
|
|
71
|
-
@media (prefers-color-scheme:
|
|
72
|
-
border-top: 1px solid
|
|
73
|
-
border-bottom: 1px solid
|
|
74
|
-
|
|
72
|
+
@media (prefers-color-scheme: light) {
|
|
73
|
+
border-top: 1px solid $light-scheme-text;
|
|
74
|
+
border-bottom: 1px solid $light-scheme-text;
|
|
75
|
+
opacity: .2;
|
|
76
|
+
}
|
|
75
77
|
}
|
|
76
78
|
|
|
77
79
|
abbr {
|
|
@@ -80,10 +82,10 @@ abbr {
|
|
|
80
82
|
opacity: .5;
|
|
81
83
|
color: $body-color;
|
|
82
84
|
text-transform: uppercase;
|
|
83
|
-
|
|
84
|
-
@media (prefers-color-scheme:
|
|
85
|
-
color: $
|
|
86
|
-
|
|
85
|
+
|
|
86
|
+
@media (prefers-color-scheme: light) {
|
|
87
|
+
color: $light-scheme-text;
|
|
88
|
+
}
|
|
87
89
|
|
|
88
90
|
&[title] {
|
|
89
91
|
cursor: help;
|
|
@@ -92,24 +94,27 @@ abbr {
|
|
|
92
94
|
}
|
|
93
95
|
|
|
94
96
|
span.link-arrow {
|
|
95
|
-
color:
|
|
96
|
-
|
|
97
|
-
@media (prefers-color-scheme:
|
|
98
|
-
|
|
99
|
-
|
|
97
|
+
color: $accent;
|
|
98
|
+
|
|
99
|
+
@media (prefers-color-scheme: light) {
|
|
100
|
+
color: $light-scheme-accent;
|
|
101
|
+
}
|
|
100
102
|
}
|
|
101
103
|
|
|
102
104
|
blockquote {
|
|
103
105
|
width: 100%;
|
|
104
|
-
padding
|
|
106
|
+
padding: .25em 100px .25em 25px;
|
|
105
107
|
margin: 40px auto;
|
|
106
108
|
font-style: italic;
|
|
109
|
+
font-size: 90%;
|
|
110
|
+
opacity: .9;
|
|
107
111
|
position: relative;
|
|
108
|
-
border-left:
|
|
112
|
+
border-left: 4px solid $accent;
|
|
109
113
|
|
|
110
|
-
@media (prefers-color-scheme:
|
|
111
|
-
|
|
112
|
-
|
|
114
|
+
@media (prefers-color-scheme: light) {
|
|
115
|
+
border-left: 4px solid $light-scheme-accent;
|
|
116
|
+
opacity: .8;
|
|
117
|
+
}
|
|
113
118
|
|
|
114
119
|
p:last-child {
|
|
115
120
|
margin-bottom: 0;
|
|
@@ -117,7 +122,7 @@ blockquote {
|
|
|
117
122
|
|
|
118
123
|
@media (min-width: 30em) {
|
|
119
124
|
padding-right: 5rem;
|
|
120
|
-
padding-left: 1.
|
|
125
|
+
padding-left: 1.5rem;
|
|
121
126
|
}
|
|
122
127
|
}
|
|
123
128
|
|
|
@@ -126,14 +131,14 @@ figure {
|
|
|
126
131
|
}
|
|
127
132
|
|
|
128
133
|
mark {
|
|
129
|
-
background:
|
|
134
|
+
background: $accent;
|
|
130
135
|
color: $body-color;
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
background: #
|
|
135
|
-
color: $
|
|
136
|
-
|
|
136
|
+
padding: 2px 2px;
|
|
137
|
+
|
|
138
|
+
@media (prefers-color-scheme: light) {
|
|
139
|
+
background: #e8e8e8;
|
|
140
|
+
color: $light-scheme-text;
|
|
141
|
+
}
|
|
137
142
|
}
|
|
138
143
|
|
|
139
144
|
// Footnote number within body text
|
|
@@ -144,17 +149,16 @@ a[href^="#fn:"] {
|
|
|
144
149
|
min-width: 35px;
|
|
145
150
|
margin: 0 0.1em 0 0.2em;
|
|
146
151
|
text-align: center;
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
border: 1px solid #eee;
|
|
152
|
+
color: $color;
|
|
153
|
+
border: 1.5px solid $accent;
|
|
150
154
|
border-radius: 1em;
|
|
151
155
|
vertical-align: middle;
|
|
152
156
|
|
|
153
|
-
@media (prefers-color-scheme:
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
157
|
+
@media (prefers-color-scheme: light) {
|
|
158
|
+
color: $light-scheme-color;
|
|
159
|
+
background-color: #F8F8F8;
|
|
160
|
+
border: 1.5px solid #d2d2d2;
|
|
161
|
+
}
|
|
158
162
|
}
|
|
159
163
|
|
|
160
164
|
// Back to footnote link
|
|
@@ -171,17 +175,25 @@ a[href^="#fnref:"] {
|
|
|
171
175
|
font-size: 80%;
|
|
172
176
|
|
|
173
177
|
:target {
|
|
174
|
-
padding:
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
}
|
|
178
|
+
padding: 6px;
|
|
179
|
+
border: solid 1px $accent;
|
|
180
|
+
|
|
181
|
+
@media (prefers-color-scheme: light) {
|
|
182
|
+
border: solid 1.5px #d2d2d2;
|
|
183
|
+
background-color: #F8F8F8;
|
|
184
|
+
}
|
|
182
185
|
}
|
|
183
186
|
}
|
|
184
187
|
|
|
188
|
+
.reversefootnote {
|
|
189
|
+
text-decoration: none;
|
|
190
|
+
color: $color;
|
|
191
|
+
|
|
192
|
+
@media (prefers-color-scheme: light) {
|
|
193
|
+
color: $light-scheme-color;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
185
197
|
// Custom type
|
|
186
198
|
//
|
|
187
199
|
// Extend paragraphs with `.lead` for larger introductory text.
|
|
@@ -191,10 +203,4 @@ a[href^="#fnref:"] {
|
|
|
191
203
|
font-weight: 300;
|
|
192
204
|
}
|
|
193
205
|
|
|
194
|
-
|
|
195
|
-
text-decoration: none;
|
|
196
|
-
|
|
197
|
-
@media (prefers-color-scheme: dark) {
|
|
198
|
-
color: #6968A7;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
206
|
+
|
data/_sass/_variables.scss
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
// Color scheme for light and dark
|
|
1
|
+
// Color scheme for light and dark mode
|
|
2
|
+
$color: #0083a0;
|
|
3
|
+
$accent: #6968A7;
|
|
4
|
+
$light-scheme-color: #009ddc;
|
|
5
|
+
$light-scheme-accent: #909090;
|
|
2
6
|
|
|
3
|
-
$
|
|
4
|
-
$dark: #2F8F85;
|
|
5
|
-
|
|
6
|
-
// Highlighting color for code block borders and language name.
|
|
7
|
-
|
|
8
|
-
$code-light: #5AC8FA;
|
|
9
|
-
$code-dark: #d0f6db;
|
|
7
|
+
$code: #5bc8f9;
|
|
10
8
|
|
|
9
|
+
$message-default: #282828;
|
|
11
10
|
$message-green: #62bb47;
|
|
12
11
|
$message-yellow: #fcb827;
|
|
13
12
|
$message-orange: #f6821f;
|
|
@@ -15,15 +14,16 @@ $message-red: #e03940;
|
|
|
15
14
|
$message-purple: #953c96;
|
|
16
15
|
$message-blue: #009ddc;
|
|
17
16
|
|
|
18
|
-
$root-font-family: -apple-system, BlinkMacSystemFont,
|
|
17
|
+
$root-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
19
18
|
$code-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
|
20
19
|
$root-font-size: 16px;
|
|
21
20
|
$root-line-height: 1.5;
|
|
22
21
|
|
|
23
|
-
$body-color: rgba(
|
|
24
|
-
$body-bg: rgba(0,0,0,.
|
|
25
|
-
$
|
|
26
|
-
$
|
|
22
|
+
$body-color: rgba(255, 255, 255, 0.8);
|
|
23
|
+
$body-bg: rgba(0,0,0,.9);
|
|
24
|
+
$light-scheme-text: rgba(52, 52, 52, 0.9);
|
|
25
|
+
$light-scheme-bg: rgba(255, 255, 255, 0.8);
|
|
26
|
+
|
|
27
27
|
|
|
28
28
|
$large-breakpoint: 38em;
|
|
29
|
-
$large-font-size:
|
|
29
|
+
$large-font-size: 1.25em;
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: quattle
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: 1.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Victor Wynne
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2021-12-
|
|
11
|
+
date: 2021-12-27 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|