add back button, fix about text color

lucasmcclean · Feb 23, 2024 · 09c6f71 · 09c6f71
1 parent ebbc4c2
commit 09c6f71
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 23 deletions.
diff --git a/about.html b/about.html
@@ -13,7 +13,7 @@
     <nav>
       <ul class="nav-links" role="list">
         <li id="home-link" class="nav-link">
-          <a href="./index.html">Home</a>
+          <a href="./index.html">↩ Home</a>
         </li>
         <li class="nav-link">
           <a href="#about">About</a>

diff --git a/play.html b/play.html
@@ -11,8 +11,7 @@
   </head>
   <body>
     <main>
-      <div id="top" class="back-button"></div>
-      <div id="left" class="back-button"></div>
+      <a class="back-button" href="./index.html">↩</a>
       <div class="faces-wrapper">
         <div id="heart" class="face">
           <div class="face-background"></div>

diff --git a/scripts/play.js b/scripts/play.js
@@ -77,11 +77,6 @@ document
   .getElementById("dec-bet-amt")
   .addEventListener("click", () => adjustBetAmount(false));
 
-// Make top left corner functionally a back button
-Array.from(document.getElementsByClassName("back-button")).forEach((part) =>
-  part.addEventListener("click", () => redirectTransition("./index.html"))
-);
-
 /* -----Functions----- */
 // Roll dice returning numDice values between 1 and 6
 function rollDice(numDice) {

diff --git a/styles/about.css b/styles/about.css
@@ -43,7 +43,6 @@ nav {
   text-decoration: none;
   font-size: 1.2rem;
   font-weight: bold;
-  transition: background 0.2s;
 }
 
 @media only screen and (max-width: 900px) {
@@ -71,11 +70,11 @@ nav {
 }
 
 .nav-link a:hover {
-  background-color: var(--clr-base);
+  text-decoration: underline;
 }
 
 h2 {
-  padding-bottom: 1.2rem;
+  padding-top: 3rem;
   color: color-mix(in srgb, var(--clr-primary) 80%, var(--clr-secondary));
   text-align: center;
   text-decoration: underline
@@ -84,18 +83,22 @@ h2 {
 }
 
 section {
-  margin-bottom: 3rem;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 section p {
   max-width: 1000px;
+  margin-top: 1.5rem;
   font-size: clamp(1rem, 1vw + 0.5rem, 1.15rem);
   color: color-mix(in srgb, var(--clr-primary) 80%, var(--clr-secondary));
 }
 
+section b {
+  color: color-mix(in srgb, var(--clr-primary) 80%, var(--clr-secondary));
+}
+
 #about {
   padding-top: 3.5rem;
 }
@@ -107,5 +110,4 @@ section p {
 #sources a {
   color: var(--clr-primary);
   text-decoration: underline;
-  transition: background 0.2s;
 }
diff --git a/styles/play.css b/styles/play.css
@@ -51,18 +51,16 @@ main::after {
 
 .back-button {
   position: fixed;
-  top: var(--border-dist);
-  left: var(--border-dist);
-}
-
-#top {
-  height: 1rem;
-  width: var(--corner-size);
+  top: calc(var(--border-dist) + 0.1rem);
+  left: calc(var(--border-dist) + 1rem);
+  color: var(--clr-primary);
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 2rem;
 }
 
-#left {
-  height: var(--corner-size);
-  width: 2rem;
+.back-button:hover {
+  color: color-mix(in srgb, var(--clr-primary) 30%, var(--clr-secondary));
 }
 
 .faces-wrapper {