diff options
Diffstat (limited to 'js/output.css')
-rw-r--r-- | js/output.css | 345 |
1 files changed, 118 insertions, 227 deletions
diff --git a/js/output.css b/js/output.css index ef300d9..97c7dfe 100644 --- a/js/output.css +++ b/js/output.css @@ -1,11 +1,8 @@ /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; - @layer theme { - - :root, - :host { + :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", @@ -13,13 +10,18 @@ --color-red-100: oklch(93.6% 0.032 17.717); --color-red-600: oklch(57.7% 0.245 27.325); --color-green-100: oklch(96.2% 0.044 156.743); + --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-600: oklch(54.6% 0.245 262.881); --color-gray-50: oklch(98.5% 0.002 247.839); + --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-600: oklch(44.6% 0.03 256.802); + --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-900: oklch(21% 0.034 264.665); + --color-black: #000; + --color-white: #fff; --spacing: 0.25rem; --container-md: 28rem; --container-4xl: 56rem; @@ -32,6 +34,10 @@ --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); + --text-5xl: 3rem; + --text-5xl--line-height: 1; + --text-6xl: 3.75rem; + --text-6xl--line-height: 1; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; @@ -42,22 +48,14 @@ --default-mono-font-family: var(--font-mono); } } - @layer base { - - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { + *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } - - html, - :host { + html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; @@ -66,117 +64,74 @@ font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } - hr { height: 0; color: inherit; border-top-width: 1px; } - abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } - - h1, - h2, - h3, - h4, - h5, - h6 { + h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } - a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } - - b, - strong { + b, strong { font-weight: bolder; } - - code, - kbd, - samp, - pre { + code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } - small { font-size: 80%; } - - sub, - sup { + sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } - sub { bottom: -0.25em; } - sup { top: -0.5em; } - table { text-indent: 0; border-color: inherit; border-collapse: collapse; } - :-moz-focusring { outline: auto; } - progress { vertical-align: baseline; } - summary { display: list-item; } - - ol, - ul, - menu { + ol, ul, menu { list-style: none; } - - img, - svg, - video, - canvas, - audio, - iframe, - embed, - object { + img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } - - img, - video { + img, video { max-width: 100%; height: auto; } - - button, - input, - select, - optgroup, - textarea, - ::file-selector-button { + button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; @@ -186,207 +141,173 @@ background-color: transparent; opacity: 1; } - :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } - :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } - ::file-selector-button { margin-inline-end: 4px; } - ::placeholder { opacity: 1; } - - @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } - textarea { resize: vertical; } - ::-webkit-search-decoration { -webkit-appearance: none; } - ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } - ::-webkit-datetime-edit { display: inline-flex; } - ::-webkit-datetime-edit-fields-wrapper { padding: 0; } - - ::-webkit-datetime-edit, - ::-webkit-datetime-edit-year-field, - ::-webkit-datetime-edit-month-field, - ::-webkit-datetime-edit-day-field, - ::-webkit-datetime-edit-hour-field, - ::-webkit-datetime-edit-minute-field, - ::-webkit-datetime-edit-second-field, - ::-webkit-datetime-edit-millisecond-field, - ::-webkit-datetime-edit-meridiem-field { + ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } - :-moz-ui-invalid { box-shadow: none; } - - button, - input:where([type="button"], [type="reset"], [type="submit"]), - ::file-selector-button { + button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } - - ::-webkit-inner-spin-button, - ::-webkit-outer-spin-button { + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } - [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } - @layer utilities { + .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-auto { margin-inline: auto; } - .mr-2 { margin-right: calc(var(--spacing) * 2); } - .mb-2 { margin-bottom: calc(var(--spacing) * 2); } - .mb-4 { margin-bottom: calc(var(--spacing) * 4); } - .mb-8 { margin-bottom: calc(var(--spacing) * 8); } - .flex { display: flex; } - .grid { display: grid; } - .table { display: table; } - .h-4 { height: calc(var(--spacing) * 4); } - .h-6 { height: calc(var(--spacing) * 6); } - - .h-8 { - height: calc(var(--spacing) * 8); - } - .h-12 { height: calc(var(--spacing) * 12); } - .min-h-screen { min-height: 100vh; } - .w-4 { width: calc(var(--spacing) * 4); } - .w-6 { width: calc(var(--spacing) * 6); } - .w-12 { width: calc(var(--spacing) * 12); } - + .w-\[20px\] { + width: 20px; + } + .w-\[60px\] { + width: 60px; + } .w-full { width: 100%; } - .max-w-4xl { max-width: var(--container-4xl); } - .max-w-6xl { max-width: var(--container-6xl); } - .max-w-md { max-width: var(--container-md); } - .flex-1 { flex: 1; } - .border-collapse { border-collapse: collapse; } - .transform { - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .animate-spin { animation: var(--animate-spin); } - .cursor-pointer { cursor: pointer; } - .resize { resize: both; } - .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } - .items-center { align-items: center; } - + .justify-between { + justify-content: space-between; + } .justify-center { justify-content: center; } - .gap-4 { gap: calc(var(--spacing) * 4); } - .space-y-2 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; @@ -394,7 +315,6 @@ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } } - .space-y-4 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; @@ -402,7 +322,13 @@ margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } } - + .space-y-12 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse))); + } + } .space-x-2 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -410,7 +336,6 @@ margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); } } - .space-x-3 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -418,129 +343,139 @@ margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); } } - + .space-x-6 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse))); + } + } .rounded-full { border-radius: calc(infinity * 1px); } - .border { border-style: var(--tw-border-style); border-width: 1px; } - .border-2 { border-style: var(--tw-border-style); border-width: 2px; } - + .bg-black { + background-color: var(--color-black); + } .bg-blue-100 { background-color: var(--color-blue-100); } - .bg-gray-50 { background-color: var(--color-gray-50); } - .bg-green-100 { background-color: var(--color-green-100); } - .bg-red-100 { background-color: var(--color-red-100); } - .p-4 { padding: calc(var(--spacing) * 4); } - .px-4 { padding-inline: calc(var(--spacing) * 4); } - + .py-2 { + padding-block: calc(var(--spacing) * 2); + } + .py-8 { + padding-block: calc(var(--spacing) * 8); + } .py-12 { padding-block: calc(var(--spacing) * 12); } - .text-center { text-align: center; } - .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } - .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } - + .text-5xl { + font-size: var(--text-5xl); + line-height: var(--tw-leading, var(--text-5xl--line-height)); + } + .text-6xl { + font-size: var(--text-6xl); + line-height: var(--tw-leading, var(--text-6xl--line-height)); + } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } - .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } - .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } - .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } - .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } - .text-blue-600 { color: var(--color-blue-600); } - .text-gray-600 { color: var(--color-gray-600); } - .text-gray-900 { color: var(--color-gray-900); } - + .text-green-500 { + color: var(--color-green-500); + } .text-green-600 { color: var(--color-green-600); } - .text-red-600 { color: var(--color-red-600); } - + .text-white { + color: var(--color-white); + } + .italic { + font-style: italic; + } .underline { text-decoration-line: underline; } - .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } - .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, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - + .transition-colors { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } .transition-shadow { transition-property: box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .hover\:border-blue-200 { &:hover { @media (hover: hover) { @@ -548,7 +483,20 @@ } } } - + .hover\:text-gray-300 { + &:hover { + @media (hover: hover) { + color: var(--color-gray-300); + } + } + } + .hover\:text-gray-700 { + &:hover { + @media (hover: hover) { + color: var(--color-gray-700); + } + } + } .hover\:shadow-md { &:hover { @media (hover: hover) { @@ -557,20 +505,17 @@ } } } - .md\:grid-cols-2 { - @media (width >=48rem) { + @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } - .lg\:grid-cols-3 { - @media (width >=64rem) { + @media (width >= 64rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } } - :root { --red05: rgba(255, 65, 54, 0.05); --red100: rgba(255, 65, 54, 1); @@ -587,17 +532,14 @@ --huang: rgb(230, 180, 60); --lan: rgb(30, 60, 80); } - [data-theme=dark] { --background-color: black; --text-color: rgb(200, 200, 200); } - [data-theme=light] { --background-color: white; --text-color: black; } - @font-face { font-family: Crimson Text; src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-Regular.ttf) format('truetype'); @@ -605,7 +547,6 @@ font-style: normal; font-display: swap; } - @font-face { font-family: Crimson Text; src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-Italic.ttf) format('truetype'); @@ -613,7 +554,6 @@ font-style: italic; font-display: swap; } - @font-face { font-family: Crimson Text; src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-SemiBold.ttf) format('truetype'); @@ -621,7 +561,6 @@ font-style: normal; font-display: swap; } - @font-face { font-family: Crimson Text; src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-SemiBoldItalic.ttf) format('truetype'); @@ -629,7 +568,6 @@ font-style: italic; font-display: swap; } - @font-face { font-family: Crimson Text; src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-Bold.ttf) format('truetype'); @@ -637,7 +575,6 @@ font-style: normal; font-display: swap; } - @font-face { font-family: Crimson Text; src: url(https://s3.spandrell.ch/assets/fonts/CrimsonText-BoldItalic.ttf) format('truetype'); @@ -645,7 +582,6 @@ font-style: italic; font-display: swap; } - @font-face { font-family: "Inter"; src: url(https://s3.spandrell.ch/assets/fonts/InterVariableFont.otf) format('truetype-variations'); @@ -653,13 +589,11 @@ font-style: normal; font-display: swap; } - html { height: 100%; color: var(--text-color); -webkit-font-smoothing: antialiased; } - body { margin: 0; width: 100%; @@ -675,26 +609,13 @@ body { -webkit-font-smoothing: antialiased; word-break: break-word; } - -h1, -h2, -h3, -h4, -h5, -h6, -p { +h1, h2, h3, h4, h5, h6, p { font-family: Crimson Text; } - -a, -button, -input { +a, button, input { transition: all .4s ease; } - -input[type="submit"], -button, -.button { +input[type="submit"], button, .button { border-color: #181818; background-color: #181818; padding: 0.5rem 1.25rem; @@ -725,153 +646,123 @@ button, -o-transition: all .4s ease; transition: all .4s ease; } - @property --tw-rotate-x { syntax: "*"; inherits: false; } - @property --tw-rotate-y { syntax: "*"; inherits: false; } - @property --tw-rotate-z { syntax: "*"; inherits: false; } - @property --tw-skew-x { syntax: "*"; inherits: false; } - @property --tw-skew-y { syntax: "*"; inherits: false; } - @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } - @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } - @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } - @property --tw-font-weight { syntax: "*"; inherits: false; } - @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } - @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-shadow-color { syntax: "*"; inherits: false; } - @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; } - @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } - @property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; } - @property --tw-ring-color { syntax: "*"; inherits: false; } - @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-inset-ring-color { syntax: "*"; inherits: false; } - @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @property --tw-ring-inset { syntax: "*"; inherits: false; } - @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; } - @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } - @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } - @keyframes spin { to { transform: rotate(360deg); } } - @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - - *, - ::before, - ::after, - ::backdrop { + *, ::before, ::after, ::backdrop { --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; @@ -898,4 +789,4 @@ button, --tw-ring-offset-shadow: 0 0 #0000; } } -}
\ No newline at end of file +} |