euv-docs 0.1.6

A VuePress-style documentation site generator powered by euv + euv-ui (Rust/WASM).
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

use super::*;

// Stylesheet definitions for the password-gate component.
//
// Generated by the `class!` macro. All rules are scoped to the
// `pw-gate-…` class names declared by the matching `fn.rs` so the
// styles never leak into surrounding `euv_markdown` content. The
// layout is deliberately simple — a centred card on a translucent
// background — so the gate works on both desktop and mobile shells
// without any responsive branching.

use euv::class;

class! {
    // Centred wrapper that fills the doc-page main area and pins the
    // gate card in the vertical middle on tall viewports.
    pub c_pw_gate_wrapper {
        display: "flex";
        align-items: "center";
        justify-content: "center";
        min-height: "60vh";
        padding: "2rem 1rem";
    }

    // The card itself: same border/background language as the doc-page
    // main so the gate doesn't visually clash with the rest of the
    // site, but with a slightly heavier border to signal that the
    // content behind it is gated. Falls back to GitHub Primer colours
    // when the host page hasn't defined theme variables.
    pub c_pw_gate_card {
        max-width: "28rem";
        width: "100%";
        padding: "1.75rem 1.5rem";
        border: format!("1px solid {}", "#d0d7de");
        border-radius: "0.75rem";
        background: "#ffffff";
        color: "#1f2328";
        box-shadow: "0 1px 3px rgba(0,0,0,0.04)";
    }

    // Page title above the form.
    pub c_pw_gate_title {
        margin: "0 0 0.5rem 0";
        font-size: "1.25rem";
        font-weight: "600";
        line-height: "1.3";
    }

    // Short paragraph explaining the gate.
    pub c_pw_gate_hint {
        margin: "0 0 1.25rem 0";
        font-size: "0.9rem";
        line-height: "1.5";
        color: "#57606a";
    }

    // Password input — default (non-error) state.
    pub c_pw_gate_input {
        display: "block";
        width: "100%";
        padding: "0.6rem 0.75rem";
        border: format!("1px solid {}", "#d0d7de");
        border-radius: "0.375rem";
        background: "#ffffff";
        color: "#1f2328";
        font-size: "1rem";
        line-height: "1.4";
        transition: "border-color 120ms ease";

        :focus {
            border-color: "#0969da";
            outline: "none";
            box-shadow: format!("0 0 0 3px {}", "rgba(9,105,218,0.18)");
        }
    }

    // Password input — error state used after a wrong submit attempt.
    // The component switches between c_pw_gate_input and this class
    // via a Signal-driven branch.
    pub c_pw_gate_input_error {
        display: "block";
        width: "100%";
        padding: "0.6rem 0.75rem";
        border: format!("1px solid {}", "#cf222e");
        border-radius: "0.375rem";
        background: "#ffffff";
        color: "#1f2328";
        font-size: "1rem";
        line-height: "1.4";

        :focus {
            border-color: "#cf222e";
            outline: "none";
            box-shadow: format!("0 0 0 3px {}", "rgba(207,34,46,0.18)");
        }
    }

    // Red error text rendered below the input on a wrong submit.
    pub c_pw_gate_error {
        margin: "0.5rem 0 0 0";
        font-size: "0.85rem";
        line-height: "1.4";
        color: "#cf222e";
    }

    // Submit button — same Primary language as the rest of the docs
    // site so the unlock action feels like the canonical continue
    // affordance.
    pub c_pw_gate_submit {
        display: "inline-block";
        margin-top: "1rem";
        padding: "0.6rem 1.1rem";
        background: "#0969da";
        color: "#ffffff";
        border: "none";
        border-radius: "0.375rem";
        font-size: "0.95rem";
        font-weight: "500";
        cursor: "pointer";
        transition: "background-color 120ms ease";

        : hover:not(: disabled) {
            background: "#0860c7";
        }

        :disabled {
            opacity: "0.7";
            cursor: "not-allowed";
        }
    }
}