Skip to content

Commit 4a4b991

Browse files
jpalayjpalay
committed
meatboat
1 parent 43e5ee7 commit 4a4b991

11 files changed

+1518
-3
lines changed

‎css/style.css

+241
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
2+
3+
body {
4+
margin: 0;
5+
width: 100%;
6+
height: 100%%;
7+
}
8+
9+
.bebas {
10+
font-family: "Bebas";
11+
word-spacing: 0.2em;
12+
}
13+
14+
.intro {
15+
width: 100%;
16+
height: 100%;
17+
font-family: Courier;
18+
color: #93d500;
19+
}
20+
21+
.intro a {
22+
text-decoration: none;
23+
color: inherit;
24+
}
25+
26+
.intro a:hover {
27+
text-decoration: underline;
28+
}
29+
30+
.type-target {
31+
line-height: 1em;
32+
}
33+
34+
#logo {
35+
position: fixed;
36+
top: 0;
37+
height: auto;
38+
padding: 7px 10px;
39+
background-color: black;
40+
z-index: 10;
41+
}
42+
43+
#headline-wrapper {
44+
display: block;
45+
width: 50%;
46+
min-height: 76px;
47+
margin: 0 auto;
48+
margin-top: 10%;
49+
text-align: center;
50+
background-color: black;
51+
padding: 15px;
52+
border: solid 1px #93d500;
53+
}
54+
55+
#headline {
56+
font-size: 60px;
57+
margin: 0 auto;
58+
}
59+
60+
#skip {
61+
position: absolute;
62+
bottom: 0;
63+
left: 0;
64+
padding: 5px;
65+
}
66+
67+
.cursor {
68+
/* position: relative; */
69+
/* top: 0.12em; */
70+
}
71+
72+
#binary-pane {
73+
position: fixed;
74+
z-index: -1;
75+
background-color: black;
76+
width: 100%;
77+
height: 100%;
78+
overflow: hidden;
79+
font-family: 'Inconsolata';
80+
font-size: 0.9em;
81+
top: 0;
82+
left: 0;
83+
text-align: bottom;
84+
color: #93d500;
85+
}
86+
87+
#binary-text {
88+
position: absolute;
89+
bottom: 0;
90+
width: auto;
91+
line-height: 1.3em;
92+
}
93+
94+
.white {
95+
background-color: white;
96+
}
97+
98+
#content {
99+
position: absolute;
100+
top: 0;
101+
left: 0;
102+
right: 0;
103+
display: none;
104+
}
105+
106+
#top {
107+
height: 100px;
108+
}
109+
110+
#left {
111+
position: absolute;
112+
left: 0;
113+
top: 0;
114+
bottom: 0;
115+
width: 37.5%;
116+
}
117+
118+
#john-row {
119+
position: relative;
120+
text-align: center;
121+
}
122+
123+
#statue {
124+
width: 25%;
125+
/* margin-left: 36%; */
126+
margin-bottom: -5px;
127+
}
128+
129+
#right {
130+
position: absolute;
131+
right: 0;
132+
top: 0;
133+
bottom: 0;
134+
width: 37.5%;
135+
}
136+
137+
#article {
138+
min-height: 700px;
139+
padding-bottom: 100px;
140+
}
141+
142+
#article h1 {
143+
margin-top: 0;
144+
margin-bottom: 5px;
145+
font-size: 4em;
146+
text-align: center;
147+
}
148+
149+
#article .byline {
150+
text-align: center;
151+
}
152+
153+
#article-contents {
154+
font-family: 'Droid Serif', sans-serif;
155+
max-width: 650px;
156+
margin: 40px auto 0;
157+
font-size: 14px;
158+
line-height: 1.5em;
159+
}
160+
161+
#article-contents h2 {
162+
font-size: 1.7em;
163+
margin-top: 60px;
164+
text-align: center;
165+
}
166+
167+
#article-contents p:last-child {
168+
margin-bottom: 0;
169+
}
170+
171+
.clearfix:before,
172+
.clearfix:after {
173+
content: " ";
174+
display: table;
175+
}
176+
177+
#timeline {
178+
width: 600px;
179+
margin: 50px auto;
180+
}
181+
182+
#timeline a {
183+
color: #AAA;
184+
text-decoration: none;
185+
}
186+
187+
#timeline a:hover {
188+
text-decoration: underline;
189+
}
190+
191+
.dot {
192+
height: 10px;
193+
width: 10px;
194+
-webkit-border-radius: 10px;
195+
-moz-border-radius: 10px;
196+
border-radius: 10px;
197+
}
198+
199+
.clearfix:after {
200+
clear: both;
201+
}
202+
203+
.clearfix {
204+
*zoom: 1;
205+
}
206+
207+
.blink {
208+
animation-name: blinker;
209+
animation-duration: 1s;
210+
animation-timing-function: linear;
211+
animation-iteration-count: infinite;
212+
213+
-webkit-animation-name: blinker;
214+
-webkit-animation-duration: 1s;
215+
-webkit-animation-timing-function: linear;
216+
-webkit-animation-iteration-count: infinite;
217+
}
218+
219+
@-moz-keyframes blinker { /* Decimal not necessary, 0 and 1 is enough */
220+
0% { opacity: 1.0; }
221+
49% { opacity: 1.0; }
222+
50% { opacity: 0.0; }
223+
99% { opacity: 0.0; }
224+
100% { opacity: 1.0; }
225+
}
226+
227+
@-webkit-keyframes blinker {
228+
0% { opacity: 1.0; }
229+
49% { opacity: 1.0; }
230+
50% { opacity: 0.0; }
231+
99% { opacity: 0.0; }
232+
100% { opacity: 1.0; }
233+
}
234+
235+
@keyframes blinker {
236+
0% { opacity: 1.0; }
237+
49% { opacity: 1.0; }
238+
50% { opacity: 0.0; }
239+
99% { opacity: 0.0; }
240+
100% { opacity: 1.0; }
241+
}

