chrosey/homepage-picocms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] Layout-Anpassungen

Browse Source
This commit is contained in:
Christian Seyfferth 2020-05-20 17:39:42 +02:00
parent f5f43b2173
commit 275ac1d8cc
8 changed files with 96 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
Packages/chrosey_materialize/partials/blogroll.twig
View File

@ -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 %}

27
Packages/chrosey_materialize/partials/images.twig
View File

@ -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 %}

15
Packages/chrosey_materialize/partials/macros.twig
View File

@ -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 %}

40
Packages/chrosey_materialize/templates/blog.twig
View File

@ -1,33 +1,19 @@
{% extends "templates/layout/base.twig" %}
{% import "partials/macros.twig" as macros %}
{% block content %}
{{parent()}}
{{parent()}}
{% block blogroll %}
<div class="row">
{% for page in pages("blog", depth=2) | sort_by( 'time' ) | reverse %}
<div class="col s12 m3">
<div class="card hoverable">
<div class="card-image">
{{ macros.variants(images.0.url, images.0.url, images.0.alt, 200, 50 ) }}
<a href="{{ page.url }}"
class="btn-floating halfway-fab waves-effect waves-light deep-orange"><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="deep-orange-text"
href="{{ page.url }}">Zum Artikel</a>
</div>
<section class="{% if not config.theme_config.widescreen %} container{% endif %}">
<div class="row">
<div class="col s12">
{% include "partials/blogroll.twig" %}
</div>
</div>
</section>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
<section class="{% if not config.theme_config.widescreen %} container{% endif %}">
<div class="row">
<div class="col s12"></div>
</div>
</section>
{% endblock %}

24
Packages/chrosey_materialize/templates/blogitem.twig
View File

@ -1,14 +1,18 @@
{% extends "templates/blog.twig" %}
{% block content %}
<div class="col s12 m6">
{{content}}
</div>
<div class="col s12 m6">
{% include "partials/images.twig" %}
</div>
<div class="col s12">
<a href="{{ "blog"|link }}"
class="btn">Zurück</a>
</div>
<section class="{% if not config.theme_config.widescreen %} container{% endif %}">
<div class="row">
<div class="col s12 m6">
{{content}}
</div>
<div class="col s12 m6">
{% include "partials/images.twig" %}
</div>
<div class="col s12">
<a href="{{ "blog"|link }}" class="btn {{ config.theme_config.secondary_color }}">Zurück</a>
</div>
</div>
</section>
{% endblock %}

17
Packages/chrosey_materialize/templates/home.twig
View File

@ -1,18 +1,13 @@
{% extends "templates/layout/base.twig" %}
{% block content %}
<div class="parallax-container" style="height: 50vh;">
<div class="parallax-container" style="height: 60vh;">
<div class="parallax"><img src="{{ assets_url }}/welcome.jpg"></div>
</div>
{{parent()}}
{% for section in meta.sections %}
<div class="parallax-container">
<div class="parallax"><img src="images/{{section.image}}"></div>
</div>
<div class="container">
<h2>{{section.title}}</h2>
{{ section.text }}
</div>
{% endfor %}
<div class="{% if not config.theme_config.widescreen %} container{% endif %}">
{% include "partials/blogroll.twig" with { amount: 4 } %}
</div>
{% endblock %}

12
Packages/chrosey_materialize/templates/layout/base.twig
View File

@ -42,6 +42,18 @@
</div>
</section>
{% endblock %}
{% block sections %}
{% for section in meta.sections %}
<div class="parallax-container">
<div class="parallax"><img src="{{assets_url}}/{{section.image}}"></div>
</div>
<div class="{% if not config.theme_config.widescreen %} container{% endif %}">
<h2>{{section.title}}</h2>
{{ section.text }}
</div>
{% endfor %}
{% endblock %}
</main>
{% include "templates/layout/footer.twig" %}
{% block js %}

6
config/config.yml
View File

@ -18,13 +18,15 @@ themes_url:
# If this fails, override it here. Example: https://example.com/pico/themes/
theme_config: # Additional theme-specific config
widescreen: false # Default theme: Use more horizontal space (i.e. make the site container wider)
color: white
color: white # Color for Navbar and Footer
primary_color: orange # Color for Buttons and links if not defined
secondary_color: indigocategories # Color for Buttons and links if not defined
twig_config: # Twig template engine config
autoescape: html # Let Twig escape variables by default
strict_variables: false # If set to true, Twig will bail out when unset variables are being used
charset: utf-8 # The charset used by Twig templates
debug: ~ # Enable Twig's debug mode
cache: cache # Enable Twig template caching by specifying a path to a writable directory
cache: false # Enable Twig template caching by specifying a path to a writable directory
auto_reload: true # Recompile Twig templates whenever the source code changes
##