Forgot to use the border-radius mixin.
[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 body{
14         background:$page-background;
15         @include body-text;
16 }
17
18 a{
19         color: darken($foreground, 20%);
20         text-decoration:none;
21         background: darken($page-background, 15%);
22         padding:3px;
23         @include border-radius(3px);
24         &:hover{
25                 background: desaturate(darken($page-background, 25%), 10%);
26                 text-shadow: 0 1px 0 rgba(255,255,255,.65);
27         };
28 }
29
30 #container{
31         width: $page-width;
32         margin:20px auto;
33         background: $content-background;
34         color: $foreground;
35 }
36
37 #nameplate{
38         @include adjust-font-size-to(60px);
39         margin-bottom:25px;
40         padding-bottom:5px;
41         border-bottom:5px solid $foreground;
42         @include box-shadow(0 1px 0 #FFF);
43         font-family:$headingfonts;
44 }
45
46 #content{
47         p, ul, ol, header{
48                 @include margin-trailer;
49         }
50         h1, h2, h3, h4, h5, h6{
51                 font-weight:bold;
52                 @include margin-trailer(.5);
53         }
54         h2{
55                 @include adjust-font-size-to(20px);
56         }
57         code{
58                 background: darken($page-background, 10%);
59                 padding:3px;
60                 margin:-4px 0;
61                 border: 1px solid darken($page-background, 15%);
62                 @include border-radius(3px);
63                 @include box-inset;
64                 font-family:Menlo, monospace;
65                 @include adjust-font-size-to(13px);
66         }
67 }
68
69 .three-up{
70         $pad: 10px;
71         $width: $page-width + $pad;
72         background: $foreground;
73         margin:$base-line-height #{-$pad};
74         padding:$pad;
75         @include border-radius(5px);
76         @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
77
78         figure{
79                 $border: 1px;
80                 border:$border solid darken($foreground, 10%);
81                 float:left;
82                 width: ($width / 3) - $pad - 2 * $border;
83                 margin-right: $pad;
84                 overflow:hidden;
85                 position:relative;
86                 @include transition(width, .25s, linear);
87                 @include box-inset($outset:rgba(255,255,255,.35));
88                 @include border-radius(3px);
89                 
90                 &.shrunk{
91                         width: ($width - 610px) / 2 - $pad - 3 * $border;
92                 }
93                 &.expanded{
94                         width:600px;
95                 }
96                 
97                 &:last-child{
98                         margin-right: 0;
99                         float:right; /* keeps the right margin from wiggling */
100                 }
101
102                 img{
103                         display:block;
104                 }
105         }
106         
107         figcaption{
108                 position:absolute;
109                 bottom:0;
110                 left:0;
111                 right:0;
112                 background: rgba(0,0,0,.75);
113                 text-shadow:1px 1px 0 #000;
114                 padding:0 5px;
115                 color:#FFF;
116                 width:600px;
117                 @include adjust-font-size-to(13px);
118         }
119         
120         @include clearfix;
121 }
122
123 #modelList{
124         margin-left: 1.5em;
125         li{
126                 @include margin-trailer(.5);
127                 list-style-type:disc;
128         }
129         .name{
130                 font-weight:bold;
131         }
132 }
133
134 #contribList{
135         $pad: 10px;
136         $width: $page-width + $pad;
137         background: $foreground;
138         margin:$base-line-height #{-$pad};
139         padding:#{2*$pad} $pad;
140         @include border-radius(5px);
141         @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
142         @include clearfix;
143         text-shadow:none;
144         color:lighten($foreground, 80%);
145         -webkit-font-smoothing: antialiased;
146         
147         li{
148                 $border: 1px;
149                 width: $page-width/2 - $pad * 3 - $border * 2;
150                 float:left;
151                 margin: 0 $pad/2 $pad $pad/2;
152                 padding: $pad;
153                 background: darken($foreground, 5%);
154                 border:$border solid darken($foreground, 10%);
155                 @include box-inset(rgba(0,0,0,.35), rgba(255,255,255,.15));
156                 @include clearfix;
157                 @include border-radius(3px);
158         }
159         .name, .description, .status{
160                 display:block;
161         }
162         .name{
163                 font-weight:bold;
164         }
165         .description{
166                 color:lighten($foreground, 40%);
167         }
168         .status{
169                 font-style:italic;
170                 @include adjust-font-size-to(13px);
171                 float:right;
172         }
173 }