* weitere Spielereien mit dem Layout

cd-template/doku/cryptocd.css

@@ -15,12 +15,32 @@ h1, h2, h3, h4 {
   color: #7fb945;
 }
 
+a {
+  text-decoration: none;
+  color: #f57900;
+  background: none;
+}
+
+a:visited {
+  color: #ce5c00;
+}
+
+a:active {
+  color: Orange;
+}
+
+a:hover { 
+  color: #fcaf3e;
+  text-decoration: underline;
+}
+
+/*
 a:link, a:visited {
   color: #7fb945;
 }
 a:hover {
   color: #3f8915;
-}
+}*/
 
 hr {
   height: 1px;
@@ -45,7 +65,7 @@ hr {
 }
 
 #titlebar {
-  background: #336699;
+  background-color: #33436a;
   color: white;
   font-size: 44px;
   text-shadow: 2px 2px 3px gray;
@@ -53,6 +73,7 @@ hr {
   padding-top: 1px;
   padding-left: 16px;
   padding-right: 16px;
+  border-bottom: 6px solid #f57900;
 }
 
 #titlebar .right {
@@ -64,12 +85,18 @@ hr {
 /*  #### Menue  #### */
 #nav {
   float: left;
-  width: 20%;
-  padding: 0;
-  border: 1px solid silver;
-  margin-top: 40px;
-  color: rgb(80,80,80);   
   background-color: transparent;
+  text-align: left;
+  /*position: absolute;
+  top: 130px;
+  right: 10px;*/
+  width: 180px;
+  margin: 0 0 0.5em 2em;
+  padding: 0.75em;
+  font-size: 90%;
+  border:1px solid #ccc;
+  background-color: #f6f6f6;
+  line-height: normal;
 }
 
 #nav a {
@@ -94,6 +121,10 @@ hr {
 
 /* Hauptteil einer Seite */
 
+#toctitle {
+  color: #888;
+}
+
 #main {
   margin-left: 25%;
   padding: 0 1em;
@@ -133,6 +164,22 @@ hr {
   padding-right: 15px;
 }
 
+
+/* #selection - Formatiert die Buttons der Startseite */
+#selection a {
+  text-decoration: none;
+  font-size: 110%;
+}
+
+#selection td {
+  vertical-align: middle;
+  padding: 0.6em 0.6em 0.9em 0;
+}
+
+#selection img {
+  margin: 0;
+}
+
 /* Zitate */
 blockquote {
   font-style:italic;
@@ -161,8 +208,8 @@ caption {
 
 #footer {
   clear: left;
-  border-top: 1px solid #B7B7B7;
+  border-top: 3px solid #B7B7B7;
-  background: rgb(233,238,249);
+  background-color: #33436a;
   margin-top: 30px;
   padding: 15px 15px 0 15px;
   color: #777777;

documents/index/index.lyx

@@ -56,6 +56,17 @@ begin{rawhtml}
 
 \begin_layout Standard
 
+  <div id="titlebar">
+\end_layout
+
+\begin_layout Standard
+
+    <div class="right">Die CryptoCD</div>
+\end_layout
+
+\begin_layout Standard
+
+  </div>
 \end_layout
 
 \begin_layout Standard
@@ -71,7 +82,7 @@ end{rawhtml}
 \end_layout
 
 \begin_layout Standard
-\begin_inset Include \input{menue.inc}
+\begin_inset Include \input{/home/phil/daten/sao/svn/cryptocd/trunk/documents/menue/menue.inc}
 preview false
 
 \end_inset
@@ -124,27 +135,139 @@ end{rawhtml}
 
 \end_layout
 
-\begin_layout Title
+\begin_layout Standard
-Die CryptoCD
+\begin_inset ERT
+status collapsed
+
+\begin_layout Standard
+
+
+\backslash
+begin{rawhtml}
 \end_layout
 
 \begin_layout Standard
-Die CryptoCD ist ein Projekt mit einem klaren Ziel: Verschlüsselung für
+
- die Massen.
+<table id="selection">
 \end_layout
 
 \begin_layout Standard
-Die folgenden Beschreibungen werden dich in die Lage versetzen, durch Verschlüss
+
-elung deine Privatsphäre zu schützen.
+  <tr>
- Auf der linken Seite siehst du ein Navigationsmenü, welches dich durch
- die Materie begleitet.
- Fang' einfach oben an und klick dich nach unten durch.
 \end_layout
 
 \begin_layout Standard
-Bist du die wichtigsten Texte durchgegangen, dann brauchst du nur noch deine
+
- GesprächspartnerInnen dazu animieren, es dir gleich zu tun, und schon kann
+    <td><a href="einfuehrung.html"><img src="einfuehrung.png" alt="Einf&uuml;hrung
- es losgehen.
+" /></a></td>
+\end_layout
+
+\begin_layout Standard
+
+    <td><a href="einfuehrung.html">Einf&uuml;hrung</a><br/>
+\end_layout
+
+\begin_layout Standard
+
+           Die Einf&uuml;hrung erl&auml;utert, warum Verschl&uuml;sselung
+ wichtig ist und wie sie funktioniert.</td>
+\end_layout
+
+\begin_layout Standard
+
+  </tr>
+\end_layout
+
+\begin_layout Standard
+
+  <tr>
+\end_layout
+
+\begin_layout Standard
+
+    <td><a href="e-mail.html"><img src="email.png" alt="E-Mail" /></a></td>
+\end_layout
+
+\begin_layout Standard
+
+    <td><a href="e-mail.html">E-Mail</a><br/>
+\end_layout
+
+\begin_layout Standard
+
+          E-Mails verschl&uuml;sselt verschicken und empfangen.</td>
+\end_layout
+
+\begin_layout Standard
+
+  </tr>
+\end_layout
+
+\begin_layout Standard
+
+  <tr>
+\end_layout
+
+\begin_layout Standard
+
+    <td><a href="chat.html"><img src="chat.png" alt="Chat" /></a></td>
+\end_layout
+
+\begin_layout Standard
+
+    <td><a href="chat.html">Chat</a><br/>
+\end_layout
+
+\begin_layout Standard
+
+          Chat-Nachrichten verschl&uuml;sseln.</td>
+\end_layout
+
+\begin_layout Standard
+
+  </tr>
+\end_layout
+
+\begin_layout Standard
+
+</table>
+\end_layout
+
+\begin_layout Standard
+
+
+\backslash
+end{rawhtml}
+\end_layout
+
+\end_inset
+
+
+\end_layout
+
+\begin_layout Standard
+Diese CD enthält eine Zusammenstellung von einfach formulierten Anleitungen
+ und Programmen, die dir das Verschlüsseln deiner Kommunikation ermöglichen.
+ Die CryptoCD ist 
+\begin_inset ERT
+status collapsed
+
+\begin_layout Standard
+
+
+\backslash
+htmladdnormallink{Freie Software}{about.html#lizenz}
+\end_layout
+
+\end_inset
+
+.
+ Du kannst sie also an deine Gesprächspartner und -partnerinnen weitergeben
+ und sie dazu animieren ihre Kommunikation ebenfalls zu verschlüsseln.
+\end_layout
+
+\begin_layout Standard
+Zum Starten klicke einfach eines der Themen oben oder im Menü an.
 \end_layout
 
 \begin_layout Standard

documents/menue.inc

@@ -1,10 +1,11 @@
 \begin{rawhtml}
 <div id="nav">
+  <div id="toctitle"><h2>Navigation</h2></div
   <ul>
-  <li><a href="" title="">Einf&uuml;hrung ins Thema</li>
+    <li><a href="einfuehrung.html" title="Thematischer Einstieg">Einf&uuml;hrung ins Thema</li>
-  <li><a href="" title="">E-Mail verschl&uuml;sseln</a></li>	
+    <li><a href="e-mail.html" title="E-Mail Verschl&uuml;sselung">E-Mails verschl&uuml;sseln</a></li>	
-  <li><a href="" title="">Chat-Nachrichten versch&uuml;sseln</a></li>
+    <li><a href="chat.html" title="Chat Verschl&uuml;sselung">Chats versch&uuml;sseln</a></li>
-  <li><a href="" title="">&Uuml;ber die CD</a></li>
+    <li><a href="about.html" title="Informationen zur CD">&Uuml;ber die CD</a></li>
   </ul>
 </div>
 \end{rawhtml}

documents/menue/menue.inc

@@ -0,0 +1,10 @@
+\begin{rawhtml}
+<div id="nav">
+<ul>
+  <li><a href="" title="">Einf&uuml;hrung ins Thema</li>
+  <li><a href="" title="">E-Mail verschl&uuml;sseln</a></li>	
+  <li><a href="" title="">Chat-Nachrichten versch&uuml;sseln</a></li>
+  <li><a href="" title="">&Uuml;ber die CD</a></li>
+</ul>
+</div>
+\end{rawhtml}