🚀 add pokemon styling for text

public/styles/github.css

@@ -0,0 +1,164 @@
+/*
+    Styling, specifically for the demo on GitHub
+*/
+/* PrismJS 1.27.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css */
+code[class*=language-], pre[class*=language-] {
+  color: #000;
+  background: 0 0;
+  text-shadow: 0 1px #fff;
+  font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none; }
+
+code[class*=language-] ::-moz-selection, code[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection, pre[class*=language-]::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc; }
+
+code[class*=language-] ::selection, code[class*=language-]::selection, pre[class*=language-] ::selection, pre[class*=language-]::selection {
+  text-shadow: none;
+  background: #b3d4fc; }
+
+@media print {
+  code[class*=language-], pre[class*=language-] {
+    text-shadow: none; } }
+
+pre[class*=language-] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto; }
+
+:not(pre) > code[class*=language-], pre[class*=language-] {
+  background: #f5f2f0; }
+
+:not(pre) > code[class*=language-] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal; }
+
+.token.cdata, .token.comment, .token.doctype, .token.prolog {
+  color: #708090; }
+
+.token.punctuation {
+  color: #999; }
+
+.token.namespace {
+  opacity: .7; }
+
+.token.boolean, .token.constant, .token.deleted, .token.number, .token.property, .token.symbol, .token.tag {
+  color: #905; }
+
+.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
+  color: #690; }
+
+.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
+  color: #9a6e3a;
+  background: rgba(255, 255, 255, 0.5); }
+
+.token.atrule, .token.attr-value, .token.keyword {
+  color: #07a; }
+
+.token.class-name, .token.function {
+  color: #dd4a68; }
+
+.token.important, .token.regex, .token.variable {
+  color: #e90; }
+
+.token.bold, .token.important {
+  font-weight: 700; }
+
+.token.italic {
+  font-style: italic; }
+
+.token.entity {
+  cursor: help; }
+
+#githubHint {
+  background-color: rgba(24, 16, 16, 0.6);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition: opacity 0.3s; }
+  #githubHint.closed {
+    opacity: 0;
+    pointer-events: none; }
+    #githubHint.closed .github {
+      transition: transform 0.2s;
+      transform: translate(0, 150%); }
+
+.github {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 512px;
+  padding: 2em; }
+  .github .stats {
+    margin-right: 4em; }
+
+.contains-code {
+  padding-bottom: 2em; }
+
+.code .toggle {
+  position: absolute;
+  bottom: 0;
+  right: 0; }
+  .code .toggle::after {
+    content: 'Toggle code view'; }
+
+.code.show pre {
+  opacity: 1;
+  z-index: 1; }
+
+.code pre {
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 0.1s;
+  position: absolute;
+  overflow: auto;
+  top: 2em;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #F8F3F8; }
+
+.code pre, .code code {
+  white-space: pre-wrap;
+  margin-bottom: 2em; }
+
+@keyframes floater {
+  0% {
+    transform: translate(0, 0); }
+  50% {
+    transform: translate(2px, 20px); }
+  100% {
+    transform: translate(0, 0); } }
+
+@media only screen and (max-width: 760px) {
+  .options {
+    flex-direction: column; }
+    .options > div {
+      margin: 1em; }
+  .github {
+    max-width: 100%;
+    top: initial;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translate(0, 0); } }
+
+/*# sourceMappingURL=github.css.map */

public/styles/github.css.map

@@ -0,0 +1,11 @@
+{
+	"version": 3,
+	"file": "github.css",
+	"sources": [
+		"../../src/scss/github.scss",
+		"../../src/scss/_variables.scss",
+		"../../src/scss/third-party/prism.scss"
+	],
+	"names": [],
+	"mappings": "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"
+}

src/App.css

@@ -0,0 +1,14 @@
+@font-face {
+  font-family: "PokemonGB";
+  src: url("./assets/fonts/Pokemon-GB.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "PressStart2P";
+  src: url("./assets/fonts/PressStart2P-Regular.ttf") format("truetype");
+}
+
+* {
+  font-family: "PokemonGB";
+  line-height: 1.7;
+}

src/App.tsx

@@ -2,6 +2,8 @@ import styled from "styled-components";
 import Gameboy from "./components/Gameboy";
 import Game from "./components/Game";
 
+import "./App.css";
+
 const StyledApp = styled.div`
   background: var(--bg);
   width: 100vw;

src/components/Game.tsx

@@ -33,7 +33,6 @@ const Container = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  border: solid 1px pink;
 `;
 
 const StyledGame = styled.div`

src/components/Text.tsx

@@ -3,15 +3,18 @@ import styled from "styled-components";
 import { selectText } from "../state/gameSlice";
 
 const StyledText = styled.div`
-  position: absolute;
+  position: absolute !important;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 20%;
   border: solid 1px green;
-  background: pink;
-  color: black;
-  font-size: 30px;
+  background: #f8f8f8;
+
+  h1 {
+    color: black;
+    font-size: 30px;
+  }
 `;
 
 const Text = () => {
@@ -19,7 +22,14 @@ const Text = () => {
 
   if (!text) return null;
 
-  return <StyledText>{text}</StyledText>;
+  return (
+    <>
+      <link rel="stylesheet" href="./styles/css-pokemon-gameboy.css" />
+      <StyledText className="framed">
+        <h1>{text}</h1>
+      </StyledText>
+    </>
+  );
 };
 
 export default Text;