quattle 1.2.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a344b19294cd14c8e49a5bfd0536acd8c56e34702af64ac9bda58356c1f07845
+  data.tar.gz: 52f6ad0fca398c03d33670bcf9478cc6ab053378b5a68b7fa516c4f6a5227600
+SHA512:
+  metadata.gz: cd24a6bfdda62ee4ea339643528bc00dce3fd7509e577ddd2053516f520cbe2b3de1816602b7dab528f4728e193bebbc3cfd52eef209dc891260608b25c83808
+  data.tar.gz: ccc9cbcf23dc1bd633cfdfd2533ad6833fb7005ff0ef50d14d6fec4cbdc60e46a516ec1fe1d3c2c9fe821d97f586f76bada2e19b8f32001472117901552d9961

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Victor Wynne
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,49 @@
+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.
+
+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.
+
+### Current Release Candidate
+
+Available as [source code](https://github.com/victorwynne/quattle/releases) or [gem](https://rubygems.org/gems/Quattle)
+
+### Demo
+
+A live demo and style guide can be found at [quattle.victorwynne.com](https://quattle.victorwynne.com)
+
+### 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
+
+HTML/CSS compression (minification)
+
+A favicon and valid Atom syndicated feed
+
+Variables based colors which can be changed easily
+
+Fully responsive, with an emphasis on mobile friendly design and interaction
+
+Enabled forced curly/smart quotes across all content with the `{ | smartify }` liquid filter
+
+Rich preview links when shared via iMessage on iOS/macOS/watchOS
+
+GDPR valid and compliant cookie consent banner and accompanying privacy policy
+
+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
+
+Code blocks are uniquely styled and if the language is declared then it is labeled and the syntax is highlighted
+
+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
+
+Quattle is free software available under a [MIT license](https://github.com/victorwynne/quattle/blob/main/LICENSE).

data/_includes/cookie-consent.html

@@ -0,0 +1,45 @@
+<style>
+	#cookie-notice {padding: 0.5rem 1rem; display: none; text-align: center; position: fixed; bottom: 0; width: calc(100%); background: color(srgb 0.165 0.165 0.165); color: rgba(255,255,255,0.8);}
+	#cookie-notice a {display: inline-block; cursor: pointer; margin-left: 0.5rem;}
+	@media (max-width: 767px) {
+		#cookie-notice span {display: block; padding-top: 3px; margin-bottom: 1rem;}
+		#cookie-notice a {position: relative; bottom: 4px;}
+	}
+</style>
+<div id="cookie-notice"><span>We would like to use third party cookies and scripts to improve the functionality of this website.</span><a id="cookie-notice-accept" class="btn btn-primary btn-sm">Approve</a><a href="/privacy" class="btn btn-primary btn-sm">More info</a></div>
+<script>
+	function createCookie(name,value,days) {
+		var expires = "";
+		if (days) {
+			var date = new Date();
+			date.setTime(date.getTime() + (days*24*60*60*1000));
+			expires = "; expires=" + date.toUTCString();
+		}
+		document.cookie = name + "=" + value + expires + "; path=/";
+	}
+	function readCookie(name) {
+		var nameEQ = name + "=";
+		var ca = document.cookie.split(';');
+		for(var i=0;i < ca.length;i++) {
+			var c = ca[i];
+			while (c.charAt(0)==' ') c = c.substring(1,c.length);
+			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+		}
+		return null;
+	}
+	function eraseCookie(name) {
+		createCookie(name,"",-1);
+	}
+
+	if(readCookie('cookie-notice-dismissed')=='true') {
+
+	} else {
+		document.getElementById('cookie-notice').style.display = 'block';
+	}
+	document.getElementById('cookie-notice-accept').addEventListener("click",function() {
+		createCookie('cookie-notice-dismissed','true',31);
+		document.getElementById('cookie-notice').style.display = 'none';
+		location.reload();
+	});
+
+</script>

data/_includes/head.html

@@ -0,0 +1,20 @@
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta property="og:image" content="https://quattle.victorwynne.com/assets/iMessage.png" />
+
+  <title>
+    {% if page.title == "Home" %}
+      {{ site.title }}{% if site.tagline %} &middot; {{ site.tagline }}{% endif %}
+    {% else %}
+      {{ page.title }} &middot; {{ site.title }}
+    {% endif %}
+  </title>
+
+  <link rel="stylesheet" href="{{ site.baseurl }}/styles.css">
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}/assets/apple-touch-icon-precomposed.png">
+  <link rel="shortcut icon" href="{{ site.baseurl }}/assets/fav.ico">
+  <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}/feed.xml">
+
+  {% seo title=false %}
+</head>

data/_layouts/compress.html

@@ -0,0 +1,10 @@
+---
+# Jekyll layout that compresses HTML
+# v3.1.0
+# http://jch.penibelst.de/
+# © 2014–2015 Anatol Broder
+# MIT License
+---
+
+{% capture _LINE_FEED %}
+{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}

data/_layouts/default.html

@@ -0,0 +1,55 @@
+---
+layout: compress
+---
+
+<!doctype html>
+<html lang="en">
+
+  {% include head.html %}
+
+  <body>
+
+    <div class="container content">
+      <header class="masthead">
+	  
+        <h3 class="masthead-title">
+          <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a><br>
+          <small>{{ site.tagline }}</small>
+        </h3>
+		
+		<!-- Change navigation links here -->
+		<div class="navigation">
+		<ul id="navigation-list">
+		<li><a href="/archive/">archive</a></li>
+    <li><a href="/styles/">styles</a></li>
+		<li><a href="/about/">about</a></li>
+		</ul>
+		</div>
+		
+      </header>
+
+      <main>
+        {{ content | smartify }}
+      </main>
+
+      <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(){
+       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+       })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+       ga('create', '{{ site.ga_analytics }}', 'auto');
+       ga('send', 'pageview');
+     </script>
+    {% endif %}
+    
+    <!-- Add scripts to include by editing the below referenced HTML file -->
+    {% include cookie-consent.html%}
+    
+  </body>
+</html>

