Skip to content

Update index.css #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update index.css #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 99 additions & 29 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,135 @@
/*
1) Replaced @tailwind imports with @import "tailwindcss";.
2) Introduced CSS variables using @theme.
3) Updated utility classes to use CSS variables where applicable.
4) Fixed class syntax inconsistencies and improved maintainability.
5) Ensured smooth transition to Tailwind 4.0 with updated styles.
*/

@import url('https://fonts.cdnfonts.com/css/general-sans');
@import "tailwindcss";

@theme {
--font-family-generalsans: 'General Sans', sans-serif;
--colors-black: #000;
--colors-black-100: #010103;
--colors-black-200: #0E0E10;
--colors-black-300: #1C1C21;
--colors-black-500: #3A3A49;
--colors-black-600: #1A1A1A;
--colors-white: #FFFFFF;
--colors-white-800: #E4E4E6;
--colors-white-700: #D6D9E9;
--colors-white-600: #AFB0B6;
--colors-white-500: #62646C;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
scroll-behavior: smooth;
:root {
--font-family-generalsans: 'General Sans', sans-serif;
}

@layer utilities {
.bg-terminal {
background-image: url('/assets/terminal.png');
}
}


*{
scroll-behavior: smooth;

}
body {
background: #010103;
font-family: 'General Sans', sans-serif;

}

@layer utilities {
.c-space {
@apply sm:px-10 px-5;
}



.head-text {
@apply sm:text-4xl text-3xl font-semibold text-gray_gradient;
@apply sm:text-4xl text-3xl font-semibold text-[gray_gradient];
}

.nav-ul {
@apply flex flex-col items-center gap-4 sm:flex-row md:gap-6 relative z-20;
}

.nav-li {
@apply text-neutral-400 hover:text-white font-generalsans max-sm:hover:bg-black-500 max-sm:w-full max-sm:rounded-md py-2 max-sm:px-5;
@apply text-neutral-400 hover:text-white font-family-generalsans ;

}

.nav-li_a {
@apply text-lg md:text-base hover:text-white transition-colors;
}


.nav-sidebar {
@apply absolute left-0 right-0 bg-black-200 backdrop-blur-sm transition-all duration-300 ease-in-out overflow-hidden z-20 mx-auto sm:hidden block;
@apply absolute left-0 right-0 bg-[var(--colors-black-500)] backdrop-blur-sm transition-all duration-300 ease-in-out overflow-hidden z-20 mx-auto sm:hidden block;

}


.text-gray_gradient {
@apply bg-gradient-to-r from-[#BEC1CF] from-60% via-[#D5D8EA] via-60% to-[#D5D8EA] to-100% bg-clip-text text-transparent;
}

/* button component */

.btn {
@apply flex gap-4 items-center justify-center cursor-pointer p-3 rounded-md bg-black-300 transition-all active:scale-95 text-white mx-auto;
@apply flex gap-4 items-center justify-center cursor-pointer p-3 rounded-md bg-[var(--colors-black-500)] transition-all active:scale-95 text-white mx-auto;
}

.btn-ping {
@apply animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75;
}


.btn-ping_dot {
@apply relative inline-flex rounded-full h-3 w-3 bg-green-500;
}

/* hero section */
/* check */
.hero_tag {
@apply text-center xl:text-6xl md:text-5xl sm:text-4xl text-3xl font-generalsans font-black !leading-normal;
@apply text-center font-family-generalsans xl:text-6xl md:text-5xl sm:text-4xl text-3xl font-black !leading-normal ;

}

/* about section */

.grid-container{
@apply w-full h-full border border-[--colors-black-300] bg-[var(--colors-black-200)] rounded-lg sm:p-7 p-4 flex flex-col gap-5;
}


.grid-headtext {
@apply text-xl font-semibold mb-2 text-white font-family-generalsans;
}


.grid-subtext {
@apply text-[#afb0b6] text-base font-family-generalsans;
}


/* about section */
.grid-container {
@apply w-full h-full border border-black-300 bg-black-200 rounded-lg sm:p-7 p-4 flex flex-col gap-5;
@apply w-full h-full border border-[colors-black-300] bg-[var(--colors-black-200)] rounded-lg sm:p-7 p-4 flex flex-col gap-5;
}

.grid-headtext {
@apply text-xl font-semibold mb-2 text-white font-generalsans;
@apply text-xl font-semibold mb-2 text-white font-family-generalsans;
}

.grid-subtext {
@apply text-[#afb0b6] text-base font-generalsans;
@apply text-[#afb0b6] text-base font-family-generalsans;
}

.copy-container {
Expand All @@ -79,11 +138,20 @@ body {

/* projects section */
.arrow-btn {
@apply w-10 h-10 p-3 cursor-pointer active:scale-95 transition-all rounded-full arrow-gradient;
@apply w-10 h-10 p-3 cursor-pointer active:scale-95 transition-all rounded-full;
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 0.1) 10%,
rgba(255, 255, 255, 0.000025) 50%,
rgba(255, 255, 255, 0.000025) 50%,
rgba(255, 255, 255, 0.025) 100%
);
}

.tech-logo {
@apply w-10 h-10 rounded-md p-2 bg-neutral-100 bg-opacity-10 backdrop-filter backdrop-blur-lg flex justify-center items-center;
@apply w-10 h-10 rounded-md p-2 flex justify-center items-center;
background: rgba(243, 244, 246, 0.1);
backdrop-filter: blur(16px);
}

/* clients section */
Expand All @@ -92,7 +160,8 @@ body {
}

.client-review {
@apply rounded-lg md:p-10 p-5 col-span-1 bg-black-300 bg-opacity-50;
@apply rounded-lg md:p-10 p-5 col-span-1 bg-[var(--colors-black-300)] ;
background-color: rgba(28, 28, 33, 0.5);
}

.client-content {
Expand All @@ -105,23 +174,23 @@ body {
}

.work-canvas {
@apply col-span-1 rounded-lg bg-black-200 border border-black-300;
@apply col-span-1 rounded-lg bg-[var(--colors-black-200)] border border-[--colors-black-300];
}

.work-content {
@apply col-span-2 rounded-lg bg-black-200 border border-black-300;
@apply col-span-2 rounded-lg bg-[var(--colors-black-200)] border border-[--colors-black-300];
}

.work-content_container {
@apply grid grid-cols-[auto_1fr] items-start gap-5 transition-all ease-in-out duration-500 cursor-pointer hover:bg-black-300 rounded-lg sm:px-5 px-2.5;
@apply grid grid-cols-[auto_1fr] items-start gap-5 transition-all ease-in-out duration-500 cursor-pointer hover:bg-[var(--colors-black-300)] rounded-lg sm:px-5 px-2.5;
}

.work-content_logo {
@apply rounded-3xl w-16 h-16 p-2 bg-black-600;
@apply rounded-3xl w-16 h-16 p-2 bg-[var(--colors-black-600)];
}

.work-content_bar {
@apply flex-1 w-0.5 mt-4 h-full bg-black-300 group-hover:bg-black-500 group-last:hidden;
@apply flex-1 w-0.5 mt-4 h-full bg-[var(--colors-black-300)] group-hover:bg-[var(--colors-black-500)] group-last:hidden;
}

/* contact section */
Expand All @@ -130,15 +199,15 @@ body {
}

.field-label {
@apply text-lg text-white-600;
@apply text-lg text-[var(--colors-white-600)];
}

.field-input {
@apply w-full bg-black-300 px-5 py-2 min-h-14 rounded-lg placeholder:text-white-500 text-lg text-white-800 shadow-black-200 shadow-2xl focus:outline-none;
@apply w-full bg-[var(--colors-black-300)] px-5 py-2 min-h-14 rounded-lg placeholder:text-[var(--colors-white-500)] text-lg text-[var(colors-white-800)] shadow-[var(--colors-black-200)] shadow-2xl focus:outline-none;
}

.field-btn {
@apply bg-black-500 px-5 py-2 min-h-12 rounded-lg shadow-black-200 shadow-2xl flex justify-center items-center text-lg text-white gap-3;
@apply bg-[var(--colors-black-500)] px-5 py-2 min-h-12 rounded-lg shadow-[var(--colors-black-200)] shadow-2xl flex justify-center items-center text-lg text-white gap-3;
}

.field-btn_arrow {
Expand All @@ -147,8 +216,9 @@ body {

/* footer */
.social-icon {
@apply w-12 h-12 rounded-full flex justify-center items-center bg-black-300 border border-black-200;
@apply w-12 h-12 rounded-full flex justify-center items-center bg-[var(--colors-black-300)] border border-[var(--colors-black-200)];
}

}

.waving-hand {
Expand All @@ -158,7 +228,6 @@ body {
transform-origin: 70% 70%;
display: inline-block;
}

.arrow-gradient {
background-image: linear-gradient(
to right,
Expand All @@ -167,6 +236,7 @@ body {
rgba(255, 255, 255, 0.000025) 50%,
rgba(255, 255, 255, 0.025) 100%
);

}

@keyframes wave-animation {
Expand Down