-
Notifications
You must be signed in to change notification settings - Fork 57
/
style.css
182 lines (146 loc) · 6.73 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
/***** @font-face *****/
@font-face { font-family: bebas; src: local("BebasNeue") url(fonts/BebasNeue.otf);}
@font-face { font-family: ubuntu; src: local("Ubuntu") url(fonts/ubuntu.ttf);}
@font-face { font-family: marketing; src: local("MarketingScript") url(fonts/MarketingScript.ttf);}
@font-face { font-family: megalopolis; src: local("MEgalopolisExtra") url(fonts/MEgalopolisExtra.woff);}
/***** general stuff *****/
body { font-family: ubuntu; }
#plzwait { display: none; }
body.loading #plzwait {display: block; width: 100%; height: 100%; text-align: center; padding-top: 200px;}
body.loading #wall {opacity: 0;}
h1, h2, h3, h4 { font-family: bebas; }
* {padding: 0px; margin: 0px;}
body { background-color: #343838; }
html { box-shadow: inset 0px 0px 20px black; }
#wall { background-color: #E1E6E9; width: 900px; padding: 20px; margin: auto; margin-top: 10px; box-shadow: 0px 0px 5px black;}
#wall > h1 {font-size: 90px; width: 500px; vertical-align: middle; font-weight: normal; text-align: center; margin: auto; margin-top: 30px; text-align: center; position: relative;}
#wall > h1 > span {font-size: 30px; position: absolute; bottom: -2px; right: 48px; color: #999;}
#shortcredit a { color: #555; }
#shortcredit { opacity: 0.5; top: -150px; right: 0px; font-size: 10px; color: #777; position: relative; width: 100%; text-align: right; }
#shortcredit:hover {opacity: 1;}
#longcredits a { color: black; }
#longcredits {
color: #555;
}
/***** tag board *****/
#overview { margin: 5px; position: relative; background-color: #343838; box-shadow: inset 0px 0px 20px black; height: 320px; border-radius: 10px; margin-left: -5px; margin-right: -5px; }
.tag {font-size: 18px; transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; cursor: default;}
.tag.big {font-size: 50px;}
.tag { margin-top: 10px; margin-left: 15px; font-family: bebas; position: absolute; text-decoration: none; }
.tag.c0{color: #005f6b;}
.tag.c0:hover {color: #00a2b7;}
.tag.c1{color: #008c9e;}
.tag.c1:hover {color: #00cfea;}
.tag.c2{color: #00dffc;}
.tag.c2:hover {color: #00e1ff;}
.tag.c3{color: #00b4cc;}
.tag.c3:hover {color: #00e1ff;}
/**********************/
/* Title */
#wall > section > h1 { font-size: 100px; line-height: 100px; color: #2EC4DD; font-weight: normal; border-top: 2px solid black; padding-top: 20px; }
#wall > section:nth-of-type(2) > h1 { margin-top: 40px; border-top: none; }
#wall > section > article > h1:after { content: "▾"; margin-left: 25px; font-size: 50px; vertical-align: middle; -moz-transition-duration: 1s; -moz-transform: rotate(0deg); -webkit-transition-duration: 1s; -webkit-transform: rotate(0deg); transition-duration: 1s; transform: rotate(0deg); }
#wall > section > article > h1 { font-size: 80px; height: 80px; font-weight: normal; background-image: url(imgs/dashed.png); background-repeat: repeat-x; background-position: left bottom; cursor: pointer; padding-bottom: 10px; -moz-transition: text-indent 0.1s; -webkit-transition: text-indent 0.1s; transition: text-indent 0.1s; }
#wall > section > article > h1:hover { text-indent: 5px; }
#wall > section > article > article > h1 { font-size: 32px; line-height: 32px; letter-spacing: 0px; vertical-align: bottom; font-weight: normal; position: absolute; bottom: 200px; }
#wall > section > article { border-top: 10px solid #28C2DA; }
#wall > section > article { line-height: 0px; }
#wall > section > article * { line-height: normal; }
#wall > section > article > article {transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; font-size: 12px; border-top: 0px solid #777; border-bottom: 1px solid #777; width: 225px; display: inline-block; margin-top: 10px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px; margin-left: 6px; margin-right: 6px; height: 250px; vertical-align: middle; position: relative; padding-left: 30px; padding-right: 30px; }
#wall > section > article.closed > h1:after { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
#wall > section > article.closed > article { height: 0px; border: none; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; }
#wall > section > article > article { overflow: hidden;}
#wall > section > article > article > p { line-height: 16px; margin-top: 65px; text-align: justify; position: relative; z-index: 41;}
.demo {
position: absolute;
top: 400px;
left: 50%;
margin-left: -120px;
background-color: white;
border: 5px solid #28C2DA;
z-index: 42;
box-shadow: 0 0 30px black;
-moz-transition-duration: 1s;
-moz-transition-timing-function: cubic-bezier(0.05, 1.4, 0.25, 1);
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.05, 1.4, 0.25, 1);
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.05, 1.4, 0.25, 1);
}
article:hover > .demo {
top: 100px;
}
article:hover > .demo.close {
top: 400px;
}
.activexxxie .xxxie {
opacity: 0.4;
-moz-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
.activexxxie #overview .xxxie {
opacity: 1;
-moz-transform: scale(0)!important;
-webkit-transform: scale(0)!important;
transform: scale(0)!important;
}
#wall > section > article > article > a {
position: absolute;
z-index: 44;
bottom: -30px; left: 0;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
background-color: #28C2DA;
line-height: 20px;
text-align: center;
color: white;
width: 100%;
font-weight: bold;
box-shadow: 0px 0px 20px black;
}
#wall > section > article > article:hover > a { bottom: 0px; }
article > .demo > * {
display: block;
}
#wall > section > article > .experimental:before {
vertical-align: bottom;
content: url(imgs/phial.svg);
position: absolute;
top: 37px; left: 0px;
background-color: #343838;
height: 23px;
border-radius: 5px;
opacity: 0.5;
}
/*
#wall > section > article > .hasademo:after {
vertical-align: bottom;
content: "D";
font-size: 20px;
font-weight: bold;
padding-left: 5px;
color: white;
position: absolute;
top: 67px; left: 0px;
background-color: #343838;
height: 23px;
border-radius: 5px;
width: 20px;
opacity: 0.5;
}
#wall > section > article > .hasademo:not(.experimental):after {
top: 38px;
}
*/
.demo .closebutton {
position: absolute;
top: -18px;
right: -18px;
cursor: pointer;
}
@media all and (max-width: 900px) { #wall { width: 600px; } #overview {display: none;}}
@media all and (max-width: 600px) { #wall { width: 300px; } #wall > section > h1 { font-size: 70px; } }
/* Mozilla Badge position override */
a#gobackbutton, a#gobackbutton:hover { top: 100px; }