feat: render interactive ashen fields world
This commit is contained in:
@@ -10,6 +10,14 @@
|
||||
background: linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 16%), var(--ar-panel);
|
||||
}
|
||||
|
||||
.context-panel h2 {
|
||||
margin: var(--ar-space-2) 0 var(--ar-space-3);
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.context-panel__eyebrow {
|
||||
display: block;
|
||||
padding-block-end: var(--ar-space-3);
|
||||
@@ -24,3 +32,53 @@
|
||||
font-size: var(--ar-font-sm);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.context-panel__selection {
|
||||
margin: 0 0 var(--ar-space-3);
|
||||
color: var(--ar-gold);
|
||||
font-size: var(--ar-font-sm);
|
||||
}
|
||||
|
||||
.context-panel__artwork {
|
||||
display: block;
|
||||
inline-size: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-block-end: var(--ar-space-3);
|
||||
border: 1px solid var(--ar-border);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.context-panel__description {
|
||||
margin: 0 0 var(--ar-space-4);
|
||||
color: var(--ar-text-muted);
|
||||
font-size: var(--ar-font-sm);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.context-panel__facts {
|
||||
display: grid;
|
||||
gap: var(--ar-space-3);
|
||||
margin: 0;
|
||||
padding-block-start: var(--ar-space-3);
|
||||
border-block-start: 1px solid var(--ar-border);
|
||||
}
|
||||
|
||||
.context-panel__facts div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--ar-space-3);
|
||||
}
|
||||
|
||||
.context-panel__facts dt {
|
||||
color: var(--ar-text-muted);
|
||||
font-size: var(--ar-font-sm);
|
||||
}
|
||||
|
||||
.context-panel__facts dd {
|
||||
margin: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
}
|
||||
|
||||
.context-panel__safe {
|
||||
color: var(--ar-success);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user