mirror of
https://github.com/xroche/httrack.git
synced 2026-08-04 06:45:56 +03:00
6b9740dbc2
The documentation index is the page WinHTTrack opens for generic Help and the one httrack.com links as "Documentation", and it presented twenty destinations as a flat bullet list with nothing to say which one a newcomer wants. It is now a task-grouped hub in the interface guide's idiom, with overview.html folded in as the lede and refreshed for 3.50, and Fred Cohen's guide under an Archive heading labelled as written for 3.10, keeping its URL. The chrome the hub needs is split out of guide.css into doc.css; guide.css keeps the platform switcher, tab strip and option entries. guide.html renders pixel-identically before and after the split at 1100px and 390px, in light and dark. overview.html, start.html and cmddoc.html become meta-refresh stubs, like the retired step pages. start.html was a window.open popup launcher and cmddoc.html has 404ed since #661 deleted it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Signed-off-by: Xavier Roche <roche@httrack.com>
317 lines
6.2 KiB
CSS
317 lines
6.2 KiB
CSS
/* Shared chrome for the HTTrack documentation pages. Page-specific rules live
|
|
beside the page (guide.css). Read from disk as often as over http, so
|
|
everything here has to work from a file:// URL. */
|
|
|
|
:root {
|
|
--field: #77b;
|
|
--panel: #ccd;
|
|
--accent: #99c;
|
|
--ink: #111;
|
|
--ink-soft: #444;
|
|
--rule: #aab;
|
|
--link: #00c;
|
|
--link-hover: #c00;
|
|
--code-bg: #e8e8f2;
|
|
--chip: #dde;
|
|
--shadow: rgba(0, 0, 0, .25);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--field: #171a2b;
|
|
--panel: #22263a;
|
|
--accent: #3b4066;
|
|
--ink: #e6e6ee;
|
|
--ink-soft: #a9adc4;
|
|
--rule: #3b4066;
|
|
--link: #9db4ff;
|
|
--link-hover: #ff9d9d;
|
|
--code-bg: #14172a;
|
|
--chip: #2e3350;
|
|
--shadow: rgba(0, 0, 0, .6);
|
|
}
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
/* The plain declaration before each var() is what IE11 gets: it drops the
|
|
custom-property line it cannot parse and keeps the literal above it. */
|
|
body {
|
|
margin: 0;
|
|
padding: 0 1rem 3rem;
|
|
background: #77b;
|
|
background: var(--field);
|
|
color: #111;
|
|
color: var(--ink);
|
|
font: 1em/1.6 "Trebuchet MS", Verdana, system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
/* ---- page frame ---- */
|
|
|
|
.masthead, .wrap {
|
|
max-width: 68rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.masthead {
|
|
padding: .6rem 0 0;
|
|
}
|
|
|
|
.masthead img { display: block; max-width: 100%; height: auto; }
|
|
|
|
.masthead .tagline {
|
|
background: #000;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
padding: .25rem .4rem;
|
|
margin-top: .4rem;
|
|
}
|
|
|
|
.wrap {
|
|
background: #ccd;
|
|
background: var(--panel);
|
|
border-bottom: 6px solid #000;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
@media (min-width: 62rem) {
|
|
.wrap {
|
|
display: grid;
|
|
grid-template-columns: 14rem minmax(0, 1fr);
|
|
gap: 2.5rem;
|
|
align-items: start;
|
|
}
|
|
|
|
/* The hub is its own navigation, so it spans the full width. */
|
|
.wrap.solo { display: block; }
|
|
}
|
|
|
|
footer {
|
|
max-width: 68rem;
|
|
margin: .5rem auto 0;
|
|
color: #eef;
|
|
font-size: .8em;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
footer { color: var(--ink-soft); }
|
|
}
|
|
|
|
/* ---- typography ---- */
|
|
|
|
h2, h3 { scroll-margin-top: 1rem; }
|
|
|
|
h1 { font-size: 1.9em; margin: 0 0 .3em; line-height: 1.2; }
|
|
h2 { font-size: 1.45em; margin: 2.5em 0 .5em; padding-bottom: .2em; border-bottom: 2px solid var(--rule); }
|
|
h3 { font-size: 1.15em; margin: 2em 0 .4em; }
|
|
h2:first-child, h1 + h2 { margin-top: 1em; }
|
|
|
|
p { margin: 0 0 1em; }
|
|
|
|
a { color: #00c; color: var(--link); }
|
|
a:hover { color: #c00; color: var(--link-hover); }
|
|
|
|
code, kbd, pre {
|
|
font-family: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
|
|
font-size: .9em;
|
|
}
|
|
|
|
code, kbd { background: var(--code-bg); padding: .1em .35em; border-radius: 3px; }
|
|
|
|
/* Legacy pages carry wide code samples: scroll them, never the page. */
|
|
pre {
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
padding: .7rem;
|
|
background: var(--code-bg);
|
|
border-left: 3px solid var(--accent);
|
|
}
|
|
|
|
.lede { font-size: 1.08em; color: var(--ink-soft); }
|
|
|
|
hr { height: 1px; border: 0; background: var(--rule); margin: 2em 0; }
|
|
|
|
img { max-width: 100%; height: auto; }
|
|
|
|
/* ---- table of contents ---- */
|
|
|
|
.toc { font-size: .92em; }
|
|
|
|
@media (min-width: 62rem) {
|
|
.toc { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
|
|
}
|
|
|
|
.toc h2 {
|
|
font-size: .8em;
|
|
text-transform: uppercase;
|
|
letter-spacing: .08em;
|
|
margin: 0 0 .5em;
|
|
border: 0;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.toc ol, .toc ul { list-style: none; margin: 0 0 1.5em; padding: 0; }
|
|
.toc li { margin: 0; }
|
|
|
|
.toc a {
|
|
display: block;
|
|
padding: .2rem .5rem;
|
|
text-decoration: none;
|
|
border-left: 3px solid transparent;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.toc a:hover { background: var(--accent); }
|
|
.toc a[aria-current="true"] { border-left-color: var(--link); font-weight: bold; }
|
|
.toc .here { font-weight: bold; }
|
|
|
|
/* ---- callouts ---- */
|
|
|
|
.note {
|
|
margin: 0 0 1em;
|
|
padding: .7rem 1rem;
|
|
border-left: 4px solid var(--accent);
|
|
background: var(--chip);
|
|
font-size: .95em;
|
|
}
|
|
|
|
.note > :last-child { margin-bottom: 0; }
|
|
|
|
/* ---- the hub ---- */
|
|
|
|
.hub {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
margin: 2rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
@media (min-width: 46rem) {
|
|
.hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
}
|
|
|
|
.hub > li {
|
|
padding: 1.2rem;
|
|
background: var(--chip);
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.hub h2 {
|
|
margin: 0 0 .8em;
|
|
font-size: 1.1em;
|
|
text-transform: uppercase;
|
|
letter-spacing: .06em;
|
|
border: 0;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.hub dl { margin: 0; }
|
|
.hub dt { margin: 0 0 .1em; font-weight: bold; }
|
|
.hub dd { margin: 0 0 1em; font-size: .93em; color: var(--ink-soft); }
|
|
.hub dd:last-child { margin-bottom: 0; }
|
|
|
|
/* Option names in the glosses are short; without this a browser breaks
|
|
"--changes" after its hyphens. */
|
|
.hub code { white-space: nowrap; }
|
|
|
|
.dated { font-weight: normal; font-size: .85em; color: var(--ink-soft); }
|
|
|
|
/* ---- content tables ---- */
|
|
|
|
table.data {
|
|
border-collapse: collapse;
|
|
margin: 0 0 1em;
|
|
font-size: .92em;
|
|
}
|
|
|
|
table.data td, table.data th {
|
|
border: 1px solid var(--rule);
|
|
padding: .3em .6em;
|
|
text-align: left;
|
|
}
|
|
|
|
table.data th { background: var(--accent); }
|
|
|
|
/* ---- screenshots ---- */
|
|
|
|
figure {
|
|
margin: 0 0 1.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
figure img {
|
|
border: 1px solid var(--rule);
|
|
background: #fff;
|
|
box-shadow: 0 2px 8px var(--shadow);
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
figcaption {
|
|
margin-top: .5em;
|
|
font-size: .88em;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
/* Zoom overlay. Closed <dialog> is hidden by the UA, so nothing shows without JS. */
|
|
dialog#zoom {
|
|
max-width: 96vw;
|
|
max-height: 96vh;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
dialog#zoom img {
|
|
display: block;
|
|
max-width: 96vw;
|
|
max-height: 96vh;
|
|
width: auto;
|
|
height: auto;
|
|
cursor: zoom-out;
|
|
}
|
|
|
|
dialog#zoom::backdrop { background: rgba(0, 0, 0, .8); }
|
|
|
|
/* ---- filter box (guide options, and the FAQ) ---- */
|
|
|
|
.filter {
|
|
display: flex;
|
|
gap: .5rem;
|
|
align-items: center;
|
|
margin: 0 0 1.5rem;
|
|
}
|
|
|
|
.filter input {
|
|
flex: 1 1 auto;
|
|
padding: .5rem .7rem;
|
|
border: 1px solid var(--rule);
|
|
border-radius: .3rem;
|
|
background: var(--panel);
|
|
color: var(--ink);
|
|
font: inherit;
|
|
}
|
|
|
|
.filter output { font-size: .88em; color: var(--ink-soft); white-space: nowrap; }
|
|
|
|
/* ---- misc ---- */
|
|
|
|
.skip {
|
|
position: absolute;
|
|
left: -9999px;
|
|
}
|
|
|
|
.skip:focus {
|
|
left: 1rem;
|
|
top: 1rem;
|
|
background: var(--panel);
|
|
padding: .5rem;
|
|
z-index: 10;
|
|
}
|
|
|
|
@media print {
|
|
body { background: #fff; }
|
|
.toc, .filter { display: none; }
|
|
.wrap { display: block; border: 0; }
|
|
}
|