:root { --main-color: white; --main-bg-color: #212121; --code-color: #353535; --header-bg-color: #2b2b2b; --hyperlink-color: #7dcfff; --hyperlink-hover-color: #0d72ad; --shadow-color: black; --search-box-bg-color: #4d4d4d; --search-box-text-color: white; --tr-odd: #3e3e3e; --tr-even: #2f2f2f; --table-outline-color: #555555; --nav-link-button-color: #4d4d4d; --nav-link-button-hover-color: #555; --nav-link-button-focus-color: #6e6e6e; --logo-path: url('logo-dark.svg'); /* Accent colors */ --blue: #1a5fb4; --green: #26a269; --yellow: #f6d32d; --orange: #c64600; --red: #a51d2d; --purple: #613583; --brown: #63452c; /* Global */ --global-fade-animation: 0.125s; --margin-size: 11.25px; --content-max-width: 900px; } @media (prefers-color-scheme: light) { :root { --main-color: #323232; --main-bg-color: #fafafa; --code-color: #dadada; --header-bg-color: #ebebeb; --header-select-color: black; --header-active-text-color: black; --header-text-color: black; --text-select-bg-color: black; --hyperlink-color: #3b80ae; --hyperlink-hover-color: #000076; --shadow-color: gray; --search-box-bg-color: #d7d7d7; --search-box-text-color: black; --tr-odd: #eaeaea; --tr-even: #f0f0f0; --table-outline-color: #c3c3c3; --nav-link-button-color: #dadada; --nav-link-button-hover-color: #b9b9b9; --nav-link-button-focus-color: #989898; --logo-path: url('logo.svg'); /* Accent colors */ --blue: #99c1f1; --green: #8ff0a4; --yellow: #f9f06b; --orange: #ffbe6f; --red: #f66151; --purple: #dc8add; --brown: #cdab8f; } } @media (prefers-contrast: more) { :root { --main-bg-color: black; --line-color: white; --hyperlink-color: lightblue; /* Global */ --nav-link-button-color: unset; --header-bg-color: unset; --shadow-color: unset; --search-box-bg-color: unset; --opacity: 1; --high-contrast-bar-color: var(--table-outline-color); --nav-link-button-color: unset; --nav-link-button-hover-color: unset; --nav-link-button-focus-color: unset; --tr-odd: unset; --tr-even: unset; --table-outline-color: var(--line-color); --search-box-text-color: var(--line-color); } } @media (prefers-contrast: more) and (prefers-color-scheme: light) { :root { --main-bg-color: white; --line-color: black; --hyperlink-color: darkblue; } } @media (prefers-reduced-motion) { :root { --global-fade-animation: 0; } } html { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; background: var(--main-bg-color); color: var(--main-color); scroll-behavior: smooth; overflow-wrap: break-word; } .logo { display: block; margin: 0 auto; max-width: 100%; max-height: 50px; pointer-events: none; content: var(--logo-path); } .nav-grid { display: grid; gap: 1.5em; max-width: 1250px; margin: 0 auto; } .nav-column-align-center { margin: auto 0; } .main-content { position: absolute; transform: translateY(-300%); margin: 0 auto; z-index: 999; } .main-content:focus { transform: translateY(0); } nav { background: var(--header-bg-color); padding: 1.25em; border-radius: 6px; box-shadow: 0px 10px 20px -15px var(--shadow-color); border-bottom: 3px solid var(--high-contrast-bar-color); font-size: larger; } main, .footer-text { margin: 0 auto; padding: 0 5vw; } main { margin-bottom: 2em; line-height: 1.45; } footer { padding: 0.5em; /* This is the simplest hack for eliminating margins */ box-shadow: 0 0 0px 8px var(--header-bg-color) ; background-color: var(--header-bg-color); bottom: 0; border-top: 3px solid var(--high-contrast-bar-color); } .backlinks-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .backlinks-row b { padding: 6px 0; } a { color: var(--hyperlink-color); transition: var(--global-fade-animation); } a:hover { color: var(--hyperlink-hover-color); } li, ul { margin-top: var(--margin-size); margin-bottom: var(--margin-size); } td { padding: .2em .4em; } tr:nth-child(odd) { background-color: var(--tr-odd); } tr:nth-child(even) { background-color: var(--tr-even); } .dim-label { opacity: var(--opacity, 0.7); } .nav-link-button { color: var(--main-color); text-decoration: none; padding: 6px 12px; border-radius: 6px; background-color: var(--nav-link-button-color); outline: .5px dotted var(--line-color); font-weight: bold; font-size: medium; } .nav-link-button:hover { color: unset; background-color: var(--nav-link-button-hover-color); opacity: 1; outline: 2px dotted var(--line-color); } .nav-link-button:focus { background-color: var(--nav-link-button-focus-color); outline: solid var(--line-color); } #searchbox { font-size: large; padding: 0.6em 1em; box-sizing: border-box; width: 100%; background-color: var(--search-box-bg-color); color: var(--search-box-text-color); border-style: none; border-radius: 6px; outline: .5px dotted var(--line-color); text-transform: capitalize; } code { font-size: larger; } pre { background-color: var(--code-color); border-radius: 3px; overflow: auto; padding: 16px; overflow: scroll; } code:not(pre code) { position: relative; padding: 0 0.5em 0; max-height: 750px; border-radius: 5px; background-color: var(--code-color); } .done { background-color: var(--green); } .todo { background-color: var(--red); } .stalled { background-color: var(--blue); } .extfw { background-color: var(--purple); } .mostly { background-color: var(--yellow); color: black; } .wip { background-color: var(--orange); } table { display: block; overflow-x: auto; border-collapse: collapse; } th, td { border: 1px solid var(--table-outline-color); } @media (min-width: 720px) { .logo { margin: initial; max-width: 350px; } .nav-grid { grid-template-columns: repeat(2, 1fr); gap: .5em; } #searchbox { padding: 0.5em 6em 0.5em 1em; width: unset; } .nav-column-align-right { justify-self: end; } } @media (min-width: 900px) { /* This is a hack to break out of the content's max-width Credit to https://css-tricks.com/full-width-containers-limited-width-parents */ .full-width { display: flex; margin-left: calc(-100vw / 2 + var(--content-max-width) / 2); margin-right: calc(-100vw / 2 + var(--content-max-width) / 2); justify-content: center; } main, .footer-text { max-width: var(--content-max-width); } }