jumbotron-narrow.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /* Space out content a bit */
  2. body {
  3. padding-top: 20px;
  4. padding-bottom: 20px;
  5. }
  6. /* Everything but the jumbotron gets side spacing for mobile first views */
  7. .header,
  8. .marketing,
  9. .footer {
  10. padding-right: 15px;
  11. padding-left: 15px;
  12. }
  13. /* Custom page header */
  14. .header {
  15. border-bottom: 1px solid #e5e5e5;
  16. }
  17. /* Make the masthead heading the same height as the navigation */
  18. .header h3 {
  19. padding-bottom: 19px;
  20. margin-top: 0;
  21. margin-bottom: 0;
  22. line-height: 40px;
  23. }
  24. /* Custom page footer */
  25. .footer {
  26. padding-top: 19px;
  27. color: #777;
  28. border-top: 1px solid #e5e5e5;
  29. }
  30. /* Customize container */
  31. @media (min-width: 768px) {
  32. .container {
  33. max-width: 730px;
  34. }
  35. }
  36. .container-narrow > hr {
  37. margin: 30px 0;
  38. }
  39. /* Main marketing message and sign up button */
  40. .jumbotron {
  41. text-align: center;
  42. border-bottom: 1px solid #e5e5e5;
  43. }
  44. .jumbotron .btn {
  45. padding: 14px 24px;
  46. font-size: 21px;
  47. }
  48. /* Supporting marketing content */
  49. .marketing {
  50. margin: 40px 0;
  51. }
  52. .marketing p + h4 {
  53. margin-top: 28px;
  54. }
  55. /* Responsive: Portrait tablets and up */
  56. @media screen and (min-width: 768px) {
  57. /* Remove the padding we set earlier */
  58. .header,
  59. .marketing,
  60. .footer {
  61. padding-right: 0;
  62. padding-left: 0;
  63. }
  64. /* Space out the masthead */
  65. .header {
  66. margin-bottom: 30px;
  67. }
  68. /* Remove the bottom border on the jumbotron for visual effect */
  69. .jumbotron {
  70. border-bottom: 0;
  71. }
  72. }