generated from nhcarrigan/template
feat: add game title and copyright to UI
Adds the Elysium title above the guild hall button and an NHCarrigan copyright notice at the bottom of the sidebar, with matching styles.
This commit is contained in:
@@ -39,6 +39,7 @@ export const ClickArea = (): React.JSX.Element => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="click-area">
|
<section className="click-area">
|
||||||
|
<h1 className="game-title">Elysium</h1>
|
||||||
<h2>Guild Hall</h2>
|
<h2>Guild Hall</h2>
|
||||||
<div className="click-button-wrapper">
|
<div className="click-button-wrapper">
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -95,6 +95,7 @@ export const GameLayout = (): React.JSX.Element => {
|
|||||||
<div className="game-main">
|
<div className="game-main">
|
||||||
<aside className="game-sidebar">
|
<aside className="game-sidebar">
|
||||||
<ClickArea />
|
<ClickArea />
|
||||||
|
<p className="game-copyright">© NHCarrigan</p>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<main className="game-content">
|
<main className="game-content">
|
||||||
|
|||||||
@@ -165,6 +165,24 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ===================== CLICK AREA ===================== */
|
/* ===================== CLICK AREA ===================== */
|
||||||
|
.game-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
background: linear-gradient(135deg, var(--colour-accent), var(--colour-accent-light));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-copyright {
|
||||||
|
margin-top: auto;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: var(--colour-text-muted);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
.click-area {
|
.click-area {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user