101 lines
No EOL
1.6 KiB
SCSS
101 lines
No EOL
1.6 KiB
SCSS
@use "./vars/_colours.scss" as *;
|
|
|
|
.dotdungeon {
|
|
container-type: size;
|
|
|
|
&.actor {
|
|
&--pc {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-rows: repeat(12, minmax(0, 1fr));
|
|
|
|
.panel {
|
|
&--avatar {
|
|
grid-row: 1 / span 2;
|
|
}
|
|
&--stats {
|
|
grid-column: 2 / span 2;
|
|
}
|
|
&--skills {
|
|
grid-column: 2 / span 2;
|
|
}
|
|
&--backpack {
|
|
grid-row: 3 / span 5;
|
|
}
|
|
&--sync {}
|
|
&--aspect {
|
|
grid-row: span 2;
|
|
}
|
|
&--weapons {
|
|
grid-row: span 2;
|
|
}
|
|
&--roles {
|
|
grid-row: span 3;
|
|
}
|
|
&--spells {
|
|
grid-row: span 2;
|
|
}
|
|
&--mounts {}
|
|
&--summons {}
|
|
&--notes {}
|
|
&--storage {}
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel {
|
|
background: white;
|
|
border: 2px solid black;
|
|
|
|
&__header {
|
|
background: black;
|
|
color: white;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
h2 {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.icon {
|
|
$size: 32px;
|
|
height: $size;
|
|
width: $size;
|
|
aspect-ratio: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@container (max-width: $breakpoint-medium) {
|
|
.dotdungeon {
|
|
&.actor {
|
|
&--pc {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-rows: repeat(12, minmax(0, 1fr));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@container (max-width: $breakpoint-small) {
|
|
.dotdungeon {
|
|
&.actor {
|
|
&--pc {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-rows: repeat(12, minmax(0, 1fr));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@container (max-width: $breakpoint-extra-small) {
|
|
.dotdungeon {
|
|
&.actor {
|
|
&--pc {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-rows: repeat(12, minmax(0, 1fr));
|
|
}
|
|
}
|
|
}
|
|
} |