WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): refine timeline and blockquote layouts
Quality / quality (ubuntu-latest) (push) Failing after 10m2s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-25 17:37:29 +05:30
parent e71885d51c
commit d2e24eb089
3 changed files with 63 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/Blockquote.wrn
+20
View File
@@ -12,6 +12,7 @@ component Blockquote {
variant: string = "default"
quoteMark: boolean = true
italic: boolean = true
maxWidth: string = "xl"
class: string = ""
}
@@ -24,6 +25,7 @@ component Blockquote {
data-align="{align}"
data-variant="{variant}"
data-italic="{italic}"
data-max-width="{maxWidth}"
>
<blockquote cite="{citationUrl}">
{#if quoteMark}
@@ -73,10 +75,17 @@ component Blockquote {
display: grid;
gap: 1.25rem;
width: 100%;
max-width: var(--wrn-blockquote-max-width, 48rem);
color: var(--wrn-color-text);
text-align: left;
}
.wrn-next--blockquote[data-max-width="sm"] { --wrn-blockquote-max-width: 32rem; }
.wrn-next--blockquote[data-max-width="md"] { --wrn-blockquote-max-width: 40rem; }
.wrn-next--blockquote[data-max-width="lg"] { --wrn-blockquote-max-width: 48rem; }
.wrn-next--blockquote[data-max-width="xl"] { --wrn-blockquote-max-width: 64rem; }
.wrn-next--blockquote[data-max-width="full"] { --wrn-blockquote-max-width: 100%; }
.wrn-next--blockquote[data-size="xs"] {
--wrn-blockquote-font-size: 0.875rem;
--wrn-blockquote-mark-size: 3rem;
@@ -189,8 +198,19 @@ component Blockquote {
.wrn-next--blockquote[data-align="center"] {
text-align: center;
margin-inline: auto;
}
.wrn-next--blockquote:is([data-variant="contained"], [data-variant="spotlight"], [data-variant="card"]) {
padding: clamp(1.5rem, 4vw, 3rem);
border: 1px solid color-mix(in srgb, var(--wrn-blockquote-color) 24%, var(--wrn-color-border));
border-radius: calc(var(--wrn-radius) * 2);
background: linear-gradient(145deg, color-mix(in srgb, var(--wrn-blockquote-color) 8%, var(--wrn-color-surface-raised)), var(--wrn-color-surface-raised));
box-shadow: var(--wrn-shadow-1);
}
.wrn-next--blockquote[data-variant="spotlight"] > blockquote { padding-top: calc(var(--wrn-blockquote-mark-size) * 0.55); }
.wrn-next--blockquote[data-align="right"],
.wrn-next--blockquote[data-align="end"] {
text-align: right;