style: extract posts' styles

This commit is contained in:
log101 2023-12-08 11:39:54 +00:00
parent 783485d230
commit 59de2679ad
11 changed files with 168 additions and 126 deletions

View File

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

55
assets/scss/_posts.scss Normal file
View File

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

View File

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

View File

@ -1,78 +1,21 @@
@import "variables";
@import "_syntax.scss";
@import "home";
$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;
}
}
}
@import "posts";
body {
font-family: Inter;
font-family: $default-font;
line-height: 1.4;
background-color: #ebf4f3;
margin: 0;
}
#post-title {
color: #202020;
font-family: Inter;
#header-title {
color: $color-dark;
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 {
width: 400px;
}
.back-title {
p {
color: #5C5C5C;
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;
}

View File

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

View File

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

View File

@ -1,13 +1,4 @@
<header id="site-header" class="animated slideInUp">
<div>
<div class="back-title">
<header id="posts-header">
<a href="{{.Site.BaseURL}}">{{ i18n "backTitle" | safeHTML }}</a>
<h1 id="home-title">{{ i18n ( lower .Title ) }}</h1>
</div>
<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>
<h1 id="header-title">{{ i18n ( lower .Title ) }}</h1>
</header>

40
layouts/posts/baseof.html Normal file
View File

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

27
layouts/posts/list.html Normal file
View File

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

File diff suppressed because one or more lines are too long

View File

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