Skip to content

Commit 831e342

Browse files
hhirschhhirsch
committed
Use external style sheet
1 parent 950a394 commit 831e342

File tree

2 files changed

+115
-116
lines changed

2 files changed

+115
-116
lines changed

‎index.html‎

Lines changed: 1 addition & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -6,122 +6,7 @@
66
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
77
<meta charset="utf-8"/>
88
<title>Age of Empires II Tech Tree</title>
9-
<style>
10-
html,
11-
body {
12-
width: 100%;
13-
height: 100%;
14-
box-sizing: border-box;
15-
}
16-
17-
body {
18-
margin: 0;
19-
display: flex;
20-
justify-content: center;
21-
align-items: center;
22-
}
23-
24-
#info,
25-
#info a {
26-
display: inline;
27-
font-family: monospace;
28-
color: gray;
29-
}
30-
31-
#container {
32-
min-width: 100%;
33-
display: flex;
34-
flex-direction: column;
35-
}
36-
37-
#navigation {
38-
padding-left: 1rem;
39-
}
40-
41-
#helptext {
42-
position: absolute;
43-
display: none;
44-
max-width: 300px;
45-
background-color: #eee;
46-
border: 2px solid #bbb;
47-
padding: 0.2rem;
48-
font-size: 10pt;
49-
}
50-
51-
#wrapper {
52-
min-width: 100%;
53-
display: flex;
54-
flex-direction: row;
55-
flex-wrap: nowrap;
56-
overflow-x: auto;
57-
-webkit-overflow-scrolling: touch;
58-
-ms-overflow-style: -ms-autohiding-scrollbar;
59-
}
60-
61-
#techtree {
62-
border: 5px solid #4d3617;
63-
background-color: #e7c28e;
64-
flex: 0 0 auto;
65-
position: relative;
66-
}
67-
68-
#metainfo {
69-
border: 5px solid #4d3617;
70-
width: 20rem;
71-
flex: 0 0 auto;
72-
display: flex;
73-
flex-direction: column;
74-
background-color: #e7c28e;
75-
padding: 1rem;
76-
}
77-
78-
#civinfo {
79-
flex: 1 0 auto;
80-
font-size: 11pt;
81-
}
82-
83-
#thanks {
84-
flex: 0 0 auto;
85-
}
86-
87-
#civname {
88-
text-align: center;
89-
}
90-
91-
hr {
92-
overflow: visible;
93-
/* For IE */
94-
height: 30px;
95-
border-style: solid;
96-
border-color: black;
97-
border-width: 1px 0 0 0;
98-
border-radius: 20px;
99-
}
100-
101-
hr:before {
102-
/* Not really supposed to work, but does */
103-
display: block;
104-
content: "";
105-
height: 30px;
106-
margin-top: -31px;
107-
border-style: solid;
108-
border-color: black;
109-
border-width: 0 0 1px 0;
110-
border-radius: 20px;
111-
}
112-
113-
#navigation {
114-
margin-top: 0.5rem;
115-
margin-bottom: 0.5rem;
116-
}
117-
118-
#thanks,
119-
#thanks a {
120-
font-size: 6pt;
121-
font-family: monospace;
122-
color: gray;
123-
}
124-
</style>
9+
<link rel="stylesheet" href="style.css">
12510
</head>
12611

12712
<body>

‎style.css‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
html,
2+
body {
3+
width: 100%;
4+
height: 100%;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
margin: 0;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
}
14+
15+
#info,
16+
#info a {
17+
display: inline;
18+
font-family: monospace;
19+
color: gray;
20+
}
21+
22+
#container {
23+
min-width: 100%;
24+
display: flex;
25+
flex-direction: column;
26+
}
27+
28+
#navigation {
29+
padding-left: 1rem;
30+
}
31+
32+
#helptext {
33+
position: absolute;
34+
display: none;
35+
max-width: 300px;
36+
background-color: #eee;
37+
border: 2px solid #bbb;
38+
padding: 0.2rem;
39+
font-size: 10pt;
40+
}
41+
42+
#wrapper {
43+
min-width: 100%;
44+
display: flex;
45+
flex-direction: row;
46+
flex-wrap: nowrap;
47+
overflow-x: auto;
48+
-webkit-overflow-scrolling: touch;
49+
-ms-overflow-style: -ms-autohiding-scrollbar;
50+
}
51+
52+
#techtree {
53+
border: 5px solid #4d3617;
54+
background-color: #e7c28e;
55+
flex: 0 0 auto;
56+
position: relative;
57+
}
58+
59+
#metainfo {
60+
border: 5px solid #4d3617;
61+
width: 20rem;
62+
flex: 0 0 auto;
63+
display: flex;
64+
flex-direction: column;
65+
background-color: #e7c28e;
66+
padding: 1rem;
67+
}
68+
69+
#civinfo {
70+
flex: 1 0 auto;
71+
font-size: 11pt;
72+
}
73+
74+
#thanks {
75+
flex: 0 0 auto;
76+
}
77+
78+
#civname {
79+
text-align: center;
80+
}
81+
82+
hr {
83+
overflow: visible;
84+
/* For IE */
85+
height: 30px;
86+
border-style: solid;
87+
border-color: black;
88+
border-width: 1px 0 0 0;
89+
border-radius: 20px;
90+
}
91+
92+
hr:before {
93+
/* Not really supposed to work, but does */
94+
display: block;
95+
content: "";
96+
height: 30px;
97+
margin-top: -31px;
98+
border-style: solid;
99+
border-color: black;
100+
border-width: 0 0 1px 0;
101+
border-radius: 20px;
102+
}
103+
104+
#navigation {
105+
margin-top: 0.5rem;
106+
margin-bottom: 0.5rem;
107+
}
108+
109+
#thanks,
110+
#thanks a {
111+
font-size: 6pt;
112+
font-family: monospace;
113+
color: gray;
114+
}

0 commit comments

Comments
 (0)