🎨 style(css): color deep from coral

Signed-off-by: Abhiraj Roy <157954129+iconized@users.noreply.github.com>
This commit is contained in:
Abhiraj Roy
2024-06-05 14:32:27 +05:30
parent 1aae6b0d81
commit 2f84f95da2
7 changed files with 40 additions and 41 deletions

View File

@@ -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) {

View File

@@ -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;
}

View File

@@ -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>

View File

@@ -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;
}

View File

@@ -9,7 +9,7 @@
"icon": "icons/info-professional.svg",
"info": {
"experience": {
"title": "experience",
"title": "about",
"description": "<br>Over the past 5 years, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
},
"hard-skills": {
@@ -64,8 +64,7 @@
"direct": {
"title": "contacts",
"sources": {
"email": "hello@snigdhaos.org",
"phone": "N/A"
"email": "hello@snigdhaos.org"
}
},
"social": {

View File

@@ -8,7 +8,7 @@
<section class="hero">
<div class="head">
<span>
<span class="mb-12">
<h2>greetings,</h2>
</span>
<h1>{{ config.dev.name }}</h1>
@@ -24,15 +24,14 @@
or skip to see about "Snigdha OS" -->
</span>
<span :class="{hide: isMobile}">
# source code can be found on <br>
# do follow us on github
# source code can be found on, do follow us on github
</span>
<span>#!/usr/bin/python</span>
<span :class="{hide: !isMobile}">
# source code:<br>
# follow us on github
</span>
<p class="code mb-5">
<p class="code mb-2">
<!-- <span class="identifier">
const
</span> -->
@@ -53,7 +52,7 @@
<span :class="{hide: !isMobile}">
# it is recommended to download the <b>ISO</b> file on PC
</span>
<p class="code mb-5">
<p class="code">
<!-- <span class="identifier">
const
</span> -->
@@ -74,7 +73,7 @@
<span :class="{hide: !isMobile}">
# having problem with installation?
</span>
<p class="code mb-5">
<p class="code">
<!-- <span class="identifier">
const
</span> -->
@@ -176,7 +175,7 @@ function handleResize() {
#hello .head h2, #hello .head .diple {
font-size: 32px;
line-height: 1;
color: #FF7F53;
color: #FF416C;
font-family: 'Fira Code Retina';
}
@@ -203,7 +202,7 @@ function handleResize() {
}
.code .identifier {
color: #FF7F53;
color: #FF416C;
}
.code .variable-name {
@@ -254,7 +253,7 @@ function handleResize() {
height: 300px;
border-radius: 0% 50% 0% 50%;
filter: blur(70px);
background: radial-gradient(circle at 50% 50%,rgba(67, 217, 173, 1), rgba(76, 0, 255, 0));
background: radial-gradient(circle at 50% 50%,rgba(255, 127, 83, 1), rgba(76, 0, 255, 0));
opacity: 0.5;
z-index: 10;
}

View File

@@ -164,7 +164,7 @@ input[type="checkbox"]:checked {
}
input[type="checkbox"]:checked:hover {
box-shadow: #FF7F53 0px 0px 0px 2px;
box-shadow: #FF416C 0px 0px 0px 2px;
}
input[type="checkbox"]:not(:checked) {
@@ -177,14 +177,14 @@ input[type="checkbox"]:hover {
background-image: url("data:image/svg+xml;utf8,<svg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.38587 7.2802L11.9718 0.693573L12.9856 1.70668L5.38587 9.30641L0.826172 4.74671L1.83928 3.73361L5.38587 7.2802Z' fill='white'/></svg>");
background-repeat: no-repeat;
background-position: center;
box-shadow: #FF7F53 0px 0px 0px 2px;
box-shadow: #FF416C 0px 0px 0px 2px;
}
input[type="checkbox"]:hover:not(:checked) {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.1);
background-image: none;
box-shadow: #FF7F53 0px 0px 0px 2px;
box-shadow: #FF416C 0px 0px 0px 2px;
}
input[type="checkbox"]:focus {