github.com/kardianos/nomad@v0.1.3-0.20151022182107-b13df73ee850/website/source/assets/stylesheets/_home.scss (about) 1 // 2 // Home 3 // -------------------------------------------------- 4 5 #hero{ 6 position: relative; 7 @include translate3d(0, -10px, 0); 8 text-align: center; 9 //background: image-url('../images/nomad-bg.png') 0 0 repeat; 10 //@include img-retina("../images/nomad-bg.png", "../images/nomad-bg@2x.png", 624px, 358px); 11 background: image-url('../images/nomad-giant.jpg') 0 0 no-repeat; 12 @include img-retina("../images/nomad-giant.jpg", "../images/nomad-giant.jpg", 624px, 358px); 13 background-size: cover !important; 14 overflow: hidden; 15 16 &:before{ 17 content: ''; 18 position: absolute; 19 top: -20px; 20 left: 50%; 21 width: 1000px; 22 height: 1000px; 23 margin-left: -500px; 24 border-radius: 500px; 25 background-color: $white; 26 z-index: 1; 27 } 28 29 #hero-graphic{ 30 position: absolute; 31 display: inline-block; 32 left: 50%; 33 top: 0; 34 width: 499px; 35 height: 340px; 36 margin-top: 38px; 37 margin-left: -250px; 38 z-index: 2; 39 40 #hero-logotype{ 41 position: absolute; 42 display: inline-block; 43 top: 75px; 44 left: 50%; 45 width: 115px; 46 height: 155px; 47 margin-left: -60px; 48 background: image-url('../images/hero-logotype.png') 0 0 no-repeat; 49 @include img-retina("../images/hero-logotype.png", "../images/hero-logotype@2x.png", 115px, 155px); 50 } 51 52 #cubes{ 53 .cube{ 54 position: absolute; 55 top: 300px; 56 left: 248px; 57 opacity: 0.01; 58 @include transform( translate(0, 150px) ); 59 @include transition( all 1.5s $easeInOutBack ); 60 61 &.in{ 62 @include transform( translate(0, 0) ); 63 opacity: 1; 64 } 65 66 .face { 67 @include transform-origin(0 0); 68 position: absolute; 69 height: 44px; 70 width: 44px; 71 72 &.top{ 73 background-color: $green; 74 @include transform(rotate(210deg) skewX(-30deg) scaleY(0.864) ); 75 } 76 &.left{ 77 background-color: $green-dark; 78 @include transform(rotate(90deg) skewX(-30deg) scaleY(0.864) ); 79 } 80 &.right{ 81 background-color: $green-light; 82 @include transform(rotate(-30deg) skewX(-30deg) scaleY(0.864) ); 83 } 84 } 85 } 86 } 87 } 88 89 #hero-text{ 90 position: relative; 91 padding-top: 400px; 92 93 #hero-text-content{ 94 position: relative; 95 z-index: 2; 96 padding-bottom: 40px; 97 } 98 99 h1{ 100 margin-top: 0; 101 color: $blue-dark; 102 font-size: $font-size-xl; 103 font-family: $font-family-blanc; 104 } 105 106 h4{ 107 color: $blue-light; 108 font-family: $font-family-blanc; 109 } 110 111 #hero-btns{ 112 margin-top: 26px; 113 a{ 114 115 } 116 } 117 } 118 119 #tag-line{ 120 margin: 15px 0 20px 0; 121 font-size: 24px; 122 font-weight: 300; 123 } 124 125 p{ 126 margin-top: 60px; 127 text-align: left; 128 font-size: 18px; 129 font-weight: 300; 130 line-height: 2em; 131 132 .strong{ 133 font-size: 20px; 134 font-weight: 500; 135 } 136 } 137 } 138 139 .banner{ 140 margin-top: 120px; 141 142 .col{ 143 p{ 144 line-height: 24px; 145 } 146 } 147 148 &.gray-banner{ 149 .col{ 150 border: 1px solid $blue-faint; 151 } 152 153 p{ 154 color: $blue-light; 155 } 156 } 157 158 &.green-banner{ 159 .col{ 160 border: 1px solid $blue-faint; 161 } 162 163 p{ 164 color: $blue-dark; 165 } 166 } 167 168 &#cta-banner{ 169 margin-top: 0; 170 margin-bottom: 80px; 171 172 .col{ 173 padding: 60px 20px; 174 } 175 } 176 177 .col{ 178 padding: 20px; 179 text-align: center; 180 border-radius: 3px; 181 } 182 183 p{ 184 margin-bottom: 0px; 185 margin-right: 30px; 186 font-size: $font-size-reg; 187 line-height: $font-size-reg; 188 font-family: $font-family-blanc-reg; 189 } 190 191 p, a{ 192 display: inline-block; 193 } 194 } 195 196 #content{ 197 overflow: hidden; 198 margin-top: 120px; 199 200 h2{ 201 margin-bottom: 120px; 202 text-align: center; 203 font-size: $font-size-m; 204 font-family: $font-family-blanc; 205 color: $green; 206 text-transform: uppercase; 207 } 208 209 .feature{ 210 position: relative; 211 margin-bottom: 60px; 212 padding-bottom: 60px; 213 border-bottom: 1px solid $blue-faint; 214 215 &:last-child{ 216 border-bottom: none; 217 } 218 219 &#deploy{ 220 .feature-graphic{ 221 margin-top: -130px; 222 width: 1161px; 223 height: 735px; 224 background: image-url('../images/feature-deploy.png') 0 0 no-repeat; 225 @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 1161px, 735px); 226 } 227 } 228 229 &#maintain{ 230 .feature-graphic{ 231 margin-top: -50px; 232 width: 1113px; 233 height: 689px; 234 background: image-url('../images/feature-manage.png') 0 0 no-repeat; 235 @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 1113px, 689px); 236 } 237 } 238 239 &#healing{ 240 .feature-graphic{ 241 margin-top: 80px; 242 width: 1009px; 243 height: 309px; 244 background: image-url('../images/feature-healing.png') 0 0 no-repeat; 245 @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 1009px, 309px); 246 } 247 } 248 249 &#density{ 250 .feature-graphic{ 251 margin-top: 80px; 252 width: 1040px; 253 height: 409px; 254 background: image-url('../images/feature-density.png') 0 0 no-repeat; 255 @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 1040px, 409px); 256 } 257 } 258 259 &#partners{ 260 .partner-logos{ 261 .docker-wrap{ 262 border-right: 1px solid $blue-faint; 263 264 .partner-logo{ 265 display: inline-block; 266 width: 120px; 267 height: 180px; 268 269 &.docker-logo{ 270 background: image-url('../images/partner-docker.png') center center no-repeat; 271 @include img-retina("../images/partner-docker.png", "../images/partner-docker@2x.png", 100px, 84px); 272 } 273 } 274 } 275 276 .cloud-wrap{ 277 .partner-logo{ 278 float: left; 279 width: 25%; 280 height: 180px; 281 282 &.aws-logo{ 283 background: image-url('../images/partner-amazon.png') center center no-repeat; 284 @include img-retina("../images/partner-amazon.png", "../images/partner-amazon@2x.png", 153px, 56px); 285 } 286 &.google-logo{ 287 background: image-url('../images/partner-google.png') center center no-repeat; 288 @include img-retina("../images/partner-google.png", "../images/partner-google@2x.png", 135px, 87px); 289 } 290 &.microsoft-logo{ 291 background: image-url('../images/partner-microsoft.png') center center no-repeat; 292 @include img-retina("../images/partner-microsoft.png", "../images/partner-microsoft@2x.png", 188px, 84px); 293 } 294 &.engineyard-logo{ 295 background: image-url('../images/partner-engineyard.png') center center no-repeat; 296 @include img-retina("../images/partner-engineyard.png", "../images/partner-engineyard@2x.png", 178px, 37px); 297 } 298 &.digitalocean-logo{ 299 background: image-url('../images/partner-digitalocean.png') center center no-repeat; 300 @include img-retina("../images/partner-digitalocean.png", "../images/partner-digitalocean@2x.png", 134px, 85px); 301 } 302 } 303 } 304 } 305 } 306 307 .feature-graphic{ 308 margin: 0 auto; 309 } 310 311 .feature-header{ 312 313 &.right{ 314 h3, p{ 315 text-align: right; 316 display: block; 317 float: right; 318 } 319 } 320 321 h3{ 322 margin: 30px 0 20px 0; 323 color: $blue-dark; 324 letter-spacing: 1px; 325 font-size: $font-size-l; 326 font-family: $font-family-blanc; 327 line-height: 1.25em; 328 max-width: 640px; 329 } 330 331 p{ 332 margin-bottom: 30px; 333 color: $blue-light; 334 font-size: $font-size-reg+2; 335 font-family: $font-family-blanc-reg; 336 line-height: 1.75em; 337 max-width: 480px; 338 } 339 } 340 341 .feature-footer{ 342 margin-top: -50px; 343 344 p{ 345 display: inline-block; 346 color: $blue-dark; 347 font-size: $font-size-reg; 348 font-family: $font-family-blanc; 349 line-height: 1.75em; 350 max-width: 320px; 351 padding-left: 20px; 352 border-left: 1px solid $blue-faint; 353 } 354 355 .docker-outline-logo{ 356 display: inline-block; 357 width: 80px; 358 height: 67px; 359 position: relative; 360 top: 12px; 361 margin-left: 8px; 362 background: image-url('../images/partner-docker.png') 0 0 no-repeat; 363 @include img-retina("../images/partner-docker.png", "../images/partner-docker@2x.png", 80px, 67px); 364 } 365 366 a{ 367 margin-bottom: 15px; 368 margin-left: 15px; 369 370 &:first-child{ 371 margin-left: 0; 372 } 373 } 374 } 375 } 376 377 #cta { 378 position: relative; 379 padding: 160px 0; 380 background: image-url('../images/bg-iconscrud.png') center center no-repeat; 381 @include img-retina("../images/bg-icons.png", "../images/bg-icons@2x.png", 669px, 260px); 382 background-position: center center; 383 border-top: 1px solid $faint-gray; 384 border-bottom: 1px solid $faint-gray; 385 386 a{ 387 margin-bottom: 5px; 388 } 389 390 p{ 391 margin-top: 10px; 392 color: $black; 393 font-size: 14px; 394 font-weight: 600; 395 line-height: 1.5esm; 396 397 &.cta-gray{ 398 color: $gray; 399 font-weight: 300; 400 } 401 } 402 403 .outline-btn { 404 padding: 16px 40px; 405 display: inline-block; 406 &:focus { 407 outline: 0; 408 } 409 } 410 } 411 } 412 413 @media (min-width: 1200px) { 414 415 } 416 417 418 @media (max-width: 1200px) { 419 420 } 421 422 @media (min-width: 992px) and (max-width:1200px) { 423 #cta a { 424 margin-top: 15px; 425 font-size: 18px; 426 } 427 } 428 429 @media (min-width: 768px) and (max-width:992px) { 430 #cta a { 431 margin-top: 10px; 432 } 433 } 434 435 @media (max-width: 992px) { 436 #content{ 437 .feature{ 438 &#deploy{ 439 .feature-graphic{ 440 margin-top: -60px; 441 width: 768px; 442 height: 486px; 443 background: image-url('../images/feature-deploy.png') 0 0 no-repeat; 444 @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 768px, 486px); 445 } 446 447 .feature-footer{ 448 margin-top: 0; 449 } 450 } 451 452 &#maintain{ 453 .feature-graphic{ 454 margin-top: -50px; 455 width: 768px; 456 height: 475px; 457 background: image-url('../images/feature-manage.png') 0 0 no-repeat; 458 @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 768px, 475px); 459 } 460 } 461 462 &#density{ 463 .feature-graphic{ 464 width: 768px; 465 height: 302px; 466 background: image-url('../images/feature-density.png') 0 0 no-repeat; 467 @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 768px, 302px); 468 } 469 } 470 471 &#partners{ 472 .partner-logos{ 473 .docker-wrap{ 474 //border: none; 475 .partner-logo{ 476 @include scale(.8); 477 margin-left: -18px; 478 } 479 } 480 .cloud-wrap{ 481 .partner-logo{ 482 @include scale(.8); 483 } 484 } 485 } 486 } 487 } 488 } 489 } 490 491 @media (max-width: 768px) { 492 #hero{ 493 #hero-graphic{ 494 @include scale(.8); 495 } 496 } 497 498 #content{ 499 .feature{ 500 &#deploy{ 501 .feature-graphic{ 502 margin-top: 0px; 503 width: 480px; 504 height: 304px; 505 background: image-url('../images/feature-deploy.png') 0 0 no-repeat; 506 @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 480px, 304px); 507 } 508 509 .feature-footer{ 510 margin-top: $small-pad; 511 512 .docker-outline-logo{ 513 width: 94px; 514 height: 63px; 515 background: image-url('../images/icon-docker-outline.png') 0 0 no-repeat; 516 @include img-retina("../images/icon-docker-outline.png", "../images/icon-docker-outline@2x.png", 94px, 63px); 517 } 518 } 519 } 520 521 &#maintain{ 522 .feature-graphic{ 523 margin-top: $small-pad; 524 width: 480px; 525 height: 297px; 526 background: image-url('../images/feature-manage.png') 0 0 no-repeat; 527 @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 480px, 297px); 528 } 529 } 530 531 &#healing{ 532 .feature-graphic{ 533 margin-top: $small-pad; 534 width: 480px; 535 height: 147px; 536 background: image-url('../images/feature-healing.png') 0 0 no-repeat; 537 @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 480px, 147px); 538 } 539 } 540 541 &#density{ 542 .feature-graphic{ 543 margin-top: $small-pad; 544 width: 480px; 545 height: 189px; 546 background: image-url('../images/feature-density.png') 0 0 no-repeat; 547 @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 480px, 189px); 548 } 549 } 550 551 &#partners{ 552 .partner-logo{ 553 display: block !important; 554 float: none !important; 555 width: 100% !important; 556 margin: 0 auto; 557 -webkit-transform: scale(1) !important; 558 -ms-transform: scale(1) !important; 559 transform: scale(1) !important; 560 margin-left: 0 !important; 561 height: 130px !important; 562 } 563 564 p{ 565 padding: 0 20px; 566 } 567 } 568 } 569 570 .feature-header{ 571 h3,p{ 572 text-align: center !important; 573 max-width: none !important; 574 float: none !important; 575 } 576 } 577 } 578 579 .banner{ 580 padding: 18px; 581 margin: 0 20px; 582 583 .col{ 584 text-align: center; 585 586 p{ 587 display: block; 588 margin-right: 0; 589 margin-bottom: $small-pad; 590 } 591 } 592 } 593 594 #cta{ 595 .intro{ 596 text-align: center; 597 p{ 598 text-align: center; 599 margin-bottom: 15px; 600 } 601 } 602 } 603 } 604 605 606 @media (max-width: 480px) { 607 #hero{ 608 background: none; 609 610 &:before{ 611 display: none; 612 } 613 614 #hero-graphic{ 615 height: 60px; 616 margin-top: 0; 617 @include scale(.54); 618 } 619 620 #hero-text{ 621 position: relative; 622 padding-top: 220px; 623 } 624 } 625 626 #content{ 627 .feature{ 628 &#deploy{ 629 .feature-graphic{ 630 width: 280px; 631 height: 177px; 632 background: image-url('../images/feature-deploy.png') 0 0 no-repeat; 633 @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 280px, 177px); 634 } 635 .feature-footer{ 636 .docker-outline-logo{ 637 display: block; 638 } 639 } 640 } 641 642 &#maintain{ 643 .feature-graphic{ 644 margin-top: $small-pad; 645 width: 280px; 646 height: 173px; 647 background: image-url('../images/feature-manage.png') 0 0 no-repeat; 648 @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 280px, 173px); 649 } 650 } 651 652 &#healing{ 653 .feature-graphic{ 654 width: 280px; 655 height: 86px; 656 background: image-url('../images/feature-healing.png') 0 0 no-repeat; 657 @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 280px, 86px); 658 } 659 } 660 661 &#density{ 662 .feature-graphic{ 663 width: 280px; 664 height: 110px; 665 background: image-url('../images/feature-density.png') 0 0 no-repeat; 666 @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 280px, 110px); 667 } 668 } 669 } 670 } 671 } 672 673 674 @media (max-width: 320px) { 675 676 #hero{ 677 #diagram{ 678 width: 100%; 679 height: 132px; 680 background: image-url('../images/hero.png') center 0 no-repeat; 681 @include img-retina("../images/hero.png", "../images/hero@2x.png", 320px, 132px); 682 } 683 } 684 685 #cta a { 686 font-size: 14px; 687 font-weight: 400; 688 } 689 }