feature: news styling

Author: therobrob

assets/sass/headings.scss

@@ -0,0 +1,27 @@
+h1 {
+  font-size: 3.6rem;
+  line-height: 1.25;
+  font-weight: 700;
+  margin-bottom: 2rem;
+}
+
+h2 {
+  font-size: 2.4rem;
+  line-height: 1.25;
+  margin-bottom: 1.6rem;
+  font-weight: 700;
+}
+
+h3 {
+  font-size: 2rem;
+  line-height: 1.25;
+  margin-bottom: 1.4rem;
+  font-weight: 700;
+}
+
+h4 {
+  font-size: 1.8rem;
+  line-height: 1.25;
+  margin-bottom: 1.2rem;
+  font-weight: 700;
+}

assets/sass/main.scss

@@ -8,4 +8,5 @@
 @import "footer.scss";
 @import "content.scss";
 @import "textHighlight.scss";
+@import "headings.scss";
 @import 'node_modules/@material-design-icons/font/round.scss';

assets/sass/styles.scss

@@ -69,4 +69,16 @@ details[open] summary ~ * {
     opacity: 1;
     transform: translateY(0);
   }
+}
+
+p {
+  margin-bottom: 3.2rem;
+}
+
+p:has(p + ul) {
+  margin-bottom: 0;
+}
+
+article p:last-child {
+  margin-bottom: 0;
 }

assets/sass/teaser.scss

@@ -15,6 +15,14 @@
     border-radius: 1rem;
 }
 
+.m-teaser__dateline {
+    font-size: 1.4rem;
+}
+
+.m-teaser__headline {
+    margin-bottom: .5rem;
+}
+
 .o-stage {
     display: flex;
     justify-content: center;

layouts/_default/list.html

@@ -2,7 +2,12 @@
   <div class="container">
     <h1 data-pagefind-meta="title">{{ .Title }}</h1>
     {{ .Content }} {{ range .Pages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }} {{ end }}
+    <div class="m-teaser">
+      <a href="{{ .RelPermalink }}">
+        <h2 class="m-teaser__headline">{{ .LinkTitle }}</h2>
+      </a>
+      <div>{{ .Summary | plainify | truncate 200 }}</div>
+    </div>
+    {{ end }}
   </div>
 {{ end }}

layouts/_default/single.html

@@ -1,14 +1,12 @@
 {{ define "main" }}
-<div class="container">
+<article class="container">
     <h1 data-pagefind-meta="title">{{ .Title }}</h1>
 
     {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
     {{ $dateHuman := .Date | time.Format ":date_long" }}
     <div class="updateDate">
         <time datetime="{{ $dateMachine }}">Zuletzt aktualisiert: {{ $dateHuman }}</time>
     </div>
-    <br>
-    <br>
 
     <div class="content">
         {{ .Content }}
@@ -24,5 +22,5 @@ <h3>See Also</h3>
         </ul>
     {{ end }}
     {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
-</div>
+</article>
 {{ end }}

layouts/country/single.html

@@ -1,18 +1,17 @@
 {{ define "main" }}
-<div class="container">
+<article class="container">
     <h1 data-pagefind-meta="title">{{ .Title }}</h1>
 
     {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
     {{ $dateHuman := .Date | time.Format ":date_long" }}
     <div class="updateDate">
         <time datetime="{{ $dateMachine }}">Zuletzt aktualisiert: {{ $dateHuman }}</time>
     </div>
-    <br>
-    <br>
-
+    <hr>
     <div class="tableOfContents">
         {{ .TableOfContents }}
     </div>
+    <hr>
 
     <div class="content" data-pagefind-weight="2">
         {{ .Content }}
@@ -28,5 +27,5 @@ <h3>See Also</h3>
         </ul>
     {{ end }}
     {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
-</div>
+</article>
 {{ end }}

layouts/operator/single.html

@@ -1,19 +1,17 @@
 {{ define "main" }}
-<div class="container">
+<article class="container">
     <h1 data-pagefind-meta="title">{{ .Title }}</h1>
 
     {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
     {{ $dateHuman := .Date | time.Format ":date_long" }}
     <div class="updateDate">
         <time datetime="{{ $dateMachine }}">Zuletzt aktualisiert: {{ $dateHuman }}</time>
     </div>
-    <br>
-    <br>
-
+    <hr>
     <div class="tableOfContents">
         {{ .TableOfContents }}
     </div>
-
+    <hr>
     <div class="content" data-pagefind-weight="3">
         {{ .Content }}
     </div>