data/_layouts/page.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<article class="page">
+  {{ content | smartify }}
+</article>

data/_layouts/post.html

@@ -0,0 +1,70 @@
+---
+layout: default
+---
+
+<article class="post">
+{% if page.link %}
+<h1 class="post-title"><a href="{{ page.link }}">
+  {{ page.title | smartify }} <span class="link-arrow">&rarr;</span></a>
+</h1>
+  {% else %}
+<h1 class="post-title">{{ page.title | smartify }}</h1>
+  {% endif %}
+
+  <time datetime="{{ page.date | date_to_xmlschema }}" class="post-date">{{ page.date | date_to_long_string: "ordinal", "US" }}
+  {% if post %}
+  {% assign categories = post.categories %}
+  {% else %}
+  {% assign categories = page.categories %}
+  {% endif %}
+  {% if categories.size > 0 %}in{% endif %}
+  {% for category in categories %}
+  <a href="{{site.baseurl}}/categories/#{{category|slugize}}">{{category}}</a>{% unless forloop.last %},{% endunless %}
+  {% endfor %}
+  {%- 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 %}
+
+  {{ content | smartify }}
+
+  <br>
+  <div class="tag-list">
+  {% if post %}
+  {% assign tags = post.tags %}
+  {% else %}
+  {% assign tags = page.tags %}
+  {% endif %}
+  {% for tag in tags %}
+  <a href="{{site.baseurl}}/tags/#{{tag|slugize}}">#{{tag}}</a>
+  {% unless forloop.last %}&nbsp;{% endunless %}
+  {% endfor %}
+  </div>
+
+</article>
+
+<div class="PageNavigation">
+  {% if page.previous.url %}
+    <a class="prev" href="{{page.previous.url}}">← Previous</a>
+  {% endif %}
+  {% if page.next.url %}
+    <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 %}

data/_sass/_base.scss

@@ -0,0 +1,97 @@
+// Body
+
+* {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: $root-font-family;
+  font-size: $root-font-size;
+  line-height: $root-line-height;
+
+  @media (min-width: $large-breakpoint) {
+    font-size: $large-font-size;
+  }
+}
+
+body {
+  color: $body-color;
+  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;
+  }
+}
+
+// No `:visited` state is required by default (browsers will use `a`)
+a {
+  color: $light;
+  text-decoration: none;
+
+  // `:focus` is linked to `:hover` for basic accessibility
+  &:hover,
+  &:focus {
+  text-decoration: none;
+  }
+
+  strong {
+    color: inherit;
+  }
+  
+@media (prefers-color-scheme: dark) {
+  color: $dark;
+  }
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  margin: 0 0 1rem;
+  border-radius: 5px;
+}
+
+table {
+  margin-bottom: 1rem;
+  width: 100%;
+  font-size: 85%;
+  border: 1px solid #d4d4d4;
+  border-collapse: collapse;
+  
+@media (prefers-color-scheme: dark) {
+  border: 1px solid #555555;
+  }
+}
+
+td,
+th {
+  padding: .25rem .5rem;
+  border: 1px solid #d4d4d4;
+  
+@media (prefers-color-scheme: dark) {
+  border: 1px solid #555555;
+  }
+}
+
+th {
+  text-align: left;
+}
+
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
+  background-color: #eee;
+
+@media (prefers-color-scheme: dark) {
+  background-color: #2d2d2d;
+  }
+}

data/_sass/_buttons.scss

@@ -0,0 +1,56 @@
+// Buttons
+
+.added {
+    background: #6a28e8;
+    color: #fff;
+    text-align: center;
+	font-variant: small-caps;
+	font-weight: bold;
+    padding: 1px 8px 3px;
+    margin: 0 3px 3px 0;
+    border-radius: 6px;
+}
+
+.improved {
+    background: #0c83e1;
+    color: #fff;
+    text-align: center;
+	font-variant: small-caps;
+	font-weight: bold;
+    padding: 1px 8px 3px;
+    margin: 0 3px 3px 0;
+    border-radius: 6px;
+}
+
+.fixed {
+    background: #00d486;
+    color: #fff;
+    text-align: center;
+	font-variant: small-caps;
+	font-weight: bold;
+    padding: 1px 8px 3px;
+    margin: 0 3px 3px 0;
+    border-radius: 6px;
+}
+
+.soon {
+    background: #ff6600;
+    color: #fff;
+    text-align: center;
+	font-variant: small-caps;
+	font-weight: bold;
+    padding: 1px 8px 3px;
+    margin: 0 3px 3px 0;
+    border-radius: 6px;
+}
+
+.removed {
+    background: #ff0000;
+    color: #fff;
+    text-align: center;
+	font-variant: small-caps;
+	font-weight: bold;
+    padding: 1px 8px 3px;
+    margin: 0 3px 3px 0;
+    border-radius: 6px;
+}

