- Add Astro portfolio with TypeScript - Implement dark/light theme toggle - Add Spanish/English translations - Create under construction page - Style with Tailwind CSS and glassmorphism effects - Add profile image, projects, skills, and experience sections
42 lines
1.1 KiB
CSS
42 lines
1.1 KiB
CSS
@import "tailwindcss";
|
|
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
|
|
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap");
|
|
|
|
:root {
|
|
--primary: #8c2bee;
|
|
--background-light: #f7f6f8;
|
|
--background-dark: #0d0614;
|
|
}
|
|
|
|
.glass {
|
|
background: rgba(140, 43, 238, 0.05);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(140, 43, 238, 0.1);
|
|
}
|
|
|
|
.dark .glass {
|
|
background: rgba(140, 43, 238, 0.05);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(140, 43, 238, 0.1);
|
|
}
|
|
|
|
.glass-dark {
|
|
background: rgba(20, 10, 30, 0.6);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(140, 43, 238, 0.2);
|
|
}
|
|
|
|
.text-gradient {
|
|
background: linear-gradient(135deg, #8c2bee 0%, #d4a5ff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|