layout.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. html {
  2. height: 100%;
  3. }
  4. // Prevent potential for layout shifts on a page with fixed 100% height. This
  5. // can happen, for example, with the Grammarly extension in Firefox.
  6. html.fixed-size-document {
  7. position: fixed;
  8. width: 100%;
  9. }
  10. body {
  11. position: relative;
  12. min-height: 100%;
  13. }
  14. .content {
  15. min-height: 100vh;
  16. padding-top: $header-height + $spacing-08;
  17. padding-bottom: $spacing-08;
  18. .thin-footer & {
  19. min-height: calc(100vh - #{$thin-footer-height});
  20. }
  21. }
  22. .content-alt {
  23. background-color: $bg-light-secondary;
  24. }
  25. // Page header/separator
  26. .page-separator,
  27. .page-header {
  28. padding-bottom: $spacing-05;
  29. border-bottom: 1px solid $border-divider;
  30. margin: 0;
  31. // Apply margin above or below this header/separator only when it has a sibling
  32. * > * + &,
  33. * > & + * {
  34. margin-top: $spacing-08;
  35. }
  36. }
  37. // Horizontal rule. Override Bootstrap's 25% opacity, which we don't want
  38. hr {
  39. opacity: unset;
  40. }
  41. .horizontal-divider {
  42. border-top: 1px solid var(--border-divider);
  43. }
  44. .hidden {
  45. @extend .d-none;
  46. }
  47. .hidden-print {
  48. @extend .d-print-none;
  49. }
  50. .row-spaced {
  51. margin-top: var(--line-height-03);
  52. }
  53. .row-spaced-small {
  54. margin-top: calc(var(--line-height-03) / 2);
  55. }
  56. .row-spaced-large {
  57. margin-top: calc(var(--line-height-03) * 2);
  58. }
  59. .row-spaced-extra-large {
  60. margin-top: calc(var(--line-height-03) * 4);
  61. }