This is the style guide used for my blog.
Colors
Theme
Primary Color
#a8a5ffBackground Color
#121212Header Text
#e2dfffSubheader Text
#e9ecefText Color
#e3e3e8Link Color
#4dabf7Typography
Font is preloaded and optimized with font-display: optional;
Typeface
- Sans-serif
- Sans-serif decorative font
Hanken Grotesk - Serif Font
- Serif decorative font
Hanken Grotesk
--ff-sans-serif: "Hanken Grotesk", sans-serif; --ff-serif: "PT Serif", serif;Hanken Grotesk - ExtraLight
PT Serif - Bold
Hanken Grotesk - Normal
Hanken Grotesk - Bold
Links
Anchor tags decorated with text-decoration-skip-ink: auto.
<a class='link'>Peter Piper</a>Link Usage
[Some link](https://example.com){.link}Headings
Uses counter-increment & counter-reset for post section headers.
Main
Main header <h1>
Heading 1
Main logo headingH1 Usage
# Main HeaderSection
Section headers <h2>, displays horizontal divider
Heading 2
Section heading for contentH2 Anchor
Anchors are underlined on hoverH2 Usage
## Section HeaderSubsection
Subsection headers <h3>
Subheading <h3> tags are associated with their parent heading <h2>.
Heading
Section sub headingH3 Anchor
Anchors are underlined on hoverH3 Usage
### Subsection HeaderSubsubsection
Subsubsection headers <h4>
Subsubsection <h4> tags are associated with their parent heading <h3>.
Heading
Section sub headingH3 Anchor
Anchors are underlined on hoverH4 Usage
#### Subsubsection HeaderCallouts
Blockquotes
Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tip
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Warn
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Important
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lists
Displaying Posts
Renders <li> elements that are direct children of the div#posts element.
Recent Article Title
With a sample descriptionRecent Article Title
With a second sample description
Codeblocks
Example
Syntax highlighting colors
const { DateTime } = require('luxon');
const fs = require('fs');
const pluginRss = require('@11ty/eleventy-plugin-rss');
const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
const pluginNavigation = require('@11ty/eleventy-navigation');
const markdownIt = require('markdown-it');
const markdownItAnchor = require('markdown-it-anchor');
const pluginTOC = require('eleventy-plugin-toc');
module.exports = function (eleventyConfig) {
// Add plugins
eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(pluginSyntaxHighlight);
eleventyConfig.addPlugin(pluginNavigation);
eleventyConfig.addPlugin(pluginTOC, {
tabIndex: false,
tags: ['h2', 'h3'],
wrapper: 'nav',
wrapperClass: 'toc',
flat: false,
});
// https://www.11ty.dev/docs/data-deep-merge/
eleventyConfig.setDataDeepMerge(true);Footer
Speedlify
Renders web vitals with Speedlify Score
Tags
Content Tagging
Renders list of tags from post metadata.