Add mock racetimer, clean-up CSS

benjaminma · Aug 25, 2021 · d9bb33d · d9bb33d
1 parent 5e51945
commit d9bb33d
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 64 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -20,50 +20,18 @@ const Home: NextPage = () => {
             creature-chrono
           </a>
           <a href="#">Race</a>
-          <a href="#">Hi-Score</a>
+          {/* <a href="#">Hi-Score</a> */}
           <a href="#">Settings</a>
         </div>
       </nav>
 
       <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{" "}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
+        <div className={styles.racetimer}>
+          <span className={styles.racetimer_unlit}>0:0</span>
+          <span className={styles.racetimer_lit}>8.345</span>
         </div>
+
+        <h1 className={styles.title}>Ready to race?</h1>
       </main>
 
       <footer className={styles.footer}>

diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -7,7 +7,6 @@
   justify-content: center;
   align-items: center;
   height: 100vh;
-	background: tomato;
 }
 
 .nav {
@@ -17,47 +16,66 @@
 	width: 100vw;
 	display: flex;
 	justify-content: center;
+	border-bottom: 2px solid cyan;
 }
 
 .navbar {
 	display: flex;
-	/* background: pink; */
+	flex-direction: row;
 	max-width: 900px;
-	align-items: baseline;
-	align-items: center;
 	flex: 1;
+	text-shadow: 4px 4px var(--pokedarkpurple-color);
 }
 
-.navbar a.navlogo {
-	border: 1px dotted pink;
-	padding: 0.5rem 0.75rem;
-	flex: 1;
+.navlogo {
 	font-size: 1.25rem;
+	flex: 1;
 }
 
 .navbar a {
-	border: 1px dotted green;
 	padding: 0.5rem 0.75rem;
 	font-size: 1rem;
+	border: 2px solid transparent;
 }
 
 .navbar a:hover {
-	text-decoration: underline;
+	border: 2px dashed yellow;
 }
 
 .navbar a:focus {
-	text-decoration: underline;
+	border: 2px dashed yellow;
 }
 
 .main {
-	border: 2px dotted yellow;
-  padding: 5rem 0;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-	background: orange;
+}
+
+.racetimer {
+	background: var(--racetimer-color);
+	border-bottom: 2px solid #222;
+	font-size: 6rem;
+	padding: 2rem 0 1rem;
+	width: 100vw;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+.racetimer_unlit {
+	color: var(--darkorange-color);
+}
+
+.racetimer_lit {
+	color: var(--neonorange-color);
+	text-shadow:
+	0 0 3px white,
+	0 0 12px var(--neonorange-color),
+	0 0 48px var(--neonorange-color)
 }
 
 .footer {
@@ -89,10 +107,11 @@
 }
 
 .title {
-	background: blue;
-  margin: 0;
+	color: var(--pokeyellow-color);
+	text-shadow: 4px 4px black;
+  margin: 2rem;
   line-height: 1.15;
-  font-size: 4rem;
+  font-size: 3rem;
 }
 
 .title,
@@ -160,9 +179,30 @@
   margin-left: 0.5rem;
 }
 
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
+@media (max-width: 1000px) {
+	.racetimer {
+		font-size: 5rem;
+	}
+}
+
+@media (max-width: 900px) {
+	.racetimer {
+		font-size: 4rem;
+	}
+
+	.title {
+		font-size: 2rem;
+		margin: 1.25rem;
+	}
+}
+
+@media (max-width: 800px) {
+	.racetimer {
+		font-size: 3rem;
+	}
+
+	.title {
+		font-size: 1.5rem;
+		margin: 1rem;
+	}
 }
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,8 +1,12 @@
 html {
-	--pokeblue-color: rgb(33,100,173);
-	--pokeyellow-color: rgb(245, 230, 82);
-	--pokepurple-color: rgb(90,74, 160);
-	--pokedarkpurple-color: rgb(49,49, 82);
+	--pokeblue-color: rgb(68, 25, 168);
+	--pokeyellow-color: rgb(248, 226, 26);
+	--pokepurple-color: rgb(60, 45, 124);
+	--pokedarkpurple-color: rgb(36, 36, 66);
+	--neonorange-color: rgb(255, 94, 0);
+	--neonorangeglow-color: rgb(255, 187, 0);
+	--darkorange-color: rgb(100, 43, 5);
+	--racetimer-color: rgb(32, 28, 32);
 }
 
 html,
@@ -12,6 +16,8 @@ body {
   font-family: 'Press Start 2P', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 	background: var(--pokedarkpurple-color);
+	background: rgb(2,0,36);
+background: linear-gradient(143deg, var(--pokedarkpurple-color) 0%, var(--pokepurple-color) 100%);
 }
 
 a {