Get most of the Aura display implemented added to the HTML

This commit is contained in:
Oliver-Akins 2025-03-07 22:30:12 -07:00
parent f1d9fe187c
commit a830adbd2d
3 changed files with 67 additions and 1 deletions

View file

@ -29,6 +29,49 @@
font-weight: bold;
}
.aura-container {
grid-column: 1 / -1;
grid-row: 2 / span 4;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr);
position: relative;
}
.circle-fragment, .full-circle {
display: flex;
justify-content: center;
align-items: center;
}
.circle-fragment {
border-top-left-radius: 24% 100%;
border-bottom-left-radius: 25% 100%;
border-left: 2px dashed var(--accent-3);
margin-right: -5%;
}
.full-circle {
border: 2px dashed var(--accent-3);
flex-grow: 0;
border-radius: 999px;
width: 80%;
aspect-ratio: 1;
align-self: center;
justify-self: center;
grid-row: 1;
grid-column: 4;
}
.caster-silhouette {
grid-column: 4 / span 4;
grid-row: 1;
position: absolute;
left: 2rem;
width: 70%;
bottom: -10px;
}
.craft-list {
display: grid;
grid-template-rows: subgrid;
@ -49,6 +92,7 @@
[data-aspect] {
&.aspect-header {
z-index: 1;
grid-row: var(--row);
grid-column: var(--col);
}