Layout of thirds for 2nd homepage section.

This commit is contained in:
Stephan 2021-03-06 18:02:02 +01:00
parent d3e7938720
commit e1c46c6750
2 changed files with 159 additions and 11 deletions

View File

@ -223,7 +223,7 @@ header {
grid-row: 1 / span 1; grid-row: 1 / span 1;
} }
.header__button { .header__button, .content__button {
height: 3rem; height: 3rem;
margin: 1.5rem 1rem 0rem 0; margin: 1.5rem 1rem 0rem 0;
padding: 0.5rem 2.5rem 0.5rem 2.5rem; padding: 0.5rem 2.5rem 0.5rem 2.5rem;
@ -234,6 +234,10 @@ header {
border-radius: 2rem; border-radius: 2rem;
} }
.content__button {
width: 70%;
}
.header__bg_box { .header__bg_box {
margin-top: -0.75rem; margin-top: -0.75rem;
@ -422,11 +426,16 @@ header {
text-decoration: none; text-decoration: none;
} }
.header__button_link { .content__inner_third_button_link {
color: white;
font-family: 'Lato Bold;
}
.header__button_link, .content__inner_third_button_link {
text-decoration: none !important; text-decoration: none !important;
} }
.header__button_link:hover { .header__button_link:hover, .content__inner_third_button_link:hover {
text-decoration: underline !important; text-decoration: underline !important;
} }
/* header - Ende */ /* header - Ende */
@ -456,6 +465,13 @@ h2 {
margin-top: 0.5em; margin-top: 0.5em;
} }
.content__inner_third_heading {
font-family: 'Lato';
font-size: 1.5rem;
color: var(--wtf-orange);
margin-bottom: 1.5rem;
}
h3 { h3 {
font-family: 'Noto Serif'; font-family: 'Noto Serif';
font-size: 1.75rem; font-size: 1.75rem;
@ -525,6 +541,12 @@ hr.-even {
color: var(--wtf-light-grey); color: var(--wtf-light-grey);
} }
.body__separator {
width: 90%;
margin: 3rem 0 0 0;
color: var(--wtf-orange);
}
.content { .content {
padding: 1.5rem 0; padding: 1.5rem 0;
width: 100%; width: 100%;
@ -545,12 +567,12 @@ hr.-even {
color: var(--wtf-mid-grey) !important; color: var(--wtf-mid-grey) !important;
} }
.content__box, .content__half_box { .content__box, .content__half_box, .content__third_box {
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
} }
.content__half_box { .content__half_box, .content__third_box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@ -559,6 +581,32 @@ hr.-even {
width: 50%; width: 50%;
} }
.content__inner_third_box {
width: 33%;
}
.content__inner_third_image {
margin-bottom: 1.5rem;
}
.content__inner_third_heading_link {
color: var(--wtf-light-blue);
text-decoration: underline;
}
.content__inner_third_heading_link:hover {
color: var(--wtf-dark-grey);
}
.content__button_box {
width: 100%;
}
.content__button {
display: block;
margin: 1.5rem auto 0 auto;
}
.content__teaser { .content__teaser {
color: var(--wtf-orange); color: var(--wtf-orange);
font-size: 1.15rem; font-size: 1.15rem;
@ -573,7 +621,7 @@ hr.-even {
vertical-align: middle; vertical-align: middle;
} }
.content__half_box_image { .content__half_box_image, .content__inner_third_image {
width: 100%; width: 100%;
} }
@ -601,7 +649,7 @@ hr.-even {
margin: 3.5rem 1.5rem 0 1.5rem; margin: 3.5rem 1.5rem 0 1.5rem;
} }
.content__inner_box, .content__inner_half_box { .content__inner_box, .content__inner_half_box, .content__inner_third_box {
margin: -0.5rem 1.5rem 0 1.5rem; margin: -0.5rem 1.5rem 0 1.5rem;
} }
@ -762,6 +810,10 @@ footer {
.content__inner_box { .content__inner_box {
margin: -0.5rem 1.5rem 0 1.5rem; margin: -0.5rem 1.5rem 0 1.5rem;
} }
.content__button {
width: 100%;
}
} }
@media screen and (max-width: 1044px) and (min-width: 960px) { @media screen and (max-width: 1044px) and (min-width: 960px) {
@ -798,6 +850,10 @@ footer {
.content__inner_box { .content__inner_box {
margin: -0.5rem 1.5rem 0 1.5rem; margin: -0.5rem 1.5rem 0 1.5rem;
} }
.content__button {
width: 100%;
}
} }
@media screen and (max-width: 959px) and (min-width: 790px) { @media screen and (max-width: 959px) and (min-width: 790px) {
@ -846,6 +902,10 @@ footer {
.content__inner_box { .content__inner_box {
margin: -0.5rem 1.5rem 0 1.5rem; margin: -0.5rem 1.5rem 0 1.5rem;
} }
.content__button {
width: 100%;
}
} }
@media screen and (max-width: 850px) and (min-width: 790px) { @media screen and (max-width: 850px) and (min-width: 790px) {
@ -880,6 +940,10 @@ footer {
.secondary_nav__navlist { .secondary_nav__navlist {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.content__button {
width: 100%;
}
} }
@media screen and (max-width: 789px) and (min-width: 596px) { @media screen and (max-width: 789px) and (min-width: 596px) {
@ -990,16 +1054,25 @@ footer {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.content__half_box { .content__half_box, .content__third_box {
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
width: auto; width: auto;
} }
.content__inner_half_box { .content__inner_half_box, .content__inner_third_box {
width: auto; width: auto;
margin: 0 1.5rem; margin: 0 1.5rem;
} }
.content__button {
width: 40%;
margin: 1.5rem 0 0 auto;
}
.content__inner_third_heading {
margin-top: 3rem;
}
/* homepage - end */ /* homepage - end */
} }
@ -1178,15 +1251,24 @@ footer {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.content__half_box { .content__half_box, .content__third_box {
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
width: auto; width: auto;
} }
.content__inner_half_box { .content__inner_half_box, .content__inner_third_box {
width: auto; width: auto;
margin: 0 1.5rem; margin: 0 1.5rem;
} }
.content__button {
width: 40%;
margin: 1.5rem 0 0 auto;
}
.content__inner_third_heading {
margin-top: 3rem;
}
/* homepage - end */ /* homepage - end */
} }

View File

@ -49,6 +49,72 @@
</section> </section>
<!-- 50/50 Layout - end --> <!-- 50/50 Layout - end -->
<hr class="body__separator" noshade="" size="1">
<!-- 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 -->
{% for blk in this.section.blocks %} {% for blk in this.section.blocks %}
<section class="content {{ loop.cycle('-odd', '-even') }}"> <section class="content {{ loop.cycle('-odd', '-even') }}">
{% if blk.title %} {% if blk.title %}