main.css 1.4 KB

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