style: extract posts' styles
This commit is contained in:
parent
783485d230
commit
59de2679ad
|
|
@ -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
55
assets/scss/_posts.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<main class="site-main">
|
||||
<main class="list-main">
|
||||
{{- if .Content }}
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<h1 id="header-title">{{ i18n ( lower .Title ) }}</h1>
|
||||
</header>
|
||||
|
|
|
|||
40
layouts/posts/baseof.html
Normal file
40
layouts/posts/baseof.html
Normal 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
27
layouts/posts/list.html
Normal 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
|
|
@ -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="}}
|
||||
Loading…
Reference in New Issue
Block a user