vanilla.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. /* Reset */
  2. html, body, div, span, applet, object, iframe,
  3. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  4. a, abbr, acronym, address, big, cite, code,
  5. del, dfn, em, img, ins, kbd, q, s, samp,
  6. small, strike, strong, sub, sup, tt, var,
  7. b, u, i, center,
  8. dl, dt, dd, ol, ul, li,
  9. fieldset, form, label, legend,
  10. table, caption, tbody, tfoot, thead, tr, th, td,
  11. article, aside, canvas, details, embed,
  12. figure, figcaption, footer, header, hgroup,
  13. menu, nav, output, ruby, section, summary,
  14. time, mark, audio, video {
  15. margin: 0;
  16. padding: 0;
  17. border: 0;
  18. font-size: 100%;
  19. font: inherit;
  20. vertical-align: baseline;
  21. }
  22. * {
  23. box-sizing: border-box;
  24. }
  25. /* Variables */
  26. :root {
  27. --desktop-font-size: 1.2rem/1.5;
  28. --mobile-font-size: 1rem/1.4;
  29. --text-color: #2d2d2d;
  30. --link-color: blue;
  31. --link-color-alt: darkblue;
  32. --primary-color: lightsteelblue;
  33. --secondary-color: aliceblue;
  34. --tertiary-color: whitesmoke;
  35. }
  36. /* Typography */
  37. body {
  38. color: var(--text-color);
  39. margin: 0 auto;
  40. max-width: 75ch;
  41. padding: 0 0.5rem;
  42. }
  43. body, input {
  44. font: var(--desktop-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  45. }
  46. h1,h2,h3,h4,h5,h6,p,blockquote,dl,img,figure {
  47. margin: 2rem 0;
  48. }
  49. h1,h2,h3,h4,h5,h6 { font-weight: bold; line-height: 1.2; }
  50. h1 { font-size: 200%; }
  51. h2 { font-size: 150%; }
  52. h3 { font-size: 120%; }
  53. h4,h5,h6 { font-size: 100%; }
  54. h5, h6 { text-transform: uppercase; }
  55. header h1 { border-bottom: 1px solid; }
  56. p { margin: 2rem 0; }
  57. a,a:visited { color: var(--link-color); }
  58. a:hover,a:focus { color: var(--link-color-alt); }
  59. strong, time, b { font-weight: bold; }
  60. em, dfn, i { font-style: italic; }
  61. sub { font-size: 60%; vertical-align: bottom; }
  62. small { font-size: 80%; }
  63. blockquote, q {
  64. background: var(--secondary-color);
  65. border-left: 10px solid var(--primary-color);
  66. display: block;
  67. font-family: "Georgia", serif;
  68. padding: 1rem;
  69. }
  70. blockquote p:first-child { margin-top: 0; }
  71. blockquote p:last-child { margin-bottom: 0; }
  72. cite {
  73. font-family: "Georgia", serif;
  74. font-style: italic;
  75. font-weight: bold;
  76. margin-top: 1rem;
  77. }
  78. kbd,code,samp,pre,var { font-family: monospace; }
  79. code, pre {
  80. background: var(--tertiary-color);
  81. overflow: auto;
  82. padding: 0.5rem 1rem;
  83. }
  84. code pre , pre code { padding: 0; }
  85. /* Elements */
  86. hr {
  87. background: var(--text-color);
  88. border: 0;
  89. height: 1px;
  90. margin: 4rem 0;
  91. }
  92. img {
  93. display: block;
  94. height: auto;
  95. max-width: 100%;
  96. }
  97. figure {
  98. border: 1px solid var(--primary-color);
  99. display: inline-block;
  100. padding: 1rem;
  101. width: 100%;
  102. }
  103. figure img { margin: 0 auto; }
  104. figure figcaption { font-size: 80%; margin-top: 0.5rem; text-align: center; }
  105. ul, ol { margin: 2rem 0; padding: 0 0 0 4rem; }
  106. dl dd { padding-left: 2rem; }
  107. table {
  108. border: 1px solid var(--primary-color);
  109. border-collapse: collapse;
  110. table-layout: fixed;
  111. text-align: left;
  112. width: 100%;
  113. }
  114. table caption { margin: 2rem 0; }
  115. table tr { border-bottom: 1px solid var(--primary-color); }
  116. table tbody tr:nth-child(even) { background: var(--tertiary-color); }
  117. table th { background: var(--secondary-color); font-weight: bold; }
  118. table th, table td { padding: 1rem; }
  119. table th:not(last-of-type), table td:not(last-of-type) { border-right: 1px solid var(--primary-color); }
  120. input {
  121. appearance: none;
  122. border: 1px solid var(--text-color);
  123. display: block;
  124. margin: 0.5rem 0;
  125. padding: 0.8rem;
  126. }
  127. input:focus, input:active { background-color: var(--secondary-color); border-color: var(--link-color); }
  128. /* Mobile Styling */
  129. @media screen and (max-width: 75ch) {
  130. body, input {
  131. font: var(--mobile-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  132. }
  133. table { table-layout: auto; }
  134. }
  135. /* Dark mode support */
  136. @media (prefers-color-scheme: dark) {
  137. body {
  138. background: #191919;
  139. }
  140. input:focus, input:active {
  141. background-color: var(--text-color);
  142. color: var(--secondary-color);
  143. }
  144. :root {
  145. --text-color: #fff;
  146. --link-color: orange;
  147. --link-color-alt: yellow;
  148. --primary-color: orange;
  149. --secondary-color: black;
  150. --tertiary-color: #2d2d2d;
  151. }
  152. }