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 {
height: 10%;
display: grid;
place-items: center;
display: flex;
justify-content: center;
align-items: center;
background: var(--tarot-card-title-background-color);
}
@ -53,7 +54,12 @@
.tarot-card__title {
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-weight: 900;
}

2
test/index.html
View File

@ -43,7 +43,7 @@
</div>
<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>