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"
|
"url": "git+https://git.themagician.cc/TheMagician/tarotcard.css.git"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"tarotcard.css",
|
"tarotcard.css"
|
||||||
"tarotcard-deal.css",
|
|
||||||
"tarotcard-flip.css"
|
|
||||||
],
|
],
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"css",
|
"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);
|
--tarot-card-title-background-color: rgb(234, 191, 99);
|
||||||
}
|
}
|
||||||
|
|
||||||
*, *::before, *::after {
|
|
||||||
margin: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tarot-card {
|
.tarot-card {
|
||||||
aspect-ratio: 7 / 12;
|
aspect-ratio: 7 / 12;
|
||||||
|
|
||||||
max-width: 80vw;
|
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
min-height: 80%;
|
max-width: 80vw;
|
||||||
}
|
|
||||||
|
|
||||||
.tarot-card__link {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tarot-card__content {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
border: 1em solid white;
|
border: 1em solid white;
|
||||||
}
|
}
|
||||||
|
|
@ -55,9 +35,8 @@
|
||||||
.tarot-card__section--title {
|
.tarot-card__section--title {
|
||||||
height: 10%;
|
height: 10%;
|
||||||
|
|
||||||
display: flex;
|
display: grid;
|
||||||
justify-content: center;
|
place-items: center;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
background: var(--tarot-card-title-background-color);
|
background: var(--tarot-card-title-background-color);
|
||||||
}
|
}
|
||||||
|
|
@ -65,12 +44,7 @@
|
||||||
.tarot-card__title {
|
.tarot-card__title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
overflow: hidden;
|
font-size: clamp(0.8rem, 6vw, 1.8rem);
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
font-size: clamp(0.8rem, 5vw, 1.2rem);
|
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
126
test/index.html
126
test/index.html
|
|
@ -20,142 +20,36 @@
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 2em;
|
justify-content: space-evenly;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-card-back-section {
|
|
||||||
height: 100%;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<link rel="stylesheet" href="styles/tarotcard.css"/>
|
<link rel="stylesheet" href="styles/tarotcard.css"/>
|
||||||
<link rel="stylesheet" href="styles/tarotcard-deal.css"/>
|
<link rel="stylesheet" href="styles/tarotcard-deal.css"/>
|
||||||
<link rel="stylesheet" href="styles/tarotcard-flip.css"/>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="center-grid">
|
<div class="center-grid">
|
||||||
|
|
||||||
<!-- 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__content">
|
<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." 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>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Identical to The Simple Card, but has a link. -->
|
<div class="tarot-card__section tarot-card__section--title">
|
||||||
<div id="link-card" class="tarot-card">
|
<p class="tarot-card__title">The Simple Card.</p>
|
||||||
<a class="tarot-card__link" href="https://themagician.cc">
|
</div>
|
||||||
<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>
|
</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__content">
|
<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 Deal Card artwork image." title="The Simple Card artwork image.">
|
||||||
<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>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Uses the "flip" animation to turn over to the other side when hovered on. -->
|
<div class="tarot-card__section tarot-card__section--title">
|
||||||
<div id="flip-card" class="tarot-card tarot-card--flip-on-hover">
|
<p class="tarot-card__title">The Deal Card.</p>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
../../tarotcard-flip.css
|
|
||||||
Loading…
Reference in New Issue