207 lines
9.4 KiB
HTML
Executable file
207 lines
9.4 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta charset="utf-8">
|
|
<!-- Include core CSS files -->
|
|
<link rel="stylesheet" href="{{ "css/core/reset.css" | relURL }}">
|
|
<link rel="stylesheet" href="{{ "css/core/theme-vars.css" | relURL }}">
|
|
<link rel="stylesheet" href="{{ "css/core/zmedia.css" | relURL }}">
|
|
<!-- Include home page specific styles -->
|
|
<link rel="stylesheet" href="{{ "css/home.css" | relURL }}">
|
|
|
|
<!-- Include concatenated and minified stylesheet -->
|
|
{{- $theme_vars := (resources.Get "css/core/theme-vars.css") }}
|
|
{{- $reset := (resources.Get "css/core/reset.css") }}
|
|
{{- $media := (resources.Get "css/core/zmedia.css") }}
|
|
{{- $common := (resources.Match "css/common/*.css") | resources.Concat "assets/css/common.css" }}
|
|
{{- $extended := (resources.Match "css/extended/*.css") | resources.Concat "assets/css/extended.css" }}
|
|
{{- $core := (slice $theme_vars $reset $common $media $extended) | resources.Concat "assets/css/core.css" | resources.Minify }}
|
|
<link rel="stylesheet" href="{{ $core.RelPermalink }}">
|
|
|
|
|
|
</head>
|
|
|
|
<header>
|
|
<!-- Script to automatically toggle to the right theme -->
|
|
{{- /* theme-toggle is enabled */}}
|
|
{{- if (not site.Params.disableThemeToggle) }}
|
|
{{- /* theme is light */}}
|
|
{{- if (eq site.Params.defaultTheme "light") }}
|
|
<script>
|
|
if (localStorage.getItem("pref-theme") === "dark") {
|
|
document.body.classList.add('dark');
|
|
}
|
|
</script>
|
|
{{- /* theme is dark */}}
|
|
{{- else if (eq site.Params.defaultTheme "dark") }}
|
|
<script>
|
|
if (localStorage.getItem("pref-theme") === "light") {
|
|
document.body.classList.remove('dark')
|
|
}
|
|
</script>
|
|
{{- else }}
|
|
{{- /* theme is auto */}}
|
|
<script>
|
|
if (localStorage.getItem("pref-theme") === "dark") {
|
|
document.body.classList.add('dark');
|
|
} else if (localStorage.getItem("pref-theme") === "light") {
|
|
document.body.classList.remove('dark')
|
|
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.body.classList.add('dark');
|
|
}
|
|
</script>
|
|
{{- end }}
|
|
{{- /* theme-toggle is disabled and theme is auto */}}
|
|
{{- else if (and (ne site.Params.defaultTheme "light") (ne site.Params.defaultTheme "dark"))}}
|
|
<script>
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.body.classList.add('dark');
|
|
}
|
|
</script>
|
|
{{- end }}
|
|
</header>
|
|
|
|
<body>
|
|
<div class="main-screen">
|
|
<div class="side-screen">
|
|
{{ partial "posts-defile.html" (dict "context" . "direction" "up") }}
|
|
</div>
|
|
<div class="main-content">
|
|
<div class="header">
|
|
<div class="title-wrapper">
|
|
<h1 class="site-title">Achille<br/>Toupin</h1>
|
|
<div class="site-logo">
|
|
<img src="favicon.svg" alt="Logo de machine à écrire">
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="navigation">
|
|
{{ partial "menu.html" }}
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="center-content">
|
|
<div class="presentation">
|
|
{{ .Content }}
|
|
</div>
|
|
<div class="side-content-column">
|
|
<div class="dernier-article">
|
|
{{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
|
|
{{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
|
|
{{- if $image -}}
|
|
{{- $optimizedImage := $image.Fill "150x150 webp q95 Center" -}}
|
|
<a href="{{ .RelPermalink }}">
|
|
<h2>Mon dernier article :</h2>
|
|
<h3>{{ .Title }}</h3>
|
|
<div class="excerpt">
|
|
<div class="excerpt-text">
|
|
<small>{{ .Date.Format "January 2, 2006" }}</small>
|
|
<p>{{ .Plain | plainify | truncate 100 }}</p>
|
|
</div>
|
|
<img src="{{ $optimizedImage.RelPermalink }}" alt="{{ .Title }} cover image"></img>
|
|
</div>
|
|
</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
<div class="dernier-article">
|
|
{{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "collection") }}
|
|
{{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
|
|
{{- if $image -}}
|
|
{{- $optimizedImage := $image.Fit "150x150 webp q95 Center" -}}
|
|
<a href="{{ .RelPermalink }}">
|
|
<h2>Une belle machine :</h2>
|
|
<h3>{{ .Title }}</h3>
|
|
<div class="excerpt">
|
|
<div class="excerpt-text">
|
|
<small>{{ .Date.Format "January 2, 2006" }}</small>
|
|
<p>{{ .Plain | plainify | truncate 100 }}</p>
|
|
</div>
|
|
<img src="{{ $optimizedImage.RelPermalink }}" alt="{{ .Title }} cover image"></img>
|
|
</div>
|
|
</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
|
|
<div class="dernier-livre">
|
|
{{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "livres") }}
|
|
{{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
|
|
{{- if $image -}}
|
|
{{- $optimizedImage := $image.Fit "150x150 webp q95 Center" -}}
|
|
<a href="{{ .RelPermalink }}">
|
|
<h2>Lecture du moment :</h2>
|
|
<h3>{{ .Title }}</h3>
|
|
<div class="excerpt">
|
|
<div class="excerpt-text">
|
|
<small>{{ .Date.Format "January 2, 2006" }}</small>
|
|
<p>{{ .Plain | plainify | truncate 100 }}</p>
|
|
</div>
|
|
<img src="{{ $optimizedImage.RelPermalink }}" alt="{{ .Title }} cover image"></img>
|
|
</div>
|
|
</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ partial "buttons.html"}}
|
|
{{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
|
|
</div>
|
|
<div class="side-screen">
|
|
{{ partial "posts-defile.html" (dict "context" . "direction" "down") }}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<footer>
|
|
<!-- Script to toggle theme. has to be at the end of the page -->
|
|
{{- if (not site.Params.disableThemeToggle) }}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const themeToggleButton = document.getElementById("theme-toggle");
|
|
if (themeToggleButton) {
|
|
themeToggleButton.addEventListener("click", () => {
|
|
if (document.body.className.includes("dark")) {
|
|
document.body.classList.remove('dark');
|
|
localStorage.setItem("pref-theme", 'light');
|
|
} else {
|
|
document.body.classList.add('dark');
|
|
localStorage.setItem("pref-theme", 'dark');
|
|
}
|
|
});
|
|
} else {
|
|
console.error("Theme toggle button not found");
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
const observer = new MutationObserver(() => {
|
|
const themeToggleButton = document.getElementById("theme-toggle");
|
|
if (themeToggleButton) {
|
|
observer.disconnect(); // Stop observing once the button is found. Explanation :
|
|
/*
|
|
the .theme-toggle button is being rendered dynamically (e.g., via a Hugo partial or JavaScript),
|
|
so it might not exist in the DOM when the script runs.
|
|
To handle this, you can use a MutationObserver to detect when the button is added to the DOM
|
|
*/
|
|
themeToggleButton.addEventListener("click", () => {
|
|
if (document.body.className.includes("dark")) {
|
|
document.body.classList.remove('dark');
|
|
localStorage.setItem("pref-theme", 'light');
|
|
} else {
|
|
document.body.classList.add('dark');
|
|
localStorage.setItem("pref-theme", 'dark');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
</script>
|
|
{{- end }}
|
|
</footer>
|
|
|
|
</html>
|