narrow-jumbotron.css 1.4 KB

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