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

Improve title visuals, make cards more responsive

This commit is contained in:
The Magician 2023-12-01 15:00:11 +00:00
parent a4554fbbe3
commit ae012ad044
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
tarotcard.css
View File

@ -5,6 +5,9 @@
.tarot-card { .tarot-card {
aspect-ratio: 7 / 12; aspect-ratio: 7 / 12;
max-height: 80vh;
max-width: 80vw;
border: 1em solid white; border: 1em solid white;
} }
@ -31,9 +34,16 @@
.tarot-card__section--title { .tarot-card__section--title {
height: 10%; height: 10%;
display: grid;
place-items: center;
background: var(--tarot-card-title-background-color); background: var(--tarot-card-title-background-color);
} }
.tarot-card__title { .tarot-card__title {
margin: 0; margin: 0;
font-family: monospace;
font-weight: 900;
} }

8
test/index.html
View File

@ -13,10 +13,6 @@
display: grid; display: grid;
place-items: center; place-items: center;
} }
#simple-card {
height: 88vh;
}
</style> </style>
<link rel="stylesheet" href="styles/tarotcard.css"/> <link rel="stylesheet" href="styles/tarotcard.css"/>
@ -26,11 +22,11 @@
<div id="simple-card" class="tarot-card"> <div id="simple-card" class="tarot-card">
<div class="tarot-card__section tarot-card__section--art"> <div class="tarot-card__section tarot-card__section--art">
<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Simple Card artwork image."> <img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Simple Card artwork image." title="The Simple Card artwork image.">
</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> <h1 class="tarot-card__title">The Simple Card.</h1>
</div> </div>
</div> </div>