3,599
edits
User:Kivik/sandbox2: Difference between revisions
m
Split portrait classes into two (one normal and one centered vertically) to allow some flexibility
m (Let's just make everything flex boxes) |
m (Split portrait classes into two (one normal and one centered vertically) to allow some flexibility) |
||
| Line 3: | Line 3: | ||
.relationships-container { background-color: white; padding: .5em; border-radius: 0 0 1.5em 1.5em; border: 3px solid steelblue; display: flex; flex-flow: row wrap; justify-content: space-evenly; min-width: fit-content; } | .relationships-container { background-color: white; padding: .5em; border-radius: 0 0 1.5em 1.5em; border: 3px solid steelblue; display: flex; flex-flow: row wrap; justify-content: space-evenly; min-width: fit-content; } | ||
.relationships-entry { min-width: 400px; margin: .5em; padding: 1em; background-color: #f0f0f0; border-radius: 1em; flex-basis: 25%; flex-grow: 1; } | .relationships-entry { min-width: 400px; margin: .5em; padding: 1em; background-color: #f0f0f0; border-radius: 1em; flex-basis: 25%; flex-grow: 1; } | ||
.relationships-portrait-box { margin-bottom: .5em; display: flex; } | .relationships-portrait-box { margin-bottom: .5em; display: flex; justify-content: center; } | ||
.relationships-portrait { width: 190px; height: 190px; overflow: hidden; border-radius: 50%; display:inline-flex; } | .relationships-portrait { width: 190px; height: 190px; overflow: hidden; border-radius: 50%; display:inline-flex; } | ||
.relationships-portrait- | .relationships-portrait-up { width: 190px; height: 190px; overflow: hidden; border-radius: 50%; display:inline-flex; align-items: center; } | ||
.relationships-description { } | .relationships-description { } | ||
}} | }} | ||
| Line 29: | Line 29: | ||
<!-- Start-Entry --><div class="relationships-entry"id="I-Wong"> | <!-- Start-Entry --><div class="relationships-entry"id="I-Wong"> | ||
<!-- Start-Portrait(s) --><div class="relationships-portrait-box"> | <!-- Start-Portrait(s) --><div class="relationships-portrait-box"> | ||
<div class="relationships-portrait">[[File:IkaiaFUTURE.png|200px]]</div> | <div class="relationships-portrait-up">[[File:IkaiaFUTURE.png|200px]]</div> | ||
</div><!-- End-Portraits(s) --> | </div><!-- End-Portraits(s) --> | ||
<div class="relationships-description">'''Ikaia Wong''' | <div class="relationships-description">'''Ikaia Wong''' | ||
| Line 40: | Line 40: | ||
<!-- Start-Entry --><div class="relationships-entry"id="Alieth"> | <!-- Start-Entry --><div class="relationships-entry"id="Alieth"> | ||
<!-- Start-Portrait(s) --><div class="relationships-portrait-box"> | <!-- Start-Portrait(s) --><div class="relationships-portrait-box"> | ||
<div class="relationships-portrait">[[File:Alieth profile ltcmmdr2.png|200px]]</div> | <div class="relationships-portrait-up">[[File:Alieth profile ltcmmdr2.png|200px]]</div> | ||
</div><!-- End-Portraits(s) --> | </div><!-- End-Portraits(s) --> | ||
<div class="relationships-description">'''Alieth''' | <div class="relationships-description">'''Alieth''' | ||