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 ribbonmaster
parent
1273db7290
commit
65404a5da6
|
@ -1,6 +1,6 @@
|
|||
baseURL = "http://example.org/"
|
||||
languageCode = "en-us"
|
||||
title = "Basic Hugo Theme"
|
||||
title = "Semantic IndieWeb Theme"
|
||||
copyright = "Copyright © 2019, Copyright Owner Name | Built with [Hugo](https://gohugo.io/)"
|
||||
theme = "semantic-indieweb"
|
||||
paginate = 5
|
||||
|
@ -12,6 +12,14 @@ paginate = 5
|
|||
subtitle = "A theme with no CSS and only basic layouts"
|
||||
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
|
||||
[[params.Identity]]
|
||||
type = "Email"
|
||||
|
|
|
@ -8,6 +8,13 @@
|
|||
<title>{{- block "title" . -}}
|
||||
{{ .Site.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>
|
||||
|
||||
<body>
|
||||
|
@ -40,6 +47,11 @@
|
|||
{{- block "content-footer" . -}}
|
||||
{{- end -}}
|
||||
</footer>
|
||||
<aside>
|
||||
{{ block "author-card" . }}
|
||||
{{ partial "author-card.html" . }}
|
||||
{{ end }}
|
||||
</aside>
|
||||
</main>
|
||||
<footer>
|
||||
{{- block "footer" . -}}
|
||||
|
|
|
@ -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>
|
|
@ -0,0 +1 @@
|
|||
<link rel="stylesheet" href={{ "css/fork-awesome.min.css" | absURL }} />
|
|
@ -0,0 +1,3 @@
|
|||
<div class="social-box">
|
||||
<a class="glyph" href="."><i class="fa fa-mastodon"></i></a>
|
||||
</div>
|
|
@ -0,0 +1,10 @@
|
|||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
div.author-card-content {
|
||||
flex-grow: 1;
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
img.u-photo {
|
||||
max-width: 60px;
|
||||
}
|
||||
|
||||
.glyph {
|
||||
font-size: 1.5em;
|
||||
}
|
Loading…
Reference in New Issue