style: extract posts' styles

assets/scss/_home.scss

@@ -23,13 +23,6 @@
     margin-top: 16vh;
 }
 
-#home-title {
-    color: $color-dark;
-    font-family: $default-font;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-}
 
 #home-nav {
     display: flex;

assets/scss/_posts.scss

@@ -0,0 +1,55 @@
+@import "variables";
+
+#posts-body {
+    @include default-width;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+
+    height: 100vh;
+    margin-bottom: 0;
+}
+
+#posts-main {
+    display: flex;
+    flex-direction: column;
+
+    font-size: 1.5rem;
+}
+
+#posts-header {
+    padding-top: 10vh;
+
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+
+    a {
+        text-decoration: none;
+        color: #656565;
+
+        &:hover {
+            text-decoration: underline;
+            color: #151515;
+        }
+    }
+}
+
+#posts-footer {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: end;
+}
+
+.post-item {
+    a {
+        color: $color-light-dark;
+        font-weight: 400;
+        line-height: 150%;
+        text-decoration-line: underline;
+        font-size: 30px;
+    }
+}
+

assets/scss/_variables.scss

@@ -3,3 +3,12 @@ $color-dark: #202020;
 $color-medium-dark: #303030;
 $color-grey: #5C5C5C;
 $color-light-dark: #252525;
+
+@mixin default-width {
+    max-width: 720px;
+    margin: auto;
+
+    @media (max-width: 768px) {
+        margin: 0px 24px;
+    }
+}

assets/scss/style.scss

@@ -1,78 +1,21 @@
+@import "variables";
 @import "_syntax.scss";
 @import "home";
-
+@import "posts";
-$default-font: 'Inter', sans-serif;
-$color-dark: #202020;
-$color-medium-dark: #303030;
-$color-grey: #5C5C5C;
-$color-light-dark: #252525;
-
-@mixin font-style-normal {
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-}
-
-%link-shared {
-    color: #252525;
-    font-family: Inter;
-    font-style: normal;
-    font-size: 40px;
-    font-weight: 400;
-    line-height: 150%;
-    /* 60px */
-    text-decoration-line: underline;
-}
-
-%footer-shared {
-    width: 100%;
-
-    p {
-        color: #5C5C5C;
-        font-family: Inter;
-        font-size: 20px;
-        font-style: normal;
-        font-weight: 300;
-        line-height: normal;
-
-        display: flex;
-        gap: 8px;
-        justify-content: center;
-    }
-
-    a {
-        color: #5C5C5C;
-        font-family: Inter;
-        font-size: 20px;
-        font-style: normal;
-        font-weight: 300;
-        line-height: normal;
-
-        display: flex;
-        gap: 8px;
-        justify-content: center;
-        text-decoration: none;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}
 
 body {
-    font-family: Inter;
+    font-family: $default-font;
     line-height: 1.4;
     background-color: #ebf4f3;
     margin: 0;
 }
 
-#post-title {
+#header-title {
-    color: #202020;
+    color: $color-dark;
-    font-family: Inter;
+    font-family: $default-font;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
-    margin-bottom: 0;
 }
 
 .post-header {
@@ -106,53 +49,41 @@ body {
     }
 }
 
-#home-footer {
-    @extend %footer-shared;
-}
-
 #site-footer {
-    @extend %footer-shared;
+    width: 100%;
-}
 
-.posts-group {
+    p {
-    width: 400px;
+        color: #5C5C5C;
-}
-
-.back-title {
         font-family: Inter;
         font-size: 20px;
         font-style: normal;
-    font-weight: 400;
+        font-weight: 300;
+        line-height: normal;
+
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+    }
 
     a {
+        color: #5C5C5C;
+        font-family: Inter;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 300;
+        line-height: normal;
+
+        display: flex;
+        gap: 8px;
+        justify-content: center;
         text-decoration: none;
-        color: #656565;
 
         &:hover {
             text-decoration: underline;
-            color: #151515;
         }
     }
 }
 
-.post-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    a {
-        @extend %link-shared;
-        font-size: 30px;
-    }
-
-    .post-day {
-        @extend %link-shared;
-        font-size: 30px;
-        text-decoration: none;
-        color: #787878;
-    }
-}
-
 .pagination {
     display: flex; /* Enable flexbox layout */
     list-style: none; /* Remove default list styling */
@@ -188,10 +119,6 @@ body {
     }
 }
 
