Change theme, add background

This commit is contained in:
Mans Ziesel 2023-03-18 19:51:40 +01:00
parent a91c6a2623
commit 049bce148f
6 changed files with 99 additions and 31 deletions

BIN
assets/img/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

View File

@ -5,20 +5,20 @@ isoCode = "en"
weight = 2 weight = 2
rtl = false rtl = false
title = "Blowfish" title = "Mans Ziesel"
# logo = "img/logo.png" # logo = "img/Mans_Ziesel_Portrait.jpg"
# description = "My awesome website" description = "Website van Mans Ziesel"
# copyright = "Copy, _right?_ :thinking_face:" # copyright = "Copy, _right?_ :thinking_face:"
dateFormat = "2 January 2006" dateFormat = "2 January 2006"
# [author] [author]
# name = "Your name here" name = "Mans Ziesel"
# image = "img/blowfish_logo.png" image = "img/Mans_Ziesel_Portrait.jpg"
# headline = "I'm only human" headline = "ICT'er & student bij ROC van Twente"
# bio = "A little bit about you" bio = "A little bit about you"
# links = [ links = [
# { email = "mailto:hello@your_domain.com" }, { email = "mailto:hello@your_domain.com" },
# { link = "https://link-to-some-website.com/" }, # { link = "https://link-to-some-website.com/" },
# { amazon = "https://www.amazon.com/hz/wishlist/ls/wishlist-id" }, # { amazon = "https://www.amazon.com/hz/wishlist/ls/wishlist-id" },
# { apple = "https://www.apple.com" }, # { apple = "https://www.apple.com" },
@ -30,7 +30,7 @@ dateFormat = "2 January 2006"
# { facebook = "https://facebook.com/username" }, # { facebook = "https://facebook.com/username" },
# { flickr = "https://www.flickr.com/photos/username/" }, # { flickr = "https://www.flickr.com/photos/username/" },
# { foursquare = "https://foursquare.com/username" }, # { foursquare = "https://foursquare.com/username" },
# { github = "https://github.com/username" }, { github = "https://github.com/username" },
# { gitlab = "https://gitlab.com/username" }, # { gitlab = "https://gitlab.com/username" },
# { google = "https://www.google.com/" }, # { google = "https://www.google.com/" },
# { hashnode = "https://username.hashnode.dev" }, # { hashnode = "https://username.hashnode.dev" },
@ -38,7 +38,7 @@ dateFormat = "2 January 2006"
# { keybase = "https://keybase.io/username" }, # { keybase = "https://keybase.io/username" },
# { kickstarter = "https://www.kickstarter.com/profile/username" }, # { kickstarter = "https://www.kickstarter.com/profile/username" },
# { lastfm = "https://lastfm.com/user/username" }, # { lastfm = "https://lastfm.com/user/username" },
# { linkedin = "https://linkedin.com/in/username" }, { linkedin = "https://linkedin.com/in/username" },
# { mastodon = "https://mastodon.instance/@username" }, # { mastodon = "https://mastodon.instance/@username" },
# { medium = "https://medium.com/username" }, # { medium = "https://medium.com/username" },
# { microsoft = "https://www.microsoft.com/" }, # { microsoft = "https://www.microsoft.com/" },
@ -60,4 +60,4 @@ dateFormat = "2 January 2006"
# { whatsapp = "https://wa.me/phone-number" }, # { whatsapp = "https://wa.me/phone-number" },
# { youtube = "https://youtube.com/username" }, # { youtube = "https://youtube.com/username" },
# { ko-fi = "https://ko-fi.com/username" }, # { ko-fi = "https://ko-fi.com/username" },
# ] ]

View File

@ -6,19 +6,19 @@ weight = 1
rtl = false rtl = false
title = "Mans Ziesel" title = "Mans Ziesel"
# logo = "img/logo.png" # logo = "img/Mans_Ziesel_Portrait.jpg"
# description = "My awesome website" description = "Website van Mans Ziesel"
# copyright = "Copy, _right?_ :thinking_face:" # copyright = "Copy, _right?_ :thinking_face:"
dateFormat = "2 January 2006" dateFormat = "2 January 2006"
# [author] [author]
# name = "Your name here" name = "Mans Ziesel"
# image = "img/blowfish_logo.png" image = "img/Mans_Ziesel_Portrait.jpg"
# headline = "I'm only human" headline = "ICT'er & student bij ROC van Twente"
# bio = "A little bit about you" bio = "A little bit about you"
# links = [ links = [
# { email = "mailto:hello@your_domain.com" }, { email = "mailto:hello@your_domain.com" },
# { link = "https://link-to-some-website.com/" }, # { link = "https://link-to-some-website.com/" },
# { amazon = "https://www.amazon.com/hz/wishlist/ls/wishlist-id" }, # { amazon = "https://www.amazon.com/hz/wishlist/ls/wishlist-id" },
# { apple = "https://www.apple.com" }, # { apple = "https://www.apple.com" },
@ -30,7 +30,7 @@ dateFormat = "2 January 2006"
# { facebook = "https://facebook.com/username" }, # { facebook = "https://facebook.com/username" },
# { flickr = "https://www.flickr.com/photos/username/" }, # { flickr = "https://www.flickr.com/photos/username/" },
# { foursquare = "https://foursquare.com/username" }, # { foursquare = "https://foursquare.com/username" },
# { github = "https://github.com/username" }, { github = "https://github.com/username" },
# { gitlab = "https://gitlab.com/username" }, # { gitlab = "https://gitlab.com/username" },
# { google = "https://www.google.com/" }, # { google = "https://www.google.com/" },
# { hashnode = "https://username.hashnode.dev" }, # { hashnode = "https://username.hashnode.dev" },
@ -38,7 +38,7 @@ dateFormat = "2 January 2006"
# { keybase = "https://keybase.io/username" }, # { keybase = "https://keybase.io/username" },
# { kickstarter = "https://www.kickstarter.com/profile/username" }, # { kickstarter = "https://www.kickstarter.com/profile/username" },
# { lastfm = "https://lastfm.com/user/username" }, # { lastfm = "https://lastfm.com/user/username" },
# { linkedin = "https://linkedin.com/in/username" }, { linkedin = "https://linkedin.com/in/username" },
# { mastodon = "https://mastodon.instance/@username" }, # { mastodon = "https://mastodon.instance/@username" },
# { medium = "https://medium.com/username" }, # { medium = "https://medium.com/username" },
# { microsoft = "https://www.microsoft.com/" }, # { microsoft = "https://www.microsoft.com/" },
@ -60,4 +60,4 @@ dateFormat = "2 January 2006"
# { whatsapp = "https://wa.me/phone-number" }, # { whatsapp = "https://wa.me/phone-number" },
# { youtube = "https://youtube.com/username" }, # { youtube = "https://youtube.com/username" },
# { ko-fi = "https://ko-fi.com/username" }, # { ko-fi = "https://ko-fi.com/username" },
# ] ]

