diff --git a/crates/app/src/langs/en-US.toml b/crates/app/src/langs/en-US.toml index 270feec..76e0490 100644 --- a/crates/app/src/langs/en-US.toml +++ b/crates/app/src/langs/en-US.toml @@ -38,6 +38,9 @@ version = "1.0.0" "general:label.account_banned" = "Account banned" "general:label.account_banned_body" = "Your account has been banned for violating our policies." "general:label.better_with_account" = "It's better with an account! Login or sign up to explore more." +"general:label.could_not_find_post" = "Could not find original post..." +"general:label.timeline_end" = "That's a wrap!" +"general:label.loading" = "Working on it!" "general:label.supporter_motivation" = "Become a supporter!" "general:action.become_supporter" = "Become supporter" diff --git a/crates/app/src/public/css/root.css b/crates/app/src/public/css/root.css index a0f95f5..41db0d5 100644 --- a/crates/app/src/public/css/root.css +++ b/crates/app/src/public/css/root.css @@ -213,6 +213,14 @@ ol { margin-left: var(--pad-4); } +pre { + padding: var(--pad-4); +} + +code { + padding: var(--pad-1); +} + pre, code { font-family: "Jetbrains Mono", "Fire Code", monospace; @@ -221,18 +229,12 @@ code { overflow: auto; background: var(--color-lowered); border-radius: var(--radius); - padding: var(--pad-1); font-size: 0.8rem; } -pre { - padding: var(--pad-4); -} - svg.icon { stroke: currentColor; width: 18px; - width: 1em; height: 1em; } @@ -263,7 +265,6 @@ code { overflow-wrap: normal; text-wrap: pretty; word-wrap: break-word; - overflow-wrap: anywhere; } h1, @@ -275,7 +276,6 @@ h6 { margin: 0; font-weight: 700; width: -moz-max-content; - width: max-content; position: relative; max-width: 100%; } @@ -350,3 +350,42 @@ blockquote { border-left: solid 5px var(--color-super-lowered); font-style: italic; } + +.skel { + display: block; + border-radius: var(--radius); + background: var(--color-raised); + animation: skel ease-in-out infinite 2s forwards running; + transition: opacity 0.15s; +} + +@keyframes skel { + from { + background: var(--color-raised); + } + + 50% { + background: var(--color-lowered); + } + + to { + background: var(--color-raised); + } +} + +.loader { + animation: spin linear infinite 2s forwards running; + display: flex; + justify-content: center; + align-items: center; +} + +@keyframes spin { + from { + transform: rotateZ(0deg); + } + + to { + transform: rotateZ(360deg); + } +} diff --git a/crates/app/src/public/css/style.css b/crates/app/src/public/css/style.css index fef2659..8e9bbce 100644 --- a/crates/app/src/public/css/style.css +++ b/crates/app/src/public/css/style.css @@ -565,11 +565,9 @@ select:focus { nav { background: var(--color-primary); color: var(--color-text-primary) !important; - color: inherit; width: 100%; display: flex; justify-content: space-between; - color: var(--color-text); position: sticky; top: 0; z-index: 6374; @@ -722,13 +720,12 @@ dialog { position: fixed; bottom: 0; top: 0; - display: flex; + display: none; background: var(--color-surface); border: solid 1px var(--color-super-lowered) !important; border-radius: var(--radius); max-width: 100%; border-style: none; - display: none; margin: auto; color: var(--color-text); animation: popin ease-in-out 1 0.1s forwards running; diff --git a/crates/app/src/public/html/body.lisp b/crates/app/src/public/html/body.lisp index 6991899..16a47d8 100644 --- a/crates/app/src/public/html/body.lisp +++ b/crates/app/src/public/html/body.lisp @@ -1,5 +1,23 @@ (div ("id" "toast_zone")) +; templates +(template + ("id" "loading_skeleton") + (div + ("class" "flex flex-col gap-2") + ("ui_ident" "loading_skel") + (div + ("class" "card lowered green flex items-center gap-2") + (div ("class" "loader") (icon (text "loader-circle"))) + (span (str (text "general:label.loading")))) + (div + ("class" "card secondary flex gap-2") + (div ("class" "skel avatar")) + (div + ("class" "flex flex-col gap-2 w-full") + (div ("class" "skel") ("style" "width: 25%; height: 25px;")) + (div ("class" "skel") ("style" "width: 100%; height: 150px")))))) + ; random js (text "