_404.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .page404__bg {
  2. position: fixed;
  3. top: 0;
  4. inset-inline-start: 0;
  5. width: 100vw;
  6. height: 100vh;
  7. background-color: theme('colors.secondary.400');
  8. font-family: $font-sans;
  9. color: theme('colors.white.DEFAULT');
  10. }
  11. .page404__logo {
  12. width: 400px;
  13. height: 500px;
  14. // Media for Windows High Contrast mode
  15. @media (forced-colors: active) {
  16. background-color: LinkText;
  17. }
  18. }
  19. .page404__text-container {
  20. width: 600px;
  21. height: 500px;
  22. text-align: center;
  23. }
  24. .page404__header {
  25. font-size: 6.8em;
  26. margin-bottom: 0.2em;
  27. color: inherit;
  28. }
  29. .page404__text {
  30. font-size: 2.25em;
  31. line-height: 1.25em;
  32. color: inherit;
  33. }
  34. a.button.page404__button {
  35. // more specific to override standard button styles
  36. font-size: 1.5em;
  37. line-height: 2em;
  38. height: 2.5em;
  39. padding: 0 0.5em;
  40. background-color: theme('colors.secondary.400');
  41. border: 4px solid theme('colors.secondary.DEFAULT');
  42. color: inherit;
  43. &:hover {
  44. background-color: theme('colors.secondary.DEFAULT');
  45. }
  46. }
  47. // MOBILE CHANGES:
  48. @include media-breakpoint-down(xs) {
  49. .page404__text-container {
  50. width: 400px;
  51. }
  52. .page404__header {
  53. font-size: 5em;
  54. }
  55. }