diff options
| -rw-r--r-- | assets/theme/main.scss | 40 | ||||
| -rw-r--r-- | layouts/recipes/list.html | 33 |
2 files changed, 60 insertions, 13 deletions
diff --git a/assets/theme/main.scss b/assets/theme/main.scss index 4466d41..370af14 100644 --- a/assets/theme/main.scss +++ b/assets/theme/main.scss @@ -139,6 +139,36 @@ section.project { } } +section.recipe { + border-top: 1px solid var(--bodyForegroundColor); + padding: 0.5rem; + display: grid; + grid-template-columns: [preview] 1fr [description] 5fr [end]; + + div.picture { + grid-column-start: preview; + grid-column-end: description; + } + + div.description { + grid-column-start: description; + grid-column-end: end; + + ul.taglist { + li { + display: inline; + } + + margin: 0; + padding: 0; + } + } + + h2 { + margin: 0.5rem 0rem; + } +} + section.service { border-top: 1px solid var(--bodyForegroundColor); padding: 0.5rem; @@ -271,3 +301,13 @@ pre code { margin-right: 1em; } } + +.tag { + color: var(--linkForegroundColor); + font-family: monospace; + text-decoration: none; + border-bottom: 1px dotted var(--linkForegroundColor); +} +.tag::before { + content: "#"; +} diff --git a/layouts/recipes/list.html b/layouts/recipes/list.html index 1a6bdf9..de18df0 100644 --- a/layouts/recipes/list.html +++ b/layouts/recipes/list.html @@ -1,17 +1,24 @@ {{- define "main" }} <h1>{{ .Title }}</h1> {{ .Content }} -<ul> - {{- range sort .Paginator.Pages "Title" }} - <li> - <a href="{{ .Permalink }}">{{ .Title }}</a> - <small> - {{ .Summary | plainify }} - {{- range .Params.tags }} - <a href="/tags/{{ . | lower }}">#{{ . }}</a> - {{- end }} - </small> - </li> - {{- end }} -</ul> +{{- range sort .Pages "Title" }} +<section class="recipe"> + <div class="preview"> + {{- with .Params.preview }} + <img src="{{ .src }}" /> + {{- end }} + </div> + <div class="description"> + <h2> + <a href="{{ .Permalink }}">{{ .Title }}</a> + </h2> + <ul class="taglist"> + {{- range sort .Params.tags }} + <li><a class="tag" href="/tags/{{ . | lower }}">{{ . }}</a></li> + {{- end }} + </ul> + {{ .Content }} + </div> +</section> +{{- end }} {{- end }} |