add featured imaged to post

_includes/post-featured-image.html

@@ -0,0 +1,3 @@
+<div class="post-featured-image">
+    <img src="/assets/images/header/{{include.image}}" alt="{{include.alt}}" /> 
+</div>

_layouts/post.html

@@ -3,6 +3,7 @@ layout: default
 ---
 <article class="post">
     <header class="post-header">
+        {% if page.featured-image %}{% include post-featured-image.html image=page.featured-image alt=page.featured-image-alt %}{% endif %}
         <div class="post-title wrapper">
             <h2>
                 {% if page.external-url %}
@@ -11,7 +12,7 @@ layout: default
                     {{ page.title }}
                 {% endif %}
             </h2>
-        </div>
+        
             <p class="public-date">vom <time class="page-date" datetime="{{ page.date | date: "%Y-%m-%d"}}">
                     {% assign m = page.date | date: "%-m" %}
                     {{ page.date | date: "%d" }}
@@ -33,7 +34,9 @@ layout: default
                 </time>
                 {% if page.external-url %}
                     &nbsp;|&nbsp;<a href="{{ page.external-url }}">Org. Post</a>
-            {% endif %}</p>
+                {% endif %}
+            </p>
+        </div>
     </header>
     <div class="post-content wrapper">
         {{ content }}

_posts/2021-06-15-update.md

@@ -1,6 +1,11 @@
 ---
 title: Update!
 layout: post
+date: 2021-06-15
+author: Nico Jensen
+description: Ein update zum Blog selbst und zur Seite
+featured-image: update.png
+featured-image-alt: Bild von Code der Seite für das Update
 ---
 Moin!
 

_sass/main.scss

@@ -49,7 +49,7 @@ header.header p {
 .wrapper {
   margin: 0 auto;
   width: 100%;
-  max-width: 500px;
+  max-width: 700px;
   padding: 0 10px;
 }
 
@@ -109,6 +109,15 @@ article.post header.post-header div.post-title h2 {
   margin-bottom: 0;
 }
 
+article.post header.post-header div.post-featured-image {
+  text-align: center;
+}
+
+article.post header.post-header div.post-featured-image img {
+  max-width: 100%;
+  width: 760px;
+}
+
 article.post header.post-header p.public-date {
   margin-top: 0;
   font-size: 0.8em;