add css/tailwind

bump version
2026-04-26 23:45:12 +02:00
parent 58759b0a2d
commit c20172b8d7
7 changed files with 389 additions and 3 deletions
@@ -0,0 +1,218 @@
+@import "./timing-functions.css" layer(base);
+@import "./page-transition.css" layer(base);
+@import "tailwindcss";
+@import "tw-animate-css";
+
+:root {
+  --main: oklch(0.26 0 0);
+  --accent: oklch(79.108% 0.12111 161.392);
+  --primary: oklch(0.81 0.21 153.05);
+  --brand: oklch(51.093% 0.08281 161.38);
+  --neutral: oklch(96.768% 0.04981 155.178); 
+  --neutral-accent: oklch(0.92 0.13 152.01);
+  --neutral-highlight: oklch(0.7448 0.1823 50.477);
+  --highlight: oklch(89.063% 0.2092 147.54);
+  --success: oklch(91.1% 0.1605 148.89);
+  --error: oklch(65.7% 0.22923 26.238);
+
+  --font-display: "Ubuntu", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono:
+    Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+
+  --radius: 0.625rem;
+}
+
+@theme inline static {
+  --color-main: var(--main);
+  --color-secondary: var(--secondary);
+  --color-primary: var(--primary);
+  --color-accent: var(--accent);
+  --color-brand: var(--brand);
+  --color-neutral: var(--neutral);
+  --color-neutral-accent: var(--neutral-accent);
+  --color-neutral-highlight: var(--neutral-highlight);
+  --color-highlight: var(--highlight);
+  --color-success: var(--success);
+  --color-error: var(--error);
+
+  --font-display: var(--font-display);
+
+  --radius-card: calc(var(--radius) * 3);
+  --radius-main: calc(var(--radius) * 3);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 12px);
+}
+
+@theme {
+  --spacing-main: 15px;
+  --spacing-card: 1.5rem;
+
+  --spacing-section-main-x: 25px;
+  --spacing-section-main-y: 25px;
+
+  --spacing-input-height: 3rem;
+
+  --spacing-padding-card: 1.25rem;
+  --spacing-height-header: 80px;
+
+  --container-max-section: 100%;
+
+  --animate-collapsible-down: collapsible-down 0.6s var(--ease-out-quart);
+  --animate-collapsible-up: collapsible-up 0.6s var(--ease-out-quart);
+  --animate-accordion-down: accordion-down 0.6s var(--ease-out-quart);
+  --animate-accordion-up: accordion-up 0.6s var(--ease-out-quart);
+  
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+      opacity: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+    }
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@variant dark {
+  :root {
+    --main: oklch(1 0 0);
+    --accent: oklch(1 0 0 / 0.5);
+    --secondary: oklch(0.8 0 0);
+    --primary: oklch(0.83 0.26 156.18);
+    --neutral: oklch(0.25 0.04 169.89);
+    --neutral-highlight: oklch(0.7448 0.1823 50.477);
+    --neutral-accent: oklch(0.29 0.02 179);
+    --highlight: oklch(66.39% 0.2398 3.2);
+    --success: oklch(91.1% 0.1605 148.89);
+    --error: oklch(67.36% 0.2339 0.92);
+  }
+}
+
+@variant lg {
+  :root {
+    --container-max-section: 1000px;
+
+    --spacing-height-header: 90px;
+  }
+}
+
+@variant xl {
+  :root {
+    --container-max-section: 1200px;
+
+    --spacing-section-main-x: 100px;
+    --spacing-section-main-y: 45px;
+    --spacing-height-header: 100px;
+  }
+}
+
+@layer base {
+  html {
+    @apply bg-neutral text-main font-sans;
+    scroll-behavior: smooth;
+  }
+
+  code {
+    @apply font-mono;
+  }
+
+  h1 {
+    @apply text-main font-display;
+  }
+
+  h1 {
+    @apply text-3xl font-bold;
+  }
+
+  h2 {
+    @apply text-2xl font-semibold;
+  }
+
+  h3 {
+    @apply text-xl font-medium;
+  }
+
+  h4 {
+    @apply text-lg;
+  }
+
+  a {
+    @apply underline;
+  }
+
+  a:hover {
+    @apply decoration-main text-main;
+  }
+
+  [astro-icon] {
+    fill: currentColor;
+  }
+
+  td {
+    @apply px-3 py-1 border;
+  }
+
+  article {
+    & h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      @apply mt-6;
+    }
+
+    & h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    ol,
+    ul {
+      @apply mb-4;
+    }
+  }
+
+  p,
+  li {
+    @apply max-w-[600px]  text-base text-secondary;
+    line-height: 1.5;
+  }
+}
@@ -0,0 +1,18 @@
+@keyframes pageEnter {
+  from {
+    transform: translateY(40px);
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes pageLeave {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
@@ -0,0 +1,23 @@
+@theme {
+    --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
+    --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
+    --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  }