add sections headers

assets/css/elements/page-links.scss

@@ -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;
@@ -22,3 +22,20 @@
     }
   }
 }
+
+
+@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;
+    }
+}

assets/css/logo.scss

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

assets/css/variables.scss

@@ -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);

content/posts/_index.md

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

layouts/partials/header.html

@@ -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">
+	<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>
-░█░█░█▀█░█▀▄░█░█░▀█▀░█░█░░░░█░█░█░█░▀▀█
-░█▀█░█░█░█▀▄░█▀█░░█░░█▀▄░░░░▄▀▄░░█░░▄▀░
-░▀░▀░▀▀▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀░░▀░▀░░▀░░▀▀▀</pre></a>
 	<span class="logo-quote">O. George’s site</span>
 	<nav>
 		<ul class="page-list">
 			{{ range .Site.Sections }}
 			<li class="page-link"><a href="{{ .URL | relURL }}">
-			    {{ if  eq (title .Section)  "Portfolio"}}
+			    {{ if  eq (title .Section)  "Portfolio"}}{{$portfolio}}
-░█▀█░█▀█░█▀▄░▀█▀░█▀▀░█▀█░█░░░▀█▀░█▀█
+			    {{ else if eq (title .Section) "Posts"}}{{$blog}}
-░█▀▀░█░█░█▀▄░░█░░█▀▀░█░█░█░░░░█░░█░█
-░▀░░░▀▀▀░▀░▀░░▀░░▀░░░▀▀▀░▀▀▀░▀▀▀░▀▀
-			    {{ else if eq (title .Section) "Posts"}}
-░█▀▄░█░░░█▀█░█▀▀
-░█▀▄░█░░░█░█░█░█
-░▀▀░░▀▀▀░▀▀▀░▀▀▀
 			    {{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>

layouts/portfolio/list.html

@@ -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" . }}

layouts/posts/list.html

@@ -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" . }}

resources/_gen/assets/scss/css/basic.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -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; }