init
This commit is contained in:
parent
2fe0c9a830
commit
7b9c07b83e
1444 changed files with 11476 additions and 42112 deletions
207
layouts/home.html
Executable file
207
layouts/home.html
Executable file
|
|
@ -0,0 +1,207 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue