tsb95
/
console_puzzle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add title text to lead players into the goal of the game.

This commit is contained in:
tsb95 2025-11-14 18:20:04 -10:00
parent ff972809ec
commit cb324449f6
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@ -3,14 +3,23 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/css/style.css"> <link rel="stylesheet" href="static/css/style.css">
<title>Arcane Access Console</title> <title>Arcane Access Console</title>
</head> </head>
<body> <body>
<div id="board"> <div class="puzzle-container">
<h1 class="audiowide-regular">
<p>Master the pattern to proceed.</p>
<p>Capture each arcane node in flawless succession.</p>
</h1>
<div id="board"></div>
</div> </div>
<script src="static/js/script.js"></script> <script src="static/js/script.js"></script>
</body> </body>
</html> </html>

31
static/css/style.css
View File

@ -35,6 +35,37 @@ body {
/* border: .5px solid #bebcbc76; subtle outer border */ /* border: .5px solid #bebcbc76; subtle outer border */
} }
.audiowide-regular {
font-family: "Audiowide", sans-serif;
font-weight: 400;
font-style: normal;
}
.puzzle-container {
display: flex;
flex-direction: column;
align-items: center; /* center children horizontally */
margin: 0 auto; /* center the container itself if it has intrinsic width */
gap: 16px; /* spacing between title and board */
width: fit-content; /* shrink-wrap to board width */
}
/* keep your existing h1 rules, or scope them */
.puzzle-container h1 {
text-align: center;
margin: 0;
}
h1 {
color: white;
font-style: italic;
text-align: center;
p {
font-size: 1.3rem;
}
}
.token { .token {
background-color: #17A398; background-color: #17A398;
width: 60%; width: 60%;