diff --git a/style/tailwind.css b/style/tailwind.css index 83123ea..19660e9 100644 --- a/style/tailwind.css +++ b/style/tailwind.css @@ -15,17 +15,12 @@ --color-yellow-800: oklch(47.6% 0.114 61.907); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-800: oklch(44.8% 0.119 151.328); - --color-teal-100: oklch(95.3% 0.051 180.801); - --color-teal-800: oklch(43.7% 0.078 188.216); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-800: oklch(42.4% 0.199 265.638); --color-indigo-50: oklch(96.2% 0.018 272.314); - --color-indigo-400: oklch(67.3% 0.182 276.935); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-900: oklch(35.9% 0.144 278.697); - --color-purple-100: oklch(94.6% 0.033 307.174); - --color-purple-800: oklch(43.8% 0.218 303.724); --color-slate-50: oklch(98.4% 0.003 247.858); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); @@ -33,14 +28,12 @@ --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); - --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); - --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; - --container-xs: 20rem; + --container-lg: 32rem; --container-2xl: 42rem; --container-4xl: 56rem; --container-7xl: 80rem; @@ -61,9 +54,6 @@ --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; - --ease-in: cubic-bezier(0.4, 0, 1, 1); - --ease-out: cubic-bezier(0, 0, 0.2, 1); - --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); @@ -240,24 +230,6 @@ .row-start-1 { grid-row-start: 1; } - .container { - width: 100%; - @media (width >= 40rem) { - max-width: 40rem; - } - @media (width >= 48rem) { - max-width: 48rem; - } - @media (width >= 64rem) { - max-width: 64rem; - } - @media (width >= 80rem) { - max-width: 80rem; - } - @media (width >= 96rem) { - max-width: 96rem; - } - } .-mx-4 { margin-inline: calc(var(--spacing) * -4); } @@ -276,6 +248,9 @@ .mt-2 { margin-top: calc(var(--spacing) * 2); } + .mt-3 { + margin-top: calc(var(--spacing) * 3); + } .mt-4 { margin-top: calc(var(--spacing) * 4); } @@ -288,9 +263,6 @@ .mt-16 { margin-top: calc(var(--spacing) * 16); } - .mr-1 { - margin-right: calc(var(--spacing) * 1); - } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } @@ -303,6 +275,12 @@ .ml-4 { margin-left: calc(var(--spacing) * 4); } + .line-clamp-2 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } .block { display: block; } @@ -349,9 +327,6 @@ .max-h-96 { max-height: calc(var(--spacing) * 96); } - .w-3\/12 { - width: calc(3/12 * 100%); - } .w-4 { width: calc(var(--spacing) * 4); } @@ -361,12 +336,18 @@ .w-10 { width: calc(var(--spacing) * 10); } - .w-24 { - width: calc(var(--spacing) * 24); + .w-28 { + width: calc(var(--spacing) * 28); + } + .w-32 { + width: calc(var(--spacing) * 32); } .w-40 { width: calc(var(--spacing) * 40); } + .w-56 { + width: calc(var(--spacing) * 56); + } .w-\[calc\(100\%-3rem\)\] { width: calc(100% - 3rem); } @@ -379,6 +360,9 @@ .max-w-7xl { max-width: var(--container-7xl); } + .max-w-lg { + max-width: var(--container-lg); + } .min-w-0 { min-width: calc(var(--spacing) * 0); } @@ -391,21 +375,12 @@ .flex-shrink-0 { flex-shrink: 0; } - .flex-grow { - flex-grow: 1; - } - .rotate-180 { - rotate: 180deg; - } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .cursor-pointer { cursor: pointer; } - .resize { - resize: both; - } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -421,6 +396,9 @@ .items-center { align-items: center; } + .items-start { + align-items: flex-start; + } .justify-between { justify-content: space-between; } @@ -444,6 +422,9 @@ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } + .gap-x-3 { + column-gap: calc(var(--spacing) * 3); + } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } @@ -460,6 +441,9 @@ margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } + .gap-y-1 { + row-gap: calc(var(--spacing) * 1); + } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } @@ -553,27 +537,18 @@ .bg-gray-50 { background-color: var(--color-gray-50); } - .bg-gray-100 { - background-color: var(--color-gray-100); - } .bg-green-100 { background-color: var(--color-green-100); } .bg-indigo-600 { background-color: var(--color-indigo-600); } - .bg-purple-100 { - background-color: var(--color-purple-100); - } .bg-red-100 { background-color: var(--color-red-100); } .bg-slate-50 { background-color: var(--color-slate-50); } - .bg-teal-100 { - background-color: var(--color-teal-100); - } .bg-white { background-color: var(--color-white); } @@ -606,9 +581,6 @@ .px-4 { padding-inline: calc(var(--spacing) * 4); } - .py-0\.5 { - padding-block: calc(var(--spacing) * 0.5); - } .py-1 { padding-block: calc(var(--spacing) * 1); } @@ -726,12 +698,12 @@ --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } + .whitespace-nowrap { + white-space: nowrap; + } .text-blue-800 { color: var(--color-blue-800); } - .text-gray-300 { - color: var(--color-gray-300); - } .text-gray-400 { color: var(--color-gray-400); } @@ -750,27 +722,18 @@ .text-indigo-600 { color: var(--color-indigo-600); } - .text-purple-800 { - color: var(--color-purple-800); - } .text-red-600 { color: var(--color-red-600); } .text-red-800 { color: var(--color-red-800); } - .text-teal-800 { - color: var(--color-teal-800); - } .text-white { color: var(--color-white); } .text-yellow-800 { color: var(--color-yellow-800); } - .line-through { - text-decoration-line: line-through; - } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -816,11 +779,6 @@ .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .transition { - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -970,6 +928,11 @@ margin-top: calc(var(--spacing) * 0); } } + .sm\:hidden { + @media (width >= 40rem) { + display: none; + } + } .sm\:table-cell { @media (width >= 40rem) { display: table-cell; @@ -1069,11 +1032,6 @@ display: none; } } - .lg\:table-cell { - @media (width >= 64rem) { - display: table-cell; - } - } .lg\:max-h-none { @media (width >= 64rem) { max-height: none;