View File

@ -17,9 +17,9 @@ enableCodeCopy = true
disableImageOptimization = false disableImageOptimization = false
# defaultBackgroundImage = "IMAGE.jpg" # used as default for background images defaultBackgroundImage = "/img/bg.jpg" # used as default for background images
# highlightCurrentMenuArea = true highlightCurrentMenuArea = true
smartTOC = true smartTOC = true
smartTOCHideUnfocusedChildren = true smartTOCHideUnfocusedChildren = true
@ -30,19 +30,19 @@ smartTOCHideUnfocusedChildren = true
showMenu = true showMenu = true
showCopyright = true showCopyright = true
showThemeAttribution = true showThemeAttribution = true
showAppearanceSwitcher = false showAppearanceSwitcher = true
showScrollToTop = true showScrollToTop = true
[homepage] [homepage]
layout = "profile" # valid options: page, profile, hero, card, background, custom layout = "background-custom" # valid options: page, profile, hero, card, background, custom
#homepageImage = "IMAGE.jpg" # used in: hero, and card # homepageImage = "IMAGE.jpg" # used in: hero, and card
showRecent = false showRecent = false
showRecentItems = 5 showRecentItems = 5
showMoreLink = false showMoreLink = false
showMoreLinkDest = "/posts" showMoreLinkDest = "/posts"
cardView = false cardView = false
cardViewScreenWidth = false cardViewScreenWidth = false
layoutBackgroundBlur = false # only used when layout equals background layoutBackgroundBlur = true # only used when layout equals background
[article] [article]
showDate = true showDate = true

View File

@ -0,0 +1,68 @@
<article class="max-w-full prose dark:prose-invert">
<div class="relative">
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
<div class="mx-auto max-w-7xl p-0">
<div class="relative sm:overflow-hidden">
<div class="fixed inset-x-0 top-0" style="z-index:-10">
{{ $homepageImage := "" }}
{{ with .Site.Params.defaultBackgroundImage }}{{ $homepageImage = resources.Get . }}{{ end }}
{{ with .Site.Params.homepage.homepageImage }}{{ $homepageImage = resources.Get . }}{{ end }}
{{ if not (eq $homepageImage "") }}
<img class="w-full h-[1000px] object-cover m-0 nozoom" src="{{ $homepageImage.RelPermalink }}" role="presentation">
<div
class="absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
</div>
<div
class="opacity-60 absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal">
</div>
{{ end }}
</div>
<div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8 flex flex-col items-center justify-center text-center">
{{ with .Site.Author.image }}
{{ $authorImage := resources.Get . }}
{{ if $authorImage }}
{{ $authorImage := $authorImage.Fill "320x320" }}
<img class="mb-2 rounded-full h-60 w-60" width="240" height="240"
alt="{{ $.Site.Author.name | default " Author" }}" src="{{ $authorImage.RelPermalink }}" />
{{ end }}
{{ end }}
<h1 class="mb-2 text-4xl font-extrabold text-neutral-800 dark:text-neutral-200">
{{ .Site.Author.name | default .Site.Title }}
</h1>
{{ with .Site.Author.headline }}
<h2 class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300">
{{ . | markdownify | emojify }}
</h2>
{{ end }}
<div class="mt-1 mb-10 text-2xl">
{{ with .Site.Author.links }}
<div class="flex flex-wrap">
{{ range $links := . }}
{{ range $name, $url := $links }}
<a class="px-2 hover:text-primary-400 text-primary-800 dark:text-primary-200" href="{{ $url }}" target="_blank"
aria-label="{{ $name | title }}" rel="me noopener noreferrer">{{ partial
"icon.html" $name }}</a>
{{ end }}
{{ end }}
</div>
{{ end }}
</div>
<section class="prose dark:prose-invert">{{ .Content | emojify }}</section>
</div>
</div>
</div>
</div>
</article>
<section>
{{ partial "recent-articles/main.html" . }}
</section>
{{ if .Site.Params.homepage.layoutBackgroundBlur | default false }}
<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
<script>
window.addEventListener('scroll', function (e) {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var background_blur = document.getElementById('background-blur');
background_blur.style.opacity = (scroll / 300)
});
</script>
{{ end }}

BIN
static/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB