separeate pages

This commit is contained in:
Abel Luck 2026-03-30 13:11:37 +02:00
parent 3fc999a69b
commit 9e826fcee8
9 changed files with 1376 additions and 924 deletions

View file

@ -15,6 +15,7 @@
--color-amber-400: oklch(82.8% 0.189 84.429);
--color-amber-500: oklch(76.9% 0.188 70.08);
--color-amber-600: oklch(66.6% 0.179 58.318);
--color-amber-700: oklch(55.5% 0.163 48.998);
--color-amber-800: oklch(47.3% 0.137 46.201);
--color-amber-950: oklch(27.9% 0.077 45.635);
--color-emerald-100: oklch(95% 0.052 163.051);
@ -24,9 +25,6 @@
--color-sky-800: oklch(44.3% 0.11 240.79);
--color-rose-50: oklch(96.9% 0.015 12.422);
--color-rose-100: oklch(94.1% 0.03 12.58);
--color-rose-200: oklch(89.2% 0.058 10.001);
--color-rose-400: oklch(71.2% 0.194 13.428);
--color-rose-500: oklch(64.5% 0.246 16.439);
--color-rose-700: oklch(51.4% 0.222 16.935);
--color-rose-800: oklch(45.5% 0.188 13.697);
--color-slate-50: oklch(98.4% 0.003 247.858);
@ -43,9 +41,9 @@
--color-stone-50: oklch(98.5% 0.001 106.423);
--color-stone-100: oklch(97% 0.001 106.424);
--color-stone-200: oklch(92.3% 0.003 48.717);
--color-black: #000;
--color-white: #fff;
--spacing: 0.25rem;
--container-sm: 24rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-7xl: 80rem;
@ -59,12 +57,8 @@
--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-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-black: 900;
@ -244,9 +238,6 @@
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.relative {
position: relative;
}
@ -310,15 +301,12 @@
.mt-auto {
margin-top: auto;
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
.mb-3 {
margin-bottom: calc(var(--spacing) * 3);
}
.block {
display: block;
}
.contents {
display: contents;
}
.flex {
display: flex;
}
@ -328,6 +316,9 @@
.hidden {
display: none;
}
.inline {
display: inline;
}
.inline-flex {
display: inline-flex;
}
@ -366,19 +357,39 @@
.max-w-7xl {
max-width: var(--container-7xl);
}
.min-w-full {
min-width: 100%;
.max-w-40 {
max-width: calc(var(--spacing) * 40);
}
.max-w-sm {
max-width: var(--container-sm);
}
.min-w-32 {
min-width: calc(var(--spacing) * 32);
}
.min-w-48 {
min-width: calc(var(--spacing) * 48);
}
.min-w-56 {
min-width: calc(var(--spacing) * 56);
}
.min-w-\[70rem\] {
min-width: 70rem;
}
.min-w-\[72rem\] {
min-width: 72rem;
}
.shrink-0 {
flex-shrink: 0;
}
.table-auto {
table-layout: auto;
}
.translate-x-0 {
--tw-translate-x: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-5 {
--tw-translate-x: calc(var(--spacing) * 5);
translate: var(--tw-translate-x) var(--tw-translate-y);
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
@ -386,6 +397,9 @@
.flex-col {
flex-direction: column;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap {
flex-wrap: wrap;
}
@ -426,6 +440,20 @@
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;
margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-5 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-6 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
@ -433,13 +461,6 @@
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-8 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
}
}
.divide-y {
:where(& > :not(:last-child)) {
--tw-divide-y-reverse: 0;
@ -454,6 +475,11 @@
border-color: var(--color-slate-200);
}
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overflow-hidden {
overflow: hidden;
}
@ -466,8 +492,8 @@
.rounded-3xl {
border-radius: var(--radius-3xl);
}
.rounded-\[2rem\] {
border-radius: 2rem;
.rounded-\[1\.5rem\] {
border-radius: 1.5rem;
}
.rounded-full {
border-radius: calc(infinity * 1px);
@ -487,10 +513,6 @@
border-top-style: var(--tw-border-style);
border-top-width: 1px;
}
.border-b {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.border-slate-200 {
border-color: var(--color-slate-200);
}
@ -515,15 +537,6 @@
.bg-amber-400 {
background-color: var(--color-amber-400);
}
.bg-amber-500 {
background-color: var(--color-amber-500);
}
.bg-black\/30 {
background-color: color-mix(in srgb, #000 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
}
}
.bg-emerald-100 {
background-color: var(--color-emerald-100);
}
@ -533,12 +546,6 @@
.bg-rose-100 {
background-color: var(--color-rose-100);
}
.bg-rose-500\/15 {
background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 15%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-rose-500) 15%, transparent);
}
}
.bg-sky-100 {
background-color: var(--color-sky-100);
}
@ -569,24 +576,12 @@
background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
}
}
.bg-white\/10 {
background-color: color-mix(in srgb, #fff 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}
}
.bg-white\/85 {
background-color: color-mix(in srgb, #fff 85%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
}
}
.bg-white\/90 {
background-color: color-mix(in srgb, #fff 90%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
}
}
.bg-linear-to-br {
--tw-gradient-position: to bottom right;
@supports (background-image: linear-gradient(in lab, red, red)) {
@ -639,9 +634,6 @@
.p-5 {
padding: calc(var(--spacing) * 5);
}
.p-6 {
padding: calc(var(--spacing) * 6);
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
@ -681,15 +673,18 @@
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.py-5 {
padding-block: calc(var(--spacing) * 5);
}
.py-6 {
padding-block: calc(var(--spacing) * 6);
}
.py-8 {
padding-block: calc(var(--spacing) * 8);
}
.pt-6 {
padding-top: calc(var(--spacing) * 6);
}
.pr-6 {
padding-right: calc(var(--spacing) * 6);
}
.pl-4 {
padding-left: calc(var(--spacing) * 4);
}
.text-left {
text-align: left;
}
@ -699,10 +694,6 @@
.font-mono {
font-family: var(--font-mono);
}
.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));
@ -746,10 +737,6 @@
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.tracking-\[0\.3em\] {
--tw-tracking: 0.3em;
letter-spacing: 0.3em;
}
.tracking-\[0\.18em\] {
--tw-tracking: 0.18em;
letter-spacing: 0.18em;
@ -766,12 +753,21 @@
--tw-tracking: var(--tracking-tight);
letter-spacing: var(--tracking-tight);
}
.whitespace-normal {
white-space: normal;
}
.whitespace-nowrap {
white-space: nowrap;
}
.text-amber-300 {
color: var(--color-amber-300);
}
.text-amber-600 {
color: var(--color-amber-600);
}
.text-amber-700 {
color: var(--color-amber-700);
}
.text-amber-800 {
color: var(--color-amber-800);
}
@ -784,9 +780,6 @@
.text-emerald-800 {
color: var(--color-emerald-800);
}
.text-rose-200 {
color: var(--color-rose-200);
}
.text-rose-700 {
color: var(--color-rose-700);
}
@ -827,10 +820,6 @@
--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);
}
.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);
}
.shadow-xs {
--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@ -839,15 +828,6 @@
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-rose-200 {
--tw-ring-color: var(--color-rose-200);
}
.ring-rose-400\/20 {
--tw-ring-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
}
}
.ring-slate-200 {
--tw-ring-color: var(--color-slate-200);
}
@ -892,6 +872,11 @@
color: var(--color-slate-400);
}
}
.first\:pl-4 {
&:first-child {
padding-left: calc(var(--spacing) * 4);
}
}
.hover\:bg-amber-300 {
&:hover {
@media (hover: hover) {
@ -899,10 +884,10 @@
}
}
}
.hover\:bg-rose-50 {
.hover\:bg-emerald-200 {
&:hover {
@media (hover: hover) {
background-color: var(--color-rose-50);
background-color: var(--color-emerald-200);
}
}
}
@ -913,16 +898,6 @@
}
}
}
.hover\:bg-rose-500\/20 {
&:hover {
@media (hover: hover) {
background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
}
}
}
}
.hover\:bg-slate-50 {
&:hover {
@media (hover: hover) {
@ -964,13 +939,24 @@
}
}
}
.hover\:bg-white\/15 {
.hover\:text-amber-800 {
&:hover {
@media (hover: hover) {
background-color: color-mix(in srgb, #fff 15%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
}
color: var(--color-amber-800);
}
}
}
.hover\:text-rose-800 {
&:hover {
@media (hover: hover) {
color: var(--color-rose-800);
}
}
}
.hover\:text-slate-950 {
&:hover {
@media (hover: hover) {
color: var(--color-slate-950);
}
}
}
@ -1002,6 +988,28 @@
}
}
}
.data-class\:translate-x-0 {
&[data-class] {
--tw-translate-x: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.data-class\:translate-x-5 {
&[data-class] {
--tw-translate-x: calc(var(--spacing) * 5);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.data-class\:bg-amber-500 {
&[data-class] {
background-color: var(--color-amber-500);
}
}
.data-class\:bg-slate-200 {
&[data-class] {
background-color: var(--color-slate-200);
}
}
.sm\:grid-cols-2 {
@media (width >= 40rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
@ -1017,36 +1025,36 @@
align-items: flex-end;
}
}
.sm\:items-start {
@media (width >= 40rem) {
align-items: flex-start;
}
}
.sm\:justify-between {
@media (width >= 40rem) {
justify-content: space-between;
}
}
.sm\:p-8 {
.sm\:px-5 {
@media (width >= 40rem) {
padding: calc(var(--spacing) * 8);
padding-inline: calc(var(--spacing) * 5);
}
}
.sm\:px-6 {
.sm\:pl-4 {
@media (width >= 40rem) {
padding-inline: calc(var(--spacing) * 6);
padding-left: calc(var(--spacing) * 4);
}
}
.sm\:px-8 {
.sm\:pl-6 {
@media (width >= 40rem) {
padding-inline: calc(var(--spacing) * 8);
padding-left: calc(var(--spacing) * 6);
}
}
.sm\:text-4xl {
.sm\:first\:pl-6 {
@media (width >= 40rem) {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
}
.sm\:text-base {
@media (width >= 40rem) {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
&:first-child {
padding-left: calc(var(--spacing) * 6);
}
}
}
.md\:grid-cols-2 {
@ -1079,39 +1087,14 @@
grid-template-columns: 18rem minmax(0,1fr);
}
}
.lg\:flex-row {
.lg\:px-6 {
@media (width >= 64rem) {
flex-direction: row;
padding-inline: calc(var(--spacing) * 6);
}
}
.lg\:items-end {
.lg\:py-5 {
@media (width >= 64rem) {
align-items: flex-end;
}
}
.lg\:justify-between {
@media (width >= 64rem) {
justify-content: space-between;
}
}
.lg\:px-8 {
@media (width >= 64rem) {
padding-inline: calc(var(--spacing) * 8);
}
}
.lg\:py-8 {
@media (width >= 64rem) {
padding-block: calc(var(--spacing) * 8);
}
}
.xl\:grid-cols-2 {
@media (width >= 80rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.xl\:grid-cols-3 {
@media (width >= 80rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding-block: calc(var(--spacing) * 5);
}
}
.xl\:grid-cols-4 {
@ -1124,9 +1107,9 @@
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.xl\:grid-cols-\[minmax\(0\,1\.35fr\)_minmax\(22rem\,0\.95fr\)\] {
.xl\:grid-cols-\[minmax\(0\,1\.3fr\)_minmax\(20rem\,0\.9fr\)\] {
@media (width >= 80rem) {
grid-template-columns: minmax(0,1.35fr) minmax(22rem,0.95fr);
grid-template-columns: minmax(0,1.3fr) minmax(20rem,0.9fr);
}
}
}

View file

@ -1,3 +1 @@
@import "tailwindcss";
@source "../components.py";
@source "../web.py";
@import "tailwindcss" source("../");