show tags / categories directly at articles

master
Lars Hoogestraat 8 months ago
parent de218b35b0
commit 53e91d8c91
  1. 21
      README.md
  2. 1
      exampleSite/config.toml
  3. 7
      exampleSite/layouts/partials/head-custom.html
  4. 7
      layouts/_default/list.html
  5. 12
      layouts/partials/article-footer.html
  6. 17
      layouts/partials/article-header.html
  7. 2
      layouts/partials/head.html
  8. 23
      layouts/posts/list.html
  9. 4
      layouts/posts/single.html
  10. 82
      static/css/master.css

@ -2,11 +2,15 @@
## Features
- Responsive
- Dark / Light mode Theme
- Syntax highlighting for dark and light theme
- Honors dark and light color preference
- Syntax highlighting for dark and light colors
- Left and bottom navigation
- Layout for an archive page
## Demo
- https://hugodemo.hoogi.eu
## Screenshot
- Dark mode
@ -34,13 +38,16 @@
# Configuration
It is currently just 'useSummary' available for configuring.
If set to 'true' a summary will be shown on list overview,
otherwise the complete post is shown.
To inject custom HEAD elements create a "head-custom.html" in '<YOUR_SITE>/layouts/partials'.
For changing colors see the overridden link visited example for the dark theme in 'exampleSite/layouts/partials/head-custom.html'.
```
[Params]
useSummary = true | false
[params]
# If set to 'true' a summary will be shown on list overview, otherwise the complete post is shown.
useSummary = true | false
# Shows a right sidebar with all categories.
sidebar = true | false
```
## License

@ -12,6 +12,7 @@ relativeURLs = false
[params]
useSummary = true
sidebar = true
description = 'An example description'
[permalinks]

@ -0,0 +1,7 @@
<style>
@media (prefers-color-scheme: dark) {
:root {
--link-visited-text-color: gray;
}
}
</style>

@ -2,15 +2,16 @@
{{ range .Paginator.Pages }}
<article>
<header>
<h1><a href="{{.Permalink}}">{{.Title}}</a></h1>
<p>{{ if .Date }} written {{ if .Params.Author }} by {{ .Params.Author }} {{ end }} on <time>{{ .Date.Format "Jan 2, 2006" }}</time>{{ end }}</p>
{{ partial "article-header.html" . }}
</header>
{{ if .Site.Params.useSummary }}
{{ .Summary }}
<p style="text-align: right"><a href='{{ .Permalink }}'>Read more &raquo;</a></p>
{{ partial "article-footer.html" . }}
{{ else }}
{{.Content}}
{{ partial "article-footer.html" . }}
{{ end }}
</article>

@ -0,0 +1,12 @@
<footer>
<div class="read-more"><a href='{{ .Permalink }}'>Read more &raquo;</a></div>
{{ if .Params.tags }}
<div class="tags">Tags:
{{ range .Params.tags }}
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">#{{ . }}</a>
{{ end }}
</div>
{{end}}
</footer>

@ -0,0 +1,17 @@
<h1>
{{ if eq (.Scratch.Get "scope") "single" }}
{{.Title}}
{{ else }}
<a href="{{.Permalink}}">{{.Title}}</a>
{{ end }}
</h1>
<p>
{{ if .Date }} written {{ if .Params.Author }} by {{ .Params.Author }} {{ end }} on
<time>{{ .Date.Format "Jan 2, 2006" }}</time>{{ end }}
{{ if .Params.categories }}
in
{{ range .Params.categories }}
<a href="{{ $.Site.BaseURL }}categories/{{ . | urlize }}">{{ . | humanize }}</a>
{{ end }}
{{ end }}
</p>

@ -1,4 +1,4 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

@ -0,0 +1,23 @@
{{ define "main" }}
{{ .Scratch.Set "scope" "list" }}
{{ range .Paginator.Pages }}
<article>
<header>
{{ partial "article-header.html" . }}
</header>
{{ if .Site.Params.useSummary }}
{{ .Summary }}
{{ partial "article-footer.html" . }}
{{ else }}
{{.Content}}
{{ partial "article-footer.html" . }}
{{ end }}
</article>
{{ end }}
{{ partial "pagination.html" . }}
{{ end }}

@ -1,8 +1,8 @@
{{ define "main" }}
{{ .Scratch.Set "scope" "single" }}
<article>
<header>
<h1>{{.Title}}</h1>
{{ if .Date }}<p>written {{ if .Params.Author }} by {{ .Params.Author }} {{ end }} on <time datetime="{{.Date }}">{{ .Date.Format "Jan 2, 2006" }}</time></p>{{ end }}
{{ partial "article-header.html" . }}
</header>
{{ .Content }}
</article>

