1671a400a86f0492685d0ff9ca569415a33361c4
[leap_website.git] / app / assets / stylesheets / leap.scss
1
2
3 $background_color: #fff;
4
5 $masthead_border_color: black; // rgba(0,0,0,0.5);
6 $masthead_border: 1px solid $masthead_border_color;
7 $masthead_bg_color: #333; // rgba(96,96,96,0.2);
8 $masthead_color: #fff;
9 $masthead_height: 128px;
10
11 $masthead_text_left_margin: 150px;
12 $masthead_text_top_margin: 45px;
13 $masthead_text_size: 36px;
14
15 $cutout_color: darken($background_color,12%);
16
17 $side_column_bg_color: #d0d0d0; // rgba(0,0,0,0.05); // #e3e3e3
18 $side_column_border_color: #aaa; // rgba(0,0,0,0.2);
19 $side_column_active_bg_color: #000;
20 $side_column_active_color: $masthead_color;
21
22 $well_color: #fff;
23 $well_bg_color: #fff;
24 $well_border_color: #555;
25
26 body {
27   //background: #F5F1E8 url(/img/bg-sand.png) repeat-x;
28   background-color: $background_color;
29 }
30
31 .masthead {
32   border: $masthead_border;
33   background: $masthead_bg_color;
34   @include gradient-vertical(lighten($masthead_bg_color,8%),$masthead_bg_color);
35   border-top: none;
36   box-shadow: inset 0 0 8px 1px darken($masthead_bg_color, 8%);
37   box-shadow-top: 0;
38   .contents {
39     @include cutout-menu(topnav, $masthead_text_left_margin, $cutout_color, $masthead_border);
40     height: $masthead_height;
41     background: url(/img/leap-color-small.png) 10px 50% no-repeat;
42   }
43   h1 {
44     margin: 0;
45     color: $masthead_color;
46     line-height: $masthead_height;
47     font-size: $masthead_text_size;
48     white-space: nowrap;
49     overflow: hidden;
50     padding-left: $masthead_text_left_margin - 2px;
51   }
52   #topnav a.tab {
53     font-weight: bold;
54     color: white;
55     background: rgba(0,0,0,0.5);
56     &.active {
57       color: black;
58     }
59   }
60 }
61
62 .nav-tabs.nav-stacked li {
63   background: $side_column_bg_color;
64   a {
65     border-radius: 0 !important;
66     border: 0;
67     border-right: 4px solid $side_column_active_bg_color;
68     color: black;
69     line-height: 1.2em;
70     &:hover {
71       background: lighten($side_column_bg_color,20%);
72       border-color: lighten($side_column_active_bg_color, 50%);
73       text-decoration: underline;
74     }
75     &.level2 {
76       padding-left: 2em;
77     }
78   }
79   &.active a {
80     border: 0;
81     border-right: 4px solid $side_column_active_bg_color;
82     background: $side_column_active_bg_color;
83     color: $side_column_active_color;
84     cursor: pointer;
85   }
86 }
87
88 .side_column ul {
89   box-shadow: 2px 4px 4px 0px darken($background_color,40%);
90   //background: $side_column_bg_color;
91   //box-shadow: inset 0px 0px 5px 2px darken($side_column_bg_color,10%);
92 }
93
94 .background {
95   position: absolute;
96   top: 0;
97   left: 0;
98   right: 0;
99   height: 400px;
100   z-index: -1;
101   @include gradient-vertical(darken($background_color, 17%), $background_color);
102 }
103
104 .pullout {
105   background: rgba(0,0,0,.1);
106 }
107
108 //
109 // like bootstrap well, but not roundy
110 //
111
112 .well {
113   min-height: 20px;
114   padding: 19px;
115   margin-bottom: 11px; // same as 'p', not sure what variable this is.
116   background-color: $well_bg_color;
117   //@include gradient-vertical($well_bg_color, lighten($well_bg_color, 20%));
118   box-shadow: inset 0px 0px 4px 2px darken($well_bg_color,10%);
119   //box-shadow: 3px 3px 4px 2px rgba(0,0,0,0.05); // darken($background_color,10%);
120   border: 1px solid lighten($well_border_color,50%);
121   .heading {
122     margin-top: -6px;
123     margin-bottom: 6px;
124     //margin: -20px;
125     //margin-bottom: 0.75em;
126     //padding: 6px 19px;
127     //background: $well_border_color;
128     //color: $well_color;
129     font-weight: bold;
130     font-size: 1.1em;
131   }
132 }
133
134 //
135 // inverted headings
136 //
137
138 .invert {
139   color: white;
140   background-color: $well_border_color;
141   padding-left: 12px;
142 }
143
144
145 table.timeline {
146   td:first-child {
147     text-align: right;
148     white-space: nowrap;
149     padding-right: 0;
150   }
151   td {
152     vertical-align: top;
153     padding: 6px;
154   }
155 }
156
157 //
158 // blog stuff
159 //
160
161
162 article.blog_summary {
163   .byline {
164     color: #999;
165   }
166 }
167
168 article.blog_full {
169   .byline {
170     font-weight: bold;
171     margin-bottom: 0.5em;
172     font-size: 1em;
173     color: #999;
174   }
175 }