samantha/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better desing

Browse Source
This commit is contained in:
samantha42
2026-05-29 23:24:57 +02:00
parent b57eec886a
commit 46c8f691ef
2 changed files with 192 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/tailwind.css
+179
View File
@@ -9,6 +9,7 @@
monospace;
--color-red-400: oklch(70.4% 0.191 22.216);
--color-red-500: oklch(63.7% 0.237 25.331);
--color-red-600: oklch(57.7% 0.245 27.325);
--color-green-500: oklch(72.3% 0.219 149.579);
--color-green-600: oklch(62.7% 0.194 149.214);
--color-blue-400: oklch(70.7% 0.165 254.624);
@@ -22,6 +23,7 @@
--color-gray-500: oklch(55.1% 0.027 264.364);
--color-gray-600: oklch(44.6% 0.03 256.802);
--color-gray-800: oklch(27.8% 0.033 256.848);
--color-gray-900: oklch(21% 0.034 264.665);
--color-zinc-50: oklch(98.5% 0 0);
--color-black: #000;
--color-white: #fff;
@@ -201,6 +203,9 @@
}
}
@layer utilities {
.pointer-events-none {
pointer-events: none;
}
.collapse {
visibility: collapse;
}
@@ -225,15 +230,30 @@
.inset-x-0 {
inset-inline: calc(var(--spacing) * 0);
}
.inset-y-0 {
inset-block: calc(var(--spacing) * 0);
}
.top-0 {
top: calc(var(--spacing) * 0);
}
.right-0 {
right: calc(var(--spacing) * 0);
}
.bottom-0 {
bottom: calc(var(--spacing) * 0);
}
.left-0 {
left: calc(var(--spacing) * 0);
}
.isolate {
isolation: isolate;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-50 {
z-index: 50;
}
@@ -258,6 +278,9 @@
.m-0 {
margin: calc(var(--spacing) * 0);
}
.m-6 {
margin: calc(var(--spacing) * 6);
}
.mx-auto {
margin-inline: auto;
}
@@ -315,6 +338,9 @@
.h-20 {
height: calc(var(--spacing) * 20);
}
.h-24 {
height: calc(var(--spacing) * 24);
}
.h-36 {
height: calc(var(--spacing) * 36);
}
@@ -330,6 +356,9 @@
.w-4xl {
width: var(--container-4xl);
}
.w-16 {
width: calc(var(--spacing) * 16);
}
.w-24 {
width: calc(var(--spacing) * 24);
}
@@ -583,9 +612,21 @@
.border-gray-400 {
border-color: var(--color-gray-400);
}
.border-green-600 {
border-color: var(--color-green-600);
}
.border-red-600 {
border-color: var(--color-red-600);
}
.bg-white {
background-color: var(--color-white);
}
.bg-white\/80 {
background-color: color-mix(in srgb, #fff 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
}
}
.bg-white\/90 {
background-color: color-mix(in srgb, #fff 90%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -595,6 +636,82 @@
.bg-zinc-50 {
background-color: var(--color-zinc-50);
}
.bg-zinc-50\/20 {
background-color: color-mix(in srgb, oklch(98.5% 0 0) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-zinc-50) 20%, transparent);
}
}
.bg-zinc-50\/30 {
background-color: color-mix(in srgb, oklch(98.5% 0 0) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-zinc-50) 30%, transparent);
}
}
.bg-zinc-50\/50 {
background-color: color-mix(in srgb, oklch(98.5% 0 0) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-zinc-50) 50%, transparent);
}
}
.bg-zinc-50\/60 {
background-color: color-mix(in srgb, oklch(98.5% 0 0) 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-zinc-50) 60%, transparent);
}
}
.bg-zinc-50\/80 {
background-color: color-mix(in srgb, oklch(98.5% 0 0) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-zinc-50) 80%, transparent);
}
}
.bg-zinc-50\/90 {
background-color: color-mix(in srgb, oklch(98.5% 0 0) 90%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-zinc-50) 90%, transparent);
}
}
.bg-zinc-50\/95 {
background-color: color-mix(in srgb, oklch(98.5% 0 0) 95%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-zinc-50) 95%, transparent);
}
}
.bg-zinc-50\/98 {
background-color: color-mix(in srgb, oklch(98.5% 0 0) 98%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-zinc-50) 98%, transparent);
}
}
.bg-gradient-to-l {
--tw-gradient-position: to left in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-r {
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-t {
--tw-gradient-position: to top in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-transparent {
--tw-gradient-from: transparent;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-zinc-50 {
--tw-gradient-from: var(--color-zinc-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-transparent {
--tw-gradient-to: transparent;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-zinc-50 {
--tw-gradient-to: var(--color-zinc-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.object-cover {
object-fit: cover;
}
@@ -613,6 +730,9 @@
.p-6 {
padding: calc(var(--spacing) * 6);
}
.px-1 {
padding-inline: calc(var(--spacing) * 1);
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
@@ -737,6 +857,9 @@
.text-red-500 {
color: var(--color-red-500);
}
.text-red-600 {
color: var(--color-red-600);
}
.uppercase {
text-transform: uppercase;
}
@@ -813,6 +936,11 @@
}
}
}
.dark\:bg-gray-900 {
&:where([data-theme=dark], [data-theme=dark] *) {
background-color: var(--color-gray-900);
}
}
.dark\:text-blue-400 {
&:where([data-theme=dark], [data-theme=dark] *) {
color: var(--color-blue-400);
@@ -1004,6 +1132,48 @@ aside {
inherits: false;
initial-value: solid;
}
@property --tw-gradient-position {
syntax: "*";
inherits: false;
}
@property --tw-gradient-from {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-via {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-to {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-stops {
syntax: "*";
inherits: false;
}
@property --tw-gradient-via-stops {
syntax: "*";
inherits: false;
}
@property --tw-gradient-from-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
@property --tw-gradient-via-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 50%;
}
@property --tw-gradient-to-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-leading {
syntax: "*";
inherits: false;
@@ -1035,6 +1205,15 @@ aside {
--tw-skew-y: initial;
--tw-space-y-reverse: 0;
--tw-border-style: solid;
--tw-gradient-position: initial;
--tw-gradient-from: #0000;
--tw-gradient-via: #0000;
--tw-gradient-to: #0000;
--tw-gradient-stops: initial;
--tw-gradient-via-stops: initial;
--tw-gradient-from-position: 0%;
--tw-gradient-via-position: 50%;
--tw-gradient-to-position: 100%;
--tw-leading: initial;
--tw-font-weight: initial;
--tw-tracking: initial;