[TASK] Layout-Anpassungen

Packages/chrosey_materialize/partials/blogroll.twig

@@ -1,11 +1,31 @@
+{% import "partials/macros.twig" as macros %}
+
+{% set amount = amount ? amount : 20 %}
+
 {% block blogroll %}
-<ul class="row">
-    <li class="col s12">die neuesten Blogeinträge:</li>
-    {% for page in pages("blog", depth=2) | sort_by( 'time' ) | reverse %}
-    <li class="col s12">
-        <a class="deep-orange-text"
-           href="{{ page.url }}">{{ page.title }}</a>
-    </li>
-    {% endfor %}
-</ul>
+	<div class="row">
+		{% for page in pages("blog", depth=2) | sort_by( 'time' ) | reverse | slice(0,amount) %}
+			<div class="col s12 m3">
+				<div class="card hoverable">
+					<div class="card-image">
+						{{ macros.variants( theme_url ~ "/img/categories/" ~ page.meta.categories.0 ~ ".jpg") }}
+						<a href="{{ page.url }}" class="btn-floating halfway-fab waves-effect waves-light {{config.theme_config.primary_color}}">
+							<i class="material-icons">chevron_right</i>
+						</a>
+					</div>
+					<div class="card-content">
+						<p class="grey-text">{{ page.date }}</p>
+						<h5>
+							{{ page.title }}</h5>
+						<p class="grey-text text-darken-2">
+							{{ page.description }}</p>
+					</div>
+					<div class="card-action">
+						<a class="{{config.theme_config.primary_color}}-text" href="{{ page.url }}">Zum Artikel</a>
+					</div>
+
+				</div>
+			</div>
+		{% endfor %}
+	</div>
 {% endblock %}

Packages/chrosey_materialize/partials/images.twig

@@ -1,19 +1,18 @@
 {% import "partials/macros.twig" as macros %}
 
 {% block images %}
-<div class="container">
-    {% if images | length > 1 %}
-    <div class="carousel">
-        {% for image in images %}
-        <a href="{{ image.url }}"
-           class="carousel-item">
-            {{ macros.variants(image.url, image.preview, image.alt, 200, 50 ) }}
-        </a>
-        {% endfor %}
-    </div>
-    {% else %}
-    {{ macros.variants(images.0.url, images.0.preview, images.0.alt, 200, 50, "materialboxed" ) }}
-    {% endif %}
-</div>
+	<div class="container">
+		{% if images | length > 1 %}
+			<div class="carousel">
+				{% for image in images %}
+					<a href="{{ image.url }}" class="carousel-item">
+						{{ macros.variants(image.url, image.preview, image.alt, 300, 400 ) }}
+					</a>
+				{% endfor %}
+			</div>
+		{% else %}
+			{{ macros.variants(images.0.url, images.0.preview, images.0.alt, 300, 400, "materialboxed " ) }}
+		{% endif %}
+	</div>
 
 {% endblock %}

Packages/chrosey_materialize/partials/macros.twig

@@ -1,12 +1,7 @@
-{% macro variants(fullImage,preview,alt="",height,width,class="") %}
+{% macro variants(fullImage,preview=null,alt="",height=300,width=400,class="") %}
 
-{% set preview = preview!="" ? preview : fullImage %}
-<div data-href="{{ fullImage }}"
-     class="progressive replace {{class}}">
-     <img class="preview"
-          src="{{ preview }}"
-          alt="{{ alt}}"
-          height="{{ height }}"
-          width="{{ width }}">
-</div>
+	{% set preview = preview!="" ? preview : fullImage %}
+	<div data-href="{{ fullImage }}" class="progressive replace {{class}}">
+		<img class="preview" src="{{ preview }}" alt="{{ alt}}" height="{{ height }}" width="{{ width }}">
+	</div>
 {% endmacro %}