Kategorie + Archive und Hauptseite

2022-11-20 15:04:48 +01:00 · 2022-11-20 15:04:48 +01:00 · f2b5de5575
commit f2b5de5575
parent 2f15333242
5 changed files with 74 additions and 72 deletions
--- a/assets/_own/css/style.css
+++ b/assets/_own/css/style.css
@ -1,26 +1,38 @@
 html, body {
-  height: 100%;
+  height: 100vh;
  background-color: #fff;
  font-family: 'Source Sans Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 body {
-  _padding-top: 6.5rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+main {
+  flex: 1;
+  /* Vorbereitung fuer fixed-top beim Header*/
+  _margin-top: 6.5rem;
+}
+a {
+  /* text-dark */
+  color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important;
 }

 #content {
-  min-height: 100%;
-  height: auto;
-  border-radius: 5px;
-  box-shadow: 8px 14px 38px rgba(39,44,49,.06),1px 3px 8px rgba(39,44,49,.03);
-  transition: all .5s ease
+  _min-height: 100%;
+  _height: auto;
+  _border-radius: 5px;
+  _box-shadow: 8px 14px 38px rgba(39,44,49,.06),1px 3px 8px rgba(39,44,49,.03);
+  _transition: all .5s ease
 }
-#content:hover {
+#contents:hover {
  /* TODO den Shadow noch ausen-Rum legen (content+sidebar) und dann am besten nach obenund unten in den Header/Footer überschneiden lassen */
-  box-shadow: 0 0 1px rgba(39,44,49,.1),0 3px 16px rgba(39,44,49,.07);
-  transition: all .3s ease;
-  transform: translate3D(0,-1px,0)
+  _box-shadow: 0 0 1px rgba(39,44,49,.1),0 3px 16px rgba(39,44,49,.07);
+  _transition: all .3s ease;
+  _transform: translate3D(0,-1px,0)
 }
