feat: Implement new 'soft, translucent, and alive' design system with updated UI components, navigation, and a new blog post.
This commit is contained in:
+113
-260
@@ -4,199 +4,132 @@
|
||||
|
||||
@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;
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
/* Darker secondary for better badge contrast against white bg */
|
||||
--secondary: 240 4.8% 90%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 10% 3.9%;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 1rem;
|
||||
--sidebar: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
|
||||
@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);
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 20%;
|
||||
/* Slightly lighter for visibility */
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--sidebar: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground font-sans;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@apply font-heading;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
@layer utilities {
|
||||
.animate-blob {
|
||||
animation: blob 7s infinite;
|
||||
}
|
||||
|
||||
/* Override specific component rounded classes */
|
||||
[class*="rounded-"] {
|
||||
border-radius: 0 !important;
|
||||
.animation-delay-2000 {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.animation-delay-4000 {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
}
|
||||
|
||||
/* Debug and ensure card backgrounds are visible */
|
||||
@layer components {
|
||||
.bg-card {
|
||||
background-color: hsl(var(--card)) !important;
|
||||
@keyframes blob {
|
||||
0% {
|
||||
transform: translate(0px, 0px) scale(1);
|
||||
}
|
||||
|
||||
.bg-background {
|
||||
background-color: hsl(var(--background)) !important;
|
||||
33% {
|
||||
transform: translate(30px, -50px) scale(1.1);
|
||||
}
|
||||
|
||||
66% {
|
||||
transform: translate(-20px, 20px) scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0px, 0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
@@ -223,36 +156,28 @@ body {
|
||||
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;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px hsl(var(--foreground) / 0.1);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px -10px hsl(var(--foreground) / 0.1);
|
||||
}
|
||||
|
||||
/* Button hover effects to match card interactions */
|
||||
/* Button hover effects */
|
||||
.button-hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.button-hover:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px hsl(var(--foreground) / 0.1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px -4px hsl(var(--foreground) / 0.1);
|
||||
}
|
||||
|
||||
/* Equal height cards in grid layouts */
|
||||
.grid-equal-height > * {
|
||||
.grid-equal-height>* {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -268,31 +193,8 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Ensure buttons align to bottom of cards */
|
||||
.card-button-bottom {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* Card layout improvements for consistent button positioning */
|
||||
.card-full-height {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-full-height .card-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-full-height .card-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-full-height .card-footer {
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
.card-content-stretch p:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Text wrapping and overflow utilities */
|
||||
@@ -303,18 +205,6 @@ body {
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Ensure flex items don't shrink below content size */
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
/* Better line height for readability */
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
}
|
||||
@@ -322,51 +212,13 @@ body {
|
||||
.leading-tight {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
/* Prevent layout shifts with min-width */
|
||||
.min-w-0 {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Consistent spacing for list items */
|
||||
.list-spacing li + li {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
/* Button positioning in card layouts */
|
||||
.mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* Grid layout improvements */
|
||||
.grid-equal-height {
|
||||
display: grid;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Enhanced card content distribution */
|
||||
.card-with-button {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-with-button .card-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-with-button .card-actions {
|
||||
margin-top: auto;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -377,8 +229,9 @@ body {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user