Create author card using h-card microformats

* Update baseof to add block for styling
* Default styles block to link in layout.css and style.css
* Update baseof to add block for importing icons from a CSS font library
* Update baseof to add an aside block to the main content to put author
card in
* Create author card with a photo, author name, and general locale
* Create beginning of a social network link ribbon
master
Kevin C. Coram 2019-12-06 22:02:44 -05:00
parent 1273db7290
commit 65404a5da6
Signed by: kevin
GPG Key ID: 0342351B3D61AD35
7 changed files with 58 additions and 1 deletions

View File

@ -1,6 +1,6 @@
baseURL = "http://example.org/" baseURL = "http://example.org/"
languageCode = "en-us" languageCode = "en-us"
title = "Basic Hugo Theme" title = "Semantic IndieWeb Theme"
copyright = "Copyright © 2019, Copyright Owner Name | Built with [Hugo](https://gohugo.io/)" copyright = "Copyright © 2019, Copyright Owner Name | Built with [Hugo](https://gohugo.io/)"
theme = "semantic-indieweb" theme = "semantic-indieweb"
paginate = 5 paginate = 5
@ -12,6 +12,14 @@ paginate = 5
subtitle = "A theme with no CSS and only basic layouts" subtitle = "A theme with no CSS and only basic layouts"
mainSections = [ "posts" ] mainSections = [ "posts" ]
# 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"
# Configuration Parameters for IndieWeb Identity # Configuration Parameters for IndieWeb Identity
[[params.Identity]] [[params.Identity]]
type = "Email" type = "Email"

View File

@ -8,6 +8,13 @@
<title>{{- block "title" . -}} <title>{{- block "title" . -}}
{{ .Site.Title }} {{ .Site.Title }}
{{- end -}}</title> {{- end -}}</title>
{{ block "styles" . }}
<link rel="stylesheet" href={{ "css/layout.css" | absURL }} />
<link rel="stylesheet" href={{ "css/style.css" | absURL }} />
{{ end }}
{{ block "icons" . }}
{{ partial "icons.html" . }}
{{ end }}
</head> </head>
<body> <body>
@ -40,6 +47,11 @@
{{- block "content-footer" . -}} {{- block "content-footer" . -}}
{{- end -}} {{- end -}}
</footer> </footer>
<aside>
{{ block "author-card" . }}
{{ partial "author-card.html" . }}
{{ end }}
</aside>
</main> </main>
<footer> <footer>
{{- block "footer" . -}} {{- block "footer" . -}}

View File

@ -0,0 +1,16 @@
<div class="h-card box">
<div class="box">
<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>
</div>
<div class="author-card-subheader">
<span class="p-locality">{{ .Site.Params.Card.Locality }}</span>,
<span class="p-region">{{ .Site.Params.Card.Region }}</span>,
<span class="p-country-name">{{ .Site.Params.Card.Country }}</span>
</div>
{{ partial "social.html" . }}
</div>
</div>
</div>

View File

@ -0,0 +1 @@
<link rel="stylesheet" href={{ "css/fork-awesome.min.css" | absURL }} />

View File

@ -0,0 +1,3 @@
<div class="social-box">
<a class="glyph" href="."><i class="fa fa-mastodon"></i></a>
</div>

10
static/css/layout.css Normal file
View File

@ -0,0 +1,10 @@
.box {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0.5em;
}
div.author-card-content {
flex-grow: 1;
}

7
static/css/style.css Normal file
View File

@ -0,0 +1,7 @@
img.u-photo {
max-width: 60px;
}
.glyph {
font-size: 1.5em;
}