commit 3baba1e8371e7de2e49646afda220a85568e6ce1
parent c1690bb6f3975cd4a7e0d024052eeb0cb3d20f69
Author: Oscar Benedito <oscar@oscarbenedito.com>
Date: Wed, 29 Jul 2020 01:57:00 +0200
Change post list page
Part of the redesign of the website.
Diffstat:
4 files changed, 58 insertions(+), 49 deletions(-)
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -280,43 +280,34 @@ main.list {
padding-right: 18px;
margin-left: auto;
}
-/* Post entry card
+/* Post entry summary
-------------------------------------------------- */
-.card {
- position: relative;
+
+main.list > header {
margin-bottom: var(--gap);
- padding: var(--gap);
- background: var(--card-background-color);
- border-radius: var(--radius);
- transition: transform 0.1s;
- box-shadow: rgba(10, 10, 10, 0.1) 0px 2px 3px 0px, rgba(10, 10, 10, 0.1) 0px 0px 0px 1px;
- header h2 {
- font-size: 25px;
+}
+article.summary {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ h2 a {
color: var(--text-color);
}
- .content {
- margin-top: 8px;
- margin-bottom: 8px;
- color: var(--secondary-text-color);
- font-size: 16px;
- line-height: 1.6;
- overflow: hidden;
- display: -webkit-box;
- -webkit-box-orient: vertical;
+ p {
+ margin: 0;
}
- footer {
- color: var(--secondary-text-color);
- font-size: 15px;
+ header {
+ margin-bottom: 1rem;
}
- .card-link {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
+ .metadata {
+ color: var(--secondary-text-color);
+ a {
+ color: var(--secondary-text-color);
+ }
}
}
-
+article.summary:not(:first-of-type) {
+ border-top: 2px solid var(--tertiary);
+}
/* Article
-------------------------------------------------- */
article {
diff --git a/content/blog/_index.html b/content/blog/_index.html
@@ -1,4 +0,0 @@
----
-title: Personal blog
-subtitle: All entries
----
diff --git a/content/blog/_index.md b/content/blog/_index.md
@@ -0,0 +1,13 @@
+---
+title: Personal blog
+---
+
+# Personal blog
+
+This is my personal blog. You can subscribe to [my feed][feed] or look through
+all the posts on [the archive][archive]. You can find links to other blogs I
+follow on [my blogroll][br].
+
+[feed]: </blog/index.xml> "Blog feed"
+[archive]: </blog/archive/> "Blog archive"
+[br]: </blogroll/> "Blogroll"
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -1,23 +1,32 @@
{{ define "main" }}
<main class="list">
+ {{- if .Content }}
+ <header>
+ {{ .Content }}
+ </header>
+ {{- else if eq .Kind "taxonomy" }}
+ <header>
+ <h1>{{ .Data.Singular | title }}: {{ .Title }}</h1>
+ </header>
+ {{- end }}
+
{{- $paginator := .Paginator }}
{{- range $paginator.Pages }}
- <div class="card h-entry">
- <header>
- <h2 class="p-name">{{ .Title }}</h2>
- </header>
- <section class="content">
- {{- if .Params.subtitle }}
- <p class="p-summary">{{ .Params.subtitle }}</p>
- {{- else }}
- <p class="p-summary">{{ .Plain | htmlUnescape | truncate 200 }}</p>
- {{- end }}
- </section>
- <footer>
- {{ with .Params.categories }}<a class="p-category" style="color: var(--secondary-text-color)" href="{{ "blog/categories/" | relURL }}{{ . | urlize }}">{{ . }}</a> · {{ end }}<data class="dt-published" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</data> · {{ partial "read-time.html" . }}
- </footer>
- <a class="card-link u-url" href="{{ .RelPermalink }}"></a>
- </div>
+ <article class="summary h-entry">
+ <header>
+ <h2 class="p-name"><a class="u-url" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+ <div class="metadata">
+ {{ with .Params.categories }}<a class="p-category" href="{{ "blog/categories/" | relURL }}{{ . | urlize }}">{{ . }}</a> · {{ end }}<a href="{{ .RelPermalink }}"><data class="dt-published" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</data></a> · {{ partial "read-time.html" . }}
+ <div>
+ </header>
+ <section class="content">
+ {{- if .Params.subtitle }}
+ <p class="p-summary">{{ .Params.subtitle }}</p>
+ {{- else }}
+ <p class="p-summary">{{ .Plain | htmlUnescape | truncate 200 }}</p>
+ {{- end }}
+ </section>
+ </article>
{{- end }}
{{- $paginator := .Paginator }}
