github.com/aspring/packer@v0.8.1-0.20150629211158-9db281ac0f89/website/source/assets/stylesheets/_components.scss (about) 1 header .header { 2 height: 200px; 3 background: #000000; 4 5 h1 { 6 margin-bottom: -8px; 7 margin-top: 60px; 8 text-transform: uppercase; 9 } 10 11 span { 12 font-size: 20px; 13 } 14 } 15 16 .hero { 17 height: $hero-height + 100px; 18 background: #000000 image-url('hero_image.jpg') no-repeat; 19 background-position: 35px -40px; 20 background-size: 100%; 21 22 h2 { 23 margin-top: 70px; 24 } 25 26 @media (max-width: $screen-md-max) { 27 height: $hero-height; 28 29 h2 { 30 font-size: 2.1em; 31 } 32 } 33 34 @media (max-width: $screen-sm-max) { 35 height: auto; 36 background: none; 37 38 h2 { 39 margin: 0; 40 padding: 1em; 41 } 42 } 43 } 44 45 .belt { 46 &.download { 47 background-color: $white; 48 @extend .padded-sm; 49 } 50 51 .download-container { 52 background: image-url('down_arrow.png') no-repeat top left; 53 display: inline-block; 54 min-height: 73px; 55 margin: 0 auto; 56 padding-left: 100px; 57 58 @media (max-width: $screen-sm) { 59 background: none; 60 font-size: 75%; 61 min-height: 50px; 62 padding: 0; 63 } 64 } 65 66 .download-row { 67 text-align: center; 68 69 .small { 70 text-align: left; 71 } 72 } 73 74 h2 { 75 font-family: $serif; 76 font-size: 44px; 77 color: #7bc6b1; 78 margin: 0px; 79 padding: 0px; 80 padding-top: 7px; 81 padding-bottom: 3px; 82 line-height: 1.0; 83 white-space: nowrap; 84 85 &:hover { 86 color: $dark-background; 87 } 88 } 89 90 span { 91 color: $gray-dark; 92 } 93 } 94 95 .downloads { 96 margin-top: 20px; 97 98 .description { 99 margin-bottom: 20px; 100 } 101 102 .download { 103 border-bottom: 1px solid #b2b2b2; 104 padding-bottom: 15px; 105 margin-bottom: 15px; 106 107 .details { 108 padding-left: 95px; 109 110 li { 111 display: inline-block; 112 113 &:after { 114 content: " | "; 115 } 116 117 &:last-child:after { 118 content: ""; 119 } 120 } 121 122 a { 123 font-size: 22px; 124 color: darken($green, 15%); 125 126 &:hover { 127 color: darken($green, 30%); 128 } 129 130 &:active { 131 color: darken($green, 50%); 132 } 133 } 134 } 135 136 .icon { 137 img { 138 width: 75px; 139 } 140 } 141 142 .os-name { 143 font-size: 40px; 144 margin-bottom: -3px; 145 } 146 } 147 148 .poweredby { 149 margin-top: 20px; 150 margin-bottom: 20px; 151 152 img { 153 display: block; 154 margin: 0 auto; 155 width: 122px; 156 } 157 } 158 } 159 160 .marketting { 161 p { 162 padding-left: 10px; 163 padding-right: 10px; 164 text-align: justify; 165 } 166 } 167 168 .docs-wrapper { 169 .docs-body { 170 @extend .white-background; 171 172 .docs-content { 173 padding: $docs-top-margin 80px; 174 max-width: 960px; 175 display: block; 176 177 code { 178 background-color: #000; 179 border: 0; 180 color: #b1d631; 181 font-size: 14px; 182 } 183 184 a { 185 color: darken($green, 15%); 186 187 &:hover { 188 color: darken($green, 30%); 189 } 190 191 &:active { 192 color: darken($green, 50%); 193 } 194 } 195 196 ul, ol { 197 list-style-position: inside; 198 margin-top: $baseline; 199 margin-left: 20px; 200 margin-right: 20px; 201 202 li { 203 font-family: $serif; 204 font-size: 17px; 205 line-height: (30/17) !important; 206 margin-bottom: $baseline; 207 } 208 } 209 210 ul { 211 list-style-type: circle; 212 } 213 214 ol { 215 list-style-type: decimal; 216 } 217 218 div.alert { 219 font-family: $serif; 220 font-size: 17px; 221 line-height: 1.5; 222 letter-spacing: 1px; 223 margin-left: -95px; 224 margin-right: -95px; 225 padding-top: 40px; 226 padding-bottom: 40px; 227 padding-left: 80px; 228 padding-right: 80px; 229 border-radius: 0; 230 } 231 232 pre { 233 border: 0; 234 font-size: 14px; 235 margin-left: -95px; 236 margin-right: -95px; 237 padding-top: 40px; 238 padding-bottom: 40px; 239 padding-left: 80px; 240 padding-right: 80px; 241 border-radius: 0; 242 } 243 } 244 245 section { 246 margin-top: $docs-top-margin; 247 } 248 249 h1 { 250 font-size: 40px; 251 line-height: (25/20); 252 text-transform: uppercase; 253 } 254 255 h2 { 256 margin-top: $baseline * 2; 257 text-transform: capitalize; 258 } 259 260 h3 { 261 margin-top: $baseline; 262 text-transform: capitalize; 263 font-size: 26px; 264 } 265 } 266 } 267 268 .pagination { 269 $border: 1px solid $gray-mid; 270 height: $nav-height; 271 border-top: $border; 272 font-size: 20px; 273 margin: 0 -15px -40px -15px; 274 display: block; 275 276 h4 { 277 display: inline-block; 278 margin-top: ($baseline * 1.7); 279 margin-left: $baseline; 280 281 @include respond-to(mobile) { 282 margin-top: 10px; 283 } 284 } 285 286 span { 287 @include respond-to(mobile) { 288 display: block; 289 } 290 } 291 292 .previous-section, 293 .next-section { 294 height: $nav-height; 295 display: block; 296 297 &:hover { 298 background-color: transparentize($gray-light, .7); 299 } 300 } 301 302 .previous-section { 303 width: $nav-height; 304 border-right: $border; 305 float: left; 306 background: $white image-url('arrow-left.png') no-repeat center center; 307 @include respond-to(mobile) { 308 width: 50%; 309 background-position: left center; 310 } 311 } 312 313 .next-section { 314 background: $white image-url('arrow-right.png') no-repeat center right; 315 } 316 } 317 318 .people { 319 margin-top: 30px; 320 321 .person { 322 margin-bottom: 30px; 323 324 img { 325 width: 125px; 326 } 327 328 h3 { 329 text-transform: none; 330 } 331 332 .bio { 333 padding-left: 150px; 334 } 335 } 336 }