From: Danilo M. Date: Sun, 3 May 2026 12:59:33 +0000 (+0200) Subject: modernize theme to github-style with purple accent X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=fc1a37a35ef421710efb5121060a479aec0759d8;p=gitweb-theme-danix.git modernize theme to github-style with purple accent - full CSS rewrite: github primer color tokens, css vars for all colors - fonts: oxanium (headings), ibm plex sans (ui), jetbrains mono (code) - layout: flex-column body for proper sticky footer, max-width container replacing inconsistent 95%/94% widths, float removal from tree icons - dark mode: all diff colors, badges, surfaces now use vars (no hardcoded) - ref badges: purple head, yellow tag, green branch with icon fill colors - table rows: re-enabled alternating rows, hover states, styled headers - mobile: breakpoints at 768px and 480px, stacked diff view on small screens - svg icons: updated fills to match new color scheme (light + dark variants) - html fragments: header role=banner, logo resize, site-desc semantic classes Co-Authored-By: Claude Sonnet 4.6 --- diff --git a/.gitignore b/.gitignore index 61ad8e7..dbd78e9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ gitweb.cgi index.cgi old-static/ -static \ No newline at end of file +static +HANDOFF.md \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..7f2f05d --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,47 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## What This Is + +Custom gitweb theme for [git.danix.xyz](https://git.danix.xyz/). Gitweb is a CGI-based git web interface; this repo provides the static assets and HTML fragments it injects. + +No build system. No package manager. Edit files directly. + +## Deployment + +Copy `gitweb-danixland/` to your gitweb static files directory (typically `/usr/share/gitweb/static/` or configured via `$GIT_DIR` in gitweb config). The HTML fragment files (`header.html`, `footer.html`, `site-desc.html`) map to gitweb's `$site_header`, `$site_footer`, and `$home_text` config options respectively. + +## Architecture + +``` +gitweb-danixland/ ← static assets served by gitweb + gitweb.css ← all styling (single file, no preprocessor) + gitweb.js ← upstream gitweb JS, unmodified (blame incremental, TZ UI) + *.svg ← icons, light/dark variants (e.g. file.svg / file-dark.svg) + *.png ← logo, favicon, signature image + +header.html ← injected before gitweb content (.site-header div) +footer.html ← injected after gitweb content (.site-footer div) +site-desc.html ← home page welcome text (.index_include area) +``` + +## CSS Conventions + +- CSS custom properties (vars) defined in `:root` — all colors go through vars +- Dark mode via `@media (prefers-color-scheme: dark)` overriding `:root` vars +- Icon swap between light/dark: `--file-icon`, `--dir-icon`, etc. point to different SVG files per color scheme +- Fonts: Montserrat (UI) + Red Hat Mono (code/sha1/diffs) via Google Fonts +- Color palette vars: `--bg`, `--bg-alt`, `--fg`, `--accent` (#FD7014 orange), `--bluish-grey` (footer/header bg) +- Diff colors are hardcoded (`#ffdddd`/`#ddffdd`) — not using vars +- `.rem`/`.add` = removed/added diff lines; `.marked` = inline character-level highlight within those + +## Key Gitweb CSS Classes + +- `.page_header` — breadcrumb bar (gitweb-generated) +- `.page_footer` — gitweb's own footer (kept, sits above `.site-footer`) +- `.site-header` / `.site-footer` — custom HTML fragments +- `.project_list`, `.shortlog`, `.tree` — main data tables +- `.patchset`, `.chunk_block`, `.rem`, `.add` — diff view +- `span.refs span.tag` / `span.refs span.head` — branch/tag badges +- `.category` — uses `--accent` color with `::before` content injection diff --git a/gitweb-danixland/commit-dark.svg b/gitweb-danixland/commit-dark.svg index 949474a..6fbe293 100644 --- a/gitweb-danixland/commit-dark.svg +++ b/gitweb-danixland/commit-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/gitweb-danixland/commit.svg b/gitweb-danixland/commit.svg index fc062d3..3f0a6b0 100644 --- a/gitweb-danixland/commit.svg +++ b/gitweb-danixland/commit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/gitweb-danixland/file-dark.svg b/gitweb-danixland/file-dark.svg index 7236393..49d3edf 100644 --- a/gitweb-danixland/file-dark.svg +++ b/gitweb-danixland/file-dark.svg @@ -1 +1 @@ - + diff --git a/gitweb-danixland/file.svg b/gitweb-danixland/file.svg index 863836b..781a444 100644 --- a/gitweb-danixland/file.svg +++ b/gitweb-danixland/file.svg @@ -1 +1 @@ - + diff --git a/gitweb-danixland/folder-dark.svg b/gitweb-danixland/folder-dark.svg index ca6520f..33529d2 100644 --- a/gitweb-danixland/folder-dark.svg +++ b/gitweb-danixland/folder-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/gitweb-danixland/folder.svg b/gitweb-danixland/folder.svg index 85d269e..1169455 100644 --- a/gitweb-danixland/folder.svg +++ b/gitweb-danixland/folder.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/gitweb-danixland/gitweb.css b/gitweb-danixland/gitweb.css index b088624..b8254d4 100644 --- a/gitweb-danixland/gitweb.css +++ b/gitweb-danixland/gitweb.css @@ -1,6 +1,6 @@ /* Fonts ------------------------------------------------------------------------- */ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,400;1,600&family=Red+Hat+Mono&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); /* Reset ------------------------------------------------------------------------- */ @@ -48,48 +48,143 @@ a { outline: none; } /* Colors ------------------------------------------------------------------------- */ :root { - --bg: #D8D9CF; - --bg-alt: #F0EEED; - --fg: #393E46; - --link: #753f09; - --link-visited: #83674d; - --border: 34,40,49,0.035; - --accent: #FD7014; - --shadow: 0,0,0,0.2; - --bluish-grey: #282d3d; - --dark-grey: #393E46; - --light-grey: #ababcf; -/* Icons */ - --file-icon: url("file-dark.svg"); - --dir-icon: url("folder-dark.svg"); - --ref-icon: url("commit-dark.svg"); - --tag-icon: url("tag-dark.svg"); + --bg: #ffffff; + --bg-alt: #f6f8fa; + + --fg: #1f2328; + --fg-muted: #656d76; + --fg-subtle: #818b98; + + --link: #a855f7; + --link-visited: #9333ea; + + --border: #d0d7de; + --border-muted: #d8dee4; + + --accent: #a855f7; + + --shadow-sm: 0 1px 0 rgba(27,31,36,0.04); + --shadow-md: 0 3px 6px rgba(140,149,159,0.15); + + --color-success: #1a7f37; + --color-success-bg: #dafbe1; + --color-success-border: #aceebb; + --color-danger: #d1242f; + --color-danger-bg: #ffebe9; + --color-danger-border: #ff8182; + --color-warning: #9a6700; + --color-warning-bg: #fff8c5; + --color-warning-border: #d4a72c; + + --diff-add-bg: #e6ffec; + --diff-add-word: #abf2bc; + --diff-rem-bg: #ffebe9; + --diff-rem-word: #ff818266; + + --badge-tag-bg: #fff8c5; + --badge-tag-border: #d4a72c; + --badge-tag-fg: #7d4e00; + --badge-branch-bg: #dafbe1; + --badge-branch-border: #4ac26b; + --badge-branch-fg: #1a7f37; + --badge-head-bg: #f3e8ff; + --badge-head-border: #c084fc; + --badge-head-fg: #7e22ce; + + /* Icons (light mode = dark-fill SVGs) */ + --file-icon: url("file-dark.svg"); + --dir-icon: url("folder-dark.svg"); + --ref-icon: url("commit-dark.svg"); + --tag-icon: url("tag-dark.svg"); --branch-icon: url("merge-dark.svg"); - --rss-icon:url("rss-dark.svg"); - --opml-icon:url("opml-dark.svg"); -/* social colors */ - --twitter: #1DA1F2; + --rss-icon: url("rss-dark.svg"); + --opml-icon: url("opml-dark.svg"); + + --footer-bg: #f6f8fa; + --footer-fg: #656d76; + --footer-border: #d0d7de; + + /* social colors */ + --twitter: #1DA1F2; --instagram: #E4405F; - --spotify: #1ed760; - --github: #6e5494; + --spotify: #1ed760; + --github: #24292f; } + @media screen and (prefers-color-scheme: dark) { :root { - --bg: #393E46; - --bg-alt: #222831; - --fg: #D8D9CF; - --link: #FF8B13; - --link-visited: #e7b788; - --border: 216,217,207,0.2; - --shadow: 255,255,255,0.2; - --file-icon: url("file.svg"); - --dir-icon: url("folder.svg"); - --ref-icon: url("commit.svg"); - --tag-icon: url("tag.svg"); - --branch-icon: url("merge.svg"); - --rss-icon:url("rss.svg"); - --opml-icon:url("opml.svg"); + --bg: #0d1117; + --bg-alt: #161b22; + + --fg: #e6edf3; + --fg-muted: #848d97; + --fg-subtle: #6e7681; + + --link: #c084fc; + --link-visited: #d8b4fe; + + --border: #30363d; + --border-muted: #21262d; + + --accent: #c084fc; + + --shadow-sm: 0 1px 0 rgba(1,4,9,0.4); + --shadow-md: 0 3px 6px rgba(1,4,9,0.4); + + --color-success: #3fb950; + --color-success-bg: #033a16; + --color-success-border: #196c2e; + --color-danger: #f85149; + --color-danger-bg: #67060c; + --color-danger-border: #8e1519; + --color-warning: #d29922; + --color-warning-bg: #5a3e1b; + --color-warning-border: #9e6a03; + + --diff-add-bg: #033a16; + --diff-add-word: #1a7f37; + --diff-rem-bg: #67060c; + --diff-rem-word: #b91c1c66; + + --badge-tag-bg: #5a3e1b; + --badge-tag-border: #9e6a03; + --badge-tag-fg: #d29922; + --badge-branch-bg: #033a16; + --badge-branch-border: #196c2e; + --badge-branch-fg: #3fb950; + --badge-head-bg: #3b0764; + --badge-head-border: #7e22ce; + --badge-head-fg: #c084fc; + + --file-icon: url("file.svg"); + --dir-icon: url("folder.svg"); + --ref-icon: url("commit.svg"); + --tag-icon: url("tag.svg"); + --branch-icon: url("merge.svg"); + --rss-icon: url("rss.svg"); + --opml-icon: url("opml.svg"); + + --footer-bg: #161b22; + --footer-fg: #848d97; + --footer-border: #30363d; + + --github: #f0f6ff; } + + /* Syntax highlighting — dark mode overrides */ + .num { color: #79c0ff; } + .esc { color: #ff7b72; } + .str { color: #a5d6ff; background-color: transparent; } + .dstr { color: #79c0ff; } + .slc { color: #8b949e; font-style: italic; } + .com { color: #8b949e; font-style: italic; } + .dir { color: #3fb950; } + .sym { color: var(--fg); } + .line { color: #6e7681; } + .kwa { color: #ff7b72; font-weight: bold; } + .kwb { color: #d2a8ff; } + .kwc { color: #ffa657; } + .kwd { color: #79c0ff; } } @@ -97,21 +192,53 @@ a { outline: none; } ---------------------------------------------------------------------------- */ html { - position: relative; min-height: 100%; } body { - font: 13px 'Montserrat',Helvetica,arial,freesans,clean,sans-serif; - line-height: 1.4; - margin: 0 0 105px; + font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.5; + margin: 0; background-color: var(--bg); color: var(--fg); + display: flex; + flex-direction: column; + min-height: 100vh; +} + +/* Content container — replaces per-element 95%/94% widths */ +.page_header, +.index_include, +.project_list, +.shortlog, +.commit_search, +.history, +.page_nav, +.list_head, +.page_path, +.search, +.title, +.readme, +.projects_list, +.tags, +.heads, +.header, +.title_text, +.log_body, +.page_body, +.diff_tree { + max-width: 1280px; + width: calc(100% - 48px); + margin-left: auto; + margin-right: auto; + box-sizing: border-box; } /* Monospaced Fonts */ .sha1, .mode, .diff_tree .list, .pre, .diff, .patchset { - font-family: 'Red Hat Mono','Consolas','Bitstream Vera Sans Mono',monospace; + font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; + font-size: 12px; } a:link, a:visited { @@ -130,22 +257,26 @@ a:hover { text-decoration: underline; } -td.list a[href*='tree'], td.list a[href*='blob'] { - padding-left: 40px; - display: block; - float: left; - height: 32px; - line-height: 32px; +td.list a[href*='tree'], +td.list a[href*='blob'] { + padding-left: 24px; + background-position: left center; + background-repeat: no-repeat; + background-size: 16px 16px; + display: inline-flex; + align-items: center; + min-height: 24px; + line-height: 1.5; } /* Folder Icon */ td.list a[href*='tree'] { - background: var(--dir-icon) center left no-repeat; + background-image: var(--dir-icon); } /* File Icon */ td.list a[href*='blob'] { - background: var(--file-icon) center left no-repeat; + background-image: var(--file-icon); } i { @@ -153,7 +284,8 @@ i { } td, th { - padding: 5px; + padding: 8px 16px; + vertical-align: middle; } .page_nav br { @@ -161,13 +293,14 @@ td, th { } #generating_info { - font-size: 10px; - color: var(--fg); + font-size: 11px; + color: var(--fg-subtle); text-align: center; + padding: 8px; } #generating_time, #generating_cmd { - font-weight: bold; + font-weight: 600; } /* Page Header @@ -175,14 +308,16 @@ td, th { /* breadcrumbs */ .page_header { - height: 50px; - line-height: 50px; + height: 48px; + line-height: 48px; position: relative; - padding: 0 27px; - margin-bottom: 20px; - font-size: 20px; - font-family: 'Montserrat', Helvetica, Arial, Freesans, Clean, sans-serif; - border-bottom: 1px solid rgba(var(--border)); + padding: 0 24px; + margin-bottom: 16px; + font-size: 14px; + font-weight: 600; + font-family: 'IBM Plex Sans', sans-serif; + border-bottom: 1px solid var(--border); + background-color: var(--bg); } .page_header a:link, .page_header a:visited { @@ -215,48 +350,43 @@ td, th { /* Page Footer ---------------------------------------------------------------------------- */ -.page_footer, -.site-footer { - background-color: var(--bluish-grey); - color: var(--light-grey); - width: 100%; - margin: 0; -} - .page_footer { - height: 40px; - line-height: 40px; + background-color: var(--bg-alt); + color: var(--fg-muted); + border-top: 1px solid var(--border); + padding: 8px 24px; + font-size: 12px; + width: 100%; + box-sizing: border-box; } .page_footer_text { + display: block; text-align: right; - padding-right: 2em; - display: inline; - float: right; - width: calc(100% - 2em); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .site-footer { - position: absolute; - left: 0; - bottom: 0; + background-color: var(--footer-bg); + color: var(--footer-fg); + width: 100%; + margin-top: auto; + padding: 24px; + border-top: 1px solid var(--footer-border); display: flex; flex-direction: row; - flex-wrap: nowrap; - justify-content: space-around; + flex-wrap: wrap; + justify-content: space-between; align-items: center; - align-content: stretch; + gap: 16px; + box-sizing: border-box; } -.site-footer .columns { - display: block; - flex-grow: 1; - flex-basis: auto; - align-self: stretch; - order: 0; +.site-footer .footer-columns { + flex: 1 1 auto; + min-width: 140px; } .social-links ul li { @@ -281,8 +411,18 @@ td, th { color: var(--github); } -a.rss_logo, -div.social-links ul li a span, +div.social-links ul li a span { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(100%); + height: 1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} + div.page_header a img.logo { border: 0; clip: rect(1px, 1px, 1px, 1px); @@ -300,12 +440,32 @@ div.page_header a img.logo { ---------------------------------------------------------------------------- */ .index_include { - width: 95%; - margin: 0 auto 15px; - padding: 8px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + margin-bottom: 16px; + padding: 16px 0; +} + +.index_include h2 { + font-family: 'Oxanium', sans-serif; + font-size: 20px; + font-weight: 700; + margin-bottom: 12px; + color: var(--fg); +} + +.index_include p { + color: var(--fg-muted); + margin-bottom: 8px; + line-height: 1.6; +} + +.welcome-close { + margin-top: 16px; +} + +.signature-wrap { + text-align: right; + margin-top: 8px; + padding-right: 16px; } /* Elements @@ -313,68 +473,89 @@ div.page_header a img.logo { .project_list, .shortlog, -.tree, .commit_search, .history { - width: 95%; - margin: 0 auto 15px auto; - border: 1px solid rgba(var(--border)); - -moz-box-shadow: 0 0 3px rgba(var(--shadow)); - -webkit-box-shadow: 0 0 3px rgba(var(--shadow)); - box-shadow: 0 0 3px rgba(var(--shadow)); + margin: 0 auto 16px auto; + border: 1px solid var(--border); + border-radius: 6px; + box-shadow: var(--shadow-sm); + overflow: hidden; } .project_list th, .shortlog th, .tree th, .commit_search th { -/* background-color: var(--bluish-grey); - color: var(--light-grey); - font-weight: normal;*/ -} - -.project_list th { -/* font-weight: bold;*/ + background-color: var(--bg-alt); + color: var(--fg-muted); + font-weight: 600; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.04em; + border-bottom: 1px solid var(--border); } .project_list tr, .shortlog tr, .tree tr, .commit_search tr { -/* background: var(--light-grey); - height: 2.5em; - text-align: left; - color: var(--fg);*/ -} - -.project_list tr.dark, .project_list tr.light, -.shortlog tr.dark, .shortlog tr.light, -.tree tr.dark, .tree tr.light, -.commit_search tr.dark, .commit_search tr.light, -.history tr.dark, .history tr.light, -.heads tr.dark, .heads tr.light { -/* background-color: var(--bg-alt); + border-bottom: 1px solid var(--border); color: var(--fg); - height: 2.5em; - border-bottom: 1px solid rgba(var(--border));*/ +} + +.project_list tr:last-child, +.shortlog tr:last-child, +.tree tr:last-child, +.commit_search tr:last-child { + border-bottom: none; +} + +/* Alternating rows */ +.project_list tr.dark, +.shortlog tr.dark, +.tree tr.dark, +.commit_search tr.dark, +.history tr.dark, +.heads tr.dark { + background-color: var(--bg); +} + +.project_list tr.light, +.shortlog tr.light, +.tree tr.light, +.commit_search tr.light, +.history tr.light, +.heads tr.light { + background-color: var(--bg-alt); +} + +/* Row hover */ +.project_list tr:hover, +.shortlog tr:hover, +.tree tr:hover, +.commit_search tr:hover { + background-color: var(--bg-alt); } th .header { -/* background: transparent; + background: transparent; border: 0; padding: 0; - font-weight: bold;*/ + font-weight: 600; } .tree { width: 100%; + max-width: none; margin: 0; + border-radius: 0; } .projsearch { - position: absolute; - right: 4%; - top: 40px; + display: flex; + justify-content: flex-end; + padding: 8px 24px; + margin-bottom: 16px; } .projsearch a { @@ -382,43 +563,41 @@ th .header { } .commit_search { - background: var(--fg); + background-color: var(--bg); } .page_nav, .list_head, .page_path, .search { - width: 94%; color: var(--fg); padding: 5px; - margin: 0 auto 15px auto; + margin: 0 auto 16px auto; } .page_nav { text-align: center; } .history { - background: #eaeaea; + background-color: var(--bg-alt); } .title { - font-size: 2em; + font-size: 1.5em; + font-family: 'Oxanium', sans-serif; + font-weight: 700; text-transform: capitalize; - margin: 0 auto 15px auto; + margin: 0 auto 16px auto; padding: 5px; - width: 95%; } .readme { background: var(--bg-alt); - border: 1px solid rgba(var(--border)); - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; + border: 1px solid var(--border); + border-radius: 6px; box-sizing: border-box; - margin: 0 auto 15px auto; - padding: 15px; - width: 95%; + margin: 0 auto 16px auto; + padding: 16px; } .readme h1 { @@ -468,13 +647,15 @@ th .header { .readme pre, .readme code { - font-family: 'Red Hat Mono', monospace; + font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; + font-size: 12px; margin: 1em 0; white-space: pre; } .readme tt, .readme code, .readme kbd, .readme samp { - font-family: 'Red Hat Mono', monospace; + font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; + font-size: 85%; } .readme blockquote { @@ -483,69 +664,74 @@ th .header { .projects_list, .tags { - width: 95%; - background: var(--bluish-grey); - color: var(--light-grey); - padding: 5px; - margin: 0 auto 15px auto; + background-color: var(--bg-alt); + color: var(--fg-muted); + border: 1px solid var(--border); + border-radius: 6px; + padding: 8px 16px; + margin: 0 auto 16px auto; + font-size: 12px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; } .heads { - width: 95%; color: var(--fg); padding: 5px; - margin: 0 auto 15px auto; + margin: 0 auto 16px auto; } .header { text-transform: capitalize; - margin: 0 auto 15px auto; + margin: 0 auto 16px auto; padding: 5px; - width: 95%; } .header .age { float: left; - color: #000; - font-weight: bold; + color: var(--fg-muted); + font-weight: 600; width: 10em; } .title_text { - width: 94%; background: var(--bg-alt); padding: 5px; margin: 0 auto 0 auto; } .log_body { - width: 94%; background: var(--bg-alt); padding: 5px; - margin: 0 auto 15px auto; + margin: 0 auto 16px auto; } .page_body { - line-height: 1.4em; - width: 94%; + line-height: 1.5; background: var(--bg-alt); padding: 5px; - margin: 15px auto 15px auto; + margin: 16px auto 16px auto; } .diff_tree { - width: 95%; background: var(--bg-alt); padding: 5px; - margin: 0 auto 15px auto; + margin: 0 auto 16px auto; } .page_body > .list_head { - width: 98.5%; + width: 100%; + max-width: none; + margin-left: 0; + margin-right: 0; } .page_body > .diff_tree { - width: 99.5%; + width: 100%; + max-width: none; + margin-left: 0; + margin-right: 0; } .patch > .header { @@ -573,65 +759,57 @@ th .header { ---------------------------------------------------------------------------- */ span.refs span { - color: #707070; - display: inline-block; - margin: 0; - background-color: var(--bg); - height: 18px; - padding: 0 6px; - text-overflow: ellipsis; + display: inline-flex; + align-items: center; + margin: 0 2px; + height: 20px; + padding: 0 8px; + font-size: 11px; + border-radius: 3px; + background-color: var(--bg-alt); + color: var(--fg-muted); + border: 1px solid var(--border); + vertical-align: middle; } span.refs span.ref { - color: #707070; - display: inline-block; - margin: 0; - background-color: var(--bg-alt); - height: 18px; - padding: 0 6px; - text-overflow: ellipsis; -/* Node vertical */ + background-color: var(--badge-head-bg); + color: var(--badge-head-fg); + border-color: var(--badge-head-border); background-image: var(--ref-icon); background-repeat: no-repeat; - padding-left: 18px; + background-position: 6px center; + background-size: 12px 12px; + padding-left: 22px; } span.refs span.tag { - color: #707070; - display: inline-block; - margin: 0; - background-color: #ffffab; - border: 1px solid #d9d93b; - border-radius: 3px; - height: 18px; - padding: 0 6px; - text-overflow: ellipsis; -/* tag icon */ + background-color: var(--badge-tag-bg); + color: var(--badge-tag-fg); + border-color: var(--badge-tag-border); background-image: var(--tag-icon); background-repeat: no-repeat; - padding-left: 18px; + background-position: 6px center; + background-size: 12px 12px; + padding-left: 22px; } span.refs span.head { - color: #707070; - display: inline-block; - margin: 0; - background-color: #c4ffc4; - border: 1px solid #78ff78; - border-radius: 3px; - height: 18px; - padding: 0 6px; - text-overflow: ellipsis; -/* git branch */ + background-color: var(--badge-branch-bg); + color: var(--badge-branch-fg); + border-color: var(--badge-branch-border); background-image: var(--branch-icon); background-repeat: no-repeat; - padding-left: 18px; + background-position: 6px center; + background-size: 12px 12px; + padding-left: 22px; } span.refs a { - color: #4e4e4e; - font: 11px "Red Hat Mono", "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace; - line-height: 18px; + color: inherit; + font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; + font-size: 11px; + line-height: 20px; } /* Diffs @@ -639,12 +817,12 @@ span.refs a { div.diff.to_file a.path, div.diff.to_file { - color: #007000; + color: var(--color-success); } div.diff.from_file a.path, div.diff.from_file { - color: #aa0000; + color: var(--color-danger); } .patch .header { @@ -657,25 +835,28 @@ div.diff.from_file { } .chunk_header { - background: var(--bg-alt); - color: #999; + background-color: var(--bg-alt); + color: var(--fg-muted); + border-top: 1px solid var(--border); + font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; + font-size: 12px; } .rem { - background: #ffdddd; - color: var(--dark-grey); + background-color: var(--diff-rem-bg); + color: var(--fg); } .rem .marked { - background: #ffaaaa; - color: var(--dark-grey); + background-color: var(--diff-rem-word); + color: var(--fg); } .add { - background: #ddffdd; - color: var(--dark-grey); + background-color: var(--diff-add-bg); + color: var(--fg); } .add .marked { - background: #7dff7d; - color: var(--dark-grey); + background-color: var(--diff-add-word); + color: var(--fg); } .extended_header { @@ -690,7 +871,7 @@ div.chunk_block div.old { float: left; width: 50%; overflow: hidden; - border-right: 5px solid var(--bg-alt); + border-right: 4px solid var(--border); } div.chunk_block.rem, @@ -711,65 +892,69 @@ div.chunk_block div.new .rem { div.chunk_block div.new { margin-left: 50%; width: 50%; - border-left: 5px solid var(--bg-alt); + border-left: 4px solid var(--border); } /* Category ---------------------------------------------------------------------------- */ td.category { - background: var(--accent); /* old browsers */ - color: var(--dark-grey); + background-color: var(--bg-alt); + color: var(--fg-muted); padding-left: 3em; - font-weight: bold; - border-bottom: 3px solid rgba(var(--border)); - border-left: 3px solid rgba(var(--border)); + font-weight: 600; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.04em; + border-bottom: 1px solid var(--border); + border-left: 3px solid var(--accent); } td.category:before { - content: "Category: "; + content: ""; } + /* Age ---------------------------------------------------------------------------- */ /* noage: "No commits" */ .project_list td.noage { - color: #cdcdcd; + color: var(--fg-subtle); } /* age2: 60*60*24*2 <= age */ .project_list td.age2, .blame td.age2 { - color: #545454; + color: var(--fg-muted); } /* age1: 60*60*2 <= age < 60*60*24*2 */ .project_list td.age1 { - color: #009900; + color: var(--color-success); } /* age0: age < 60*60*2 */ .project_list td.age0 { - color: #009900; - font-weight: bold; + color: var(--color-success); + font-weight: 600; } /* File status ---------------------------------------------------------------------------- */ .diff_tree span.file_status.new { - color: #008000; + color: var(--color-success); } table.diff_tree span.file_status.deleted { - color: #c00000; + color: var(--color-danger); } table.diff_tree span.file_status.moved, table.diff_tree span.file_status.mode_chnge { - color: #545454; + color: var(--fg-muted); } table.diff_tree span.file_status.copied { - color: #70a070; + color: var(--color-success); } span.cntrl { @@ -780,13 +965,17 @@ span.cntrl { } span.match { - background: #aaffaa; - color: #000; + background-color: var(--color-warning-bg); + color: var(--fg); + border-radius: 2px; } td.error { - color: red; - background: yellow; + color: var(--color-danger); + background-color: var(--color-danger-bg); + border: 1px solid var(--color-danger-border); + border-radius: 3px; + padding: 4px 8px; } /* blob view */ @@ -799,31 +988,33 @@ td.pre, div.pre, div.diff { .popup { /* timezone selection UI */ position: absolute; - /* "top: 0; right: 0;" would be better, if not for bugs in browsers */ top: 0; left: 0; - border: 1px solid #d8d8d8; - padding: 2px; + border: 1px solid var(--border); + border-radius: 6px; + padding: 8px; background-color: var(--bg-alt); + box-shadow: var(--shadow-md); font-style: normal; - color: #545454; + color: var(--fg); cursor: auto; + z-index: 100; } .close-button { /* close timezone selection UI without selecting */ - /* float doesn't work within absolutely positioned container, - * if width of container is not set explicitly */ - /* float: right; */ position: absolute; - top: 0px; right: 0px; - border: 1px solid #ffaaaa; - margin: 1px 1px 1px 1px; - padding-bottom: 2px; - width: 12px; - height: 10px; - font-size: 9px; - font-weight: bold; + top: 4px; right: 4px; + border: 1px solid var(--color-danger-border); + border-radius: 3px; + margin: 0; + padding: 0 4px; + width: 16px; + height: 16px; + font-size: 10px; + font-weight: 600; text-align: center; - background-color: #ffdddd; + line-height: 16px; + background-color: var(--color-danger-bg); + color: var(--color-danger); cursor: pointer; } @@ -851,16 +1042,20 @@ td.pre, div.pre, div.diff { /* Header */ div.site-header { - background-color: var(--bg-alt); + background-color: var(--bg); color: var(--fg); - padding: 1em; + padding: 16px 24px; + border-bottom: 1px solid var(--border); + box-shadow: var(--shadow-sm); } div.site-header h1 { - text-transform: uppercase; - font-size: 2em; + font-family: 'Oxanium', sans-serif; + font-size: 20px; + font-weight: 700; + text-transform: none; padding: 0; margin: 0; - line-height: 2em; + line-height: 1.5; } div.site-header h1 a, div.site-header h1 a:hover { @@ -868,12 +1063,108 @@ div.site-header h1 a:hover { color: var(--fg); } div.site-header h1 img.site-logo { - height: 50px; + height: 32px; width: auto; position: relative; - top: 15px; + top: 8px; + margin-right: 8px; } div.site-header h1 span.evident { background-color: var(--accent); - color: var(--bg); + color: #ffffff; + padding: 2px 8px; + border-radius: 3px; + font-size: 16px; +} + +/* ============================================================ + Responsive / Mobile + ============================================================ */ + +@media screen and (max-width: 768px) { + .page_header, + .index_include, + .project_list, + .shortlog, + .commit_search, + .history, + .page_nav, + .list_head, + .page_path, + .search, + .title, + .readme, + .projects_list, + .tags, + .heads, + .header, + .title_text, + .log_body, + .page_body, + .diff_tree { + width: calc(100% - 24px); + } + + .page_header { + font-size: 12px; + padding: 0 12px; + height: auto; + min-height: 44px; + line-height: 1.4; + display: flex; + align-items: center; + } + + div.site-header { padding: 12px 16px; } + div.site-header h1 { font-size: 16px; } + + /* Stacked diff instead of side-by-side */ + div.chunk_block div.old { + float: none; + width: 100%; + border-right: none; + border-bottom: 4px solid var(--border); + } + div.chunk_block div.new { + margin-left: 0; + width: 100%; + border-left: none; + } + + .site-footer { flex-direction: column; align-items: flex-start; padding: 16px; } + + .project_list, .shortlog, .tree, .commit_search { + overflow-x: auto; + display: block; + } +} + +@media screen and (max-width: 480px) { + .page_header, + .index_include, + .project_list, + .shortlog, + .commit_search, + .history, + .page_nav, + .list_head, + .page_path, + .search, + .title, + .readme, + .projects_list, + .tags, + .heads, + .header, + .title_text, + .log_body, + .page_body, + .diff_tree { + width: 100%; + border-radius: 0; + } + + td, th { padding: 6px 8px; } + div.site-header h1 { font-size: 14px; } + div.site-header h1 img.site-logo { height: 24px; top: 6px; } } diff --git a/gitweb-danixland/merge-dark.svg b/gitweb-danixland/merge-dark.svg index ddb9643..53bca1c 100644 --- a/gitweb-danixland/merge-dark.svg +++ b/gitweb-danixland/merge-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/gitweb-danixland/merge.svg b/gitweb-danixland/merge.svg index 680d926..cc89113 100644 --- a/gitweb-danixland/merge.svg +++ b/gitweb-danixland/merge.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/gitweb-danixland/opml-dark.svg b/gitweb-danixland/opml-dark.svg index 6f3ecf9..2a40ef6 100644 --- a/gitweb-danixland/opml-dark.svg +++ b/gitweb-danixland/opml-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/gitweb-danixland/opml.svg b/gitweb-danixland/opml.svg index 11f8fd9..22106a2 100644 --- a/gitweb-danixland/opml.svg +++ b/gitweb-danixland/opml.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/gitweb-danixland/rss-dark.svg b/gitweb-danixland/rss-dark.svg index 28197d9..dbcd89b 100644 --- a/gitweb-danixland/rss-dark.svg +++ b/gitweb-danixland/rss-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/gitweb-danixland/rss.svg b/gitweb-danixland/rss.svg index b66b340..5a76c73 100644 --- a/gitweb-danixland/rss.svg +++ b/gitweb-danixland/rss.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/gitweb-danixland/tag-dark.svg b/gitweb-danixland/tag-dark.svg index 8c9c044..7d665f4 100644 --- a/gitweb-danixland/tag-dark.svg +++ b/gitweb-danixland/tag-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/gitweb-danixland/tag.svg b/gitweb-danixland/tag.svg index 2cae17a..7d8dfb6 100644 --- a/gitweb-danixland/tag.svg +++ b/gitweb-danixland/tag.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/header.html b/header.html index bb0ae95..b052637 100644 --- a/header.html +++ b/header.html @@ -1,7 +1,7 @@ -
+