redesign blog articles

This commit is contained in:
Vri 🌈 2023-03-15 14:29:23 +01:00
parent 87a84a23ba
commit 62b789d781
Signed by: vrifox
GPG key ID: D40098E5B60B2197
2 changed files with 31 additions and 8 deletions

View file

@ -16,11 +16,11 @@
#blog-header { #blog-header {
background: var(--vriish-gradient); background: var(--vriish-gradient);
font-family: "playfair"; font-family: "playfair";
font-size: 2rem; font-size: 1.5rem;
height: 40vh; height: 40vh;
color: var(--vriish-gradient-text); color: var(--vriish-gradient-text);
mask: var(--vriish-waves); mask: var(--vriish-waves);
padding: 1rem 1rem 3rem 1rem; padding: 1rem 6rem 3rem 6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
place-content: center; place-content: center;
@ -28,13 +28,14 @@
@media (max-width: 1140px) { @media (max-width: 1140px) {
height: 30vh; height: 30vh;
font-size: 1.5rem; font-size: 1rem;
} }
h1 { h1 {
letter-spacing: 0.3rem; letter-spacing: 0.3rem;
font-size: 4rem; font-size: 3.5rem;
margin: 0; margin: 0 auto;
max-width: 1000px;
@media (max-width: 1140px) { @media (max-width: 1140px) {
font-size: 2.5rem; font-size: 2.5rem;
} }
@ -42,10 +43,27 @@
p { p {
letter-spacing: 0.15rem; letter-spacing: 0.15rem;
margin: 0; margin: 0 auto;
max-width: 1000px;
} }
} }
main {
max-width: 800px;
h1, h2, h3, h4, h5, h6 {
margin-top: 2.5rem !important;
}
p {
margin: 1.5rem 0;
}
}
// single page
// list
#posts-wrapper { #posts-wrapper {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem)); grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem));

View file

@ -3,10 +3,15 @@
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" /> <link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
{{- end -}} {{- end -}}
{{- define "header" }}
<header id="blog-header">
<h1 class="title">{{ .Title }}</h1>
<p title="{{ .Date | time.Format "2. January 2006, 15:04 MST" }}">{{ .Date | time.Format "2. January 2006" }}</p>
</header>
{{ end }}
{{- define "main" }} {{- define "main" }}
<main> <main>
<p class="date-published" title="{{ .Date | time.Format "2. January 2006, 15:04 MST" }}">{{ .Date | time.Format "2. January 2006" }}</p>
<h1 class="title">{{ .Title }}</h1>
{{ .Content -}} {{ .Content -}}
<aside> <aside>
{{- with .Params.topics }} {{- with .Params.topics }}