themes/kobel
themes/kobel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

FIX theme toggler CHANGE image optimization ADD custom markdown image rendering

Browse source
This commit is contained in:
Hoernschen 2024-01-15 22:55:39 +01:00
parent a841050e84
commit 07f46720f8
Signed by: hoernschen
GPG key ID: 37591FAF4E6D3462
11 changed files with 81 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/build/images.sh
View file

@ -15,7 +15,7 @@ shopt -s globstar
# Resize
sizes=(320 640 960 1280)
for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png|gif); do
for FILE in public/**/*.@(jpg|jpeg|tif|tiff|png|gif); do
DIR=$(dirname "$FILE")
NAME=$(basename "$FILE" | cut -d. -f1)
EXTENSION=$(basename "$FILE" | cut -d. -f2)
@ -25,7 +25,7 @@ for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png|gif); do
done
# Web Optimized Formats
for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png|gif); do
for FILE in public/**/*.@(jpg|jpeg|tif|tiff|png|gif); do
convert $PARAMS "$FILE" "${FILE}".webp;
convert $PARAMS "$FILE" "${FILE}".avif;
done

19
assets/scss/index.scss
View file

@ -161,6 +161,13 @@ a {
z-index: 10;
}
#theme-toggler {
border: none;
background: inherit;
color: {{ .Site.Params.color.secondary }};
cursor: pointer;
}
/* Footer */
.footer {
@ -365,7 +372,7 @@ main > .content {
}
.hero > .content > .image {
max-width: 200px;
max-width: 150px;
}
.hero > .description {
@ -397,7 +404,7 @@ main > .content {
border-bottom: 3px solid {{ .Site.Params.color.primary }};
}
.hero > .content > div {
.hero > .content > .heading {
flex-grow: 1;
display: flex;
flex-direction: column;
@ -473,6 +480,7 @@ img {
height: auto;
margin: auto;
object-fit: contain;
border-radius: 6px;
}
.avatar {
@ -480,3 +488,10 @@ img {
border: 3px solid {{ .Site.Params.color.primary }};
object-fit: cover;
}
.caption {
text-align: center;
color: gray;
font-size: small;
margin: 0px;
}

15
layouts/_default/_markup/render-image.html Normal file
View file

@ -0,0 +1,15 @@
{{ $caption := .Title }}
{{ $alt := .Text }}
{{ $img := .Page.Resources.GetMatch .Destination }}
{{ if not $img }}
{{ $img = resources.Get .Destination }}
{{ if not $img }}
{{ $img := resources.GetRemote .Destination | resources.Copy (path.Join "images" (path.Base .Destination)) }}
{{ end }}
{{ end }}
{{ with $img }}
{{ partial "components/image.html" (dict "url" .RelPermalink "alt" $alt "width" .Width "height" .Height) }}
<p class="caption">{{ $caption }}</p>
{{ end }}

7
layouts/_default/single.html
View file

@ -1,11 +1,4 @@
{{ define "main" }}
{{ with .Params.image }}
{{ if .url }}
<img class="coverimage" src="{{ .url }}" alt="{{ .alt }}" />
{{ else }}
<img class="coverimage" src="{{ . }}" />
{{ end }}
{{ end }}
<div class="content">
{{ with .Title }}
<div class="title">

5
layouts/partials/components/image.html
View file

@ -1,5 +1,5 @@
<!--
type: string - default
type: string - default empty
url: string
alt: string
width: int
@ -9,6 +9,7 @@ height: int
{{ $ext := path.Ext .url }}
{{ $name := path.Base (replace .url $ext "") }}
{{ $dir := path.Dir .url }}
{{ $mediaWidthControl := "(min-width: 1240px) 50px, 70vw" }}
<picture>
<source
@ -19,6 +20,7 @@ height: int
{{ end }}
{{ .url }}.avif {{ .width }}w
"
sizes="{{ $mediaWidthControl }}"
/>
<source
type="image/webp"
@ -28,6 +30,7 @@ height: int
{{ end }}
{{ .url }}.webp {{ .width }}w
"
sizes="{{ $mediaWidthControl }}"
/>
<img
class="{{ .type }}"

2
layouts/partials/head.html
View file

@ -28,6 +28,4 @@
{{ end }}
<link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
<script src="/js/index.js"></script>
<script src="/js/theme.js"></script>
<script src="/js/scroll.js"></script>
</head>

2
layouts/partials/header.html
View file

@ -9,7 +9,7 @@
{{ end }}
{{ end }}
</div>
<a id="theme-toggler" href="#"><i class="icon-adjust"></i></a>
<button id="theme-toggler"><i class="icon-adjust"></i></button>
</div>
</header>
{{ end }}

2
layouts/partials/hero.html
View file

@ -18,7 +18,7 @@ content: string
{{ partial "components/image.html" .avatar }}
</div>
{{ end }}
<div>
<div class="heading">
<h1>{{ .greeting }}</h1>
<h3>{{ .introduction }}</h3>
{{ if .social }}

41
static/js/index.js
View file

@ -1,3 +1,44 @@
window.onload = (event) => {
const btn = document.getElementById("theme-toggler");
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
const currentTheme = sessionStorage.getItem("theme");
if (currentTheme == "dark") {
document.body.classList.toggle("dark");
} else if (currentTheme == "light") {
document.body.classList.toggle("light");
btn.classList.toggle("rotate-180");
}
btn.addEventListener("click", function () {
btn.classList.toggle("rotate-180");
var theme = "dark";
if (darkTheme.matches) {
document.body.classList.toggle("light");
theme = document.body.classList.contains("light") ? "light" : "dark";
} else {
document.body.classList.toggle("dark");
theme = document.body.classList.contains("dark") ? "dark" : "light";
}
sessionStorage.setItem("theme", theme);
});
if ((document.documentElement.scrollHeight / window.screen.availHeight ) > 1.5) {
window.addEventListener("scroll", () => {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById('progress').style.width = scrolled + "%";
const toTop = document.getElementById('totop');
if ((window.scrollY > 0 && !toTop.classList.contains("show")) || (window.scrollY <= 0 && toTop.classList.contains("show"))) {
toTop.classList.toggle("show");
}
});
}
}
function toggleTableOfContent(e) {
const toc = document.getElementById('TableOfContents');
toc.classList.toggle("show");

16
static/js/scroll.js
View file

@ -1,16 +0,0 @@
window.onload = (event) => {
if ((document.documentElement.scrollHeight / window.screen.availHeight ) > 1.5) {
window.addEventListener("scroll", () => {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById('progress').style.width = scrolled + "%";
const toTop = document.getElementById('totop');
if ((window.scrollY > 0 && !toTop.classList.contains("show")) || (window.scrollY <= 0 && toTop.classList.contains("show"))) {
toTop.classList.toggle("show");
}
});
}
}

27
static/js/theme.js
View file

@ -1,27 +0,0 @@
// https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class
window.onload = (event) => {
const btn = document.getElementById("theme-toggler");
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
document.body.classList.toggle("dark");
} else if (currentTheme == "light") {
document.body.classList.toggle("light");
btn.classList.toggle("rotate-180");
}
btn.addEventListener("click", function () {
btn.classList.toggle("rotate-180");
var theme = "dark";
if (darkTheme.matches) {
document.body.classList.toggle("light");
theme = document.body.classList.contains("light") ? "light" : "dark";
} else {
document.body.classList.toggle("dark");
theme = document.body.classList.contains("dark") ? "dark" : "light";
}
localStorage.setItem("theme", theme);
});
}