modified header, font-sizes and colors; …

assets/_default/list.scss

@@ -2,19 +2,20 @@
 @import '../partials/nav';
 @import '../partials/footer';
 
-header {
+.section.header {
   align-items: center;
-  background: rgb(60, 60, 90);
-  border-radius: 5px;
+  background: rgb(70, 70, 105);
   display: flex;
-  height: 200px;
-  margin: 40px 0;
+  height: 150px;
+  margin: 0 0 40px 0;
   text-align: center;
+  header {
     h1 {
-    font-size: 2em;
+      font-size: 1.8em;
       margin: auto;
     }
   }
+}
 
 .section-articles {
   display: grid;
@@ -41,16 +42,16 @@ header {
     img {
       background: rgb(80, 80, 120);
       border-radius: 5px 5px 0px 0px;
-      margin: -20px -20px 20px -20px;
+      margin: -20px -20px 15px -20px;
       max-height: 250px;
       max-width: calc(100% + 40px);
       object-fit: cover;
       order: -1;
     }
     h1 {
-      font-size: 1.2em;
+      font-size: 18px;
       font-weight: 400;
-      margin-top: 0px;
+      margin: 0 0 10px 0;
     }
     a {
       color: rgb(255, 255, 255);
@@ -59,7 +60,7 @@ header {
       }
     }
     .meta {
-      font-size: .8em;
+      font-size: 14px;
       margin: 0;
     }
     .author {

assets/index.scss

@@ -1,19 +1,20 @@
 @import 'partials/main';
 @import 'partials/nav';
 
-header {
+.section.header {
   align-items: center;
-  background: rgb(60, 60, 90);
-  border-radius: 5px;
+  background: rgb(70, 70, 105);
   display: flex;
-  height: 200px;
-  margin: 40px 0;
+  height: 150px;
+  margin: 0 0 40px 0;
   text-align: center;
+  header {
     h1 {
-    font-size: 2em;
+      font-size: 1.8em;
       margin: auto;
     }
   }
+}
 
 .section-header {
   color: rgb(215, 215, 225);
@@ -55,19 +56,19 @@ header {
     img {
       background: rgb(80, 80, 120);
       border-radius: 5px 5px 0px 0px;
-      margin: -20px -20px 10px -20px;
+      margin: -20px -20px 15px -20px;
       max-height: 250px;
       max-width: calc(100% + 40px);
       object-fit: cover;
       order: -1;
     }
     h1 {
-      font-size: 20px;
+      font-size: 18px;
       font-weight: 400;
-      margin: 0;
+      margin: 0 0 10px 0;
     }
     .meta {
-      font-size: 15px;
+      font-size: 14px;
       margin: 0;
     }
     .author {

assets/projects/list.scss

@@ -1,19 +1,20 @@
 @import '../partials/main';
 @import '../partials/nav';
 
-header {
+.section.header {
   align-items: center;
-  background: rgb(60, 60, 90);
-  border-radius: 5px;
+  background: rgb(70, 70, 105);
   display: flex;
-  height: 200px;
-  margin: 40px 0;
+  height: 150px;
+  margin: 0 0 40px 0;
   text-align: center;
+  header {
     h1 {
-    font-size: 2em;
+      font-size: 1.8em;
       margin: auto;
     }
   }
+}
 
 .section-articles {
   display: grid;
@@ -41,20 +42,23 @@ header {
     img {
       background: rgb(80, 80, 120);
       border-radius: 5px 5px 0px 0px;
-      margin: -20px -20px 20px -20px;
+      margin: -20px -20px 15px -20px;
       max-height: 250px;
       max-width: calc(100% + 40px);
       object-fit: cover;
       order: -1;
     }
     h1 {
-      margin-top: 0;
+      font-size: 18px;
+      font-weight: 400;
+      margin: 0 0 10px 0;
     }
-    p {
+    .meta {
+      font-size: 14px;
       margin: 0;
     }
     .status {
-      color: rgb(200, 200, 230);
+      color: rgb(215, 215, 245);
       font-style: italic;
     }
   }

layouts/_default/list.html

@@ -4,14 +4,15 @@
 
 {{ define "main" }}
 <main>
+  <section class="section header">
     <div class="container">
-    <section>
       <header>
         <h1>{{ .Title }}</h1>
         <span class="subtitle">{{.Params.subheading}}</span>
       </header>
-      {{ .Content }}
+    </div>
   </section>
+  <div class="container">
     <section class="section-articles">
     {{ range .Pages }}
       <a href="{{ .Permalink }}">

layouts/index.html

@@ -4,15 +4,17 @@
 
 {{ define "main" }}
 <main>
+  <section class="section header">
     <div class="container">
-    <section>
       <header>
         <h1>{{ .Params.heading }}</h1>
         <span class="subtitle">{{.Params.subheading}}</span>
       </header>
-      {{.Content}}
+    </div>
   </section>
-    <span class="section-header">latest
+  <div class="container">
+    <span class="section-header">
+      latest
       <a href="{{ "/blog" | relURL }}">posts</a>
     </span>
     <section class="section-articles">
@@ -34,7 +36,8 @@
       </a>
       {{ end }}
     </section>
-    <span class="section-header">latest
+    <span class="section-header">
+      latest
       <a href="{{ "/projects" | relURL }}">projects</a>
     </span>
     <section class="section-projects">

layouts/projects/list.html

@@ -4,20 +4,21 @@
 
 {{ define "main" }}
 <main>
+  <section class="section header">
     <div class="container">
-    <section>
       <header>
         <h1>{{ .Params.heading }}</h1>
         <span class="subtitle">{{.Params.subheading}}</span>
       </header>
-      {{ .Content }}
+    </div>
   </section>
+  <div class="container">
     <section class="section-articles">
     {{ range .Pages }}
       <a href="{{ .Permalink }}">
         <article>
           <h1>{{ .Title }}</h1>
-          <p class="" title="last change: {{ .Date.Format "2 Jan 2006" }}">
+          <p class="meta" title="last change: {{ .Date.Format "2 Jan 2006" }}">
             {{ with .Params.activetime }}<span class="date">{{ . }}</span>{{ end }}
             {{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}
           </p>