From 9f487fb027a3810503f9e5353f73a790867e6414 Mon Sep 17 00:00:00 2001 From: Cassie Jones Date: Mon, 11 Nov 2019 23:37:37 -0500 Subject: [PATCH] Minify inline CSS, move syntax colors to bottom of page This improves both maintainability and performance because the CSS can be written out-of-line, and then get inserted and minified. The stylesheet tag for the syntax colors got moved to the bottom of the page, because CSS in the head tag blocks rendering until it's loaded. Inside the body is dependent on browsers, but they all support it and in the worst case you just get the original blocking behavior. --- .eleventy.js | 3 ++ _includes/layouts/layout.njk | 39 ++++---------------- _includes/style.css | 69 ++++++++++++++++++++++++++++++++++++ package.json | 1 + static/prism.css | 18 ---------- 5 files changed, 79 insertions(+), 51 deletions(-) create mode 100644 _includes/style.css diff --git a/.eleventy.js b/.eleventy.js index 896b73f..3a95329 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -3,11 +3,14 @@ const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const Nunjucks = require("nunjucks"); const dateFilter = require("nunjucks-date-filter"); const md = require("markdown-it")(); +const CleanCSS = require("clean-css"); module.exports = (eleventyConfig) => { eleventyConfig.addNunjucksFilter('date', dateFilter); eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginSyntaxHighlight); + eleventyConfig.addFilter("cssmin", code => + new CleanCSS({}).minify(code).styles); eleventyConfig.addPassthroughCopy("img"); eleventyConfig.addPassthroughCopy("static"); diff --git a/_includes/layouts/layout.njk b/_includes/layouts/layout.njk index ee09536..a7f77a8 100644 --- a/_includes/layouts/layout.njk +++ b/_includes/layouts/layout.njk @@ -33,38 +33,8 @@ - - + {% set css %}{% include "style.css" %}{% endset %} +

@@ -79,11 +49,14 @@ aside.warning { background: #ffecbf; } A collection of Cassie's harebrained schemes.

- {{ content | safe }} +

+ {{ content | safe }} +

+ diff --git a/_includes/style.css b/_includes/style.css new file mode 100644 index 0000000..84cbbad --- /dev/null +++ b/_includes/style.css @@ -0,0 +1,69 @@ +/* Basic reset */ +* { box-sizing: border-box; } + +/* Page structure */ +html { font-size: 1.4em; line-height: 1.5; color: #444; } +body { padding: 1em; max-width: 700px; margin: 0 auto; min-height: 100vh; } +header { margin-bottom: 1em; } +footer { margin-top: 1em; } + +/* Typography */ +h1 { margin: 0; } +h1, h2, h3, h4, h5, h6 { margin-bottom: 0; } +/* Links */ +.c-sun { color: #f78123; } +.dec-none { text-decoration: none; } + +blockquote { + border-left: solid 10px #bbb; + padding-left: 1em; + margin-left: 1em; + font-style: italic; +} + +/* Figures */ +/* @TODO: Make this width managing simpler? */ +img { max-width: 800px; border-radius: 4px; } +@media (max-width: 825px) { img { max-width: calc(100vw - 1em); } } +figure { margin: 0; } +figcaption > :first-child, aside > :first-child { margin-top: 0; } +figcaption > :last-child, aside > :first-child { margin-bottom: 0; } +figcaption { font-style: italic; } + +aside { + border: 1px solid black; + padding: 0.75em; + margin: -0.5em; + border-radius: 4px; +} +aside.warning { background: #ffecbf; } + +/* Layout classes */ +.dim { color: #666; } +.row { display: flex; flex-direction: row; } +.col { display: flex; flex-direction: column; } +.hgroup { display: flex; flex-direction: row; } +@media (max-width: 500px) { .hgroup { flex-direction: column; } } +.row.hcenter { justify-content: center; } +.col.hcenter { align-items: center; } +.baseline { align-items: baseline; } +.spacer { flex-grow: 1; } +.ls-none { list-style: none; padding: 0; margin: 0; } + +/* Barebones un-highlighted code blocks */ +pre > code { + overflow: auto; + width: calc(100% + 8em); + margin: 0 -4em; + display: inline-block; + max-width: 100vw; + font-size: 18px; + box-sizing: border-box; + padding: 1em; + border-radius: 6px; + background: #f5f2f0; +} + +@media (max-width: calc(700px + 9em)) { + pre > code { margin: 0 -1em; width: calc(100% + 2em); } +} diff --git a/package.json b/package.json index 840ef9e..c52e3ad 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@11ty/eleventy": "^0.9.0", "@11ty/eleventy-plugin-rss": "^1.0.7", "@11ty/eleventy-plugin-syntaxhighlight": "file:../../oss/eleventy-plugin-syntaxhighlight", + "clean-css": "^4.2.1", "markdown-it": "^8.4.2", "nunjucks-date-filter": "^0.1.1" }, diff --git a/static/prism.css b/static/prism.css index fd20c9c..3edcaef 100644 --- a/static/prism.css +++ b/static/prism.css @@ -41,24 +41,6 @@ pre::selection, pre ::selection, code::selection, code ::selection { } } -/* Code blocks */ -pre > code { - overflow: auto; - width: calc(100% + 8em); - margin: 0 -4em; - display: inline-block; - max-width: 100vw; - font-size: 18px; - box-sizing: border-box; - padding: 1em; - border-radius: 6px; - background: #f5f2f0; -} - -@media (max-width: calc(700px + 9em)) { - pre > code { margin: 0 -1em; width: calc(100% + 2em); } -} - /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; -- 2.47.0