CSS transition-delay added (#3)

* fixed CSS styling issues when tapping on mobile; other minor CSS tweaks

Author: snazzybytes

components/header.module.css

@@ -49,6 +49,27 @@
   right: 0.5rem;
   /* this hides the hamburger from being displayed */
   /* display: none; */
+  /* -webkit-tap-highlight-color: rgb(245, 135, 25, 0.7) !important; */
+  -webkit-tap-highlight-color: transparent !important;
+  outline-color: #f68819;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.hamburgerOpen {
+  background-color: #f68819;
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  margin: 0 0.5rem;
+  /* positions the icon to the right and center aligns it vertically */
+  position: relative;
+  top: 0px;
+  right: 0.5rem;
+  -webkit-tap-highlight-color: transparent !important;
+  outline-color: #f68819;
+  border-radius: 50%;
+  overflow: hidden;
 }
 
 /* common for active/inactive navigation */
@@ -77,6 +98,7 @@
   cursor: pointer;
 }
 .navigationMenu ul {
+  display: hidden;
   box-shadow: none;
 }
 
@@ -118,6 +140,9 @@
 .activeNavigationMenu li:active,
 .navigationMenu li:active {
   background-color: rgba(0, 0, 0, 0.5);
+  -webkit-transition: background-color 50ms linear;
+  -ms-transition: background-color 50ms linear;
+  transition: background-color 50ms linear;
 }
 
 .activeNavigationMenu,

components/layout.module.css

@@ -37,7 +37,7 @@
 .back {
   height: 36;
   cursor: pointer;
-  transition: transform 0.125s; /* Animation */
+  transition: transform 0.1s; /* Animation */
 }
 
 .back:hover,
@@ -55,7 +55,7 @@
   color: white;
   margin: 1rem 0rem;
   font-size: 24px;
-  transition: transform 0.125s; /* Animation */
+  transition: transform 0.1s; /* Animation */
 }
 
 .backHomeButton:hover,
@@ -75,13 +75,13 @@
 .scaledImage img {
   /* Animation */
   transform: scale(1);
-  transition: all 0.125s ease-in-out;
+  transition: all 0.1s ease-in-out;
 }
 
 /* needed for crisp (not blurry) img hover scale effect */
 .scaledImage img:hover,
 .scaledImage img:active {
   /* Animation */
   transform: scale(1.2);
-  transition: all 0.125s ease-in-out;
+  transition: all 0.1s ease-in-out;
 }

components/navigation.tsx

@@ -43,7 +43,10 @@ const Navigation = () => {
       {/* price on top left, menu top right */}
       <div className={styles.headerContainer}>
         <PricePanel />
-        <div className={styles.hamburger} onClick={toggleHamburger}>
+        <div
+          className={hamburgerOpen ? styles.hamburgerOpen : styles.hamburger}
+          onClick={toggleHamburger}
+        >
           <HamburgerMenu />
         </div>
       </div>

pages/about.tsx

@@ -15,16 +15,15 @@ const About = () => {
             <h1 className={utilStyles.heading2Xl}>About</h1>
           </header>
           <p>
-            Welcome to Satoshi Vibes, the quote wiki for Satoshi Nakamoto. If you've made it here,
-            you must be in the middle of your Bitcoin journey. As you go down deeper the infinite
-            rabbit hole 🐇🕳, you will be curious to see what Satoshi was saying on cypherpunk forums
+            Welcome to Satoshi Vibes, the "Satoshi Nakamoto" quote wiki. If you've made it here, you
+            must be in the middle of your Bitcoin journey. As you go down deeper the infinite rabbit
+            hole 🐇🕳, you will be curious to read up on what Satoshi was saying on cypherpunk forums
             back in the years of 2008, 2009, and 2010 before he disappeared forever. It's nice to
-            get a little taste of how it all started and learn about the impetus for the ideas that
-            culminated in creation of Bitcoin a.k.a hardest money on earth. On the home page you
+            get a taste of how it all started and learn about the impetus for the ideas that
+            culminated in creation of Bitcoin aka hardest money in the world. On the home page you
             will find 24 quote categories to choose from. Each category is sorted by published date
             in descending order (for now). Let this be a quick reference for Satoshi's quotes you
-            can pull up on your mobile or desktop as you orange pill your friends and family. That's
-            it for now, dive in 🧐!
+            can pull up on your mobile/tablet/desktop as you orange pill your family and friends.
           </p>
         </div>
 

pages/quotes/[id].tsx

@@ -23,7 +23,7 @@ export default function Quote({ quoteData }: Props) {
       </Head>
       <div className={`${styles.article} ${utilStyles.breakWithHyphens} ${utilStyles.boxShadow}`}>
         <h2
-          className={`${utilStyles.headingLg}  ${utilStyles.truncateTitle} ${utilStyles.textCenter} ${utilStyles.breakWithHyphens}`}
+          className={`${utilStyles.headingLg}  ${utilStyles.truncateTitle} ${utilStyles.textCenter} `}
         >
           {quoteData.title}
         </h2>

styles/categories.module.css

@@ -78,7 +78,6 @@
     overflowing into the rounded-corners */
   overflow: hidden;
   justify-content: space-around;
-  text-decoration: none;
 }
 
 .categoryItem {
@@ -93,16 +92,27 @@
   justify-content: center;
 }
 
-.categoryItem:hover,
+@media (hover: hover) {
+  .categoryItem:hover {
+    background-color: #f68819;
+    cursor: pointer;
+    text-decoration: none;
+    box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.5);
+    transition: box-shadow 0.2s ease-out;
+    -webkit-transition: background-color 150ms linear;
+    -ms-transition: background-color 150ms linear;
+    transition: background-color 150ms linear;
+  }
+}
+
+.categoryItem:focus,
 .categoryItem:active {
-  background-color: #f68819;
-  cursor: pointer;
   text-decoration: none;
+  color: white;
+  cursor: pointer;
   box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.5);
-  transition: box-shadow 0.2s ease-out;
-  -webkit-transition: background-color 100ms linear;
-  -ms-transition: background-color 100ms linear;
-  transition: background-color 100ms linear;
+  background-color: #f68819;
+  -webkit-tap-highlight-color: #f68819;
 }
 
 @media only screen and (min-width: 1200px) {

styles/global.css

@@ -17,6 +17,8 @@ body {
 a {
   color: #fff;
   text-decoration: none;
+  /* turn off the blue flashing outline on mobile devices when tapping */
+  -webkit-tap-highlight-color: transparent !important;
 }
 
 @media (hover) {
@@ -29,3 +31,14 @@ img {
   max-width: 100%;
   display: block;
 }
+
+/* turn off all <button> styling */
+button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}

styles/quotes.module.css

@@ -102,6 +102,14 @@ quote tags (keep it only in the quote .article) */
   align-items: center;
 }
 
+.quoteTag a {
+  text-decoration: underline;
+}
+
+.quoteTag a:hover {
+  color: #8595ae;
+}
+
 /* print an empty space after category string */
 .quoteTag::after {
   content: "\00a0";