static html: homepage 1st section

To be converted to proper template.
This commit is contained in:
Stephan 2021-03-06 14:47:01 +01:00
parent c68bd4c6a5
commit 925b7cdc83
3 changed files with 113 additions and 10 deletions

View File

@ -141,8 +141,8 @@ body {
} }
/* /*
* Gleicht zusammen mit padding von .primary_nav__navitem die Verschiebung durch Sub- * Gleicht zusammen mit padding von .primary_nav__navitem die Verschiebung durch
* menümarker aus. * Submenümarker aus.
*/ */
.primary_nav__navitem .primary_nav__navlink { .primary_nav__navitem .primary_nav__navlink {
display: inline-block; display: inline-block;
@ -485,7 +485,7 @@ h6 {
} }
p { p {
margin-bottom: 0.5rem; margin-bottom: 1rem;
} }
ul { ul {
@ -545,11 +545,38 @@ hr.-even {
color: var(--wtf-mid-grey) !important; color: var(--wtf-mid-grey) !important;
} }
.content__box { .content__box, .content__half_box {
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
} }
.content__half_box {
display: flex;
flex-direction: row;
}
.content__inner_half_box {
width: 50%;
}
.content__teaser {
color: var(--wtf-orange);
font-size: 1.15rem;
}
.content__footer {
text-align: right;
}
.content__inline_image {
height: 1.25rem;
vertical-align: middle;
}
.content__half_box_image {
width: 100%;
}
.content__box p, .content__box li { .content__box p, .content__box li {
hyphens: auto; hyphens: auto;
} }
@ -574,7 +601,7 @@ hr.-even {
margin: 3.5rem 1.5rem 0 1.5rem; margin: 3.5rem 1.5rem 0 1.5rem;
} }
.content__inner_box { .content__inner_box, .content__inner_half_box {
margin: -0.5rem 1.5rem 0 1.5rem; margin: -0.5rem 1.5rem 0 1.5rem;
} }
@ -591,7 +618,11 @@ hr.-even {
} }
.nav__wrapper, .header__wrapper, .content__box, .footer__wrapper { .nav__wrapper,
.header__wrapper,
.content__box,
.content__half_box,
.footer__wrapper {
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
orphans: 3; orphans: 3;
@ -952,6 +983,23 @@ footer {
.content__inner_box.-logo_header { .content__inner_box.-logo_header {
margin: -0.5rem 1.5rem 0 1.5rem; margin: -0.5rem 1.5rem 0 1.5rem;
} }
/* homepage - start */
.content__box.-heading {
margin-bottom: 1rem;
}
.content__half_box {
flex-direction: column;
padding: 0;
width: auto;
}
.content__inner_half_box {
width: auto;
margin: 0 1.5rem;
}
/* homepage - end */
} }
@media screen and (max-width: 595px) { @media screen and (max-width: 595px) {
@ -1119,7 +1167,24 @@ footer {
} }
/* mobile nav - Ende */ /* mobile nav - Ende */
/* homepage - start */
.content__inner_box.-logo_header { .content__inner_box.-logo_header {
margin: -0.5rem 1.5rem 0 1.5rem; margin: -0.5rem 1.5rem 0 1.5rem;
} }
.content__box.-heading {
margin-bottom: 1rem;
}
.content__half_box {
flex-direction: column;
padding: 0;
width: auto;
}
.content__inner_half_box {
width: auto;
margin: 0 1.5rem;
}
/* homepage - end */
} }

BIN
content/nasa-space-shuttle.jpg (Stored with Git LFS) Normal file

Binary file not shown.

View File

@ -8,11 +8,46 @@
{%- endif -%} {%- endif -%}
{%- endblock -%} {%- endblock -%}
{% block body %} {% block body %}
<div class="content__box">
<div class="content__inner_box -logo_header"> <!-- 50/50 Layout - start -->
<h1>{{ this.title }}</h1> <section class="content">
<div class="content__box -heading">
<div class="content__inner_box">
<h2>3, 2, 1 - Die WTF eG hebt ab!</h2>
</div>
</div> </div>
</div> <div class="content__half_box">
<div class="content__inner_half_box">
<div class="content__teaser">
<p>Der Start ist geschafft, die WTF Kooperative eG ist gegründet und seit Anfang des Jahres ordentlich beim Registergericht Hamburg eingetragen.</p>
</div>
<div class="content__body">
<p>Die Idee der„Hackergenossenschaft“ wurde zum ersten Mal auf dem 34C3 vorgestellt. Vom Start weg haben sich über 160 Personen gefunden und dafür gearbeitet, dass die Gründung gelingt.</p>
<p>Ein Unternehmen, dass jedem einzelnen von uns gehört, in dem jeder von uns eine Stimme und das Recht auf Mitsprache hat. Das alles ist nun machbar - in unserer WTF Koopertive eG.</p>
</div>
<div class="content__footer">
<p>folge uns&emsp;<a href="https://chaos.social/@HackerGeno"><img class="content__inline_image" src="images/mastodon_logo.svg" alt="Mastodon Logo" height="16"></a></p>
</div>
</div>
{% if this.attachments.images %}
<div class="content__inner_half_box">
{% for image in this.attachments.images %}
<!--
Wir laden Bilder mit hoher Auflösung hoch. Lektor baut "Thumbnails" mit halber
Auflösung. Per srcset bieten wir beides an und der Browser sucht das Richtige
raus.
Versteht der Browser srcset nicht, greift src.
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="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
{% endfor %}
</div>
{% endif %}
</div>
</section>
<!-- 50/50 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') }}">