add sections headers

This commit is contained in:
horhik 2021-06-06 18:38:33 +03:00
parent f34addf793
commit 35eef0a37f
10 changed files with 62 additions and 23 deletions

View file

@ -2,7 +2,7 @@
list-style: none;
display: flex;
justify-content: space-between;
width: 300px;
width: 400px;
margin: 0 auto;
font-family: Mononoki;
padding: 0;
@ -11,8 +11,8 @@
.page-link{
font-size: 0.4em;
line-height: $ascii-line-height;
width: 100px;
transition: 0.3s;
margin: 0px 10px;
& a{
color: $header-color;
text-decoration: none;
@ -21,4 +21,21 @@
color: var(--pink)
}
}
}
}
@media screen and (max-width: 420px) {
.page-link {
line-height: $ascii-line-height-mobile;
white-space: pre-line;
}
.page-list{
flex-direction: column;
align-items: center;
width: auto;
}
.toilet-logo{
font-size: 0.6em;
}
}

View file

@ -26,4 +26,5 @@
line-height: $ascii-line-height;
margin: 0;
font-family: Mononoki, 'Fira Code',monospace, Ubuntu;
}
white-space: pre-line;
}

View file

@ -30,6 +30,7 @@
}
$ascii-line-height: 1.115em;
$ascii-line-height-mobile: 1.112em;
$header-color: var(--green);
$main-font: 'Mononoki', monospace;
$link-color: var(--cyan);

View file

@ -0,0 +1,4 @@
---
title: "Blog"
date: 2021-06-06
---

0
content/posts/_index.md~ Normal file
View file

View file

@ -1,24 +1,24 @@
{{$horhik := "░█░█░█▀█░█▀▄░█░█░▀█▀░█░█░░░░█░█░█░█░▀▀█\n░█▀█░█░█░█▀▄░█▀█░░█░░█▀▄░░░░▄▀▄░░█░░▄▀░\n░▀░▀░▀▀▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀░░▀░▀░░▀░░▀▀▀\n"}}
{{$portfolio := "░█▀█░█▀█░█▀▄░▀█▀░█▀▀░█▀█░█░░░▀█▀░█▀█\n░█▀▀░█░█░█▀▄░░█░░█▀▀░█░█░█░░░░█░░█░█\n░▀░░░▀▀▀░▀░▀░░▀░░▀░░░▀▀▀░▀▀▀░▀▀▀░▀▀\n"}}
{{$blog := "░█▀▄░█░░░█▀█░█▀▀\n ░█▀▄░█░░░█░█░█░█\n ░▀▀░░▀▀▀░▀▀▀░▀▀▀\n"}}
<header class="logo--wrapper">
<a href="{{ .Site.BaseURL }}"><pre class="logo toilet-logo" title="Home">
░█░█░█▀█░█▀▄░█░█░▀█▀░█░█░░░░█░█░█░█░▀▀█
░█▀█░█░█░█▀▄░█▀█░░█░░█▀▄░░░░▄▀▄░░█░░▄▀░
░▀░▀░▀▀▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀░░▀░▀░░▀░░▀▀▀</pre></a>
<a href="{{ .Site.BaseURL }}"><pre class="logo toilet-logo" title="Home">{{if eq .Section "portfolio"}}{{$portfolio}}{{else if eq .Section "posts"}}{{$blog}}{{else}}{{$horhik}}{{end}}</pre></a>
<span class="logo-quote">O. Georges site</span>
<nav>
<ul class="page-list">
{{ range .Site.Sections }}
<li class="page-link"><a href="{{ .URL | relURL }}">
{{ if eq (title .Section) "Portfolio"}}
░█▀█░█▀█░█▀▄░▀█▀░█▀▀░█▀█░█░░░▀█▀░█▀█
░█▀▀░█░█░█▀▄░░█░░█▀▀░█░█░█░░░░█░░█░█
░▀░░░▀▀▀░▀░▀░░▀░░▀░░░▀▀▀░▀▀▀░▀▀▀░▀▀
{{ else if eq (title .Section) "Posts"}}
░█▀▄░█░░░█▀█░█▀▀
░█▀▄░█░░░█░█░█░█
░▀▀░░▀▀▀░▀▀▀░▀▀▀
{{ if eq (title .Section) "Portfolio"}}{{$portfolio}}
{{ else if eq (title .Section) "Posts"}}{{$blog}}
{{end}}
</a></li>
{{ end }}
{{if ne (title .FirstSection) "Horhik.xyz"}}
<li class="page-link"><a href="{{.Site.BaseURL}}">{{$horhik}}</a></li>
{{end}}
</ul>
</nav>
</header>

View file

@ -18,11 +18,14 @@
{{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
{{- end }}
</head>
{{ partial "header" . }}
<main id="main">
<div>
<h1 id="title">{{ .Title }}</h1>
<h1 id="title" class="h1 recent-header">{{ .Title }}</h1>
{{ range .Pages }}
{{ .Render "summary"}}
{{ end }}
</div>
</main>
{{ partial "footer" . }}

View file

View file

@ -15,12 +15,13 @@
{{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
{{- end }}
</head>
{{ partial "header" . }}
<main id="main">
<div>
<h1 id="title">{{ .Title }}</h1>
<h1 id="title" class="h1 recent-header">{{ .Title }}</h1>
{{ range .Pages }}
{{ .Render "summary"}}
{{ end }}
</div>
</main>
{{ partial "footer" . }}

View file

@ -102,13 +102,14 @@ p code, quote code, q code {
font-size: 0.9em;
line-height: 1.115em;
margin: 0;
font-family: Mononoki, 'Fira Code',monospace, Ubuntu; }
font-family: Mononoki, 'Fira Code',monospace, Ubuntu;
white-space: pre-line; }
.page-list {
list-style: none;
display: flex;
justify-content: space-between;
width: 300px;
width: 400px;
margin: 0 auto;
font-family: Mononoki;
padding: 0; }
@ -116,8 +117,8 @@ p code, quote code, q code {
.page-link {
font-size: 0.4em;
line-height: 1.115em;
width: 100px;
transition: 0.3s; }
transition: 0.3s;
margin: 0px 10px; }
.page-link a {
color: var(--green);
text-decoration: none;
@ -125,6 +126,17 @@ p code, quote code, q code {
.page-link a:hover, .page-link a:focus {
color: var(--pink); }
@media screen and (max-width: 420px) {
.page-link {
line-height: 1.112em;
white-space: pre-line; }
.page-list {
flex-direction: column;
align-items: center;
width: auto; }
.toilet-logo {
font-size: 0.6em; } }
.recent {
margin: 0 auto; }