Compare commits

..

No commits in common. "dfff5da2714b04a68206c0bad85601d1166eed3a" and "6af3ad4bc78f806159438b430c2ea02113486932" have entirely different histories.

5 changed files with 15 additions and 186 deletions

View File

@ -11,9 +11,7 @@
"url": "git+https://git.themagician.cc/TheMagician/tarotcard.css.git"
},
"files": [
"tarotcard.css",
"tarotcard-deal.css",
"tarotcard-flip.css"
"tarotcard.css"
],
"keywords": [
"css",

View File

@ -1,36 +0,0 @@
@keyframes flip-card {
to {
transform: rotateY(180deg);
}
}
.tarot-card--flip-automatically .tarot-card__content {
animation: flip-card 800ms 2s forwards;
}
.tarot-card--flip-on-hover {
perspective: 1000px;
}
.tarot-card--flip-on-hover:hover .tarot-card__content {
transform: rotateY(180deg);
}
.tarot-card--flip-on-hover .tarot-card__content,
.tarot-card--flip-automatically .tarot-card__content {
transition: transform 800ms;
transform-style: preserve-3d;
}
.tarot-card__side {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.tarot-card__side--back {
transform: rotateY(180deg);
}

View File

@ -2,31 +2,11 @@
--tarot-card-title-background-color: rgb(234, 191, 99);
}
*, *::before, *::after {
margin: 0;
box-sizing: border-box;
}
.tarot-card {
aspect-ratio: 7 / 12;
max-width: 80vw;
max-height: 80vh;
min-height: 80%;
}
.tarot-card__link {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
}
.tarot-card__content {
width: 100%;
height: 100%;
max-width: 80vw;
border: 1em solid white;
}
@ -55,9 +35,8 @@
.tarot-card__section--title {
height: 10%;
display: flex;
justify-content: center;
align-items: center;
display: grid;
place-items: center;
background: var(--tarot-card-title-background-color);
}
@ -65,12 +44,7 @@
.tarot-card__title {
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: uppercase;
font-size: clamp(0.8rem, 5vw, 1.2rem);
font-size: clamp(0.8rem, 6vw, 1.8rem);
font-family: monospace;
font-weight: 900;
}

View File

@ -20,144 +20,38 @@
height: 100vh;
display: flex;
gap: 2em;
justify-content: space-evenly;
align-items: center;
}
.flip-card-back-section {
height: 100%;
background: white;
}
</style>
<link rel="stylesheet" href="styles/tarotcard.css"/>
<link rel="stylesheet" href="styles/tarotcard-deal.css"/>
<link rel="stylesheet" href="styles/tarotcard-flip.css"/>
</head>
<body>
<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">
<img class="tarot-card__art"
src="images/card_art_std.jpg"
alt="The Simple Card artwork image."
title="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 class="tarot-card__section tarot-card__section--title">
<p class="tarot-card__title">This card has a title with very long text.</p>
<p class="tarot-card__title">The Simple Card.</p>
</div>
</div>
</div>
<!-- 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">
<div class="tarot-card__section tarot-card__section--art">
<img class="tarot-card__art"
src="images/card_art_std.jpg"
alt="The Link Card artwork image."
title="The Link Card artwork image." />
</div>
<div class="tarot-card__section tarot-card__section--title">
<p class="tarot-card__title">The Link Card.</p>
</div>
</div>
</a>
</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">
<img class="tarot-card__art"
src="images/card_art_std.jpg"
alt="The Deal Card artwork image."
title="The Deal Card artwork image." />
<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Deal Card artwork image." title="The Simple Card artwork image.">
</div>
<div class="tarot-card__section tarot-card__section--title">
<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 tarot-card--flip-on-hover">
<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 class="tarot-card__side tarot-card__side--back">
<div class="tarot-card__section flip-card-back-section">
<p>This is the back side of The Flip Card.</p>
</div>
</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">
<div class="tarot-card__section tarot-card__section--art">
<img class="tarot-card__art"
src="images/card_art_std.jpg"
alt="The Deal/Flip Card artwork image."
title="The Deal/Flip Card artwork image." />
</div>
<div class="tarot-card__section tarot-card__section--title">
<p class="tarot-card__title">The Deal/Flip Card.</p>
</div>
</div>
<div class="tarot-card__side tarot-card__side--back">
<div class="tarot-card__section flip-card-back-section">
<p>This is the back side of The Deal/Flip Card.</p>
</div>
</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">
<div class="tarot-card__section tarot-card__section--art">
<img class="tarot-card__art"
src="images/card_art_std.jpg"
alt="The Autoflip Card artwork image."
title="The Autoflip Card artwork image." />
</div>
<div class="tarot-card__section tarot-card__section--title">
<p class="tarot-card__title">The Autoflip Card.</p>
</div>
</div>
<div class="tarot-card__side tarot-card__side--back">
<div class="tarot-card__section flip-card-back-section">
<p>This is the back side of The Autoflip Card.</p>
</div>
</div>
</div>
</div>
</div>
</body>

View File

@ -1 +0,0 @@
../../tarotcard-flip.css