forked from ag_kommunikation/webseite
static html: homepage 1st section
To be converted to proper template.
This commit is contained in:
parent
c68bd4c6a5
commit
925b7cdc83
@ -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
BIN
content/nasa-space-shuttle.jpg
(Stored with Git LFS)
Normal file
Binary file not shown.
@ -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 <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') }}">
|
||||||
|
Loading…
Reference in New Issue
Block a user