Fixes #17 - styles not correct for colour cards when using text that is too large

This commit is contained in:
A McIlwraith 2024-09-18 09:22:11 -04:00
parent 2cd25ad7bd
commit 559552f218
3 changed files with 9 additions and 7 deletions

File diff suppressed because one or more lines are too long

View File

@ -75,7 +75,7 @@ include _colour-samples
"lighter lighter lighter darker darker darker"
"notes notes notes notes notes notes";
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content);
grid-template-rows: repeat(2, 1.5rem) repeat(4, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content);
padding: 1rem;
width: 20rem;
max-width: 318px;
@ -115,7 +115,7 @@ include _colour-samples
display: grid;
gap: .5rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 2.5rem repeat(2, max-content);
grid-template-rows: repeat(3, max-content);
.result {
align-items: center;
border-radius: .5rem;
@ -188,7 +188,7 @@ include _colour-samples
padding: .5rem;
width: 20rem;
max-width: 318px;
height: 10.5rem;
height: max-contents;
display: grid;
gap: .5rem;
@ -231,6 +231,7 @@ include _colour-samples
display: block;
width: 100%;
place-self: stretch;
text-align: center;
span {
border: none;
font-size: .9rem;

View File

@ -74,7 +74,7 @@
"lighter lighter lighter darker darker darker"
"notes notes notes notes notes notes";
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content);
grid-template-rows: repeat(2, 1.5rem) repeat(4, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content);
padding: 1rem;
width: 20rem;
max-width: 318px;
@ -114,7 +114,7 @@
display: grid;
gap: .5rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 2.5rem repeat(2, max-content);
grid-template-rows: repeat(3, max-content);
.result {
align-items: center;
border-radius: .5rem;
@ -187,7 +187,7 @@
padding: .5rem;
width: 20rem;
max-width: 318px;
height: 10.5rem;
height: max-contents;
display: grid;
gap: .5rem;
@ -230,6 +230,7 @@
display: block;
width: 100%;
place-self: stretch;
text-align: center;
span {
border: none;
font-size: .9rem;