@ -13,19 +13,24 @@
@font-face {
font-family: 'rubik';
font-style: normal;
font-weight: normal;
src: url("fonts/Rubik-Regular.ttf");
font-display: swap
}
@font-face {
font-family: 'rubik';
src: url("fonts/Rubik-Bold.ttf");
font-weight: bold;
font-display: swap
}
@font-face {
font-family: 'rubik';
src: url("fonts/Rubik-Italic.ttf");
font-style: italic;
font-display: swap
}
@font-face {
@ -33,6 +38,7 @@
src: url("fonts/Rubik-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
font-display: swap
}
html {
@ -63,6 +69,7 @@ body {
--footer-bg-color: #1f1f1f;;
--footer-text-color: #ffffff;
--footer-active-link-color: #ffffff;
--headline-text-color: #285e8e;
--article-box-bg-color: #f8f8f8;
@ -89,6 +96,7 @@ body {
--footer-bg-color: #1f1f1f;;
--footer-text-color: #ffffff;
--footer-active-link-color: #ffffff;
--article-box-bg-color: #1f1f1f;
--headline-text-color: #3a8cd3;
@ -173,13 +181,13 @@ a:visited {
/*
* Layout positioning
*/
main {
#container>main {
grid-area: content;
width: 100%;
padding: 0 1em 1em 1em;
}
header#page-header {
#container>header#page-header {
display: flex;
grid-area: header;
align-items: center;
@ -187,13 +195,13 @@ header#page-header {
background-color: var(--header-bg-color);
}
nav {
#container>nav {
grid-area: nav;
background-color: var(--nav-bg-color);
font-size: 1.1em;
}
aside {
#container>aside {
color: var(--nav-text-color);
grid-area: sidebar;
background-color: var(--nav-bg-color);
@ -214,16 +222,16 @@ header#page-header {
* Navigation styles left and right side
*/
aside ul li:first-child {
#container>aside ul li:first-child {
padding: 1rem 0.5rem;
font-size: 1.3em;
border-bottom: 0.0625rem solid var(--nav-border-color);
}
aside a,
nav a,
aside a:visited,
nav a:visited {
#container>aside a,
#container>nav a,
#container>aside a:visited,
#container>nav a:visited {
color: var(--nav-text-color);
display: inline-block;
border-bottom: 0.0625rem solid var(--nav-border-color);
@ -232,19 +240,19 @@ nav a:visited {
text-decoration: none;
}
nav a:active,
nav a:hover,
nav a:active,
nav a.active {
#container>nav a:active,
#container>nav a:hover,
#container>nav a:active,
#container>nav a.active {
color: var(--nav-hover-color);
background-color: var(--nav-hover-bg-color);
border-right: 0.3125rem solid var(--nav-border-color);
}
aside a:active,
aside a:hover,
aside a:active,
aside a.active {
#container>aside a:active,
#container>aside a:hover,
#container>aside a:active,
#container>aside a.active {
color: var(--nav-hover-color);
background-color: var(--nav-hover-bg-color);
border-left: 0.3125rem solid var(--nav-border-color);
@ -253,7 +261,7 @@ aside a.active {
/**
* Footer styles
*/
footer {
#container>footer {
grid-area: footer;
background-color: var(--footer-bg-color);
color: var(--footer-text-color);
@ -261,39 +269,39 @@ footer {
font-size: 0.9em;
}
footer p {
#container>footer p {
padding-top: 5px;
padding-left: 5px;
margin: auto;
}
footer ul {
#container>footer ul {
list-style-type: none;
}
footer ul li {
#container>footer ul li {
display: inline-block;
list-style-type: none;
padding: 5px 0;
}
footer a,
footer a:visited {
#container>footer a,
#container>footer a:visited {
color: var(--footer-text-color);
width: 100%;
text-decoration: underline;
}
footer a:active,
footer a:hover,
footer a:active,
footer a.active {
color: #fff;
#container>footer a:active,
#container>footer a:hover,
#container>ooter a:active,
#container>footer a.active {
color: var(--footer-active-link-color);
text-decoration: none;
}
nav li,
aside li {
#container>nav li,
#container>aside li {
list-style-type: none;
}
@ -407,6 +415,20 @@ article th {
font-weight: bold;
}
article footer {
text-align: left;
}
article footer .tags {
text-align: left;
font-size: 0.9em;
}
article footer div.read-more {
text-align: right;
}
.footnotes {
margin-top: 0.4em;
font-size: 0.7em;

Loading…
Cancel
Save