Browse Source

better design for list template

max.mehl 5 months ago
parent
commit
56e9170f01
No account linked to committer's email address

+ 48
- 14
themes/hugo-sustain/layouts/_default/list.html View File

@@ -3,33 +3,67 @@
3 3
   <div id="wrap">
4 4
     <!-- Header -->
5 5
     {{ partial "header" . }}
6
+    <!-- is page a category or tag page? -->
7
+    {{- $selection := false -}}
8
+    {{- if (isset .Data "Singular") -}}
9
+      {{- $selection = true -}}
10
+    {{- end -}}
6 11
     <div class="container archive">
7 12
       <h1>{{ .Site.Params.Blog.Headline }}
8
-        {{ if (isset .Data "Singular") }}
13
+        {{- if $selection -}}
9 14
           <br />({{ .Data.Singular | humanize }}: {{lower .Title}})
10
-          <span class="article-rss"><a href="/{{ .Data.Plural }}/{{lower .Title}}/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></a></span>
11
-        {{ else }}
12
-          <span class="article-rss"><a href="/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></a></span>
13
-        {{ end }}
15
+        {{- end -}}
14 16
       </h1>
15 17
       {{ if .Site.Params.Social.CommentsProvider }}
16 18
         <p><a href="{{ .Site.Params.Social.CommentsProvider }}">Subscribe</a> to my Blog via Diaspora, Mastodon, Friendica or GNU Social. Never miss a article! Reshare, like and discuss it!</p>
17 19
       {{ end }}
18
-      <p class="categories">
19
-        <a class="label label-success" href="/blog">All</a>
20
-        {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
21
-          <a class="label label-success" href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}">
22
-            {{ humanize $name }}
23
-          </a>
24
-        {{ end }}
25
-      </p>
20
+      <div class="metadata-page">
21
+        <div class="row vertical-align">
22
+          <div class="col-xs-3 col-md-2 text-right">
23
+            <em>Languages:</em>
24
+          </div>
25
+          <div class="col-xs-9 col-md-10">
26
+            <a class="label label-success {{if not $selection}}active{{end}}" href="/blog">All</a>
27
+            {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
28
+              <a class="label label-success {{if eq $name $.Title}}active{{end}}" href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}">
29
+                {{- humanize $name -}}
30
+              </a>
31
+            {{- end -}}
32
+          </div>
33
+        </div>
34
+        <div class="row vertical-align">
35
+          <div class="col-xs-3 col-md-2 text-right">
36
+            <em>Tags:</em>
37
+          </div>
38
+          <div class="col-xs-9 col-md-10">
39
+            <a class="label label-success {{if not $selection}}active{{end}}" href="/blog">All</a>
40
+            {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
41
+              <a class="label label-success {{if eq $name $.Title}}active{{end}}" href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}">
42
+                {{- humanize $name -}}
43
+              </a>
44
+            {{- end -}}
45
+          </div>
46
+        </div>
47
+        <div class="row vertical-align">
48
+          <div class="col-xs-3 col-md-2 text-right">
49
+            <em>RSS Feed:</em>
50
+          </div>
51
+          <div class="col-xs-9 col-md-10">
52
+            {{ if $selection }}
53
+              <span class="article-rss"><a class="label label-rss" href="/{{ .Data.Plural }}/{{lower .Title}}/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i> Subscribe to »{{.Title}}«</a></span>
54
+            {{ else }}
55
+              <span class="article-rss"><a class="label label-rss" href="/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i>  Subscribe to all posts</a></span>
56
+            {{ end }}
57
+          </div>
58
+        </div>
59
+      </div>
26 60
       
27 61
       <div class="panel panel-default panel-overview">
28 62
         <div class="blogpost">
29 63
           {{ range .Paginator.Pages.ByPublishDate.Reverse }}
30 64
             <div class="blog-summary">
31 65
               <h4><strong><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></strong></h4>
32
-              <div class="metadata">Posted on {{ .Date.Format "2 January 2006" }} - Tagged with {{ range $i, $tag := .Params.tags }}{{ if $i }}, {{ end }}<a href="/tags/{{ lower $tag }}">{{ $tag }}</a>{{ end }}</div>
66
+              <div class="metadata-summary">Posted on {{ .Date.Format "2 January 2006" }} - Tagged with {{ range $i, $tag := .Params.tags }}{{ if $i }}, {{ end }}<a href="/tags/{{ lower $tag }}">{{ $tag }}</a>{{ end }}</div>
33 67
               <p>{{ .Summary }} <a class="learn-more" href="{{ .RelPermalink }}"></a></p>
34 68
             </div>
35 69
           {{ end }}

+ 19
- 4
themes/hugo-sustain/static/css/custom.css View File

@@ -15,10 +15,15 @@ div.footer {
15 15
   background-color: rgba(92, 139, 184, 0.6);
16 16
   color: #FFF;
17 17
 }
18
-.container a.label-success:hover {
18
+.container a.label-success:hover,
19
+.container a.label-success.active {
19 20
   background-color: rgba(92, 139, 184, 0.9);
20 21
   color: #FFF;
21 22
 }
23
+.container a.label-rss {
24
+  background-color: rgba(242, 101, 34, 0.9);
25
+  color: #FFF;
26
+}
22 27
 .container h1 {
23 28
   font-weight: bold;
24 29
   color: #0D76EC;
@@ -76,14 +81,18 @@ div.contact p {
76 81
 }
77 82
 
78 83
 /* BLOG */
79
-.categories {
84
+.metadata-page {
80 85
   font-size: 18px;
81
-  margin: 1em 0 3em 0;
86
+  text-align: left;
87
+  margin: 3em 0 1em 0;
88
+}
89
+.metadata-page .row {
90
+  padding-bottom: .5em;
82 91
 }
83 92
 .blog-summary {
84 93
   padding-bottom: 1em;
85 94
 }
86
-.metadata {
95
+.metadata-summary {
87 96
   font-size: 0.8em;
88 97
   opacity: 0.7;
89 98
 }
@@ -137,3 +146,9 @@ figure.pull-right {
137 146
 figure.pull-left {
138 147
   padding: 10px 10px 10px 0;
139 148
 }
149
+
150
+/* HELPER CLASSES */
151
+.vertical-align {
152
+  display: flex;
153
+  align-items: center;
154
+}

Loading…
Cancel
Save