_welcome.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. #welcome .jumbotron {
  2. background: $primary;
  3. color: lighten($primary, 35%);
  4. margin-top: -20px;
  5. }
  6. #welcome .jumbotron__header,
  7. .jumbotron h1 {
  8. font-weight: bold;
  9. color: white;
  10. margin-top: 0;
  11. margin-bottom: 30px;
  12. }
  13. #welcome .jumbotron__body {
  14. max-width: 80%;
  15. margin-bottom: 0;
  16. line-height: 1.6em;
  17. }
  18. #welcome .jumbotron__header, .jumbotron h1 {
  19. font-weight: lighter;
  20. }
  21. #welcome h2 {
  22. margin-bottom: 20px;
  23. }
  24. #welcome .steps {
  25. max-width: 80%;
  26. padding-left: 0;
  27. list-style: none;
  28. counter-reset: welcome-steps;
  29. }
  30. #welcome .steps > .steps__item {
  31. margin-bottom: 2.5em;
  32. padding: 19px;
  33. border: 1px solid $gray-lighter;
  34. border-radius: 4px;
  35. overflow: hidden;
  36. // The step number.
  37. &:before {
  38. content: counter(welcome-steps);
  39. counter-increment: welcome-steps;
  40. width: 50px;
  41. height: 50px;
  42. float: left;
  43. margin-right: 1em;
  44. background: $gray-lighter;
  45. border: 1px solid darken($gray-lighter, 10%);
  46. border-radius: 50%;
  47. font: bold 2em monospace;
  48. text-align: center;
  49. line-height: 49px;
  50. }
  51. .body {
  52. float: left;
  53. }
  54. h2 {
  55. font-weight: bold;
  56. margin-top: 0;
  57. }
  58. p:last-child {
  59. margin-bottom: 0;
  60. }
  61. }