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

Fix sizing issues, display test page nicely

This commit is contained in:
The Magician 2023-12-02 15:27:40 +00:00
parent 9c39cd0e79
commit dfff5da271
3 changed files with 4 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
tarotcard-flip.css
View File

@ -1,18 +1,9 @@
:root {
--min-flip-card-height: 80vh;
}
@keyframes flip-card {
to {
transform: rotateY(180deg);
}
}
.tarot-card--flip-on-hover,
.tarot-card--flip-automatically {
min-height: var(--min-flip-card-height);
}
.tarot-card--flip-automatically .tarot-card__content {
animation: flip-card 800ms 2s forwards;
}

3
tarotcard.css
View File

@ -10,8 +10,9 @@
.tarot-card {
aspect-ratio: 7 / 12;
max-height: 80vh;
max-width: 80vw;
max-height: 80vh;
min-height: 80%;
}
.tarot-card__link {

14
test/index.html
View File

@ -20,7 +20,7 @@
height: 100vh;
display: flex;
justify-content: space-evenly;
gap: 2em;
align-items: center;
}
@ -38,7 +38,6 @@
<div class="center-grid">
<!-- Simplest possible card. Just displays a title and a piece of artwork. -->
<!--
<div id="simple-card" class="tarot-card">
<div class="tarot-card__content">
<div class="tarot-card__section tarot-card__section--art">
@ -53,9 +52,8 @@
</div>
</div>
</div>
-->
<!-- Simplest possible card. Just displays a title and a piece of artwork. -->
<!-- Identical to The Simple Card, but has a link. -->
<div id="link-card" class="tarot-card">
<a class="tarot-card__link" href="https://themagician.cc">
<div class="tarot-card__content">
@ -74,7 +72,6 @@
</div>
<!-- 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 class="tarot-card__content">
<div class="tarot-card__section tarot-card__section--art">
@ -89,10 +86,8 @@
</div>
</div>
</div>
-->
<!-- Uses the "flip" animation to turn over to the other side when hovered on. -->
<!--
<div id="flip-card" class="tarot-card tarot-card--flip-on-hover">
<div class="tarot-card__content">
<div class="tarot-card__side tarot-card__side--front">
@ -115,10 +110,8 @@
</div>
</div>
</div>
-->
<!-- Uses both the "deal" and "flip" animations. -->
<!--
<div id="deal-flip-card" class="tarot-card tarot-card--deal tarot-card--flip-on-hover">
<div class="tarot-card__content">
<div class="tarot-card__side tarot-card__side--front">
@ -141,10 +134,8 @@
</div>
</div>
</div>
-->
<!-- Uses the "automatic flip" animation. -->
<!--
<div id="auto-flip-card" class="tarot-card tarot-card--flip-automatically">
<div class="tarot-card__content">
<div class="tarot-card__side tarot-card__side--front">
@ -167,7 +158,6 @@
</div>
</div>
</div>
-->
</div>
</body>