diff --git a/index.html b/index.html index 4a0b864..342bd1b 100644 --- a/index.html +++ b/index.html @@ -198,15 +198,18 @@ text-decoration: underline #770000 0.2em; background-color: #ffbbbb; } - .explanation-icon.verified { color: #007700; } - .explanation-icon.ok { color: #002266; } - .explanation-icon.valid { color: #777700; } - .explanation-icon.invalid { color: #770000; } + .explanation-box-wrapper { + align-self: start; + justify-self: center; + display: flex; + flex-flow: column; + align-items: center; + justify-items: center; + gap: 0.5em; + } .explanation-box { padding: 1em; border-radius: 0.5em; - align-self: start; - justify-self: center; width: 20em; display: grid; column-gap: 0.5em; @@ -215,6 +218,10 @@ grid-template-areas: "icon headline" "icon explanation" } + .explanation-icon.verified { color: #007700; } + .explanation-icon.ok { color: #002266; } + .explanation-icon.valid { color: #777700; } + .explanation-icon.invalid { color: #770000; } .explanation-box.verified { background-color: #bbffbb; } .explanation-box.ok { background-color: #aaddff; } .explanation-box.valid { background-color: #ffffbb; } diff --git a/src/main.rs b/src/main.rs index fd49266..db063bf 100644 --- a/src/main.rs +++ b/src/main.rs @@ -140,8 +140,10 @@ fn MainContent() -> impl IntoView { } }); - let get_explanation_box_class = + let get_type_explanation_box_class = move || format!("explanation-box {result}", result = eval_type_result()); + let get_namespace_explanation_box_class = + move || format!("explanation-box {result}", result = eval_namespace_result()); view! {