mirror of
https://github.com/soconnor0919/personal-website.git
synced 2025-12-15 08:14:43 -05:00
291 lines
6.5 KiB
CSS
291 lines
6.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 98%;
|
|
--foreground: 0 0% 14.5%;
|
|
--card: 0 0% 94%;
|
|
--card-foreground: 0 0% 14.5%;
|
|
--popover: 0 0% 94%;
|
|
--popover-foreground: 0 0% 14.5%;
|
|
--primary: 0 0% 55.5%;
|
|
--primary-foreground: 0 0% 98.5%;
|
|
--secondary: 0 0% 92%;
|
|
--secondary-foreground: 0 0% 20.5%;
|
|
--muted: 0 0% 92%;
|
|
--muted-foreground: 0 0% 54.9%;
|
|
--accent: 0 0% 92%;
|
|
--accent-foreground: 0 0% 20.5%;
|
|
--destructive: 7 85% 58%;
|
|
--destructive-foreground: 0 0% 97%;
|
|
--border: 0 0% 88%;
|
|
--input: 0 0% 88%;
|
|
--ring: 0 0% 71%;
|
|
--chart-1: 0 0% 55.5%;
|
|
--chart-2: 0 0% 55.5%;
|
|
--chart-3: 0 0% 55.5%;
|
|
--chart-4: 0 0% 55.5%;
|
|
--chart-5: 0 0% 55.5%;
|
|
|
|
--font-sans: Geist Mono, monospace;
|
|
--font-serif: Geist Mono, monospace;
|
|
--font-mono: Geist Mono, monospace;
|
|
--radius: 0rem;
|
|
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
--shadow-sm:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
|
--shadow:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
|
--shadow-md:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
|
|
--shadow-lg:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
|
|
--shadow-xl:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
|
|
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
--tracking-normal: 0em;
|
|
--spacing: 0.25rem;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: 0 0% 12%;
|
|
--foreground: 0 0% 98.5%;
|
|
--card: 0 0% 18%;
|
|
--card-foreground: 0 0% 98.5%;
|
|
--popover: 0 0% 26.9%;
|
|
--popover-foreground: 0 0% 98.5%;
|
|
--primary: 0 0% 55.5%;
|
|
--primary-foreground: 0 0% 98.5%;
|
|
--secondary: 0 0% 26.9%;
|
|
--secondary-foreground: 0 0% 98.5%;
|
|
--muted: 0 0% 26.9%;
|
|
--muted-foreground: 0 0% 71%;
|
|
--accent: 0 0% 37.2%;
|
|
--accent-foreground: 0 0% 98.5%;
|
|
--destructive: 7 85% 70%;
|
|
--destructive-foreground: 0 0% 26.9%;
|
|
--border: 0 0% 25%;
|
|
--input: 0 0% 43.9%;
|
|
--ring: 0 0% 55.5%;
|
|
--chart-1: 0 0% 55.5%;
|
|
--chart-2: 0 0% 55.5%;
|
|
--chart-3: 0 0% 55.5%;
|
|
--chart-4: 0 0% 55.5%;
|
|
--chart-5: 0 0% 55.5%;
|
|
|
|
--font-sans: Geist Mono, monospace;
|
|
--font-serif: Geist Mono, monospace;
|
|
--font-mono: Geist Mono, monospace;
|
|
--radius: 0rem;
|
|
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
--shadow-sm:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
|
--shadow:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
|
--shadow-md:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
|
|
--shadow-lg:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
|
|
--shadow-xl:
|
|
0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
|
|
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
|
}
|
|
}
|
|
|
|
body {
|
|
letter-spacing: var(--tracking-normal);
|
|
}
|
|
}
|
|
|
|
.border {
|
|
border: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
/* Optional: Add smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Optional: Improve text rendering */
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
/* Remove all rounded corners for mono theme */
|
|
@layer components {
|
|
/* Cards */
|
|
.rounded-xl,
|
|
.rounded-lg,
|
|
.rounded-md,
|
|
.rounded-sm,
|
|
.rounded,
|
|
.rounded-full {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Override specific component rounded classes */
|
|
[class*="rounded-"] {
|
|
border-radius: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Debug and ensure card backgrounds are visible */
|
|
@layer components {
|
|
.bg-card {
|
|
background-color: hsl(var(--card)) !important;
|
|
}
|
|
|
|
.bg-background {
|
|
background-color: hsl(var(--background)) !important;
|
|
}
|
|
}
|
|
|
|
/* Remove any image gradients/filters */
|
|
@layer components {
|
|
img {
|
|
filter: none !important;
|
|
backdrop-filter: none !important;
|
|
}
|
|
}
|
|
|
|
/* Enhanced sidebar styling */
|
|
@layer components {
|
|
/* Smooth transitions for sidebar links */
|
|
.sidebar-link {
|
|
transition: all 0.15s ease-in-out;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.sidebar-link:hover {
|
|
background-color: hsl(var(--accent));
|
|
color: hsl(var(--accent-foreground));
|
|
}
|
|
|
|
/* Profile image subtle border */
|
|
.profile-image {
|
|
border: 1px solid hsl(var(--border));
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.profile-image:hover {
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
/* Truncate text in sidebar contact links */
|
|
.sidebar-contact-link span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 180px;
|
|
}
|
|
|
|
/* Animation utilities */
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.5s ease-in-out;
|
|
}
|
|
|
|
.animate-fade-in-up-delay-1 {
|
|
animation: fadeInUp 0.5s ease-in-out 0.1s backwards;
|
|
}
|
|
|
|
.animate-fade-in-up-delay-2 {
|
|
animation: fadeInUp 0.5s ease-in-out 0.2s backwards;
|
|
}
|
|
|
|
.animate-fade-in-up-delay-3 {
|
|
animation: fadeInUp 0.5s ease-in-out 0.3s backwards;
|
|
}
|
|
|
|
.animate-fade-in-up-delay-4 {
|
|
animation: fadeInUp 0.5s ease-in-out 0.4s backwards;
|
|
}
|
|
|
|
.hover-lift {
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Card hover effects */
|
|
.card-hover {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px hsl(var(--foreground) / 0.1);
|
|
}
|
|
|
|
/* Button hover effects to match card interactions */
|
|
.button-hover {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.button-hover:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px hsl(var(--foreground) / 0.1);
|
|
}
|
|
|
|
/* Equal height cards in grid layouts */
|
|
.grid-equal-height > * {
|
|
height: 100%;
|
|
}
|
|
|
|
.card-full-height {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-content-stretch {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|