diff options
| author | surya <surya@urbanecologycollective.org> | 2026-04-18 15:40:40 -0400 |
|---|---|---|
| committer | surya <surya@urbanecologycollective.org> | 2026-04-18 15:40:40 -0400 |
| commit | b5c4e9636b4c498f5157124d0d3ff45628a0ff7b (patch) | |
| tree | 7fffece0cb77cda53b7e066bb6bc70e52b582afa /public/css | |
| parent | 40d2a460af1eecb7ccf7f302479a6a7afe410da7 (diff) | |
theme
Diffstat (limited to 'public/css')
| -rw-r--r-- | public/css/reset.css | 90 | ||||
| -rw-r--r-- | public/css/style.css | 125 | ||||
| -rw-r--r-- | public/css/suCSS.css | 666 |
3 files changed, 0 insertions, 881 deletions
diff --git a/public/css/reset.css b/public/css/reset.css deleted file mode 100644 index 58b50e8..0000000 --- a/public/css/reset.css +++ /dev/null @@ -1,90 +0,0 @@ -/* Box sizing rules */ -*, -*::before, -*::after { - box-sizing: border-box; - -webkit-box-sizing: border-box; -} - -* { - margin: 0; -} - -/* Prevent font size inflation */ -html { - -moz-text-size-adjust: none; - -webkit-text-size-adjust: none; - text-size-adjust: none; -} - -/* Remove default margin in favour of better control in authored CSS */ -body, h1, h2, h3, h4, p, -figure, blockquote, dl, dd { - margin-block-end: 0; -} - -/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ -ul, ol, -ul[role='list'], -ol[role='list'] { - list-style: none; -} - -/* Set core body defaults */ -body { - min-height: 100vh; - line-height: 1.5; - -webkit-font-smoothing: antialiased; -} - -/* Set shorter line heights on headings and interactive elements */ -h1, h2, h3, h4, -button, input, label { - line-height: 1.1; -} - -/* Balance text wrapping on headings */ -h1, h2, -h3, h4, -h5, h6 { - text-wrap: balance; -} - -p, h1, h2, h3, h4, h5, h6 { - overflow-wrap: break-word; -} - -/* A elements that don't have a class get default styles */ -a:not([class]) { - text-decoration-skip-ink: auto; -} - -/* Make images easier to work with */ -img, picture, -video, canvas, svg { - max-width: 100%; - display: block; -} - -/* Inherit fonts for inputs and buttons */ -input, button, -textarea, select, progress { - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - font: inherit; -} - -/* Make sure textareas without a rows attribute are not tiny */ -textarea:not([rows]) { - min-height: 10em; -} - -/* Anything that has been anchored to should have extra scroll margin */ -:target { - scroll-margin-block: 5ex; -} - -#root, #__next { - isolation: isolate; -} diff --git a/public/css/style.css b/public/css/style.css deleted file mode 100644 index 1affa22..0000000 --- a/public/css/style.css +++ /dev/null @@ -1,125 +0,0 @@ -:root { - --icon-size: 1.3rem; - --icon-color: var(--text); -} - -#nav-bar { - padding: 0.625rem 0 0; - display: flex; - flex-wrap: wrap; - gap: 0.25rem; - justify-content: flex-end; - align-items: center; -} - -#footer-container { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; -} - -.accent-data { - color: var(--accent); -} - -.theme-transition { - transition: color 0.3s ease, background-color 0.3s ease; -} - -.tags-data { - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: flex-end; - align-items: flex-start; - align-content: flex-end -} - -.title-list li { - margin-bottom: .375rem; -} - -/* icons settings */ -.icon { - width: var(--icon-size); - height: var(--icon-size); - display: inline-block; - vertical-align: middle; - color: var(--icon-color); - fill: currentColor; - transition: color 0.3s ease; - cursor: pointer; -} - -.icon:hover { - --icon-color: var(--accent); -} - -/* Theme toggle specific styles */ -.theme-toggle { - cursor: pointer; - padding: 0; - margin: 0; - background: none; - border: none; - display: inline-flex; -} - -.theme-toggle:hover .icon { - --icon-color: var(--accent); -} - -.theme-toggle:active { - transform: scale(0.95); -} - -/* footnotes */ -.footnote-definition { - margin: 0 0 0 .125rem; -} - -.footnote-definition-label { - color: var(--accent); -} - -.footnote-definition p { - display: inline; - margin: .625rem 0 0 .625rem; -} - -/* general classes */ -/* Cleaned no-style class */ -.no-style { - all: unset; - background: none !important; - border: none !important; -} - -.no-style:hover { - background: transparent; - color: inherit; -} - -/* Modern float replacement */ -.float-right { - margin-inline-start: auto; -} - -.float-left { - margin-inline-end: auto; -} - -.center { - text-align: center; -} - -.center img { - display: block; - margin: 1rem auto; -} - -/* shortcodes css */ -.webring { - margin: .375rem; -} diff --git a/public/css/suCSS.css b/public/css/suCSS.css deleted file mode 100644 index b29ca7a..0000000 --- a/public/css/suCSS.css +++ /dev/null @@ -1,666 +0,0 @@ -: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; -} |
