WEBklar/webklar-alt
Archived
4
0 Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

big upgrade

Browse Source
This commit is contained in:
knso committed 2026-05-10 12:19:58 +02:00
1 parent 5bd2019fc6
commit f7dd547f8d
38 files changed
+2363 -329
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/index.css
+100 -91
View File
@@ -10,11 +10,79 @@
@tailwind components;
@tailwind utilities;
/* webklar Design System - Muradov Inspired Minimal Dark Theme */
/* webklar Design System - Light/Dark Theme Support */
@layer base {
:root {
/* Ultra Minimal Deep Black Theme - Muradov Inspired */
/* Light Theme */
--background: 0 0% 100%;
--foreground: 0 0% 9%;
--card: 0 0% 98%;
--card-foreground: 0 0% 9%;
--popover: 0 0% 98%;
--popover-foreground: 0 0% 9%;
/* Primary - Cyan-Blau */
--primary: 198 93% 42%;
--primary-foreground: 0 0% 98%;
/* Secondary - Helles Grau */
--secondary: 0 0% 94%;
--secondary-foreground: 0 0% 9%;
/* Muted */
--muted: 0 0% 94%;
--muted-foreground: 0 0% 40%;
/* Accent */
--accent: 0 0% 94%;
--accent-foreground: 0 0% 9%;
--destructive: 0 62% 50%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 88%;
--input: 0 0% 88%;
--ring: 198 93% 42%;
--radius: 0.5rem;
/* Shadows */
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
--sidebar-background: 0 0% 97%;
--sidebar-foreground: 0 0% 9%;
--sidebar-primary: 198 93% 42%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 0 0% 94%;
--sidebar-accent-foreground: 0 0% 9%;
--sidebar-border: 0 0% 88%;
--sidebar-ring: 198 93% 42%;
--chart-1: 198 93% 42%;
--chart-2: 213 93% 50%;
--chart-3: 0 0% 45%;
--chart-4: 0 0% 35%;
--chart-5: 0 0% 25%;
--sidebar: 0 0% 97%;
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
--font-display: 'Space Grotesk', system-ui, sans-serif;
--spacing: 0.25rem;
--font-serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
}
.dark {
/* Dark Theme – original :root dark color scheme */
--background: 0 0% 0%;
--foreground: 0 0% 92%;
@@ -68,61 +136,10 @@
--chart-4: 215 16% 46%;
--chart-5: 215 19% 34%;
--sidebar: 210 40% 98%;
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
--font-display: 'Space Grotesk', system-ui, sans-serif;
--spacing: 0.25rem;
--font-serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
}
.dark {
--background: 222 47% 11%;
--foreground: 210 40% 98%;
--card: 217 32% 17%;
--card-foreground: 210 40% 98%;
--popover: 215 24% 26%;
--popover-foreground: 210 40% 98%;
--primary: 198 93% 59%;
--primary-foreground: 204 80% 15%;
--secondary: 212 26% 83%;
--secondary-foreground: 228 84% 4%;
--muted: 215 16% 46%;
--muted-foreground: 210 40% 98%;
--accent: 228 84% 4%;
--accent-foreground: 215 20% 65%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 85% 97%;
--border: 215 19% 34%;
--input: 215 19% 34%;
--ring: 198 93% 59%;
--chart-1: 199 95% 73%;
--chart-2: 211 96% 78%;
--chart-3: 215 20% 65%;
--chart-4: 215 16% 46%;
--chart-5: 215 19% 34%;
--sidebar: 217 32% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-primary: 198 93% 59%;
--sidebar-primary-foreground: 204 80% 15%;
--sidebar-accent: 215 20% 65%;
--sidebar-accent-foreground: 228 84% 4%;
--sidebar-border: 215 19% 34%;
--sidebar-ring: 198 93% 59%;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
--radius: 0rem;
}
}
@@ -216,11 +233,11 @@
border-radius: inherit;
}
/* Minimal glass nav */
/* Minimal glass nav – theme-aware */
.glass-nav {
@apply backdrop-blur-xl border-b;
background: hsl(0 0% 3% / 0.9);
border-color: hsl(0 0% 15% / 0.5);
background: hsl(var(--background) / 0.9);
border-color: hsl(var(--border) / 0.5);
}
/* Card minimal */
@@ -230,12 +247,12 @@
border: 1px solid hsl(var(--border));
}
.card-minimal:hover {
border-color: hsl(0 0% 25%);
border-color: hsl(var(--muted-foreground));
}
/* Text gradient - subtle */
/* Text gradient - theme-aware */
.text-gradient {
background: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(0 0% 70%) 100%);
background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -248,7 +265,7 @@
.link-underline::after {
content: '';
@apply absolute bottom-0 left-0 w-full h-px scale-x-0 origin-right transition-transform duration-300;
background: hsl(0 0% 98%);
background: hsl(var(--foreground));
}
.link-underline:hover::after {
@apply scale-x-100 origin-left;
@@ -268,37 +285,37 @@
animation: marquee 30s linear infinite;
}
/* Minimal project card */
/* Minimal project card – theme-aware */
.project-card {
@apply transition-all duration-500 overflow-hidden;
background: hsl(0 0% 6%);
border: 1px solid hsl(0 0% 12%);
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
}
.project-card:hover {
border-color: hsl(0 0% 25%);
border-color: hsl(var(--muted-foreground));
transform: translateY(-4px);
}
/* Minimal button */
/* Minimal button – theme-aware */
.btn-minimal {
@apply relative transition-all duration-300;
background: hsl(0 0% 98%);
color: hsl(0 0% 3%);
background: hsl(var(--foreground));
color: hsl(var(--background));
}
.btn-minimal:hover {
background: hsl(0 0% 85%);
background: hsl(var(--muted-foreground));
}
/* Outline button */
/* Outline button – theme-aware */
.btn-outline {
@apply relative transition-all duration-300 border;
background: transparent;
color: hsl(0 0% 98%);
border-color: hsl(0 0% 25%);
color: hsl(var(--foreground));
border-color: hsl(var(--muted-foreground));
}
.btn-outline:hover {
border-color: hsl(0 0% 50%);
background: hsl(0 0% 10%);
border-color: hsl(var(--foreground));
background: hsl(var(--accent));
}
/* Custom CTA button (System-Demo) */
@@ -764,41 +781,33 @@
line-height: 1;
}
/* Count-up with gradient */
/* Count-up with gradient – theme-aware */
.count-up-text {
background: linear-gradient(135deg, hsl(0 0% 92%) 0%, hsl(0 0% 70%) 50%, hsl(0 0% 92%) 100%);
background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 50%, hsl(var(--foreground)) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.dark .count-up-text {
background: linear-gradient(135deg, hsl(0 0% 98%) 0%, hsl(0 0% 75%) 50%, hsl(0 0% 98%) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Grid line decoration */
/* Grid line decoration – theme-aware */
.grid-lines {
background-image:
linear-gradient(hsl(0 0% 12%) 1px, transparent 1px),
linear-gradient(90deg, hsl(0 0% 12%) 1px, transparent 1px);
linear-gradient(hsl(var(--border)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--border)) 1px, transparent 1px);
background-size: 80px 80px;
}
/* Horizontal divider */
/* Horizontal divider – theme-aware */
.divider {
@apply w-full h-px;
background: linear-gradient(90deg, transparent 0%, hsl(0 0% 20%) 50%, transparent 100%);
background: linear-gradient(90deg, transparent 0%, hsl(var(--border)) 50%, transparent 100%);
}
/* Label/Tag */
/* Label/Tag – theme-aware */
.label-tag {
@apply text-xs uppercase tracking-widest font-medium;
color: hsl(0 0% 50%);
color: hsl(var(--muted-foreground));
}
}
@@ -865,4 +874,4 @@
.animate-fade-in-up {
animation: fade-in-up 0.6s ease-out forwards;
}
}