_reset.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. /**
  2. * Reset specific elements to make them easier to style in other contexts.
  3. */
  4. html,
  5. body,
  6. p,
  7. ol,
  8. ul,
  9. li,
  10. dl,
  11. dt,
  12. dd,
  13. blockquote,
  14. figure,
  15. fieldset,
  16. form,
  17. legend,
  18. textarea,
  19. pre,
  20. iframe,
  21. hr,
  22. h1,
  23. h2,
  24. h3,
  25. h4,
  26. h5,
  27. h6 {
  28. padding: 0;
  29. margin: 0;
  30. -moz-osx-font-smoothing: grayscale;
  31. -webkit-font-smoothing: antialiased;
  32. }
  33. /**
  34. * Apply generic border-box to all elements.
  35. * See:
  36. * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
  37. */
  38. /**
  39. * Apply border-box across the entire page.
  40. */
  41. html {
  42. box-sizing: border-box;
  43. }
  44. /**
  45. * Relax the definition a bit, to allow components to override it manually.
  46. */
  47. * {
  48. &,
  49. &::before,
  50. &::after {
  51. box-sizing: inherit;
  52. }
  53. }
  54. // HTML resets
  55. html {
  56. // Set mobile font-size to one step lower for mobile
  57. font-size: calc(var(--global--font-size-root) / var(--global--font-size-ratio)); /* #{$typescale-root / $typescale-ratio}; */
  58. font-family: var(--global--font-secondary);
  59. line-height: var(--global--line-height-body);
  60. // Set mobile and ^ font-size to normal root
  61. @include media(mobile) {
  62. font-size: var(--global--font-size-root);
  63. }
  64. }
  65. // body resets
  66. body {
  67. font-size: var(--global--font-size-base); /* #{$typescale-base}; */
  68. font-weight: var(--global--font-weight);
  69. color: var(--global--color-foreground);
  70. text-align: left;
  71. background-color: var(--global--color-background);
  72. }
  73. @import '../base/base';
  74. // Focus styles
  75. .site *:focus {
  76. outline-width: 1px;
  77. outline-style: dotted;
  78. outline-color: var(--global--color-secondary);
  79. }