steppy-dev 0.3.0__py3-none-any.whl

steppy/templates/static/guides.css

@@ -0,0 +1,678 @@
+/* Steppy static guide stylesheet — shared across all generated pages.
+   Generated by `steppy build` (target=static). The guide content rules
+   mirror the inline <style> in templates/guide.fragment.html.j2; the
+   site chrome rules (.steppy-site-header, .steppy-main, .steppy-locale-switch,
+   .steppy-index-list, .steppy-site-footer) are unique to the static target. */
+
+/* ── Site chrome ─────────────────────────────────────────────────────── */
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+    color: #333;
+    background: #fafbfc;
+}
+
+.steppy-site-header {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    flex-wrap: wrap;
+    padding: 16px 32px;
+    background: #ffffff;
+    border-bottom: 1px solid #e1e4e8;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.steppy-site-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #2c3e50;
+    text-decoration: none;
+}
+
+a.steppy-site-title:hover {
+    color: #3498db;
+}
+
+.steppy-breadcrumb {
+    font-size: 14px;
+    color: #7f8c8d;
+}
+
+.steppy-breadcrumb a {
+    color: #3498db;
+    text-decoration: none;
+}
+
+.steppy-breadcrumb a:hover {
+    text-decoration: underline;
+}
+
+.steppy-breadcrumb-sep {
+    margin: 0 6px;
+    color: #bdc3c7;
+}
+
+.steppy-locale-switch {
+    margin-left: auto;
+}
+
+.steppy-locale-switch ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: 8px;
+}
+
+.steppy-locale-switch a,
+.steppy-locale-switch span {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 16px;
+    font-size: 13px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.steppy-locale-switch a {
+    color: #3498db;
+    border: 1px solid #d6eaf8;
+}
+
+.steppy-locale-switch a:hover {
+    background: #ebf5fb;
+}
+
+.steppy-locale-switch span[aria-current="true"] {
+    background: #3498db;
+    color: #ffffff;
+}
+
+/* Guide-format row (Step by Step / Interactive / Video). Emitted by
+   static/_mode_links.html.j2 on every rendering of a guide that has more than
+   one. Muted next to the locale switcher on purpose: this row moves you between
+   presentations of the page you are already on, not between languages. */
+.steppy-mode-links ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: 8px;
+}
+
+.steppy-mode-links a,
+.steppy-mode-links span {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 16px;
+    font-size: 13px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.steppy-mode-links a {
+    color: #5d6d7e;
+    border: 1px solid #e5e8eb;
+}
+
+.steppy-mode-links a:hover {
+    background: #f4f6f7;
+}
+
+.steppy-mode-links span[aria-current="true"] {
+    background: #eaeded;
+    color: #2c3e50;
+}
+
+/* Layout switcher (desktop / mobile) — same shape as locale switcher. */
+/* "Download PDF" link — only emitted when the site was built with
+   `steppy build --pdf`, and hidden in print (see the @media print block). */
+.steppy-pdf-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border: 1px solid #d6dbdf;
+    border-radius: 4px;
+    color: #2c3e50;
+    text-decoration: none;
+    font-size: 13px;
+}
+
+.steppy-pdf-link:hover {
+    background: #ebf5fb;
+}
+
+.steppy-layout-switch {
+    display: flex;
+    gap: 8px;
+}
+
+.steppy-layout-switch ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: 4px;
+}
+
+.steppy-layout-switch button {
+    border: 1px solid #d6dbdf;
+    background: #ffffff;
+    color: #2c3e50;
+    text-decoration: none;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-family: inherit;
+    cursor: pointer;
+}
+
+.steppy-layout-switch button:hover {
+    background: #ebf5fb;
+}
+
+.steppy-layout-switch button[aria-current="true"] {
+    background: #3498db;
+    color: #ffffff;
+    border-color: #3498db;
+}
+
+/* In-page layout toggle: the JS adds .steppy-layout-active to the matching
+   wrapper. Layout names are arbitrary (declared in build config) so we can't
+   hardcode attribute selectors here — class toggle keeps it open-ended. */
+.steppy-layout {
+    display: none;
+}
+
+.steppy-layout.steppy-layout-active {
+    display: block;
+}
+
+.steppy-main {
+    padding: 32px 16px;
+}
+
+.steppy-site-footer {
+    padding: 24px 32px;
+    text-align: center;
+    color: #95a5a6;
+    font-size: 13px;
+    border-top: 1px solid #e1e4e8;
+    background: #ffffff;
+    margin-top: 48px;
+}
+
+.steppy-site-footer a {
+    color: #3498db;
+}
+
+/* ── Index page ──────────────────────────────────────────────────────── */
+
+.steppy-index {
+    max-width: 720px;
+    margin: 0 auto;
+}
+
+.steppy-index h1 {
+    font-size: 28px;
+    color: #2c3e50;
+    border-bottom: 3px solid #3498db;
+    padding-bottom: 12px;
+    margin-bottom: 24px;
+}
+
+.steppy-index-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.steppy-index-list li {
+    margin-bottom: 12px;
+}
+
+.steppy-index-list a {
+    display: block;
+    padding: 16px 20px;
+    background: #ffffff;
+    border: 1px solid #e1e4e8;
+    border-radius: 6px;
+    text-decoration: none;
+    color: #2c3e50;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.steppy-index-list a:hover {
+    border-color: #3498db;
+    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.12);
+}
+
+.steppy-index-title {
+    font-size: 18px;
+    font-weight: 600;
+    display: block;
+}
+
+.steppy-index-eyebrow {
+    display: block;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #3498db;
+    margin-bottom: 4px;
+}
+
+.steppy-index-meta {
+    display: block;
+    font-size: 13px;
+    color: #7f8c8d;
+    margin-top: 4px;
+}
+
+.steppy-index-desc {
+    display: block;
+    font-size: 14px;
+    color: #555;
+    margin-top: 6px;
+}
+
+.steppy-index-empty {
+    color: #7f8c8d;
+    font-style: italic;
+}
+
+.steppy-index-onboarding a {
+    border-left: 4px solid #3498db;
+}
+
+.steppy-index-group a {
+    border-left: 4px solid #95a5a6;
+}
+
+.steppy-group-description {
+    color: #555;
+    margin: -12px 0 24px 0;
+    font-size: 15px;
+}
+
+/* ── Onboarding landing page ─────────────────────────────────────────── */
+
+.steppy-onboarding {
+    max-width: 720px;
+    margin: 0 auto;
+}
+
+.steppy-onboarding h1 {
+    font-size: 28px;
+    color: #2c3e50;
+    border-bottom: 3px solid #3498db;
+    padding-bottom: 12px;
+    margin-bottom: 16px;
+}
+
+.steppy-onboarding-description {
+    font-size: 16px;
+    color: #555;
+    margin-bottom: 24px;
+}
+
+.steppy-onboarding-steps {
+    list-style: none;
+    counter-reset: steppy-onb;
+    margin: 0 0 32px 0;
+    padding: 0;
+}
+
+.steppy-onboarding-steps li {
+    margin-bottom: 12px;
+}
+
+.steppy-onboarding-steps a {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 18px;
+    background: #ffffff;
+    border: 1px solid #e1e4e8;
+    border-radius: 6px;
+    text-decoration: none;
+    color: #2c3e50;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.steppy-onboarding-steps a:hover {
+    border-color: #3498db;
+    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.12);
+}
+
+.steppy-onboarding-step-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background-color: #3498db;
+    color: #ffffff;
+    border-radius: 50%;
+    font-weight: 700;
+    font-size: 15px;
+    flex-shrink: 0;
+}
+
+.steppy-onboarding-step-title {
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.steppy-onboarding-cta {
+    text-align: center;
+}
+
+.steppy-onboarding-start {
+    display: inline-block;
+    padding: 12px 28px;
+    background: #3498db;
+    color: #ffffff;
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: 6px;
+    transition: background 0.15s ease;
+}
+
+.steppy-onboarding-start:hover {
+    background: #2980b9;
+}
+
+/* ── Onboarding strip (per-guide page) ───────────────────────────────── */
+
+.steppy-onboarding-strip {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 32px;
+    background: #ebf5fb;
+    border-bottom: 1px solid #d6eaf8;
+    font-size: 14px;
+}
+
+.steppy-onboarding-strip a {
+    color: #2980b9;
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.steppy-onboarding-strip a:hover {
+    text-decoration: underline;
+}
+
+.steppy-onboarding-strip-progress {
+    color: #2c3e50;
+}
+
+.steppy-onboarding-strip-nav {
+    display: inline-flex;
+    gap: 16px;
+}
+
+.steppy-onboarding-disabled {
+    color: #95a5a6;
+    cursor: default;
+    font-weight: 500;
+}
+
+/* ── Guide content (mirrors guide.fragment.html.j2 inline styles) ───── */
+
+.steppy-guide {
+    --steppy-cursor-size: 24px;
+    --steppy-cursor-color: #0f172a;
+    --steppy-cursor-accent: #2563eb;
+    --steppy-cursor-ring: rgba(37, 99, 235, 0.55);
+    --steppy-cursor-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    --steppy-z-screenshot: 1;
+    --steppy-z-cursor: 10;
+    --steppy-z-ripple: 11;
+    --steppy-z-glyph: 12;
+    /* Print/PDF: cap how tall a screenshot may render. Chromium cannot split
+       an image across a page break — an uncapped full-page or mobile capture
+       is clipped instead. Scaled down, it fits. */
+    --steppy-print-max-image-height: 180mm;
+    line-height: 1.6;
+    color: #333;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+.steppy-guide h1 {
+    font-size: 32px;
+    color: #2c3e50;
+    margin-bottom: 10px;
+    border-bottom: 3px solid #3498db;
+    padding-bottom: 10px;
+}
+
+.steppy-guide .steppy-role-badge {
+    display: inline-block;
+    background-color: #3498db;
+    color: white;
+    padding: 6px 16px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 30px;
+}
+
+.steppy-guide .steppy-step {
+    margin-bottom: 50px;
+}
+
+.steppy-guide .steppy-step h2 {
+    font-size: 24px;
+    color: #2c3e50;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+}
+
+.steppy-guide .steppy-step-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background-color: #3498db;
+    color: white;
+    border-radius: 50%;
+    font-weight: bold;
+    font-size: 18px;
+    margin-right: 12px;
+    flex-shrink: 0;
+}
+
+.steppy-guide .steppy-step-subtitle {
+    font-size: 18px;
+    color: #7f8c8d;
+    font-weight: 500;
+    margin-top: -10px;
+    margin-bottom: 15px;
+    font-style: italic;
+}
+
+.steppy-guide .steppy-step-content {
+    font-size: 16px;
+    color: #555;
+    margin-bottom: 20px;
+    line-height: 1.8;
+}
+
+.steppy-guide .steppy-stage {
+    position: relative;
+    line-height: 0;
+}
+
+.steppy-guide .steppy-stage img {
+    /* width:auto caps display at the screenshot's intrinsic pixel width so a
+       dense capture (e.g. mobile at device_scale_factor=3) fills the column,
+       while a low-res capture renders at native size instead of upscaled/blurry.
+       max-width:100% keeps it responsive. */
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    display: block;
+    position: relative;
+    z-index: var(--steppy-z-screenshot);
+}
+
+.steppy-guide .steppy-cursor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--steppy-cursor-size);
+    height: var(--steppy-cursor-size);
+    pointer-events: none;
+    z-index: var(--steppy-z-cursor);
+    opacity: 0;
+    transition: opacity 200ms ease-in-out;
+    background: var(--steppy-cursor-color);
+    clip-path: polygon(0 0, 0 75%, 25% 55%, 45% 95%, 60% 85%, 40% 50%, 75% 40%);
+    filter: drop-shadow(var(--steppy-cursor-shadow));
+    transform-origin: 0 0;
+}
+
+.steppy-guide .steppy-cursor.visible {
+    opacity: 1;
+}
+
+.steppy-guide .steppy-cursor.pulse {
+    animation: steppy-pulse-anim 200ms ease-in-out;
+}
+
+@keyframes steppy-pulse-anim {
+    0%, 100% { transform: scale(1); }
+    50%      { transform: scale(1.25); }
+}
+
+.steppy-guide .steppy-ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    margin-left: -6px;
+    margin-top: -6px;
+    border-radius: 50%;
+    border: 2px solid var(--steppy-cursor-ring);
+    background: transparent;
+    z-index: var(--steppy-z-ripple);
+    pointer-events: none;
+    opacity: 0;
+}
+
+.steppy-guide .steppy-ripple.fire {
+    animation: steppy-ripple-anim 500ms ease-out forwards;
+}
+
+@keyframes steppy-ripple-anim {
+    0%   { width: 12px; height: 12px; margin-left: -6px; margin-top: -6px; opacity: 0.9; }
+    100% { width: 72px; height: 72px; margin-left: -36px; margin-top: -36px; opacity: 0; }
+}
+
+.steppy-guide .steppy-kbd {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #111827;
+    color: #fff;
+    font: 12px/1 ui-monospace, Menlo, Consolas, monospace;
+    padding: 5px 7px;
+    border-radius: 4px;
+    z-index: var(--steppy-z-glyph);
+    opacity: 0;
+    pointer-events: none;
+    white-space: nowrap;
+    transition: opacity 150ms ease-in-out;
+}
+
+.steppy-guide .steppy-kbd.visible {
+    opacity: 1;
+}
+
+@media print {
+    /* Site chrome is navigation — it means nothing on paper, and dropping it
+       is what lets `steppy build --pdf` print the published page as-is.
+       (Inactive layouts are already display:none, so a multi-layout page
+       prints exactly the layout the reader is looking at.) */
+    .steppy-site-header,
+    .steppy-breadcrumb,
+    .steppy-locale-switch,
+    .steppy-layout-switch,
+    .steppy-mode-links,
+    .steppy-onboarding-strip,
+    .steppy-pdf-link,
+    .steppy-site-footer {
+        display: none !important;
+    }
+
+    body {
+        background: #fff;
+        /* Keep the step badges / role chip coloured even when the viewer
+           disables background graphics. */
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+
+    .steppy-main {
+        padding: 0;
+        margin: 0;
+    }
+
+    .steppy-guide .steppy-step {
+        page-break-inside: avoid;
+    }
+
+    .steppy-guide .steppy-stage img {
+        max-height: var(--steppy-print-max-image-height);
+        box-shadow: none;
+        page-break-inside: avoid;
+    }
+
+    .steppy-guide .steppy-cursor,
+    .steppy-guide .steppy-ripple,
+    .steppy-guide .steppy-kbd {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .steppy-site-header {
+        padding: 12px 16px;
+        gap: 12px;
+    }
+
+    .steppy-locale-switch {
+        margin-left: 0;
+        width: 100%;
+    }
+
+    .steppy-guide h1 {
+        font-size: 24px;
+    }
+
+    .steppy-guide .steppy-step h2 {
+        font-size: 20px;
+    }
+
+    .steppy-guide .steppy-step-number {
+        width: 30px;
+        height: 30px;
+        font-size: 16px;
+    }
+}