TheMagician
/
tarotcard.css
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve display of card titles

This commit is contained in:
The Magician 2023-12-02 11:29:49 +00:00
parent 80bf6d7bea
commit e36272d785
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
tarotcard.css
View File

@ -44,8 +44,9 @@
.tarot-card__section--title { .tarot-card__section--title {
height: 10%; height: 10%;
display: grid; display: flex;
place-items: center; justify-content: center;
align-items: center;
background: var(--tarot-card-title-background-color); background: var(--tarot-card-title-background-color);
} }
@ -53,7 +54,12 @@
.tarot-card__title { .tarot-card__title {
margin: 0; margin: 0;
font-size: clamp(0.8rem, 6vw, 1.8rem); overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: uppercase;
font-size: clamp(0.8rem, 5vw, 1.2rem);
font-family: monospace; font-family: monospace;
font-weight: 900; font-weight: 900;
} }

2
test/index.html
View File

@ -43,7 +43,7 @@
</div> </div>
<div class="tarot-card__section tarot-card__section--title"> <div class="tarot-card__section tarot-card__section--title">
<p class="tarot-card__title">The Simple Card.</p> <p class="tarot-card__title">This card has a title with very long text.</p>
</div> </div>
</div> </div>
</div> </div>