Gro/webseite
0
0
Fork 0
forked from ag_kommunikation/webseite
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added auto generation of the signature corner on images via css and svg.

Browse Source
This commit is contained in:
Stephan 2021-05-24 17:51:21 +02:00
parent 2792b474fd
commit ecd21f9781
6 changed files with 66 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/css/style.css
View File

@ -876,6 +876,35 @@ hr.-even {
flex-direction: column;
justify-content: flex-start;
}
.image_box {
width: 100%;
height: max-content;
display: flex;
flex-direction: column;
}
.image_box__image {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 55% 45%;
grid-template-rows: 10% 90%;
}
.image_box__top_bar {
grid-column: 2 / 3;
grid-row: 1 / 1;
background-image: url("../images/image_corner.svg");
background-size: cover;
background-repeat: no-repeat;
z-index: 5;
}
.image_box__image img {
grid-column: 1 / 3;
grid-row: 1 / 2;
z-index: 0;
}
/* main - Ende */
/* footer - Start */

7
assets/images/image_corner.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 2801 325" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1,0,0,0.574167,-2799.5,-10)">
<path d="M2800,0L3200,600L5600,600L5600,0L2800,0Z" style="fill:#edefeb;stroke:#000;stroke-width:1.23px;"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 655 B

7
templates/blocks/flow_one_innerbox_section.html
View File

@ -2,7 +2,12 @@
<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">
<div class="image_box">
<div class="image_box__image">
<div class="image_box__top_bar"></div>
<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">
</div>
</div>
{% endif %}
{{ this.box_content }}
<div class="content__button_box">

7
templates/blocks/flow_text_image_section.html
View File

@ -31,7 +31,12 @@
Wichtig: Keine Angaben für width und height berechnen, dann geht beim Skalieren das Seitenverhältnis kaputt.
#}
<img class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="{{ this.content_image_alt }}" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
<div class="image_box">
<div class="image_box__image">
<div class="image_box__top_bar"></div>
<img class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="{{ this.content_image_alt }}" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
</div>
</div>
{% if this.content_image_src is defined and this.content_image_alt != '' %}
<p>{{ this.content_image_src }}</p>
{% endif %}

14
templates/blocks/flow_third_box_section.html
View File

@ -11,7 +11,12 @@
</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">
<div class="image_box">
<div class="image_box__image">
<div class="image_box__top_bar"></div>
<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">
</div>
</div>
{% 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.
@ -29,7 +34,12 @@
</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">
<div class="image_box">
<div class="image_box__image">
<div class="image_box__top_bar"></div>
<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">
</div>
</div>
{% 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.

7
templates/flow_block_page.html
View File

@ -27,7 +27,12 @@
{% if this.attachments.images %}
<div class="content__inner_half_box">
{% for image in this.attachments.images %}
<img class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="{{ image.description }}" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
<div class="image_box">
<div class="image_box__image">
<div class="image_box__top_bar"></div>
<img class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="{{ image.description }}" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
</div>
</div>
{% endfor %}
</div>
{% endif %}