RC-31 | Armour | Table Setup

This commit is contained in:
Oliver-Akins 2025-01-05 23:28:29 -07:00
parent 56fe115407
commit 3ba588a3c1
3 changed files with 102 additions and 2 deletions

View file

@ -34,6 +34,7 @@
"singular": "Weapon",
"plural": "Weapons"
},
"armour": "Armour",
"wear": "Wear",
"damage": "Damage",
"guts": "Guts",
@ -46,7 +47,14 @@
"gold": "Gold",
"silver": "Silver",
"copper": "Copper"
}
},
"anatomy": {
"head": "Head",
"body": "Body",
"arms": "Arms",
"legs": "Legs"
},
"shield": "Shield"
},
"setting": {
"abbrAccess": {

View file

@ -18,7 +18,49 @@
>
{{!-- * Armour --}}
<div class="armour"></div>
<div class="armour">
<div class="section-header label row-alt">
{{ rc-i18n "RipCrypt.common.armour" }}
</div>
<div class="person">
<div class="head">
<div class="compass small">0</div>
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span>
</div>
<div class="body">
<div class="compass small">0</div>
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.body" }}</span>
</div>
<div class="arms">
<div class="compass small">0</div>
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.arms" }}</span>
</div>
<div class="legs">
<div class="compass small">0</div>
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.legs" }}</span>
</div>
<div class="shield">
<span class="label">{{ rc-i18n "RipCrypt.common.shield" }}</span>
</div>
</div>
<ul class="armour-items">
<li class="row-alt">
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span>
</li>
<li>
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.body" }}</span>
</li>
<li class="row-alt">
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.arms" }}</span>
</li>
<li>
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.legs" }}</span>
</li>
<li class="row-alt">
<span class="label">{{ rc-i18n "RipCrypt.common.shield" }}</span>
</li>
</ul>
</div>
{{!-- * Fate & Advancement --}}
<div class="fate">

View file

@ -153,6 +153,11 @@
z-index: 2;
}
&.small {
--size: 30px;
font-size: 1.15rem;
}
&.dual {
font-size: var(--font-size-14);
--distance-from-edge: 4px;
@ -185,4 +190,49 @@
}
}
}
.armour {
grid-column: -2 / span 1;
grid-row: 1 / -1;
display: grid;
grid-template-rows: subgrid;
.section-header {
text-align: right;
}
.person {
grid-row: 2 / span 9;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
justify-items: center;
align-items: center;
> div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Positioning */
.head, .body, .legs { grid-column: 1; }
.arms, .shield { grid-column: 2; }
.head { grid-row: 1; }
.body, .arms { grid-row: 2; }
.legs, .shield { grid-row: 3; }
.shield { align-self: end; }
.armour-items {
display: contents;
> li {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
}
}
}