Converted topbar to CSS-menu / general CSS-Refactoring

ahkscript · Aug 25, 2015 · f7bafe3 · f7bafe3
1 parent 8b5e1d9
commit f7bafe3
Show file tree

Hide file tree

Showing 2 changed files with 142 additions and 53 deletions.
diff --git a/AAH2html.ahk b/AAH2html.ahk
@@ -2,22 +2,27 @@ PageTemplate =
 (
 <html>
 	<head>
+		<meta charset="ISO-8859-1">
 		<title>ScriptList - {{SECTION}}</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="awesome-AutoHotkey List">
 		<link rel="stylesheet" type="text/css" href="main.css">
 	</head>
 	<body>
 		<div class="wrapper">
-			<div class="header">
-				<a href="index.html">ScriptList</a>
-				<h1>{{SECTION}}</h1>
-			</div>
-			<div class="content">
-				<ul>{{ENTRIES}}
+			<nav id="nav-bar">
+				<ul id="navigation">
+					<li><a href="index.html">ScriptList</a></li>
+					<li><a href="#top">{{SECTION}}</a></li>
+				</ul>
+			</nav>
+			<div id="content">
+				<br/><br/><br/><br/>
+				<ul id="content">
+					{{ENTRIES}}
 				</ul>
 			</div>
-			<div class="footer">
-
+			<div id="footer">
 			</div>
 		</div>
 	</body>
@@ -27,8 +32,8 @@ PageTemplate =
 EntryTemplate =
 (
 					<li>
-						<a class="url" href="{{URL}}">{{NAME}}</a>
-						<span class="description">{{DESCRIPTION}}</span>
+						<a id="url" href="{{URL}}">{{NAME}}</a>
+						<span id="description">{{DESCRIPTION}}</span>
 					</li>
 )
 EntryTemplate := "`t`t`t`t`t" EntryTemplate ; Workaround for weird continuation section issue

diff --git a/main.css b/main.css
@@ -1,51 +1,30 @@
-@import url('reset.css');
-
-a:visited
-{
-	color: blue;
+/* css reset - makes the layout looking good in all browsers */
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	vertical-align: baseline; 
 }
 
-body
-{
-	background: #f0f0f0;
-	margin:0;
-	padding:0;
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+	display: block; 
 }
+body {
+	line-height: 1.2em; 
+	background: #f0f0f0;
+	}
+
+ol, ul {
+	list-style: none; }
 
-.wrapper
-{
+#content {
+	font-family: verdana, sans-serif;  
 	font-size: 14pt;
-	font-family: verdana, sans-serif;
-	line-height: initial;
-}
-
-.header
-{
-	background-color: #68758F;
-	padding: 1em;
-}
-
-.header a
-{
-	float: left;
-	color: white;
-	font-size: 1.5em;
-	margin-right: 1em;
-}
-
-.header h1
-{
-	color: white;
-	font-size: 1.5em;
-}
-
-.content
-{
 	padding: 0 1em;
+	line-height: 150%;
 }
 
-.content>a, li
-{
+ul#content li{
 	background: #fff;
 	display: block;
 	border-radius: 0.25em;
@@ -56,10 +35,115 @@ body
 	box-shadow: 2px 2px 4px 1px Gray;
 }
 
-.url
-{
+
+#url {
 	display: block;
+	font-size: 1em;	
 	width: 100%;
 	text-align: center;
-	margin: 0 auto;
+}
+
+/* Main Styles */	
+#wrapper{
+	margin:0 auto;
+}
+
+#nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 70px;
+  background-color: #68758F;
+  margin:0 auto;
+  display:block;
+  font-size: 18pt;
+  font-family: verdana, sans-serif;
+
+}
+
+ul#navigation {
+	margin:0px auto;
+	float:left;
+}
+
+ul#navigation li {
+	display:inline;
+	font-size: 18pt;
+
+	background-color: #68758F;
+	margin:0;
+	padding:0;
+	float:left;
+}
+
+ul#navigation li a {
+	padding:1em;
+	color: white;
+	text-decoration:none;
+	display:inline-block;
+	background-color: #68758F;
+}
+
+ul#navigation li a:hover {
+	color: black;
+}
+
+ul#navigation li:hover > a {
+}
+
+/* Drop-Down Navigation */
+ul#navigation li:hover > ul
+{
+	visibility:visible;
+	opacity:1;
+}
+
+ul#navigation ul, ul#navigation ul li ul {
+	list-style: none;
+    margin: 0;
+    padding: 0;    
+	visibility:hidden;
+    position: absolute;
+    z-index: 99999;
+	width:180px;
+	background:#68758F;
+}
+
+ul#navigation ul {
+    top: 43px;
+    left: 1px;
+}
+
+ul#navigation ul li ul {
+    top: 0;
+    left: 181px;
+}
+
+ul#navigation ul li {
+	clear:both;
+	width:100%;
+	border:0 none;
+	border-bottom:1px solid #c9c9c9;
+}
+
+ul#navigation ul li a {
+	background:none;
+	padding:7px 15px;
+	color:#616161;
+	text-decoration:none;
+	display:inline-block;
+	border:0 none;
+	float:left;
+	clear:both;
+	width:150px;
+}
+
+ul#navigation li a.first {
+	border-left: 0 none;
+}
+
+ul#navigation li a.last {
+	border-right: 0 none;
 }