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 { .tarot-card__title {
margin: 0; margin: 0;
font-size: clamp(0.8rem, 6vw, 1.8rem);
font-family: monospace; font-family: monospace;
font-weight: 900; font-weight: 900;
} }

View File

@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <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> <title>tarotcard.css Test Page</title>
<style> <style>
body { body {
@ -34,7 +38,7 @@
</div> </div>
<div class="tarot-card__section tarot-card__section--title"> <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>
</div> </div>
@ -45,11 +49,10 @@
</div> </div>
<div class="tarot-card__section tarot-card__section--title"> <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> </div>
</div> </div>
</body> </body>
</html> </html>