Merge pull request #149 from oskarrough/feat/new-typeface

Change typeface

README.md

@@ -69,6 +69,10 @@ If you open a PR, it'll give you a preview URL as well for testing.
 - https://www.twitch.tv/telnetthespire
 - [Slay the Spire Reference Spreadsheet](https://docs.google.com/spreadsheets/u/1/d/1ZsxNXebbELpcCi8N7FVOTNGdX_K9-BRC_LMgx4TORo4/edit#gid=1146624812)
 
+### Typeface
+
+Licenced from https://mbtype.com/
+
 ### Open source artwork
 
 - http://ronenness.github.io/RPGUI/

public/ui/index.js

@@ -67,12 +67,12 @@ class SplashScreen extends Component {
 				`
 							: html`<li><button autofocus onClick=${props.onNewGame}>Play</a></li>`
 					}
-					<li><button onClick=${() => this.setState({showTutorial: !state.showTutorial})}>Tutorial</a></li>
+					<li><button onClick=${() => this.setState({showTutorial: !state.showTutorial})}>Read the Manual</a></li>
 				</ul>
 				${
 					state.showTutorial &&
 					html`
-						<div class="Splash-details">
+						<div class="Splash-details Article">
 							<p>
 								Slay the Web is a single player card game where you fight monsters to reach the end
 								of the web. It's a game of planning and knowing when to play which card.

public/ui/styles/app.css

@@ -5,8 +5,8 @@
 }
 
 html {
-	font-size: 14px;
-	line-height: 1.2;
+	font-size: 2.4vw;
+	line-height: 1.4;
 	color: var(--text);
 	cursor: url(../images/cursors/default.png), auto;
 	min-height: 100%;
@@ -31,22 +31,25 @@ html {
 	);
 }
 
-@media (min-height: 800px) {
+/* Minimum font size */
+@media (max-width: 600px) {
 	html {
-		font-size: 18px;
+		font-size: 14px;
 	}
 }
 
-@media (min-height: 1000px) {
+/* Maximum font size */
+@media (min-width: 1000px) {
 	html {
-		font-size: 22px;
+		font-size: 24px;
 	}
 }
 
 html,
 button {
-	font-family: 'concourse_t3', 'Port Lligat Slab', serif;
+	font-family: 'heliotrope_4', serif;
 	font-feature-settings: 'kern' 1;
+	font-feature-settings: 'liga' on;
 }
 
 body {
@@ -103,7 +106,6 @@ button:active {
 h1 {
 	transform: rotate3d(5, 15, 3, -20deg);
 	font-size: 4rem;
-	font-size: 10vw;
 	margin-bottom: 1rem;
 	background-image: linear-gradient(63deg, var(--yellow), #bd4516);
 	background-clip: text;
@@ -113,7 +115,7 @@ h1 {
 	letter-spacing: -1px;
 }
 h1[medium] {
-	font-size: 6vw;
+	font-size: 3rem;
 }
 h2,
 h3 {
@@ -250,6 +252,7 @@ h2 {
 }
 .EnergyBadge > span {
 	transform: rotate(-45deg);
+	font-feature-settings: 'onum' on;
 }
 .no-energy .EnergyBadge {
 	background: #272d2b;
@@ -326,12 +329,17 @@ h2 {
 }
 .Splash-details {
 	width: 100%;
-	max-width: 40em;
+	max-width: 35rem;
 	text-align: left;
 	margin: 0 auto;
 	position: relative;
 	z-index: 2;
 }
+.Article {
+	background: whitesmoke;
+	color: #222;
+	padding: 2em;
+}
 .Splash-spoder {
 	width: 10%;
 	position: absolute;

public/ui/styles/card.css

@@ -57,7 +57,8 @@
 .Card-type {
 	margin: -0.75rem  auto 0;
 	padding: 2px 5px 4px;
-	font-family: 'concourse_c3';
+	font-family: 'heliotrope_4_caps';
+	font-feature-settings: 'ss10';
 	font-size: 0.75rem;
 	background: hsl(191.3, 33.3%, 18.8%);
 	border: 1px solid hsla(0, 0%, 0%, 0.2);

public/ui/styles/fonts.css

@@ -1,41 +1,154 @@
 @font-face {
-	font-family: 'concourse_c3';
-	src: url('../fonts/concourse/concourse_c3_regular.woff') format('woff');
-	font-weight: normal;
+	font-family: heliotrope_3;
 	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_regular.woff2') format('woff2');
 }
 
-/* @font-face { */
-/* 	font-family: 'concourse_c3'; */
-/* 	src: url('../fonts/concourse/concourse_c4_regular.woff') format('woff'); */
-/* 	font-weight: bold; */
-/* 	font-style: normal; */
-/* } */
-
 @font-face {
-	font-family: 'concourse_t3';
-	src: url('../fonts/concourse/concourse_t3_regular.woff') format('woff');
+	font-family: heliotrope_3;
+	font-style: italic;
 	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_italic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_3;
 	font-style: normal;
+	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_bold.woff2') format('woff2');
 }
 
 @font-face {
-	font-family: 'concourse_t3';
-	src: url('../fonts/concourse/concourse_t3_italic.woff') format('woff');
+	font-family: heliotrope_3;
+	font-style: italic;
+	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_bold_italic.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_3_caps;
+	font-style: normal;
 	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_caps_regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_3_caps;
+	font-style: normal;
+	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_caps_bold.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_4;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_4;
 	font-style: italic;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_italic.woff2') format('woff2');
 }
 
 @font-face {
-	font-family: 'concourse_t3';
-	src: url('../fonts/concourse/concourse_t3_bold.woff') format('woff');
+	font-family: heliotrope_4;
+	font-style: normal;
 	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_bold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_4;
+	font-style: italic;
+	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_bold_italic.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_4_caps;
 	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_caps_regular.woff2') format('woff2');
 }
 
 @font-face {
-	font-family: 'concourse_t3';
-	src: url('../fonts/concourse/concourse_t3_bold_italic.woff') format('woff');
+	font-family: heliotrope_4_caps;
+	font-style: normal;
 	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_caps_bold.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_6;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_6_regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_6;
+	font-style: italic;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_6_italic.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_6_caps;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_6_caps_regular.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_8;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_8_regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_8;
 	font-style: italic;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_8_italic.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_8_caps;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_8_caps_regular.woff2') format('woff2');
 }

public/ui/styles/overlay.css

@@ -10,7 +10,7 @@
 .Overlay > button {
 	font-size: 1rem;
 	position: absolute;
-	/* padding: 1rem; */
+	padding: 0.8rem;
 	user-select: none;
 	z-index: 3;
 	background: none;