This commit is contained in:
@ -1,7 +1,7 @@
|
||||
baseURL: 'https://sabbatical.ipng.nl/'
|
||||
languageCode: 'en-us'
|
||||
title: "Pim's Sabbatical 2024"
|
||||
theme: 'hugo-theme-notrack'
|
||||
theme: 'hugo-theme-ipng'
|
||||
|
||||
mainSections: ["blog"]
|
||||
paginate: 4
|
||||
|
||||
3
themes/hugo-theme-ipng/README.md
Normal file
3
themes/hugo-theme-ipng/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# Notrack
|
||||
|
||||
This theme was branched from hugo-theme-notrack
|
||||
@ -1,7 +1,6 @@
|
||||
// Colors
|
||||
$midnight-blue: #07608f;
|
||||
$midnight-matte: #4c7e99;
|
||||
$text-color: #444;
|
||||
$tab-border-color: #ddd;
|
||||
$tab-active-color: #474a4f;
|
||||
$heading-gray: #333;
|
||||
@ -11,12 +10,19 @@ $close-hover-gray: #bbb;
|
||||
$contactlinks-color: #eee;
|
||||
$contactlinks-text-color: #524e59;
|
||||
$cv-red: #b25347;
|
||||
$light-text: #5f5a6f;
|
||||
$very-light-text: #767676;
|
||||
$text-dark: #444;
|
||||
$text-normal: #777;
|
||||
$text-light: #5f5a6f;
|
||||
$text-very-light: #767676;
|
||||
$medium-light-text: #4f4a5f;
|
||||
$code-background: #f3f3f3;
|
||||
$codeblock-background: #f6f8fa;
|
||||
$code-text: #f8f8f2;
|
||||
$ipng-orange: #f46524;
|
||||
$ipng-darkorange: #8c1919;
|
||||
$ipng-lightorange: #fb8c00;
|
||||
$table-header-background: #ffdcca;
|
||||
$table-cell-background: #fafafa;
|
||||
|
||||
// Breakpoints
|
||||
$bp-mini: 28em; // 288px
|
||||
@ -37,11 +43,11 @@ $mq-xxlarge: "(min-width: #{$bp-xxlarge})";
|
||||
$mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
|
||||
|
||||
// Font-Size
|
||||
$base-font-size: 1.1em;
|
||||
$base-font-size: 1.0em;
|
||||
|
||||
// Line-Height
|
||||
$base-line-height: 1.1;
|
||||
$header-line-height: 1.25;
|
||||
$base-line-height: 1.4;
|
||||
$header-line-height: 1.0;
|
||||
|
||||
// HUGO
|
||||
|
||||
@ -54,26 +60,15 @@ body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
overflow-y: scroll;
|
||||
font-size: $base-font-size * 1.1;
|
||||
line-height: $base-line-height * 1.1;
|
||||
font-family: FreeSerif, serif;
|
||||
line-height: $base-line-height * 1.0;
|
||||
font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
@media #{$mq-medium} {
|
||||
font-size: $base-font-size*1.2;
|
||||
line-height: $base-line-height*1.2;
|
||||
}
|
||||
|
||||
@media #{$mq-large} {
|
||||
font-size: $base-font-size*1.3;
|
||||
}
|
||||
|
||||
@media #{$mq-xlarge} {
|
||||
font-size: $base-font-size*1.4;
|
||||
}
|
||||
|
||||
@media #{$mq-xxlarge} {
|
||||
font-size: $base-font-size*1.6;
|
||||
}
|
||||
@media #{$mq-mini} { font-size: $base-font-size * 0.8; }
|
||||
@media #{$mq-small} { font-size: $base-font-size * 0.9; }
|
||||
@media #{$mq-medium} { font-size: $base-font-size * 1.0; }
|
||||
@media #{$mq-large} { font-size: $base-font-size * 1.0; }
|
||||
@media #{$mq-xlarge} { font-size: $base-font-size * 1.1; }
|
||||
@media #{$mq-xxlarge} { font-size: $base-font-size * 1.1; }
|
||||
}
|
||||
|
||||
/*largest screens*/
|
||||
@ -81,63 +76,56 @@ main {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 1em 1em;
|
||||
background-color: white;
|
||||
padding-bottom: 5em;
|
||||
|
||||
@media #{$mq-small} {
|
||||
margin: 0 15%;
|
||||
@media #{$mq-mini} { margin: 0 2%; }
|
||||
@media #{$mq-small} { margin: 0 2%; }
|
||||
@media #{$mq-medium} { margin: 0 17%; }
|
||||
@media #{$mq-large} { margin: 0 21%; }
|
||||
@media #{$mq-xlarge} { margin: 0 24%; }
|
||||
@media #{$mq-xxlarge} { margin: 0 27%; }
|
||||
|
||||
a {
|
||||
color: $ipng-lightorange;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media #{$mq-medium} {
|
||||
margin: 0 17%;
|
||||
}
|
||||
|
||||
@media #{$mq-large} {
|
||||
margin: 0 21%;
|
||||
}
|
||||
|
||||
@media #{$mq-xlarge} {
|
||||
margin: 0 24%;
|
||||
}
|
||||
|
||||
@media #{$mq-xxlarge} {
|
||||
margin: 0 27%;
|
||||
a:hover {
|
||||
color: $ipng-darkorange;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: FreeSerif, serif;
|
||||
color: $midnight-blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: FreeSans, sans-serif;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
color: $heading-gray;
|
||||
color: $ipng-orange;
|
||||
}
|
||||
|
||||
p, li {
|
||||
color: $text-color;
|
||||
font-family: FreeSerif, serif;
|
||||
color: $text-normal;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-style: normal;
|
||||
font-family: FreeSerif, serif;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
font-family: FreeSerif, serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
kbd, code {
|
||||
font-family: Mononoki, monospace;
|
||||
color: $text-color;
|
||||
color: $text-normal;
|
||||
background-color: $code-background;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
@ -145,24 +133,29 @@ kbd, code {
|
||||
pre {
|
||||
background-color: $codeblock-background;
|
||||
padding: 0.5em;
|
||||
overflow-x: auto;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
line-height: $base-line-height * 0.9;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.75em;
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: FreeSerif, serif;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
color: $text-normal;
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: FreeSerif, serif;
|
||||
color: $text-color;
|
||||
color: $text-normal;
|
||||
}
|
||||
|
||||
.footnotes ol li {
|
||||
font-family: FreeSerif, serif;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
@ -240,14 +233,23 @@ figcaption {
|
||||
}
|
||||
h4 {
|
||||
margin: 0.3em 0;
|
||||
color: $text-color;
|
||||
color: $text-normal;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.home-ipng {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
color: $ipng-orange;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
text-align: center;
|
||||
font-size: 1.9em;
|
||||
text-align: left;
|
||||
font-size: 2em;
|
||||
color: $ipng-orange;
|
||||
}
|
||||
|
||||
.page-title.blog {
|
||||
@ -284,22 +286,21 @@ nav li {
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: $text-color;
|
||||
color: $text-normal;
|
||||
padding: .25em .63em;
|
||||
font-family: FreeSans, sans-serif;
|
||||
font-size: 1.2em;
|
||||
font-size: 1.1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav li:hover {
|
||||
border-color: $tab-border-color;
|
||||
border-color: $ipng-lightorange;
|
||||
}
|
||||
|
||||
.dropdown .sub-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
color: $text-color;
|
||||
color: $text-normal;
|
||||
cursor: pointer;
|
||||
border-width: 0 0 .3em 0;
|
||||
min-width: 6em;
|
||||
@ -321,7 +322,7 @@ nav li:hover {
|
||||
display: block;
|
||||
text-align: left;
|
||||
padding: .2em .63em;
|
||||
color: $text-color;
|
||||
color: $text-normal;
|
||||
}
|
||||
|
||||
.dropdown.activetab, .activetab, li.activetab {
|
||||
@ -334,25 +335,59 @@ nav li:hover {
|
||||
}
|
||||
|
||||
.page-header {
|
||||
border-bottom: 1px solid black;
|
||||
border-bottom: 2px solid $text-dark;
|
||||
background-color: #f7f7f7;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin: 1em 1em 0 1em;
|
||||
|
||||
@media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
|
||||
@media #{$mq-small} { margin: 0 5%; width: 90%; font-size: $base-font-size * 0.9; }
|
||||
@media #{$mq-medium} { margin: 0 17%; width: 66%; font-size: $base-font-size * 1.0; }
|
||||
@media #{$mq-large} { margin: 0 21%; width: 58%; font-size: $base-font-size * 1.0; }
|
||||
@media #{$mq-xlarge} { margin: 0 24%; width: 52%; font-size: $base-font-size * 1.1; }
|
||||
@media #{$mq-xxlarge} { margin: 0 27%; width: 48%; font-size: $base-font-size * 1.1; }
|
||||
|
||||
a:hover {
|
||||
color: $ipng-lightorange;
|
||||
}
|
||||
.activetab > a:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
position: fixed;
|
||||
font-size: .8em;
|
||||
border-top: 2px solid $text-dark;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
bottom: 0;
|
||||
color: $text-light;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
@media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
|
||||
@media #{$mq-small} { margin: 0 5%; width: 90%; font-size: $base-font-size * 0.9; }
|
||||
@media #{$mq-medium} { margin: 0 17%; width: 66%; font-size: $base-font-size * 1.0; }
|
||||
@media #{$mq-large} { margin: 0 21%; width: 58%; font-size: $base-font-size * 1.0; }
|
||||
@media #{$mq-xlarge} { margin: 0 24%; width: 52%; font-size: $base-font-size * 1.1; }
|
||||
@media #{$mq-xxlarge} { margin: 0 27%; width: 48%; font-size: $base-font-size * 1.1; }
|
||||
}
|
||||
|
||||
.myname {
|
||||
margin: 0 auto 0 0;
|
||||
padding: 0 0 .25em .25em;
|
||||
font-size: 2em;
|
||||
padding-left: .5em;
|
||||
font-size: $base-font-size * 1.2;
|
||||
color: $ipng-orange;
|
||||
}
|
||||
|
||||
.myname a {
|
||||
color: black;
|
||||
color: $ipng-orange;
|
||||
text-decoration: none;
|
||||
font-family: FreeSerif, serif;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.myname h2 {
|
||||
@ -363,9 +398,7 @@ nav li:hover {
|
||||
|
||||
.blog-post-summary {
|
||||
margin: 0;
|
||||
@media #{$mq-mini} {
|
||||
margin: 2em;
|
||||
}
|
||||
@media #{$mq-mini} { margin: 2em; }
|
||||
}
|
||||
|
||||
#latest-blog-home {
|
||||
@ -387,14 +420,13 @@ nav li:hover {
|
||||
|
||||
a {
|
||||
color: $heading-gray;
|
||||
font-family: FreeSans, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post-info {
|
||||
margin: 0.2em 0;
|
||||
font-size: 0.8em;
|
||||
color: $light-text;
|
||||
color: $text-light;
|
||||
margin-left: 1em;
|
||||
text-align: left;
|
||||
|
||||
@ -402,7 +434,6 @@ nav li:hover {
|
||||
}
|
||||
|
||||
em.taxonomy-emph {
|
||||
font-family: FreeSans, sans-serif;
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
@ -419,7 +450,7 @@ em.taxonomy-emph {
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: 2px solid $text-color;
|
||||
border-bottom: 2px solid $text-normal;
|
||||
|
||||
li {
|
||||
flex-grow: 1;
|
||||
@ -433,7 +464,7 @@ em.taxonomy-emph {
|
||||
background-color: $tab-border-color;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
color: $text-color;
|
||||
color: $text-normal;
|
||||
padding: .5em;
|
||||
flex-grow: 1;
|
||||
text-transform: capitalize;
|
||||
@ -442,7 +473,6 @@ em.taxonomy-emph {
|
||||
|
||||
.pagination {
|
||||
list-style-type: none;
|
||||
font-family: FreeSans, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1em;
|
||||
@ -450,12 +480,12 @@ em.taxonomy-emph {
|
||||
}
|
||||
|
||||
.page-item {
|
||||
color: $text-color;
|
||||
color: $text-normal;
|
||||
display: inline-block;
|
||||
padding: .2em .6em;
|
||||
|
||||
a {
|
||||
color: $text-color;
|
||||
color: $text-normal;
|
||||
}
|
||||
}
|
||||
|
||||
@ -468,92 +498,6 @@ em.taxonomy-emph {
|
||||
}
|
||||
}
|
||||
|
||||
// RESUME
|
||||
|
||||
.resume-content {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
text-align: left;
|
||||
width: 8em;
|
||||
padding: .5em;
|
||||
flex: 1 3 auto;
|
||||
|
||||
h4 {
|
||||
margin: 0 0.5em 0 0;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.category-content {
|
||||
flex: 2 1 65%;
|
||||
padding: .5em;
|
||||
|
||||
a {
|
||||
color: $midnight-matte;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 0.9em;
|
||||
color: $light-text;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: "– ";
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
font-family: FreeSans, sans-serif;
|
||||
margin-top: 0;
|
||||
}
|
||||
li {
|
||||
font-size: 0.9em;
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
.resume-entry {
|
||||
margin: 0 0 1em 0;
|
||||
|
||||
.what {
|
||||
font-family: FreeSans, serif;
|
||||
text-align: left;
|
||||
font-size: 1.0em;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.resume-entry-data {
|
||||
font-family: FreeSans, serif;
|
||||
text-align: left;
|
||||
font-size: 0.8em;
|
||||
color: $very-light-text;
|
||||
margin-left: 0.9rem;
|
||||
}
|
||||
|
||||
.resume-inner {
|
||||
line-height: 1;
|
||||
margin-top: 0.2em;
|
||||
margin-left: 0.9rem;
|
||||
}
|
||||
|
||||
p, ul, ol, li {
|
||||
font-family: FreeSerif, serif;
|
||||
color: $light-text;
|
||||
text-align: left;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
p.resume-subcategory {
|
||||
font-family: FreeSans, sans-serif;
|
||||
font-size: 1.4em;
|
||||
text-decoration: underline;
|
||||
padding: 0 0 .3em 0;
|
||||
}
|
||||
|
||||
// CONTACT
|
||||
|
||||
#contactinformation {
|
||||
@ -565,13 +509,15 @@ p.resume-subcategory {
|
||||
.social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: $base-font-size*0.7;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
display:flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
@ -581,25 +527,26 @@ p.resume-subcategory {
|
||||
a {
|
||||
white-space: nowrap;
|
||||
color: #3f444d;
|
||||
font-size: 1em;
|
||||
font-family: FreeSans, sans-serif;
|
||||
font-size: 1.2em;
|
||||
|
||||
i {
|
||||
font-size: 2em;
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
color: $ipng-lightorange;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.contactbox {
|
||||
padding: 0 1.0em 0 1.0em;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media #{$mq-mini-reverse} {
|
||||
width: 100% !important;
|
||||
}
|
||||
@media #{$mq-mini-reverse} { width: 100% !important; }
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
@ -617,7 +564,6 @@ p.resume-subcategory {
|
||||
|
||||
|
||||
a {
|
||||
font-family: FreeSans, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
color: $contactlinks-text-color;
|
||||
@ -657,13 +603,11 @@ p.resume-subcategory {
|
||||
// General
|
||||
|
||||
blockquote {
|
||||
font-family: FreeSerif, serif;
|
||||
font-size: .9em;
|
||||
color: $text-color;
|
||||
color: $text-normal;
|
||||
}
|
||||
|
||||
cite {
|
||||
font-family: FreeSerif, serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@ -809,15 +753,27 @@ cite {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
color: #444;
|
||||
font-size: .8em;
|
||||
padding-left: 1em;
|
||||
padding-top: .2em;
|
||||
padding-bottom: .1em;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #f7f7f7;
|
||||
table {
|
||||
margin-bottom: 1em;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-collapse: separate;
|
||||
border-radius: 0.5em;
|
||||
border: 2px solid $ipng-orange;
|
||||
tr {
|
||||
&:nth-child(even) {
|
||||
background-color: darken($table-cell-background, 10%);
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
padding: 0.15em 0.5em;
|
||||
}
|
||||
th {
|
||||
color: $ipng-orange;
|
||||
background-color: lighten($table-header-background, 3%);
|
||||
border-bottom: 3px solid $ipng-orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
td {
|
||||
}
|
||||
}
|
||||
@ -441,7 +441,7 @@ researchgate:
|
||||
# 056: Mastodon
|
||||
mastodon:
|
||||
weight: 56
|
||||
prefix: https://mastodon.social/
|
||||
prefix: https://ublog.tech/
|
||||
title: Mastodon
|
||||
icon:
|
||||
class: fab fa-mastodon fa-fw
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
{{- partial "head.html" . -}}
|
||||
<body>
|
||||
{{- partial "header.html" . -}}
|
||||
27
themes/hugo-theme-ipng/layouts/_default/list.html
Normal file
27
themes/hugo-theme-ipng/layouts/_default/list.html
Normal file
@ -0,0 +1,27 @@
|
||||
{{ define "main" }}
|
||||
<main>
|
||||
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
|
||||
Here’s a sitemap of informational articles and papers in reversed chronological order:
|
||||
|
||||
{{- if .Pages -}}
|
||||
{{- $pages := (where .Pages ".Draft" false) -}}
|
||||
|
||||
{{- /* Use site config params for posts per page if available, otherwise default */ -}}
|
||||
{{- with .Site.Params.list.paginate | default .Site.Params.paginate -}}
|
||||
{{- $pages = $.Paginate $pages . -}}
|
||||
{{- else -}}
|
||||
{{- $pages = .Paginate $pages -}}
|
||||
{{- end -}}
|
||||
|
||||
<ul>
|
||||
{{- range $pages.Pages -}}
|
||||
<li><a href="{{ .Permalink }}"><time>{{ .Date.Format "2006-01-02"}}</time> - {{.Title}}</a></li>
|
||||
{{- end -}}
|
||||
</ul>
|
||||
|
||||
{{ partial "pagination.html" . }}
|
||||
{{- end -}}
|
||||
</main>
|
||||
{{ end }}
|
||||
23
themes/hugo-theme-ipng/layouts/_default/single.html
Normal file
23
themes/hugo-theme-ipng/layouts/_default/single.html
Normal file
@ -0,0 +1,23 @@
|
||||
{{- define "main" }}
|
||||
<main>
|
||||
<article>
|
||||
{{- if in site.Params.mainSections .Page.Section }}
|
||||
<h1 class="page-title blog">{{ .Title }}</h1>
|
||||
{{- else }}
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
{{- end }}
|
||||
{{- /* Show post information if it's a post, otherwise just the content */ -}}
|
||||
{{- if in site.Params.mainSections .Page.Section }}
|
||||
<p class="blog-post-info">Posted: <time>{{- .Date.Format "2006-01-02" -}}</time>
|
||||
{{- partial "blog-taxonomy-info" . }}
|
||||
</p>
|
||||
<div class="blog-post-content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{- template "_internal/disqus.html" . }}
|
||||
{{- else }}
|
||||
{{- .Content }}
|
||||
{{- end }}
|
||||
</article>
|
||||
</main>
|
||||
{{- end }}
|
||||
@ -0,0 +1,16 @@
|
||||
{{- with .Params.Categories }}
|
||||
<span class="blog-taxonomy-info"> | Categories:
|
||||
{{- $sort := sort . }}
|
||||
{{- $links := apply $sort "partial" "post-category-link" "." }}
|
||||
{{- $clean := apply $links "chomp" "." }}
|
||||
{{- delimit $clean ", " | safeHTML }}
|
||||
</span>
|
||||
{{- end }}
|
||||
{{- with .Params.Tags }}
|
||||
<span class="blog-taxonomy-info"> | Tags:
|
||||
{{- $sort := sort . }}
|
||||
{{- $links := apply $sort "partial" "post-tag-link" "." }}
|
||||
{{- $clean := apply $links "chomp" "." }}
|
||||
{{- delimit $clean ", " | safeHTML }}
|
||||
</span>
|
||||
{{- end -}}
|
||||
29
themes/hugo-theme-ipng/layouts/partials/footer.html
Normal file
29
themes/hugo-theme-ipng/layouts/partials/footer.html
Normal file
@ -0,0 +1,29 @@
|
||||
|
||||
<footer class='page-footer'>
|
||||
{{- $socialMap := .Site.Data.notrack.social }}
|
||||
{{- with $.Site.Params.social }}
|
||||
<div class="social">
|
||||
<ul>
|
||||
{{- $socialArray := slice -}}
|
||||
{{- range $website, $user := $.Site.Params.social }}
|
||||
{{- $social := $website | lower | index $socialMap | default dict -}}
|
||||
{{- $social := dict "user" $user | merge $social -}}
|
||||
|
||||
{{- $data := index $socialMap $website -}}
|
||||
|
||||
{{- $socialArray = $socialArray | append $social -}}
|
||||
{{- end }}
|
||||
{{- range sort $socialArray "weight" -}}
|
||||
{{- if .prefix -}}
|
||||
<li><a href="{{- .prefix -}}{{ .user }}" rel="me"><i class="{{- .icon.class -}}"></i>{{ .title }}</a></li>
|
||||
{{- else if .template -}}
|
||||
<li><a href="{{- printf .template .user -}}" rel="me"><i class="{{- .icon.class -}}"></i>{{ .title }}</a></li>
|
||||
{{- else if .url -}}
|
||||
<li><a href="{{- .url -}}"><i class="{{- .icon.class -}}"></i>{{ .title }}</a></li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{ printf " <!-- Icons are from Awesome Font, licensed under SIL OFL 1.1 (https://scripts.sil.org/OFL) -->" | safeHTML }}
|
||||
</footer>
|
||||
@ -1,23 +1,26 @@
|
||||
|
||||
<head>
|
||||
<title>{{ .Site.Title }} {{ with .Title }}- {{ . }} {{ end }}</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{ "css/fonts.css" | relURL }}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ "css/fontawesome.css" | relURL }}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ "css/asciinema-player.css" | relURL }}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ "css/fonts.css" | relURL }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ "css/fontawesome.css" | relURL }}">
|
||||
{{ $options := dict "transpiler" "libsass" "targetPath" "css/styles.css" -}}
|
||||
{{ $style := resources.Get "styles.scss" | toCSS $options | minify | fingerprint -}}
|
||||
<link rel="stylesheet" type="text/css" href="{{ $style.RelPermalink }}">
|
||||
{{ with resources.Get "css/userstyles.css" }}
|
||||
<link rel="stylesheet" type="text/css" href="{{ .Permalink }}">
|
||||
{{ end -}}
|
||||
{{ with .Site.Params.favicon -}}
|
||||
<link rel="icon" href="{{ . | relURL }}">
|
||||
{{ end -}}
|
||||
<link rel="icon" href="/assets/logo/favicon/favicon.ico" type="image/x-icon" sizes="any">
|
||||
<link rel="apple-touch-icon" href="/assets/logo/favicon/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/assets/logo/favicon/icon.manifest">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="author" content="{{ .Site.Params.Author }}">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
{{ range .AlternativeOutputFormats -}}
|
||||
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
|
||||
{{ end -}}
|
||||
<script defer data-domain="sabbatical.ipng.nl" data-api="/api/event" src="/js/script.js"></script>
|
||||
{{- range .AlternativeOutputFormats }}
|
||||
{{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
|
||||
{{- end }}
|
||||
<script defer data-domain="ipng.ch" data-api="/api/event" src="/js/script.js"></script>
|
||||
{{- if eq .Params.asciinema true }}
|
||||
<link rel="stylesheet" type="text/css" href="{{ "css/asciinema-player.css" | relURL }}">
|
||||
<script src="{{ "js/asciinema-player.min.js" | relURL }}"></script>
|
||||
{{- end }}
|
||||
</head>
|
||||
@ -1,2 +1,2 @@
|
||||
<script src="{{ "js/asciinema-player.min.js" | relURL }}"></script><div id='{{ .Get "src" | replaceRE "[[:^alnum:]]" "" }}'></div>
|
||||
<div id='{{ .Get "src" | replaceRE "[[:^alnum:]]" "" }}'></div>
|
||||
<script>AsciinemaPlayer.create("{{ .Get "src" }}", document.getElementById('{{ .Get "src" | replaceRE "[[:^alnum:]]" "" }}'));</script>
|
||||
@ -1,32 +1,30 @@
|
||||
<figure class="image-shortcode{{ with .Get "class" }} {{ . }}{{ end }}
|
||||
{{- with .Get "wide" }}{{- if eq . "true" }} wide{{ end -}}{{ end -}}
|
||||
{{- with .Get "frame" }}{{- if eq . "true" }} frame{{ end -}}{{ end -}}
|
||||
{{- with .Get "float" }} {{ . }}{{ end -}}"
|
||||
style="
|
||||
{{- with .Get "float" }} {{ . }}{{ end -}}" style="
|
||||
{{- with .Get "width" }}width: {{ . }};{{ end -}}
|
||||
{{- with .Get "height" }}height: {{ . }};{{ end -}}">
|
||||
{{- if .Get "link" -}}
|
||||
<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
|
||||
{{- end }}
|
||||
<img src="{{ .Get "src" | relURL }}"
|
||||
{{- if or (.Get "alt") (.Get "caption") }}
|
||||
alt="{{ with .Get "alt" }}{{ replace . "'" "'" }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
|
||||
{{- if or (.Get "alt") (.Get "caption") }} alt="{{ with .Get "alt" }}{{ replace . "'" "'" }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
|
||||
{{- end -}}
|
||||
/> <!-- Closing img tag -->
|
||||
> <!-- Closing img tag -->
|
||||
{{- if .Get "link" }}</a>{{ end -}}
|
||||
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
|
||||
<figcaption>
|
||||
{{ with (.Get "title") -}}
|
||||
<h4>{{ . }}</h4>
|
||||
{{- end -}}
|
||||
{{- if or (.Get "caption") (.Get "attr") -}}<p>
|
||||
{{- .Get "caption" | markdownify -}}
|
||||
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
|
||||
<figcaption>
|
||||
{{ with (.Get "title") -}}
|
||||
<h4>{{ . }}</h4>
|
||||
{{- end -}}
|
||||
{{- if or (.Get "caption") (.Get "attr") -}}<p>
|
||||
{{- .Get "caption" | markdownify -}}
|
||||
{{- with .Get "attrlink" }}
|
||||
<a href="{{ . }}">
|
||||
{{- end -}}
|
||||
{{- .Get "attr" | markdownify -}}
|
||||
{{- if .Get "attrlink" }}</a>{{ end }}</p>
|
||||
{{- end }}
|
||||
</figcaption>
|
||||
</figcaption>
|
||||
{{- end }}
|
||||
</figure>
|
||||
2
themes/hugo-theme-notrack/.gitignore
vendored
2
themes/hugo-theme-notrack/.gitignore
vendored
@ -1,2 +0,0 @@
|
||||
.hugo_build.lock
|
||||
styles.css.map
|
||||
@ -1,538 +0,0 @@
|
||||
# Notrack
|
||||
|
||||
An original, minimal theme with a focus on self-sufficiency and
|
||||
decentralization. By default, Notrack does not rely on any third parties
|
||||
to serve your website. The only exception is Disqus comments, which are
|
||||
not used by default (see [Adding
|
||||
comments](#adding-comments) below).
|
||||
|
||||
# Table of contents
|
||||
|
||||
* [Notrack](#notrack)
|
||||
* [Table of contents](#table-of-contents)
|
||||
* [Screenshot](#screenshot)
|
||||
* [Example site `config`](#example-site-config)
|
||||
* [Shortcodes](#shortcodes)
|
||||
* [User CSS](#user-css)
|
||||
* [Navigation bar](#navigation-bar)
|
||||
* [How to add a page to the navigation bar](#how-to-add-a-page-to-the-navigation-bar)
|
||||
* [How to add a page to drop down menu](#how-to-add-a-page-to-drop-down-menu)
|
||||
* [How tos](#how-tos)
|
||||
* [How to create a home page](#how-to-create-a-home-page)
|
||||
* [How to create a blog](#how-to-create-a-blog)
|
||||
* [Adding comments](#adding-comments)
|
||||
* [How to create a gallery](#how-to-create-a-gallery)
|
||||
* [How to create a resume](#how-to-create-a-resume)
|
||||
* [How to display social links](#how-to-display-social-links)
|
||||
* [Other projects used in this theme](#other-projects-used-in-this-theme)
|
||||
* [Contribution](#contribution)
|
||||
|
||||
# Screenshot
|
||||
|
||||
|
||||
|
||||
# Try it out yourself
|
||||
|
||||
## Dependencies
|
||||
|
||||
You will need the extended edition of Hugo in order to use this theme. This is
|
||||
the edition Hugo's developers recommend for most users. You probably already
|
||||
have it, but you can double check with:
|
||||
|
||||
```
|
||||
$ hugo version
|
||||
hugo v0.115.4+extended linux/amd64 BuildDate=unknown
|
||||
```
|
||||
|
||||
Note the "+extended" after the version number. Information about the standard
|
||||
and extended versions may be found within Hugo's [installation
|
||||
instructions](https://gohugo.io/installation/).
|
||||
|
||||
## Running the example site on localhost
|
||||
|
||||
If you want to try out the theme with an example page, do the following:
|
||||
|
||||
```shell
|
||||
$ git clone https://github.com/gevhaz/hugo-theme-notrack
|
||||
$ mv hugo-theme-notrack notrack
|
||||
$ cd notrack/exampleSite/
|
||||
$ hugo server -D --themesDir ../..
|
||||
```
|
||||
|
||||
You can now see the example website in your browser and interact with it. Hugo
|
||||
will print instructions for what address to use. Usually it is `http://localhost:1313/`.
|
||||
|
||||
# Example site configuration file
|
||||
|
||||
Here is a working `config.yaml`:
|
||||
|
||||
```yaml
|
||||
baseURL = "http://example.org/"
|
||||
languageCode = "en-us"
|
||||
title = "Lawyer Hugo Grotius"
|
||||
theme = "notrack"
|
||||
newContentEditor = "nvim"
|
||||
mainSections = ["blog"]
|
||||
# disqusShortname = "example"
|
||||
paginate = 4
|
||||
|
||||
[params]
|
||||
author = "Hugo de Groot"
|
||||
siteHeading = "Hugo Grotius" # defaults to author
|
||||
favicon = "hugo_grotius.png" # Adds a small icon next to the page title in a tab
|
||||
showBlogLatest = true
|
||||
mainSections = ["blog"]
|
||||
showTaxonomyLinks = false
|
||||
nBlogLatest = 4 # number of blog post om the home page
|
||||
blogLatestHeading = "My writing"
|
||||
footer = "This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License."
|
||||
|
||||
[params.social]
|
||||
github = "example"
|
||||
linkedin = "example"
|
||||
email = "example@example.com"
|
||||
mastodon = "example"
|
||||
medium = "example"
|
||||
keybase = "example"
|
||||
|
||||
[taxonomies]
|
||||
year = "year"
|
||||
month = "month"
|
||||
tags = "tags"
|
||||
categories = "categories"
|
||||
|
||||
[permalinks]
|
||||
blog = "/blog/:year/:month/:slug"
|
||||
```
|
||||
|
||||
# Shortcodes
|
||||
|
||||
| Category | Shortcode | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| **Contact info** | `contact-box` | Displays contact info set in `params.social` |
|
||||
| | `social` | Displays contact info set in `params.social` |
|
||||
| **Photo Gallery** | `gallery-category` | Container for `gallery-photo` shortcodes |
|
||||
| | `gallery-modal` | HTML to allow for full page view of gallery photos |
|
||||
| | `gallery-photo` | Include a photo in a gallery |
|
||||
| | `gallery-script` | Script to allow for full page view of gallery photos |
|
||||
| **General** | `image` | Image for use in any page. See example in [How to create a blog](#how-to-create-a-blog) |
|
||||
| | `video` | Similar to an ordinary `<video>` HTML tag but with a CSS class to make it look good in posts |
|
||||
| | `rawhtml` | For including raw HTML without the global unsafe option for Goldmark |
|
||||
| **Resume** | `container` | Container for resume shortcodes |
|
||||
| | `resume-entry` | One entry in a resume (e.g. a university degree) |
|
||||
| | `resume-section` | One section in resume (e.g. "Education") |
|
||||
| | `resume-subcategory` | Creates a heading within a section of the resume |
|
||||
|
||||
Most of the shortcodes are explained in more detail in their respective
|
||||
sections below. I explain the other two here.
|
||||
|
||||
`rawhtml` can be used like this:
|
||||
|
||||
```go
|
||||
{{< rawhtml >}}<p>A paragraph</p>{{< /rawhtml >}}
|
||||
```
|
||||
|
||||
This allows you to use HTML to create elements that you can't create
|
||||
with just markdown without allowing unsafe HTML in the site configuration file.
|
||||
I'm not a security expert, and there might be a good reason why unsafe HTML
|
||||
is disabled by default. If you think this shortcode shouldn't be part of
|
||||
the theme, feel free to open an issue and say why.
|
||||
|
||||
The `video` shortcode basically just creates a HTML `<video>` tag with a
|
||||
class that I've added some styling for. Use it like this:
|
||||
|
||||
```go
|
||||
{{< video src="your_video.mp4" type="video/mp4" preload="auto" >}}
|
||||
```
|
||||
|
||||
Your video needs to be in the `static` folder or a subdirectory of it such
|
||||
as "video" (in which case you'd add the subdirectory in the `src`
|
||||
parameter.
|
||||
|
||||
## User CSS
|
||||
|
||||
You can add your own CSS by creating a file `assets/css/userstyles.css`. The
|
||||
theme will automatically pick it up.
|
||||
|
||||
## Navigation bar
|
||||
|
||||
### How to add a page to the navigation bar
|
||||
|
||||
Add it to `main` menu in the front matter of the page:
|
||||
|
||||
```yaml
|
||||
---
|
||||
menu:
|
||||
main:
|
||||
title: "Contact"
|
||||
weight: 100
|
||||
---
|
||||
```
|
||||
|
||||
Don't use the site configuration file to add menus because then the highlighting
|
||||
of active tabs might not work (at least not if drop-down menus are involved).
|
||||
|
||||
### How to add a page to drop down menu
|
||||
|
||||
Quick instruction: Set it's `parent` parameter to one of the menus in
|
||||
`main`.
|
||||
|
||||
Instructions with example:
|
||||
|
||||
1. Create the top-level menu in `config.yaml` or your equivalent. An
|
||||
example where the top-level menu doesn't correspond to a real page
|
||||
(`url` is #) and is just there to hold the drop-down menu:
|
||||
|
||||
```yaml
|
||||
menu:
|
||||
main:
|
||||
- identifier: "about-me"
|
||||
name: "About Me"
|
||||
url: "#"
|
||||
weight: 50
|
||||
```
|
||||
|
||||
If you want to add pages to an already existing menu item, you can skip this
|
||||
step and just use that page as a parent in step 2.
|
||||
|
||||
2. In the front matter of the page you want to add, put the following:
|
||||
|
||||
```yaml
|
||||
menu:
|
||||
main:
|
||||
title: <What you want the name of the menu to be>
|
||||
parent: "about-me"
|
||||
weight: <Lower numbers will appear higher up>
|
||||
```
|
||||
|
||||
# How tos
|
||||
|
||||
## How to create a home page
|
||||
|
||||
The first thing you will want to do is set up the home page of the website.
|
||||
Create `/content/_index.md` (`hugo new _index.md`). This could contain a short
|
||||
introduction of what is on the website or of yourself. A shortcode that can be
|
||||
useful here is `image`, which adds an image with an optional frame. You can set
|
||||
the width with the `width` option. Example usage:
|
||||
|
||||
```go
|
||||
{{< image frame="true" width="11em" src="/img/profile-picture.jpg"
|
||||
alt="Picture of me" >}}
|
||||
```
|
||||
|
||||
`frame="true"` adds a frame around the picture. You can also add a caption. See
|
||||
further instructions in [How to create a
|
||||
blog](#how-to-create-a-blog).
|
||||
|
||||
At this point you should also set the title for the web site, your name
|
||||
and the text in the header, if you want it to be different from your
|
||||
name. Example entries in `config.yaml`:
|
||||
|
||||
```yaml
|
||||
title: "My New Hugo Site"
|
||||
params:
|
||||
author: "John Doe"
|
||||
siteHeading: "a header title"
|
||||
```
|
||||
|
||||
If you don't want to show the latest posts from your blog at the bottom
|
||||
of the home page, set `showBlogLatest` to false in your site configuration file.
|
||||
You may also want to change the number of posts shown (default: 3) and
|
||||
the heading above it (default "Latest from the blog") In `config.yaml`, it
|
||||
would look like this:
|
||||
|
||||
```yaml
|
||||
params:
|
||||
showBlogLatest: true
|
||||
blogLatestHeading: "Latests posts"
|
||||
nBlogLatest: 6
|
||||
```
|
||||
|
||||
An alternative way to create the content for the homepage is to have a headless
|
||||
bundle `content/homepage`. The content of the files in this directory will
|
||||
populate the top of the homepage, like in the Hugo Basic Example.
|
||||
|
||||
## How to create a blog
|
||||
|
||||
1. Add some posts with e.g. `hugo new blog/post-1.md` etc.
|
||||
|
||||
2. `hugo new blog/_index.md` and create the blog menu item in the front
|
||||
matter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
menu:
|
||||
main:
|
||||
identifier: "blog"
|
||||
name: "Blog"
|
||||
weight: <lower number than your other menus for more leftward
|
||||
placement>
|
||||
---
|
||||
```
|
||||
|
||||
3. (Optional) Create a drop-down menu with links to tags, categories
|
||||
and archive by creating pages in the style of `hugo new
|
||||
tags/_index.md`. It doesn't need any content at all, just create a
|
||||
front matter where you add it to the main menu with the `identifier`
|
||||
of your blog menu entry as parent:
|
||||
|
||||
```yaml
|
||||
---
|
||||
menu:
|
||||
main:
|
||||
name: "All Tags"
|
||||
parent: "blog"
|
||||
weight: <lower number than your other menus for more upward
|
||||
placement>
|
||||
---
|
||||
```
|
||||
|
||||
In the case of archive, you may also need to set the layout to
|
||||
archives in `_index.md`'s front matter: `layout: archives`.
|
||||
|
||||
For those of you who do the third step, there is an option available to
|
||||
remove the buttons with links to the archive (if you have an archives
|
||||
page, see step 3), tags and category pages from the top of the blog list
|
||||
page. Just set the following in your site configuration file:
|
||||
|
||||
```yaml
|
||||
params:
|
||||
showTaxonomyLinks: false
|
||||
```
|
||||
|
||||
Menus in Hugo are a mess to program for a theme but this should work.
|
||||
It's the method that gives you, the user, the most freedom to choose the
|
||||
structure of your content folder. There are [other
|
||||
methods](https://discourse.gohugo.io/t/another-way-to-make-a-menu-item-active/17029)
|
||||
for theme developers but they would force the user to put all posts in a
|
||||
folder with a specific name.
|
||||
|
||||
If you don't want a drop-down menu for listing categories or tags, just
|
||||
skip step 3. You can still disable the links to the taxonomy pages. Your
|
||||
readers can list all posts from a specific category or a tag by clicking
|
||||
on that category or tag in any post instead, and you can link to
|
||||
`yourpage.com/categories` from other places too.
|
||||
|
||||
You can add images just as for the home page. Available options are those of the
|
||||
built in `figure` shortcode of Hugo, and additionally:
|
||||
|
||||
| Parameter name | Allowed Values |
|
||||
| :--- | :--- |
|
||||
| `float` | right/left |
|
||||
| `frame` | true/false/leave out |
|
||||
| `wide` | true/false |
|
||||
| `width` | e.g. `10em`, `50%`, `70px` |
|
||||
| `height` | e.g. `10em`, `50%`, `70px` |
|
||||
|
||||
A difference from the built in shortcode is that width and height are for the
|
||||
outer `<figure>` element. This allows text to wrap around the picture if you set
|
||||
the float parameter.
|
||||
|
||||
You can also use Hugo's built in short code
|
||||
[figure](https://gohugo.io/content-management/shortcodes/#figure) (an
|
||||
example: `{{< figure src="/img/picture.jpg" width="100%" >}}`)
|
||||
|
||||
### Adding comments
|
||||
|
||||
This theme supports Disqus comments. It goes against the philosophy of
|
||||
the theme in some sense because it relies on external resources but you
|
||||
can enable it if you want.
|
||||
|
||||
Disqus is implemented the [default Hugo
|
||||
way](https://gohugo.io/content-management/comments/#add-disqus) so just
|
||||
add your Disqus Shortname in the site configuration file and all blog posts will
|
||||
have a comments section.
|
||||
|
||||
## How to create a gallery
|
||||
|
||||
There are four shortcodes for creating a gallery:
|
||||
|
||||
* `gallery-category`
|
||||
* `gallery-photo`
|
||||
* `gallery-modal`
|
||||
* `gallery-script`
|
||||
|
||||
The first two are used in combination to create the actual gallery. Do
|
||||
something like the following in one of your pages:
|
||||
|
||||
```go
|
||||
{{< gallery-category >}}
|
||||
{{< gallery-photo fn="<filename of first picture>" caption="<your caption>">}}
|
||||
{{< gallery-photo fn="<filename of second picture>" caption="<your caption>">}}
|
||||
{{< gallery-photo fn="<filename of third picture>" caption="<your caption>">}}
|
||||
{{< gallery-photo fn="<filename of fourth picture>" caption="<your caption>">}}
|
||||
{{< /gallery-category >}}
|
||||
```
|
||||
|
||||
The pictures should be under `static/img/thumbnails` in your project.
|
||||
|
||||
If you want a modal to pop up with a zoomed in version, add the other
|
||||
two shortcodes at the bottom of your page:
|
||||
|
||||
```go
|
||||
{{< gallery-modal >}}
|
||||
{{< gallery-script >}}
|
||||
```
|
||||
|
||||
And place corresponding full-size images under `static/img/fullsize`.
|
||||
The file names need to be the same as for the thumbnails.
|
||||
|
||||
Thumbnails should of course be small so that your page loads fast and
|
||||
full-size should be large enough that they don't look pixelated when
|
||||
covering the full space of a web browser. One way to resize images is
|
||||
with (graphicsmagick)[http://www.graphicsmagick.org/]: `gm mogrify
|
||||
-resize 1920x1920 *.jpg`, which will resize all images in the current
|
||||
folder to a maximum width/height of 1920 pixels (while maintaining the
|
||||
aspect ratio).
|
||||
|
||||
## How to create a resume
|
||||
|
||||
There are some shortcodes that can help you create a resume. These are:
|
||||
|
||||
* `container`
|
||||
* `resume-section`
|
||||
* `resume-category`
|
||||
* `resume-entry`
|
||||
|
||||
`Container` just creates a <div> element with a specific class.
|
||||
`resume-section` needs a title which will be shown to the left of it's
|
||||
content (if it can fit on the screen, otherwise it's on top). Within
|
||||
this, you put one or more `resume-entry` shortcodes. This
|
||||
shortcode takes the three parameters `what`, `where` and `when` (see
|
||||
example usage below). It also takes raw HTML within the shortcode tags.
|
||||
There is styling for `<p>`s, links, and unordered and ordered lists.
|
||||
Apart from that, site-wide CSS is used. Example usage:
|
||||
|
||||
```go
|
||||
{{< container >}}
|
||||
{{< resume-section title="About Me" >}}
|
||||
{{< resume-entry >}}
|
||||
<p>
|
||||
Some info about you.
|
||||
</p>
|
||||
{{< /resume-entry >}}
|
||||
{{< /resume-section >}}
|
||||
|
||||
{{< resume-section title="Education" >}}
|
||||
{{< resume-entry what="Bachelor's program of Computer Science"
|
||||
where="Sidney University"
|
||||
when="2010–2013">}}
|
||||
<ol>
|
||||
<li> Some comment on what skills you learned</li>
|
||||
<li> Some other comment </li>
|
||||
</ol>
|
||||
{{< /resume-entry >}}
|
||||
{{< /resume-section >}}
|
||||
{{< /container >}}
|
||||
```
|
||||
|
||||
A tip is that you can also use the `resume-entry` shortcode with
|
||||
markdown. Just switch use % instead of < and make sure that your
|
||||
markdown doesn't have any white space in front of it (or all of it will
|
||||
be interpreted as code):
|
||||
|
||||
```go
|
||||
{{% resume-entry what="Bachelor's program of Computer Science"
|
||||
where="Sidney University"
|
||||
when="2010–2013" %}}
|
||||
* Some comment on what skills you learned
|
||||
* Some other comment
|
||||
{{% /resume-entry %}}
|
||||
```
|
||||
|
||||
## How to display social links
|
||||
|
||||
There is a shortcode for creating a framed area with links to your
|
||||
profiles called `contact-box`. The thing it does is to put a frame with
|
||||
links to your social media or other contact info on the rights side of the page, and, if you
|
||||
want, some text on the left side of the box, outside the frame. Put this
|
||||
text within the shortcode tags.
|
||||
|
||||
You decide what social media to include in your site configuration file under
|
||||
`social` under `params`, like this:
|
||||
|
||||
```yaml
|
||||
params:
|
||||
social:
|
||||
github: <your github username>
|
||||
email: <email address>
|
||||
```
|
||||
|
||||
For all available social icons, see the `data/notrack/social.yaml` file. There
|
||||
are 65 of them. Then, to display the links somewhere on your page, use either
|
||||
`{{< contact-box >}}` or, for an alternative design, use `{{< social >}}`.
|
||||
Here is a screenshot with `contact-box` to the right and `social`
|
||||
at the bottom:
|
||||
|
||||
<img src="https://raw.githubusercontent.com/gevhaz/hugo-theme-notrack/master/images/social-links.png" width="40%" alt="Example of social link shortcodes">
|
||||
|
||||
For `contact-box`, there are three optional parameters, `float`, `width`
|
||||
and `height`. This is similar to the `image` shortcode. `Float` makes
|
||||
text wrap around the box (can be `right` or `left`), and the other two
|
||||
naturally set the dimensions of the `<div>`, using inline CSS. The
|
||||
parameters defaults to floating to the right, the width defaults to
|
||||
`12em`, and the height defaults to `auto`.
|
||||
|
||||
# How to set a footer
|
||||
|
||||
If you want to add a footer to your web page, you can use the `footer`
|
||||
key in your configuration, e.g:
|
||||
|
||||
```yaml
|
||||
params:
|
||||
footer: "This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License."
|
||||
```
|
||||
|
||||
This will add a HTML <footer> element with a <span> element with your
|
||||
text in it.
|
||||
|
||||
# Other projects used in this theme
|
||||
|
||||
The theme does not secretly download any resources from other websites
|
||||
or CDNs. It does, however, make use of a few other projects. These are
|
||||
included in the theme files, so you'll homepage will serve the
|
||||
resources.
|
||||
|
||||
Some of the fonts under `static/fonts` are parts of the project [GNU
|
||||
FreeFont](https://www.gnu.org/software/freefont/). They are licensed
|
||||
under "GPLv3 or later". Licenses are also supposed to be included in the
|
||||
`.woff` files themselves. Some of the fonts are edited by me to take up
|
||||
less space by including fewer characters.
|
||||
|
||||
The monospace font in the same directory, used for code in the theme, is
|
||||
[Mononoki](https://github.com/madmalik/mononoki). It is licensed under
|
||||
SIL OFL 1.1
|
||||
([https://scripts.sil.org/OFL](https://scripts.sil.org/OFL)).
|
||||
|
||||
The icons used for the `contact-box` and `social` shortcodes are from
|
||||
[Font Awesome](https://github.com/FortAwesome/Font-Awesome) project.
|
||||
It's license is SIL OFL 1.1
|
||||
([https://scripts.sil.org/OFL](https://scripts.sil.org/OFL)). A HTML
|
||||
comment is included in the contact-box shortcode to show the license and
|
||||
source.
|
||||
|
||||
For matching the icons from Font Awesome with names for various social
|
||||
networking services, I use the
|
||||
[`social.yml`](https://github.com/dillonzq/LoveIt/blob/master/assets/data/social.yml)
|
||||
file from the [LoveIt](https://github.com/dillonzq/LoveIt) theme, which
|
||||
uses the MIT license. I modified it to use the *Font Awesome Solid* font
|
||||
for the email icon, because the one in the original file was using the
|
||||
*Font Awesome Regular* font, which it seems only Pro users of Font
|
||||
Awesome [can use](https://fontawesome.com/plans). The solid one also
|
||||
looks better.
|
||||
|
||||
All of the images in the example site are in the public domain.
|
||||
|
||||
# Contribution
|
||||
|
||||
I have tried to test the theme on mobile as well as different screen
|
||||
sizes. If you find a situation where fonts don't have an appropriate
|
||||
size or something else looks off, such as styles completely missing or a
|
||||
page that seems to have the wrong layout, please open an issue. It's
|
||||
difficult to support every possible scenario, but I will see what I can
|
||||
do.
|
||||
|
||||
If some change could be made or something could be added that is in line
|
||||
with the style and philosophy of the theme, and it doesn't break anything,
|
||||
feel free to make a pull request.
|
||||
BIN
themes/hugo-theme-notrack/images/screenshot.png
(Stored with Git LFS)
BIN
themes/hugo-theme-notrack/images/screenshot.png
(Stored with Git LFS)
Binary file not shown.
BIN
themes/hugo-theme-notrack/images/social-links.png
(Stored with Git LFS)
BIN
themes/hugo-theme-notrack/images/social-links.png
(Stored with Git LFS)
Binary file not shown.
BIN
themes/hugo-theme-notrack/images/tn.png
(Stored with Git LFS)
BIN
themes/hugo-theme-notrack/images/tn.png
(Stored with Git LFS)
Binary file not shown.
@ -1,52 +0,0 @@
|
||||
{{ define "main" }}
|
||||
<main>
|
||||
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
|
||||
{{ if default true .Site.Params.showTaxonomyLinks }}
|
||||
<div class="taxonomy-links">
|
||||
<ul>
|
||||
{{- /* code for figuring out where to archives page is, if anywhere */ -}}
|
||||
{{ $archivesExists := false }}
|
||||
{{ $archivesPageTitle := "" }}
|
||||
{{ $archivesPagePermalink := "" }}
|
||||
{{ range .Site.AllPages }}
|
||||
{{ if eq .Layout "archives" }}
|
||||
{{ $archivesExists = true }}
|
||||
{{ $archivesPagePermalink = .Permalink }}
|
||||
{{ with .Title }}
|
||||
{{ $archivesPageTitle = . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if $archivesExists }}
|
||||
<li><a href="{{ $archivesPagePermalink }}">{{ default "Archives" $archivesPageTitle }}</a></li>
|
||||
{{ end }}
|
||||
|
||||
{{ range $taxonomyName, $taxonomy := .Site.Taxonomies }}
|
||||
{{ if or (in $taxonomyName "categ") (in $taxonomyName "tag") }}
|
||||
<li><a href="{{ $taxonomyName | relURL }}">{{ $taxonomyName }}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{- if .Pages -}}
|
||||
{{- $pages := (where .Pages ".Draft" false) -}}
|
||||
|
||||
{{- /* Use site config params for posts per page if available, otherwise default */ -}}
|
||||
{{- with .Site.Params.list.paginate | default .Site.Params.paginate -}}
|
||||
{{- $pages = $.Paginate $pages . -}}
|
||||
{{- else -}}
|
||||
{{- $pages = .Paginate $pages -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- range $pages.Pages -}}
|
||||
{{ partial "blog-entry-summary.html" . }}
|
||||
{{- end -}}
|
||||
|
||||
{{ partial "pagination.html" . }}
|
||||
{{- end -}}
|
||||
</main>
|
||||
{{ end }}
|
||||
@ -1,24 +0,0 @@
|
||||
{{ define "main" }}
|
||||
<main>
|
||||
<article>
|
||||
{{ if in site.Params.mainSections .Page.Section }}
|
||||
<h1 class="page-title blog">{{ .Title }}</h1>
|
||||
{{ else }}
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
{{ end }}
|
||||
|
||||
{{- /* Show post information if it's a post, otherwise just the content */ -}}
|
||||
{{ if in site.Params.mainSections .Page.Section }}
|
||||
<p class="blog-post-info">Posted: <time>{{ .Date.Format "2006-01-02" }}</time>
|
||||
{{ partial "blog-taxonomy-info" . }}</p>
|
||||
|
||||
<div class="blog-post-content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
{{ else }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
</article>
|
||||
</main>
|
||||
{{ end }}
|
||||
@ -1,17 +0,0 @@
|
||||
{{ with .Params.Categories }}
|
||||
<span class="blog-taxonomy-info"> | Categories:
|
||||
{{ $sort := sort . }}
|
||||
{{ $links := apply $sort "partial" "post-category-link" "." }}
|
||||
{{ $clean := apply $links "chomp" "." }}
|
||||
{{ delimit $clean ", " | safeHTML }}
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.Tags }}
|
||||
<span class="blog-taxonomy-info"> | Tags:
|
||||
{{ $sort := sort . }}
|
||||
{{ $links := apply $sort "partial" "post-tag-link" "." }}
|
||||
{{ $clean := apply $links "chomp" "." }}
|
||||
{{ delimit $clean ", " | safeHTML }}
|
||||
</span>
|
||||
{{ end }}
|
||||
@ -1,3 +0,0 @@
|
||||
<footer class='page-footer'>
|
||||
<span>{{ .Site.Params.Footer }}</span>
|
||||
</footer>
|
||||
@ -1 +0,0 @@
|
||||
<p class="resume-subcategory">{{ .Get "title" }}</p>
|
||||
@ -1,31 +0,0 @@
|
||||
<div class="resume-entry">
|
||||
<!-- What the resume entry is about (degree program, work, etc.) -->
|
||||
{{ with .Get "what" }}
|
||||
<p class="what">{{ . }}</p>
|
||||
{{ end }}
|
||||
|
||||
{{ $where := false }}
|
||||
{{ $when := false }}
|
||||
|
||||
{{/* Where was the thing you did? (e.g. Mozilla) */}}
|
||||
{{ with .Get "where" }}{{ $where = . }}{{ end }}
|
||||
|
||||
{{/* When did you do it? (e.g. 2020) */}}
|
||||
{{- with .Get "when" }}{{ $when = . }}{{ end }}
|
||||
|
||||
{{ if and $where $when }}
|
||||
<p class="resume-entry-data"><span class="where">{{ $where }}</span> |
|
||||
<span class="when">{{ $when }}</span></p>
|
||||
{{ else if $where }}
|
||||
<p class="resume-entry-data"><span class="where">{{ $where }}</span></p>
|
||||
{{ else if $when }}
|
||||
<p class="resume-entry-data"><span class="when">{{ $when }}</span></p>
|
||||
{{ end }}
|
||||
|
||||
{{/* additional HTML under or as the entry */}}
|
||||
{{ if gt (len .Inner) 0 }}
|
||||
<div class="resume-inner">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
@ -1,6 +0,0 @@
|
||||
<div class="category-title">
|
||||
<h4>{{ .Get "title" }}</h4>
|
||||
</div>
|
||||
<div class="category-content">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
Reference in New Issue
Block a user