From ba76e77d935998e4b128053dcc61d2ed4884cdda Mon Sep 17 00:00:00 2001 From: soaos Date: Fri, 21 Nov 2025 21:14:12 -0500 Subject: zola migration --- static/98.css | 1040 ++++++++++++++++++++ static/assets/UnifontExMono.woff2 | Bin 0 -> 2002128 bytes static/assets/badges/cookies.png | Bin 0 -> 515 bytes static/assets/badges/go2hell.gif | Bin 0 -> 1577 bytes static/assets/badges/indieweb.png | Bin 0 -> 524 bytes static/assets/badges/javascript.png | Bin 0 -> 412 bytes static/assets/badges/lynx.gif | Bin 0 -> 3303 bytes static/assets/badges/midi_files_now.gif | Bin 0 -> 1395 bytes static/assets/badges/powered-by-debian.gif | Bin 0 -> 904 bytes static/assets/badges/soaos.png | Bin 0 -> 2563 bytes static/assets/bg.jpg | Bin 0 -> 31580 bytes static/assets/construction.gif | Bin 0 -> 9933 bytes static/assets/icon/button-down-active.svg | 5 + static/assets/icon/button-down.svg | 8 + static/assets/icon/button-left.svg | 8 + static/assets/icon/button-right.svg | 8 + static/assets/icon/button-up.svg | 8 + static/assets/icon/checkmark-disabled.svg | 3 + static/assets/icon/checkmark.svg | 3 + static/assets/icon/close.svg | 3 + static/assets/icon/groupbox-border.svg | 4 + static/assets/icon/help.svg | 8 + static/assets/icon/indicator-horizontal.svg | 6 + .../assets/icon/indicator-rectangle-horizontal.svg | 6 + static/assets/icon/maximize-disabled.svg | 4 + static/assets/icon/maximize.svg | 3 + static/assets/icon/minimize.svg | 3 + static/assets/icon/radio-border-disabled.svg | 7 + static/assets/icon/radio-border.svg | 8 + static/assets/icon/radio-dot-disabled.svg | 3 + static/assets/icon/radio-dot.svg | 3 + static/assets/icon/restore.svg | 10 + static/assets/icon/scrollbar-background.svg | 4 + static/assets/icon/sunken-panel-border.svg | 11 + static/favicon.png | Bin 0 -> 4287 bytes static/hell.css | 102 ++ static/index.css | 27 + static/style.css | 184 ++++ static/style.css.bak | 224 +++++ 39 files changed, 1703 insertions(+) create mode 100644 static/98.css create mode 100644 static/assets/UnifontExMono.woff2 create mode 100644 static/assets/badges/cookies.png create mode 100644 static/assets/badges/go2hell.gif create mode 100644 static/assets/badges/indieweb.png create mode 100644 static/assets/badges/javascript.png create mode 100644 static/assets/badges/lynx.gif create mode 100644 static/assets/badges/midi_files_now.gif create mode 100644 static/assets/badges/powered-by-debian.gif create mode 100644 static/assets/badges/soaos.png create mode 100644 static/assets/bg.jpg create mode 100644 static/assets/construction.gif create mode 100644 static/assets/icon/button-down-active.svg create mode 100644 static/assets/icon/button-down.svg create mode 100644 static/assets/icon/button-left.svg create mode 100644 static/assets/icon/button-right.svg create mode 100644 static/assets/icon/button-up.svg create mode 100644 static/assets/icon/checkmark-disabled.svg create mode 100644 static/assets/icon/checkmark.svg create mode 100644 static/assets/icon/close.svg create mode 100644 static/assets/icon/groupbox-border.svg create mode 100644 static/assets/icon/help.svg create mode 100644 static/assets/icon/indicator-horizontal.svg create mode 100644 static/assets/icon/indicator-rectangle-horizontal.svg create mode 100644 static/assets/icon/maximize-disabled.svg create mode 100644 static/assets/icon/maximize.svg create mode 100644 static/assets/icon/minimize.svg create mode 100644 static/assets/icon/radio-border-disabled.svg create mode 100644 static/assets/icon/radio-border.svg create mode 100644 static/assets/icon/radio-dot-disabled.svg create mode 100644 static/assets/icon/radio-dot.svg create mode 100644 static/assets/icon/restore.svg create mode 100644 static/assets/icon/scrollbar-background.svg create mode 100644 static/assets/icon/sunken-panel-border.svg create mode 100644 static/favicon.png create mode 100644 static/hell.css create mode 100644 static/index.css create mode 100644 static/style.css create mode 100644 static/style.css.bak (limited to 'static') diff --git a/static/98.css b/static/98.css new file mode 100644 index 0000000..8012d93 --- /dev/null +++ b/static/98.css @@ -0,0 +1,1040 @@ +/*! 98.css v0.1.21 - https://github.com/jdan/98.css */ +/** + * 98.css + * Copyright (c) 2020 Jordan Scales + * https://github.com/jdan/98.css/blob/main/LICENSE + */ + +@font-face { + font-family: unifont; + src: url("/assets/UnifontExMono.woff2"); +} + +:root { + /* Color */ + --text-color: var(--fg); + --surface: var(--bg2); + --button-highlight: var(--bg4); + --button-face: var(--bg3); + --button-shadow: var(--bg-dim); + --window-frame: #0a0a0a; + --dialog-blue: var(--bg-blue); + --dialog-blue-light: var(--blue); + --dialog-gray: #808080; + --dialog-gray-light: #b5b5b5; + --link-blue: var(--blue); + + /* Spacing */ + --element-spacing: 8px; + --grouped-button-spacing: 4px; + --grouped-element-spacing: 6px; + --radio-width: 12px; + --checkbox-width: 13px; + --radio-label-spacing: 6px; + --range-track-height: 4px; + --range-spacing: 10px; + + /* Some detailed computations for radio buttons and checkboxes */ + --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing); + --radio-total-width: calc(var(--radio-total-width-precalc)); + --radio-left: calc(-1 * var(--radio-total-width-precalc)); + --radio-dot-width: 4px; + --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2); + --radio-dot-left: calc( + -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - + var(--radio-dot-width) / 2 + ); + + --checkbox-total-width-precalc: var(--checkbox-width) + + var(--radio-label-spacing); + --checkbox-total-width: calc(var(--checkbox-total-width-precalc)); + --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc)); + --checkmark-width: 7px; + --checkmark-left: 3px; + + /* Borders */ + --border-width: 1px; + --border-raised-outer: + inset -1px -1px var(--window-frame), inset 1px 1px var(--button-highlight); + --border-raised-inner: + inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-face); + --border-sunken-outer: + inset -1px -1px var(--button-highlight), inset 1px 1px var(--window-frame); + --border-sunken-inner: + inset -2px -2px var(--button-face), inset 2px 2px var(--button-shadow); + --default-button-border-raised-outer: + inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame); + --default-button-border-raised-inner: + inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow), + inset 3px 3px var(--button-face); + --default-button-border-sunken-outer: + inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame); + --default-button-border-sunken-inner: + inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow), + inset -3px -3px var(--button-face); + + /* Window borders flip button-face and button-highlight */ + --border-window-outer: + inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face); + --border-window-inner: + inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight); + + /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */ + --border-field: + inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-shadow), + inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame); + --border-status-field: + inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow); + + /* Tabs */ + --border-tab: + inset -1px 0 var(--window-frame), inset 1px 1px var(--button-face), + inset -2px 0 var(--button-shadow), inset 2px 2px var(--button-highlight); +} + +@font-face { + font-family: "Pixelated MS Sans Serif"; + src: url("fonts/converted/ms_sans_serif.woff") format("woff"); + src: url("fonts/converted/ms_sans_serif.woff2") format("woff2"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Pixelated MS Sans Serif"; + src: url("fonts/converted/ms_sans_serif_bold.woff") format("woff"); + src: url("fonts/converted/ms_sans_serif_bold.woff2") format("woff2"); + font-weight: bold; + font-style: normal; +} + +body { + font-family: unifont; + font-size: 1rem; + color: var(--text-color); +} + +button, +label, +input, +legend, +textarea, +select, +option, +table, +ul.tree-view, +.window, +.title-bar, +li[role="tab"] { + font-family: unifont; + -webkit-font-smoothing: none; + font-size: 1rem; +} + +h1 { + font-size: 2rem; +} + +h2 { + font-size: 1rem; +} + +h3 { + font-size: 1rem; +} + +h4 { + font-size: 1rem; +} + +u { + text-decoration: none; + border-bottom: 0.5px solid #222222; +} + +button, +input[type="submit"], +input[type="reset"] { + box-sizing: border-box; + border: none; + color: transparent; + text-shadow: 0 0 var(--text-color); + background: var(--surface); + box-shadow: var(--border-raised-outer), var(--border-raised-inner); + border-radius: 0; + + min-width: 75px; + min-height: 23px; + padding: 0 12px; +} + +button.default, +input[type="submit"].default, +input[type="reset"].default { + box-shadow: + var(--default-button-border-raised-outer), + var(--default-button-border-raised-inner); +} + +.vertical-bar { + width: 4px; + height: 20px; + background: #c0c0c0; + box-shadow: var(--border-raised-outer), var(--border-raised-inner); +} + +button:not(:disabled):active, +input[type="submit"]:not(:disabled):active, +input[type="reset"]:not(:disabled):active { + box-shadow: var(--border-sunken-outer), var(--border-sunken-inner); + text-shadow: 1px 1px var(--text-color); +} + +button.default:not(:disabled):active, +input[type="submit"].default:not(:disabled):active, +input[type="reset"].default:not(:disabled):active { + box-shadow: + var(--default-button-border-sunken-outer), + var(--default-button-border-sunken-inner); +} + +@media (not(hover)) { + button:not(:disabled):hover, + input[type="submit"]:not(:disabled):hover, + input[type="reset"]:not(:disabled):hover { + box-shadow: var(--border-sunken-outer), var(--border-sunken-inner); + } +} + +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus { + outline: 1px dotted #000000; + outline-offset: -4px; +} + +button::-moz-focus-inner, +input[type="submit"]::-moz-focus-inner, +input[type="reset"]::-moz-focus-inner { + border: 0; +} + +:disabled, +:disabled + label, +input[readonly], +input[readonly] + label { + color: var(--button-shadow); +} + +button:disabled, +input[type="submit"]:disabled, +input[type="reset"]:disabled, +:disabled + label { + text-shadow: 1px 1px 0 var(--button-highlight); +} + +.window { + box-shadow: var(--border-window-outer), var(--border-window-inner); + background: var(--surface); + padding: 3px; +} + +.title-bar { + background: linear-gradient(90deg, var(--bg0), var(--green)); + padding: 3px 2px 3px 3px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.title-bar.inactive { + background: linear-gradient( + 90deg, + var(--dialog-gray), + var(--dialog-gray-light) + ); +} + +.title-bar-text { + font-weight: bold; + color: var(--fg); + letter-spacing: 0; + margin-right: 24px; +} + +.title-bar-controls { + display: flex; +} + +.title-bar-controls button { + padding: 0; + display: block; + min-width: 16px; + min-height: 14px; +} + +.title-bar-controls button:active { + padding: 0; +} + +.title-bar-controls button:focus { + outline: none; +} + +.title-bar-controls button[aria-label="Minimize"], +.title-bar-controls button[aria-label].minimize { + background-image: url("/assets/icon/minimize.svg"); + background-repeat: no-repeat; + background-position: bottom 3px left 4px; +} + +.title-bar-controls button[aria-label="Maximize"], +.title-bar-controls button[aria-label].maximize { + background-image: url("/assets/icon/maximize.svg"); + background-repeat: no-repeat; + background-position: top 2px left 3px; +} + +.title-bar-controls button[aria-label="Maximize"]:disabled, +.title-bar-controls button[aria-label].maximize:disabled { + background-image: url("/assets/icon/maximize-disabled.svg"); + background-repeat: no-repeat; + background-position: top 2px left 3px; +} + +.title-bar-controls button[aria-label="Restore"], +.title-bar-controls button[aria-label].restore { + background-image: url("/assets/icon/restore.svg"); + background-repeat: no-repeat; + background-position: top 2px left 3px; +} + +.title-bar-controls button[aria-label="Help"], +.title-bar-controls button[aria-label].help { + background-image: url("/assets/icon/help.svg"); + background-repeat: no-repeat; + background-position: top 2px left 5px; +} + +.title-bar-controls button[aria-label="Close"], +.title-bar-controls button[aria-label].close { + margin-left: 2px; + background-image: url("/assets/icon/close.svg"); + background-repeat: no-repeat; + background-position: top 3px left 4px; +} + +.status-bar { + margin: 0px 1px; + display: flex; + gap: 1px; +} + +.status-bar-field { + box-shadow: var(--border-status-field); + flex-grow: 1; + padding: 2px 3px; + margin: 0; +} + +.window-body { + margin: var(--element-spacing); +} + +fieldset { + border-image: url("/assets/icon/groupbox-border.svg") 2; + padding: calc(2 * var(--border-width) + var(--element-spacing)); + padding-block-start: var(--element-spacing); + margin: 0; +} + +legend { + background: var(--surface); +} + +.field-row { + display: flex; + align-items: center; +} + +[class^="field-row"] + [class^="field-row"] { + margin-top: var(--grouped-element-spacing); +} + +.field-row > * + * { + margin-left: var(--grouped-element-spacing); +} + +.field-row-stacked { + display: flex; + flex-direction: column; +} + +.field-row-stacked * + * { + margin-top: var(--grouped-element-spacing); +} + +label { + display: inline-flex; + align-items: center; + user-select: none; +} + +input[type="radio"], +input[type="checkbox"] { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + margin: 0; + background: 0; + position: fixed; + opacity: 0; + border: none; +} + +input[type="radio"] + label, +input[type="checkbox"] + label { + line-height: 13px; +} + +input[type="radio"] + label { + position: relative; + margin-left: var(--radio-total-width); +} + +input[type="radio"] + label::before { + content: ""; + position: absolute; + top: 0; + left: calc(-1 * (var(--radio-total-width-precalc))); + display: inline-block; + width: var(--radio-width); + height: var(--radio-width); + margin-right: var(--radio-label-spacing); + background: url("/assets/icon/radio-border.svg"); +} + +input[type="radio"]:active + label::before { + background: url("/assets/icon/radio-border-disabled.svg"); +} + +input[type="radio"]:checked + label::after { + content: ""; + display: block; + width: var(--radio-dot-width); + height: var(--radio-dot-width); + top: var(--radio-dot-top); + left: var(--radio-dot-left); + position: absolute; + background: url("/assets/icon/radio-dot.svg"); +} + +input[type="radio"]:focus + label, +input[type="checkbox"]:focus + label { + outline: 1px dotted #000000; +} + +input[type="radio"][disabled] + label::before { + background: url("/assets/icon/radio-border-disabled.svg"); +} + +input[type="radio"][disabled]:checked + label::after { + background: url("/assets/icon/radio-dot-disabled.svg"); +} + +input[type="checkbox"] + label { + position: relative; + margin-left: var(--checkbox-total-width); +} + +input[type="checkbox"] + label::before { + content: ""; + position: absolute; + left: calc(-1 * (var(--checkbox-total-width-precalc))); + display: inline-block; + width: var(--checkbox-width); + height: var(--checkbox-width); + background: var(--button-highlight); + box-shadow: var(--border-field); + margin-right: var(--radio-label-spacing); +} + +input[type="checkbox"]:active + label::before { + background: var(--surface); +} + +input[type="checkbox"]:checked + label::after { + content: ""; + display: block; + width: var(--checkmark-width); + height: var(--checkmark-width); + position: absolute; + left: calc( + -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left) + ); + background: url("/assets/icon/checkmark.svg"); +} + +input[type="checkbox"][disabled] + label::before { + background: var(--surface); +} + +input[type="checkbox"][disabled]:checked + label::after { + background: url("/assets/icon/checkmark-disabled.svg"); +} + +input[type="text"], +input[type="password"], +input[type="email"], +input[type="url"], +input[type="tel"], +input[type="number"], +input[type="search"], +select, +textarea { + padding: 3px 4px; + border: none; + box-shadow: var(--border-field); + background-color: var(--button-highlight); + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; +} + +input[type="text"], +input[type="password"], +input[type="email"], +input[type="url"], +input[type="tel"], +input[type="search"], +select { + height: 21px; +} +input[type="number"] { + /* need this 1 pixel to fit the spinner controls in box */ + height: 22px; +} +/* clears the ‘X’ from Internet Explorer */ +input[type="search"]::-ms-clear { + display: none; + width: 0; + height: 0; +} +input[type="search"]::-ms-reveal { + display: none; + width: 0; + height: 0; +} +/* clears the ‘X’ from Chrome */ +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; +} + +input[type="text"], +input[type="password"], +input[type="email"], +input[type="url"], +input[type="tel"], +input[type="number"], +input[type="search"] { + /* For some reason descenders are getting cut off without this */ + line-height: 2; +} + +input[type="email"]:disabled, +input[type="url"]:disabled, +input[type="tel"]:disabled, +input[type="password"]:disabled, +input[type="text"]:disabled, +input[type="number"]:disabled, +input[type="search"]:disabled, +input[type="email"]:read-only, +input[type="url"]:read-only, +input[type="tel"]:read-only, +input[type="password"]:read-only, +input[type="text"]:read-only, +input[type="number"]:read-only, +input[type="search"]:read-only, +textarea:disabled { + background-color: var(--surface); +} + +select { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + position: relative; + padding-right: 32px; + background-image: url("/assets/icon/button-down.svg"); + background-position: top 2px right 2px; + background-repeat: no-repeat; + border-radius: 0; +} + +select:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="tel"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +textarea:focus { + outline: none; +} + +input[type="range"] { + -webkit-appearance: none; + width: 100%; + background: transparent; +} + +input[type="range"]:focus { + outline: none; +} + +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 21px; + width: 11px; + background: url("/assets/icon/indicator-horizontal.svg"); + transform: translateY(-8px); + box-shadow: none; + border: none; +} + +input[type="range"].has-box-indicator::-webkit-slider-thumb { + background: url("/assets/icon/indicator-rectangle-horizontal.svg"); + transform: translateY(-10px); +} + +input[type="range"]::-moz-range-thumb { + height: 21px; + width: 11px; + border: 0; + border-radius: 0; + background: url("/assets/icon/indicator-horizontal.svg"); + transform: translateY(2px); +} + +input[type="range"].has-box-indicator::-moz-range-thumb { + background: url("/assets/icon/indicator-rectangle-horizontal.svg"); + transform: translateY(0px); +} + +input[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 2px; + box-sizing: border-box; + background: black; + border-right: 1px solid grey; + border-bottom: 1px solid grey; + box-shadow: + 1px 0 0 white, + 1px 1px 0 white, + 0 1px 0 white, + -1px 0 0 darkgrey, + -1px -1px 0 darkgrey, + 0 -1px 0 darkgrey, + -1px 1px 0 white, + 1px -1px darkgrey; +} + +input[type="range"]::-moz-range-track { + width: 100%; + height: 2px; + box-sizing: border-box; + background: black; + border-right: 1px solid grey; + border-bottom: 1px solid grey; + box-shadow: + 1px 0 0 white, + 1px 1px 0 white, + 0 1px 0 white, + -1px 0 0 darkgrey, + -1px -1px 0 darkgrey, + 0 -1px 0 darkgrey, + -1px 1px 0 white, + 1px -1px darkgrey; +} + +.is-vertical { + display: inline-block; + width: 4px; + height: 150px; + transform: translateY(50%); +} + +.is-vertical > input[type="range"] { + width: 150px; + height: 4px; + margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 + var(--range-spacing); + transform-origin: left; + transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing))); +} + +.is-vertical > input[type="range"]::-webkit-slider-runnable-track { + border-left: 1px solid grey; + border-right: 0; + border-bottom: 1px solid grey; + box-shadow: + -1px 0 0 white, + -1px 1px 0 white, + 0 1px 0 white, + 1px 0 0 darkgrey, + 1px -1px 0 darkgrey, + 0 -1px 0 darkgrey, + 1px 1px 0 white, + -1px -1px darkgrey; +} + +.is-vertical > input[type="range"]::-moz-range-track { + border-left: 1px solid grey; + border-right: 0; + border-bottom: 1px solid grey; + box-shadow: + -1px 0 0 white, + -1px 1px 0 white, + 0 1px 0 white, + 1px 0 0 darkgrey, + 1px -1px 0 darkgrey, + 0 -1px 0 darkgrey, + 1px 1px 0 white, + -1px -1px darkgrey; +} + +.is-vertical > input[type="range"]::-webkit-slider-thumb { + transform: translateY(-8px) scaleX(-1); +} + +.is-vertical > input[type="range"].has-box-indicator::-webkit-slider-thumb { + transform: translateY(-10px) scaleX(-1); +} + +.is-vertical > input[type="range"]::-moz-range-thumb { + transform: translateY(2px) scaleX(-1); +} + +.is-vertical > input[type="range"].has-box-indicator::-moz-range-thumb { + transform: translateY(0px) scaleX(-1); +} + +select:focus { + color: var(--button-highlight); + background-color: var(--dialog-blue); +} +select:focus option { + color: #000; + background-color: #fff; +} + +select:active { + background-image: url("/assets/icon/button-down-active.svg"); +} + +a { + color: var(--link-blue); +} + +a:focus { + outline: 1px dotted var(--link-blue); +} + +ul.tree-view { + display: block; + background: var(--button-highlight); + /* box-shadow: var(--border-field); */ + padding: 6px; + margin: 0; +} + +ul.tree-view li { + list-style-type: none; +} + +ul.tree-view a { + text-decoration: none; + color: var(--blue); +} + +ul.tree-view a:focus { + background-color: var(--dialog-blue); + color: var(--button-highlight); +} + +ul.tree-view ul, +ul.tree-view li { + margin-top: 3px; +} + +ul.tree-view ul { + margin-left: 16px; + padding-left: 16px; + /* Goes down too far */ + border-left: 1px dotted #808080; +} + +ul.tree-view ul > li { + position: relative; +} +ul.tree-view ul > li::before { + content: ""; + display: block; + position: absolute; + left: -16px; + top: 6px; + width: 12px; + border-bottom: 1px dotted #808080; +} + +/* Cover the bottom of the left dotted border */ +ul.tree-view ul > li:last-child::after { + content: ""; + display: block; + position: absolute; + left: -20px; + top: 7px; + bottom: 0px; + width: 8px; + background: var(--button-highlight); +} + +ul.tree-view details { + margin-top: 0; +} + +ul.tree-view details[open] summary { + margin-bottom: 0; +} + +ul.tree-view ul details > summary:before { + margin-left: -22px; + position: relative; + z-index: 1; +} + +ul.tree-view details > summary:before { + text-align: center; + display: block; + float: left; + content: "+"; + border: 1px solid var(--bg5); + width: 11px; + height: 11px; + line-height: 10px; + margin-right: 5px; + background-color: var(--bg1); +} + +ul.tree-view details[open] > summary:before { + content: "-"; +} + +ul.tree-view details > summary::marker, +ul.tree-view details > summary::-webkit-details-marker { + content: ""; +} + +pre { + display: block; + background: var(--button-highlight); + box-shadow: var(--border-field); + padding: 12px 8px; + margin: 0; +} + +code, +code * { + font-family: monospace; +} + +summary:focus { + outline: 1px dotted #000000; +} + +::-webkit-scrollbar { + width: 16px; +} +::-webkit-scrollbar:horizontal { + height: 17px; +} + +::-webkit-scrollbar-corner { + background: var(--button-face); +} + +::-webkit-scrollbar-track { + background-image: url("/assets/icon/scrollbar-background.svg"); +} + +::-webkit-scrollbar-thumb { + background-color: var(--button-face); + box-shadow: var(--border-raised-outer), var(--border-raised-inner); +} + +::-webkit-scrollbar-button:horizontal:start:decrement, +::-webkit-scrollbar-button:horizontal:end:increment, +::-webkit-scrollbar-button:vertical:start:decrement, +::-webkit-scrollbar-button:vertical:end:increment { + display: block; +} + +::-webkit-scrollbar-button:vertical:start { + height: 17px; + background-image: url("/assets/icon/button-up.svg"); +} +::-webkit-scrollbar-button:vertical:end { + height: 17px; + background-image: url("/assets/icon/button-down.svg"); +} +::-webkit-scrollbar-button:horizontal:start { + width: 16px; + background-image: url("/assets/icon/button-left.svg"); +} +::-webkit-scrollbar-button:horizontal:end { + width: 16px; + background-image: url("/assets/icon/button-right.svg"); +} + +.window[role="tabpanel"] { + position: relative; + z-index: 2; +} + +menu[role="tablist"] { + position: relative; + margin: 0 0 -2px 0; + text-indent: 0; + list-style-type: none; + display: flex; + padding-left: 3px; +} + +menu[role="tablist"] > li { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + box-shadow: var(--border-tab); + z-index: 1; +} + +menu[role="tablist"] > li[aria-selected="true"] { + padding-bottom: 2px; + margin-top: -2px; + background-color: var(--surface); + position: relative; + z-index: 8; + margin-left: -3px; +} + +menu[role="tablist"] > li > a { + display: block; + color: #222; + margin: 6px; + text-decoration: none; +} +menu[role="tablist"] > li[aria-selected="true"] > a:focus { + outline: none; +} +menu[role="tablist"] > li > a:focus { + outline: 1px dotted #222; +} + +menu[role="tablist"].multirows > li { + flex-grow: 1; + text-align: center; +} +.sunken-panel { + box-sizing: border-box; + border: 2px groove transparent; + border-image: url("/assets/icon/sunken-panel-border.svg") 2; + overflow: auto; + background-color: #fff; +} + +table { + border-collapse: collapse; + position: relative; + text-align: left; + white-space: nowrap; + background-color: var(--bg0); +} + +table > thead > tr > * { + position: sticky; + top: 0; + height: 17px; + box-shadow: var(--border-raised-outer), var(--border-raised-inner); + background: var(--surface); + box-sizing: border-box; + font-weight: normal; + padding: 0 var(--grouped-element-spacing); +} + +table.interactive > tbody > tr { + cursor: pointer; +} + +table > tbody > tr.highlighted { + color: #fff; + background-color: var(--dialog-blue); +} + +table > tbody > tr > * { + padding: 0 var(--grouped-element-spacing); + height: 14px; +} + +.progress-indicator { + height: 32px; + position: relative; + box-shadow: var(--border-sunken-inner); + padding: 4px 4px; + border: none; + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; +} + +.progress-indicator > .progress-indicator-bar { + height: 100%; + display: block; + background-color: var(--dialog-blue); +} + +.progress-indicator.segmented > .progress-indicator-bar { + width: 100%; + background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */ + background-image: linear-gradient( + 90deg, + var(--dialog-blue) 0 16px, + transparent 0 2px + ); + background-repeat: repeat; + background-size: 18px 100%; +} + +.field-border { + background: var(--button-highlight); + box-shadow: var(--border-field); + padding: 2px; +} + +.field-border-disabled { + background: var(--surface); + box-shadow: var(--border-field); + padding: 2px; +} + +.status-field-border { + background: var(--surface); + box-shadow: var(--border-status-field); + padding: 1px; +} diff --git a/static/assets/UnifontExMono.woff2 b/static/assets/UnifontExMono.woff2 new file mode 100644 index 0000000..e7db71a Binary files /dev/null and b/static/assets/UnifontExMono.woff2 differ diff --git a/static/assets/badges/cookies.png b/static/assets/badges/cookies.png new file mode 100644 index 0000000..70994a7 Binary files /dev/null and b/static/assets/badges/cookies.png differ diff --git a/static/assets/badges/go2hell.gif b/static/assets/badges/go2hell.gif new file mode 100644 index 0000000..7f1290a Binary files /dev/null and b/static/assets/badges/go2hell.gif differ diff --git a/static/assets/badges/indieweb.png b/static/assets/badges/indieweb.png new file mode 100644 index 0000000..a241947 Binary files /dev/null and b/static/assets/badges/indieweb.png differ diff --git a/static/assets/badges/javascript.png b/static/assets/badges/javascript.png new file mode 100644 index 0000000..7ad573f Binary files /dev/null and b/static/assets/badges/javascript.png differ diff --git a/static/assets/badges/lynx.gif b/static/assets/badges/lynx.gif new file mode 100644 index 0000000..452ac5e Binary files /dev/null and b/static/assets/badges/lynx.gif differ diff --git a/static/assets/badges/midi_files_now.gif b/static/assets/badges/midi_files_now.gif new file mode 100644 index 0000000..18a2422 Binary files /dev/null and b/static/assets/badges/midi_files_now.gif differ diff --git a/static/assets/badges/powered-by-debian.gif b/static/assets/badges/powered-by-debian.gif new file mode 100644 index 0000000..1f617c8 Binary files /dev/null and b/static/assets/badges/powered-by-debian.gif differ diff --git a/static/assets/badges/soaos.png b/static/assets/badges/soaos.png new file mode 100644 index 0000000..486af90 Binary files /dev/null and b/static/assets/badges/soaos.png differ diff --git a/static/assets/bg.jpg b/static/assets/bg.jpg new file mode 100644 index 0000000..4e9044c Binary files /dev/null and b/static/assets/bg.jpg differ diff --git a/static/assets/construction.gif b/static/assets/construction.gif new file mode 100644 index 0000000..b9c4eeb Binary files /dev/null and b/static/assets/construction.gif differ diff --git a/static/assets/icon/button-down-active.svg b/static/assets/icon/button-down-active.svg new file mode 100644 index 0000000..fa7cac1 --- /dev/null +++ b/static/assets/icon/button-down-active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/assets/icon/button-down.svg b/static/assets/icon/button-down.svg new file mode 100644 index 0000000..7bbaa80 --- /dev/null +++ b/static/assets/icon/button-down.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/assets/icon/button-left.svg b/static/assets/icon/button-left.svg new file mode 100644 index 0000000..80421a1 --- /dev/null +++ b/static/assets/icon/button-left.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/assets/icon/button-right.svg b/static/assets/icon/button-right.svg new file mode 100644 index 0000000..5573fe0 --- /dev/null +++ b/static/assets/icon/button-right.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/assets/icon/button-up.svg b/static/assets/icon/button-up.svg new file mode 100644 index 0000000..4b25846 --- /dev/null +++ b/static/assets/icon/button-up.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/assets/icon/checkmark-disabled.svg b/static/assets/icon/checkmark-disabled.svg new file mode 100644 index 0000000..f9d34b9 --- /dev/null +++ b/static/assets/icon/checkmark-disabled.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/assets/icon/checkmark.svg b/static/assets/icon/checkmark.svg new file mode 100644 index 0000000..297996a --- /dev/null +++ b/static/assets/icon/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/assets/icon/close.svg b/static/assets/icon/close.svg new file mode 100644 index 0000000..9b426f5 --- /dev/null +++ b/static/assets/icon/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/assets/icon/groupbox-border.svg b/static/assets/icon/groupbox-border.svg new file mode 100644 index 0000000..a205da9 --- /dev/null +++ b/static/assets/icon/groupbox-border.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/assets/icon/help.svg b/static/assets/icon/help.svg new file mode 100644 index 0000000..f7a5c07 --- /dev/null +++ b/static/assets/icon/help.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/assets/icon/indicator-horizontal.svg b/static/assets/icon/indicator-horizontal.svg new file mode 100644 index 0000000..026baf5 --- /dev/null +++ b/static/assets/icon/indicator-horizontal.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/assets/icon/indicator-rectangle-horizontal.svg b/static/assets/icon/indicator-rectangle-horizontal.svg new file mode 100644 index 0000000..9bbfb58 --- /dev/null +++ b/static/assets/icon/indicator-rectangle-horizontal.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/assets/icon/maximize-disabled.svg b/static/assets/icon/maximize-disabled.svg new file mode 100644 index 0000000..34c7ff9 --- /dev/null +++ b/static/assets/icon/maximize-disabled.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/static/assets/icon/maximize.svg b/static/assets/icon/maximize.svg new file mode 100644 index 0000000..19f8b09 --- /dev/null +++ b/static/assets/icon/maximize.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/assets/icon/minimize.svg b/static/assets/icon/minimize.svg new file mode 100644 index 0000000..6231e4c --- /dev/null +++ b/static/assets/icon/minimize.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/assets/icon/radio-border-disabled.svg b/static/assets/icon/radio-border-disabled.svg new file mode 100644 index 0000000..c53fa15 --- /dev/null +++ b/static/assets/icon/radio-border-disabled.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/assets/icon/radio-border.svg b/static/assets/icon/radio-border.svg new file mode 100644 index 0000000..e70978e --- /dev/null +++ b/static/assets/icon/radio-border.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/assets/icon/radio-dot-disabled.svg b/static/assets/icon/radio-dot-disabled.svg new file mode 100644 index 0000000..e1a76fc --- /dev/null +++ b/static/assets/icon/radio-dot-disabled.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/assets/icon/radio-dot.svg b/static/assets/icon/radio-dot.svg new file mode 100644 index 0000000..f19e1b8 --- /dev/null +++ b/static/assets/icon/radio-dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/assets/icon/restore.svg b/static/assets/icon/restore.svg new file mode 100644 index 0000000..bd8fe15 --- /dev/null +++ b/static/assets/icon/restore.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/static/assets/icon/scrollbar-background.svg b/static/assets/icon/scrollbar-background.svg new file mode 100644 index 0000000..04b2f59 --- /dev/null +++ b/static/assets/icon/scrollbar-background.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/assets/icon/sunken-panel-border.svg b/static/assets/icon/sunken-panel-border.svg new file mode 100644 index 0000000..c13e8ce --- /dev/null +++ b/static/assets/icon/sunken-panel-border.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/favicon.png b/static/favicon.png new file mode 100644 index 0000000..fac014b Binary files /dev/null and b/static/favicon.png differ diff --git a/static/hell.css b/static/hell.css new file mode 100644 index 0000000..572f3d1 --- /dev/null +++ b/static/hell.css @@ -0,0 +1,102 @@ +html { + background: url("/hell/bg.jpg"); + background-attachment: fixed; + background-size: cover; + image-rendering: pixelated; +} + +body { + margin: auto 0; + max-width: unset; + margin-right: auto; +} + +@keyframes fire { + 0% { + text-shadow: + 0 0 20px #fefcc9, + 10px -10px 30px #feec85, + -20px -20px 40px #ffae34, + 20px -40px 50px #ec760c, + -20px -60px 60px #cd4606, + 0 -80px 70px #973716, + 10px -90px 80px #451b0e; + } + 100% { + text-shadow: + 0 0 20px #fefcc9, + 10px -10px 30px #fefcc9, + -20px -20px 40px #feec85, + 22px -42px 60px #ffae34, + -22px -58px 50px #ec760c, + 0 -82px 80px #cd4606, + 10px -90px 80px #973716; + } +} + +.hellfire { + color: var(--orange); + animation: fire 1s ease-in-out infinite alternate; +} + +massive-fucking-background-flame { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: -999; + background-image: url("/hell/smallfire.gif"); + background-size: auto 128px; + opacity: 0.25; + --pan: 0 -128px; + animation: pan linear 3s infinite; +} + +a { + color: black; +} + +#inverted-cross { + display: inline-block; + rotate: 180deg; + transition: + rotate 2s, + color 0.5s; + --glow-color: red; + animation: glow 4s linear infinite; +} + +#inverted-cross:hover { + rotate: 0deg; + --glow-color: white; + color: var(--yellow); + transition: + rotate 2s, + color 1s; +} + +.evil { + color: black; +} + +.huge { + font-size: 8rem; +} + +.struck { + opacity: 0.5; + position: absolute; + left: 0; + z-index: -999; + user-select: none; +} + +@keyframes pan { + from { + background-position: 0 0; + } + to { + background-position: var(--pan); + } +} diff --git a/static/index.css b/static/index.css new file mode 100644 index 0000000..9ae6d1e --- /dev/null +++ b/static/index.css @@ -0,0 +1,27 @@ +.section { + background-color: var(--bg1); +} + +html { + background: url("/assets/bg.jpg"); + background-attachment: fixed; + background-size: cover; + image-rendering: pixelated; +} + +#weird-fucking-header-container { + display: inline-grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; +} + +.whatever { + grid-area: 1 / 1 / 2 / 2; +} + +#badge-grid { + display: inline-grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 4px; +} + diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..b4c788a --- /dev/null +++ b/static/style.css @@ -0,0 +1,184 @@ +:root { + --red: #e67e80; + --orange: #e69875; + --yellow: #dbbc7f; + --green: #a7c080; + --blue: #7fbbb3; + --aqua: #83c092; + --purple: #d699b6; + --fg: #d3c6aa; + --statusline1: #a7c080; + --statusline2: #d3c6aa; + --statusline3: #e67e80; + --gray0: #7a8478; + --gray1: #859289; + --gray2: #9da9a0; + + --bg-dim: #232a2e; + --bg0: #2d353b; + --bg1: #343f44; + --bg2: #3d484d; + --bg3: #475258; + --bg4: #4f585e; + --bg5: #56635f; + --bg-red: #4c3743; + --bg-visual: #493b40; + --bg-yellow: #45443c; + --bg-green: #3c4841; + --bg-blue: #384b55; +} + +html { + background: url("/assets/bg.jpg"); + background-attachment: fixed; + background-size: cover; + image-rendering: pixelated; +} + +a:not(:has(img, div))[target="_blank"]::after { + content: " ⎘"; +} + +a:not(:has(img,div))[href^="https://tv.soaos.dev/w/"]::before +{ + content: "📺 "; +} + +ul { + list-style-type: "• "; +} + +pre { + overflow: auto; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} + +.under-construction { + color: var(--yellow); + animation: blinker 1s linear infinite; +} + +@keyframes glow { + 50% { + text-shadow: + 0 0 0px var(--glow-color), + 0 0 20px hsl(from var(--glow-color) h s calc(l - 10)); + } +} + +@keyframes glow-box { + 50% { + box-shadow: + 0 0 0px var(--glow-color), + 0 0 20px hsl(from var(--glow-color) h s calc(l - 10)); + } +} + +.evil { + color: var(--red); + --glow-color: red; + animation: glow 4s linear infinite; +} + +.evil-box { + color: var(--red); + --glow-color: red; + animation: glow-box 4s linear infinite; +} + +.holy { + color: var(--yellow); + --glow-color: white; + animation: glow 4s linear infinite; +} + +a.evil:visited { + color: var(--red); +} + +a.evil:hover { + color: red; +} + +.hidden { + display: none; +} + +.no-bullets { + list-style-type: none; + padding-left: 0; + :w; +} + +#badge-grid { + display: flex; + gap: 4px; +} + +.unselectable { + user-select: none; +} + +.window { + margin: 1rem; +} + +.red-on-white { + color: red; + background-color: white; +} + +.centered { + display: flex; + justify-content: center; +} + +body { + margin: auto 0; + max-width: 800px; + margin-right: auto; +} + +[data-tooltip]:hover::after { + content: attr(data-tooltip); + border: 1px solid var(--bg-dim); + background: var(--fg); + color: var(--bg-dim); + display: inline-block; + white-space: pre-wrap; + text-align: left; + padding: 0.3em; + position: absolute; + z-index: 98; +} + +.flip { + position: relative; +} + +.hidden-selectable { + opacity: 0; +} + +.flip::after { + display: inline-block; + position: absolute; + content: attr(data-title); + transform: rotateY(180deg); + clip-path: polygon(0 0, 50.1% 0, 50.1% 100%, 0 100%); + visibility: visible; + left: 0; +} + +.flip::before { + display: inline-block; + position: absolute; + content: attr(data-title); + clip-path: polygon(0 0, 50.1% 0, 50.1% 100%, 0 100%); + visibility: visible; +} diff --git a/static/style.css.bak b/static/style.css.bak new file mode 100644 index 0000000..22815a7 --- /dev/null +++ b/static/style.css.bak @@ -0,0 +1,224 @@ +@font-face { + font-family: unifont; + src: url("/assets/UnifontExMono.woff2"); +} + +:root { + --red: #e67e80; + --orange: #e69875; + --yellow: #dbbc7f; + --green: #a7c080; + --blue: #7fbbb3; + --aqua: #83c092; + --purple: #d699b6; + --fg: #d3c6aa; + --statusline1: #a7c080; + --statusline2: #d3c6aa; + --statusline3: #e67e80; + --gray0: #7a8478; + --gray1: #859289; + --gray2: #9da9a0; + + --bg-dim: #232a2e; + --bg0: #2d353b; + --bg1: #343f44; + --bg2: #3d484d; + --bg3: #475258; + --bg4: #4f585e; + --bg5: #56635f; + --bg-red: #4c3743; + --bg-visual: #493b40; + --bg-yellow: #45443c; + --bg-green: #3c4841; + --bg-blue: #384b55; +} + +body { + font-family: unifont; + font-size: 16px; + color: var(--fg); + perspective-origin: top left; +} + +pre, +code, +samp { + font-family: unifont; +} + +samp { + color: var(--gray2); +} + +.section { + margin: 1rem; + padding: 1rem; +} + +.horizontal-container { + display: flex; + justify-content: space-between; +} + +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: normal; + text-decoration: underline; +} + +h1 { + font-size: 48px; +} + +h2 { + font-size: 32px; +} + +h3 { + font-size: 16px; +} + +.centered { + text-align: center; +} + +.center-content { + display: flex; + justify-content: center; +} + +.half { + clip-path: polygon(0 0, 50.1% 0, 50.1% 100%, 0 100%); +} + +.flip-x { + transform: scaleX(-1); +} + +.unselectable { + user-select: none; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} + +.under-construction { + color: var(--yellow); + animation: blinker 1s linear infinite; +} + +@keyframes glow { + 50% { + text-shadow: + 0 0 10px var(--glow-color), + 0 0 20px var(--glow-color), + 0 0 40px var(--glow-color), + 0 0 80px hsl(from var(--glow-color) h s calc(l - 10)), + 0 0 120px hsl(from var(--glow-color) h s calc(l - 10)); + } +} + +.evil { + color: var(--red); + --glow-color: red; + animation: glow 4s linear infinite; +} + +.holy { + color: var(--yellow); + --glow-color: white; + animation: glow 4s linear infinite; +} + +a.evil:visited { + color: var(--red); +} + +a.evil:hover { + color: red; +} + +.inline-block { + display: inline-block; +} + +.no-bullets { + list-style-type: none; + padding-left: 0; +} + +.red-on-white { + color: red; + background-color: white; +} + +.hidden { + display: none; +} + +.huge { + font-size: 128px; +} + +.struck { + opacity: 0.5; + position: absolute; + z-index: -999; + user-select: none; +} + +@keyframes pan { + from { + background-position: 0 0; + } + to { + background-position: var(--pan); + } +} + +.bold { + font-weight: bold; +} + +.column { + display: flex; + flex-direction: column; + align-items: center; +} + +/* Links */ +a { + color: var(--blue); +} + +a:visited { + color: var(--purple); +} + +a:not(:has(img, div))[target="_blank"]::after { + content: " ⎘"; +} + +a:not(:has(img,div))[href^="https://tv.soaos.dev/w/"]::before +{ + content: "📺 "; +} + +ul { + list-style-type: "• "; +} -- cgit v1.2.3