data/_sass/_code.scss

@@ -0,0 +1,236 @@
+// Code blocks and syntax highlighting
+
+/* Applies to inline `code blocks` */
+.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) {
+    background-color: #212c2d;
+	color: $code-dark;
+	}
+}
+
+/* Applies to all code */
+pre, code {
+    font-size: 14px;
+    font-family: $code-font-family;
+    font-style: normal;
+
+    font-feature-settings: "kern" off;
+    font-kerning: none;
+    font-variant: none;
+
+    background-color: #eef;
+
+    ::selection {
+        color: $code-bg;
+        background: #bdbdb3;
+    }
+
+    ::-moz-selection {
+        color: $code-bg;
+        background: #bdbdb3;
+    }
+
+    ::-webkit-selection {
+        color: $code-bg;
+        background: #bdbdb3;
+    }
+}
+
+/* Inline code, no highlight */
+code {
+    padding: 2px 4px;
+    border-radius: 3px;
+
+    white-space: nowrap;
+}
+
+blockquote code {
+    color: #656565;
+}
+
+/* Inline code, highlight */
+code.highlight {
+    border-radius: 3px;
+
+    color: #bdbdb3;
+    background-color: $code-bg;
+}
+
+/* Block code, no highlight */
+pre {
+    border-radius: 5px;
+    margin: 30px * 0.75 30px / 2;
+    padding: 15px 17px;
+    overflow-x: auto;
+    background-color: #f1f1ff;
+
+    code {
+        border: 0;
+        padding: 0;
+
+        white-space: pre;
+    }
+}
+
+/* Block code, highlight */
+figure.highlight, div.highlight {
+    position: relative;
+
+    pre {
+        background-color: $code-bg;
+		border: 1px solid $code-light;
+	    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;
+
+            counter-reset: code;
+            display: block;
+            line-height: 1.5;
+
+            /* Display language name */
+            &[data-lang]::before {
+                content: attr(data-lang);
+                position: absolute;
+                right: 20px; // 15 + 5
+
+                font-size: 16px;
+                top: -12px;
+				padding: 0px 7px;
+				text-transform: uppercase;
+				font-weight: bold;
+
+                border: 1px solid $code-light;
+                border-top-left-radius: 15px;
+                border-top-right-radius: 15px;
+                border-bottom-left-radius: 15px;
+                border-bottom-right-radius: 15px;
+
+                min-width: 30px;
+                text-align: center;
+
+                color: $code-light;
+                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;
+				}
+			}
+
+                @include media-query(300px) {
+                    visibility: hidden;
+                }
+            }
+
+            div {
+                counter-increment: code;
+
+                /* Line numbers */
+                &::before {
+                    color: #608079;
+                    content: counter(code);
+
+                    width: 14px;
+                    text-align: right;
+
+                    /* Add a nice border */
+                    display: inline-block;
+                    padding-right: 30px / 4;
+                    margin-right: 30px * 0.4;
+                    border-right: 1px solid #656565;
+
+                    /* For older browsers and Safari */
+                    -webkit-touch-callout: none;
+                    -webkit-user-select: none;
+                    -khtml-user-select: none;
+                    -moz-user-select: none;
+                    -ms-user-select: none;
+                    user-select: none;
+                }
+            }
+        }
+    }
+}
+
+/* Hide language */
+.hide-lang + figure code::before {
+    visibility: hidden;
+}
+
+/**
+ * Language-specific settings
+ */
+
+.language-liquid {
+    .p {
+        color: #6aaf50;
+    }
+}
+
+/**
+ * ID-specific overrides
+ */
+
+#c-example + figure {
+    .kt {
+        color: #5180b3;
+    }
+}
+
+#liquid-example + figure {
+    .p {
+        color: #bdbdb3;
+    }
+}
+
+#borders-example + figure {
+    div {
+        &::before {
+            padding-left: 0.625em;
+            border-left: 1px solid #656565;
+        }
+
+        &:first-of-type::before {
+            padding-top: 0.25em;
+            border-top: 1px solid #656565;
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+        }
+
+        &:last-of-type::before {
+            padding-bottom: 0.25em;
+            border-bottom: 1px solid #656565;
+            border-bottom-left-radius: 4px;
+            border-bottom-right-radius: 4px;
+        }
+    }
+}
+
+#yaml-example + figure {
+    .na, .s {
+        color: #ab75c3;
+    }
+}
+
+.hl-1 + figure .line-1 {
+    background-color: #112b47;
+}