diff --git a/assets/css/styles.css b/assets/css/styles.css index e8960e8..610ed00 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -2,1026 +2,1086 @@ @layer properties; @layer theme, base, components, utilities; @layer theme { - :root, :host { - --font-sans: 'Ubuntu', sans-serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', - monospace; - --color-blue-500: oklch(62.3% 0.214 259.815); - --color-blue-600: oklch(54.6% 0.245 262.881); - --color-pink-500: oklch(65.6% 0.241 354.308); - --color-gray-100: oklch(96.7% 0.003 264.542); - --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-900: oklch(21% 0.034 264.665); - --color-white: #fff; - --spacing: 0.25rem; - --container-7xl: 80rem; - --text-sm: 0.875rem; - --text-sm--line-height: calc(1.25 / 0.875); - --text-base: 1rem; - --text-base--line-height: calc(1.5 / 1); - --text-lg: 1.125rem; - --text-lg--line-height: calc(1.75 / 1.125); - --text-4xl: 2.25rem; - --text-4xl--line-height: calc(2.5 / 2.25); - --font-weight-medium: 500; - --font-weight-bold: 700; - --radius-md: 0.375rem; - --radius-lg: 0.5rem; - --default-transition-duration: 150ms; - --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - --default-font-family: var(--font-sans); - --default-mono-font-family: var(--font-mono); - --color-sf_blau-500: #1d59a5; - --color-sf_blau-700: #184a89; - --color-sf_gelb-400: #f6b95f; - --color-sf_gelb-500: #f0ab38; - --color-sf_grau-50: #ededed; - --color-sf_grau-400: #717171; - --color-sf_grau-600: #4e4e4e; - --color-sf_grau-800: #404040; - } + :root, :host { + --font-sans: 'Ubuntu', sans-serif; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', + monospace; + --color-red-50: oklch(97.1% 0.013 17.38); + --color-red-500: oklch(63.7% 0.237 25.331); + --color-blue-500: oklch(62.3% 0.214 259.815); + --color-blue-600: oklch(54.6% 0.245 262.881); + --color-pink-500: oklch(65.6% 0.241 354.308); + --color-gray-50: oklch(98.5% 0.002 247.839); + --color-gray-100: oklch(96.7% 0.003 264.542); + --color-gray-200: oklch(92.8% 0.006 264.531); + --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-900: oklch(21% 0.034 264.665); + --color-white: #fff; + --spacing: 0.25rem; + --container-lg: 32rem; + --container-7xl: 80rem; + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2.5 / 2.25); + --text-6xl: 3.75rem; + --text-6xl--line-height: 1; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --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); + --default-mono-font-family: var(--font-mono); + --color-sf_blau-50: #ebeef4; + --color-sf_blau-200: #a3afd4; + --color-sf_blau-300: #7e91c5; + --color-sf_blau-500: #1d59a5; + --color-sf_blau-600: #1b5197; + --color-sf_blau-700: #184a89; + --color-sf_blau-800: #16437c; + --color-sf_gelb-300: #fbc883; + --color-sf_gelb-500: #f0ab38; + --color-sf_grau-50: #ededed; + --color-sf_grau-100: #cdcdcd; + --color-sf_grau-200: #adadad; + --color-sf_grau-400: #717171; + --color-sf_grau-600: #4e4e4e; + --color-sf_grau-800: #404040; + } } @layer base { - *, ::after, ::before, ::backdrop, ::file-selector-button { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0 solid; - } - - html, :host { - line-height: 1.5; - -webkit-text-size-adjust: 100%; - tab-size: 4; - font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - font-feature-settings: var(--default-font-feature-settings, normal); - 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 { - font-size: inherit; - font-weight: inherit; - } - - a { - color: inherit; - -webkit-text-decoration: inherit; - text-decoration: inherit; - } - - b, strong { - font-weight: bolder; - } - - 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 { - 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 { - list-style: none; - } - - img, svg, video, canvas, audio, iframe, embed, object { - display: block; - vertical-align: middle; - } - - img, video { - max-width: 100%; - height: auto; - } - - button, input, select, optgroup, textarea, ::file-selector-button { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - border-radius: 0; - 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; - } - + *, ::after, ::before, ::backdrop, ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + font-feature-settings: var(--default-font-feature-settings, normal); + 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 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, strong { + font-weight: bolder; + } + 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 { + 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 { + list-style: none; + } + img, svg, video, canvas, audio, iframe, embed, object { + display: block; + vertical-align: middle; + } + img, video { + max-width: 100%; + height: auto; + } + button, input, select, optgroup, textarea, ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + 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) { ::placeholder { - opacity: 1; - } - - @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 { - padding-block: 0; - } - - :-moz-ui-invalid { - box-shadow: none; - } - - button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { - appearance: button; - } - - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { - height: auto; - } - - [hidden]:where(:not([hidden="until-found"])) { - display: none !important; + 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 { + padding-block: 0; + } + :-moz-ui-invalid { + box-shadow: none; + } + button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { + appearance: button; + } + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden="until-found"])) { + display: none !important; + } } @layer utilities { - .invisible { - visibility: hidden; + .invisible { + visibility: hidden; + } + .absolute { + position: absolute; + } + .relative { + position: relative; + } + .sticky { + position: sticky; + } + .inset-0 { + inset: calc(var(--spacing) * 0); + } + .top-0 { + top: calc(var(--spacing) * 0); + } + .top-2 { + top: calc(var(--spacing) * 2); + } + .left-0 { + left: calc(var(--spacing) * 0); + } + .z-0 { + z-index: 0; + } + .z-10 { + z-index: 10; + } + .z-50 { + z-index: 50; + } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; } - - .absolute { - position: absolute; + @media (width >= 48rem) { + max-width: 48rem; } - - .relative { - position: relative; + @media (width >= 64rem) { + max-width: 64rem; } - - .sticky { - position: sticky; + @media (width >= 80rem) { + max-width: 80rem; } - - .inset-0 { - inset: calc(var(--spacing) * 0); + @media (width >= 96rem) { + max-width: 96rem; } - - .top-0 { - top: calc(var(--spacing) * 0); + } + .mx-auto { + margin-inline: auto; + } + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } + .mt-4 { + margin-top: calc(var(--spacing) * 4); + } + .mt-6 { + margin-top: calc(var(--spacing) * 6); + } + .mb-3 { + margin-bottom: calc(var(--spacing) * 3); + } + .mb-6 { + margin-bottom: calc(var(--spacing) * 6); + } + .ml-1 { + margin-left: calc(var(--spacing) * 1); + } + .block { + display: block; + } + .flex { + display: flex; + } + .grid { + display: grid; + } + .hidden { + display: none; + } + .inline { + display: inline; + } + .inline-flex { + display: inline-flex; + } + .table { + display: table; + } + .h-4 { + height: calc(var(--spacing) * 4); + } + .h-6 { + height: calc(var(--spacing) * 6); + } + .h-10 { + height: calc(var(--spacing) * 10); + } + .h-18 { + height: calc(var(--spacing) * 18); + } + .h-24 { + height: calc(var(--spacing) * 24); + } + .h-auto { + height: auto; + } + .h-full { + height: 100%; + } + .w-3 { + width: calc(var(--spacing) * 3); + } + .w-3\/4 { + width: calc(3/4 * 100%); + } + .w-4 { + width: calc(var(--spacing) * 4); + } + .w-6 { + width: calc(var(--spacing) * 6); + } + .w-10 { + width: calc(var(--spacing) * 10); + } + .w-18 { + width: calc(var(--spacing) * 18); + } + .w-24 { + width: calc(var(--spacing) * 24); + } + .w-48 { + width: calc(var(--spacing) * 48); + } + .w-full { + width: 100%; + } + .max-w-7xl { + max-width: var(--container-7xl); + } + .max-w-lg { + max-width: var(--container-lg); + } + .min-w-full { + min-width: 100%; + } + .border-collapse { + border-collapse: collapse; + } + .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,); + } + .resize { + resize: both; + } + .grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .flex-col { + flex-direction: column; + } + .flex-wrap { + flex-wrap: wrap; + } + .items-baseline { + align-items: baseline; + } + .items-center { + align-items: center; + } + .justify-between { + justify-content: space-between; + } + .justify-center { + justify-content: center; + } + .gap-3 { + gap: calc(var(--spacing) * 3); + } + .gap-4 { + gap: calc(var(--spacing) * 4); + } + .gap-6 { + gap: calc(var(--spacing) * 6); + } + .gap-8 { + gap: calc(var(--spacing) * 8); + } + .space-y-1 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); } - - .top-2 { - top: calc(var(--spacing) * 2); + } + .space-x-3 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); } - - .left-0 { - left: calc(var(--spacing) * 0); + } + .space-x-4 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } - - .z-0 { - z-index: 0; + } + .overflow-hidden { + overflow: hidden; + } + .overflow-x-auto { + overflow-x: auto; + } + .rounded-lg { + border-radius: var(--radius-lg); + } + .rounded-md { + border-radius: var(--radius-md); + } + .rounded-xl { + border-radius: var(--radius-xl); + } + .border { + border-style: var(--tw-border-style); + border-width: 1px; + } + .border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + } + .border-gray-200 { + border-color: var(--color-gray-200); + } + .border-gray-700 { + border-color: var(--color-gray-700); + } + .border-sf_blau-200 { + border-color: var(--color-sf_blau-200); + } + .bg-blue-500 { + background-color: var(--color-blue-500); + } + .bg-blue-500\/40 { + background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 40%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent); } - - .z-10 { - z-index: 10; + } + .bg-gray-100 { + background-color: var(--color-gray-100); + } + .bg-sf_blau-500 { + background-color: var(--color-sf_blau-500); + } + .bg-sf_blau-600 { + background-color: var(--color-sf_blau-600); + } + .bg-sf_grau-50 { + background-color: var(--color-sf_grau-50); + } + .bg-sf_grau-400 { + background-color: var(--color-sf_grau-400); + } + .bg-white { + background-color: var(--color-white); + } + .object-cover { + object-fit: cover; + } + .px-2 { + padding-inline: calc(var(--spacing) * 2); + } + .px-3 { + padding-inline: calc(var(--spacing) * 3); + } + .px-4 { + padding-inline: calc(var(--spacing) * 4); + } + .px-6 { + padding-inline: calc(var(--spacing) * 6); + } + .py-1 { + padding-block: calc(var(--spacing) * 1); + } + .py-2 { + padding-block: calc(var(--spacing) * 2); + } + .py-3 { + padding-block: calc(var(--spacing) * 3); + } + .py-4 { + padding-block: calc(var(--spacing) * 4); + } + .py-7 { + padding-block: calc(var(--spacing) * 7); + } + .py-16 { + padding-block: calc(var(--spacing) * 16); + } + .py-24 { + padding-block: calc(var(--spacing) * 24); + } + .pt-2 { + padding-top: calc(var(--spacing) * 2); + } + .pt-4 { + padding-top: calc(var(--spacing) * 4); + } + .pt-6 { + padding-top: calc(var(--spacing) * 6); + } + .pb-3 { + padding-bottom: calc(var(--spacing) * 3); + } + .pl-6 { + padding-left: calc(var(--spacing) * 6); + } + .text-center { + text-align: center; + } + .text-left { + text-align: left; + } + .text-right { + text-align: right; + } + .font-sans { + font-family: var(--font-sans); + } + .text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + .text-4xl { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + } + .text-6xl { + font-size: var(--text-6xl); + line-height: var(--tw-leading, var(--text-6xl--line-height)); + } + .text-base { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + } + .text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--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); + } + .whitespace-nowrap { + white-space: nowrap; + } + .text-gray-500 { + color: var(--color-gray-500); + } + .text-gray-600 { + color: var(--color-gray-600); + } + .text-gray-700 { + color: var(--color-gray-700); + } + .text-gray-900 { + color: var(--color-gray-900); + } + .text-red-50 { + color: var(--color-red-50); + } + .text-red-500 { + color: var(--color-red-500); + } + .text-sf_blau-500 { + color: var(--color-sf_blau-500); + } + .text-sf_blau-700 { + color: var(--color-sf_blau-700); + } + .text-sf_blau-800 { + color: var(--color-sf_blau-800); + } + .text-sf_gelb-500 { + color: var(--color-sf_gelb-500); + } + .text-sf_grau-600 { + color: var(--color-sf_grau-600); + } + .text-sf_grau-800 { + color: var(--color-sf_grau-800); + } + .text-white { + color: var(--color-white); + } + .underline { + text-decoration-line: underline; + } + .antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + .opacity-0 { + opacity: 0%; + } + .opacity-50 { + opacity: 50%; + } + .shadow-lg { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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); + } + .shadow-xl { + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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); + } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } + .transition-all { + transition-property: all; + 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-transform { + transition-property: transform, translate, scale, rotate; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .duration-200 { + --tw-duration: 200ms; + transition-duration: 200ms; + } + .duration-500 { + --tw-duration: 500ms; + transition-duration: 500ms; + } + .ease-in-out { + --tw-ease: var(--ease-in-out); + transition-timing-function: var(--ease-in-out); + } + .group-hover\:visible { + &:is(:where(.group):hover *) { + @media (hover: hover) { + visibility: visible; + } } - - .z-50 { - z-index: 50; - } - - .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; - } - - .mt-2 { - margin-top: calc(var(--spacing) * 2); - } - - .mt-4 { - margin-top: calc(var(--spacing) * 4); - } - - .mb-3 { - margin-bottom: calc(var(--spacing) * 3); - } - - .mb-6 { - margin-bottom: calc(var(--spacing) * 6); - } - - .ml-1 { - margin-left: calc(var(--spacing) * 1); - } - - .block { - display: block; - } - - .flex { - display: flex; - } - - .hidden { - display: none; - } - - .inline { - display: inline; - } - - .h-4 { - height: calc(var(--spacing) * 4); - } - - .h-6 { - height: calc(var(--spacing) * 6); - } - - .h-10 { - height: calc(var(--spacing) * 10); - } - - .h-18 { - height: calc(var(--spacing) * 18); - } - - .h-24 { - height: calc(var(--spacing) * 24); - } - - .h-auto { - height: auto; - } - - .h-full { - height: 100%; - } - - .w-3\/4 { - width: calc(3 / 4 * 100%); - } - - .w-4 { - width: calc(var(--spacing) * 4); - } - - .w-6 { - width: calc(var(--spacing) * 6); - } - - .w-10 { - width: calc(var(--spacing) * 10); - } - - .w-18 { - width: calc(var(--spacing) * 18); - } - - .w-24 { - width: calc(var(--spacing) * 24); - } - - .w-48 { - width: calc(var(--spacing) * 48); - } - - .w-full { - width: 100%; - } - - .max-w-7xl { - max-width: var(--container-7xl); - } - - .rotate-180 { + } + .group-hover\:rotate-180 { + &:is(:where(.group):hover *) { + @media (hover: hover) { rotate: 180deg; + } } - - .transform { - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + } + .group-hover\:opacity-100 { + &:is(:where(.group):hover *) { + @media (hover: hover) { + opacity: 100%; + } } - - .resize { - resize: both; + } + .odd\:bg-white { + &:nth-child(odd) { + background-color: var(--color-white); } - - .flex-col { - flex-direction: column; + } + .even\:bg-gray-50 { + &:nth-child(even) { + background-color: var(--color-gray-50); } - - .items-baseline { - align-items: baseline; + } + .even\:bg-sf_grau-50 { + &:nth-child(even) { + background-color: var(--color-sf_grau-50); } - - .items-center { - align-items: center; + } + .even\:bg-sf_grau-100 { + &:nth-child(even) { + background-color: var(--color-sf_grau-100); } - - .justify-between { - justify-content: space-between; + } + .even\:bg-sf_grau-200 { + &:nth-child(even) { + background-color: var(--color-sf_grau-200); } - - .justify-center { - justify-content: center; + } + .hover\:cursor-pointer { + &:hover { + @media (hover: hover) { + cursor: pointer; + } } - - .gap-6 { - gap: calc(var(--spacing) * 6); + } + .hover\:bg-gray-100 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-100); + } } - - .gap-8 { - gap: calc(var(--spacing) * 8); + } + .hover\:bg-sf_blau-50 { + &:hover { + @media (hover: hover) { + background-color: var(--color-sf_blau-50); + } } - - .space-y-1 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); - } + } + .hover\:text-blue-600 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-600); + } } - - .space-x-3 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); - } + } + .hover\:text-pink-500 { + &:hover { + @media (hover: hover) { + color: var(--color-pink-500); + } } - - .space-x-4 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); - } + } + .hover\:text-sf_blau-300 { + &:hover { + @media (hover: hover) { + color: var(--color-sf_blau-300); + } } - - .overflow-hidden { - overflow: hidden; - } - - .rounded-lg { - border-radius: var(--radius-lg); - } - - .rounded-md { - border-radius: var(--radius-md); - } - - .border { - border-style: var(--tw-border-style); - border-width: 1px; - } - - .border-t { - border-top-style: var(--tw-border-style); - border-top-width: 1px; - } - - .border-gray-700 { - border-color: var(--color-gray-700); - } - - .bg-blue-500\/40 { - background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 40%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent); - } - } - - .bg-sf_grau-50 { - background-color: var(--color-sf_grau-50); - } - - .bg-sf_grau-400 { - background-color: var(--color-sf_grau-400); - } - - .bg-white { - background-color: var(--color-white); - } - - .object-cover { - object-fit: cover; - } - - .px-2 { - padding-inline: calc(var(--spacing) * 2); - } - - .px-3 { - padding-inline: calc(var(--spacing) * 3); - } - - .px-4 { - padding-inline: calc(var(--spacing) * 4); - } - - .py-1 { - padding-block: calc(var(--spacing) * 1); - } - - .py-2 { - padding-block: calc(var(--spacing) * 2); - } - - .py-7 { - padding-block: calc(var(--spacing) * 7); - } - - .py-16 { - padding-block: calc(var(--spacing) * 16); - } - - .py-24 { - padding-block: calc(var(--spacing) * 24); - } - - .pt-2 { - padding-top: calc(var(--spacing) * 2); - } - - .pt-4 { - padding-top: calc(var(--spacing) * 4); - } - - .pb-3 { - padding-bottom: calc(var(--spacing) * 3); - } - - .pl-6 { - padding-left: calc(var(--spacing) * 6); - } - - .text-center { - text-align: center; - } - - .text-left { - text-align: left; - } - - .font-sans { - font-family: var(--font-sans); - } - - .text-4xl { - font-size: var(--text-4xl); - line-height: var(--tw-leading, var(--text-4xl--line-height)); - } - - .text-base { - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - } - - .text-lg { - font-size: var(--text-lg); - line-height: var(--tw-leading, var(--text-lg--line-height)); - } - - .text-sm { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--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); - } - - .text-gray-500 { - color: var(--color-gray-500); - } - - .text-gray-600 { - color: var(--color-gray-600); - } - - .text-gray-700 { - color: var(--color-gray-700); - } - - .text-gray-900 { - color: var(--color-gray-900); - } - - .text-sf_blau-500 { + } + .hover\:text-sf_blau-500 { + &:hover { + @media (hover: hover) { color: var(--color-sf_blau-500); + } } - - .text-sf_grau-600 { - color: var(--color-sf_grau-600); + } + .hover\:text-sf_blau-700 { + &:hover { + @media (hover: hover) { + color: var(--color-sf_blau-700); + } } - - .text-sf_grau-800 { - color: var(--color-sf_grau-800); + } + .hover\:text-sf_gelb-300 { + &:hover { + @media (hover: hover) { + color: var(--color-sf_gelb-300); + } } - - .text-white { - color: var(--color-white); + } + .hover\:text-sf_gelb-500 { + &:hover { + @media (hover: hover) { + color: var(--color-sf_gelb-500); + } } - - .antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + } + .focus\:text-blue-600 { + &:focus { + color: var(--color-blue-600); } - - .opacity-0 { - opacity: 0%; + } + .focus\:outline-none { + &:focus { + --tw-outline-style: none; + outline-style: none; } - - .opacity-50 { - opacity: 50%; + } + .focus-visible\:outline-none { + &:focus-visible { + --tw-outline-style: none; + outline-style: none; } - - .shadow-lg { - --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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); + } + .disabled\:pointer-events-none { + &:disabled { + pointer-events: none; } - - .shadow-xl { - --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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); + } + .disabled\:opacity-50 { + &:disabled { + opacity: 50%; } - - .transition-all { - transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .sm\:flex { + @media (width >= 40rem) { + display: flex; } - - .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)); + } + .sm\:px-3 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 3); } - - .transition-transform { - transition-property: transform, translate, scale, rotate; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .sm\:px-6 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 6); } - - .duration-200 { - --tw-duration: 200ms; - transition-duration: 200ms; + } + .md\:top-6 { + @media (width >= 48rem) { + top: calc(var(--spacing) * 6); } - - .duration-500 { - --tw-duration: 500ms; - transition-duration: 500ms; + } + .md\:mt-8 { + @media (width >= 48rem) { + margin-top: calc(var(--spacing) * 8); } - - .group-hover\:visible { - &:is(:where(.group):hover *) { - @media (hover: hover) { - visibility: visible; - } - } + } + .md\:block { + @media (width >= 48rem) { + display: block; } - - .group-hover\:rotate-180 { - &:is(:where(.group):hover *) { - @media (hover: hover) { - rotate: 180deg; - } - } + } + .md\:hidden { + @media (width >= 48rem) { + display: none; } - - .group-hover\:opacity-100 { - &:is(:where(.group):hover *) { - @media (hover: hover) { - opacity: 100%; - } - } + } + .md\:h-36 { + @media (width >= 48rem) { + height: calc(var(--spacing) * 36); } - - .hover\:bg-gray-100 { - &:hover { - @media (hover: hover) { - background-color: var(--color-gray-100); - } - } + } + .md\:w-1\/2 { + @media (width >= 48rem) { + width: calc(1/2 * 100%); } - - .hover\:text-blue-600 { - &:hover { - @media (hover: hover) { - color: var(--color-blue-600); - } - } + } + .md\:w-36 { + @media (width >= 48rem) { + width: calc(var(--spacing) * 36); } - - .hover\:text-pink-500 { - &:hover { - @media (hover: hover) { - color: var(--color-pink-500); - } - } + } + .md\:py-32 { + @media (width >= 48rem) { + padding-block: calc(var(--spacing) * 32); } - - .hover\:text-sf_blau-500 { - &:hover { - @media (hover: hover) { - color: var(--color-sf_blau-500); - } - } + } + .lg\:flex { + @media (width >= 64rem) { + display: flex; } - - .hover\:text-sf_blau-700 { - &:hover { - @media (hover: hover) { - color: var(--color-sf_blau-700); - } - } + } + .lg\:grid { + @media (width >= 64rem) { + display: grid; } - - .hover\:text-sf_gelb-500 { - &:hover { - @media (hover: hover) { - color: var(--color-sf_gelb-500); - } - } + } + .lg\:w-1\/2 { + @media (width >= 64rem) { + width: calc(1/2 * 100%); } - - .focus\:text-blue-600 { - &:focus { - color: var(--color-blue-600); - } + } + .lg\:grid-cols-2 { + @media (width >= 64rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); } - - .focus\:outline-none { - &:focus { - --tw-outline-style: none; - outline-style: none; - } + } + .lg\:flex-row { + @media (width >= 64rem) { + flex-direction: row; } - - .sm\:flex { - @media (width >= 40rem) { - display: flex; - } + } + .lg\:gap-10 { + @media (width >= 64rem) { + gap: calc(var(--spacing) * 10); } - - .sm\:px-3 { - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 3); - } + } + .lg\:gap-12 { + @media (width >= 64rem) { + gap: calc(var(--spacing) * 12); } - - .sm\:px-6 { - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 6); - } + } + .lg\:gap-16 { + @media (width >= 64rem) { + gap: calc(var(--spacing) * 16); } - - .md\:top-6 { - @media (width >= 48rem) { - top: calc(var(--spacing) * 6); - } + } + .lg\:px-8 { + @media (width >= 64rem) { + padding-inline: calc(var(--spacing) * 8); } - - .md\:block { - @media (width >= 48rem) { - display: block; - } + } + .lg\:pt-0 { + @media (width >= 64rem) { + padding-top: calc(var(--spacing) * 0); } - - .md\:hidden { - @media (width >= 48rem) { - display: none; - } - } - - .md\:h-36 { - @media (width >= 48rem) { - height: calc(var(--spacing) * 36); - } - } - - .md\:w-1\/2 { - @media (width >= 48rem) { - width: calc(1 / 2 * 100%); - } - } - - .md\:w-36 { - @media (width >= 48rem) { - width: calc(var(--spacing) * 36); - } - } - - .md\:py-32 { - @media (width >= 48rem) { - padding-block: calc(var(--spacing) * 32); - } - } - - .lg\:flex { - @media (width >= 64rem) { - display: flex; - } - } - - .lg\:w-1\/2 { - @media (width >= 64rem) { - width: calc(1 / 2 * 100%); - } - } - - .lg\:flex-row { - @media (width >= 64rem) { - flex-direction: row; - } - } - - .lg\:gap-10 { - @media (width >= 64rem) { - gap: calc(var(--spacing) * 10); - } - } - - .lg\:gap-16 { - @media (width >= 64rem) { - gap: calc(var(--spacing) * 16); - } - } - - .lg\:px-8 { - @media (width >= 64rem) { - padding-inline: calc(var(--spacing) * 8); - } - } - - .xl\:gap-14 { - @media (width >= 80rem) { - gap: calc(var(--spacing) * 14); - } + } + .xl\:gap-14 { + @media (width >= 80rem) { + gap: calc(var(--spacing) * 14); } + } } - @property --tw-rotate-x { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; } - @property --tw-rotate-y { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; } - @property --tw-rotate-z { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; } - @property --tw-skew-x { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; } - @property --tw-skew-y { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; } - @property --tw-space-y-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; + syntax: "*"; + inherits: false; + initial-value: 0; } - @property --tw-space-x-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; + syntax: "*"; + inherits: false; + initial-value: 0; } - @property --tw-border-style { - syntax: "*"; - inherits: false; - initial-value: solid; + syntax: "*"; + inherits: false; + initial-value: solid; } - @property --tw-font-weight { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; } - @property --tw-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; } - @property --tw-shadow-color { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; } - @property --tw-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; + syntax: ""; + inherits: false; + initial-value: 100%; } - @property --tw-inset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; } - @property --tw-inset-shadow-color { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; } - @property --tw-inset-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; + syntax: ""; + inherits: false; + initial-value: 100%; } - @property --tw-ring-color { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; } - @property --tw-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; } - @property --tw-inset-ring-color { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; } - @property --tw-inset-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; } - @property --tw-ring-inset { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; } - @property --tw-ring-offset-width { - syntax: ""; - inherits: false; - initial-value: 0px; + syntax: ""; + inherits: false; + initial-value: 0px; } - @property --tw-ring-offset-color { - syntax: "*"; - inherits: false; - initial-value: #fff; + syntax: "*"; + inherits: false; + initial-value: #fff; } - @property --tw-ring-offset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; } - @property --tw-duration { - syntax: "*"; - inherits: false; + syntax: "*"; + inherits: false; +} +@property --tw-ease { + syntax: "*"; + inherits: false; } - @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 { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - --tw-space-y-reverse: 0; - --tw-space-x-reverse: 0; - --tw-border-style: solid; - --tw-font-weight: initial; - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - --tw-duration: initial; - } + @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 { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + --tw-space-y-reverse: 0; + --tw-space-x-reverse: 0; + --tw-border-style: solid; + --tw-font-weight: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-outline-style: solid; + --tw-duration: initial; + --tw-ease: initial; } + } } diff --git a/content/4_verein/3_dwz/dwz.txt b/content/4_verein/3_dwz/dwz.txt index ccc014f..bb63efc 100644 --- a/content/4_verein/3_dwz/dwz.txt +++ b/content/4_verein/3_dwz/dwz.txt @@ -1,3 +1,15 @@ -Title: DWZ +Title: DWZ-Liste + +---- + +HeroText: Hier finden Sie die aktuelle DWZ-Liste unseres Vereins. + +---- + +HeroButton: DWZ beim DSB + +---- + +ButtonLink: https://www.schachbund.de/verein/25318.html ---- diff --git a/site/snippets/dwz.php b/site/snippets/dwz.php new file mode 100644 index 0000000..a9981ef --- /dev/null +++ b/site/snippets/dwz.php @@ -0,0 +1,54 @@ + $dwzA; + }); + } +?> +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PlatzMitgl.TitelNameDWZELO
+ + -
Keine Daten verfügbar.
+
+
\ No newline at end of file diff --git a/site/snippets/titel.php b/site/snippets/titel.php new file mode 100644 index 0000000..05a4ba9 --- /dev/null +++ b/site/snippets/titel.php @@ -0,0 +1,14 @@ +
+
+
+
+

title() ?>

+
+
+

heroText() ?>

+
+
+
+
+
+
\ No newline at end of file diff --git a/site/templates/dwz.php b/site/templates/dwz.php new file mode 100644 index 0000000..6a7bc24 --- /dev/null +++ b/site/templates/dwz.php @@ -0,0 +1,34 @@ +title()`. + + This default template must not be removed. It is used whenever Kirby + cannot find a template with the name of the content file. + + Snippets like the header and footer contain markup used in + multiple templates. They also help to keep templates clean. + + More about templates: https://getkirby.com/docs/guide/templates/basics + */ + +?> + + + + + + + + + + + + +