CHANGE card display, CHANGE Link List, ADD Custom Bullet Points

assets/scss/footer.scss

@@ -42,6 +42,10 @@
     color: inherit;
 }
 
+.link:before {
+    content: none;
+}
+
 .copyright {
     margin-top: 2rem;
     width: 100%;

assets/scss/header.scss

@@ -21,6 +21,11 @@
     margin: auto;
 }
 
+.header-blocker {
+    width: 100%;
+    min-height: 4rem;
+}
+
 .sticky {
     position: fixed;
     top: 0;

assets/scss/index.scss

@@ -45,6 +45,28 @@ a {
     color: {{ .Site.Params.color.secondary }};
 }
 
+{{ if .Site.Params.list.image }}
+
+    ul {
+        list-style: none;
+        padding-left: 1rem;
+    }
+
+    ul li {
+        display: flex;
+    }
+
+    ul li:before {
+        content: url({{ .Site.Params.list.image }});
+        display: inline-block;
+        width: 21px;
+        height: 21px;
+        margin-right: 10px;
+        flex-shrink: 0;
+    }
+
+{{ end }}
+
 button {
     font-family: inherit;
     font-size: 100%;
@@ -381,6 +403,7 @@ button {
 .mediumCard {
     display: flex;
     flex-direction: column;
+    flex: 1 1 300px;
     border-radius: 5px;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     max-width: 350px;
@@ -399,14 +422,24 @@ button {
     margin: 5px;
     justify-content: center;
 }
+
+.cardContent {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+}
+
 .cardImage {
     display: flex;
     width: 100%;
     height: 150px;
     border-radius: 5px 5px 0px 0px;
     object-fit: cover;
-    flex-shrink: 0;
+}
-    flex-grow: 1;
+
+.noCover {
+    object-fit: unset !important;
 }
 
 .cardIcon {
@@ -429,8 +462,6 @@ button {
     padding: 6px;
     padding-top: 0px;
     word-wrap: break-word;
-    //white-space: -moz-pre-wrap;
-    //white-space: pre-wrap;
     height: 100%;
 }
 
@@ -453,6 +484,15 @@ button {
     object-fit: cover;
 }
 
+.image-copyright {
+    width: 100%;
+    max-width: 1152px;
+    align-self: center;
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+    font-size: small;
+}
+
 .more-button {
     padding-top: 1rem;
     text-align: center;

layouts/_default/list.html

@@ -9,6 +9,8 @@
         {{ end }}
         {{.Content}}
     </div>
+  {{ else }}
+    <div class="header-blocker"></div>
   {{ end }}
   {{- range $index, $page := .Pages }}
     {{ $odd := mod $index 2 }}

layouts/index.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+    <div class="header-blocker"></div>
     {{- range $index, $section := .Site.Params.sections }}
         {{ $odd := mod $index 2 }}
         {{ if eq .type "slider" }}

layouts/partials/links.html

@@ -8,7 +8,7 @@
   {{- $id := .id }}
 {{end}}
 <div id="{{ $id }}" class="section {{if eq $odd 0}} section-even {{end}}">
-  <div class="section-content links">
+  <div class="section-content">
     {{ with $links.title }}
       <div class="title">
         <h1 class="content-title">{{ . }}</h1>
@@ -17,7 +17,23 @@
     {{ end }}
     <div class="cardList">
       {{- range $links.links}}
-        <a href="{{ .url }}">
+        <div class="mediumCard">
+          <a href="{{ .url }}">
+            <div class="cardContent">
+              {{ if .image }}
+                <img class="cardImage {{ if eq .image.cover false }} noCover {{ end }}" alt="{{ .image.alt }}" src="{{ .image.url }}" />
+              {{ else if .icon }}
+                <div class="cardImage">
+                  <i class="fas fa-{{ .icon }} cardIcon"></i>
+                </div>
+              {{ else }}
+                <img class="cardImage" alt="default image" src="{{ $defaultimage }}"  />
+              {{ end }}
+              <div class="cardTitle">{{ .title }}</div>
+            </div>
+          </a>
+        </div>
+        {{/*  <a href="{{ .url }}">
           <div class="mediumCard">
             {{ if .image }}
               <img class="cardImage" alt="{{ .image.alt }}" src="{{ .image.url }}" />
@@ -30,7 +46,7 @@
             {{ end }}
             <div class="cardTitle">{{.title}}</div>
           </div>
-        </a>
+        </a>  */}}
       {{- end}}
     </div>
   </div>

layouts/partials/posts.html

@@ -16,18 +16,20 @@
         </div>
         <div class="cardList">
             {{ range first 3 $pages }}
-                <a href="{{.Permalink}}">
+                <div class="card">
-                    <div class="card">
+                    <a href="{{.Permalink}}">
-                        {{ if .Params.image }}
+                        <div class="cardContent">
-                            <img class="cardImage" src="{{ .Params.image }}" />
+                            {{ if .Params.image }}
-                        {{ else }}
+                                <img class="cardImage {{ if eq .Params.image.cover false }} noCover {{ end }}" src="{{ .Params.image.url }}" />
-                            <img class="cardImage" src="{{ $defaultimage }}"  />
+                            {{ else }}
-                        {{ end }}
+                                <img class="cardImage" src="{{ $defaultimage }}"  />
-                        <div class="cardTitle">{{.Title}}</div>
+                            {{ end }}
-                        <div class="cardDescription">{{ .Content | safeHTML | truncate 250 }}</div>
+                            <div class="cardTitle">{{.Title}}</div>
-                        <div class="cardDetail">{{.Date.Format "02.01.2006"}} | {{.ReadingTime}} Minuten</div>
+                            <div class="cardDescription">{{ .Content | safeHTML | truncate 250 }}</div>
-                    </div>
+                            <div class="cardDetail">{{.Date.Format "02.01.2006"}} | {{.ReadingTime}} Minuten</div>
-                </a>
+                        </div>
+                    </a>
+                </div>
             {{ end }}
         </div>
         <div class="more-button"><a href="{{ $posts.id }}"> {{ $posts.moretext }} </a></div>

layouts/posts/list.html

@@ -11,18 +11,20 @@
     <!-- Ranges through content/posts/*.md -->
     <div class="cardList">
     {{ range .Pages }}
-        <a href="{{.Permalink}}">
+        <div class="card">
-            <div class="card">
+            <a href="{{.Permalink}}">
-                {{ if .Params.image }}
+                <div class="cardContent">
-                    <img class="cardImage" src="{{ .Params.image }}" />
+                    {{ if .Params.image }}
-                {{ else }}
+                        <img class="cardImage {{ if eq .Params.image.cover false }} noCover {{ end }}" src="{{ .Params.image.url }}" />
-                    <img class="cardImage" src="{{ $.Site.Params.defaultimage }}"  />
+                    {{ else }}
-                {{ end }}
+                        <img class="cardImage" src="{{ .Site.Params.defaultimage }}"  />
-                <div class="cardTitle">{{.Title}}</div>
+                    {{ end }}
-                <div class="cardDescription">{{ .Content | safeHTML | truncate 250 }}</div>
+                    <div class="cardTitle">{{.Title}}</div>
-                <div class="cardDetail">{{.Date.Format "02.01.2006"}} | {{.ReadingTime}} Minuten</div>
+                    <div class="cardDescription">{{ .Content | safeHTML | truncate 250 }}</div>
-            </div>
+                    <div class="cardDetail">{{.Date.Format "02.01.2006"}} | {{.ReadingTime}} Minuten</div>
-        </a>
+                </div>
+            </a>
+        </div>
     {{ end }}
     </div>
 </div>