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 %} {% block blogroll %}
<ul class="row"> <div class="row">
<li class="col s12">die neuesten Blogeinträge:</li> {% for page in pages("blog", depth=2) | sort_by( 'time' ) | reverse | slice(0,amount) %}
{% for page in pages("blog", depth=2) | sort_by( 'time' ) | reverse %} <div class="col s12 m3">
<li class="col s12"> <div class="card hoverable">
<a class="deep-orange-text" <div class="card-image">
href="{{ page.url }}">{{ page.title }}</a> {{ macros.variants( theme_url ~ "/img/categories/" ~ page.meta.categories.0 ~ ".jpg") }}
</li> <a href="{{ page.url }}" class="btn-floating halfway-fab waves-effect waves-light {{config.theme_config.primary_color}}">
{% endfor %} <i class="material-icons">chevron_right</i>
</ul> </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 %} {% endblock %}

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

@ -1,19 +1,18 @@
{% import "partials/macros.twig" as macros %} {% import "partials/macros.twig" as macros %}
{% block images %} {% block images %}
<div class="container"> <div class="container">
{% if images | length > 1 %} {% if images | length > 1 %}
<div class="carousel"> <div class="carousel">
{% for image in images %} {% for image in images %}
<a href="{{ image.url }}" <a href="{{ image.url }}" class="carousel-item">
class="carousel-item"> {{ macros.variants(image.url, image.preview, image.alt, 300, 400 ) }}
{{ macros.variants(image.url, image.preview, image.alt, 200, 50 ) }} </a>
</a> {% endfor %}
{% endfor %} </div>
</div> {% else %}
{% else %} {{ macros.variants(images.0.url, images.0.preview, images.0.alt, 300, 400, "materialboxed " ) }}
{{ macros.variants(images.0.url, images.0.preview, images.0.alt, 200, 50, "materialboxed" ) }} {% endif %}
{% endif %} </div>
</div>
{% endblock %} {% 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 %} {% set preview = preview!="" ? preview : fullImage %}
<div data-href="{{ fullImage }}" <div data-href="{{ fullImage }}" class="progressive replace {{class}}">
class="progressive replace {{class}}"> <img class="preview" src="{{ preview }}" alt="{{ alt}}" height="{{ height }}" width="{{ width }}">
<img class="preview" </div>
src="{{ preview }}"
alt="{{ alt}}"
height="{{ height }}"
width="{{ width }}">
</div>
{% endmacro %} {% endmacro %}

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

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

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

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

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

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

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

@ -42,6 +42,18 @@
</div> </div>
</section> </section>
{% endblock %} {% 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> </main>
{% include "templates/layout/footer.twig" %} {% include "templates/layout/footer.twig" %}
{% block js %} {% 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/ # If this fails, override it here. Example: https://example.com/pico/themes/
theme_config: # Additional theme-specific config theme_config: # Additional theme-specific config
widescreen: false # Default theme: Use more horizontal space (i.e. make the site container wider) 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 twig_config: # Twig template engine config
autoescape: html # Let Twig escape variables by default 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 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 charset: utf-8 # The charset used by Twig templates
debug: ~ # Enable Twig's debug mode 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 auto_reload: true # Recompile Twig templates whenever the source code changes
## ##