| 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 |