OLD | NEW |
| (Empty) |
1 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Montserrat
:400,700); | |
2 | |
3 @import "compass/reset"; | |
4 @import "compass/typography/text/replacement"; | |
5 | |
6 @import "syntax"; | |
7 | |
8 $baseFontSize: 14px; | |
9 $baseLineHeight: 24px; | |
10 | |
11 $sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
12 | |
13 $iconSpritePath: 'img/glyphicons-halflings.png'; | |
14 $iconWhiteSpritePath: 'img/glyphicons-halflings-white.png'; | |
15 | |
16 @import "compass_twitter_bootstrap"; | |
17 | |
18 // Don't require nasty <table class="table"> that bootstrap expects. | |
19 table { | |
20 @extend .table; | |
21 } | |
22 | |
23 body { | |
24 // Account for the fixed navbar height. | |
25 padding-top: 60px; | |
26 } | |
27 | |
28 // Don't word wrap inline code. | |
29 code { | |
30 white-space: nowrap; | |
31 } | |
32 | |
33 pre code { | |
34 white-space: inherit; | |
35 } | |
36 | |
37 pre b { | |
38 font-weight: bold; | |
39 } | |
40 | |
41 a.permalink { | |
42 margin-left: 0.5em; | |
43 display: none; | |
44 } | |
45 | |
46 article { | |
47 @extend .span8; | |
48 | |
49 position: relative; | |
50 | |
51 h2, h3, h4 { | |
52 // Ensure that the headers don't get covered up by the navbar when the user | |
53 // clicks on the permalink. | |
54 padding-top: 40px; | |
55 margin-top: -40px; | |
56 | |
57 &:hover a.permalink { | |
58 display: inline; | |
59 } | |
60 } | |
61 } | |
62 | |
63 .navbar-search { | |
64 margin-top: 4px; | |
65 | |
66 .search-query { | |
67 border-radius: 4px; | |
68 -moz-border-radius: 4px; | |
69 -webkit-border-radius: 4px; | |
70 height: 20px; | |
71 line-height: inherit; | |
72 } | |
73 } | |
74 | |
75 .has-permalink:hover > a.permalink { | |
76 display:inline; | |
77 } | |
78 | |
79 // Don't make tab bars so huge. | |
80 .nav-tabs > li > a { | |
81 padding-top: 4px; | |
82 padding-bottom: 4px; | |
83 } | |
84 | |
85 .nav { | |
86 margin-bottom: 8px; | |
87 } | |
88 | |
89 .package-sidebar { | |
90 padding-top: 50px; | |
91 } | |
92 | |
93 tt { | |
94 font-family: $monoFontFamily; | |
95 padding: 0 3px; | |
96 } | |
97 | |
98 footer { | |
99 @extend .well; | |
100 @extend .well-small; | |
101 font-size: 13px; | |
102 text-align: center; | |
103 | |
104 .login, .logout { | |
105 display: inline-block; | |
106 float: right; | |
107 // #f5f5f5 is the background-color of the footer, which isn't a variable | |
108 // for some reason. | |
109 color: scale-color(#f5f5f5, $lightness: -15%); | |
110 } | |
111 } | |
112 | |
113 form#private-key textarea { | |
114 width: 550px; | |
115 height: 420px; | |
116 font-family: $monoFontFamily; | |
117 } | |
118 | |
119 // We have two brands: the dart logo and "pub.dartlang.org". This keeps them | |
120 // from being too spread out. | |
121 .brand + .brand { | |
122 padding-left: 10px; | |
123 } | |
124 | |
125 // Highlight the brand text on hover. This matches other navbar buttons and | |
126 // makes it clearer that the logo links to something different. | |
127 a.brand:hover { | |
128 color: white; | |
129 } | |
130 | |
131 .dart-logo { | |
132 @include replace-text("/static/img/dart.png", 0, 0); | |
133 width: 21px; | |
134 } | |
135 | |
136 .intro { | |
137 @extend .well; | |
138 } | |
139 | |
140 .get-started { | |
141 @extend .btn; | |
142 @extend .btn-primary; | |
143 } | |
144 | |
145 h1 .version { | |
146 @extend small; | |
147 font-size: 20px; | |
148 } | |
149 | |
150 td table { | |
151 margin: -4px; | |
152 td, th { | |
153 border: none; | |
154 padding: 4px; | |
155 } | |
156 } | |
157 | |
158 td.archive, th.archive { | |
159 text-align: center; | |
160 vertical-align: middle; | |
161 } | |
162 | |
163 // Need to shift the icons a bit to line the up with adjacent text. | |
164 .icon-hand-right, | |
165 .icon-envelope { | |
166 margin: 3px 0 0 2px; | |
167 } | |
168 | |
169 .author { | |
170 white-space: nowrap; | |
171 } | |
172 | |
173 .learn-more { | |
174 a { | |
175 @extend .btn; | |
176 @extend .btn-small; | |
177 | |
178 color: $linkColor; | |
179 | |
180 float: right; | |
181 position: absolute; | |
182 width: 270px; | |
183 right: -320px; | |
184 | |
185 display: inline-block; | |
186 } | |
187 } | |
188 | |
189 ol.toc { | |
190 @extend .well; | |
191 | |
192 position: absolute; | |
193 right: -320px; | |
194 width: 230px; | |
195 | |
196 float: right; | |
197 | |
198 // Tweak padding to handle list bullets and the spacing on the header. | |
199 padding: 10px 20px 20px 40px; | |
200 | |
201 li { | |
202 font-size: 13px; | |
203 line-height: 21px; | |
204 } | |
205 } | |
206 | |
207 .toc:before { | |
208 @extend h3; | |
209 content: "Contents"; | |
210 } | |
211 | |
212 .pagination { | |
213 @extend .pagination-centered; | |
214 } | |
215 | |
216 .progress { | |
217 @extend .progress-striped; | |
218 } | |
219 | |
220 [class^="icon-"], [class*=" icon-"] { | |
221 @include hide-text; | |
222 } | |
223 | |
224 ul ul { | |
225 list-style-type: circle; | |
226 } | |
227 | |
228 .admin { | |
229 @extend .tabbable, .tabs-left; | |
230 | |
231 > ul { | |
232 @extend .nav, .nav-tabs; | |
233 } | |
234 | |
235 > div { | |
236 @extend .tab-content; | |
237 | |
238 > div { | |
239 @extend .tab-pane, .container-fluid; | |
240 } | |
241 } | |
242 | |
243 form button { | |
244 @extend .btn; | |
245 } | |
246 } | |
OLD | NEW |