Add support for favicons

See https://favicon.io/favicon-converter for generating a favicon and
the link references to add to the `head` of the HTML template.

README.md

@@ -1,19 +1,17 @@
-# A Basic Hugo Theme
+# A Hugo Theme Using HTML5 Semantics and IndieWeb Integration
 
-While the official documentation about Hugo [Templates](https://gohugo.io/templates/) 
-does provide all of the pieces to get started creating a theme, it doesn't
-necessarily put them together in one, easy-to-see-together place. This theme
-attempts to pull all of the necessary pieces together into a theme that can be
-used as a starting point to create more sophisticated themes.
+This theme is a fork of [My Basic Theme](https://git.thecorams.net/kevin/basic-theme),
+adding additional HTML5 semantics, a more responsive site design, and
+[IndieWeb](https://indieweb.org/) [microformats](http://microformats.org/wiki/Main_Page).
 
 ## Getting Started
 
-Follow the [Hugo Quickstart](https://gohugo.io/getting-started/quick-start/) 
+Follow the [Hugo Quickstart](https://gohugo.io/getting-started/quick-start/)
 instructions on how to install Hugo, create a site, and install a theme.
 Installing the theme as a git submodule is the preferred way.
 
 ```
-git add submodule https://git.thecorams.net/kevin/basic-theme.git themes/basic-theme
+git submodule add https://git.thecorams.net/kevin/semantic-indieweb.git themes/semantic-indieweb
 ```
 
 ### Example Site
@@ -26,19 +24,16 @@ cd exampleSite
 hugo serve [ -D ] --themesDir ../..
 ```
 
-Most of the sample posts are intentionally set `draft: true` to allow for 
+Most of the sample posts are intentionally set `draft: true` to allow for
 testing few posts vs many posts.
 
 ## Configuration
 
-As a very basic theme, there is very little to be configured via the `config.toml` 
-file.
-
-The footer layout file uses Hugo's `markdownify` pipe to display the `copyright` 
+The footer layout file uses Hugo's `markdownify` pipe to display the `copyright`
 configuration setting, providing support both for HTML character escape
 sequences such as `©` as well as markdwn formatting and links.
 
-Note: Hugo versions 0.60.0 and up will have restrictions on using embedded HTML, 
+Note: Hugo versions 0.60.0 and up will have restrictions on using embedded HTML,
 including escape secquences, unless the Goldmark renderer is configure with
 `unsafe = true`.
 
@@ -63,6 +58,112 @@ homepage.
 
 ```
 
+### IndieWeb / IndieAuth Identities
+
+The theme includes support for adding `rel="me"` links to the HTML head of
+every page. Such links help tie together the sites one owns, as well as
+provide support for [IndieAuth](https://www.w3.org/TR/indieauth/)
+authentication.
+
+These links can be configured by including one or more `params.Identity`
+blocks:
+
+```toml
+  [[params.Identity]]
+    type = "some-type"
+    value = "identity"
+    authn = false
+```
+
+The current set of known types are:
+
+- Email
+  - The `value` should be a valid e-mail address which could be used for
+    IndieAuth authentication
+- GitHub
+  - The `value` should be a valid GitHub user name
+- GitLab
+  - The `value` should be a valid GitLab user name
+- Twitter
+  - The `value` should be a valid Twitter user name
+- MicroBlog
+  - The `value` should be a valid MicroBlog user name
+- PGP
+  - The `value` should be a valid URL to the site owner's public PGP key
+
+The IndieAuth standard allows the site author to specify which of the
+`rel="me"` links should be preferred for authentication. If the `authn`
+parameter for an identity is set to `true`, the link will be generated
+as `rel="me authn"`. As explained on
+[https://indielogin.com/setup](https://indielogin.com/setup):
+
+> If any of your `rel="me"` links also include `authn` in the list of rels,
+> then IndieLogin.com will only use the links with `authn`, and will no longer
+> consider your plain `rel="me"` links as authentication options.
+
+### IndieWeb h-card
+
+The theme includes a "card" for displaying the site author's photo (or a logo
+image for the site), the author's name, and the author's rough location. The
+data in the card is marked up with [h-card](http://microformats.org/wiki/h-card)
+microformats, for integration with IndieWeb-aware sites and tools.
+
+```toml
+  # Configuration Parameters for IndieWeb h-card
+  [params.Card]
+    Author = "Site Author Name"
+    Photo = "images/picture-o.svg"
+    Locality = "City/Town/Village"
+    Region = "State/County/Province"
+    Country = "Country Name"
+```
+
+#### Social Network Links
+
+The theme will render a ribbon of icon links to other sites beneath the
+author's location information. The theme comes bundled with 
+[Fork Awesome v1.1.7](https://forkaweso.me/Fork-Awesome/). Any of the icons
+provided by Fork Awesome can easily be used. For example, to add a link to
+one's Twitter profile, add a configuration block that uses the Fork Awesome
+twitter icon:
+
+```toml
+  [[params.Social]]
+    profile = "https://twitter.com/twitter-user-name"
+    icon = "fa fa-twitter"
+```
+
+The icon/font library being used can be overriden by creating a site-specific
+`icons.html` partial. Font Awesome, Fork Awesome, Fontello, and many other
+icon/font libraries all support embedding an icon using similar CSS class names,
+which can be used in the `icon = "...."` configuration.
+
+In addition to the `profile` and `icon` pairs, there is also support for e-mail
+links and PGP key file links with the PGP fingerprint as a toolip:
+
+```toml
+  [[params.Social]]
+    email = "email@example.com"
+    icon = "fa fa-envelope-o"
+
+  [[params.Social]]
+    publicKey = "pgp_key_file.txt"
+    fingerprint = "AAAA BBBB CCCC DDDD"
+    icon = "fa fa-key"
+```
+
+### Configuring Webmentions
+
+[Webmention](https://www.w3.org/TR/webmention/) and/or 
+[Pingback](http://www.hixie.ch/specs/pingback/pingback) support can easily be
+configured by including the endpoint URL:
+
+```toml
+  [params]
+    Webmention = "https://example.org/webmention"
+    Pingback = "https://example.org/pingpack"
+```
+
 ## Theme Organization
 
 ### Semantic Content Organization
@@ -117,7 +218,7 @@ If the content pages use `##` as their largest heading, this will result
 in document outlines structured as:
 
 1. Site Title
-   1. Site Sub-title 
+   1. Site Sub-title
 2. Content Title
    1. Header from Content
       1. Sub-header from content
@@ -125,7 +226,7 @@ in document outlines structured as:
 
 ### Hugo Templating
 
-The template layout files make heavy use of Hugo's 
+The template layout files make heavy use of Hugo's
 [base and block constructs](https://gohugo.io/templates/base/), as can be seen
 in [baseof.html](layouts/_default/baseof.html).
 
@@ -140,7 +241,7 @@ page.
 #### site-header
 
 This block is for providing a site banner that will appear at the top of every page,
-and matches with the primary `<header>...</header>` definition from the semantic 
+and matches with the primary `<header>...</header>` definition from the semantic
 organization, above.
 
 The default site-header block displays the [header.html](layouts/partials/header.html)
@@ -159,8 +260,8 @@ partial.
 
 This block is for providing a header for the specific page, matching with the
 header block inside the `<main>....<\main>` definition from the semantic
-organization. The [list](layouts/_default/list.html) and 
-[single](layouts/_default/single.html) templates display the page title as 
+organization. The [list](layouts/_default/list.html) and
+[single](layouts/_default/single.html) templates display the page title as
 a `<h1>...</h1>` level header.
 
 #### content-menu
@@ -182,10 +283,10 @@ rendered inside an `<article>...</article>` block element.
 
 #### content-footer
 
-This block provides a footer for the page, which renders within the 
+This block provides a footer for the page, which renders within the
 `<footer></footer>` block at the end of the `<main></main>` section.
 
-The default content-footer blocks for the homepage and for list pages 
+The default content-footer blocks for the homepage and for list pages
 implement pagination controls to show the content summaries a page at a time.
 
 The default content-footer block for single pages displays previous and/or
@@ -207,7 +308,13 @@ partial.
 - [A Look Into Proper HTML5 Semantics](https://www.hongkiat.com/blog/html-5-semantics/amp/)
 - [HTML5 Semantic Tags: What Are They & How To Use Them! - SEMrush](https://www.semrush.com/blog/semantic-html5-guide/)
 
+### Responsive Design / CSS
+
+- [Realizing common layouts using CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
+- [Create a responsive layout with CSS Grid](https://www.creativebloq.com/how-to/create-a-responsive-layout-with-css-grid)
+- [Make the Perfect Responsive Grid with CSS](https://coder-coder.com/make-responsive-grid-css/)
+
 ## Acknowledgements
 
 - [Indigo Theme](https://github.com/AngeloStavrow/indigo)
-  - Inspiration for implementation of IndieWeb Identity hooks
+  - Inspiration for implementation of IndieWeb Identity hooks

exampleSite/config.toml

@@ -1,7 +1,7 @@
 baseURL = "http://example.org/"
 languageCode = "en-us"
 title = "Semantic IndieWeb Theme"
-copyright = "Copyright © 2019, Copyright Owner Name | Built with [Hugo](https://gohugo.io/)"
+copyright = "Copyright © 2019, Copyright Owner Name"
 theme = "semantic-indieweb"
 paginate = 5
 
@@ -10,8 +10,16 @@ paginate = 5
 
 [params]
   subtitle = "A theme with no CSS and only basic layouts"
+  builtWith = "Built with [Hugo](https://gohugo.io/)"
   homepageSectionTitle = "What's New"
   mainSections = [ "posts" ]
+  Webmention = "https://example.org/webmention"
+  Pingback = "https://example.org/pingpack"
+  Micropub = "https://example.org/micropub"
+
+  [params.IndieAuth]
+    Authorization = "https://example.org/auth"
+    Token = "https://example.org/token"
 
   # Configuration Parameters for IndieWeb h-card
   [params.Card]
@@ -47,11 +55,6 @@ paginate = 5
     value = "MicroBlogUserName"
     authn = false
 
-  [[params.Identity]]
-    type = "LinkedIn"
-    value = "LinkedInUserName"
-    authn = false
-    
   [[params.Identity]]
     type = "PGP"
     value = "pgp_key_file.txt"

layouts/_default/baseof.html

@@ -15,6 +15,18 @@
     {{ block "icons" . }}
     {{ partial "icons.html" . }}
     {{ end }}
+    {{ if (fileExists "static/apple-touch-icon.png") -}}
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    {{- end }}
+    {{ if (fileExists "static/favicon-32x32.png") -}}
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    {{- end }}
+    {{ if (fileExists "static/favicon-16x16.png") -}}
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    {{- end }}
+    {{ if (fileExists "static/site.webmanifest") -}}
+    <link rel="manifest" href="/site.webmanifest">
+    {{- end }}
 </head>
 
 <body>
@@ -23,35 +35,39 @@
         <!-- Code that all your templates share, like a header -->
         {{ partial "header.html" . }}
         {{- end }}
-        <nav>
+        <nav class="site-menu">
             {{ block "site-menu" . -}}
             {{ partial "site-menu.html" . }}
             {{- end }}
         </nav>
     </header>
-    <main {{ if eq .Kind "page" }}class="h-entry"{{ else if eq .Kind "section" }}class="h-feed"{{ end }}>
-        <header>
-            {{- block "content-header" . -}}
-            {{- end -}}
+    <main {{ if eq .Kind "page" }}class="h-entry"{{ else if in (slice "section" "taxonomy" "taxonomyTerm" ) .Kind  }}class="h-feed"{{ end }}>
+        <div class="content-box">
+            <header>
+                {{- block "content-header" . -}}
+                {{- end -}}
+            </header>
+            <section>
+                {{- block "content" . -}}
+                <!-- The part of the page that begins to differ between templates -->
+                {{ end }}
+            </section>
+            <footer>
+                {{- block "content-footer" . -}}
+                {{- end -}}
+            </footer>
+        </div>
+        <div class="asides-box">
+            <aside>
+                {{ block "author-card" . }}
+                {{ partial "author-card.html" . }}
+                {{ end }}
+            </aside>
             <nav>
                 {{- block "content-menu" . -}}
                 {{- end -}}
             </nav>
-        </header>
-        <section>
-            {{- block "content" . -}}
-            <!-- The part of the page that begins to differ between templates -->
-            {{ end }}
-        </section>
-        <footer>
-            {{- block "content-footer" . -}}
-            {{- end -}}
-        </footer>
-        <aside>
-            {{ block "author-card" . }}
-            {{ partial "author-card.html" . }}
-            {{ end }}
-        </aside>
+        </div>
     </main>
     <footer>
         {{- block "footer" . -}}
@@ -61,4 +77,4 @@
     </footer>
 </body>
 
-</html>
+</html> 

layouts/_default/list.html

@@ -1,9 +1,11 @@
-{{/* This will override the default value set in baseof.html; i.e., "{{.Site.Title}}" in the original example */}}
 {{ define "title" }}
 {{ .Title }} – {{ .Site.Title }}
 {{ end }}
 {{ define "content-header" }}
-<h1 class="p-name">{{ .Title }}</h1>
+<h1>
+    <span class="p-name">{{ .Title }}</span>
+    <a rel="alternate" type="application/rss+xml" href="index.xml"><i class="fa fa-rss"></i></a>
+</h1>
 {{ end }}
 {{ define "content" }}
 {{ if .Content }}
@@ -18,5 +20,6 @@
 {{ end }}
 {{ end }}
 {{ define "content-footer" }}
+{{ partial "webmentions.html" . }}
 {{ partial "paginator.html" .Paginator }}
 {{ end }}

layouts/_default/single.html

@@ -1,12 +1,10 @@
-{{/* This will override the default value set in baseof.html; i.e., "{{.Site.Title}}" in the original example */}}
 {{ define "title" }}
 {{ .Title }} – {{ .Site.Title }}
 {{ end }}
 {{ define "content-header" }}
 <h1 class="p-name u-url"><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
 <p>
-    Published by <a class="p-author h-card" href="{{ .Site.BaseURL }}">{{ .Site.Params.Card.Author }}</a> on
-    <time class="dt-published" datetime="{{ .Date }}">{{ .Date.Format "January 2, 2006" }}</time>
+    Published on <time class="dt-published" datetime="{{ .Date }}">{{ .Date.Format "January 2, 2006" }}</time>
 </p>
 {{ end }}
 {{ define "content" }}
@@ -15,5 +13,6 @@
 </article>
 {{ end }}
 {{ define "content-footer" }}
+{{ partial "webmentions.html" . }}
 {{ partial "prev-next-page.html" . }}
 {{ end }}

layouts/_default/summary.html

@@ -2,7 +2,7 @@
     <header>
         <h2 class="p-name u-url"><a href='{{ .Permalink }}'>{{ .Title }}</a> </h2>
         <p>
-            Published by <a class="p-author h-card" href="{{ .Site.BaseURL }}">{{ .Site.Params.Card.Author }}</a> on
+            Published on
             <time class="dt-published" datetime="{{ .Date }}">{{ .Date.Format "January 2, 2006" }}</time>
             &ndash; {{ .FuzzyWordCount }} Words
         </p>
@@ -10,7 +10,7 @@
     <section class="p-summary">
         {{ .Summary }}
     </section>
-    {{- if .Truncated }}
+    {{- if or .Truncated (gt .FuzzyWordCount 100) }}
     <footer>
         <a href='{{ .Permalink }}'>
             <span style="white-space: nowrap;">Read more →</span>

layouts/index.html

@@ -1,14 +1,22 @@
 {{ define "content" }}
+{{ $paginator := (.Paginate (where (where .Site.RegularPages "Type" "in" site.Params.mainSections) ".Params.hidden" "!=" "true" )) }}
+{{ if eq .Paginator.PageNumber 1 }}
 <article class="homepage-content h-entry e-content">
   <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
   {{.Content}}
 </article>
+{{ end }}
 <section class="h-feed">
+  {{ if eq .Paginator.PageNumber 1 }}
   {{ if .Site.Params.homepageSectionTitle }}
-  <h2 class="p-name u-url"><a href="{{ .Site.BaseURL }}">{{ .Site.Params.homepageSectionTitle }}</a></h2>
+  <h2>
+    <a class="u-url" href="{{ .Site.BaseURL }}"><span class="p-name">{{ .Site.Params.homepageSectionTitle }}</span></a>
+    <a rel="alternate" type="application/rss+xml" href="index.xml"><i class="fa fa-rss"></i></a>
+  </h2>
+  {{ end }}
   {{ end }}
   <!-- Note that .Pages is the same as .Site.RegularPages on the homepage template. -->
-  {{ range $index, $page := (.Paginate (where (where .Site.RegularPages "Type" "in" site.Params.mainSections) ".Params.hidden" "!=" "true" )).Pages }}
+  {{ range $index, $page := $paginator.Pages }}
   {{ if ne $index 0 }}
   {{ end }}
   {{ .Render "summary" }}
@@ -16,5 +24,6 @@
 </section>
 {{ end }}
 {{ define "content-footer" }}
+{{ partial "webmentions.html" . }}
 {{ partial "paginator.html" .Paginator }}
 {{ end }}

layouts/partials/author-card.html

@@ -2,7 +2,7 @@
     <img class="u-photo" src="{{ .Site.Params.Card.Photo | absURL}}" alt="" />
     <div class="author-card-content">
         <div class="author-card-header">
-            <a class="p-name u-url" href="{{ .Site.BaseURL }}" rel="me">{{ .Site.Params.Card.Author }}</a>
+            <a class="u-url" rel="me" href="{{ .Site.BaseURL }}"><span class="p-name">{{ .Site.Params.Card.Author }}</span></a>
         </div>
         <div class="author-card-subheader">
             <span class="p-locality">{{ .Site.Params.Card.Locality }}</span>,

layouts/partials/footer.html

@@ -1,3 +1,6 @@
 {{ with .Site.Copyright }}
 <p class="copyright">{{ . | markdownify }}</p>
+{{ end }}
+{{ with .Site.Params.BuiltWith }}
+<p class="built-with">{{ . | markdownify }}</p>
 {{ end }}

layouts/partials/header.html

@@ -1,6 +1,6 @@
-<hgroup>
+<hgroup class="site-header">
     <h1>{{.Site.Title}}</h1>
     {{- if .Site.Params.Subtitle }}
-    <h2 class="subtitle">{{.Site.Params.Subtitle}}</h2>
+    <h2>{{.Site.Params.Subtitle}}</h2>
     {{- end }}
 </hgroup>

layouts/partials/identity.html

@@ -1,3 +1,4 @@
+<!-- Rel=Me Identity Links -->
 {{- range .Site.Params.Identity -}}
 {{- $relMe := cond .authn "me authn" "me" -}}
 {{- if (eq .type "Email") }}
@@ -15,3 +16,21 @@
 <link rel="{{ $relPgp }}" href="{{ .value }}">
 {{- end -}}
 {{- end -}}
+<!-- Webmention Links -->
+{{- with .Site.Params.Webmention }}
+<link rel="webmention" href="{{ . }}">
+{{- end }}
+{{- with .Site.Params.Pingback }}
+<link rel="pingback" href="{{ . }}">
+{{- end -}}
+<!-- IndieAuth Endpoints -->
+{{- with .Site.Params.IndieAuth.Authorization }}
+<link rel="authorization_endpoint" href="{{ . }}">
+{{- end }}
+{{- with .Site.Params.IndieAuth.Token }}
+<link rel="token_endpoint" href="{{ . }}">
+{{- end -}}
+<!-- Micropub Endpoint -->
+{{- with .Site.Params.Micropub }}
+<link rel="micropub" href="{{ . }}">
+{{- end }}

layouts/partials/paginator.html

@@ -1,4 +1,4 @@
-<nav>
+<nav class="paginator">
     <ul>
         <li>
             {{if .HasPrev}}

layouts/partials/prev-next-page.html

@@ -1,5 +1,5 @@
 {{ if not .Params.Menu }}
-<nav>
+<nav class="paginator">
     <ul>
         <li>
             {{ if .NextInSection }}

layouts/partials/social.html

@@ -3,9 +3,9 @@
     {{ if .email }}
     <a class="glyph u-email" href="mailto:{{ .email }}" rel="me"><i class="{{ .icon }}"></i></a>
     {{ else if .publicKey }}
-    <a class="glyph p-pgp" href="{{ .publicKey }}" rel="pgpkey" title="{{ .fingerprint }}"><i class="{{ .icon }}"></i></a>
+    <a class="glyph u-pgp u-key" href="{{ .publicKey | absURL }}" rel="pgpkey" title="{{ .fingerprint }}"><i class="{{ .icon }}"></i></a>
     {{ else }}
-    <a class="glyph" href="{{ .profile }}" rel="me"><i class="{{ .icon }}"></i></a>
+    <a class="glyph u-url" href="{{ .profile }}" rel="me"><i class="{{ .icon }}"></i></a>
     {{ end }}
     {{ end }}
 </div>

layouts/partials/webmentions.html

@@ -0,0 +1,51 @@
+{{ $urlized := .Page.Permalink | md5 }}
+{{ if ne .Site.Data.webmentions nil }}
+{{ if index .Site.Data.webmentions $urlized }}
+<div class="webmentions">
+    {{ $likes := index (index .Site.Data.webmentions $urlized) "like-of" }}
+    {{ $replys := index (index .Site.Data.webmentions $urlized) "in-reply-to" }}
+    {{ $reposts := index (index .Site.Data.webmentions $urlized) "repost-of"}}
+    {{ $mentions := index (index .Site.Data.webmentions $urlized) "mention-of"}}
+    {{ if $likes }}
+    <h4>Likes</h4>
+    {{ range $i, $like := $likes }}
+    <a href="{{$like.url}}"><img src="{{ $like.author.photo}}" alt="{{ $like.author.name }}" class="profile photo like"></a>
+    {{ end }}
+    {{ end }}
+
+    {{ if $reposts }}
+    <h4>Reposts</h4>
+    {{ range $i, $repost := $reposts }}
+    <a href="{{$repost.url}}"><img src="{{ $repost.author.photo}}" alt="{{ $repost.author.name }}"
+            class="profile photo"></a>
+    {{ end }}
+    {{ end }}
+
+    {{ if $mentions }}
+    <h4>Mentions</h4>
+    <ul>
+    {{ range $i, $mention := $mentions }}
+        <li><a href="{{$mention.url}}">{{$mention.url}}</a></li>
+    {{ end }}
+    </ul>
+    {{ end }}
+
+    {{ if $replys }}
+    <h4>Comments and Replies</h4>
+    {{ range $i, $reply := $replys }}
+    <div class="webmention reply">
+        <a href="{{$reply.url}}"><img src="{{ $reply.author.photo}}" alt="{{ $reply.author.name }}"
+                class="profile photo"></a>
+        <dl class="webmention reply">
+            <dt>Comment by {{ $reply.author.name }} on
+                {{ (time $reply.published).Local | dateFormat "Mon Jan 2, 2006" }}</dt>
+            <dd>
+                {{ $reply.content.text | replaceRE "\\n" "<br><br>" | safeHTML | truncate 512 }}
+            </dd>
+        </dl>
+    </div>
+    {{ end }}
+    {{ end }}
+</div>
+{{ end }}
+{{ end }}

layouts/shortcodes/table.html

@@ -0,0 +1,6 @@
+{{ $htmlTable := .Inner | markdownify }}
+{{ $class := .Get 0 }}
+{{ $old := "<table>" }}
+{{ $new := printf "<table class=\"%s\">" $class }}
+{{ $htmlTable := replace $htmlTable $old $new }}
+{{ $htmlTable | safeHTML }}

static/css/layout.css

@@ -1,9 +1,60 @@
 .box {
   display: flex;
+  flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
 }
 
+div.webmention.reply {
+  display: flex;
+  flex-direction: row;
+}
+
 div.author-card-content {
   flex-grow: 1;
 }
+
+nav.site-menu ul {
+  display:flex;
+  flex-wrap: wrap;
+  justify-content: left;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+nav.site-menu ul li {
+  padding: 0.5em 0.5em 0.5em 0.5em;
+}
+
+nav.paginator ul {
+  display: flex;
+  justify-content: space-between;
+  list-style-type: none;
+  padding-inline-start: 1em;
+  padding-inline-end: 1em;
+}
+
+/* Define grid layout for wide screen browsers */
+div.content-box {
+  grid-area: content;
+}
+
+div.asides-box {
+  grid-area: aside;
+}
+
+@media only screen and (min-width: 922px) {
+  div.asides-box {
+    max-width: 350px;
+    border-left: thin solid;
+    margin: 1em;
+  }
+
+  main {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    grid-template-areas:
+      "content aside"; 
+  }
+}

static/css/style.css

@@ -1,3 +1,22 @@
+/* Styles for site header */
+hgroup.site-header {
+  border-top: double;
+  border-bottom: thin solid;
+  margin-bottom: 0.5em;
+}
+
+hgroup.site-header h1 {
+  margin: 0;
+}
+
+hgroup.site-header h2 {
+  font-weight: normal;
+  font-size: 1em;
+  font-style: italic;
+  padding-left: 0.5em;
+  margin: 0;
+}
+
 img.u-photo {
   max-width: 60px;
   padding: 0.5em;
@@ -5,4 +24,92 @@ img.u-photo {
 
 .glyph {
   font-size: 1.25em;
-}
+  margin-left: 1px;
+  margin-right: 1px;
+}
+
+nav.site-menu {
+  border-top: thin solid;
+  border-bottom: double;
+}
+
+/* Styles for site footer */
+p.copyright {
+  border-top: thin solid;
+  font-size: 0.8em;
+  text-align: center;
+  margin: 0;
+}
+
+p.built-with {
+  text-align: center;
+  font-size: 0.8em;
+  margin: 0;
+}
+
+img.profile.photo {
+  max-width: 60px;
+  padding: 0.5em;
+}
+
+img.profile.photo.like {
+  max-width: 30px;
+  border-radius: 50%;
+  padding: 0.5em;
+}
+
+/* Styles for images and code fence blocks in content area */
+
+pre {
+  overflow-x: auto;
+  width: 100vw;
+}
+
+code {
+  color: darkred;
+}
+
+pre code {
+  display: block;
+  color: inherit;
+}
+
+figure {
+  max-width: 100vw;
+}
+
+figure img {
+  max-width: calc(100vw - 160px);
+}
+
+@media only screen and (min-width: 922px) {
+  pre {
+    overflow-x: auto;
+    max-width: calc(100vw - 350px);
+  }
+
+  pre code {
+    display: block;
+  }
+
+  figure {
+    max-width: calc(100vw - 350px);
+  }
+
+  figure img {
+    max-width: calc(100vw - 510px);
+  }
+}
+
+/* Styes for tables */
+table, th, td {
+    padding: 0.5rem;
+}
+
+table.table-bordered,
+table.table-bordered td,
+table.table-bordered th {
+    border: 1px solid #dee2e6;
+    border-spacing: 2px;
+    border-collapse: collapse;
+}