Commit c490a692 authored by Dennis Appel's avatar Dennis Appel
Browse files

CSS Tweaks, Add Welcome Text

parent 5b3cec15
......@@ -6,64 +6,71 @@
{% endwith %}
{% endblock %}
{% block content %}
<section>
<div class="grid-container">
<div class="grid-x">
<div class="cell cell-background-lg vertical-space">
<h1>Was ist Barrierefreiheit?</h1>
</div>
<div class="grid-container padding-bottom">
<div class="grid-x">
<div name="barrierefreiheit" id="barrierefreiheit" class="cell cell-background-lg vertical-space">
<section>
<div class="cell cell-background-lg">
<h2>Lorep ipsum dolor</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>
<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>
<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>
</div>
<h1>Was ist Barrierefreiheit?</h1>
<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 a
Hilfe von einer anderen Person angewiesen ist.<br>
Hinter Barrierefreiheit steckt aber noch viel mehr. Texte sollten
beispielsweise in einer einfach verst&auml;ndlichen Sprache
formuliert sein und vielleicht noch mit Bildern untermauert werden,
damit Menschen mit Lernschwierigkeiten diese auch verstehen k&ouml;nnen.
Geh&ouml;rlose Menschen sollten Vortr&auml;ge verfolgen k&ouml;nnen,
zum Beispiel mit Hilfe eines Geb&auml;rdendolmetschers oder
Untertiteln, falls es sich um ein Video handelt. Barrierefreiheit
ber&uuml;cksichtigt also menschliche F&auml;higkeiten in allen
Auspr&auml;gungen.
</p>
<p>
Am 1. Mai 2002 trat das Gesetz zur Gleichstellung von Menschen
mit Behinderungen (BGG) in Kraft.<br>
Barrierefreiheit wird in &sect; 4 BGG wie folgt definiert:
<blockquote>
„Barrierefrei sind bauliche und sonstige Anlagen,
Verkehrsmittel, technische Gebrauchsgegenst&auml;nde,
Systeme der Informationsverarbeitung, akustische und visuelle
Informationsquellen und Kommunikationseinrichtungen sowie andere
gestaltete Lebensbereiche, wenn sie f&uuml;r Menschen mit
Behinderungen in der allgemein &uuml;blichen Weise, ohne
besondere Erschwernis und grunds&auml;tzlich ohne fremde
Hilfe auffindbar, zug&auml;nglich und nutzbar sind. Hierbei
ist die Nutzung behinderungsbedingt notwendiger Hilfsmittel
zul&auml;ssig.“
</blockquote>
Aber dann gibt es nat&uuml;rlich noch die digitale Barrierefreiheit.
Das bedeutet, Internetseiten und Apps m&uuml;ssen so gestaltet
sein, dass jeder sie nutzen kann. Und wie das funktioniert und
was alles dazu geh&ouml;rt, wollen wir in diesem Infoportal
erkl&auml;ren.
</p>
</section>
</div>
<div name="app" id="app" class="cell cell-background-lg vertical-space">
<section>
<div class="cell cell-background-lg vertical-space">
<h2>Lorep ipsum dolor</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>
</div>
</section>
<div class="cell cell-background-lg vertical-space">
<h1>Wozu Barrierefreiheit?</h1>
</div>
<div class="cell cell-background-lg">
<h2>Lorep ipsum dolor</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>
</div>
<div class="cell cell-background-lg vertical-space">
<h2>Lorep ipsum dolor</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>
</div>
<div class="cell cell-background-lg vertical-space">
<h2>Lorep ipsum dolor</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>
</div>
<div class="cell cell-background-lg vertical-space">
<h2>Lorep ipsum dolor</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>
</div>
</section>
</div>
</div>
</section>
</div>
{% endblock %}
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