:root { /* Font families. --------------------------------------------------------------------------- */ --font-family-default: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", "Monaco", Menlo, monospace; /* Colors. --------------------------------------------------------------------------- */ --color-text: #000; --color-background: #fff; --color-link: #062ffa; /* Blue. */ --color-link-hover: #111; /* Lighter black. */ --color-link-active: #f2641c; /* Orange. */ --color-tag-background: #f5f5f5; /* Gray light. */ --color-tag-border: #cbcbcb; /* Gray medium. */ /* Spacing. --------------------------------------------------------------------------- */ --spacing-default: 1rem; --padding-x-default: 0.625rem; --padding-y-default: var(--spacing-default); /* Fonts. Setting the font size on to 1rem sets the text size to the browser's default font size: usually 16px. Let's upsize to a trendy 18px. Then: 18px = 1rem 36px = 2rem => (36 * 1) / 18 3.052rem => 3.052 * 18 = 54.936px --------------------------------------------------------------------------- */ /* Try to set an obvious, impossible-to-miss visual distinction between headings. */ --font-size-default: 18px; --font-size-h1: 3.1rem; --font-size-h2: 2.2rem; --font-size-h3: 1.6rem; --font-size-h4: 1.3rem; --font-size-h5: 1.1rem; --font-size-h6: 1rem; --font-weight-default: 400; --font-weight-medium: 500; --font-weight-heavy: 700; --line-height-default: 1.625; /* http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ */ --line-height-heading: calc(var(--line-height-default) * 0.8); /* Borders. --------------------------------------------------------------------------- */ --border-width-default: 1px; --border-radius-default: 2px; /* Tables. --------------------------------------------------------------------------- */ --table-border-width: var(--border-width-default); --table-border-color: var(--color-tag-border); --table-padding-x: var(--padding-x-default); --table-padding-y: var(--padding-y-default); /* Forms. --------------------------------------------------------------------------- */ --input-background-color: var(--color-tag-background); --input-border-color: var(--color-tag-border); --input-border-radius: var(--border-radius-default); --input-border-width: var(--border-width-default); --input-line-height: var(--line-height-default); --input-padding-x: 5px; --input-padding-y: 10px; /* Buttons. --------------------------------------------------------------------------- */ --button-background-color: var(--color-text); --button-border-color: var(--color-text); --button-border-radius: var(--border-radius-default); --button-border-width: var(--border-width-default); --button-color: var(--color-background); --button-padding-x: 0.5rem; --button-padding-y: 1.2rem; } @media (prefers-color-scheme: dark) { :root { --color-text: #f9f9f9; --color-background: #000; --color-link: #2997ff; --color-link-hover: #f2641c; --color-link-active: #f9f9f9; --color-tag-background: #1e1e1e; --color-tag-border: #939393; } } /* Box-model. --------------------------------------------------------------------------- */ *, *:after, *:before { box-sizing: border-box; } /* Global. --------------------------------------------------------------------------- */ html { color: var(--color-text); background: var(--color-background); font-size: var(--font-size-default); font-family: var(--font-family-default); overflow-y: scroll; line-height: var(--line-height-default); font-weight: var(--font-weight-default); -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom. */ -webkit-font-smoothing: antialiased; } /* Links. --------------------------------------------------------------------------- */ a, a:link, a:visited { text-decoration: underline; color: var(--color-link); } a:focus, a:hover { text-decoration: none; color: var(--color-link-hover); } a:active { color: var(--color-link-active); } /* Headings. --------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-heavy); line-height: var(--line-height-heading); } h1 { font-size: var(--font-size-h1); /* Don't let headings float. Add more space above, less below. */ margin: var(--font-size-h1) 0 calc(var(--font-size-h1) / 3); } h2 { font-size: var(--font-size-h2); margin: var(--font-size-h2) 0 calc(var(--font-size-h2) / 3); } h3 { font-size: var(--font-size-h3); margin: var(--font-size-h3) 0 calc(var(--font-size-h3) / 3); } h4 { font-size: var(--font-size-h4); margin: var(--font-size-h4) 0 calc(var(--font-size-h4) / 3); } h5 { font-size: var(--font-size-h5); margin: var(--font-size-h5) 0 calc(var(--font-size-h5) / 3); } h6 { font-size: var(--font-size-h6); margin: var(--font-size-h6) 0 calc(var(--font-size-h6) / 3); } /* Lists. --------------------------------------------------------------------------- */ /* For optimal readability, add additonal space between the items in the lists. */ li { margin: var(--padding-x-default) 0; } /* iframe. --------------------------------------------------------------------------- */ iframe { border: 0; } /* Menu. --------------------------------------------------------------------------- */ menu { list-style: none; padding: 0; } menu li { display: inline-block; } menu li:not(:last-child) { margin-right: var(--padding-x-default); } /* Definition lists. --------------------------------------------------------------------------- */ dl { display: grid; grid-template-columns: minmax(1fr, min-content) minmax(1fr, min-content); border-top: var(--border-width-default) solid var(--color-tag-border); } dt { grid-column-start: 1; font-weight: var(--font-weight-medium); text-align: right; border-bottom: var(--border-width-default) solid var(--color-tag-border); padding-right: var(--spacing-default); } dd { grid-column-start: 2; border-bottom: var(--border-width-default) solid var(--color-tag-border); margin-left: 0; } /* Code. --------------------------------------------------------------------------- */ pre { padding: var(--padding-x-default) var(--padding-y-default); max-width: 100%; overflow: auto; background: var(--color-tag-background); border: var(--border-width-default) solid var(--color-tag-border); border-radius: var(--border-radius-default); } code { display: inline-block; font-family: var(--font-family-mono); font-size: 80%; padding: 1px 6px; background: var(--color-tag-background); border: var(--border-width-default) solid var(--color-tag-border); border-radius: var(--border-radius-default); } pre code { border: none; background: none; padding: 0; } kbd { display: inline-block; vertical-align: middle; padding: 0 0.328rem; font-family: var(--font-family-mono); font-size: 80%; color: var(--color-text); background-color: var(--color-tag-background); border: var(--border-width-default) solid var(--color-tag-border); border-bottom: 2px solid var(--color-tag-border); border-radius: 5px; } /* Blockquotes. --------------------------------------------------------------------------- */ blockquote { padding: var(--padding-x-default) var(--padding-y-default); background: var(--color-tag-background); border-left: 5px solid var(--color-tag-border); margin-left: 0; margin-right: 0; } /* Tables. --------------------------------------------------------------------------- */ table { border-collapse: collapse; border-spacing: 0; empty-cells: show; text-align: left; border: var(--table-border-width) solid var(--table-border-color); margin-bottom: var(--spacing-default); } table caption { padding: var(--table-padding-x) var(--table-padding-y); font-style: italic; } table td, table th { padding: var(--table-padding-x) var(--table-padding-y); border: var(--table-border-width) solid var(--table-border-color); } table thead, table tfoot { background: var(--color-tag-background); padding: var(--table-padding-x) var(--table-padding-y); vertical-align: bottom; } table tfoot { vertical-align: top; } /* Images. --------------------------------------------------------------------------- */ img { max-width: 100%; } figure { margin: 0; } /* Divider. --------------------------------------------------------------------------- */ hr { width: 100%; border: var(--border-width-default) solid var(--color-tag-border); border-width: var(--border-width-default) 0 0 0; } /* Forms. --------------------------------------------------------------------------- */ label { display: inline-block; cursor: pointer; } fieldset { /* Width and min-width are required here to respect 100% textarea max-width within fieldset. http://codepen.io/tmsdnl/pen/ByqJgO */ width: 100%; min-width: 100%; padding: 0; border: 0; } legend { width: 100%; border-bottom: var(--input-border-width) solid var(--input-border-color); } input:not([type]), input[autocomplete], input[inputmode], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select[multiple], textarea { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-clip: padding-box; font-size: inherit; font-family: inherit; color: inherit; max-width: 100%; margin: 0; padding: var(--input-padding-x) var(--input-padding-y); background: var(--input-background-color); line-height: var(--input-line-height); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-border-radius); } select { font-size: inherit; font-family: inherit; } input[type="file"] { cursor: pointer; } input[type=file]::-webkit-file-upload-button { vertical-align: top; } input[type="checkbox"], input[type="radio"] { margin-top: 0; margin-bottom: 0; vertical-align: middle; position: relative; top: -1px; } textarea { min-height: 150px; } /* Buttons. --------------------------------------------------------------------------- */ button, input[type="submit"], input[type="reset"], input[type="button"] { -webkit-appearance: none; -moz-appearance: none; color: var(--button-color); background: var(--button-background-color); font-size: inherit; font-weight: var(--font-weight-medium); border: var(--button-border-width) solid var(--button-border-color); border-radius: var(--button-border-radius); padding: var(--button-padding-x) var(--button-padding-y); text-align: center; white-space: nowrap; cursor: pointer; } button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] { opacity: .5; cursor: not-allowed; } button:focus, button:enabled:hover, input[type="submit"]:focus, input[type="submit"]:enabled:hover, input[type="reset"]:focus, input[type="reset"]:enabled:hover, input[type="button"]:focus, input[type="button"]:enabled:hover { color: var(--button-background-color); background: var(--button-color); } /* Details/Summary. --------------------------------------------------------------------------- */ details { padding: var(--padding-x-default) var(--padding-y-default); background: var(--color-tag-background); border: var(--border-width-default) solid var(--color-tag-border); border-radius: var(--border-radius-default); margin-bottom: var(--spacing-default); } summary { cursor: pointer; font-weight: var(--font-weight-medium); } details[open] > *:last-child { margin-bottom: 0; }