From 403f2ffa55f68f4b6c4dfa6cb168227b24cb501c Mon Sep 17 00:00:00 2001
From: ulrich <not disclosed>
Date: Fri, 30 Mar 2018 12:10:39 +0000
Subject: [PATCH] Vorlage fertig und dokumentiert
---
index.html | 45 ++++++++++++++++++++++-----------------------
1 files changed, 22 insertions(+), 23 deletions(-)
diff --git a/index.html b/index.html
index 81367cd..e48311c 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,27 @@
<!DOCTYPE html>
<html>
<head>
- <title>App-Layout</title>
+ <title>App-Vorlage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" type="text/css" href="jslib/app-menu/nav-toggle.css">
+ <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="jslib/app-menu/app-menu.css">
+ <link rel="stylesheet" type="text/css" href="hamburger.css">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<!-- Kopfzeile -->
<div class="nord">
- <div id="nav-toggle"></div>
- <div>Kopfzeile</div>
+ <div id="nav-menu">
+ <div id="nav-toggle" class="hamburger hamburger--elastic">
+ <div class="hamburger-box">
+ <div class="hamburger-inner"></div>
+ </div>
+ </div>
+ </div>
+ <div class="app-titel">
+ <span id="app-titel">App-Vorlage</span>
+ </div>
</div>
<div class="inhalt">
<!-- westliche Seitenleiste -->
@@ -22,28 +31,18 @@
<!-- zentraler Inhaltsbereich -->
<div class="zentrum">
<p>
- Dies ist ein Beispiel für eine Webseite, die ein
- <code>flexbox</code>-Layout für die Anordnung ihrer Inhalte
- nutzt.
+ Hier kann beliebiger Inhalt erscheinen.
</p>
<p>
- Der Inhaltsbereich in der Mitte passt sich zur Laufzeit dynamisch
- an die Größe des Browserfensters an. Er wird von einer
- Kopfzeile, einer Fußzeile und zwei Seitenleisten umschlossen.
+ Wenn dessen Darstellung mehr
+ Platz benötigt als das Anzeigegerät bietet wird ein
+ Rollbalken eingeblendet. Beim Rollen zu anfangs nicht sichtbaren
+ Teilen des Inhalts bleiben die den Inhaltsbereich
+ umschließenden Elemente sichtbar.
</p>
<p>
- Übersteigt die Textmenge im Zentrum den vorhandenen Raum,
- kann der Inhalt per Rollbalken ohne Verrutschen der
- umschließenden Bedienelemente durchgeblättert werden.
- </p>
- <p>
- Dieses Verhalten kann über die folgende Seite ausprobiert werden: <br/>
- <a href="app-layout-gross.html">Testseite mit umfangreichem Inhalt</a>.
- </p>
- <p>
- Das Beispiel besteht aus den Seiten<br/>
- <code>app-layout.html</code> (diese Seite)<br/>
- <code><a href="app-layout.css">app-layout.css</a></code> (CSS-Gestaltungsvorlage)
+ Ein Klick auf das Hamburger-Piktogramm oben links bzw. dessen
+ Antippen blendet ein Menü ein.
</p>
</div>
<!-- oestliche Seitenleiste -->
@@ -55,7 +54,7 @@
<div class="sued">
Fußzeile
</div>
-
+ <!-- Skripte -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="jslib/app-menu/app-menu.js"></script>
--
Gitblit v1.9.3