v1.3.0

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.
+## <small>Demo</small>
+[quattle.victorwynne.com](https://quattle.victorwynne.com)
 
-### Current Release Candidate
+## <small>Download</small>
+[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)
+## <small>Features</small>
+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
+## <small>License</small>
 
-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).

_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: ""

_includes/head.html

@@ -17,4 +17,5 @@
   <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}/feed.xml">
 
   {% seo title=false %}
+
 </head>

_layouts/default.html

@@ -12,10 +12,10 @@
     <div class="container content">
       <header class="masthead">
 
-        <h3 class="masthead-title">
+        <h2 class="masthead-title">
           <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a><br>
           <small>{{ site.tagline }}</small>
-        </h3>
+        </h2>
 
 		<!-- Change navigation links here -->
 		<div class="navigation">
@@ -32,11 +32,11 @@ <h3 class="masthead-title">
         {{ content | smartify }}
       </main>
 
-      <footer class="footer">
+      <br><footer class="footer">
         <p>Made with ❤️ on a Mac 💻</p>
       </footer>
     </div>
-
+    
     {% if site.ga_analytics %}
      <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -47,9 +47,8 @@ <h3 class="masthead-title">
        ga('send', 'pageview');
      </script>
     {% endif %}
-
-    <!-- Add scripts to include by editing the below referenced HTML file -->
-    {% include cookie-consent.html%}
-
+
+{% include cookie-consent.html%}
+
   </body>
 </html>

_layouts/post.html

@@ -4,11 +4,11 @@
 
 <article class="post">
 {% if page.link %}
-<h1 class="post-title"><a href="{{ page.link }}">
+<h2 class="post-title"><a href="{{ page.link }}">
   {{ page.title | smartify }} <span class="link-arrow">&rarr;</span></a>
-</h1>
+</h2>
   {% else %}
-<h1 class="post-title">{{ page.title | smartify }}</h1>
+<h2 class="post-title">{{ page.title | smartify }}</h2>
   {% endif %}
 
   <time datetime="{{ page.date | date_to_xmlschema }}" class="post-date">{{ page.date | date_to_long_string: "ordinal", "US" }}
@@ -24,8 +24,7 @@ <h1 class="post-title">{{ page.title | smartify }}</h1>
   {%- if page.last_modified_at -%}
   <br><i>Last updated on: {{ page.last_modified_at | date_to_long_string: "ordinal", "US" }}</i>
   {%- endif -%}
-  </time>
-  {% if page.link %}<span class="external-link">⌘ External Link</span>{% endif %}
+  </time>{% if page.link %}<span class="external-link">⌘ External Link</span>{% endif %}
 
   {{ content | smartify }}
 
@@ -37,34 +36,25 @@ <h1 class="post-title">{{ page.title | smartify }}</h1>
   {% assign tags = page.tags %}
   {% endif %}
   {% for tag in tags %}
-  <a href="{{site.baseurl}}/tags/#{{tag|slugize}}">#{{tag}}</a>
+  <a href="{{site.baseurl}}/tags/#{{tag|slugize}}">{{tag}}</a>
   {% unless forloop.last %}&nbsp;{% endunless %}
   {% endfor %}
   </div>
 
+  {% if page.link %}
+  <span class="source" role="doc-endnotes">
+  source: <a href="{{ page.link }}">{{ page.link | remove:'http://' | remove:'www.' | remove:'https://' | split:'/' | first }}</a>
+  </span><br>
+  {% endif %}
+  <br><br>
+
 </article>
 
 <div class="PageNavigation">
   {% if page.previous.url %}
-    <a class="prev" href="{{page.previous.url}}">← Previous</a>
+  <br><a class="prev" href="{{page.previous.url}}">← Previous</a>
   {% endif %}
   {% if page.next.url %}
-    <a class="next" href="{{page.next.url}}">Next →</a>
+  <br><a class="next" href="{{page.next.url}}">Next →</a>
   {% endif %}
 </div>
-
-{% if site.related_posts != empty %}
-<aside class="related">
-  <h3>Related Posts</h3>
-  <ul class="related-posts">
-    {% for post in site.related_posts limit:3 %}
-      <li>
-        <a href="{{ site.baseurl }}{{ post.url }}">
-          {{ post.title | smartify }}
-          <small><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_long_string: "ordinal", "US" }}</time></small>
-        </a>
-      </li>
-    {% endfor %}
-  </ul>
-</aside>
-{% endif %}

_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.

_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
+---
+
+## <small>Download</small>
+[GitHub](https://github.com/victorwynne/quattle/releases) or [RubyGems](https://rubygems.org/gems/quattle)<br>
+
+## <small>Changelog for v1.3.0</small>
+
+**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.

_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;
   }
 }