217 lines
9.8 KiB
HTML
217 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
|
||
<title>Introducing Indigo | Caffeinated Blog</title>
|
||
<meta name="description" content="Description of website for head meta tag">
|
||
<meta name="author" content="">
|
||
|
||
<link rel="apple-touch-icon" sizes="180x180" href=https://caffeinated.blog/apple-touch-icon.png>
|
||
<link rel="icon" type="image/png" sizes="32x32" href=https://caffeinated.blog/favicon-32x32.png>
|
||
<link rel="icon" type="image/png" sizes="16x16" href=https://caffeinated.blog/favicon-16x16.png>
|
||
<link rel="manifest" href=https://caffeinated.blog/site.webmanifest>
|
||
<link rel="mask-icon" href=https://caffeinated.blog/safari-pinned-tab.svg color="#00416a">
|
||
<meta name="msapplication-TileColor" content="#00aba9">
|
||
<meta name="theme-color" content="#ffffff">
|
||
|
||
|
||
<link rel="me" href="https://github.com/glennrice">
|
||
|
||
<link rel="me" href="https://micro.blog/glennr">
|
||
|
||
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||
|
||
<link rel="stylesheet" href=https://caffeinated.blog/css/fonts.css />
|
||
<link rel="stylesheet" href=https://caffeinated.blog/css/style.css />
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
</head>
|
||
|
||
<body>
|
||
<div id="sitelogo">
|
||
<a class="glyph" alt="Home" href="https://caffeinated.blog/"><img src=https://caffeinated.blog/images/site-logo.png alt="Site Logo" height="64px" width="64px"></a>
|
||
</div>
|
||
<header>
|
||
<nav>
|
||
|
||
<div id="page-nav">
|
||
<div class="page-nav-item">
|
||
<a href="https://caffeinated.blog/">Home</a>
|
||
</div>
|
||
|
||
<div class="page-nav-item">
|
||
<a href="/about/">
|
||
|
||
<span>About The Theme</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="page-nav-item">
|
||
<a href="/adding-menu-items/">
|
||
|
||
<span>Adding Page Items</span>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</nav>
|
||
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div id="content">
|
||
<article class="h-entry">
|
||
<header>
|
||
<h1 class="post-title p-name">Introducing Indigo</h1>
|
||
|
||
<p class="post-date">Posted on
|
||
<time class="dt-published" datetime="2018-10-01T09:00:00-04:00">
|
||
1 October, 2018 at 09:00 -0400
|
||
</time> by <a href="https://caffeinated.blog/" class="p-author h-card" rel="author">Glenn Rice</a>
|
||
</p>
|
||
|
||
|
||
<p class="post-tag">Category:
|
||
|
||
<a href="https://caffeinated.blog/categories/meta" class="post-tag p-category">meta</a>
|
||
|
||
</p>
|
||
<hr class="post-underline">
|
||
|
||
</header>
|
||
<section class="content e-content">
|
||
<p>Indigo is a lightweight theme for <a href="https://gohugo.io">Hugo</a> with <a href="https://indieweb.org">IndieWeb</a> features baked in. It’s great for longer-form blogging, placing its focus on distraction-free reading and beautiful typefaces.</p>
|
||
<h2 id="indieweb-features">IndieWeb features</h2>
|
||
<p>A key feature of this theme is its support for IndieWeb features, including microformats and web sign-in.</p>
|
||
<h3 id="web-sign-in">Web sign-in</h3>
|
||
<p>Indigo handles web sign-in by setting the <code>authorization_endpoint</code> to <a href="https://indieauth.com">IndieAuth.com</a>:</p>
|
||
<blockquote>
|
||
<p>IndieAuth.com is part of the <a href="https://indieweb.org/why">IndieWeb movement</a> to take back control of your online identity. Instead of logging in to websites as “you on Twitter” or “you on Facebook”, <strong>you should be able to log in as just “you”</strong>.</p>
|
||
</blockquote>
|
||
<p>This allows you to sign in to certain services simply by providing your site’s domain name.</p>
|
||
<h3 id="microformats">microformats</h3>
|
||
<p>Indigo marks up content with appropriate <a href="http://microformats.org">microformats</a>, which provides semantic definitions of your content to other software. Posts are marked up with <code>h-entry</code> classes, like <code>p-name</code>, <code>p-author</code>, and <code>e-content</code>, while the author bio is marked up with <code>h-card</code> classes, including <code>u-photo</code>, <code>u-url</code>, <code>p-locality</code>/<code>p-country-name</code>, and <code>p-note</code>.</p>
|
||
<h2 id="open-typefaces">Open typefaces</h2>
|
||
<p>Indigo uses a combination of three beautiful typefaces to render your words.</p>
|
||
<ul>
|
||
<li><a href="https://bboxtype.com/typefaces/FiraSans/#!layout=specimen">Fira Sans</a> for heading text</li>
|
||
<li><a href="https://practicaltypography.com/charter.html">Charter</a> for body text</li>
|
||
<li><a href="https://github.com/tonsky/FiraCode">Fira Code</a> for monospaced text</li>
|
||
</ul>
|
||
<p>Licenses are included in the theme’s <code>static/fonts</code> folder.</p>
|
||
<p>Have a look at a couple of paragraphs of placeholder text using the wonderfully readable Charter:</p>
|
||
<hr>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend nulla ac elit venenatis posuere. Sed id aliquam arcu, et malesuada lectus. <strong>Donec et dignissim massa. Pellentesque in laoreet nibh. Pellentesque sagittis, libero quis vestibulum aliquam, ante risus imperdiet magna, at ornare dolor libero quis nunc.</strong> Donec quis tempus purus. Cras ornare magna ac facilisis tristique. Nulla aliquet purus quis massa rutrum interdum ac at magna. Cras fermentum magna id orci viverra facilisis. Ut vitae lobortis nisl.</p>
|
||
<p>Sed interdum tincidunt venenatis. Sed hendrerit dictum nisi, at dignissim orci consectetur quis. Aenean sed nisl et nisl placerat euismod. Proin hendrerit nulla at rhoncus molestie. Cras eu gravida erat, vestibulum ornare diam. <em>Praesent nunc arcu, ultrices et risus sed, dictum mattis dui. Maecenas vitae nisl at massa porta pellentesque</em>. Donec eget urna eget nisl imperdiet scelerisque eget a mauris. Nam fringilla sem id vehicula rhoncus. Curabitur tincidunt massa mauris, facilisis placerat odio eleifend sit amet. Etiam nec vehicula sapien, at dignissim risus. Sed elit erat, lacinia eu vulputate at, semper eu nulla. Quisque a urna sed nulla viverra egestas nec quis nunc. Curabitur iaculis elit in orci sollicitudin suscipit.</p>
|
||
<hr>
|
||
<p>And code snippets look great with Fira Code:</p>
|
||
<pre><code><article>
|
||
<header>
|
||
{{ if .Title }}
|
||
<h2 class="list-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||
{{ end }}
|
||
<p class="list-post-date">
|
||
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
|
||
{{ .PublishDate.Format "2 January, 2006 at 15:04 MST" }}
|
||
</time>
|
||
</p>
|
||
</header>
|
||
<div>
|
||
{{ .Summary | plainify | safeHTML }}
|
||
</div>
|
||
{{ if .Truncated }}
|
||
<p><a class="read-more" href="{{ .Permalink }}">Read more &rarr;</a></p>
|
||
{{ end }}
|
||
</article>
|
||
</code></pre><h2 id="contributions-welcome">Contributions welcome</h2>
|
||
<p>Indigo is distributed under the <a href="https://github.com/AngeloStavrow/indigo/blob/master/LICENSE.md">MIT license</a>, so feel free to fork the repository and make it your own! If you’ve got ideas on how to improve the theme, let me know by <a href="issue">opening an issue in GitHub</a> — but please be sure to review the documentation on <a href="https://github.com/AngeloStavrow/indigo/blob/master/CONTRIBUTING.md">contributing</a>.</p>
|
||
</section>
|
||
<footer>
|
||
<a class="permalink u-url" href="https://caffeinated.blog/post/introducing-indigo/">🔗</a>
|
||
|
||
<hr class="post-underline">
|
||
<p class="post-tag">Tags for this post:
|
||
|
||
<a href="https://caffeinated.blog/tags/typography" class="post-tag p-category">typography</a>
|
||
|
||
<a href="https://caffeinated.blog/tags/indieweb" class="post-tag p-category">indieweb</a>
|
||
|
||
</p>
|
||
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
<div class="h-card">
|
||
<img class="u-photo" src="https://caffeinated.blog/images/myAvatar.svg" />
|
||
<div class="card-content">
|
||
<h2 class="card-name"><a class="p-name u-url" href="https://caffeinated.blog/" rel="me">Glenn Rice</a></h2>
|
||
<p class="card-subhead">
|
||
<span class="p-locality"></span>,
|
||
<span class="p-country-name">Australia</span><br />
|
||
<a class="u-email" href="mailto:">Email me</a>
|
||
</p>
|
||
</div>
|
||
<p class="p-note">A short description, a few sentences describing the author. Set the 'ShowBio' parameter to false to hide this.</p>
|
||
</div>
|
||
|
||
<div id="footer">
|
||
|
||
<nav id="article-skip">
|
||
<div class="next">
|
||
|
||
<p> </p>
|
||
|
||
</div>
|
||
<div class="top">
|
||
<a alt="Top of page" href="#">Top</a>
|
||
</div>
|
||
<div class="prev">
|
||
|
||
<a alt="Older article" href="https://caffeinated.blog/post/featured-typefaces/">Older →</a>
|
||
|
||
</div>
|
||
</nav>
|
||
|
||
<aside id="social">
|
||
<div id="social-icons">
|
||
|
||
|
||
|
||
|
||
<div class="icon-24x24">
|
||
<a class="glyph" alt="GitHub profile" href="https://github.com/glennrice"><img src=https://caffeinated.blog/icons/github.svg height="24px" width="24px"></a>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div class="icon-24x24">
|
||
<a class="glyph" alt="Keybase profile" href="https://keybase.io/glennr"><img src=https://caffeinated.blog/icons/keybase.svg height="24px" width="24px"></a>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</aside>
|
||
|
||
|
||
<p class="copyright">
|
||
Copyright © 2019, Glenn Rice
|
||
</p>
|
||
|
||
</div>
|
||
|
||
|
||
</body>
|
||
</html>
|