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

Move white card border to .tarot-card__content

This commit is contained in:
The Magician 2023-12-02 10:45:30 +00:00
parent ef0189113e
commit 02debb34fa
2 changed files with 47 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
tarotcard.css
View File

@ -2,11 +2,20 @@
--tarot-card-title-background-color: rgb(234, 191, 99); --tarot-card-title-background-color: rgb(234, 191, 99);
} }
* {
box-sizing: border-box;
}
.tarot-card { .tarot-card {
aspect-ratio: 7 / 12; aspect-ratio: 7 / 12;
max-height: 80vh; max-height: 80vh;
max-width: 80vw; max-width: 80vw;
}
.tarot-card__content {
width: 100%;
height: 100%;
border: 1em solid white; border: 1em solid white;
} }

48
test/index.html
View File

@ -34,23 +34,51 @@
<!-- Simplest possible card. Just displays a title and a piece of artwork. --> <!-- Simplest possible card. Just displays a title and a piece of artwork. -->
<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__content">
<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Simple Card artwork image." title="The Simple Card artwork image."> <div class="tarot-card__section tarot-card__section--art">
</div> <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 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">The Simple Card.</p>
</div>
</div> </div>
</div> </div>
<!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. --> <!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. -->
<div id="deal-card" class="tarot-card tarot-card--deal"> <div id="deal-card" class="tarot-card tarot-card--deal">
<div class="tarot-card__section tarot-card__section--art"> <div class="tarot-card__content">
<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Deal Card artwork image." title="The Simple Card artwork image."> <div class="tarot-card__section tarot-card__section--art">
</div> <img class="tarot-card__art"
src="images/card_art_std.jpg"
alt="The Deal Card artwork image."
title="The Deal Card artwork image." />
</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 Deal Card.</p> <p class="tarot-card__title">The Deal Card.</p>
</div>
</div>
</div>
<!-- Uses the "flip" animation to turn over to the other side when hovered on. -->
<div id="flip-card" class="tarot-card">
<div class="tarot-card__content">
<div class="tarot-card__side tarot-card__side--front">
<div class="tarot-card__section tarot-card__section--art">
<img class="tarot-card__art"
src="images/card_art_std.jpg"
alt="The Flip Card artwork image."
title="The Flip Card artwork image." />
</div>
<div class="tarot-card__section tarot-card__section--title">
<p class="tarot-card__title">The Flip Card.</p>
</div>
</div>
</div> </div>
</div> </div>