Commit c490a692 authored by Dennis Appel's avatar Dennis Appel

CSS Tweaks, Add Welcome Text

parent 5b3cec15
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -13,6 +13,7 @@
.wiki-navigation {
border-right: 1px solid #efefef;
padding: 15px;
}
.wiki-navigation-link {
......@@ -38,7 +39,10 @@ html, body {
.main {
min-height:100%;
position: relative;
padding-bottom: 4rem;
}
.wiki-main {
padding-bottom: 0;
}
.banner {
......@@ -64,3 +68,11 @@ html, body {
padding-bottom: 10px;
float: left;
}
.content {
margin-bottom: 6rem;
}
.padding-bottom {
padding-bottom: 4rem;
}
......@@ -183,9 +183,9 @@ $list-nested-side-margin: 1.25rem;
$defnlist-margin-bottom: 1rem;
$defnlist-term-weight: $global-weight-bold;
$defnlist-term-margin-bottom: 0.3rem;
$blockquote-color: $dark-gray;
$blockquote-color: $primary-color;
$blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid $medium-gray;
$blockquote-border: 1px solid $dark-gray;
$cite-font-size: rem-calc(13);
$cite-color: $dark-gray;
$cite-pseudo-content: '\2014 \0020';
......
......@@ -13,36 +13,72 @@
</div>
</section>
<section>
<div class="grid-container vertical-space">
<div class="grid-x grid-margin-x">
<div class="grid-container vertical-space padding-bottom">
<div class="grid-x grid-padding-x">
<div class="cell cell-background-lg">
<h2>Worum geht es?</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<section>
<h2>Worum geht es?</h2>
<p>
Niemandem soll das Teilhaben am allt&auml;glichen Leben durch
Barrieren verwehrt werden. Wie im Grundgesetz steht
(Artikel 3, Absatz 3) „Niemand darf wegen seiner Behinderung
benachteiligt werden.“
</p>
<p>
Barrierefreiheit hat f&uuml;r alle einen Nutzen, nicht nur f&uuml;r
Menschen mit Behinderung, sondern auch Senioren oder Menschen,
die nur vor&uuml;bergehend eine Einschr&auml;nkung haben. Zum Beispiel
hilft ein Aufzug Eltern mit Kinderwagen, jemandem mit
gebrochenem Bein oder einem &auml;lteren Menschen, der nicht mehr
gut zu Fu&szlig; unterwegs ist. Alter und Behinderungen gehen oft
einher: ca. ein Viertel der Menschen mit Schwerbehinderung ist
75 Jahre und &auml;lter, die H&auml;lfte ist zwischen 55 und 75 Jahren
alt. Die durchschnittliche Lebenserwartung steigt – ein Grund
mehr, sich f&uuml;r ein Leben ohne Barrieren einzusetzen!
</p>
</section>
</div>
<div class="cell cell-background-lg vertical-space">
<h2>Was ist Barrierefreiheit?</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<button class="hollow button" href="/about/">Mehr erfahren</button>
<section>
<h2>Was ist Barrierefreiheit?</h2>
<p>
Wenn man auf das Wort Barrierefreiheit st&ouml;&szlig;t, denkt man zuerst
an Aufz&uuml;ge statt Treppen, breite T&uuml;ren und sonstige bauliche
Ver&auml;nderungen im Alltag. Das stimmt auch. Barrierefreiheit
bedeutet, dass Geb&auml;ude, &ouml;ffentliche Pl&auml;tze, Verkehrsmittel und
vieles mehr, so gestaltet werden, dass sie f&uuml;r alle zug&auml;nglich
sind, ohne, dass man auf Hilfe von einer anderen Person
angewiesen ist.
</p>
<a href="/about/#barrierefreiheit"><button class="hollow button">Mehr erfahren</button></a>
</section>
</div>
</div>
<div class="grid-x grid-margin-x vertical-space">
<div class="cell large-6 cell-background-lg">
<h3>Was ist eine barrierefreie App?</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<button class="hollow button" href="/about/">Mehr erfahren</button>
<section>
<h3>Was ist eine barrierefreie App?</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<a href="/about/#app"><button class="hollow button">Mehr erfahren</button></a>
</section>
</div>
<div class="cell large-6 cell-background-lg">
<h3>Wie mache ich eine barrierefreie App?</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<button class="hollow button" href="/wiki/">Mehr erfahren</button>
<section>
<h3>Wie mache ich eine barrierefreie App?</h3>
<p>
Wir bieten diverse Resourcen und Guidelines zum Erstellen
einer barrierefreien App.<br>
Das Wiki beschreibt allgemeine und App spezifische Guidelines
f&uuml;r Entwickler und erl&auml;tert diese anhand von ausgew&auml;ten Beispielen.
<br>
Die interaktive Checkliste soll Entwicklern dabei helfen, w&auml;hrend der Entwicklung
die von uns empfohlenen Richtlinien effektiv umzusetzen.
</p>
<a href="/checklist/"><button class="hollow button">Zur Checkliste</button></a>
<a href="/wiki/"><button class="hollow button">Zum Wiki</button></a>
</section>
</div>
</div>
</div>
......@@ -50,3 +86,4 @@
</section>
{% endblock %}
......@@ -13,11 +13,11 @@
{% if wiki_list %}
<div class="grid-x grid-margin-x">
<div class="grid-x">
<div class="cell large-2 cell-background-wiki-mg wiki-navigation">
<div name="wiki-navigation" id="wiki-navigation" class="text-center">
<h4>Inhaltsverzeichnis</h4>
<h4>Inhalt</h4>
</div>
<ul class="vertical menu">
{% for entry in wiki_list %}
......@@ -28,7 +28,7 @@
</ul>
</div>
<div class="cell large-6 large-offset-1">
<div class="cell large-6 large-offset-1 content">
{% for entry in wiki_list %}
<section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment