diff --git a/README.md b/README.md index c9e33f9..04d6b3c 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,44 @@ -Quattle is a modern, responsive and customizable theme for the static site generator Jekyll. Typography and design aesthetics are give the full attention they deserve. A light or dark color scheme will be displayed automatically depending on a device's settings. It builds upon a standard Jekyll installation in a number of ways that are important to both writers and software developers. +Quattle is a modern and customizable theme for the static site generator Jekyll. -This project was originally released in 2019 as Noir, but various issues including 2FA and GPG lockout made that repo inaccessible to me. Every attempt to communicate these access issues to GitHub (read: Microsoft) and rectify the situation were unsuccessful. The project was renamed to avoid gem issues. +## Demo +[quattle.victorwynne.com](https://quattle.victorwynne.com) -### Current Release Candidate +## Download +[GitHub](https://github.com/victorwynne/quattle/releases) or [RubyGems](https://rubygems.org/gems/quattle) -Available as [source code](https://github.com/victorwynne/quattle/releases) or [gem](https://rubygems.org/gems/quattle) +## Features +Fully responsive with an emphasis on mobile friendly design, typography and interaction -### Demo +HTML, SASS, XML, supporting assets and config files are included for the theme's design and functionality -A live demo and style guide can be found at [quattle.victorwynne.com](https://quattle.victorwynne.com) +CSS media feature `prefers-color-scheme` to detect if the visitor has requested a light or dark color mode -### Features - -HTML, SASS and config files are included for the theme's design and functionality - -A navigation area for linking to pages/posts or external URLs such as social media accounts - -404, Archive, Category, Tag, Style, Privacy and About pages - -Pagination, related posts and per-post navigation to older/newer entries +`$variables` based color schemes for light and dark mode, syntax highlighting for code blocks and styling of elements HTML/CSS compression (minification) -A favicon and valid Atom syndicated feed +Valid Atom syndicated feed + +GDPR valid and compliant cookie consent banner -Variables based colors which can be changed easily +404, site map, navigation, archive, category, tag, about, style and privacy pages -Fully responsive, with an emphasis on mobile friendly design and interaction +Archive displays a tag cloud and number of posts per month, year, category, tag -Enabled forced curly/smart quotes across all content with the `{ | smartify }` liquid filter +Excerpt, pagination and per-post navigation to older/newer entries -Rich preview links when shared via iMessage on iOS/macOS/watchOS +Smart quotes across all content with the `{ | smartify }` liquid filter -GDPR valid and compliant cookie consent banner and accompanying privacy policy +Rich preview links when shared via iMessage and social media services -A wide variety of HTML elements commonly used in online Markdown writing (blockquotes, headers, tables, boxes/buttons, figure captions, inline code, footnotes) have been styled +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) -Code blocks are uniquely styled and if the language is declared then it is labeled and the syntax is highlighted +Additional supported and styled front matter: +* Author attribution +* Last modified date +* Permalinks for linked list style posts that have an external source reference -A single line added to a post's front matter can enable: -* Adding categories or tags to a post -* Per-post author attribution -* 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 -* Additional date line listing the last date a post was modified on -### License +## License -Quattle is free software available under a [MIT license](https://github.com/victorwynne/quattle/blob/main/LICENSE). +Quattle is free software distributed under a [MIT license](https://github.com/victorwynne/quattle/blob/main/LICENSE). diff --git a/_config.yml b/_config.yml index 9ffbd1b..f0bf732 100644 --- a/_config.yml +++ b/_config.yml @@ -1,6 +1,6 @@ # Setup title: Quattle -tagline: made skillfully by hand +tagline: by Victor Wynne url: https://quattle.victorwynne.com paginate: 1 baseurl: "" diff --git a/_includes/head.html b/_includes/head.html index 05e2a81..ebf45ac 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -17,4 +17,5 @@ {% seo title=false %} + diff --git a/_layouts/default.html b/_layouts/default.html index b7e9f5c..f2a12f9 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -12,10 +12,10 @@
-

+

{{ site.title }}
{{ site.tagline }} -

+
@@ -32,11 +32,11 @@

{{ content | smartify }} -
+

Made with ❤️ on a Mac 💻

- + {% if site.ga_analytics %} {% endif %} - - - {% include cookie-consent.html%} - + +{% include cookie-consent.html%} + diff --git a/_layouts/post.html b/_layouts/post.html index ea51b4d..1d0fe84 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -4,11 +4,11 @@
{% if page.link %} -

+

{{ page.title | smartify }} → -

+

{% else %} -

{{ page.title | smartify }}

+

{{ page.title | smartify }}

{% endif %} - {% if page.link %}⌘ External Link{% endif %} + {% if page.link %}⌘ External Link{% endif %} {{ content | smartify }} @@ -37,34 +36,25 @@

{{ page.title | smartify }}

{% assign tags = page.tags %} {% endif %} {% for tag in tags %} - #{{tag}} + {{tag}} {% unless forloop.last %} {% endunless %} {% endfor %}
+ {% if page.link %} + + source: {{ page.link | remove:'http://' | remove:'www.' | remove:'https://' | split:'/' | first }} +
+ {% endif %} +

+
{% if page.previous.url %} - +
{% endif %} {% if page.next.url %} - +
{% endif %}
- -{% if site.related_posts != empty %} - -{% endif %} diff --git a/_posts/1988-02-19-what-is-jekyll.md b/_posts/1988-02-19-what-is-jekyll.md new file mode 100644 index 0000000..a501156 --- /dev/null +++ b/_posts/1988-02-19-what-is-jekyll.md @@ -0,0 +1,12 @@ +--- +layout: post +title: "What is Jekyll?" +date: 1988-2-19 +categories: [Announcements, Links] +tags: [jekyll, ruby, development, design, web3] +link: https://github.com/jekyll/jekyll/blob/master/README.markdown +--- + +>Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind [GitHub Pages](https://pages.github.com), which you can use to host sites right from your GitHub repositories. + +The post title can link to an external URL and the base URL of that link is automatically listed as a source reference. I styled this with a right arrow but it is very simple to change or disable this from displaying. The Atom feed will by default reference the website permalink rather than the external URL. diff --git a/_posts/2021-12-10-what-is-jekyll.md b/_posts/2021-12-10-what-is-jekyll.md deleted file mode 100644 index bf8e2a6..0000000 --- a/_posts/2021-12-10-what-is-jekyll.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -layout: post -title: "What is Jekyll?" -date: 2021-12-10 -categories: [Links] -tags: [jekyll, installation, philosophy] -link: https://github.com/jekyll/jekyll/blob/master/README.markdown ---- - -Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind [GitHub Pages](https://pages.github.com), which you can use to host sites right from your GitHub repositories. - -## Philosophy - -Jekyll does what you tell it to do — no more, no less. It doesn't try to outsmart users by making bold assumptions, nor does it burden them with needless complexity and configuration. Put simply, Jekyll gets out of your way and allows you to concentrate on what truly matters: your content. - -See: [https://jekyllrb.com/philosophy](https://jekyllrb.com/philosophy) - -## Getting Started - -* [Install](https://jekyllrb.com/docs/installation/) the gem -* Read up about its [Usage](https://jekyllrb.com/docs/usage/) and [Configuration](https://jekyllrb.com/docs/configuration/) -* Take a gander at some existing [Sites](https://github.com/jekyll/jekyll/wiki/sites) -* [Fork](https://github.com/jekyll/jekyll/fork) and [Contribute](https://jekyllrb.com/docs/contributing/) your own modifications -* Have questions? Check out our official forum community [Jekyll Talk](https://talk.jekyllrb.com/) or [`#jekyll` on irc.freenode.net](https://botbot.me/freenode/jekyll/) - -## Diving In - -* [Migrate](http://import.jekyllrb.com/docs/home/) from your previous system -* Learn how [Front Matter](https://jekyllrb.com/docs/front-matter/) works -* Put information on your site with [Variables](https://jekyllrb.com/docs/variables/) -* Customize the [Permalinks](https://jekyllrb.com/docs/permalinks/) your posts are generated with -* Use the built-in [Liquid Extensions](https://jekyllrb.com/docs/templates/) to make your life easier -* Use custom [Plugins](https://jekyllrb.com/docs/plugins/) to generate content specific to your site -* Watch [video tutorials from Giraffe Academy](https://jekyllrb.com/tutorials/video-walkthroughs/) - -## Need help? - -If you don't find the answer to your problem in our [docs](https://jekyllrb.com/docs/), or in the [troubleshooting section](https://jekyllrb.com/docs/troubleshooting/), ask the [community](https://jekyllrb.com/docs/community/) for help. diff --git a/_posts/2021-12-17-v1-2-now-available.md b/_posts/2021-12-17-v1-2-now-available.md deleted file mode 100644 index d2e0162..0000000 --- a/_posts/2021-12-17-v1-2-now-available.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -layout: post -title: "v1.2.1 Now Available" -date: 2021-12-17 -categories: [Announcements] -tags: [development] ---- - -Get the latest release via [source code](https://github.com/victorwynne/quattle/releases) or [gem](https://rubygems.org/gems/quattle) - -#### Changelog for v1.2.1 - -Mistakenly (read: stupidly) used an uppercase letter Q for the gem name, yanked the previous gem versions and renamed it properly. Updated README.md and about.md to reflect this change. - -#### Changelog for v1.2 - -Created a GDPR valid and compliant cookie consent banner that appears at the bottom of the page. An accompanying privacy page has also been included - -Add `{ % include yourscriptfile.js % }` to line 35 of `cookie-consent.html` in order for your script to run and cookie(s) to be created after the notice is accepted - -Updated Ruby gem to v1.2 diff --git a/_posts/2021-12-27-v1-3-0.md b/_posts/2021-12-27-v1-3-0.md new file mode 100644 index 0000000..6b51f9c --- /dev/null +++ b/_posts/2021-12-27-v1-3-0.md @@ -0,0 +1,31 @@ +--- +layout: post +title: "Release Candidate v1.3.0 Now Available" +date: 2021-12-27 +categories: [Announcements] +tags: [jekyll, development, news, life] +link: https://github.com/victorwynne/quattle/releases/tag/v1.3.0-RC +--- + +## Download +[GitHub](https://github.com/victorwynne/quattle/releases) or [RubyGems](https://rubygems.org/gems/quattle)
+ +## Changelog for v1.3.0 + +**Added:** a tag cloud! + +**Added:** a fresh coat of paint! + +**Fixed:** a number of header tags that weren't consistent across pages + +**Changed:** if no color scheme is requested the default is now `dark` + +**Improved:** various visual tweaks and refinements to both light and dark mode + +**Improved:** tags are now styled on posts and on the tags page + +**Improved:** archive displays the number of posts per month, year, category, tag + +**Improved:** the external URL listed for the `link:` front matter will display the base domain as a source reference at the bottom of posts and link to the full URL + +**Removed:** the related posts feature. Visually it became quite a busy mess at the bottom of each post; tags, source reference, footnotes, previous/next entries. Functionally it wasn't that useful because it relied on `site.related_posts` which is time based only. Working on an alternate implementation. diff --git a/_sass/_base.scss b/_sass/_base.scss index 89c3c28..bde6857 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -27,31 +27,33 @@ body { background-color: $body-bg; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; - -@media (prefers-color-scheme: dark) { - color: $body-color-dark; - background-color: $body-bg-dark; - } + + + @media (prefers-color-scheme: light) { + color: $light-scheme-text; + background-color: $light-scheme-bg; + } + } // No `:visited` state is required by default (browsers will use `a`) a { - color: $light; + color: $color; text-decoration: none; + + @media (prefers-color-scheme: light) { + color: $light-scheme-color; + } // `:focus` is linked to `:hover` for basic accessibility &:hover, &:focus { - text-decoration: none; + text-decoration: none; } strong { color: inherit; } - -@media (prefers-color-scheme: dark) { - color: $dark; - } } img { @@ -65,22 +67,18 @@ table { margin-bottom: 1rem; width: 100%; font-size: 85%; - border: 1px solid #d4d4d4; + border: 1px solid #555555; border-collapse: collapse; -@media (prefers-color-scheme: dark) { - border: 1px solid #555555; - } + @media (prefers-color-scheme: light) { + border: 1px solid #D2D2D2; + } } td, th { padding: .25rem .5rem; - border: 1px solid #d4d4d4; - -@media (prefers-color-scheme: dark) { border: 1px solid #555555; - } } th { @@ -89,9 +87,9 @@ th { tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th { - background-color: #eee; - -@media (prefers-color-scheme: dark) { background-color: #2d2d2d; + + @media (prefers-color-scheme: light) { + background-color: #d2d2d2; } } diff --git a/_sass/_code.scss b/_sass/_code.scss index 6525248..a392fe6 100644 --- a/_sass/_code.scss +++ b/_sass/_code.scss @@ -4,15 +4,18 @@ .highlighter-rouge { font-family: $root-font-family; font-size: 100%; - padding: 3px 4px; - background-color: #494949; - color: $code-light; - white-space: nowrap; - -@media (prefers-color-scheme: dark) { + padding: 4px 4px; background-color: #212c2d; - color: $code-dark; - } + color: $code; + white-space: nowrap; + border: 1.5px solid $code; + border-radius: .25em; + + @media (prefers-color-scheme: light) { + color: $light-scheme-text; + background-color: #F8F8F8; + border: 1.5px solid #D2D2D2; + } } /* Applies to all code */ @@ -85,14 +88,10 @@ figure.highlight, div.highlight { pre { background-color: $code-bg; - border: 1px solid $code-light; + border: 1px solid $code; border-radius: 15px; box-shadow: 0 4px 30px rgba(0,0,0,.4); - @media (prefers-color-scheme: dark) { - border: 1px solid $code-dark; - } - code { background-color: $code-bg; color: #bdbdb3; @@ -113,7 +112,7 @@ figure.highlight, div.highlight { text-transform: uppercase; font-weight: bold; - border: 1px solid $code-light; + border: 1px solid $code; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; @@ -122,14 +121,9 @@ figure.highlight, div.highlight { min-width: 30px; text-align: center; - color: $code-light; + color: $code; background-color: $code-bg; - @media (prefers-color-scheme: dark) { - border: 1px solid $code-dark; - color: $code-dark; - } - @mixin media-query($device) { @media screen and (max-width: $device) { @content; diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 2db64ab..a73ae84 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -12,5 +12,37 @@ footer { margin-top: 2rem; margin-bottom: 2rem; text-align: center; - font-size: 90%; + font-size: 80%; +} + +.post-nav { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + div { + flex: 1 1 0; + + &:first-child { + padding-right: 0.5em; + } + + &:last-child { + padding-left: 0.5em; + text-align: right; + } + } +} + +.unsighted { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; } diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss index 5da8e99..4b95b50 100644 --- a/_sass/_masthead.scss +++ b/_sass/_masthead.scss @@ -15,11 +15,12 @@ color: $body-color; position: relative; text-align: center; - padding-right: 12px; + padding-left: 0px; + padding-right: 0px; -@media (prefers-color-scheme: dark) { - color: $body-color-dark; - } + @media (prefers-color-scheme: light) { + color: $light-scheme-text; + } a { color: inherit; @@ -36,11 +37,7 @@ display: block; font-size: 100%; font-weight: 500; - color: #d4d4d4; - -@media (prefers-color-scheme: dark) { color: #333333; - } ul#navigation-list { list-style: none; @@ -48,10 +45,10 @@ ul#navigation-list { padding: 0; } ul#navigation-list li { - display: inline; - list-style: none; - padding-left: 0; - padding-right: 12px; + display: inline; + list-style: none; + padding-left: 6.5px; + padding-right: 6.5px; margin: 0; } } diff --git a/_sass/_message.scss b/_sass/_message.scss index 08927e6..191a87d 100644 --- a/_sass/_message.scss +++ b/_sass/_message.scss @@ -11,15 +11,9 @@ margin-bottom: 15px; padding: 12px; color: #fff; - background-color: #454545; - border-left: .3rem solid #bebebe; - - -@media (prefers-color-scheme: dark) { - color: #fff; - background-color: #282828; + background-color: $message-default; border-left: .3rem solid #595959; - } + border-radius: .5em; } .green { @@ -28,6 +22,7 @@ color: #fff; background-color: $message-green; border-left: .3rem solid #93d080; + border-radius: .5em; } .yellow { @@ -36,6 +31,7 @@ color: #fff; background-color: $message-yellow; border-left: .3rem solid #fdcb61; + border-radius: .5em; } .orange { @@ -44,6 +40,7 @@ color: #fff; background-color: $message-orange; border-left: .3rem solid #f9ac6b; + border-radius: .5em; } .red { @@ -52,6 +49,7 @@ color: #fff; background-color: $message-red; border-left: .3rem solid #e86c71; + border-radius: .5em; } .purple { @@ -60,6 +58,7 @@ color: #fff; background-color: $message-purple; border-left: .3rem solid #bf61c0; + border-radius: .5em; } .blue { @@ -68,6 +67,7 @@ color: #fff; background-color: $message-blue; border-left: .3rem solid #2bc2ff; + border-radius: .5em; } /* The close button */ diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss index fbd39a7..b36dfe6 100644 --- a/_sass/_pagination.scss +++ b/_sass/_pagination.scss @@ -11,12 +11,8 @@ .pagination-item { display: block; padding: 1rem; - border: solid #eee; - border-width: 1px 0; - -@media (prefers-color-scheme: dark) { border: solid #111111; -} + border-width: 1px 0; &:first-child { margin-bottom: -1px; @@ -25,11 +21,7 @@ // Only provide a hover state for linked pagination items a.pagination-item:hover { - background-color: #eee; - -@media (prefers-color-scheme: dark) { background-color: #1e1e1e; - } } @media (min-width: 30em) { diff --git a/_sass/_posts.scss b/_sass/_posts.scss index 62efd45..8a02660 100644 --- a/_sass/_posts.scss +++ b/_sass/_posts.scss @@ -15,7 +15,7 @@ figure { } figcaption { color: #878787; - margin-top: 0.3em; + margin-top: 0.4em; font-size: 0.8em; text-align: center } @@ -25,7 +25,7 @@ figure { margin-top: 0; figcaption { - margin-top: -1em; + margin-top: 1em; margin-right: 2em; margin-left: 2em; } @@ -78,9 +78,9 @@ figure { .post-title a { color: $body-color; -@media (prefers-color-scheme: dark) { - color: $body-color-dark; - } + @media (prefers-color-scheme: light) { + color: $light-scheme-text; + } } .page-title, @@ -91,70 +91,91 @@ figure { // Meta data line below post title .post-date { display: block; - margin-top: -.5rem; + margin-top: -.4rem; margin-bottom: 1rem; color: $body-color; -@media (prefers-color-scheme: dark) { - color: $body-color-dark; - } + @media (prefers-color-scheme: light) { + color: $light-scheme-text; + } } .permalink { display: block; - margin-top: -.9rem; + margin-top: -1rem; margin-bottom: 1.5rem; color: $body-color; -@media (prefers-color-scheme: dark) { - color: $body-color-dark; - } + @media (prefers-color-scheme: light) { + color: $light-scheme-color; + } } .external-link { display: block; - margin-top: -.9rem; + margin-top: -1rem; margin-bottom: 1.5rem; - opacity: .5; + opacity: .7; color: $body-color; - -@media (prefers-color-scheme: dark) { - color: $body-color-dark; - } + + @media (prefers-color-scheme: light) { + color: $light-scheme-accent; + opacity: 1; + } } .tag-list { - padding-top: 0px; - padding-bottom: 4px; - padding-right: 8px; - border-radius: 5px; - color: $body-color; - @media (prefers-color-scheme: dark) { - color: #C06337; - } + a:link { + color: $color; + display: inline-block; + padding-top: 1px; + padding-bottom: 1px; + padding-left: 5px; + padding-right: 5px; + border: 1.5px solid $accent; + border-radius: .25em; + margin-bottom: .5rem; + margin-right: .1rem; + font-size: 90%; + + @media (prefers-color-scheme: light) { + color: $light-scheme-color; + border: 1.5px solid #d2d2d2; + background-color: #f8f8f8; + } } -// Related posts -.related { - padding-top: 2rem; - padding-bottom: 2rem; - margin-bottom: 2rem; - border-top: 1px solid #d4d4d4; - border-bottom: 1px solid #d4d4d4; - -@media (prefers-color-scheme: dark) { - border-top: 1px solid #333333; - border-bottom: 1px solid #333333; +a:visited { + color: $color; + display: inline-block; + padding-top: 1px; + padding-bottom: 1px; + padding-left: 5px; + padding-right: 5px; + border: 1px solid $accent; + border-radius: .25em; + margin-bottom: .5rem; + margin-right: .1rem; + font-size: 90%; + + @media (prefers-color-scheme: light) { + color: $light-scheme-color; + border: 1.5px solid #d2d2d2; + background-color: #f8f8f8; + } } } -.PageNavigation { - font-size: 18px; - display: block; - width: auto; - overflow: hidden; -} + .source { + display: inline-block; + width: 100%; + overflow: hidden; + white-space: nowrap; + margin-top: 2rem; + font-variant: small-caps; + } + .PageNavigation a { display: inline; @@ -176,22 +197,4 @@ figure { h3 { margin-top: 0; } - - li { - small { - font-size: 75%; - color: #999; - } - - a:hover { - color: $light; - text-decoration: none; - - @media (prefers-color-scheme: dark) { - color: $dark; - } - - - } - } } diff --git a/_sass/_type.scss b/_sass/_type.scss index 3b31300..695d89c 100644 --- a/_sass/_type.scss +++ b/_sass/_type.scss @@ -5,24 +5,24 @@ h1, h2, h3, h4, h6 { font-weight: 600; line-height: 1.25; text-rendering: optimizeLegibility; - color: #767676; + color: $accent; position: relative; - @media (prefers-color-scheme: dark) { - color: #6968A7; - } + @media (prefers-color-scheme: light) { + color: $light-scheme-accent; + } } -h2::before,h4::before,h6::before { +h3::before { content: "#"; - color: #767676; - left: -0.9em; + color: $accent; + left: -1em; top: 0; position: absolute; - - @media (prefers-color-scheme: dark) { - color: #6968A7; - } + + @media (prefers-color-scheme: light) { + color: $light-scheme-accent; + } } h1 { @@ -65,13 +65,15 @@ hr { position: relative; margin: 1.5rem 0; border: 0; - border-top: 1px solid #d4d4d4; - border-bottom: 1px solid #d4d4d4; + border-top: 1px solid $body-color; + border-bottom: 1px solid $body-color; + opacity: .2; -@media (prefers-color-scheme: dark) { - border-top: 1px solid #333333; - border-bottom: 1px solid #333333; - } + @media (prefers-color-scheme: light) { + border-top: 1px solid $light-scheme-text; + border-bottom: 1px solid $light-scheme-text; + opacity: .2; + } } abbr { @@ -80,10 +82,10 @@ abbr { opacity: .5; color: $body-color; text-transform: uppercase; - -@media (prefers-color-scheme: dark) { - color: $body-color-dark; - } + + @media (prefers-color-scheme: light) { + color: $light-scheme-text; + } &[title] { cursor: help; @@ -92,24 +94,27 @@ abbr { } span.link-arrow { - color: #767676; - -@media (prefers-color-scheme: dark) { - color: #6968A7; - } + color: $accent; + + @media (prefers-color-scheme: light) { + color: $light-scheme-accent; + } } blockquote { width: 100%; - padding:.25em 90px .25em 25px; + padding: .25em 100px .25em 25px; margin: 40px auto; font-style: italic; + font-size: 90%; + opacity: .9; position: relative; - border-left: 3px solid $light; + border-left: 4px solid $accent; - @media (prefers-color-scheme: dark) { - border-left: 3px solid #6968A7; - } + @media (prefers-color-scheme: light) { + border-left: 4px solid $light-scheme-accent; + opacity: .8; + } p:last-child { margin-bottom: 0; @@ -117,7 +122,7 @@ blockquote { @media (min-width: 30em) { padding-right: 5rem; - padding-left: 1.25rem; + padding-left: 1.5rem; } } @@ -126,14 +131,14 @@ figure { } mark { - background: #cefce8; + background: $accent; color: $body-color; - padding: 2px 2px; - - @media (prefers-color-scheme: dark) { - background: #6968A7; - color: $body-color-dark; - } + padding: 2px 2px; + + @media (prefers-color-scheme: light) { + background: #e8e8e8; + color: $light-scheme-text; + } } // Footnote number within body text @@ -144,17 +149,16 @@ a[href^="#fn:"] { min-width: 35px; margin: 0 0.1em 0 0.2em; text-align: center; - background: #eee; - color: $light; - border: 1px solid #eee; + color: $color; + border: 1.5px solid $accent; border-radius: 1em; vertical-align: middle; -@media (prefers-color-scheme: dark) { - color: #6968A7; - background: #2c2c2c; - border: 1px solid #2c2c2c; - } + @media (prefers-color-scheme: light) { + color: $light-scheme-color; + background-color: #F8F8F8; + border: 1.5px solid #d2d2d2; + } } // Back to footnote link @@ -171,17 +175,25 @@ a[href^="#fnref:"] { font-size: 80%; :target { - padding: 5px; - background: #eee; - border: solid 1px $light; - -@media (prefers-color-scheme: dark) { - background: #24252b; - border: solid 1px #6968A7; - } + padding: 6px; + border: solid 1px $accent; + + @media (prefers-color-scheme: light) { + border: solid 1.5px #d2d2d2; + background-color: #F8F8F8; + } } } +.reversefootnote { + text-decoration: none; + color: $color; + + @media (prefers-color-scheme: light) { + color: $light-scheme-color; + } +} + // Custom type // // Extend paragraphs with `.lead` for larger introductory text. @@ -191,10 +203,4 @@ a[href^="#fnref:"] { font-weight: 300; } -.reversefootnote { - text-decoration: none; - - @media (prefers-color-scheme: dark) { - color: #6968A7; - } - } + diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 934ec18..8bb5cac 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -1,13 +1,12 @@ -// Color scheme for light and dark modes. +// Color scheme for light and dark mode +$color: #0083a0; +$accent: #6968A7; +$light-scheme-color: #009ddc; +$light-scheme-accent: #909090; -$light: #007AFF; -$dark: #2F8F85; - -// Highlighting color for code block borders and language name. - -$code-light: #5AC8FA; -$code-dark: #d0f6db; +$code: #5bc8f9; +$message-default: #282828; $message-green: #62bb47; $message-yellow: #fcb827; $message-orange: #f6821f; @@ -15,15 +14,16 @@ $message-red: #e03940; $message-purple: #953c96; $message-blue: #009ddc; -$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; +$root-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; $code-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $root-font-size: 16px; $root-line-height: 1.5; -$body-color: rgba(0,0,0,.8); -$body-bg: rgba(0,0,0,.03); -$body-color-dark: hsla(0,0%,100%,.8); -$body-bg-dark: rgba(0,0,0,.9); +$body-color: rgba(255, 255, 255, 0.8); +$body-bg: rgba(0,0,0,.9); +$light-scheme-text: rgba(52, 52, 52, 0.9); +$light-scheme-bg: rgba(255, 255, 255, 0.8); + $large-breakpoint: 38em; -$large-font-size: 20px; +$large-font-size: 1.25em; diff --git a/about.md b/about.md index fc85fae..288bc58 100644 --- a/about.md +++ b/about.md @@ -4,46 +4,47 @@ permalink: /about/ title: About --- -Quattle is a modern, responsive and customizable theme for the static site generator Jekyll. Typography and design aesthetics are give the full attention they deserve. A light or dark color scheme will be displayed automatically depending on a device's settings. It builds upon a standard Jekyll installation in a number of ways that are important to both writers and software developers. +Quattle is a modern and customizable theme for the static site generator Jekyll. -### Current Release Candidate +## Demo +You're looking at it right now. 🤓 -Available as [source code](https://github.com/victorwynne/quattle/releases) or [gem](https://rubygems.org/gems/quattle) +## Download +[GitHub](https://github.com/victorwynne/quattle/releases) or [RubyGems](https://rubygems.org/gems/quattle) -### Features +## Features +Fully responsive with an emphasis on mobile friendly design, typography and interaction -HTML, SASS and config files are included for the theme's design and functionality +HTML, SASS, XML, supporting assets and config files are included for the theme's design and functionality -A navigation area for linking to pages/posts or external URLs such as social media accounts +CSS media feature `prefers-color-scheme` to detect if the visitor has requested a light or dark color mode -404, Archive, Category, Tag, Style, Privacy and About pages - -Pagination, related posts and per-post navigation to older/newer entries +`$variables` based color schemes for light and dark mode, syntax highlighting for code blocks and styling of elements HTML/CSS compression (minification) -A favicon and valid Atom syndicated feed +Valid Atom syndicated feed + +GDPR valid and compliant cookie consent banner -Variables based colors which can be changed easily +404, site map, navigation, archive, category, tag, about, style and privacy pages -Fully responsive, with an emphasis on mobile friendly design and interaction +Archive displays a tag cloud and number of posts per month, year, category, tag -Enabled forced curly/smart quotes across all content with the `{ | smartify }` liquid filter +Excerpt, pagination and per-post navigation to older/newer entries -Rich preview links when shared via iMessage on iOS/macOS/watchOS +Smart quotes across all content with the `{ | smartify }` liquid filter -GDPR valid and compliant cookie consent banner and accompanying privacy policy +Rich preview links when shared via iMessage and social media services -A wide variety of HTML elements commonly used in online Markdown writing (blockquotes, headers, tables, boxes/buttons, figure captions, inline code, footnotes) have been styled +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) -Code blocks are uniquely styled and if the language is declared then it is labeled and the syntax is highlighted +Additional supported and styled front matter: +* Author attribution +* Last modified date +* Permalinks for linked list style posts that have an external source reference -A single line added to a post's front matter can enable: -* Adding categories or tags to a post -* Per-post author attribution -* 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 -* Additional date line listing the last date a post was modified on -### License +## License -Quattle is free software available under a [MIT license](https://github.com/victorwynne/quattle/blob/main/LICENSE). +Quattle is free software distributed under a [MIT license](https://github.com/victorwynne/quattle/blob/main/LICENSE). diff --git a/archive.md b/archive.md index be60733..934814f 100644 --- a/archive.md +++ b/archive.md @@ -3,20 +3,27 @@ layout: page permalink: /archive/ title: Archive --- -
You can view posts by date, category or tag.
+ +
You can view posts by date, category or tag.
- {% for post in site.posts %} - {% unless post.next %} -

{{ post.date | date: '%B %Y' }}

- {% else %} - {% capture year %}{{ post.date | date: '%Y %b' }}{% endcapture %} - {% capture nyear %}{{ post.next.date | date: '%Y %b' }}{% endcapture %} - {% if year != nyear %} -

{{ post.date | date: '%B %Y' }}

- {% endif %} - {% endunless %} - {{ post.title }}   -
- {% endfor %} + +{% for post in site.posts %} +{% assign thisyear = post.date | date: "%B %Y" %} +{% assign prevyear = post.previous.date | date: "%B %Y" %} +{% assign counter = counter | plus: 1 %} +{% if thisyear != prevyear %} + +

{{ thisyear }} {{ counter }}

+ +{% assign fli = forloop.index | minus: counter %} +{% for post2 in site.posts limit: counter offset: fli %} + +{{ post2.title }}   + +
+{% endfor %} +{% assign counter = 0 %} +{% endif %} +{% endfor %}
diff --git a/categories.md b/categories.md index 2d5ddce..0ad7d05 100644 --- a/categories.md +++ b/categories.md @@ -14,7 +14,8 @@ title: Categories
-

{{ category_name }}

+

+ {{ category[0] | replace:'-', ' ' }} {{ category | last | size }}

{% for post in site.categories[category_name] %} diff --git a/index.html b/index.html index 6e307b6..47b9a39 100644 --- a/index.html +++ b/index.html @@ -6,23 +6,27 @@
{% for post in paginator.posts %}
-

+

{{ post.title | smartify }}{% if post.link %} →{% endif %} -

- + + + + + + {% if page.link %}⌘ External Link{% endif %} {% if post.link %} @@ -30,7 +34,7 @@

{% endif %} - {{ post.content | smartify }} + {{ post.content | smartify }}
@@ -40,10 +44,17 @@

{% assign tags = page.tags %} {% endif %} {% for tag in tags %} - #{{tag}} + {{tag}} {% unless forloop.last %} {% endunless %} {% endfor %}

+ +{% if page.link %} + +source: {{ page.link | remove:'http://' | remove:'www.' | remove:'https://' | split:'/' | first }} +
+{% endif %} +

{% endfor %} @@ -51,10 +62,9 @@

{% if paginator.next_page %} - +
{% endif %} {% if paginator.previous_page %} - +
{% endif %}
- diff --git a/privacy.md b/privacy.md index 17571fa..61ff36c 100644 --- a/privacy.md +++ b/privacy.md @@ -5,7 +5,7 @@ title: Privacy ---

- The below text serves as an example/filler text for the included privacy page and does not actually reflect the privacy policies of this website. Neither the subdomain for Quattle nor my main website at victorwynne.com collect ANY information of any kind. Zero cookies. + The below text serves as an example/filler text for the included privacy page and does not actually reflect the privacy policies of this website. Neither the subdomain for Quattle nor my main website at victorwynne.com collect ANY information of any kind. Zero cookies.

diff --git a/quattle-1.2.1.gem b/quattle-1.2.1.gem deleted file mode 100644 index 6b15ae9..0000000 Binary files a/quattle-1.2.1.gem and /dev/null differ diff --git a/quattle-1.3.0.gem b/quattle-1.3.0.gem new file mode 100644 index 0000000..7438788 Binary files /dev/null and b/quattle-1.3.0.gem differ diff --git a/quattle.gemspec b/quattle.gemspec index ea19cd3..368b1d9 100644 --- a/quattle.gemspec +++ b/quattle.gemspec @@ -2,7 +2,7 @@ Gem::Specification.new do |spec| spec.name = "quattle" - spec.version = "1.2.1" + spec.version = "1.3.0" spec.authors = ["Victor Wynne"] spec.email = ["hello@victorwynne.com"] diff --git a/styles.md b/styles.md index 952cda3..f496787 100644 --- a/styles.md +++ b/styles.md @@ -4,10 +4,10 @@ title: Styles ---

- This page serves to document the style of various elements used in the site's design. + This style guide serves to document the design of various elements used in the theme.

-## THIS IS A HEADER +### Header This is the font, size, color and spacing of regular ol' paragraph

text. Using Markdown makes it dead simple to make text *italic*, **bold** or ***bold and italic***. diff --git a/tags.md b/tags.md index 2e9622b..cb5515d 100644 --- a/tags.md +++ b/tags.md @@ -6,6 +6,13 @@ title: Tags

You can view posts by date, category or tag.
+
+ {% assign tags_sorted = site.tags | sort %} + {% for tag in tags_sorted %} + {{ tag | first }} {{tag[1].size}} + {% endfor %} +
+
{% assign tags_sorted = site.tags | sort %} {% for tag in tags_sorted %} @@ -14,7 +21,7 @@ title: Tags
-

#{{ tag_name }}

+

{{ tag_name }} {{tag[1].size}}

{% for post in site.tags[tag_name] %} @@ -26,3 +33,5 @@ title: Tags
{% endfor %}
+ +