setup some better design, using html5 elements

benjaminplee · Mar 17, 2012 · b9c7ddd · b9c7ddd
1 parent 4327b01
commit b9c7ddd
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 21 deletions.
diff --git a/web/css/main.css b/web/css/main.css
@@ -1,16 +1,55 @@
+/* RESET */
+
+html, body {
+  margin: 0;
+}
+
+h1 {
+  -webkit-margin-before: 0;
+}
+
+/* REAL STUFF */
+
 body {
-	color: #888;
+  color: #143352;
+	background: #D9EEF2;
 	font-family: 'Ubuntu', arial, serif;
-	text-align: center;
 }
 
-h1, h3 {
-	text-shadow: 2px 2px 2px #CCC;
-	color: #555;
+header {
+  height: 3em;
+}
+
+.dark {
+  color: white;
+  background: #143352;
 }
 
-h3 {
-	font-style: italic;
+.dark a {
+	color: red;
 }
 
-.draggable { width: 150px; height: 150px; margin: 10px 10px; padding: 5px 5px; }
+.dark a:link, .dark a:visited {
+	text-decoration: none;
+}
+
+.dark a:hover, .dark a:active {
+	text-decoration: underline;
+}
+
+.draggable { position: absolute; width: 150px; height: 150px; margin: 10px 10px; padding: 5px 5px; }
+
+footer {
+  text-align: center;
+  position: absolute;
+  bottom: 0px;
+  height: 4em;
+  font-size: 0.75em;
+  width: 100%;
+  padding: 0.5em 0;
+}
+
+.license {
+  border-width: 0;
+  float: right;
+}
diff --git a/web/index.html b/web/index.html
@@ -11,26 +11,27 @@
 		<script src="js/main.js" charset="utf-8"></script>
 	</head>
 	<body>
-		<h1>Bacobahnen</h1>
-		<h3><u>The</u> Digital Whiteboard</h3>
+    <header class="dark">
+      <h1>Bacobahnen</h1>
+    </header>
 
     <div class="draggable ui-widget-content">a card</div>
     <div class="draggable ui-widget-content">another card</div>
 
-    <p>
-      <a rel="license" href="http://creativecommons.org/licenses/by/3.0/"> <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a>
-      <br />
-      Bacobahnen by 
+    <aside>
+      <a href="https://github.com/benjaminplee/Bacobahnen"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" /></a> 
+    </aside>
+
+    <footer class="dark">
+      <a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" class="license" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a>
+      <br/>
+      Bacobahnen is a creation of
       <a href="https://github.com/benjaminplee/Bacobahnen">Benjamin Lee &amp; Matt Erker</a>
-      is licensed under a 
-      <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>
-      .
       <br />
-      Based on a work at 
-      <a href="https://github.com/benjaminplee/Bacobahnen">github.com</a>
+      and is licensed under a
+      <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>
       .
-    </p>
-		<a href="https://github.com/benjaminplee/Bacobahnen"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a> 
+    </footer>
 	</body>
 </html>