💅 style(root): changes in css

This commit is contained in:
alokify
2024-11-07 20:15:20 +05:30
parent e155bd20db
commit 8171f64f92
2 changed files with 364 additions and 352 deletions

View File

@@ -90,7 +90,7 @@
<path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708z"/>
</svg>
</a>
<a href="/documentation" class="btn glow-on-hover">
<a href="/documentation" target="_blank" class="btn glow-on-hover">
Documentation
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
<path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"/>

View File

@@ -26,11 +26,10 @@ body {
position: fixed;
width: 100%;
top: 0;
background-color: rgba(26, 31, 44, 0.0);
background-color: rgba(26, 31, 44, 0);
z-index: 1000;
padding-inline: 5rem;
backdrop-filter: blur(5px);
border:
}
.logo {
@@ -59,7 +58,6 @@ a {
transform-origin: left;
}
.nav-links {
display: flex;
gap: 2rem;
@@ -130,8 +128,19 @@ a {
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
@@ -142,12 +151,12 @@ a {
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
color: #000;
}
.glow-on-hover:active:after {
@@ -160,7 +169,7 @@ a {
.glow-on-hover:after {
z-index: -1;
content: '';
content: "";
position: absolute;
width: 100%;
height: 100%;
@@ -171,9 +180,15 @@ a {
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.btn {
@@ -418,8 +433,6 @@ a {
.platform-grid {
grid-template-columns: 1fr;
}
}
.footer {
background-color: #000;
@@ -462,7 +475,7 @@ left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
transition: 0.4s;
}
.slider:before {
@@ -473,7 +486,7 @@ width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
transition: 0.4s;
}
input:checked + .slider {
@@ -612,6 +625,5 @@ nav.navbar{
}
.desktop-card p {
text-align: left;
}
}