Size title text properly on different platforms

This commit is contained in:
The Magician 2023-12-01 17:14:14 +00:00
parent 11f56e57e8
commit 6af3ad4bc7
2 changed files with 7 additions and 3 deletions

View File

@ -44,6 +44,7 @@
.tarot-card__title {
margin: 0;
font-size: clamp(0.8rem, 6vw, 1.8rem);
font-family: monospace;
font-weight: 900;
}

View File

@ -1,6 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<title>tarotcard.css Test Page</title>
<style>
body {
@ -34,7 +38,7 @@
</div>
<div class="tarot-card__section tarot-card__section--title">
<h1 class="tarot-card__title">The Simple Card.</h1>
<p class="tarot-card__title">The Simple Card.</p>
</div>
</div>
@ -45,11 +49,10 @@
</div>
<div class="tarot-card__section tarot-card__section--title">
<h1 class="tarot-card__title">The Deal Card.</h1>
<p class="tarot-card__title">The Deal Card.</p>
</div>
</div>
</div>
</body>
</html>