-.footer {
+
+footer {
  display: flex;
  padding: 0.5rem 3rem;
  min-height: 4rem;
@ -29,10 +41,10 @@ body {
  align-items: center;
  color: currentColor;
 }
-.footer a {
+footer a {
  color: currentColor;
 }
-.footer p {
+footer p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
 }
@ -58,7 +70,7 @@ body {
 }

 /*
- * Blog sidebar
+ * Blog - sidebar
 */
 .blog-sidebar {
  fill_: currentColor;
@ -70,13 +82,23 @@ body {
  text-decoration: none !important;
 }

-.tag-cloud {
-  display: inline-block;
-  padding: 0;
-  margin: 0;
+/*
+ * Blog - Kategorien
+ */
+.categories a {
+  text-decoration: none !important;
 }
-.tag-cloud-link {
-  margin: 2px;
+
+/*
+ * Blog - Tags
+ */
+.tag-cloud {
+  display_: inline-block;
+  padding_: 0;
+  margin_: 0;
+}
+.tag-cloud-link a {
+  text-decoration: none !important;
 }

 /*
--- a/assets/_own/sass/main.scss
+++ b/assets/_own/sass/main.scss
@ -30,6 +30,7 @@
@import "../../bootstrap/scss/navbar";
@import "../../bootstrap/scss/pagination";
@import "../../bootstrap/scss/badge";
+@import "../../bootstrap/scss/list-group";
 //@import "../../bootstrap/scss/placeholders";
@import "../../bootstrap/scss/helpers";

--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -2,20 +2,22 @@
 <html lang="{{ .Site.LanguageCode }}">
  {{- partial "head.html" . -}}
  <body>
-    <div class="container">
+    <!--<div classes="d-flex flex-column min-vh-100 vh-100">-->
      {{- partial "header.html" . -}}
-      {{- block "head" . -}}{{- end }}
+      <main role="main" class="container-md flex-grow-1">
+        {{- block "head" . -}}{{- end }}
      
-      <div class="row g-5">
-        <div id="content" class="col-md-8">
-          {{- block "main" . -}}{{- end }}
+        <div class="row">
+          <div id="content" class="col-md-8 border rounded shadow-lg p-3 mb-2">
+            {{- block "main" . -}}{{- end }}
+          </div>
+          <div id="sidebar" class="col-md-4">
+            {{- block "sidebar" . -}}{{- end }}
+          </div>
        </div>
-        <div id="sidebar" class="col-md-4">
-          {{- block "sidebar" . -}}{{- end }}
-        </div>
-      </div>
+      </main>
      {{- partial "footer.html" . -}}
-      {{- partial "script.html" . -}}
-    </div>
+    <!--</div>-->
+    {{- partial "script.html" . -}}
  </body>
 </html>
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@ -1,7 +1,7 @@
 {{ define "head" }}
  {{ if eq .Type "blog" }}
    {{ $latestEntry := index (where (where .Site.RegularPages "Type" "blog") "Params.featured" true).ByPublishDate.Reverse 0 }}
-    <div class="p-4 p-md-5 m-2 mb-4 rounded text-bg-dark">
+    <div class="p-4 m-2 rounded text-bg-dark">
      <div class="col-md6 px-0">
        <h1 class="display-4 fst-italic">{{ $latestEntry.Title }}</h1>
        <p class="lead my-3">{{ $latestEntry.Summary | safeHTML }}</p>
@ -38,47 +38,36 @@
 {{ define "sidebar" }}
  <div class="position-sticky blog-sidebar" style="top: 2rem;">
    <div class="p-4">
-      {{/* range $tax := .Site.Params.Blog.Taxonomies }}
-        {{ $taxUrl := $.Site.GetPage (printf "/%s" $tax) }}
-        <h4 class="fst-italic"><a href="{{- $taxUrl.Permalink -}}">{{ $tax }}</a></h4>
-        <ul class="mb-2">
-          {{ $parentLink := (printf "/%s/" $tax) }}
-          {{ $x := (index $.Site.Taxonomies "tags") }}
-
-          {{ range (index $.Site.Taxonomies $tax) }}
-          {{ printf "%#v" . }}
-            <li><a href="{{/* (printf "%s%s" $parentLink $key) * /}}">{{/* $key * /}}</a></li>
-          {{ end }}
-        </ul>
-      {{ end */}}
-
      {{ $catIdent := .Site.Params.Blog.Categories | default "categories" }}
      {{ $cats := (index $.Site.Taxonomies $catIdent)}}
      {{ if $cats }}
-      <h4 class="fst-italic">Kategorien</h4>
-      <ul class="mb-2">
+      <h4 class="fst-italic border-bottom border-dark mt-2">Kategorien</h4>
+      <div class="categories mb-2 d-inline-block">
        {{ $parentLink := ($.Site.GetPage (printf "/categories")).Permalink }}
        {{ range $key, $sites := $cats }}
-          <li><a href="{{ (printf "%s%s" $parentLink $key) }}">{{ $key }}</a>&nbsp;<small>({{ $sites.Count }})</small></li>
+          <div class="m-1 d-inline-flex">
+            <a class="bg-dark text-white py-1 px-2 m-0 rounded-start" href="{{ (printf "%s%s" $parentLink $key) }}">{{ $key }}</a>
+            <div class="bg-danger text-white py-1 px-2 m-0 rounded-end">{{ $sites.Count }}</div>
+          </div>
        {{ end }}
-      </ul>
+      </div>
      {{ end }}

      {{/* https://mertbakir.gitlab.io/hugo/tag-cloud-in-hugo/ */}}
      {{ $tagsIdent := .Site.Params.Blog.Tags | default "tags" }}
      {{ $tags := (index $.Site.Taxonomies $tagsIdent)}}
      {{ if $tags }}
-      <h4 class="fst-italic">Schlagwortwolke</h4>
-      <div class="tag-cloud">
+      <h4 class="fst-italic border-bottom border-dark mt-2">Schlagwortwolke</h4>
+      <div class="tag-cloud d-inline-block m-0 p-0">
        {{ $parentLink := ($.Site.GetPage (printf "/%s" $tagsIdent)).Permalink }}
        {{ $maxCnt := mul 1.0 (index $tags.ByCount 0).Count }}
        {{ $minCnt := mul 1.0 (index $tags.ByCount.Reverse 0).Count }}
        {{ $div := math.Max 1 (sub $maxCnt $minCnt) }}
        {{ range $key, $sites := $tags }}
        <!-- add (mul (math.Pow (div $sites.Count $maxCnt) 2.0) 14.0) 8.0  px -->
-          {{- (printf `<a class="tag-cloud-link" style="font-size: %.3frem;" href="%s" aria-label="%s %d Einträge">%s<sup>%d</sup></a>`
+          {{- (printf `<a class="tag-cloud-link m-1 p-1" style="font-size: %.3frem;" href="%s" aria-label="%s %d Einträge">%s<sup>%d</sup></a>`
                (add (mul (math.Pow (div (sub $sites.Count $minCnt) $div) 2.0) 0.6) 0.8) 
-                ($parentLink | relURL) $key $sites.Count $key $sites.Count
+                ($key | relURL) $key $sites.Count $key $sites.Count
              ) | safeHTML -}}
          <!--<span class="badge">{{ $sites.Count }}</span>-->
          
@ -86,25 +75,13 @@
      </div>
      {{ end }}

-      {{/* range $taxonomy_term, $taxonomy := .Site.Taxonomies }}
-        {{ with $.Site.GetPage (printf "/%s" $taxonomy_term) }}
-          <h4 class="fst-italic"><a class="text-decoration-none" href="{{ .Permalink }}">{{ $taxonomy_term }}</a></h4>
-          <ul class="mb-2">
-            {{ $parentLink := .Permalink }}
-            {{ range $key, $sites := $taxonomy }}
-              <li><a href="{{ (printf "%s%s" $parentLink $key) }}">{{ $key }}</a></li>
-            {{ end }}
-          </ul>
-        {{ end }}
-      {{ end */}}
-
-      <h4 class="fst-italic">Archive</h4>
-      <ul class="mb-2">
+      <h4 class="fst-italic border-bottom border-dark mt-2">Archive</h4>
+      <div class="mb-2 list-group">
        {{/* Hier explizit auf Type achten!! */}}
        {{ range (where .Site.RegularPages "Type" "blog").GroupByDate "2006" }}
-          <li><a href="/blog/{{ .Key }}">Year {{ .Key }}</a></li>
+          <a class="list-group-item list-group-item-action" href="/blog/{{ .Key }}">Jahr {{ .Key }}</a>
        {{ end }}
-      </ul>
+      </div>
    </div>
  </div>
 {{ end }}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -1,4 +1,4 @@
-<footer class="footer bg-dark text-white">
+<footer class="bg-dark text-bg-dark">
  <nav class="nav justify-content-center navbar-expand-md navbar-dark ">
    <a class="nav-link" href="#">Impressum & Datenschutz</a>
    {{ with .OutputFormats.Get "rss" -}}