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