97 lines
2.1 KiB
CSS
97 lines
2.1 KiB
CSS
.descriptive {
|
|
background-color:lightcyan;
|
|
grid-area: ds;
|
|
}
|
|
.characteristics {
|
|
background-color:lightyellow;
|
|
grid-area: ch;
|
|
}
|
|
.hp {
|
|
background-color:lightpink;
|
|
grid-area: hp;
|
|
}
|
|
.sheet-skills-col1 {
|
|
grid-area:skcol1;
|
|
}
|
|
.sheet-skills-col2 {
|
|
grid-area:skcol2;
|
|
}
|
|
/* Flexboxing to allow the column to be split into 2 different columns */
|
|
.sheet-skills-col3 {
|
|
grid-area:skcol3;
|
|
display:flex;
|
|
flex-flow:row wrap;
|
|
}
|
|
.sheet-sub-col {
|
|
width:100%;
|
|
}
|
|
|
|
/* Small breakpoint */
|
|
.fundamental-parent {
|
|
background-color:lightgreen;
|
|
display:grid;
|
|
grid-gap: 0.25rem;
|
|
grid-template-areas:
|
|
"ds"
|
|
"ch"
|
|
"hp";
|
|
}
|
|
.sheet-skills-layout{
|
|
display:grid;
|
|
grid-template-areas:
|
|
"skcol1"
|
|
"skcol2"
|
|
"skcol3";
|
|
margin:1rem 0 0 0;
|
|
}
|
|
|
|
.sheet-rating-roll > span {
|
|
display:inline-block;
|
|
font-size:11px;
|
|
margin: 0 0 0 -0.25rem;
|
|
}
|
|
|
|
/* Medium breakpoint */
|
|
@media(min-width:480px) {
|
|
.fundamental-parent {
|
|
background-color:lightgreen;
|
|
display:grid;
|
|
grid-gap: 0.25rem;
|
|
grid-template-areas:
|
|
"ds ds ds"
|
|
"ch ch hp";
|
|
grid-template-columns:repeat(3, 1fr);
|
|
}
|
|
.sheet-skills-layout {
|
|
grid-template-areas:
|
|
"skcol1 skcol2"
|
|
"skcol3 skcol3";
|
|
}
|
|
/* Simulates dividing this column into 2 horizontal columns */
|
|
.sheet-skills-col3 {
|
|
flex-flow:row nowrap;
|
|
}
|
|
/* TODO: Optionally prepare a small/medium threshold breakpoint to remove
|
|
the % sign until long skill name ellipsis disappears.
|
|
.sheet-rating-roll > span {
|
|
display:none;
|
|
}
|
|
*/
|
|
}
|
|
/* Large breakpoint */
|
|
@media(min-width:720px) {
|
|
.fundamental-parent {
|
|
display:grid;
|
|
grid-template-columns: 3fr 2fr 1fr;
|
|
grid-gap: 0.25rem;
|
|
grid-template-areas: "ds ch hp";
|
|
}
|
|
.sheet-skills-layout {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-areas: "skcol1 skcol2 skcol3";
|
|
}
|
|
/* stack the subcols in the large breakpoint */
|
|
.sheet-skills-col3 {
|
|
flex-flow:row wrap;
|
|
}
|
|
} |