Justin Edmund
aabd7de207
https://github.com/jedmund/hensei-web/assets/383021/d18f68f4-a14a-45a8-81b1-1addb5bd6ed1 This adds an experimental GridRep feature for testing. There are indicator bars underneath the grid preview on desktop that when hovered over, shows the user a peek into the other views of the team. I have qualms about this but I'm pushing it to production so that myself and others can play with it more.
83 lines
1.6 KiB
SCSS
83 lines
1.6 KiB
SCSS
.rep {
|
|
aspect-ratio: 2/0.99;
|
|
border-radius: $card-corner;
|
|
grid-gap: $unit-half; /* add a gap of 8px between grid items */
|
|
height: $rep-height;
|
|
transition: $duration-opacity-fade opacity ease-in;
|
|
opacity: 0.5;
|
|
|
|
@include breakpoint(small-tablet) {
|
|
display: none;
|
|
}
|
|
|
|
.character,
|
|
.protagonist {
|
|
aspect-ratio: 16 / 33;
|
|
background: var(--card-bg);
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
overflow: hidden;
|
|
|
|
img[src*='jpg'] {
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.characters {
|
|
display: grid; /* make the right-images container a grid */
|
|
grid-template-columns: repeat(
|
|
4,
|
|
1fr
|
|
); /* create 3 columns, each taking up 1 fraction */
|
|
gap: $unit-half;
|
|
}
|
|
|
|
.protagonist {
|
|
border-color: transparent;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
aspect-ratio: 32 / 66;
|
|
|
|
img {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&.fire {
|
|
background: var(--fire-portrait-bg);
|
|
border-color: var(--fire-bg);
|
|
}
|
|
|
|
&.water {
|
|
background: var(--water-portrait-bg);
|
|
border-color: var(--water-bg);
|
|
}
|
|
|
|
&.wind {
|
|
background: var(--wind-portrait-bg);
|
|
border-color: var(--wind-bg);
|
|
}
|
|
|
|
&.earth {
|
|
background: var(--earth-portrait-bg);
|
|
border-color: var(--earth-bg);
|
|
}
|
|
|
|
&.light {
|
|
background: var(--light-portrait-bg);
|
|
border-color: var(--light-bg);
|
|
}
|
|
|
|
&.dark {
|
|
background: var(--dark-portrait-bg);
|
|
border-color: var(--dark-bg);
|
|
}
|
|
|
|
&.empty {
|
|
background: var(--card-bg);
|
|
}
|
|
}
|
|
}
|