summaryrefslogtreecommitdiff
path: root/js/output.css
diff options
context:
space:
mode:
Diffstat (limited to 'js/output.css')
-rw-r--r--js/output.css345
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
+}