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

View file

@ -18,7 +18,49 @@
> >
{{!-- * Armour --}} {{!-- * 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 --}} {{!-- * Fate & Advancement --}}
<div class="fate"> <div class="fate">

View file

@ -153,6 +153,11 @@
z-index: 2; z-index: 2;
} }
&.small {
--size: 30px;
font-size: 1.15rem;
}
&.dual { &.dual {
font-size: var(--font-size-14); font-size: var(--font-size-14);
--distance-from-edge: 4px; --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;
}
}
}
} }