95 lines
2.2 KiB
HTML
95 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
|
|
|
|
<head>
|
|
<style>
|
|
.main-screen {
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 0px 10px;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.side-screen {
|
|
height: 100vh;
|
|
overflow-y: hidden;
|
|
width: 400px;
|
|
min-width: 400px;
|
|
}
|
|
|
|
.main-content {
|
|
position: relative;
|
|
flex-grow: 2;
|
|
max-width: 750px;
|
|
}
|
|
|
|
.site-title {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.icon-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
width: 100%;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.icon-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (max-width: 1380px) {
|
|
.side-screen {
|
|
display: none;
|
|
}
|
|
|
|
.main-screen {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="main-screen">
|
|
<div class="side-screen">
|
|
{{ partial "posts-defile.html" (dict "context" . "direction" "up") }}
|
|
</div>
|
|
<div class="main-content">
|
|
<h1 class="site-title">{{ .Title }}</h1>
|
|
{{ .Content }}
|
|
<div class="icon-row">
|
|
<a class="icon-item" href="/posts">
|
|
<img src="/icon_work.webp" alt="Work icon by Shar"></img>
|
|
<span>Blog</span>
|
|
</a>
|
|
<a class="icon-item" href="/recettes">
|
|
<img src="/icon_work.webp" alt="Work icon by Shar"></img>
|
|
<span>Recettes</span>
|
|
</a>
|
|
<a class="icon-item" href="/livres">
|
|
<img src="/icon_work.webp" alt="Work icon by Shar"></img>
|
|
<span>Livres</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="side-screen">
|
|
{{ partial "posts-defile.html" (dict "context" . "direction" "down") }}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|