‎css/timelinexml.basic.css

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
.timeline-wrap { position: relative; width: 100%; height: 3px; background: #333; }
2+
.timeline-event {
3+
position: absolute;
4+
left: 0;
5+
top: 0;
6+
}
7+
.timeline-event-node {
8+
position: absolute;
9+
top: -3px;
10+
left: 0px;
11+
border-radius: 8px;
12+
width: 9px;
13+
height: 9px;
14+
background: #222;
15+
cursor: pointer;
16+
-webkit-transition: width 0.05s ease-out, height 0.05s ease-out, margin 0.05s ease-out, background 0.05s ease-out;
17+
-moz-transition: width 0.05s ease-out, height 0.05s ease-out, margin 0.05s ease-out, background 0.05s ease-out;
18+
transition: width 0.05s ease-out, height 0.05s ease-out, margin 0.05s ease-out, background 0.05s ease-out;
19+
}
20+
.timeline-event-contents {
21+
display: none;
22+
margin-left: -20px;
23+
}
24+
.timeline-event.timeline-selected .timeline-event-node, .timeline-event.timeline-selected .timeline-event-node:hover {
25+
width: 14px;
26+
height: 14px;
27+
margin-left: -3px;
28+
margin-top: -3px;
29+
background: #222;
30+
}
31+
.timeline-event-node:hover {
32+
width: 11px;
33+
height: 11px;
34+
margin-left: -1px;
35+
margin-top: -1px;
36+
}
37+
.timeline-event-contents {
38+
overflow-x: visible !important;
39+
overflow-y: visible !important;
40+
position: absolute;
41+
padding: 12px;
42+
left: 0;
43+
top: 30px;
44+
background: #222;
45+
font: normal 12px/18px 'Lucida Grande', helvetica, tahoma, sans-serif;
46+
color: #efefef;
47+
}
48+
.timeline-event.timeline-bottom .timeline-event-arrow {
49+
position: absolute;
50+
display: none;
51+
content: "";
52+
left: 0px;
53+
top: 24px;
54+
width: 0;
55+
height: 0;
56+
border-left: 6px solid transparent;
57+
border-right: 6px solid transparent;
58+
border-bottom: 6px solid #222;
59+
}
60+
.timeline-event.timeline-above .timeline-event-contents {
61+
top: -80px;
62+
}
63+
.timeline-event.timeline-above .timeline-event-arrow {
64+
top: auto;
65+
bottom: 32px;
66+
border-left: 6px solid transparent;
67+
border-right: 6px solid transparent;
68+
border-top: 6px solid #222;
69+
border-bottom: none;
70+
}
71+
.timeline-event-contents .timeline-event-content, .timeline-event-contents .timeline-event-link {
72+
display: none;
73+
}
74+
/*.timeline-event.timeline-selected .timeline-event-content, .timeline-event.timeline-selected .timeline-event-link {
75+
display: block;
76+
}*/
77+
.timeline-event-title {
78+
white-space: nowrap;
79+
font-weight: bold;
80+
}
81+
.timeline-event-title span {
82+
color: #777;
83+
display: inline-block;
84+
margin-right: 10px;
85+
font-size: 10px;
86+
font-weight: normal;
87+
}
88+
.timeline-event-link {
89+
display: block;
90+
text-align: right;
91+
}
92+
.timeline-event-link a {
93+
color: #777;
94+
text-decoration: none;
95+
font-size: 10px;
96+
}
97+
.timeline-event-link a:visited {
98+
color: #777;
99+
text-decoration: none;
100+
}
101+
.timeline-event-link a:hover {
102+
color: #777;
103+
text-decoration: underline;
104+
}
105+
.timeline-large-scale, .timeline-small-scale {
106+
position: absolute;
107+
left: 0;
108+
top: -30px;
109+
font: bold 10px/18px 'Lucida Grande', helvetica, tahoma, sans-serif;
110+
color: #222;
111+
}
112+
.timeline-dateblock {
113+
width: 100px;
114+
text-align: center;
115+
position: absolute;
116+
left: 0;
117+
top: 0;
118+
margin-left: -50px;
119+
white-space: nowrap;
120+
}
121+
.timeline-dateblock:before {
122+
display: block;
123+
content: "";
124+
position: absolute;
125+
left: 50px;
126+
top: 20px;
127+
width: 1px;
128+
height: 10px;
129+
background: #222;
130+
}
131+
.timeline-small-scale .timeline-dateblock:before {
132+
top: 25px;
133+
height: 4px;
134+
background: #777;
135+
}
136+
.timeline-small-scale {
137+
color: #dfdfdf;
138+
top: -30px;
139+
}
140+
.timeline-event-content img { float: left; margin: 0 10px 10px 0; width: 100px; }
141+
.timeline-event-content { margin: 20px 0 10px; }

0 commit comments

Comments
 (0)