diff options
Diffstat (limited to 'files/header')
| -rw-r--r-- | files/header | 200 |
1 files changed, 146 insertions, 54 deletions
diff --git a/files/header b/files/header index 5faa51d9..bc0b5708 100644 --- a/files/header +++ b/files/header @@ -7,82 +7,174 @@ <style> :root { color-scheme: dark; - } + --bg: #0d0d0d; + --bg-alt: #141414; + --bg-code: #1a1a1a; + --fg: #e0e0e0; + --fg-dim: #888; + --accent: #a8a8a8; + --accent-hover: #e0e0e0; + --border: #222; + } + * { margin: 0; padding: 0; box-sizing: border-box; } body { - font-family: monospace; - font-size: 14px; - line-height: 1.25; - max-width: 92ch; - margin-left: auto; - margin-right: auto; - padding: 1em; - background-color: #242424; - color: #fefefe; - } - h1 { - margin: 0 0 0.35em; - font-size: 2rem; - line-height: 1.1; + font-family: "Terminus", "Monaco", "Cascadia Code", "Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace; + font-size: 15px; + line-height: 1.6; + max-width: 88ch; + margin: 0 auto; + padding: 2em 1.5em; + background: var(--bg); + color: var(--fg); + -webkit-font-smoothing: antialiased; + } + h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; } + h1 { font-size: 1.75rem; margin-bottom: 0.6em; } + h2 { font-size: 1.3rem; margin: 1.6em 0 0.5em; } + h3 { font-size: 1.1rem; margin: 1.4em 0 0.4em; } + h4 { font-size: 1rem; margin: 1.2em 0 0.3em; } + p { margin: 0 0 1em; } + a { + color: var(--accent); + text-decoration: none; + } + a:hover { color: var(--accent-hover); text-decoration: underline; } + nav { margin-bottom: 1.5em; } + nav a { color: var(--fg-dim); font-size: 0.9em; } + nav a:hover { color: var(--accent); } + nav span { color: var(--border); margin: 0 0.3em; } + hr { + border: 0; + border-top: 1px solid var(--border); + margin: 1.5em 0; } - h2, h3, h4 { - line-height: 1.2; - margin-top: 1.4em; - margin-bottom: 0.5em; + pre, code { font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace; font-size: 0.9em; } + code { + background: var(--bg-code); + padding: 0.15em 0.4em; + border-radius: 3px; + color: #c0c0c0; } pre { - background-color: #2b2b2b; - border-radius: 3px; - padding: 10px; + background: var(--bg-code); + border: 1px solid var(--border); + border-radius: 4px; + padding: 1em; overflow-x: auto; + margin: 1em 0; + line-height: 1.45; } - code { - color: #f7f3d6; + pre code { + background: none; + padding: 0; + border-radius: 0; } img { display: block; max-width: 100%; + height: auto; + margin: 1em 0; + border-radius: 4px; } - hr { - border: 0; - border-top: 1px dashed #fefefe; - margin: 20px 0; + blockquote { + margin: 1em 0; + padding-left: 1em; + border-left: 3px solid var(--border); + color: var(--fg-dim); } table { width: 100%; border-collapse: collapse; - margin: 0.75rem 0; + margin: 1em 0; } th, td { - padding: 4px; - } - th { - background-color: #221e1f; + padding: 0.5em 0.6em; text-align: left; + border-bottom: 1px solid var(--border); } - table, th, td { - border: 1px dashed #e7e8eb; - } - table thead th { - border-bottom-color: #e7e8eb; - } - a { - color: #90cbf9; - text-decoration: none - } - a:hover { - color: #869edc; - text-decoration: underline - } - blockquote { - margin: 1rem 0; - padding-left: 1rem; - border-left: 2px solid rgba(254, 254, 254, 0.18); - color: #d0d0d0; + th { + font-weight: 600; + border-bottom-color: #333; + } + tr:last-child td { border-bottom: none; } + ul, ol { margin: 0 0 1em 1.5em; } + li { margin-bottom: 0.3em; } + input, button, textarea { font: inherit; color: inherit; } + .ports-toolbar { + display: flex; + flex-wrap: wrap; + gap: 0.5em; + margin-bottom: 1em; + } + .ports-toolbar button { + background: none; + border: none; + border-bottom: 2px solid transparent; + padding: 0.3em 0; + cursor: pointer; + color: var(--fg-dim); + font-size: 0.9em; + } + .ports-toolbar button.active { + color: var(--accent); + border-bottom-color: var(--accent); + } + .ports-toolbar button:hover { color: var(--fg); } + .ports-toolbar input { + flex: 1 1 18em; + min-width: 0; + background: var(--bg-alt); + border: 1px solid var(--border); + border-radius: 3px; + padding: 0.4em 0.6em; + } + .ports-toolbar input:focus { outline: none; border-color: var(--accent); } + .ports-count { margin-bottom: 0.8em; color: var(--fg-dim); font-size: 0.9em; } + #commits { list-style: none; margin: 0; } + #commits li { + padding: 0.8em 0; + border-bottom: 1px solid var(--border); + display: flex; + align-items: flex-start; + gap: 0.8em; + } + #commits li:last-child { border-bottom: none; } + .commit-hash { + font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace; + font-size: 0.8em; + color: var(--fg-dim); + white-space: nowrap; + min-width: 7em; + } + .commit-msg { flex: 1; word-break: break-word; } + .commit-meta { + font-size: 0.85em; + color: var(--fg-dim); + white-space: nowrap; + text-align: right; + min-width: 9em; + } + #commits-loading { + text-align: center; + padding: 1.5em; + color: var(--fg-dim); + display: none; + } + #commits-error { + text-align: center; + padding: 1em; + color: #e77; + display: none; } + .dl-table td:nth-child(1) { width: 60%; } + .dl-table td:nth-child(2) { width: 15%; text-align: right; } + .dl-table td:nth-child(3) { width: 25%; white-space: nowrap; } + .dl-empty { color: var(--fg-dim); font-style: italic; } </style> </head> <body> <div class="centered-wrapper"> - <h1>@TITLE@</h1> - <a href="/">home</a> / <a href="/docs">docs</a> / <a href="/ports.html">ports</a> / <a href="https://codeberg.org/emmett1/alicelinux">development</a> / <a href="https://sourceforge.net/projects/alice-linux/files/">download</a> / <a href="/community.html">community</a> / <a href="/donate.html">donate</a> + <nav> + <a href="/">home</a><span> / </span><a href="/docs">docs</a><span> / </span><a href="/ports.html">ports</a><span> / </span><a href="/commits.html">commits</a><span> / </span><a href="/download.html">download</a><span> / </span><a href="https://codeberg.org/emmett1/alicelinux">development</a><span> / </span><a href="/community.html">community</a><span> / </span><a href="/donate.html">donate</a> + </nav> <hr> |