:root { --background-color: #111; --green: #8e8; --yellow: #ee8; --red: #e88; --blue: #99f; --purple: #e8e; --white: #fff; --light-gray: #eee; --lightish-gray: #999; --gray: #666; --dark-gray: #333; } .green { color: var(--green); } .yellow { color: var(--yellow); } .red { color: var(--red); } .gray { color: var(--gray); } /* Give everything a border radius */ * { border-radius: 0.25rem; } html { background: var(--background-color); font-family: monospace; text-align: center; font-size: 20px; /* Root font size, everything scales relative to this */ color: var(--white); /* Default font color */ max-width: 50rem; /* Keep text within bounds. Not % or vw because it's tied to the text size */ margin: auto; /* Stay centered without 100% width */ } body { /* Allows us to use flex-grow 1; on main and push the footer to the bottom when the whole screen isn't filled */ display: flex; flex-direction: column; /* For the above, the whole view height minus the body's default padding (top+bottom) */ min-height: calc(100vh - 16px); } /* See notes above */ main { flex-grow: 1; } /* 0 margins remove gap between header text, h1 top margin just reduces distance to top of page */ header h1 { margin-bottom: 0; margin-top: 0.75rem; } header p { margin-top: 0; } ul { padding-left: 0; } li { list-style-type: none; /* Remove bullets */ margin: .25rem; color: var(--white); } a { color: var(--blue); text-decoration: none; transition-duration: 0.125s; } /* Anchor links will be yellow */ a[href^="#"] { color: var(--yellow); } a:hover { color: var(--purple); } @keyframes flash { 0% { background-color: var(--background-color); } 25% { background-color: var(--gray); } 50% { background-color: var(--background-color); } 75% { background-color: var(--gray); } 100% { background-color: var(--background-color); } } /* Make clicked anchors (except #top that points to ) flash when jumped to */ :target:not(#top) { animation-name: flash; animation-duration: 1.25s; animation-timing-function: linear; } hr { width: 60%; margin: 2rem auto; } /* This makes it so the hr's border on the content itself and extended part of these areas due to the margin of the contents inside them */ header p:last-child, nav ul, main a:last-child { margin-bottom: 0; } nav h2, main h2:first-child, footer p:first-child { margin-top: 0; } code { background: var(--dark-gray); padding: 0 0.25rem; word-break: break-word; /* Allow breaking long things in these when needed */ } .codeblock { display: block; text-align: left; white-space: pre; } .clickSelect { user-select: all; } /* The only divs exists to make things scrollable. Putting the border around it makes it a little clearer that it can be scrolled */ /* Center the table */ table { margin: auto; } td { padding: 0.1rem 0.75rem; } /* Makes pictures stay inline and doesn't allow text to wrap so all lines stay at the same height */ div, figure { white-space: nowrap; } /* Some common options for scrollable stuff */ div, figure, .codeblock { padding: 1rem; margin: 0; /* Scroll when we don't have enough horizontal space */ overflow: auto; /* Putting a border around it makes it a little clearer that these can be scrolled */ border: 1px solid var(--lightish-gray); } main img { /* Width and height are set like this so vertical and horizontal pictures get forced to the same height, and keep aspect ratio with whatever width they please */ width: auto; height: 15rem; } /* These have a