content_page.less 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. /*
  2. Styling for content pages
  3. Including: about, home, blog, /for/__, legal, contact, portals, wiki
  4. */
  5. .content-page {
  6. word-break: break-word;
  7. /*
  8. Links and Buttons
  9. */
  10. a {
  11. color: @link-color-alt;
  12. &:hover {
  13. color: @link-hover-color-alt;
  14. }
  15. }
  16. .reset-btns; // reapply btn style to correct color property set on <a> above
  17. hr {
  18. border-color: @hr-border-alt;
  19. }
  20. .quote-by {
  21. min-width: 80px;
  22. overflow: hidden;
  23. }
  24. .page-header {
  25. margin-top: 0;
  26. }
  27. /*
  28. section
  29. */
  30. section {
  31. padding: @line-height-computed (@grid-gutter-width / 2);
  32. &.color-block {
  33. &.green-dark {
  34. background-color: @ol-dark-green;
  35. }
  36. &.green {
  37. background-color: @ol-green;
  38. .no-card * {
  39. .btn-primary,
  40. .btn-success {
  41. // only correct button colors when green on green
  42. .btn-primary-on-primary-bg;
  43. }
  44. }
  45. }
  46. &.blue-gray-dark {
  47. background-color: @ol-blue-gray-5;
  48. }
  49. &.blue-gray-light {
  50. background-color: @ol-blue-gray-1;
  51. }
  52. &.green,
  53. &.green-dark,
  54. &.blue-gray-dark {
  55. .no-card * {
  56. color: @white;
  57. a {
  58. text-decoration: underline;
  59. }
  60. .btn {
  61. text-decoration: none;
  62. }
  63. .form-control {
  64. color: @input-color;
  65. }
  66. }
  67. }
  68. }
  69. .section-row {
  70. margin: 0 auto;
  71. /* match .col-sm-10 */
  72. /* @grid-gutter-width is used for margins */
  73. max-width: (@screen-sm * (10/12)) - @grid-gutter-width;
  74. @media (min-width: @screen-md-min) {
  75. max-width: (@screen-md * (10/12)) - @grid-gutter-width;
  76. }
  77. @media (min-width: @screen-lg-min) {
  78. max-width: (@screen-lg * (10/12)) - @grid-gutter-width;
  79. }
  80. }
  81. }
  82. .content-container > section:first-child {
  83. /* header */
  84. padding-bottom: 0;
  85. padding-top: 0;
  86. }
  87. .content-container > section:nth-child(2) {
  88. /* first content section */
  89. padding-top: 0;
  90. }
  91. section.no-top-padding {
  92. /* opt out of padding via the CMS */
  93. padding-top: 0;
  94. }
  95. .container-small {
  96. section .section-row {
  97. /* match col-sm-8 */
  98. /* @grid-gutter-width is used for margins */
  99. max-width: (@screen-sm * (8/12)) - @grid-gutter-width;
  100. @media (min-width: @screen-md-min) {
  101. max-width: (@screen-md * (8/12)) - @grid-gutter-width;
  102. }
  103. @media (min-width: @screen-lg-min) {
  104. max-width: (@screen-lg * (8/12)) - @grid-gutter-width;
  105. }
  106. }
  107. }
  108. /*
  109. lists
  110. */
  111. .list-without-style {
  112. list-style: none;
  113. margin: 0;
  114. padding: 0;
  115. }
  116. }