🎨 style(css): color deep from coral

Signed-off-by: Abhiraj Roy <157954129+iconized@users.noreply.github.com>

components/AppFooter.vue

@@ -41,7 +41,7 @@ footer a:hover {
 }
 
 #social-icons > a {
-    border-right: 1px solid #1E2D3D;
+    border-right: 0px solid #1E2D3D;
     height: 100%;
     width: 50px;
  }
@@ -61,6 +61,7 @@ footer > a > img {
 
 #social-icons > a:hover img {
     opacity: 1;
+    color: #FF416C;
 }
 
 @media (max-width: 768px) {

components/AppHeader.vue

@@ -8,24 +8,24 @@
             </NuxtLink>
 
             <NuxtLink id="nav-link" to="/" :class="{ active: isActive('/') }">
-              _hello
+              _hello.py
             </NuxtLink>
   
             <NuxtLink id="nav-link" to="/about-me" :class="{ active: isActive('/about-me') }">
-              _about
+              _about.py
             </NuxtLink>
   
             <NuxtLink id="nav-link" to="/projects" :class="{ active: isActive('/projects') }">
-              _projects
+              _projects.py
             </NuxtLink>
 
             <NuxtLink id="nav-link" to="https://forum.snigdhaos.org" :class="{ active: isActive('') }">
-              _forum
+              _forum.py
             </NuxtLink>
           </div>
 
           <NuxtLink id="nav-link-contact" to="/contact-me" :class="{ active: isActive('/contact-me')}">
-            _contact
+            _contact.py
           </NuxtLink>
       
       </nav>
@@ -86,7 +86,7 @@ export default {
 }
 
 #nav-link.router-link-active, #nav-link-contact.router-link-active {
-  border-bottom: 2px solid #FF7F53;
+  border-bottom: 1px solid #FF416C;
   color: white;
 }
 

components/CommentedText.vue

@@ -5,9 +5,9 @@
       <!-- line numbers and asteriscs -->
       <div v-for="n in lines" class="grid grid-cols-2 justify-end" :key="n">
         <span class="col-span-1 mr-3">{{ n }}</span>
-        <div v-if="n == 1" class="col-span-1 flex justify-center">/**</div>
-        <div class="col-span-1 flex justify-center" v-if="n > 1 && n < lines">*</div>
-        <div class="col-span-1 flex justify-center pl-2" v-if="n == lines">*/</div>
+        <div v-if="n == 1" class="col-span-1 flex justify-center">#</div>
+        <div class="col-span-1 flex justify-center" v-if="n > 1 && n < lines">#</div>
+        <div class="col-span-1 flex justify-center" v-if="n == lines">#</div>
       </div>
     </div>
 

components/SnakeGame.vue

@@ -29,8 +29,8 @@
         <div>
 
         <div id="instructions" class="font-fira_retina text-sm text-white">
-          <p>// use your keyboard</p>
-          <p>// arrows to play</p>
+          <p># use your keyboard</p>
+          <p># arrows to play</p>
 
           <div id="buttons" class="w-full flex flex-col items-center gap-1 pt-5">
 
@@ -57,7 +57,7 @@
 
         <!-- score board -->
         <div id="score-board" class="w-full flex flex-col pl-5">
-          <p class="font-fira_retina text-white pt-5">// food left</p>
+          <p class="font-fira_retina text-white pt-5"># food left</p>
 
           <div id="score" class="grid grid-cols-5 gap-5 justify-items-center pt-5 w-fit">
             <div class="food"></div>
@@ -271,9 +271,9 @@
             
             /* Food cell style */
             if (j === this.food.x && i === this.food.y) {
-              cell.style.backgroundColor = "#43D9AD";
+              cell.style.backgroundColor = "#FF7F53";
               cell.style.borderRadius = "50%";
-              cell.style.boxShadow = "0 0 10px #43D9AD";
+              cell.style.boxShadow = "0 0 10px #FF7F53";
             }
     
             /* Estilo de la serpiente a medida que va crediendo */
@@ -282,7 +282,7 @@
             );
 
             if (snakeCell) {
-                cell.style.backgroundColor = "#43D9AD";
+                cell.style.backgroundColor = "#FF7F53";
                 cell.style.opacity = 1 - (this.snake.indexOf(snakeCell) / this.snake.length);
               cell.classList.add("green");
 
@@ -409,7 +409,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: linear-gradient(to bottom, rgba(35, 123, 109, 1), rgba(67, 217, 173, 0.13));
+    background: linear-gradient(to right, #ff416c, #ff4b2b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     border-radius: 10px;
     padding: 30px;
     position: relative;
@@ -419,7 +419,7 @@
 #game-screen {
     width: 240px;
     height: 400px;
-    border-radius: 10px;
+    border-radius: 0px;
     background-color: rgba(1, 22, 39, 0.84);
     display: flex;
     flex-wrap: wrap;
@@ -429,9 +429,9 @@
 #start-button {
   padding-inline: 16px;
   padding-block: 8px;
-  border-radius: 10px;
+  border-radius: 2px;
   border: 1px solid black;
-  background-color: #FEA55F;
+  background-color: #FF7F53;
   color: black;
   cursor: pointer;
   position: absolute;
@@ -442,7 +442,7 @@
 }
 
 #start-button:hover {
-  background-color: rgb(255, 178, 119);
+  background-color: #ff416c;
 }
 
 #console-menu{
@@ -461,7 +461,7 @@
 
 #console-button:hover {
   background-color: #010c15d8;
-  box-shadow: #43D9AD 0 0 10px;
+  box-shadow: #FF7F53 0 0 10px;
 }
 
 #instructions {
@@ -471,9 +471,9 @@
 }
 
 .food {
-  background-color: #43D9AD;
+  background-color: white;
   border-radius: 50%;
-  box-shadow: 0 0 10px #43D9AD;
+  box-shadow: 0 0 10px white;
   width: 8px;
   height: 8px;
   opacity: 0.3;
@@ -482,7 +482,7 @@
 #game-over, #congrats {
   position: absolute;
   bottom: 12%;
-  color: #43D9AD;
+  color: #FF7F53;
   width: 240px;
 }
 
@@ -555,7 +555,7 @@
 #game-over, #congrats {
   position: absolute;
   bottom: 10%;
-  color: #43D9AD;
+  color: #FF7F53;
   width: 192px;
 }