a first draft

offenesdresden · Jul 24, 2013 · 4bca930 · 4bca930
commit 4bca930
Show file tree

Hide file tree

Showing 5 changed files with 226 additions and 0 deletions.
diff --git a/ergebnishaushalt.png b/ergebnishaushalt.png
diff --git a/index.html b/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>OffenesDresden.de</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+    <h1><span class="o">Offenes</span><span class="d">Dresden</span><span class="o">.</span><span class="d">de</span></h1>
+
+    <section id="main">
+      <article>
+	<h2>Über OpenData</h2>
+	<ul>
+	  <li>Wikipedia: <a href="http://de.wikipedia.org/wiki/Open_Data">Open Data</a></li>
+	  <li><a href="https://www.govdata.de/">Govdata:</a> Das Datenportal für Deutschland</li>
+	  <li><a href="http://opendata-network.org/">Open Data Network:</a> Netzwerk zur Förderung von Open Government, Open Data, Transparenz und Partizipation</li>
+	  <li><a href="http://okfn.de/">Open Knowledge Foundation:</a> Werkzeuge für Offene Daten &amp; Digitale Gemeingüter</li>
+	</ul>
+      </article>
+
+      <article>
+	<h2>Video: Her mit den Daten!</h2>
+	<video controls width="400" height="225" preload="none"
+	       poster="http://ftp.ccc.de/regional/dresden/datenspuren/2010/ds2010_3929.jpg">
+	  <source src="http://ftp.ccc.de/regional/dresden/datenspuren/2010/ds2010_3929.mp4"
+		  type="video/mp4" />
+	  <source src="http://ftp.ccc.de/regional/dresden/datenspuren/2010/ds2010_3929.webm"
+		  type="video/webm" />
+	  <source src="http://ftp.ccc.de/regional/dresden/datenspuren/2010/ds2010_3929.ogv"
+		  type="video/ogg" />
+	  <source src="http://ftp.ccc.de/regional/dresden/datenspuren/2010/ds2010_3929.flv"
+		  type="video/x-flv" />
+	</video>
+	<p>
+	  Ein Vortrag von Friedrich Lindenberg und fukami auf
+	  den <a href="http://datenspuren.de/">Datenspuren</a>.
+	</p>
+	<p>
+	  Download:
+	  <a href="http://ftp.ccc.de/regional/dresden/datenspuren/2010/ds2010_3929.mp4"
+	     type="video/mp4">MP4</a>
+	  <a href="http://ftp.ccc.de/regional/dresden/datenspuren/2010/ds2010_3929.webm"
+	     type="video/webm">WebM</a>
+	  <a href="http://ftp.ccc.de/regional/dresden/datenspuren/2010/ds2010_3929.ogv"
+	     type="video/ogg">Ogg</a>
+	  <a href="http://ftp.ccc.de/regional/dresden/datenspuren/2010/ds2010_3929.flv"
+	     type="video/x-flv">FLV</a>
+	</p>
+      </article>
+
+      <article>
+	<h2>#staDDrat</h2>
+	<img src="staddrat.png">
+	<ul>
+	  <li><a href="http://staddrat.de/">#staDDrat:</a> Dresdner Stadtratsitzungen medial begleitet</li>
+	</ul>
+      </article>
+
+      <article>
+	<h2>Scraper für Ratsinfo-Dokumente</h2>
+
+	<img src="scraper.png">
+	<ul>
+	  <li><a href="https://github.com/Mic92/ratsinfo-scraper">Für Dresden in Ruby</a></li>
+	</ul>
+      </article>
+
+      <article>
+	<h2>Ergebnishaushalt</h2>
+	<img src="ergebnishaushalt.png">
+	<p>
+	  Visualisierung des Ergebnishaushalt Dresden im Vergleich 2013/2014.
+	</p>
+	<ul>
+	  <li><a href="http://astro.github.io/dresden-haushalt/">Zur Visualisierung</a></li>
+	</ul>
+      </article>
+
+    </section>
+
+    <footer>
+      <p>
+	OffenesDresden.de soll Übersicht über OpenData-Projekte in &amp;
+	um Dresden bieten.
+	<a href="mailto:[email protected]?subject=OffenesDresden.de">Fehlt
+	was?</a> Dies ist kein offizielles Projekt einer hoheitlichen
+	Institution. <a href="mailto:[email protected]">Fragen?</a>
+      </p>
+    </footer>
+  </body>
+</html>
diff --git a/scraper.png b/scraper.png
diff --git a/staddrat.png b/staddrat.png
diff --git a/style.css b/style.css
@@ -0,0 +1,134 @@
+body {
+    margin: 0 2em;
+    padding: 0;
+    background-color: white;
+    color: #333;
+    font-family: sans-serif;
+}
+
+h1 {
+    text-align: center;
+    margin: 1em 0;
+    font-size: 600%;
+    font-family: serif;
+    font-weight: 500;
+}
+h1 .o {
+    color: #cfcf00;
+    -webkit-animation: fadeblack 16s infinite linear;
+    -moz-animation: fadeblack 16s infinite linear;
+    -ms-animation: fadeblack 16s infinite linear;
+    -o-animation: fadeblack 16s infinite linear;
+}
+h1 .d {
+    color: black;
+    -webkit-animation: fadeyellow 16s infinite linear;
+    -moz-animation: fadeyellow 16s infinite linear;
+    -ms-animation: fadeyellow 16s infinite linear;
+    -o-animation: fadeyellow 16s infinite linear;
+}
+@-webkit-keyframes fadeblack {
+    0% { color: #cfcf00; } 50% { color: black; } 100% { color: #cfcf00; }
+}
+@-moz-keyframes fadeblack {
+    0% { color: #cfcf00; } 50% { color: black; } 100% { color: #cfcf00; }
+}
+@-ms-keyframes fadeblack {
+    0% { color: #cfcf00; } 50% { color: black; } 100% { color: #cfcf00; }
+}
+@-o-keyframes fadeblack {
+    0% { color: #cfcf00; } 50% { color: black; } 100% { color: #cfcf00; }
+}
+@keyframes fadeblack {
+    0% { color: #cfcf00; } 50% { color: black; } 100% { color: #cfcf00; }
+}
+@-webkit-keyframes fadeyellow {
+    0% { color: black; } 50% { color: #cfcf00; } 100% { color: black; }
+}
+@-moz-keyframes fadeyellow {
+    0% { color: black; } 50% { color: #cfcf00; } 100% { color: black; }
+}
+@-ms-keyframes fadeyellow {
+    0% { color: black; } 50% { color: #cfcf00; } 100% { color: black; }
+}
+@-o-keyframes fadeyellow {
+    0% { color: black; } 50% { color: #cfcf00; } 100% { color: black; }
+}
+@keyframes fadeyellow {
+    0% { color: black; } 50% { color: #cfcf00; } 100% { color: black; }
+}
+
+#main {
+    text-align: center;
+    margin: 0 auto;
+}
+article {
+    vertical-align: top;
+    text-align: left;
+    width: 400px;
+    min-height: 300px;
+    display: inline-block;
+    margin: 1em 2em;
+    padding: 0.5em 0;
+    box-shadow: none;
+    transition-property: box-shadow;
+    transition-duration: 1s;
+    transition-timing-function: ease;
+}
+article:hover {
+    box-shadow: 0 -0.05em 0.7em rgba(0, 0, 0, 0.3);
+    transition-property: box-shadow;
+    border-radius: 3px;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+}
+article h2 {
+    text-align: center;
+    font-weight: bold;
+    font-size: 100%;
+    border-bottom: solid 1px #cfcf00;
+    margin: 1em 0;
+    padding: 0;
+}
+article img {
+    max-width: 400px;
+    text-align: center;
+    border: none;
+    padding: 0;
+    margin: 4px 0;
+}
+article p, article ul {
+    font-size: 90%;
+}
+article ul {
+    margin: 0.5em 0;
+    padding-left: 1.4em;
+}
+article ul li {
+    margin: 0.5em 0;
+}
+
+footer {
+    font-size: 75%;
+    color: #ccc;
+    margin: 4em auto 0;
+    text-align: center;
+    max-width: 50em;
+    transition-property: color;
+    transition-duration: 0.3s;
+}
+footer a {
+    color: #bbe;
+    transition-property: color;
+    transition-duration: 0.3s;
+}
+footer:hover {
+    color: #333;
+    transition-property: color;
+    transition-duration: 1s;
+}
+footer:hover a {
+    color: blue;
+    transition-property: color;
+    transition-duration: 1s;
+}