v1.4.0

victorwynne · Jan 2, 2022 · d61c636 · d61c636
1 parent 9a66650
commit d61c636
Show file tree

Hide file tree

Showing 20 changed files with 289 additions and 218 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Victor Wynne
+Copyright (c) 2019-2022 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

diff --git a/_config.yml b/_config.yml
@@ -44,6 +44,6 @@ author:
   email: [email protected]
 
 # Custom vars
-version: 1.3.0
+version: 1.4.0
 github:
   repo: https://github.com/victorwynne/quattle
diff --git a/_includes/head.html b/_includes/head.html
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,7 +5,27 @@
 <!doctype html>
 <html lang="en">
 
-  {% include head.html %}
+<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>
 
   <body>
 

diff --git a/_posts/2021-12-27-v1-3-0.md b/_posts/2021-12-27-v1-3-0.md
diff --git a/_posts/2021-12-27-v1-4-0.md b/_posts/2021-12-27-v1-4-0.md
@@ -0,0 +1,21 @@
+---
+layout: post
+title:  "v1.4.0 Now Available"
+date:   2021-01-01
+categories: [Announcements]
+tags: [jekyll, development, news, life]
+link: https://github.com/victorwynne/quattle/releases/tag/v1.4.0-RC
+---
+
+## <small>Download</small>
+[GitHub](https://github.com/victorwynne/quattle/releases) or [RubyGems](https://rubygems.org/gems/quattle)<br>
+
+## <small>Changelog for v1.4.0</small>
+
+**Fixed:** various inconsistencies for `$variables` across color schemes
+
+**Changed:** moved `head.html` inside of the `default.html` layout file instead. This single change cut build times on a test site with 150 pages and 500 posts by **32%!**
+
+**Improved:** further refinements to visual elements for both light and dark mode
+
+**Improved:** code blocks are now styled differently depending on color scheme
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -1,5 +1,3 @@
-// Body
-
 * {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
@@ -23,8 +21,8 @@ html {
 }
 
 body {
-  color: $body-color;
-  background-color: $body-bg;
+  color: $text;
+  background-color: $bg;
   -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
 

diff --git a/_sass/_buttons.scss b/_sass/_buttons.scss
@@ -1,14 +1,13 @@
-// 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;
+    padding: 2px 9px 4px;
+    margin: 0 7px 7px 0;
     border-radius: 6px;
+    border: 1px solid #5bc8f9;
 }
 
 .improved {
@@ -17,9 +16,10 @@
     text-align: center;
 	font-variant: small-caps;
 	font-weight: bold;
-    padding: 1px 8px 3px;
-    margin: 0 3px 3px 0;
+    padding: 2px 9px 4px;
+    margin: 0 7px 7px 0;
     border-radius: 6px;
+    border: 1px solid #5bc8f9;
 }
 
 .fixed {
@@ -28,9 +28,10 @@
     text-align: center;
 	font-variant: small-caps;
 	font-weight: bold;
-    padding: 1px 8px 3px;
-    margin: 0 3px 3px 0;
+    padding: 2px 9px 4px;
+    margin: 0 7px 7px 0;
     border-radius: 6px;
+    border: 1px solid #5bc8f9;
 }
 
 .soon {
@@ -39,9 +40,10 @@
     text-align: center;
 	font-variant: small-caps;
 	font-weight: bold;
-    padding: 1px 8px 3px;
-    margin: 0 3px 3px 0;
+    padding: 2px 9px 4px;
+    margin: 0 7px 7px 0;
     border-radius: 6px;
+    border: 1px solid #5bc8f9;
 }
 
 .removed {
@@ -50,7 +52,8 @@
     text-align: center;
 	font-variant: small-caps;
 	font-weight: bold;
-    padding: 1px 8px 3px;
-    margin: 0 3px 3px 0;
+    padding: 2px 9px 4px;
+    margin: 0 7px 7px 0;
     border-radius: 6px;
+    border: 1px solid #5bc8f9;
 }
diff --git a/_sass/_code.scss b/_sass/_code.scss
@@ -1,19 +1,19 @@
-// Code blocks and syntax highlighting
+// Inline code, code blocks and syntax highlighting
 
 /* Applies to inline `code blocks` */
 .highlighter-rouge {
     font-family: $root-font-family;
 	font-size: 100%;
 	padding: 4px 4px;
-    background-color: #212c2d;
-    color: $code;
+    background-color: $code-inline-bg;
+    color: $code-inline;
 	white-space: nowrap;
-    border: 1.5px solid $code;
+    border: 1.5px solid $code-inline;
     border-radius: .25em;
 
     @media (prefers-color-scheme: light) {
-        color: $light-scheme-text;
-        background-color: #F8F8F8;
+        color: $code-inline-light;
+        background-color: $code-inline-bg-light;
         border: 1.5px solid #D2D2D2;
         }
 }
@@ -31,19 +31,24 @@ pre, code {
     background-color: #eef;
 
     ::selection {
-        color: $code-bg;
+        color: $code-block-bg;
         background: #bdbdb3;
     }
 
     ::-moz-selection {
-        color: $code-bg;
+        color: $code-block-bg;
         background: #bdbdb3;
     }
 
     ::-webkit-selection {
-        color: $code-bg;
+        color: $code-block-bg;
         background: #bdbdb3;
     }
+
+    @media (prefers-color-scheme: light) {
+        background-color: $code-block-bg-light;
+}
+
 }
 
 /* Inline code, no highlight */
@@ -63,7 +68,7 @@ code.highlight {
     border-radius: 3px;
 
     color: #bdbdb3;
-    background-color: $code-bg;
+    background-color: $code-block-bg;
 }
 
 /* Block code, no highlight */
@@ -87,32 +92,41 @@ figure.highlight, div.highlight {
     position: relative;
 
     pre {
-        background-color: $code-bg;
-		border: 1px solid $code;
-	    border-radius: 15px;
+        background-color: $code-block-bg;
+		border: 1.5px solid $code-block-accent;
+	    border-radius: 20px;
 		box-shadow: 0 4px 30px rgba(0,0,0,.4);
+
+        @media (prefers-color-scheme: light) {
+                background-color: $code-block-bg-light;
+                border: 1.5px solid $code-block-accent-light;
+        }
 
         code {
-            background-color: $code-bg;
-            color: #bdbdb3;
+            background-color: $code-block-bg;
+            color: #babaad;
 
             counter-reset: code;
             display: block;
-            line-height: 1.5;
+            line-height: 1.6;
+
+            @media (prefers-color-scheme: light) {
+                    background-color: $code-block-bg-light;
+            }
 
             /* Display language name */
             &[data-lang]::before {
                 content: attr(data-lang);
                 position: absolute;
-                right: 20px; // 15 + 5
+                right: 20px;
 
-                font-size: 16px;
-                top: -12px;
-				padding: 0px 7px;
+                font-size: 15px;
+                top: -14px;
+				padding: 2px 9px;
 				text-transform: uppercase;
 				font-weight: bold;
 
-                border: 1px solid $code;
+                border: 1px solid $code-block-accent;
                 border-top-left-radius: 15px;
                 border-top-right-radius: 15px;
                 border-bottom-left-radius: 15px;
@@ -121,8 +135,14 @@ figure.highlight, div.highlight {
                 min-width: 30px;
                 text-align: center;
 
-                color: $code;
-                background-color: $code-bg;
+                color: $code-block-accent;
+                background-color: $code-block-bg;
+
+                @media (prefers-color-scheme: light) {
+                border: 1px solid $code-block-accent-light;
+                color: $code-block-accent-light;
+                background-color: $code-block-bg-light;
+                }
 
 				@mixin media-query($device) {
 				@media screen and (max-width: $device) {

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -1,5 +1,3 @@
-// Site structure
-
 .container {
   max-width: 38rem;
   padding-left:  1.5rem;

diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss
@@ -1,6 +1,4 @@
-// Masthead
-//
-// The style of the site's title and optional secondary description.
+// The style of the site's title, secondary description and navigation
 
 .masthead {
   padding-top:    1rem;
@@ -12,7 +10,7 @@
 .masthead-title {
   margin-top: 0;
   margin-bottom: 20px;
-  color: $body-color;
+  color: $text;
   position: relative;
   text-align: center;
   padding-left: 0px;