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>
150 lines
3.2 KiB
CSS
150 lines
3.2 KiB
CSS
/* Styles specific to guide.html: the platform switcher, the option tab strip and
|
|
the option entries. The shared page chrome is in doc.css, loaded first. */
|
|
|
|
/* Anchor targets must clear the sticky tab strip. */
|
|
h2, h3, section.tab { scroll-margin-top: 5.5rem; }
|
|
|
|
.cli {
|
|
font-family: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
|
|
font-size: .9em;
|
|
}
|
|
|
|
/* ---- platform switcher ---- */
|
|
|
|
.platforms {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .3rem;
|
|
margin: 0 0 1.5rem;
|
|
padding: .3rem;
|
|
background: var(--chip);
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.platforms button {
|
|
flex: 1 1 8rem;
|
|
padding: .5rem .7rem;
|
|
border: 0;
|
|
border-radius: .35rem;
|
|
background: transparent;
|
|
color: var(--ink);
|
|
font: inherit;
|
|
font-size: .95em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.platforms button:hover { background: var(--accent); }
|
|
|
|
.platforms button[aria-pressed="true"] {
|
|
background: var(--panel);
|
|
box-shadow: 0 1px 3px var(--shadow);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.platforms button small { display: block; font-weight: normal; color: var(--ink-soft); font-size: .82em; }
|
|
|
|
/* Hide only what the chosen platform excludes: an "unhide" rule would need to
|
|
outweigh the hiding one, and loses on specificity. Without scripting no
|
|
platform is set, so every variant stays visible. */
|
|
html[data-platform="win"] [data-for]:not([data-for~="win"]),
|
|
html[data-platform="web"] [data-for]:not([data-for~="web"]),
|
|
html[data-platform="droid"] [data-for]:not([data-for~="droid"]) { display: none; }
|
|
|
|
/* ---- platform badges ---- */
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: .05em .5em;
|
|
border-radius: 1em;
|
|
background: var(--accent);
|
|
color: var(--ink);
|
|
font-size: .78em;
|
|
font-weight: bold;
|
|
vertical-align: .1em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---- screenshots ---- */
|
|
|
|
figure img[data-for~="droid"] { max-width: 18rem; }
|
|
|
|
/* ---- option tab strip ---- */
|
|
|
|
.tabstrip {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .2rem;
|
|
margin: 0 0 1.5rem;
|
|
padding: .4rem;
|
|
background: var(--chip);
|
|
border-radius: .4rem;
|
|
box-shadow: 0 2px 6px var(--shadow);
|
|
}
|
|
|
|
.tabstrip a {
|
|
padding: .3rem .6rem;
|
|
border-radius: .25rem;
|
|
text-decoration: none;
|
|
color: var(--ink);
|
|
font-size: .9em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tabstrip a:hover { background: var(--accent); }
|
|
.tabstrip a[aria-current="true"] { background: var(--panel); font-weight: bold; box-shadow: 0 1px 3px var(--shadow); }
|
|
|
|
/* ---- option entries ---- */
|
|
|
|
.opt {
|
|
margin: 0 0 1.2em;
|
|
padding-bottom: 1.2em;
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
.opt:last-child { border-bottom: 0; }
|
|
|
|
.opt-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .5rem;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
margin-bottom: .3em;
|
|
}
|
|
|
|
.opt-name { font-weight: bold; }
|
|
|
|
.opt .cli {
|
|
background: var(--code-bg);
|
|
padding: .1em .45em;
|
|
border-radius: 3px;
|
|
color: var(--ink-soft);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.opt p { margin: 0 0 .5em; font-size: .95em; }
|
|
.opt p:last-child { margin-bottom: 0; }
|
|
|
|
.opt[hidden] { display: none; }
|
|
|
|
/* ---- misc ---- */
|
|
|
|
table.mime {
|
|
border-collapse: collapse;
|
|
margin: 0 0 1em;
|
|
font-size: .92em;
|
|
}
|
|
|
|
table.mime td {
|
|
border: 1px solid var(--rule);
|
|
padding: .3em .6em;
|
|
}
|
|
|
|
@media print {
|
|
.tabstrip, .platforms { display: none; }
|
|
html[data-platform] [data-for] { display: revert !important; }
|
|
}
|