feat: new intro page

benevolent-games · Sep 15, 2024 · fb5f774 · fb5f774
1 parent cb49f36
commit fb5f774
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 40 deletions.
diff --git a/s/dom/elements/app/styles.ts b/s/dom/elements/app/styles.ts
@@ -19,9 +19,19 @@ export default css`
 			font-family: inherit;
 			font-size: 1.5em;
 			padding: 0.8em 2em;
-			background: green;
+
+			background: #88afbb63;
+			box-shadow: .1em .2em .5em #0002;
 			border: none;
 			border-radius: 0.2em;
+			cursor: pointer;
+
+			text-transform: uppercase;
+			xxx-font-family: Spectral, serif;
+			font-weight: bold;
+
+			&:hover { filter: brightness(110%); }
+			&:active { filter: brightness(80%); }
 		}
 	}
 }

diff --git a/s/dom/views/exhibits/intro-page.ts b/s/dom/views/exhibits/intro-page.ts
@@ -6,11 +6,10 @@ export const IntroPageView = nexus.lightView(use => (o: Options) => {
 	use.name("intro-page")
 
 	return html`
-		<slot name=lead></slot>
+		<slot></slot>
 		<div class=buttonbox>
 			<button @click=${o.goMainMenu}>play</button>
 		</div>
-		<slot></slot>
 	`
 })
 

diff --git a/s/dom/views/loading-screens/logo-splash.ts b/s/dom/views/loading-screens/logo-splash.ts
@@ -22,7 +22,14 @@ const styles = css`
 
 		width: 100%;
 		height: 100%;
-		background: #334;
+
+		background: #000;
+		color: #333;
+	}
+
+	h1 {
+		font-family: Spectral, serif;
+		font-style: italic;
 	}
 `
 
diff --git a/s/index.css b/s/index.css
@@ -10,14 +10,21 @@
 }
 
 html, body {
-	font-size: 16px;
 	height: 100%;
-	background: #111;
-	color: #fffc;
-	font-family: sans-serif;
 }
 
 body {
+	font-size: 16px;
+
+	color: #fffc;
+	font-family: sans-serif;
+
+	background-color: #2c343a;
+	background-image: url(/assets/graphics/bg-board.jpg);
+	background-size: cover;
+	background-position: center center;
+	background-attachment: fixed;
+
 	scrollbar-gutter: stable;
 	scrollbar-width: thin;
 }
@@ -39,34 +46,95 @@ game-app {
 	}
 }
 
-game-app :is(header, article) {
-	padding: 2em;
-	max-width: 42em;
-	margin: 0 auto;
+.logo {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 
-	& > * + * {
-		margin-top: 0.66em;
+	width: max-content;
+	margin: auto;
+	margin-bottom: 4em;
+
+	font-family: Spectral, serif;
+	user-select: none;
 
-		&:is(h1, h2, h3, h4, h5, h6) {
-			margin-top: 1.5em;
+	> h1 {
+		font-size: 1em;
+		> span:nth-child(1) {
+			font-size: 8em;
+			text-transform: uppercase;
+			letter-spacing: 0.15em;
+			text-shadow: 0 0 .2em #fffa;
+		}
+		> span:nth-child(2) {
+			font-size: 3em;
+			opacity: 0.4;
 		}
 	}
 
-	& :is(ol, ul) {
-		padding-left: 1.5em;
+	> h2 {
+		font-size: 2.4em;
+		font-variant: small-caps;
+		margin-top: -1em;
+		opacity: 0.8;
+		font-style: italic;
 	}
 
-	& > :is(ol, ul) > li + li {
-		margin-top: 0.4em;
-	}
+	> small {
+		font-size: 0.7em;
 
-	& h1 {
-		font-size: 2em;
+		margin-left: auto;
+		margin-right: 2em;
+		margin-top: -0.5em;
+		padding: 0.2em 0.4em;
+
+		font-family: sans-serif;
+		font-weight: bold;
+		text-transform: uppercase;
+		border: 0.15em solid currentColor;
+		border-radius: 1em;
 	}
 }
 
-code {
-	color: lime;
-	tab-size: 2;
+.glow-blue {
+	color: #d0f2ff;
+	text-shadow: 0 0 0.3em #0034ff;
+}
+
+.glow-orange {
+	color: #ffe0a8;
+	text-shadow: 0 0 0.3em #ff7800;
 }
 
+/* game-app :is(header, article) { */
+/* 	padding: 2em; */
+/* 	max-width: 42em; */
+/* 	margin: 0 auto; */
+/**/
+/* 	& > * + * { */
+/* 		margin-top: 0.66em; */
+/**/
+/* 		&:is(h1, h2, h3, h4, h5, h6) { */
+/* 			margin-top: 1.5em; */
+/* 		} */
+/* 	} */
+/**/
+/* 	& :is(ol, ul) { */
+/* 		padding-left: 1.5em; */
+/* 	} */
+/**/
+/* 	& > :is(ol, ul) > li + li { */
+/* 		margin-top: 0.4em; */
+/* 	} */
+/**/
+/* 	& h1 { */
+/* 		font-size: 2em; */
+/* 	} */
+/* } */
+/**/
+/* code { */
+/* 	color: lime; */
+/* 	tab-size: 2; */
+/* } */
+
diff --git a/s/index.html.ts b/s/index.html.ts
@@ -1,14 +1,14 @@
 
 import "@benev/slate/x/node.js"
-import markdownIt from "markdown-it"
+// import markdownIt from "markdown-it"
 import {template, html, easypage, startup_scripts_with_dev_mode, git_commit_hash, unsanitized} from "@benev/turtle"
 
-const md = markdownIt()
-
-async function getArticle() {
-	const {default: articleMd} = await import(`./article.md.js?nocache=${Date.now()}`)
-	return md.render(articleMd)
-}
+// const md = markdownIt()
+//
+// async function getArticle() {
+// 	const {default: articleMd} = await import(`./article.md.js?nocache=${Date.now()}`)
+// 	return md.render(articleMd)
+// }
 
 export default template(async basic => {
 	const path = basic.path(import.meta.url)
@@ -19,7 +19,12 @@ export default template(async basic => {
 		css: "index.css",
 		title: "regis.gg",
 		head: html`
-			<link rel="icon" href="/assets/benevolent.svg"/>
+			<link rel="icon" href="/assets/graphics/knight-icon.webp"/>
+
+			<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=Spectral:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+
 			<link rel="stylesheet" href="${path.version.root("index.css")}"/>
 			<meta data-commit-hash="${await git_commit_hash()}"/>
 			${startup_scripts_with_dev_mode({
@@ -33,13 +38,11 @@ export default template(async basic => {
 		`,
 		body: html`
 			<game-app>
-				<header slot=lead>
-					<h1>regis</h1>
-					<p>a new game inspired by chess and modern rts games.</p>
+				<header class=logo>
+					<h1><span>Regis</span><span>.gg</span></h1>
+					<h2>“The Final Argument of Kings”</h2>
+					<small class="glow-blue">Alpha</small>
 				</header>
-				<article>
-					${unsanitized(await getArticle())}
-				</article>
 			</game-app>
 		`,
 	})