diff options
Diffstat (limited to 'public/css/suCSS.css')
| -rw-r--r-- | public/css/suCSS.css | 666 |
1 files changed, 666 insertions, 0 deletions
diff --git a/public/css/suCSS.css b/public/css/suCSS.css new file mode 100644 index 0000000..b29ca7a --- /dev/null +++ b/public/css/suCSS.css @@ -0,0 +1,666 @@ +:root, +::backdrop { + /* set sans-serif & mono fonts */ + --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, + "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica, + "Helvetica Neue", sans-serif; + --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + --standard-border-radius: 5px; + + /* default colors */ + --bg: #EEEEEE; + --bg-light: #CBCDCD; + --text: #41474E; + --text-light: #646868; + --accent: #D26878; + --accent-light: #e08f67; + --accent-text: var(--bg); + --border: #646868; + --link: #5690AF; +} + +/* theme media queries */ +@media (prefers-color-scheme: dark) { + :root, + ::backdrop { + color-scheme: dark; + --bg: #222529; + --bg-light: #464949; + --text: #D6D6D6; + --text-light: #DBD5BC; + --accent: #78B6AD; + --accent-light: #87C9E5; + --accent-text: var(--bg); + --border: #DBD5BC; + --link: #E2AEA2; + } + img, + video { + opacity: 0.8; + } +} + +@media (prefers-color-scheme: light) { + :root, + ::backdrop { + color-scheme: light; + --bg: #EEEEEE; + --bg-light: #CBCDCD; + --text: #41474E; + --text-light: #646868; + --accent: #D26878; + --accent-light: #e08f67; + --accent-text: var(--bg); + --border: #646868; + --link: #5690AF; + } +} + +[data-theme="light"] { + /* default (light) theme */ + color-scheme: light; + --bg: #EEEEEE; + --bg-light: #CBCDCD; + --text: #41474E; + --text-light: #646868; + --accent: #D26878; + --accent-light: #e08f67; + --accent-text: var(--bg); + --border: #646868; + --link: #5690AF; +} + +[data-theme="dark"] { + color-scheme: dark; + --bg: #222529; + --bg-light: #464949; + --text: #D6D6D6; + --text-light: #DBD5BC; + --accent: #78B6AD; + --accent-light: #87C9E5; + --accent-text: var(--bg); + --border: #DBD5BC; + --link: #E2AEA2; +} + +::selection, +::-moz-selection { + color: var(--bg); + background: var(--accent) +} + +/* chromium scrollbars */ +::-webkit-scrollbar { + width: 8px; + height: 8px; + overflow: visible; +} +::-webkit-scrollbar-thumb { + background: var(--accent); + width: 12px; +} +::-webkit-scrollbar-track { + background: var(--bg-light); +} + +/* firefox scrollbars */ +* { + scrollbar-color: var(--accent) var(--bg-light); + scrollbar-width: thin; + scrollbar-height: thin; +} + +html { + color-scheme: light dark; + font-family: var(--mono-font); + scroll-behavior: smooth; +} + +body { + min-height: 100svh; + color: var(--text); + background-color: var(--bg); + font-size: 1rem; + display: grid; + grid-template-columns: 1fr min(47rem, 90%) 1fr; + grid-template-rows: auto 1fr auto; + grid-row-gap: .625rem; +} +body > * { + grid-column: 2; +} + +body > footer { + color: var(--text-light); + font-size: .875; +} + +/* Format headers */ +h1 { + font-size: 2rem; +} +h2 { + font-size: 1.75rem; +} +h3 { + font-size: 1.5rem; +} +h4 { + font-size: 1.25rem; +} +h5 { + font-size: 1rem; +} +h6 { + font-size: .75rem; +} + +h1, h2, +h3, h4, +h5, h6 { + margin: .5em 0 .5em 0; +} + +/* Fix line height when title wraps */ +h1, h2, h3 { + line-height: 1.1; +} + +h1::before, h2::before, +h3::before, h4::before, +h5::before, h6::before { + color: var(--accent); + content: '# ' +} + +@media only screen and (max-width: 720px) { + h1 { + font-size: 1.5rem; + } + h2 { + font-size: 1.25rem; + } + h3 { + font-size: 1rem; + } + h4 { + font-size: .75rem; + } + h5 { + font-size: .5rem; + } + h6 { + font-size: .25rem; + } +} + +p { + margin: 1rem 0; +} + +p, li, +figcaption { + text-wrap: pretty; +} + +/* format links */ +a, +a:visited { + text-decoration: none; + border-radius: .125rem; + color: var(--link); +} + +a:hover { + background-color: var(--link); + color: var(--bg); +} + +/* format lists */ +ul { + list-style: square; + margin-top: .25rem; + margin-bottom: .25rem; +} + +ol { + list-style-type: decimal; + margin-top: .25rem; + margin-bottom: .25rem; +} + +li { + margin-bottom: .125rem; +} + +ul li::marker { + content: 'ยป '; + color: var(--accent); +} + +ul li:hover::marker { + content: '# '; + font-weight: 700; + color: var(--link); +} + +ol li::marker { + color: var(--accent); +} + +ol li:hover::marker { + font-weight: 700; + color: var(--link) +} + +/* Use flexbox to allow items to wrap, as needed */ +header > nav ul, +header > nav ol { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: space-around; + justify-content: right; + list-style-type: none; + margin: .5rem 0 0 0; + padding: 0; + gap: 1rem; +} + +/* List items are inline elements, make them behave more like blocks */ +header > nav ul li, +header > nav ol li { + display: inline-block; +} + +/* Consolidate box styling */ +aside, details, pre, progress { + background-color: var(--bg-light); + border-radius: var(--standard-border-radius); +} + +aside { + font-size: 1rem; + width: 35%; + padding: 0 10px; + margin-inline-start: 10px; + float: right; +} +*[dir="rtl"] aside { + float: left; +} + +/* make aside full-width on mobile */ +@media only screen and (max-width: 720px) { + aside { + width: 100%; + float: none; + margin-inline-start: 0; + } +} + +details { + padding: .5rem; +} + +summary { + cursor: pointer; + font-weight: bold; + word-break: break-all; +} + +details[open] > summary + * { + margin-top: 0; +} + +details[open] > summary { + margin-bottom: 0.5rem; +} + +details[open] > :last-child { + margin-bottom: 0; +} + +/* Format tables */ +table { + border-collapse: collapse; + margin: 1.5rem 0; + display: block; + overflow-x: auto; + white-space: nowrap; +} + +td, +th { + border: 1px solid var(--border); + text-align: start; + padding: 0.5rem; +} + +th { + background-color: var(--bg-light); + font-weight: bold; +} + +tr:nth-child(even) { + background-color: var(--bg-light); +} + +table caption { + text-align: left; + font-weight: bold; + margin: 0 0 .4rem 1rem; +} + +/* format forms */ +fieldset { + border: 1px dashed var(--accent); + border-radius: var(--standard-border-radius); +} + +fieldset > legend { + color: var(--accent); +} + +textarea, +select, +input, +button, +.button { + font-size: inherit; + font-family: inherit; + padding: .25rem; + border-radius: var(--standard-border-radius); + box-shadow: none; + max-width: 100%; + display: inline-block; +} + +textarea, +select, +input { + color: var(--text); + background-color: var(--bg); + border: 1px dashed var(--border); +} + +label { + display: block; +} + +fieldset label { + margin: 0 0 .3rem 0; +} + +textarea { + max-width: 43.5rem; + resize: both; +} + +textarea:not([cols]) { + width: 100%; +} + +@media only screen and (max-width: 720px) { + textarea, + select, + input { + width: 100%; + } +} + +/* format buttons */ +button, +.button, +a.button, +input[type="submit"], +input[type="reset"], +input[type="button"], +label[type="button"] { + border: 1px solid var(--accent); + background-color: var(--accent); + color: var(--accent-text); + padding: 0.5rem 0.9rem; + text-decoration: none; + line-height: normal; +} + +.button[aria-disabled="true"], +input:disabled, +textarea:disabled, +select:disabled, +button[disabled] { + cursor: not-allowed; + background-color: var(--bg-light); + border-color: var(--bg-light); + color: var(--text-light); +} + +input[type="range"] { + padding: 0; + color: var(--accent); +} + +abbr[title] { + cursor: help; + text-decoration-line: underline; + text-decoration-style: dotted; +} + +button:enabled:hover, +.button:not([aria-disabled="true"]):hover, +input[type="submit"]:enabled:hover, +input[type="reset"]:enabled:hover, +input[type="button"]:enabled:hover, +label[type="button"]:hover { + background-color: var(--accent-light); + border-color: var(--accent-light); + cursor: pointer; +} + +.button:focus-visible, +button:focus-visible:where(:enabled), +input:enabled:focus-visible:where( + [type="submit"], + [type="reset"], + [type="button"] +) { + outline: 2px solid var(--accent); + outline-offset: 1px; +} + +/* checkbox and radio button style */ +input[type="checkbox"], +input[type="radio"] { + vertical-align: middle; + position: relative; + width: min-content; + width: 14px; + height: 14px; +} + +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline-block; +} + +input[type="radio"] { + border-radius: 100%; +} + +input[type="checkbox"]:checked, +input[type="radio"]:checked { + background-color: var(--accent); +} + +@media only screen and (max-width: 720px) { + textarea, + select, + input { + width: 100%; + } +} + +input[type="color"] { + height: 2.5rem; + padding: 0.2rem; +} + +input[type="file"] { + border: 0; +} + +/* misc body elements */ +hr { + border: 1px dashed var(--accent); + margin: .5rem 0 .5rem 0; +} + +mark { + padding: 0 .25em 0 .25em; + border-radius: var(--standard-border-radius); + background-color: var(--accent); + color: var(--bg); +} + +mark a { + color: var(--link); +} + +img, +video { + max-width: 90%; + height: auto; + padding: .125rem; + border: dashed 2px var(--accent); + border-radius: 15px; +} + +figure { + margin: 0; + display: block; + overflow-x: auto; +} + +figcaption { + text-align: left; + font-size: .875rem; + color: var(--text-light); + margin: 0 0 1rem 1rem; +} + +blockquote { + margin: 0 0 0 1.25rem; + padding: .5rem 0 0 .5rem; + border-inline-start: .375rem solid var(--accent); + color: var(--text-light); + font-style: italic; +} + +cite { + font-size: .875rem; + color: var(--text-light); + font-style: normal; +} + +dt { + color: var(--text-light); +} + +code, pre, +pre span, +kbd, samp { + font-family: var(--mono-font); +} + + +pre { + border: 1px solid var(--accent); + max-height: 30rem; + padding: .625rem; + overflow: auto; + font-style: monospace; + white-space: pre; +} + +p code, +li code, +div code { + padding: 0 .125rem 0 .125rem; + border-radius: 3px; + color: var(--bg); + background-color: var(--text); +} + +pre code { + padding: 0; + border-radius: 0; + color: inherit; + background-color: inherit; +} + +iframe { + max-width: 90%; +} + +/* progress bars */ +progress { + width: 100%; +} + +progress:indeterminate { + background-color: var(--bg-light); +} + +progress::-webkit-progress-bar { + border-radius: var(--standard-border-radius); + background-color: var(--bg-light); +} + +progress::-webkit-progress-value { + border-radius: var(--standard-border-radius); + background-color: var(--accent); +} + +progress::-moz-progress-bar { + border-radius: var(--standard-border-radius); + background-color: var(--accent); + transition-property: width; + transition-duration: 0.3s; +} + +progress:indeterminate::-moz-progress-bar { + background-color: var(--bg-light); +} + +dialog { + max-width: 40rem; + margin: auto; +} + +dialog::backdrop { + background-color: var(--bg); + opacity: 0.8; +} + +@media only screen and (max-width: 720px) { + dialog { + max-width: 100%; + margin: auto 1em; + } +} + +/* superscript & subscript */ +/* prevent scripts from affecting line-height. */ +sup, sub { + vertical-align: baseline; + position: relative; +} + +sup { + top: -0.4em; +} + +sub { + top: 0.3em; +} |