[fix]: mobile view of counts in header

src/components/header.js

@@ -64,7 +64,7 @@ const Header = props => {
         >
           <div className="github-button">
             <StarIcon size={16} className="star-icon" /> Star this repo{" "}
-            {stats.starsCount}
+            <span className="github-count">{stats.starsCount}</span>
           </div>
         </a>
         <a
@@ -74,7 +74,7 @@ const Header = props => {
         >
           <div className="github-button">
             <RepoForkedIcon size={16} className="fork-icon" /> Fork on Github{" "}
-            {stats.forksCount}
+            <span className="github-count">{stats.forksCount}</span>
           </div>
         </a>
       </div>

src/pages/index.css

@@ -259,15 +259,18 @@ a {
   display: inline-flex;
 }
 .github-button {
+  color: var(--grey-90);
   font-size: 12px;
   font-weight: bolder;
   padding: 3%;
   background: var(--grey-05);
   border: 2px solid var(--grey-85);
-  color: darkblue;
   margin: 1%;
   width: 230px;
 }
+.github-count {
+  color: var(--dark-purple);
+}
 .logo {
   width: 40px;
   height: 40px;
@@ -353,7 +356,7 @@ a {
   .github-button {
     font-size: 10px !important;
     padding: 2% 1% !important;
-    width: 120px;
+    width: 140px;
   }
   .logo {
     width: 20px;