add css/tailwind
bump version
This commit is contained in:
@@ -0,0 +1 @@
|
||||
import "./styles/globals.css"
|
||||
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user