-#home-footer {
-    width: 400px;
-}
-
 [aria-disabled="true"] {
     text-decoration: none !important;
   }

layouts/_default/list.html

@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "main" }}
-	<main class="site-main">
+	<main class="list-main">
 		{{- if .Content }}
 		<div class="content">
 			{{ .Content }}

layouts/index.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div id="home-main">
+<main id="home-main">
 	<div id="home-center">
 		<h1 id="home-title">{{ .Site.Title }}</h1>
 		<nav id="home-nav">
@@ -9,5 +9,5 @@
 	<div id="site-footer">
 		{{ partial "footer.html" . }}
 	</div>
-</div>
+</main>
 {{ end }}

layouts/partials/header.html

@@ -1,13 +1,4 @@
-	<header id="site-header" class="animated slideInUp">
+<header id="posts-header">
-		<div>
-			<div class="back-title">
 	<a href="{{.Site.BaseURL}}">{{ i18n "backTitle" | safeHTML }}</a>
-					<h1 id="home-title">{{ i18n ( lower .Title ) }}</h1>
+	<h1 id="header-title">{{ i18n ( lower .Title ) }}</h1>
-			</div>
+</header>
-			<div class="hdr-right hdr-icons">
-				{{ if (or .Params.images .Params.featuredImg) -}}
-				<button id="img-btn" class="hdr-btn" title="{{i18n "featuredImage"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
-				{{- end }}
-			</div>
-		</div>
-	</header>

layouts/posts/baseof.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="{{.Site.LanguageCode}}">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	{{- with .Site.Params.themeColor }}
+	<meta name="theme-color" content="{{.}}">
+	<meta name="msapplication-TileColor" content="{{.}}">
+	{{- end }}
+	{{- partial "structured-data.html" . }}
+	{{- partial "favicons.html" }}
+	<title>{{.Title}}</title>
+	{{ range .AlternativeOutputFormats -}}
+		{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Title | safeHTML }}
+	{{ end -}}
+	{{ $style := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "css/style.css" . | toCSS | minify | fingerprint -}}
+	<link rel="stylesheet" href="{{ $style.Permalink }}" {{ printf "integrity=%q" $style.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous">
+	{{- block "head" . -}}{{- end }}
+	{{- range .Site.Params.customCSS }}
+	<link rel="stylesheet" href="{{ . | absURL }}">
+	{{- end }}
+	{{ if .IsTranslated }}
+	{{ range .Translations }}
+	<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ .Language.LanguageName }}">
+	{{ end }}
+	{{ end }}
+	{{- if templates.Exists "partials/extra-head.html" -}}
+	{{ partial "extra-head.html" . }}
+	{{- end }}
+</head>
+
+<body id="posts-body">
+	{{ block "header" . -}}{{ end -}}
+	{{ block "main" . -}}{{ end -}}
+	{{ block "footer" . -}}{{ end }}
+</body>
+
+</html>

layouts/posts/list.html

@@ -0,0 +1,27 @@
+{{ define "header" }}
+{{ partial "header.html" . }}
+{{ end }}
+
+{{ define "main" }}
+	<main id="posts-main">
+		{{- if .Content }}
+		<div class="content">
+			{{ .Content }}
+		</div>
+		{{- end }}
+		{{ range (.Paginate .Pages.ByPublishDate ).Pages }}
+		<p class="post-item">
+			<a href="{{.Permalink}}">
+				<span class="post-title">{{.Title}}</span>
+			</a>
+		</p>
+		{{ end }}
+	</main>
+{{ end }}
+
+{{ define "footer" }}
+<div id="posts-footer">
+	{{ partial "pagination.html" . }}
+	{{ partial "footer.html" . }}
+</div>
+{{ end }}

resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.json

@@ -1 +1 @@
-{"Target":"css/style.min.a77d767cbae6cbbfcdb47cbbf0fd53933b11c9cda0327457cbeaba4e78ba951d.css","MediaType":"text/css","Data":{"Integrity":"sha256-p312fLrmy7/NtHy78P1TkzsRyc2gMnRXy+q6Tni6lR0="}}
+{"Target":"css/style.min.26ea135eb889d60692c0f2a860f7860686cfbae77281049bc0254f047a21d7b2.css","MediaType":"text/css","Data":{"Integrity":"sha256-JuoTXriJ1gaSwPKoYPeGBobPuudygQSbwCVPBHoh17I="}}