Foundry/ripcrypt
1
0
Fork 0
Code Issues 22 Pull requests Releases Activity Actions

Get most of the Aura display implemented added to the HTML

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

22
templates/Apps/HeroCraftCardV1/content.hbs
View file

@ -1,4 +1,26 @@
<div class="HeroCraftCardV1">
<div class="col-header">
Glimcraft
</div>
<div class="aura-container">
<div class="circle-fragment">10</div>
<div class="circle-fragment">8</div>
<div class="circle-fragment">6</div>
<div class="full-circle">4</div>
<rc-svg
class="caster-silhouette"
name="caster-silhouette.v1"
var:fill="var(--accent-2)"
></rc-svg>
<div class="aura-values">
<div class="dual-pill">
<span class="label">Aura</span>
<span class="value">4</span>
<span class="value">6</span>
</div>
</div>
</div>
<div data-aspect="focus" class="col-header aspect-header">
<span class="name">Focus</span>
<span class="small">Details</span>

44
templates/Apps/HeroCraftCardV1/style.css
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);
}