Compare commits
No commits in common. "dfff5da2714b04a68206c0bad85601d1166eed3a" and "6af3ad4bc78f806159438b430c2ea02113486932" have entirely different histories.
dfff5da271
...
6af3ad4bc7
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
126
test/index.html
126
test/index.html
|
|
@ -20,142 +20,36 @@
|
|||
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." />
|
||||
</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>
|
||||
</div>
|
||||
<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.">
|
||||
</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 class="tarot-card__section tarot-card__section--title">
|
||||
<p class="tarot-card__title">The Simple Card.</p>
|
||||
</div>
|
||||
</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." />
|
||||
</div>
|
||||
|
||||
<div class="tarot-card__section tarot-card__section--title">
|
||||
<p class="tarot-card__title">The Deal Card.</p>
|
||||
</div>
|
||||
<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 Simple Card artwork image.">
|
||||
</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 class="tarot-card__section tarot-card__section--title">
|
||||
<p class="tarot-card__title">The Deal Card.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
../../tarotcard-flip.css
|
||||
Loading…
Reference in New Issue