layout.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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. .container-top-padded {
  22. padding-top: var(--spacing-16);
  23. }
  24. }
  25. .content-alt {
  26. background-color: $bg-light-secondary;
  27. }
  28. // Page header/separator
  29. .page-separator,
  30. .page-header {
  31. padding-bottom: $spacing-05;
  32. border-bottom: 1px solid $border-divider;
  33. margin: 0;
  34. // Apply margin above or below this header/separator only when it has a sibling
  35. * > * + &,
  36. * > & + * {
  37. margin-top: $spacing-08;
  38. }
  39. }
  40. // Horizontal rule. Override Bootstrap's 25% opacity, which we don't want
  41. hr {
  42. opacity: unset;
  43. }
  44. .horizontal-divider {
  45. border-top: 1px solid var(--border-divider);
  46. }
  47. .hidden {
  48. @extend .d-none;
  49. }
  50. .hidden-print {
  51. @extend .d-print-none;
  52. }
  53. .row-spaced {
  54. margin-top: var(--line-height-03);
  55. }
  56. .row-spaced-small {
  57. margin-top: calc(var(--line-height-03) / 2);
  58. }
  59. .row-spaced-large {
  60. margin-top: calc(var(--line-height-03) * 2);
  61. }
  62. .row-spaced-extra-large {
  63. margin-top: calc(var(--line-height-03) * 4);
  64. }
  65. .inline-material-symbols .material-symbols {
  66. vertical-align: middle;
  67. }
  68. .container-custom-sm {
  69. max-width: 400px;
  70. }
  71. .full-height {
  72. height: 100%;
  73. }
  74. .table-fixed {
  75. table-layout: fixed;
  76. word-wrap: break-word;
  77. }