RC-31 | Armour | Table Setup
This commit is contained in:
parent
56fe115407
commit
3ba588a3c1
3 changed files with 102 additions and 2 deletions
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue