Skip to content

Commit f7bafe3

Browse files
hoppfroschhoppfrosch
committed
Converted topbar to CSS-menu / general CSS-Refactoring
1 parent 8b5e1d9 commit f7bafe3

File tree

2 files changed

+142
-53
lines changed

2 files changed

+142
-53
lines changed

‎AAH2html.ahk

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,27 @@ PageTemplate =
22
(
33
<html>
44
<head>
5+
<meta charset="ISO-8859-1">
56
<title>ScriptList - {{SECTION}}</title>
67
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<meta name="description" content="awesome-AutoHotkey List">
79
<link rel="stylesheet" type="text/css" href="main.css">
810
</head>
911
<body>
1012
<div class="wrapper">
11-
<div class="header">
12-
<a href="index.html">ScriptList</a>
13-
<h1>{{SECTION}}</h1>
14-
</div>
15-
<div class="content">
16-
<ul>{{ENTRIES}}
13+
<nav id="nav-bar">
14+
<ul id="navigation">
15+
<li><a href="index.html">ScriptList</a></li>
16+
<li><a href="#top">{{SECTION}}</a></li>
17+
</ul>
18+
</nav>
19+
<div id="content">
20+
<br/><br/><br/><br/>
21+
<ul id="content">
22+
{{ENTRIES}}
1723
</ul>
1824
</div>
19-
<div class="footer">
20-
25+
<div id="footer">
2126
</div>
2227
</div>
2328
</body>
@@ -27,8 +32,8 @@ PageTemplate =
2732
EntryTemplate =
2833
(
2934
<li>
30-
<a class="url" href="{{URL}}">{{NAME}}</a>
31-
<span class="description">{{DESCRIPTION}}</span>
35+
<a id="url" href="{{URL}}">{{NAME}}</a>
36+
<span id="description">{{DESCRIPTION}}</span>
3237
</li>
3338
)
3439
EntryTemplate := "`t`t`t`t`t" EntryTemplate ; Workaround for weird continuation section issue

‎main.css

Lines changed: 127 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,30 @@
1-
@import url('reset.css');
2-
3-
a:visited
4-
{
5-
color: blue;
1+
/* css reset - makes the layout looking good in all browsers */
2+
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 {
3+
margin: 0;
4+
padding: 0;
5+
border: 0;
6+
vertical-align: baseline;
67
}
78

8-
body
9-
{
10-
background: #f0f0f0;
11-
margin:0;
12-
padding:0;
9+
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
10+
display: block;
1311
}
12+
body {
13+
line-height: 1.2em;
14+
background: #f0f0f0;
15+
}
16+
17+
ol, ul {
18+
list-style: none; }
1419

15-
.wrapper
16-
{
20+
#content {
21+
font-family: verdana, sans-serif;
1722
font-size: 14pt;
18-
font-family: verdana, sans-serif;
19-
line-height: initial;
20-
}
21-
22-
.header
23-
{
24-
background-color: #68758F;
25-
padding: 1em;
26-
}
27-
28-
.header a
29-
{
30-
float: left;
31-
color: white;
32-
font-size: 1.5em;
33-
margin-right: 1em;
34-
}
35-
36-
.header h1
37-
{
38-
color: white;
39-
font-size: 1.5em;
40-
}
41-
42-
.content
43-
{
4423
padding: 0 1em;
24+
line-height: 150%;
4525
}
4626

47-
.content>a, li
48-
{
27+
ul#content li{
4928
background: #fff;
5029
display: block;
5130
border-radius: 0.25em;
@@ -56,10 +35,115 @@ body
5635
box-shadow: 2px 2px 4px 1px Gray;
5736
}
5837

59-
.url
60-
{
38+
39+
#url {
6140
display: block;
41+
font-size: 1em;
6242
width: 100%;
6343
text-align: center;
64-
margin: 0 auto;
44+
}
45+
46+
/* Main Styles */
47+
#wrapper{
48+
margin:0 auto;
49+
}
50+
51+
#nav-bar {
52+
position: fixed;
53+
top: 0;
54+
left: 0;
55+
z-index: 9999;
56+
width: 100%;
57+
height: 70px;
58+
background-color: #68758F;
59+
margin:0 auto;
60+
display:block;
61+
font-size: 18pt;
62+
font-family: verdana, sans-serif;
63+
64+
}
65+
66+
ul#navigation {
67+
margin:0px auto;
68+
float:left;
69+
}
70+
71+
ul#navigation li {
72+
display:inline;
73+
font-size: 18pt;
74+
75+
background-color: #68758F;
76+
margin:0;
77+
padding:0;
78+
float:left;
79+
}
80+
81+
ul#navigation li a {
82+
padding:1em;
83+
color: white;
84+
text-decoration:none;
85+
display:inline-block;
86+
background-color: #68758F;
87+
}
88+
89+
ul#navigation li a:hover {
90+
color: black;
91+
}
92+
93+
ul#navigation li:hover > a {
94+
}
95+
96+
/* Drop-Down Navigation */
97+
ul#navigation li:hover > ul
98+
{
99+
visibility:visible;
100+
opacity:1;
101+
}
102+
103+
ul#navigation ul, ul#navigation ul li ul {
104+
list-style: none;
105+
margin: 0;
106+
padding: 0;
107+
visibility:hidden;
108+
position: absolute;
109+
z-index: 99999;
110+
width:180px;
111+
background:#68758F;
112+
}
113+
114+
ul#navigation ul {
115+
top: 43px;
116+
left: 1px;
117+
}
118+
119+
ul#navigation ul li ul {
120+
top: 0;
121+
left: 181px;
122+
}
123+
124+
ul#navigation ul li {
125+
clear:both;
126+
width:100%;
127+
border:0 none;
128+
border-bottom:1px solid #c9c9c9;
129+
}
130+
131+
ul#navigation ul li a {
132+
background:none;
133+
padding:7px 15px;
134+
color:#616161;
135+
text-decoration:none;
136+
display:inline-block;
137+
border:0 none;
138+
float:left;
139+
clear:both;
140+
width:150px;
141+
}
142+
143+
ul#navigation li a.first {
144+
border-left: 0 none;
145+
}
146+
147+
ul#navigation li a.last {
148+
border-right: 0 none;
65149
}

0 commit comments

Comments
 (0)