[TASK] update Layout

themes/chrosey/css/style.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Alegreya|Allura|Caveat|Lato&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Alegreya|Caveat|Lato&display=swap');
 
 :root {
     --fore-color: black;
@@ -26,10 +26,8 @@
 html {
     background-color: var(--back-color);
     font-family: 'Lato', sans-serif;
-}
+    font-size: 16px;
-
+    line-height: 1.2;
-* {
-    vertical-align: middle;
 }
 
 .container {
@@ -50,6 +48,20 @@ header {
     grid-column: 2 / span 2;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.site-title {
+    font-family: Alegreya;
+}
+
+.site-title {
+    font-size: 1.6em;
+}
+
 a {
     text-decoration: none;
 }
@@ -72,6 +84,7 @@ nav {
     color: var(--nav-fore-color);
     border-radius: var(--universal-border-radius);
     margin: var(--universal-margin);
+    border-right: solid var(--border-color) 1px;
 }
 
 nav * {
@@ -135,3 +148,41 @@ main {
 footer {
     grid-column: span 3;
 }
+
+/**
+* Blog Section
+*/
+
+.blog-entry {
+    margin-bottom: 3em;
+    display: flex;
+}
+
+.blog-entry .img {
+    display: block;
+    height: 150px;
+    width: 150px;
+    background-color: var(--secondary-fore-color);
+    border-radius: 50%;
+}
+
+.blog-entry .text {
+    position: relative;
+    width: 100%;
+    width: calc(100% - 200px);
+    padding-left: 2em;
+}
+
+.blog-entry .text h3 {
+    margin-top: 0;
+    margin-bottom: .8em;
+    font-size: 1.6em;
+}
+
+.meta-wrap {
+    display: block;
+}
+
+.meta-wrap .meta span:nth-child(2n-1) {
+    color: var(--secondary-fore-color);
+}

themes/chrosey/templates/blog/index.twig

@@ -5,14 +5,32 @@
 
 <section class="articles">
     {% for page in pages(current_page.id, depth=3)|sort_by("time")|reverse if not page.hidden %}
-    <article>
+    <article class="blog-entry">
+        <a href="{{ page.url }}">
+            {% if page.meta.image %}
+            <img src="{{ page.meta.image|url }}"
+                 alt="{{ page.meta.image_alt }}"
+                 class="img">
+            {% else %}
+            <i class="img"></i>
 
-        <blockquote>
+            {% endif %}
-            <a href="{{ page.url }}">{{ page.title }}</a>
+
+        </a>
+        <div class="text">
+            <h3>{{ page.title }}</h3>
+            <div class="meta-wrap">
+                <p class="meta">
+                    <span> {{ page.meta.date_formatted }}</span>
+                    {% if page.meta.category %}
+                    &middot;
+                    <span> {{ page.meta.category }}</span>
+                    {% endif %}
+                </p>
+            </div>
             <p>{{ page.description }}</p>
-            <small>{{ page.meta.date_formatted }} &middot; {{page.meta.author}}
+            <a href="{{ page.url }}">Weiterlesen ></a>
-            </small>
+        </div>
-        </blockquote>
 
     </article>
     {% endfor %}

themes/chrosey/templates/blog/item.twig

@@ -3,8 +3,8 @@
 {% block content %}
 {{ parent() }}
 
-<nav class="blog-navigation">
+<div class="blog-navigation">
     <a href="{{ "blog"|link }}">Zurück</a>
 
-</nav>
+</div>
 {% endblock %}

themes/chrosey/templates/layout/base.twig

@@ -35,7 +35,7 @@
         <a href="{{ "index"|link }}">
             <img src="{{ pages["_meta"].meta.logo|url }}"
                  alt="" />
-            <h1>{{ site_title }}</h1>
+            <span class="site-title">{{ site_title }}</span>
         </a>
     </header>
     <nav>