Created
February 26, 2026 05:52
-
-
Save meyt/92834a1aad0684392df8f78d30db90fe to your computer and use it in GitHub Desktop.
Simple theme for Apache auto-indexing (all-in-one html, no extra assets)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # assuming we serving https://site.com/mirror | |
| # put the `.htaccess` and `header.html` inside `mirror` direcotry. | |
| Options +Indexes | |
| IndexOptions FancyIndexing VersionSort HTMLTable SuppressDescription NameWidth=* Charset=UTF-8 | |
| IndexIgnore header.html .htaccess .gitignore README.md *.log .DS_Store | |
| HeaderName /mirror/header.html |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| :root { | |
| --bg: #fafafa; | |
| --surface: #ffffff; | |
| --text: #171717; | |
| --text-muted: #737373; | |
| --accent: #0ea5e9; | |
| --border: #e5e5e5; | |
| --hover: #f5f5f5; | |
| --icon-folder: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmNTljMGIiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjIgMTlhMiAyIDAgMCAxLTIgMkg0YTIgMiAwIDAgMS0yLTJWNWEyIDIgMCAwIDEgMi0yaDVsMiAzaDlhMiAyIDAgMCAxIDIgMnoiLz48L3N2Zz4="); | |
| --icon-file: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM5Y2EzYWYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgMkg2YTIgMiAwIDAgMC0yIDJ2MTZhMiAyIDAgMCAwIDIgMmgxMmEyIDIgMCAwIDAgMi0yVjhaIi8+PHBvbHlsaW5lIHBvaW50cz0iMTQgMiAxNCA4IDIwIDgiLz48L3N2Zz4="); | |
| --icon-back: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM3MzczNzMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTkgMTJINiIvPjxwYXRoIGQ9Ik0xMiA1bC03IDcgNyA3Ii8+PC9zdmc+"); | |
| --icon-up: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM5Y2EzYWYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMTlWNiIvPjxwYXRoIGQ9Ik01IDEybDctNyA3IDciLz48L3N2Zz4="); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.5; | |
| max-width: 880px; | |
| margin: 0 auto; | |
| padding: 40px 24px; | |
| overflow-x: auto; | |
| text-align: center; | |
| } | |
| /* Back Button */ | |
| .back-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| font-size: 14px; | |
| font-weight: 500; | |
| margin-bottom: 20px; | |
| padding: 8px 12px; | |
| border-radius: 6px; | |
| transition: all 0.15s ease; | |
| } | |
| .back-btn::before { | |
| content: ""; | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| background: var(--icon-back); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| } | |
| .back-btn:hover { | |
| background: var(--hover); | |
| color: var(--text); | |
| } | |
| h1 { | |
| font-size: 26px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .path { | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| margin-bottom: 32px; | |
| font-family: "SF Mono", Monaco, monospace; | |
| } | |
| table { | |
| width: 100%; | |
| background: var(--surface); | |
| border-radius: 12px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| font-size: 14px; | |
| border: solid 1px #eee; | |
| } | |
| thead { | |
| display: none; | |
| } | |
| tr { | |
| transition: background-color 0.12s ease; | |
| } | |
| tr:not(:last-child) td { | |
| border-bottom: 1px solid var(--border); | |
| } | |
| tr:hover { | |
| background: var(--hover); | |
| } | |
| td, | |
| th { | |
| padding: 8px; | |
| vertical-align: middle; | |
| text-align: left; | |
| } | |
| /* Icon column */ | |
| td:first-child { | |
| width: 30px; | |
| text-align: center; | |
| padding: 0; | |
| padding-left: 8px; | |
| } | |
| td:first-child::before { | |
| content: ""; | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| background: var(--icon-file); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| vertical-align: middle; | |
| } | |
| /* Folder detection via href ending in / */ | |
| td:first-child:has(+ td a[href$="/"])::before, | |
| tr:first-child td:first-child::before { | |
| background: var(--icon-folder) no-repeat center center; | |
| width: 18px; | |
| height: 18px; | |
| } | |
| /* Parent directory row (first row) */ | |
| tr:nth-child(3) td:first-child:has(+ td a[href$="/"])::before { | |
| background: var(--icon-up) no-repeat center center; | |
| width: 16px; | |
| height: 16px; | |
| } | |
| tr:first-child td:nth-child(2) a { | |
| color: var(--text-muted); | |
| font-weight: 400; | |
| } | |
| /* Name column */ | |
| td:nth-child(2) { | |
| width: auto; | |
| } | |
| td:nth-child(2) a { | |
| color: var(--text); | |
| text-decoration: none; | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| /* white-space: nowrap; */ | |
| } | |
| td:nth-child(2) a:hover { | |
| color: var(--accent); | |
| } | |
| /* Date column */ | |
| td:nth-child(3) { | |
| width: 120px; | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* Size column */ | |
| td:last-child { | |
| width: 90px; | |
| text-align: left; | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| font-variant-numeric: tabular-nums; | |
| font-family: "SF Mono", Monaco, monospace; | |
| } | |
| /* Hide Apache cruft */ | |
| img, | |
| hr { | |
| display: none !important; | |
| } | |
| address { | |
| margin-top: 40px; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| text-align: center; | |
| } | |
| th { | |
| padding: 8px; | |
| text-align: left; | |
| } | |
| th a { | |
| text-decoration: none; | |
| color: var(--text) | |
| } | |
| tr:has(th hr) { | |
| display: none | |
| } | |
| /* Mobile */ | |
| @media (max-width: 600px) { | |
| body { | |
| padding: 24px 16px; | |
| } | |
| td:last-child { | |
| width: 70px; | |
| } | |
| h1 { | |
| font-size: 22px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment