Lots of updates, textual and stylistic.
[philo.git] / static / scss / screen.scss
1 @import "http://fonts.googleapis.com/css?family=Expletus+Sans",
2                 "reset",
3                 "var",
4                 "compass/typography/vertical_rhythm",
5                 "compass/css3/images",
6                 "compass/css3/border-radius",
7                 "compass/css3/box-shadow",
8                 "compass/css3/transition",
9                 "compass/utilities/general/clearfix";
10                 
11 @include establish-baseline;
12
13 ::selection{
14         background: darken(saturate(adjust-hue($page-background, 90deg), 100%), 20%);
15         text-shadow: none !important;
16         color:#FFF !important;
17 }
18
19 @-webkit-keyframes glow{
20         0% {
21                 text-shadow: 0 0 3px rgba(255,255,255,0);
22         }
23         100% {
24                 text-shadow: 0 0 3px rgba(255,255,255,.5);
25         }
26 }
27
28 @-webkit-keyframes pulse{
29         0%{
30                 -webkit-transform: scale(1);
31         }
32         100%{
33                 -webkit-transform: scale(1.05);
34         }
35 }
36
37 .lite{
38         -webkit-animation-name: pulse;
39         -webkit-animation-duration: .25s;
40         -webkit-animation-iteration-count: infinite;
41         -webkit-animation-direction: alternate;
42         -webkit-animation-timing-function: linear;
43         margin: -10px;
44         padding: 9px;
45         border:1px solid darken($page-background, 5%);
46         background:lighten($page-background, 10%);
47         @include border-radius(5px);
48 }
49
50 section{
51         @include transition(all, .15s, linear);
52 }
53
54 body{
55         background:$page-background;
56         @include background(
57                 linear-gradient(top, desaturate(darken($page-background, 15%), 10%) 0, $page-background 250px)
58         );
59         @include body-text;
60 }
61
62 #container{
63         width: $page-width;
64         margin:20px auto;
65         background: $content-background;
66         color: $foreground;
67 }
68
69 #nameplate{
70         @include adjust-font-size-to(60px);
71         font-family:$headingfonts;
72         position:relative;
73 }
74
75 .installButton{
76         height:30px;
77         $buttoncolor:#EEE;
78         $buttonbottom:darken($buttoncolor, 10%);
79         $buttonfore:darken($buttoncolor, 80%);
80         color:$buttonfore;
81         text-decoration:none;
82         font-size:25px;
83         line-height:36px;
84         font-family:$headingfonts;
85         text-transform:uppercase;
86         letter-spacing:2px;
87         float:right;
88         width:160px;
89         @include border-radius(5px);
90         @include box-shadow(0 1px 3px 0 rgba(0,0,0,.15));
91         @include background(linear-gradient($buttoncolor, $buttonbottom));
92         text-shadow: #FFF 0 1px 0;
93         border:1px solid $buttoncolor;
94         padding:5px 10px;
95         position:absolute;
96         top:10px;
97         right:0;
98         &::after{
99                 content: '\2b07';
100                 font-size:20px;
101                 line-height:20px;
102                 padding:7px 1px 3px 4px;
103                 width:25px;
104                 @include border-radius(15px);
105                 @include box-shadow(0 1px 0 0 #FFF, 0 1px 2px 0 rgba(0,0,0,.15) inset);
106                 background:darken($buttoncolor,20%);
107                 float:left;
108                 text-align:center;
109                 margin-right:10px;
110                 font-family:Helvetica, Arial, sans-serif;
111         }
112         &:hover{
113                 @include background(linear-gradient($buttoncolor, darken($buttonbottom, 5%)));
114         }
115         &:active{
116                 @include background(linear-gradient(darken($buttonbottom, 5%), $buttoncolor));
117                 @include box-shadow(0 1px 3px 0 rgba(0,0,0,.15), 0 0 16px 0 rgba(0,0,0,.15) inset);
118                 color:darken($buttonfore, 10%);
119                 &::after{
120                         background:darken($buttoncolor, 30%);
121                 }
122         }
123 }
124
125 #content{
126         a{
127                 color: darken($page-background, 60%);;
128                 border-bottom:1px solid darken($page-background, 20%);
129                 @include box-shadow(0 1px 0 0 #FFF);
130                 text-decoration:none;
131                 &:hover{
132                         color: darken($page-background, 60%);
133                         border-bottom:1px solid darken($page-background, 60%);
134                 }
135         }
136         p, ul, ol, header{
137                 @include margin-trailer;
138         }
139         h1, h2, h3, h4, h5, h6{
140                 font-weight:bold;
141                 @include margin-trailer(.5);
142         }
143         h2{
144                 @include adjust-font-size-to(20px);
145         }
146         code{
147                 background: darken($page-background, 10%);
148                 padding:3px;
149                 margin:-4px 0;
150                 border: 1px solid darken($page-background, 15%);
151                 @include border-radius(3px);
152                 @include box-inset;
153                 font-family:Menlo, monospace;
154                 @include adjust-font-size-to(13px);
155         }
156         .codeblock{
157                 @extend code;
158                 @include margin-trailer;
159                 padding: 10px;
160                 display:block;
161                 code{
162                         margin:0;
163                         padding:0;
164                         @include box-shadow(none);
165                         @include border-radius(0);
166                         border:none;
167                         display:block;
168                 }
169                 &.shell code::before{
170                         content: "$ ";
171                         color:lighten($foreground, 10%);
172                 }
173         }
174         .pname{
175                 color:darken($page-background, 60%);
176         }
177         
178         
179
180         .tucol{
181                 @include pie-clearfix;
182                 section{
183                         width:$page-width/2 - 20px;
184                         float:right;
185                 }
186
187                 section:first-child{
188                         float:left;
189                 }
190                 section:nth-child(2){
191                         width:$page-width/2 - 40px;
192                         padding:15px 15px;
193                         background:rgba(255,255,255,.5);
194                         @include border-radius(5px);
195                         border:1px solid darken($page-background, 5%);
196                 }
197
198                 section :last-child{
199                         margin-bottom:0;
200                 }
201                 
202                 @include margin-leader(2);
203                 @include margin-trailer(2);
204         }
205
206         
207 }
208
209 .three-up{
210         $pad: 10px;
211         $width: $page-width + $pad;
212         background: $foreground;
213         margin:$base-line-height #{-$pad};
214         padding:$pad;
215         @include border-radius(5px);
216         @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
217         height:300px;
218
219         figure{
220                 $border: 1px;
221                 border:$border solid darken($foreground, 10%);
222                 float:left;
223                 width: ($width / 3) - $pad - 2 * $border;
224                 margin-right: $pad;
225                 overflow:hidden;
226                 position:relative;
227                 @include transition(width, .25s, linear);
228                 @include box-inset($outset:rgba(255,255,255,.35));
229                 @include border-radius(3px);
230                 
231                 &.shrunk{
232                         width: ($width - 610px) / 2 - $pad - 3 * $border - 2px;
233                 }
234                 &.expanded{
235                         width:600px;
236                 }
237                 
238                 &:last-child{
239                         margin-right: 0;
240                         float:right; /* keeps the right margin from wiggling */
241                 }
242
243                 img{
244                         display:block;
245                 }
246         }
247         
248         figcaption{
249                 position:absolute;
250                 bottom:0;
251                 left:0;
252                 right:0;
253                 background: rgba(0,0,0,.75);
254                 text-shadow:1px 1px 0 #000;
255                 padding:0 5px;
256                 color:#FFF;
257                 width:600px;
258                 @include adjust-font-size-to(13px);
259         }
260         
261         @include clearfix;
262 }
263
264 #whatIs{
265         padding:10px;
266         background:$foreground;
267         margin-bottom:20px;
268         line-height:30px;
269         font-size:20px;
270         @include box-inset(rgba(0,0,0,.35), #FFF);
271         @include border-radius(5px);
272         text-shadow: 0 -1px 0 #000;
273         text-align:center;
274         -webkit-font-smoothing: antialiased;
275         color:lighten($foreground, 60%);
276         :last-child{
277                 margin-bottom:0;
278         }
279         .w1{
280                 font-weight:bold;
281         }
282         .s1{
283                 color:lighten($foreground, 80%);
284                 display:block;
285         }
286         a{
287                 background:transparent;
288                 padding:0;
289                 color:lighten($accent, 20%);
290                 border-width:0;
291                 @include box-shadow(none);
292                 &:hover{
293                         background:transparent;
294                         color:desaturate(lighten($accent, 60%), 10%);
295                         border:none;
296                 }
297         }
298 }
299
300 #modelList{
301         margin-left: 1.5em;
302         li{
303                 @include margin-trailer(.5);
304                 list-style-type:disc;
305         }
306         .name{
307                 font-weight:bold;
308         }
309 }
310
311 #contribList{
312         $pad: 10px;
313         $width: $page-width + $pad;
314         background: $foreground;
315         margin:$base-line-height #{-$pad};
316         padding:#{2*$pad} $pad $pad $pad;
317         @include border-radius(5px);
318         @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
319         @include clearfix;
320         text-shadow:none;
321         color:lighten($foreground, 80%);
322         -webkit-font-smoothing: antialiased;
323         
324         li{
325                 $border: 1px;
326                 width: $page-width/2 - $pad * 3 - $border * 2;
327                 float:left;
328                 margin: 0 $pad/2 $pad $pad/2;
329                 padding: $pad;
330                 background: darken($foreground, 5%);
331                 border:$border solid darken($foreground, 10%);
332                 @include box-inset(rgba(0,0,0,.35), rgba(255,255,255,.15));
333                 @include clearfix;
334                 @include border-radius(3px);
335         }
336         .name, .description, .status{
337                 display:block;
338         }
339         .name{
340                 font-weight:bold;
341         }
342         .description{
343                 color:lighten($foreground, 40%);
344         }
345         .status{
346                 font-style:italic;
347                 @include adjust-font-size-to(13px);
348                 float:right;
349                 &.dev{
350                         -webkit-animation-name: glow;
351                         -webkit-animation-duration: 1s;
352                         -webkit-animation-timing-function: ease;
353                         -webkit-animation-iteration-count: infinite;
354                         -webkit-animation-direction: alternate;
355                 }
356                 &.pla{
357                         opacity:.5;
358                 }
359         }
360         a{
361                 color:#CCC;
362                 border:none;
363                 @include box-shadow(none);
364                 &:hover{
365                         color:#FFF;
366                         border:none;
367                 }
368         }
369 }
370
371 .getInvolved{
372         margin:-16px 0;
373 }
374
375 footer{
376         margin-top: 25px;
377         padding-top: 20px;
378         border-top:5px solid $foreground;
379         @include box-shadow(0 1px 0 0 #FFF inset);
380         @include adjust-font-size-to(13px);
381         color:lighten($foreground, 20%);
382         a{
383                 text-decoration:none;
384                 color:darken($page-background, 40%);
385                 &:hover{
386                         color:darken($page-background, 80%);
387                 }
388         }
389 }