theme: add wordmark to the design

assets/scss/components/_header.scss

@@ -1,22 +1,27 @@
 .site-title {
 
-  /* stylelint-disable plugin/no-unsupported-browser-features */
-  font-size: 6vw;
-  text-transform: uppercase;
+	/* stylelint-disable plugin/no-unsupported-browser-features */
+	font-size: 6vw;
+	text-transform: uppercase;
 
-  a {
-    text-decoration: none;
+	a {
+		text-decoration: none;
 
-    &:hover {
-      text-decoration: none;
-    }
+		&:hover {
+			text-decoration: none;
+		}
 
-    @include text-shadow();
-  }
+		@include text-shadow();
+	}
 
-  @extend .display-1;
+	svg {
+		fill: var(--primary);
+		padding: 0 1rem;
+	}
+
+	@extend .display-1;
 }
 
 menu {
-  margin: 0;
+	margin: 0;
 }

assets/scss/components/_navigation.scss

@@ -1,56 +1,57 @@
 .navbar {
 
-  --bs-navbar-padding-y: 0;
+	--bs-navbar-padding-y: 0;
 
-  .light & {
-    @extend .navbar-light;
-    @extend .bg-white;
-  }
+	.light & {
+		@extend .navbar-light;
+		@extend .bg-white;
+	}
 
-  .dark & {
-    background-color: var(--bg-page);
-    @extend .navbar-dark;
-  }
+	.dark & {
+		background-color: var(--bg-page);
+		@extend .navbar-dark;
+	}
 
-  .nav-link {
-    &:hover .icon--bs {
-      color: var(--primary);
-    }
+	.nav-link {
+		&:hover .icon--bs {
+			color: var(--primary);
+		}
 
-    .icon--bs {
-      display: inline-block;
-      margin-right: 0.4rem;
-      margin-bottom: 0.1rem;
+		.icon--bs {
+			display: inline-block;
+			margin-right: 0.4rem;
+			margin-bottom: 0.1rem;
 
-      vertical-align: bottom;
-    }
-  }
+			vertical-align: bottom;
+		}
+	}
 
 }
 
 .navbar-dark .navbar-brand,
 .navbar-light .navbar-brand {
-  margin-bottom: -10px;
+	margin-bottom: -10px;
 
-  a {
-    font-weight: $font-weight-bolder;
-    text-transform: uppercase;
-  }
+	a {
+		font-weight: $font-weight-bolder;
+		text-transform: uppercase;
+	}
 
-  img {
-    margin-right: 5px;
-    margin-bottom: 10px;
-    aspect-ratio: 1/1;
-  }
+	svg {
+		height: 28px;
+		width: auto;
+		fill: var(--primary);
+		padding-bottom: 5px;
+	}
 
 }
 
 .is--themeswitcher {
-  >span {
-    color: #{var(--color)};
+	>span {
+		color: #{var(--color)};
 
-    &.active {
-      color: var(--primary);
-    }
-  }
+		&.active {
+			color: var(--primary);
+		}
+	}
 }

content/colophon/index.md

@@ -24,16 +24,16 @@ _build:
   list: never
 ---
 
-## Patrick Kollitsch
+# Patrick Kollitsch
 
-### I currently live in:
+## I currently live in:
 
 - ~~Zwickau, Germany~~
 - ~~Lübeck, Germany~~
 - ~~Berlin, Germany~~
 - Koh Samui, Thailand
 
-### Things I have done:
+## Things I have done:
 
 - Taught web development to whoever asked and listened.
 - Lived abroad as an expat for {{< age type="years" date="2005-01-08" >}}+ years.
@@ -43,3 +43,7 @@ _build:
 - Prototyped and launched a successful German weblog update check app in the 90s of past century.
 - Prototyped and programmed a online booking system for local tour companies on Koh Samui.
 - This Site (built with [GoHugo](https://gohugo.io) and my own theme.
+
+## Technical Details of this Site
+
+- Wordmark (kollitsch.dev*): used font is Bahn Pro Regular with diminished character spacing of 6.3 pixels.

layouts/index.html

@@ -6,7 +6,11 @@
           <div class="col-12">
             <div class="text-center text-gradient site-title">
               <a href="{{- site.BaseURL -}}">
-                {{- site.Title -}}
+								{{- with resources.Get "/images/wordmark.svg" -}}
+								<span class="w-max h-max">
+									{{- .Content | safeHTML -}}
+								</span>
+								{{- end -}}
               </a>
             </div>
           </div>

layouts/partials/header/navbar/brand.html

@@ -3,9 +3,11 @@
   <a href="{{- site.BaseURL | relLangURL -}}">
     <img class="rounded-circle" src="{{- site.Params.dnb.theme.logo | absURL -}}" alt="Logo of {{ site.Title -}}"
          height="{{- site.Params.dnb.theme.logo_height -}}" width="{{- site.Params.dnb.theme.logo_width -}}">
-    {{- if site.Params.dnb.theme.show_title -}}
-    {{- site.Title -}}
-    {{- end -}}
+		{{- with resources.Get "/images/wordmark.svg" -}}
+		<span class="w-max h-max">
+			{{- .Content | safeHTML -}}
+		</span>
+		{{- end -}}
   </a>
   {{- else -}}
   <a href="{{- site.BaseURL | relLangURL -}}">