Add three box design

This commit is contained in:
L3D 2021-03-18 01:58:45 +01:00
parent f3d63e1ce8
commit 8a262a251b
No known key found for this signature in database
GPG Key ID: CD08445BFF4313D1
9 changed files with 156 additions and 66 deletions

View File

@ -230,7 +230,7 @@ header {
.claim__button {
height: 3rem;
margin: 1.5rem 1rem 0rem 0;
padding: 0.5rem 2.5rem 0.5rem 2.5rem;
padding: 0.5rem 2rem 0.5rem 2rem;
background-color: var(--wtf-light-blue);
color: var(--wtf-nearly-white);
font-size: 1.2rem;

View File

@ -42,3 +42,44 @@ content_image_alt: Startendes Space Shuttle
----
content_image_src: images.nasa.gov/details-sts057-s-055
#### flow_seperator ####
#### flow_third_box_section ####
title: ouuu
----
inner_box:
##### flow_one_innerbox_section #####
title: Das Wichtigste gibt es jetzt auf die Ohren
-----
box_image: nasa-space-shuttle.jpg
-----
box_content: Unser WTF Podcast fasst für Mitglieder und Interessierte die wichtigsten Nachrichten und Entwicklungen aus dem genossenschaftlichen Leben zusammen.
-----
box_link: Podcast
-----
box_url: https://vebit.xyz/podcast/
##### flow_one_innerbox_section #####
title: Zusammen Arbyten, die eigene Idee fliegen sehen
-----
box_image: nasa-space-shuttle.jpg
-----
box_content:
Wir verstehen uns als Plattform for Hackende, auf der sich mit Gleichgesinnten wirtschaftliche Projekte möglich werden, die es anders nicht gäbe. Wir fördern und bewirtschaften im Kollektiv als Genossenschaft die Leistungen unserer Mitglieder.
-----
box_link: Projekte
-----
box_url:
##### flow_one_innerbox_section #####
title:
Genossenschafts­anteile sind eine Anlage, kein Geschenk.
-----
box_image: nasa-space-shuttle.jpg
-----
box_content:
Wir bieten useren Mitgliedern nicht nur ein gutes Netzwerk, sondern auch eine sichere Anlagemöglichkeit. Hier kannst Du Dich über die Anlagekriterien informieren.
-----
box_link: Mitglied werden
-----
box_url: https://wtf-eg.de/mitglieder/beitreten/

View File

@ -0,0 +1,9 @@
[block]
name = Flow One Box Section
button_label = Flow One Box Section
label = {{ this.title }}
[fields.title]
label = Title
type = string

View File

@ -0,0 +1,30 @@
[block]
name = One Box Section
button_label = One Box Section
label = {{ this.title }}
[fields.title]
label = Titel
type = string
width = 1/2
[fields.box_image]
label = Box Image
description = Upload a Image to select it here
type = select
source = record.attachments.images
width = 1/2
[fields.box_content]
label = Box Content
type = markdown
[fields.box_link]
label = Link Text
type = string
width = 1/2
[fields.box_url]
label = Link Adresse
type = url
width = 1/2

View File

@ -0,0 +1,13 @@
[block]
name = Flow Three Box Section
button_label = Flow Three Box Section
label = {{ this.title }}
[fields.title]
label = Title
type = string
[fields.inner_box]
label = One Box
type = flow
flow_blocks = flow_one_innerbox_section

View File

@ -16,4 +16,4 @@ type = string
[fields.section]
label = Sections
type = flow
flow_blocks = flow_text_image_section, flow_seperator
flow_blocks = flow_text_image_section, flow_seperator, flow_third_box_section

View File

@ -0,0 +1,15 @@
<div class="content__inner_third_box">
<h2 class="content__inner_third_heading">{{ this.title }}</h2>
{% if this.box_image is defined and this.box_image != '' %}
{% set image = record.attachments.images.get(this.box_image) %}
<img class="content__inner_third_image" class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
{% endif %}
{{ this.box_content }}
<div class="content__button_box">
<button class="content__button">
<a class="content__inner_third_button_link" href="{{ this.box_url }}">{{ this.box_link }}</a>
</button>
</div>
</div>

View File

@ -0,0 +1,46 @@
<!-- 1/3 Layout - start -->
<section class="content">
<div class="content__third_box">
{% for inner in this.inner_box.blocks %}
{{ inner }}
{% endfor %}
{#
<div class="content__inner_third_box">
<h2 class="content__inner_third_heading">
Zusammen Arbyten, die eigene Idee fliegen sehen.
</h2>
{% if this.attachments.images %}
{% for image in this.attachments.images %}
<img class="content__inner_third_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
{% endfor %}
{% endif %}
<p>Wir verstehen uns als Plattform for Hackende, auf der sich mit Gleichgesinnten wirtschaftliche Projekte möglich werden, die es anders nicht gäbe. Wir fördern und bewirtschaften im Kollektiv als Genossenschaft die Leistungen unserer Mitglieder.
</p>
<div class="content__button_box">
<button class="content__button">
<a class="content__inner_third_button_link" href="#">Projekte</a>
</button>
</div>
</div>
<div class="content__inner_third_box">
<h2 class="content__inner_third_heading">
Genossenschafts&shy;anteile sind eine Anlage, kein Geschenk.
</h2>
{% if this.attachments.images %}
{% for image in this.attachments.images %}
<img class="content__inner_third_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
{% endfor %}
{% endif %}
<p>Wir bieten useren Mitgliedern nicht nur ein gutes Netzwerk, sondern auch eine sichere Anlagemöglichkeit. Hier kannst Du Dich über die Anlagekriterien informieren.
</p>
<div class="content__button_box">
<button class="content__button">
<a class="content__inner_third_button_link" href="#">Kapitalanlage</a>
</button>
</div>
</div>
#}
</div>
</section>
<!-- 1/3 Layout - end -->

View File

@ -10,70 +10,6 @@
{% block body %}
<!-- 1/3 Layout - start -->
<section class="content">
<div class="content__third_box">
<div class="content__inner_third_box">
<h2 class="content__inner_third_heading">
Das Wichtigste gibt es jetzt auf die Ohren <a class="content__inner_third_heading_link" href="https://vebit.xyz/podcast/">WTF-Podcast</a>
</h2>
{% if this.attachments.images %}
{% for image in this.attachments.images %}
<img class="content__inner_third_image" class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
{% endfor %}
{% endif %}
<p>Unser Podcast "WTF Aktuell" fasst für Mitglieder und Interessierte die wichtigsten Nachrichten und Entwicklungen aus dem genossenschaftlichen Leben zusammen.
</p>
<ul>
<li>WTF eG Podcast S02E02</li>
<li>WTF eG Podcast S02E01</li>
</ul>
<div class="content__button_box">
<button class="content__button">
<a class="content__inner_third_button_link" href="https://vebit.xyz/podcast/">Podcast</a>
</button>
</div>
</div>
<div class="content__inner_third_box">
<h2 class="content__inner_third_heading">
Zusammen Arbyten, die eigene Idee fliegen sehen.
</h2>
{% if this.attachments.images %}
{% for image in this.attachments.images %}
<img class="content__inner_third_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
{% endfor %}
{% endif %}
<p>Wir verstehen uns als Plattform for Hackende, auf der sich mit Gleichgesinnten wirtschaftliche Projekte möglich werden, die es anders nicht gäbe. Wir fördern und bewirtschaften im Kollektiv als Genossenschaft die Leistungen unserer Mitglieder.
</p>
<div class="content__button_box">
<button class="content__button">
<a class="content__inner_third_button_link" href="#">Projekte</a>
</button>
</div>
</div>
<div class="content__inner_third_box">
<h2 class="content__inner_third_heading">
Genossenschafts&shy;anteile sind eine Anlage, kein Geschenk.
</h2>
{% if this.attachments.images %}
{% for image in this.attachments.images %}
<img class="content__inner_third_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
{% endfor %}
{% endif %}
<p>Wir bieten useren Mitgliedern nicht nur ein gutes Netzwerk, sondern auch eine sichere Anlagemöglichkeit. Hier kannst Du Dich über die Anlagekriterien informieren.
</p>
<div class="content__button_box">
<button class="content__button">
<a class="content__inner_third_button_link" href="#">Kapitalanlage</a>
</button>
</div>
</div>
</div>
</section>
<!-- 1/3 Layout - end -->
<!-- Icon boxes - start -->
<section class="content">
<div class="content__box">