/* Heavily modified from the wonderful MVP.css v1.6.2 - https://github.com/andybrewer/mvp */ @import 'monochrome.css'; /* You can remove this if you don't do any code in your project. */ @import 'theme.css'; body * { /* This fixes the classic CSS braindead decision that children can explode out * of their parent's box. */ box-sizing: border-box; } /* Layout */ article aside { background: var(--color-secondary-accent); border-left: 4px solid var(--color-secondary); padding: 0.01rem 0.8rem; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-family); line-height: var(--line-height); margin: 0; overflow-x: hidden; } header { background-color: var(--color-bg-secondary); display: flex; justify-content: center; text-align: var(--justify-important); } header, main { margin: 0 auto; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 1rem; } main header { background-color: var(--color-bg); display: block; padding: 1rem; } main { width: 100%; max-width: var(--width-content); min-height: 80vh; margin-bottom: 2rem; } footer { background-color: var(--color-bg-tertiary); padding:0px; width: 100%; display: flex; flex-direction: row; justify-content: space-evenly; } footer aside { background-color: var(--color-bg-secondary); width: 33%; padding: 1em; } footer aside h4 { margin-top: 0px; margin-bottom: 0.5rem; } hr { background-color: var(--color-bg-secondary); border: none; height: 1px; margin: 4rem 0; } section { display: flex; flex-wrap: wrap; justify-content: var(--justify-important); } section aside { border: 1px solid var(--color-bg-secondary); border-radius: var(--border-radius); box-shadow: var(--box-shadow) var(--color-shadow); margin: 1rem; padding: 1.25rem; width: var(--width-card); } section aside:hover { box-shadow: var(--box-shadow) var(--color-bg-secondary); } section aside img { max-width: 100%; } [hidden] { display: none; } /* Headers */ article header, div header, main header { padding-top: 0; } header a b, header a em, header a i, header a strong { margin-left: 0.5rem; margin-right: 0.5rem; } header nav a { font-size: var(--font-header-nav); text-decoration-line: none; text-decoration-style: none; } header nav img { margin: 1rem 0; } section header { padding-top: 0; width: 100%; } ol li, ul li { padding: 0.2rem 0; } /* Nav */ nav { align-items: center; display: flex; font-weight: bold; justify-content: space-between; max-width: var(--width-content); width: 100%; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline-block; margin: 0 0.5rem; position: relative; text-align: left; } /* Nav Dropdown */ nav ul li ul { background: var(--color-bg); border: 1px solid var(--color-bg-secondary); border-radius: var(--border-radius); box-shadow: var(--box-shadow) var(--color-shadow); display: none; height: auto; left: -2px; padding: 0.5rem 1rem; position: absolute; top: 1.7rem; white-space: nowrap; width: auto; } nav ul li:hover ul { display: block; } nav ul li ul li, nav ul li ul li a { display: block; } /* Typography */ code, samp { background-color: var(--color-bg-secondary); border-radius: var(--border-radius); color: var(--color-text); display: inline-block; margin: 0 0.1rem; padding: 0 0.5rem; } code { font-size: 1.3em; } details { margin: 1.3rem 0; } details summary { font-weight: bold; cursor: pointer; } h1, h2, h3, h4, h5, h6 { line-height: var(--line-height); font-size: var(--font-heading-size); font-family: var(--font-computer); font-weight: var(--font-heading-weight); } mark { padding: 0.1rem; } p { padding: 0; } pre code, pre samp { display: block; padding: 0.5rem 2rem; white-space: pre-wrap; } small { color: var(--color-text-secondary); } sup { background-color: var(--color-secondary); border-radius: var(--border-radius); color: var(--color-bg); font-size: xx-small; font-weight: bold; margin: 0.2rem; padding: 0.2rem 0.3rem; position: relative; top: -2px; } /* Links */ a { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--color-inactive); color: var(--color-secondary); } a:hover { filter: brightness(var(--hover-brightness)); text-decoration-style: solid; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration-line: none; text-decoration-style: none; } a b, a em, a i, a strong, button, input[type="button"], input[type="submit"] { border-radius: var(--border-radius); display: inline-block; font-weight: bold; line-height: var(--line-height); padding: 0.5rem 1rem; } button, input[type="button"], input[type="submit"] { font-family: var(--font-family); font-size: var(--font-button-size); } button:hover, input[type="button"]:hover, input[type="submit"]:hover { cursor: pointer; filter: brightness(var(--hover-brightness)); } a b, a strong, button, input[type="button"], input[type="submit"] { background-color: var(--color); border: 2px solid var(--color); color: var(--color-bg); } a em, a i { border: 2px solid var(--color); border-radius: var(--border-radius); color: var(--color); display: inline-block; padding: 1rem 2rem; } button > a { display: flex; justify-content: space-evenly; width: 100%; color: var(--color-text-inverted); text-decoration: none !important; filter: unset !important; } /* Images */ img { /* This fixes images that have a small margin on the bottom due to "descenders" * from the 1990s when HTML was all about text and images were considered text. */ display: block; width: 100%; } figure { margin: 0; padding: 0; } figure img { max-width: 100%; } figure figcaption { color: var(--color-text-secondary); } /* Forms */ label { font-weight: bold; margin-bottom: 0.2rem; } button[disabled]:hover { filter: none; } form { display: flex; max-width: var(--width-card-wide); min-width: var(--width-card); text-align: var(--justify-normal); background-color: var(--color-bg); flex-direction: column; } form buttons { display: flex; justify-content: space-around; } form error { color: var(--color-error); font-size: 0.8em; } form card top { background-color: var(--color-bg-tertiary); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem; } form card middle { padding-top: 1rem; padding-bottom: 1rem; } input, label, select, textarea { display: block; font-size: var(--font-text-size); width: 100%; } input[type="checkbox"], input[type="radio"] { display: inline-block; width: 1.5rem; height: 1.5rem; } input[type="checkbox"] + label, input[type="radio"] + label { display: inline-block; position: relative; top: 1px; } input, select, textarea { border: 1px solid var(--color-input-border); background-color: var(--color-input-bg); border-radius: var(--border-radius); margin-bottom: 1rem; padding: 0.4rem 0.8rem; } input[readonly], textarea[readonly] { background-color: var(--color-bg-secondary); } form buttons input { width: 7rem; text-align: center; } button:disabled, input:disabled { background: var(--color-bg-secondary); color: var(--color-text-secondary); cursor: not-allowed; } /* Tables */ table { border: 1px solid var(--color-bg-secondary); border-radius: var(--border-radius); border-spacing: 0; max-width: 100%; overflow-x: auto; padding: 0; } table td, table th, table tr { padding: 0.4rem 0.8rem; text-align: var(--justify-important); } table thead { background-color: var(--color); border-collapse: collapse; border-radius: var(--border-radius); color: var(--color-bg); margin: 0; padding: 0; } table thead th:first-child { border-top-left-radius: var(--border-radius); } table thead th:last-child { border-top-right-radius: var(--border-radius); } table thead th:first-child, table tr td:first-child { text-align: var(--justify-normal); } table tr:nth-child(even) { background-color: var(--color-bg-secondary); } /* Quotes */ blockquote { display: block; font-size: x-large; line-height: var(--line-height); margin: 1rem auto; max-width: var(--width-card-medium); padding: 1.5rem 1rem; text-align: var(--justify-blockquote); } blockquote footer { color: var(--color-text-secondary); background-color: var(--color-bg-secondary); display: block; font-size: small; text-align: right; line-height: var(--line-height); padding: 1.5rem 0; } /* Have to place this here because svelte's global parsing doesn't work on sub-CSS inside media. */ @media only screen and (max-width: 600px) { code-view { flex-direction: column !important; } code-view html-view { max-width: 100% !important; } phone-warn { display: flex !important; } } .pulse { border-radius: var(--border-radius); box-shadow: 0 0 0 0 var(--color-pulse-1); transform: scale(1); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--color-pulse-2); } 70% { transform: scale(1); box-shadow: 0 0 0 10px var(--color-pulse-3); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--color-pulse-4); } } pre code { background-color: var(--value1); padding: 1rem; color: var(--value8); font-size: 1.1em; border-radius: var(--border-radius); counter-reset: line; overflow-x: auto; outline: 1px solid var(--value3); } pre code div { display: block; white-space: pre; } pre code div::before { counter-increment: line; content: counter(line); display: inline-block; padding: 0 0.3rem; margin-right: 0.5rem; border-right: 1px solid var(--color-inactive); min-width: 3ch; text-align: right; color: var(--color-inactive); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } pre code span.error { color: hsl(0, 100%, 80%); text-decoration: underline; } /** Additional components added by Zed A. Shaw. */ tile { padding: 0.5rem; display: flex; flex-direction: row; border: 1px solid #eee; } tile middle { padding-left: 0.5rem; padding-right: 0.5rem; display: flex; flex-direction: column; justify-content: flex-start; flex-grow: 3; } tile middle h4 { margin-top: 0; margin-bottom: 0; } tile right { flex-shrink: 0; } tile right button { padding: 0.2rem; } card { border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: var(--box-shadow) var(--color-shadow); display: flex; flex-direction: column; width: 100%; } card top img { padding: 0; margin: 0; border-radius: var(--border-radius) var(--border-radius) 0 0; } card middle { padding-left: 0.5rem; padding-right: 0.5rem; display: flex; flex-direction: column; justify-content: flex-start; } card bottom { border-radius: 0 0 var(--border-radius) var(--border-radius); border: 0; box-shadow: unset; } card middle h4 { margin: 0; } card bottom button-group > button:first-child { border-radius: 0 0 0 var(--border-radius); } card bottom button-group > button:last-child:first-child { border-radius: 0 0 0 0; } card bottom button-group > button:last-child { border-radius: 0 0 var(--border-radius) 0; } card bottom button-group > button:only-child { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; } button-group { flex-shrink: 0; display: flex; flex-direction: row; justify-content: space-evenly; } button-group > button { display: flex; margin: 0; padding: 0.5em; width: 100%; justify-content: space-evenly; position: relative; border-radius: 0 0 0 0; } button-group > button:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); background-color: var(--color-bg-secondary); color: var(--color); border: 2px solid var(--color-bg-inverted); } button-group > button:first-child > a { color: var(--color) !important; } button-group > button:last-child { border-radius: 0 var(--border-radius) var(--border-radius) 0; } button-group > button:last-child:first-child { border-radius: 0 0 var(--border-radius) var(--border-radius); background-color: var(--color-bg-inverted); color: var(--color-text-inverted); } button-group > button:last-child:first-child > a { color: var(--color-text-inverted) !important; } button-group.vertical { flex-direction: column; } button-group.vertical > button:first-child { border-radius: var(--border-radius) var(--border-radius) 0 0; } button-group.vertical > button:last-child:first-child { border-radius: 0 0 0 0; } button-group.vertical > button:last-child { border-radius: 0 0 var(--border-radius) var(--border-radius); } toast { background-color: var(--color-error); padding: 1rem; color: var(--color-bg); margin-top: 0.5rem; box-shadow: 5px 5px 5px var(--value2); } toast-list { box-sizing: border-box; display: none; flex-direction: column-reverse; max-width: 400px; position: fixed; padding: 1rem; } toast-list.reverse { flex-direction: column; } toast-list.bottom { bottom: 0; } toast-list.top { top: 0; } toast-list.left { left: 0; } toast-list.right { right: 0; } toast-list.active { display: flex; } tabs { margin-top: 1em; /* added so you can see it in the display */ display: flex; justify-content: space-evenly; } tabs > a { text-decoration: none; color: var(--color-text); border-bottom: 1px solid var(--color-accent); border-width: thin; width: 100%; text-align: center; padding: 1rem 0 0.5rem; font-size: var(--font-heading-size); user-select: none; } tabs > a:hover { box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; text-decoration: none; } tabs > a.active { background-color: var(--color-bg-secondary); border-top: 1px solid var(--color-border-tabs); border-left: 1px solid var(--color-border-tabs); border-right: 1px solid var(--color-border-tabs); } tabs > a.active:hover { filter: unset; background-color: var(--color-bg-secondary); } tabs.vertical { flex-direction: column; } tabs > a.active + component { padding-top: 0.5rem; padding-bottom: 0.5rem; } tabs + component { padding-top: 0.5rem; } badge { background-color: var(--color-bg-secondary); border-radius: 50%; width: var(--width-badge); height: var(--width-badge); min-width: var(--width-badge); min-height: var(--width-badge); max-width: var(--width-badge); max-height: var(--width-badge); font-size: var(--font-size-badge); display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-border); } .top-right { position: absolute; top: 5px; right: 5px; } .bottom-right { position: absolute; bottom: 5px; right: 5px; } .top-left { position: absolute; top: 5px; left: 5px; } .bottom-left { position: absolute; bottom: 5px; left: 5px; } callout { background-color: var(--color-bg-inverted); color: var(--color-text-inverted); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 1rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow) var(--color-shadow); margin-bottom: 0.5rem; } callout a { color: var(--color-text-inverted); } callout a:hover { color: var(--color-text-inverted); text-decoration: underline; } callout.alert { color: var(--invert-red); background-color: var(--color-error); } callout.error { color: var(--invert-red); background-color: var(--color-error); } callout.success { color: var(--invert-green); background-color: var(--color-good); } callout.warning { color: var(--invert-orange); background-color: var(--color-warning); } callout.info { color: var(--color-text-inverted); background-color: var(--color-info); } /* Use this around words you want to tooltip. */ word { position: relative; text-decoration: underline dotted var(--color-inactive); } tooltip { display: block; opacity: 0; position: absolute; color: var(--color); background-color: var(--color-bg-secondary); padding: 0.5rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow) var(--color-box-shadow); border: 1px solid black; transform: translate(90%, -90%); top: 0; right: 0; z-index: 100; font-size: 0.8em; font-weight: normal; } *:hover > tooltip { display: block; transition: opacity 0.5s ease-in-out; opacity: 1; } tooltip.top-left { left: 0; right: unset; transform: translate(-90%, -90%); } tooltip.bottom-left { bottom: 0; left: 0; right: unset; top: unset; transform: translate(-90%, 90%); } tooltip.bottom-right { bottom: 0; top: unset; transform: translate(90%, 90%); } tooltip.right { top: unset; transform: translate(90%); } tooltip.left { top: unset; right: unset; left: 0; transform: translate(-90%); } tooltip.top { top: 0; right: unset; transform: translate(0%, -90%); } tooltip.bottom { bottom: 0; top: unset; right: unset; transform: translate(0%, 90%); } progress-meter { background-color: var(--color-bg-tertiary); width: 50%; display: flex; } progress-meter bar { background-color: var(--color-bg-inverted); color: var(--color-text-inverted); padding: 0.5rem; } /* Flipper is used to put two components and let them * flip in and out on a rotation axis. */ flipper { background-color: transparent; perspective: 1000px; display: block; width: min-content; min-height: min-content; } flipper inner { position: relative; transition: transform 0.5s; transform-style: preserve-3d; display: block; width: 100%; height: 100%; } flipper.flipped inner { transform: rotateY(180deg); position: relative; } flipper .front, .back { -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } flipper .front { min-height: 11rem; } flipper .back { transform: rotateY(180deg); min-height: 11rem; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* Switch implementation, mostly as a demo. */ label.switch { width: 4rem; height: 2rem; border: 1px solid var(--color-bg-inverted); display: flex; flex-direction: row; align-items: center; padding-left: 0.2rem; padding-right: 0.2rem; justify-content: space-between; } label.switch::after { width: 1.5rem; height: 1.5rem; background: var(--color-bg-tertiary); content: ""; } input + label.switch { display: flex; } input:checked + label.switch { flex-direction: row-reverse; background: var(--color-bg-inverted); background: var(--color-text-inverted); } input:checked + label.switch > inactive { display: none; } input:checked + label.switch > active { display: block; } label.switch > active { display: flex; flex-grow: 2; align-items: center; text-align: center; user-select: none; } label.switch > inactive { display: flex; flex-grow: 2; align-items: center; text-align: center; } label.switch > inactive { display: block; } label.switch > active { display: none; } input.switch { display: none; } label.medium { width: 6rem; height: 3rem; font-size: 1.5rem; } label.medium::after { width: 2.25rem; height: 2.25rem; } label.large { width: 8rem; height: 4rem; font-size: 2rem; } label.large::after { width: 3rem; height: 3rem; } hero { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; margin: 0; padding: 0; overflow: hidden; } hero figure { width: 100%; margin: 0; padding: 0; } hero > cover { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; font-size: 4vw; color: var(--color-overlay-text); transition: background 0.5s ease-out; } hero cover h1 { margin-top: 0; margin-bottom: 0; } hero cover a i { color: var(--color-text-inverted); background-color: var(--color-bg-inverted); border: 2px solid var(--value0); text-shadow: none; font-size: 0.5em; } hero.middle { background-color: var(--color-bg-tertiary); padding-top: 5rem; padding-bottom: 5rem; box-shadow: 0 8px 6px -6px black; border-radius: var(--border-radius); } hero.middle p { text-align: justify; margin-left: 3rem; margin-right: 3rem; } hero.middle button { padding: 2rem; margin-bottom: 2rem; box-shadow: var(--box-shadow) black; } hero.middle section aside { background-color: var(--color-bg); } breadcrumb { background-color: var(--color-bg-tertiary); display: flex; margin-top: -1rem; margin-left: -0.5rem; margin-right: -0.5rem; margin-bottom: 1rem; padding: 0.3rem; } .stacked { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; grid-template-areas: "cover"; } .stacked .layer { width: 100%; position: relative; grid-area: cover; } .stacked .top { z-index: 10; } /* Taken from https://css-tricks.com/aspect-ratio-boxes/#using-custom-properties */ [style*="--aspect-ratio"] > img { height: auto; } [style*="--aspect-ratio"] { position: relative; } [style*="--aspect-ratio"]::before { content: ""; display: block; padding-bottom: calc(100% / (var(--aspect-ratio))); } [style*="--aspect-ratio"] > :first-child { width: 100%; position: absolute; top: 0; left: 0; height: 100%; } /* Specific to the client/Layout.svelte and rendered/Layout.svelte */ main { display: flex; flex-direction: column; padding-top: 1rem; } main.centered { display: flex; flex-direction: column; align-items: center; padding-top: 3rem; } main.fullscreen { display: flex; flex-direction: row !important; padding: 0px !important; margin: 0px !important; height: 100vh !important; max-height: 100vh !important; min-height: 100vh !important; } content { font-size: var(--font-size); } /* FILE ARCHIVED ON 18:56:46 Jun 03, 2022 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 11:43:13 Jul 12, 2023. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 86.018 exclusion.robots: 0.104 exclusion.robots.policy: 0.091 RedisCDXSource: 1.311 esindex: 0.01 LoadShardBlock: 57.203 (3) PetaboxLoader3.datanode: 85.771 (4) load_resource: 122.511 PetaboxLoader3.resolve: 65.415 */