forked from ag_kommunikation/webseite
static html: homepage 1st section
To be converted to proper template.
This commit is contained in:
Stephan
parent
c68bd4c6a5
commit
925b7cdc83
|
|
@ -141,8 +141,8 @@ body {
|
|||
}
|
||||
|
||||
/*
|
||||
* Gleicht zusammen mit padding von .primary_nav__navitem die Verschiebung durch Sub-
|
||||
* menümarker aus.
|
||||
* Gleicht zusammen mit padding von .primary_nav__navitem die Verschiebung durch
|
||||
* Submenümarker aus.
|
||||
*/
|
||||
.primary_nav__navitem .primary_nav__navlink {
|
||||
display: inline-block;
|
||||
|
|
@ -485,7 +485,7 @@ h6 {
|
|||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -545,11 +545,38 @@ hr.-even {
|
|||
color: var(--wtf-mid-grey) !important;
|
||||
}
|
||||
|
||||
.content__box {
|
||||
.content__box, .content__half_box {
|
||||
margin: 0 auto;
|
||||
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 {
|
||||
hyphens: auto;
|
||||
}
|
||||
|
|
@ -574,7 +601,7 @@ hr.-even {
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -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%;
|
||||
max-width: 1200px;
|
||||
orphans: 3;
|
||||
|
|
@ -952,6 +983,23 @@ footer {
|
|||
.content__inner_box.-logo_header {
|
||||
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) {
|
||||
|
|
@ -1119,7 +1167,24 @@ footer {
|
|||
}
|
||||
/* mobile nav - Ende */
|
||||
|
||||
/* homepage - start */
|
||||
.content__inner_box.-logo_header {
|
||||
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 */
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -8,11 +8,46 @@
|
|||
{%- endif -%}
|
||||
{%- endblock -%}
|
||||
{% block body %}
|
||||
<div class="content__box">
|
||||
<div class="content__inner_box -logo_header">
|
||||
<h1>{{ this.title }}</h1>
|
||||
|
||||
<!-- 50/50 Layout - start -->
|
||||
<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 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 <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 %}
|
||||
<section class="content {{ loop.cycle('-odd', '-even') }}">
|
||||
|
|
|
|||
Loading…
Reference in New Issue