User:Kator278/Sandbox: Difference between revisions

→‎Character List: Flexbox gap attribute is too new, replaced layout with grid.
(→‎Character List: Flexbox gap attribute is too new, replaced layout with grid.)
Line 20: Line 20:


<li>
<li>
<div style="display:flex; list-style:none; width:min-content; margin:0 auto; padding:5px; gap:5px; background-color:#26486b60;">
<div style="list-style:none; display:grid; grid-auto-rows:50px; grid-auto-columns:50px; grid-auto-flow:column; width:min-content; margin:0 auto; padding:5px; grid-gap:5px; background-color:#26486b60;">
     [[File:Majsoul_Character_Ichihime-bighead.png|160px|none]]
<div style="grid-column:1 / span 3; grid-row:1 / span 3;">
  <div style="display:flex; flex-direction:column; gap:5px;">
     [[File:Majsoul_Character_Ichihime-bighead.png|x160px|none]]
     [[File:Majsoul_Character_Ichihime_bond-smallhead.png|50px|none]]
</div>
     [[File:Majsoul_Character_Ichihime_cos1-smallhead.png|50px|none]]
     [[File:Majsoul_Character_Ichihime_bond-smallhead.png|x50px|none]]
     [[File:Majsoul_Character_Ichihime_cos2-smallhead.png|50px|none]]
     [[File:Majsoul_Character_Ichihime_cos1-smallhead.png|x50px|none]]
  </div>
     [[File:Majsoul_Character_Ichihime_cos2-smallhead.png|x50px|none]]
</div>
</div>
'''Ichihime''' (一姫) <small style="color:#999;">(Default)</small>
'''Ichihime''' (一姫) <small style="color:#999;">(Default)</small>
Line 38: Line 38:


<li>
<li>
<div style="display:flex; list-style:none; width:min-content; margin:0 auto; padding:5px; gap:5px; background-color:#26486b60;">
<div style="list-style:none; display:grid; grid-auto-rows:50px; grid-auto-columns:50px; grid-auto-flow:column; width:min-content; margin:0 auto; padding:5px; grid-gap:5px; background-color:#26486b60;">
     [[File:Majsoul_Character_Xenia-bighead.png|160px|none]]
<div style="grid-column:1 / span 3; grid-row:1 / span 3;">
  <div style="display:flex; flex-direction:column; gap:10px;">
     [[File:Majsoul_Character_Xenia-bighead.png|x160px|none]]
     [[File:Majsoul_Character_Xenia_bond-smallhead.png|75px|none]]
</div>
     [[File:Majsoul_Character_Xenia_cos1-smallhead.png|75px|none]]
     [[File:Majsoul_Character_Xenia_bond-smallhead.png|x50px|none]]
  </div>
     [[File:Majsoul_Character_Xenia_cos1-smallhead.png|x50px|none]]
</div>
</div>
'''Xenia''' (ジニア)
'''Xenia''' (ジニア)