eslint --fix
This commit is contained in:
Oscar
@@ -2,49 +2,98 @@
|
||||
@use 'variables' as *;
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-down {
|
||||
from { opacity: 0; transform: translateY(-12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from { opacity: 0; transform: translateX(24px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(24px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
from { opacity: 0; transform: translateX(-24px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-24px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from { opacity: 0; transform: scale(0.94); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.94);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-signal {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
// Utility classes
|
||||
.animate-fade-in { animation: fade-in var(--transition-base) both; }
|
||||
.animate-fade-up { animation: fade-up var(--transition-base) both; }
|
||||
.animate-scale-in { animation: scale-in var(--transition-spring) both; }
|
||||
.animate-fade-in {
|
||||
animation: fade-in var(--transition-base) both;
|
||||
}
|
||||
.animate-fade-up {
|
||||
animation: fade-up var(--transition-base) both;
|
||||
}
|
||||
.animate-scale-in {
|
||||
animation: scale-in var(--transition-spring) both;
|
||||
}
|
||||
|
||||
// Skeleton shimmer
|
||||
.skeleton {
|
||||
|
||||
@@ -24,7 +24,8 @@ body {
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
h1,
|
||||
.h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
@@ -34,7 +35,8 @@ h1, .h1 {
|
||||
color: var(--color-cream);
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
h2,
|
||||
.h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.75rem;
|
||||
font-weight: 400;
|
||||
@@ -44,7 +46,8 @@ h2, .h2 {
|
||||
color: var(--color-cream);
|
||||
}
|
||||
|
||||
h3, .h3 {
|
||||
h3,
|
||||
.h3 {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
@@ -90,6 +93,12 @@ a {
|
||||
|
||||
// Responsive heading scale
|
||||
@include mobile {
|
||||
h1, .h1 { font-size: 2rem; }
|
||||
h2, .h2 { font-size: 1.5rem; }
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,73 +1,89 @@
|
||||
// Design tokens — do not use directly in components; use CSS custom properties
|
||||
:root {
|
||||
// Surfaces
|
||||
--color-base: #0d0d0d;
|
||||
--color-surface: #161614;
|
||||
--color-base: #0d0d0d;
|
||||
--color-surface: #161614;
|
||||
--color-surface-2: #1e1e1b;
|
||||
--color-surface-3: #242420;
|
||||
|
||||
// Text
|
||||
--color-cream: #f0ebe0;
|
||||
--color-muted: #6b6860;
|
||||
--color-dim: #3a3935;
|
||||
--color-cream: #f0ebe0;
|
||||
--color-muted: #6b6860;
|
||||
--color-dim: #3a3935;
|
||||
|
||||
// Brand signal
|
||||
--color-signal: #c45c3a;
|
||||
--color-signal-dim:#7a3822;
|
||||
--color-signal: #c45c3a;
|
||||
--color-signal-dim: #7a3822;
|
||||
--color-signal-bg: rgba(196, 92, 58, 0.12);
|
||||
|
||||
// Utility
|
||||
--color-border: rgba(240, 235, 224, 0.08);
|
||||
--color-border: rgba(240, 235, 224, 0.08);
|
||||
--color-border-strong: rgba(240, 235, 224, 0.16);
|
||||
--color-overlay: rgba(13, 13, 13, 0.72);
|
||||
--color-overlay: rgba(13, 13, 13, 0.72);
|
||||
|
||||
// Typography
|
||||
--font-display: 'Instrument Serif', Georgia, serif;
|
||||
--font-mono: 'DM Mono', 'Courier New', monospace;
|
||||
--font-mono: 'DM Mono', 'Courier New', monospace;
|
||||
|
||||
// Border radius
|
||||
--radius-xs: 2px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 24px;
|
||||
--radius-xs: 2px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 24px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
// Shadows
|
||||
--shadow-card: 0 2px 24px rgba(0, 0, 0, 0.6);
|
||||
--shadow-modal: 0 8px 64px rgba(0, 0, 0, 0.8);
|
||||
--shadow-card: 0 2px 24px rgba(0, 0, 0, 0.6);
|
||||
--shadow-modal: 0 8px 64px rgba(0, 0, 0, 0.8);
|
||||
--shadow-signal: 0 0 20px rgba(196, 92, 58, 0.3);
|
||||
|
||||
// Transitions
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-spring: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
--transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// Z-index scale
|
||||
--z-base: 1;
|
||||
--z-dropdown: 100;
|
||||
--z-sticky: 200;
|
||||
--z-overlay: 300;
|
||||
--z-modal: 400;
|
||||
--z-toast: 500;
|
||||
--z-tooltip: 600;
|
||||
--z-titlebar: 700;
|
||||
--z-base: 1;
|
||||
--z-dropdown: 100;
|
||||
--z-sticky: 200;
|
||||
--z-overlay: 300;
|
||||
--z-modal: 400;
|
||||
--z-toast: 500;
|
||||
--z-tooltip: 600;
|
||||
--z-titlebar: 700;
|
||||
|
||||
// Layout
|
||||
--sidebar-collapsed: 64px;
|
||||
--sidebar-expanded: 240px;
|
||||
--nav-height: 60px;
|
||||
--titlebar-height: 36px;
|
||||
--sidebar-expanded: 240px;
|
||||
--nav-height: 60px;
|
||||
--titlebar-height: 36px;
|
||||
}
|
||||
|
||||
// SCSS breakpoints (for use in @media)
|
||||
$mobile: 375px;
|
||||
$tablet: 768px;
|
||||
$mobile: 375px;
|
||||
$tablet: 768px;
|
||||
$desktop: 1024px;
|
||||
$wide: 1440px;
|
||||
$wide: 1440px;
|
||||
|
||||
@mixin mobile { @media (max-width: #{$tablet - 1px}) { @content; } }
|
||||
@mixin tablet { @media (min-width: $tablet) { @content; } }
|
||||
@mixin desktop { @media (min-width: $desktop) { @content; } }
|
||||
@mixin wide { @media (min-width: $wide) { @content; } }
|
||||
@mixin mobile {
|
||||
@media (max-width: #{$tablet - 1px}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin tablet {
|
||||
@media (min-width: $tablet) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin desktop {
|
||||
@media (min-width: $desktop) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin wide {
|
||||
@media (min-width: $wide) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
@import "tailwindcss";
|
||||
@import 'tailwindcss';
|
||||
|
||||
Reference in New Issue
Block a user