theme.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. /* Font links ------------------------------------------------------------- */
  2. @font-face {
  3. font-family:"Open Sans";
  4. font-weight: 400;
  5. font-style: normal;
  6. src: local("Open Sans Regular"),
  7. url("/fonts/open-sans/open-sans-regular.woff2") format("woff2"),
  8. url("/fonts/open-sans/open-sans-regular.woff") format("woff");
  9. }
  10. @font-face {
  11. font-family:"Open Sans";
  12. font-weight: 400;
  13. font-style: italic;
  14. src: local("Open Sans Italic"),
  15. url("/fonts/open-sans/open-sans-italic.woff2") format("woff2"),
  16. url("/fonts/open-sans/open-sans-italic.woff") format("woff");
  17. }
  18. @font-face {
  19. font-family:"Open Sans";
  20. font-weight: 500;
  21. font-style: normal;
  22. src: local("Open Sans SemiBold"),
  23. url("/fonts/open-sans/open-sans-semibold.woff2") format("woff2"),
  24. url("/fonts/open-sans/open-sans-semibold.woff") format("woff");
  25. }
  26. @font-face {
  27. font-family:"Open Sans";
  28. font-weight: 500;
  29. font-style: italic;
  30. src: local("Open Sans SemiBold Italic"),
  31. url("/fonts/open-sans/open-sans-semibold-italic.woff2") format("woff2"),
  32. url("/fonts/open-sans/open-sans-semibold-italic.woff") format("woff");
  33. }
  34. @font-face {
  35. font-family:"Open Sans";
  36. font-weight: 600;
  37. font-style: normal;
  38. src: local("Open Sans Bold"),
  39. url("/fonts/open-sans/open-sans-bold.woff2") format("woff2"),
  40. url("/fonts/open-sans/open-sans-bold.woff") format("woff");
  41. }
  42. @font-face {
  43. font-family:"Open Sans";
  44. font-weight: 600;
  45. font-style: italic;
  46. src: local("Open Sans Bold Italic"),
  47. url("/fonts/open-sans/open-sans-bold-italic.woff2") format("woff2"),
  48. url("/fonts/open-sans/open-sans-bold-italic.woff") format("woff");
  49. }
  50. @font-face {
  51. font-family:"Hack";
  52. font-weight: 400;
  53. font-style: normal;
  54. src: local("Hack Regular"),
  55. url("/fonts/hack/hack-regular.woff2") format("woff2"),
  56. url("/fonts/hack/hack-regular.woff") format("woff");
  57. }
  58. /* General ---------------------------------------------------------------- */
  59. /* Default light theme */
  60. :root, :root.light {
  61. /* Font declarations */
  62. --sans-font: Open Sans, Noto Sans, Helvetica, sans-serif;
  63. --mono-font: Hack, Noto Mono, Courier, monospace;
  64. /* Effect transitions */
  65. --link-trans: color 0.5s, background 0.5s, ease-in-out;
  66. --img-trans: opacity 0.5s ease-in-out;
  67. /* Palette */
  68. --orange: #ff851b;
  69. --dark-orange: #c27d42;
  70. --light-gray: #c8c8c8; /* (HS)L: 200/255 */
  71. --gray: #808080; /* (HS)L: 128/255 */
  72. --gray-240: #f0f0f0; /* (HS)L: 240/255 */
  73. --gray-100: #646464; /* (HS)L: 100/255 */
  74. --gray-50: #323232; /* (HS)L: 50/255 */
  75. /* Sections */
  76. --bg-color: #fff;
  77. --text-color: var(--gray-100);
  78. --heading-color: var(--gray-100);
  79. --link-color: var(--orange);
  80. --link-hover-color: var(--gray-50);
  81. --link-visited-color: var(--dark-orange);
  82. --nav-link-color: var(--gray);
  83. --nav-link-hover-color: var(--orange);
  84. --main-title-link-color: var(--link-color);
  85. --main-title-link-hover-color: var(--link-hover-color);
  86. --toc-title-color: var(--gray);
  87. --toc-bg-color: var(--gray-240);
  88. --toc-link-color: var(--link-color);
  89. --toc-link-hover-color: var(--link-hover-color);
  90. /* Syntax highlighting */
  91. --code-border-color: var(--light-gray);
  92. --code-bg-color: var(--gray-240);
  93. --code-text-color: var(--gray);
  94. --code-error-color: #c60901;
  95. --code-datatype-color: var(--gray-50);
  96. --code-string-color: var(--orange);
  97. }
  98. * {
  99. margin: 0;
  100. padding: 0;
  101. box-sizing: border-box;
  102. }
  103. html {
  104. background: var(--bg-color);
  105. color: var(--text-color);
  106. font-family: var(--sans-font);
  107. font-size: 62.5%;
  108. }
  109. h1, h2, h3, h4, h5, h6 {
  110. color: var(--heading-color);
  111. word-wrap: break-word;
  112. }
  113. h1 {
  114. margin: 4rem 0 2rem;
  115. font-size: 2.8rem;
  116. }
  117. h2 {
  118. margin: 3rem 0 1.5rem;
  119. font-size: 2.4rem;
  120. }
  121. h3 {
  122. margin: 3rem 0 1.5rem;
  123. font-size: 2.2rem;
  124. }
  125. a {
  126. font-weight: 500;
  127. color: var(--link-color);
  128. text-decoration: none;
  129. }
  130. a:hover {
  131. color: var(--link-hover-color);
  132. transition: var(--link-trans);
  133. }
  134. a:visited { color: var(--link-visited-color); }
  135. code {
  136. font-family: var(--mono-font);
  137. }
  138. /* Sections --------------------------------------------------------------- */
  139. .header {
  140. margin: 5rem auto;
  141. }
  142. .header-title {
  143. text-align: center;
  144. margin: 0 auto 1.6rem;
  145. font-size: 3.8rem;
  146. }
  147. .header-title__link, .header-title__link:hover {
  148. background: none;
  149. color: var(--heading-color);
  150. text-decoration: none;
  151. }
  152. .nav {
  153. margin: 0 auto;
  154. }
  155. .nav__link {
  156. font-size: 2rem;
  157. font-weight: 400;
  158. color: var(--nav-link-color);
  159. text-decoration: none;
  160. }
  161. .nav__link:hover {
  162. color: var(--nav-link-hover-color);
  163. }
  164. .main {
  165. font-size: 1.6rem;
  166. word-wrap: break-word;
  167. }
  168. .main-title { font-size: 2.6rem; }
  169. .main-title a { color: var(--main-title-link-color); }
  170. .main-title a:hover { color: var(--main-title-link-hover-color); }
  171. .main p { margin: 1.5rem 0; }
  172. .main ol { margin: 0 0 0 2rem; }
  173. .main ol li { margin: 1rem 0; }
  174. .main ul {
  175. list-style: disc outside;
  176. margin: 0 0 0 2rem;
  177. }
  178. .main ul li { margin: 1rem 0; }
  179. .main ul li p { margin: 0; }
  180. .main ul li ul li { margin: 0 0 0 2.6rem; }
  181. .toc {
  182. margin: 2rem 0 4rem;
  183. background: var(--toc-bg-color);
  184. border-radius: 0.5rem;
  185. }
  186. .toc-title {
  187. margin: 0 0 1rem;
  188. font-size: 2rem;
  189. font-weight: 600;
  190. color: var(--toc-title-color);
  191. }
  192. .toc a {
  193. font-weight: 400;
  194. color: var(--toc-link-color);
  195. }
  196. .toc a:hover { color: var(--toc-link-hover-color); }
  197. .toc ul { list-style: none; }
  198. .toc ul li:before { content: unset; }
  199. .toc ul li ul li { margin: 0 0 0 1.2rem; }
  200. .toc ul li ul li ul li { margin: 0 0 0 2.6rem; }
  201. .footer {
  202. margin: 4rem auto;
  203. font-size: 1.2rem;
  204. }
  205. .footer p {
  206. margin: 1rem 0;
  207. text-align: center;
  208. }
  209. .footer a[rel="license"]:hover {
  210. background: none;
  211. }
  212. .footer a[rel="license"] img {
  213. margin: 1rem auto;
  214. border: 0;
  215. opacity: 0.8;
  216. }
  217. .footer a[rel="license"] img:hover {
  218. opacity: 1.0;
  219. transition: var(--img-trans);
  220. }
  221. /* Syntax highlighting ---------------------------------------------------- */
  222. div.sourceCode {
  223. padding: 0 1rem;
  224. border-top: 1.2rem solid var(--code-border-color);
  225. border-radius: 0.5rem;
  226. background: var(--code-bg-color);
  227. }
  228. pre.sourceCode {
  229. padding: 2rem 0;
  230. background: var(--code-bg-color);
  231. overflow: auto;
  232. }
  233. .sourceLine, .sourceLine:hover {
  234. background: var(--code-bg-color);
  235. color: var(--code-text-color);
  236. }
  237. .sourceCode .er { color: var(--code-error-color); }
  238. .sourceCode .dt { color: var(--code-datatype-color); }
  239. .sourceCode .st { color: var(--code-string-color); }
  240. /* Indentation adjustment hack */
  241. code.sourceCode span[id^="cb"] { margin: 0 0 0 -4rem; }
  242. code.sourceCode:first-child { margin: 0 0 0 4rem; }
  243. code.sourceCode .dt { margin: 0 0 0 -2rem; }
  244. /* Media queries ---------------------------------------------------------- */
  245. @media (max-width: 689px) {
  246. .header, .main, .footer { padding: 0 2rem; }
  247. /* Scale header logo */
  248. .header-title__link img {
  249. max-width: 90%;
  250. position: relative;
  251. object-fit: cover;
  252. object-position: center;
  253. }
  254. /* Stack nav items */
  255. .nav { width: 18rem; }
  256. .nav__link { display: block; }
  257. /* TOC spans full width */
  258. .toc {
  259. margin: 0 -2rem;
  260. padding: 4rem 2rem;
  261. }
  262. }
  263. @media (min-width: 690px) {
  264. .header, .main, .footer { padding: 0 5rem; }
  265. /* Horizontal nav */
  266. .nav { text-align: center; }
  267. .nav__link {
  268. margin: 0 1rem;
  269. display: inline;
  270. }
  271. /* TOC is 45% of min-width */
  272. .toc {
  273. margin: 0;
  274. padding: 4rem;
  275. width: 31rem;
  276. }
  277. }
  278. @media (min-width: 960px) {
  279. /* Center sections, set fixed width */
  280. .header, .main, .footer {
  281. width: 95rem;
  282. margin-left: auto;
  283. margin-right: auto;
  284. }
  285. }
  286. /* Dark theme ------------------------------------------------------------- */
  287. @media (prefers-color-scheme: dark) {
  288. :root {
  289. /* Palette */
  290. --orange: #ff851b;
  291. --dark-orange: #c27d42;
  292. --light-gray: #c8c8c8; /* (HS)L: 200/255 */
  293. --gray: #808080; /* (HS)L: 128/255 */
  294. --gray-50: #323232; /* (HS)L: 50/255 */
  295. --gray-35: #232323; /* (HS)L: 35/255 */
  296. /* Sections */
  297. --bg-color: var(--gray-50);
  298. --text-color: var(--light-gray);
  299. --heading-color: var(--light-gray);
  300. --link-color: var(--orange);
  301. --link-hover-color: var(--light-gray);
  302. --link-visited-color: var(--dark-orange);
  303. --nav-link-color: var(--light-gray);
  304. --nav-link-hover-color: var(--orange);
  305. --main-title-link-color: var(--link-color);
  306. --main-title-link-hover-color: var(--link-hover-color);
  307. --toc-title-color: var(--gray);
  308. --toc-bg-color: var(--gray-35);
  309. --toc-link-color: var(--link-color);
  310. --toc-link-hover-color: var(--link-hover-color);
  311. /* Syntax highlighting */
  312. --code-border-color: #ed9c55; /* light orange */
  313. --code-bg-color: var(--gray-35);
  314. --code-text-color: #555; /* (HS)L: 85/255 */
  315. --code-error-color: #c60901; /* red */
  316. --code-datatype-color: var(--gray);
  317. --code-string-color: #ed9c55;
  318. }
  319. }
  320. /* Repeat inside a .dark class to continue to support theme selection links in
  321. * the nav. The .dark and .light classes allow users to override the media
  322. * query-detected setting via the selection links if desired. */
  323. :root.dark {
  324. /* Palette */
  325. --orange: #ff851b;
  326. --dark-orange: #c27d42;
  327. --light-gray: #c8c8c8; /* (HS)L: 200/255 */
  328. --gray: #808080; /* (HS)L: 128/255 */
  329. --gray-50: #323232; /* (HS)L: 50/255 */
  330. --gray-35: #232323; /* (HS)L: 35/255 */
  331. /* Sections */
  332. --bg-color: var(--gray-50);
  333. --text-color: var(--light-gray);
  334. --heading-color: var(--light-gray);
  335. --link-color: var(--orange);
  336. --link-hover-color: var(--light-gray);
  337. --link-visited-color: var(--dark-orange);
  338. --nav-link-color: var(--light-gray);
  339. --nav-link-hover-color: var(--orange);
  340. --main-title-link-color: var(--link-color);
  341. --main-title-link-hover-color: var(--link-hover-color);
  342. --toc-title-color: var(--gray);
  343. --toc-bg-color: var(--gray-35);
  344. --toc-link-color: var(--link-color);
  345. --toc-link-hover-color: var(--link-hover-color);
  346. /* Syntax highlighting */
  347. --code-border-color: #ed9c55; /* light orange */
  348. --code-bg-color: var(--gray-35);
  349. --code-text-color: #555; /* (HS)L: 85/255 */
  350. --code-error-color: #c60901; /* red */
  351. --code-datatype-color: var(--gray);
  352. --code-string-color: #ed9c55;
  353. }