commit 706516eceb86c67cc0dfbff30bd0f7917a6e3592
parent 878f4718c430dc63177fd61c02068791d9ae4903
Author: Lou Woell <lou.woell@posteo.de>
Date: Sat, 1 Mar 2025 00:26:13 +0100
Improve spacing between elements
Diffstat:
9 files changed, 56 insertions(+), 65 deletions(-)
diff --git a/assets/css/buttons.scss b/assets/css/buttons.scss
@@ -11,21 +11,16 @@ a.button {
display: flex;
align-items: center;
justify-content: center;
- padding: 8px 18px;
- margin: 5px 0;
text-decoration: none;
text-align: center;
- border: 1px solid $accent;
- background: $accent;
- color: $background;
+ color: transparentize($accent, 0.3);
font: inherit;
- font-weight: bold;
appearance: none;
cursor: pointer;
outline: none;
&:hover {
- background: transparentize($accent, .1);
+ color: $accent;
}
/* variants */
@@ -43,7 +38,6 @@ a.button {
&.link {
background: none;
- font-size: 1rem;
}
/* sizes */
diff --git a/assets/css/footer.scss b/assets/css/footer.scss
@@ -1,5 +1,5 @@
.footer {
- padding: 40px 0;
+ margin: 1rem;
flex-grow: 0;
opacity: .5;
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -337,6 +337,9 @@ mark {
display: flex;
flex-direction: column;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+
@media print {
display: initial;
}
diff --git a/assets/css/pagination.scss b/assets/css/pagination.scss
@@ -1,5 +1,4 @@
.pagination {
- margin-top: 50px;
@media print {
display: none;
@@ -9,14 +8,14 @@
display: flex;
text-align: center;
position: relative;
- margin: 100px 0 20px;
+ margin: 3rem 0 1rem;
&-h {
text-align: center;
margin: 0 auto;
padding: 5px 10px;
background: $background;
- color: transparentize($color, .7);
+ color: transparentize($color, .3);
font-size: .8rem;
text-transform: uppercase;
text-decoration: none;
@@ -35,12 +34,9 @@
}
&__buttons {
- display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
- gap: 10px;
-
a {
text-decoration: none;
}
@@ -49,13 +45,13 @@
.button {
position: relative;
- display: inline-flex;
align-items: center;
justify-content: center;
max-width: 85vw;
font-size: 1rem;
padding: 0;
appearance: none;
+ margin: 1rem;
@media($phone) {
flex: 1;
diff --git a/assets/css/post.scss b/assets/css/post.scss
@@ -22,8 +22,6 @@
.post {
width: 100%;
text-align: left;
- margin: 20px auto;
- padding: 20px 0;
&:not(:last-of-type) {
border-bottom: 1px solid $border-color;
@@ -32,7 +30,7 @@
&-meta {
font-size: 1rem;
margin-bottom: 10px;
- color: transparentize($accent, .3);
+ opacity: .5;
& > *:not(:first-child) {
&::before {
@@ -67,7 +65,7 @@
&-tags {
display: block;
- margin-bottom: 20px;
+ margin-bottom: 10px;
font-size: 1rem;
opacity: .5;
@@ -134,3 +132,28 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
.footnotes {
color: transparentize($color, .5);
}
+
+.post.on-list {
+ margin-top: 1rem;
+}
+
+.post-on-list-content-preview {
+ display: grid;
+ column-gap: 2em;
+ grid-auto-columns: 1fr 3fr;
+
+ // margin: 0;
+
+ .post-cover {
+ grid-column: 1;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ contain: style;
+ }
+
+ .post-content {
+ grid-column: 2;
+ margin: 0;
+ }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -21,23 +21,3 @@
@import "video";
-.post-on-list-content-preview {
- display: grid;
- column-gap: 2em;
- grid-auto-columns: 1fr 3fr;
-
- margin: 0;
-
- .post-cover {
- grid-column: 1;
- border: 0;
- padding: 0;
- margin: 0;
- contain: style;
- }
-
- .post-content {
- grid-column: 2;
- margin: 0;
- }
-}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -7,6 +7,15 @@
<div class="posts">
{{ range .Paginator.Pages }}
<article class="post on-list">
+ {{ if .Params.tags }}
+ <span class="post-tags">
+ {{ range .Params.tags }}
+ #<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
+ {{- . -}}
+ </a>
+ {{ end }}
+ </span>
+ {{ end }}
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
</h1>
@@ -21,16 +30,6 @@
{{- end -}}
</div>
- {{ if .Params.tags }}
- <span class="post-tags">
- {{ range .Params.tags }}
- #<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
- {{- . -}}
- </a>
- {{ end }}
- </span>
- {{ end }}
-
{{ if .Params.cover }}
<div class="post-on-list-content-preview">
{{ partial "cover.html" . }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,5 +1,13 @@
{{ define "main" }}
<article class="post">
+
+ {{ if .Params.tags }}
+ <span class="post-tags">
+ {{ range .Params.tags }}
+ #<a href="{{ (urlize (printf "tags/%s/" .)) | absLangURL }}">{{ . }}</a>
+ {{ end }}
+ </span>
+ {{ end }}
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
</h1>
@@ -22,13 +30,6 @@
{{- end -}}
</div>
- {{ if .Params.tags }}
- <span class="post-tags">
- {{ range .Params.tags }}
- #<a href="{{ (urlize (printf "tags/%s/" .)) | absLangURL }}">{{ . }}</a>
- {{ end }}
- </span>
- {{ end }}
{{ partial "cover.html" . }}
{{ if (.Params.LiveDoc) }}
diff --git a/layouts/partials/posts_pagination.html b/layouts/partials/posts_pagination.html
@@ -6,21 +6,17 @@
</div>
<div class="pagination__buttons">
{{ if .NextInSection }}
- <span class="button previous">
- <a href="{{ .NextInSection.Permalink }}">
+ <a class="button previous" href="{{ .NextInSection.Permalink }}">
<span class="button__icon">←</span>
<span class="button__text">{{ .NextInSection.Title }}</span>
</a>
- </span>
{{ end }}
{{ if .PrevInSection }}
- <span class="button next">
- <a href="{{ .PrevInSection.Permalink }}">
+ <a class="button next" href="{{ .PrevInSection.Permalink }}">
<span class="button__text">{{ .PrevInSection.Title }}</span>
<span class="button__icon">→</span>
</a>
- </span>
{{ end }}
</div>
</div>
-{{ end }}
-\ No newline at end of file
+{{ end }}