diff --git a/new_site/src/index.html b/new_site/src/index.html
index b1a39f3..02402a3 100644
--- a/new_site/src/index.html
+++ b/new_site/src/index.html
@@ -7,10 +7,36 @@
-
+
Hello you!
This is a test paragraph!
+
+
+
box-decoration-slice
+
+
+
+
box-decoration-clone
+
+
+
+
+
+
+
+
diff --git a/new_site/src/output.css b/new_site/src/output.css
index a6e0d0a..22dfba5 100644
--- a/new_site/src/output.css
+++ b/new_site/src/output.css
@@ -7,15 +7,37 @@
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
--color-red-500: oklch(0.637 0.237 25.331);
+ --color-amber-100: oklch(0.962 0.059 95.617);
+ --color-amber-400: oklch(0.828 0.189 84.429);
+ --color-amber-700: oklch(0.555 0.163 48.998);
+ --color-lime-300: oklch(0.897 0.196 126.665);
+ --color-green-400: oklch(0.792 0.209 151.711);
+ --color-indigo-600: oklch(0.511 0.262 276.966);
+ --color-violet-700: oklch(0.491 0.27 292.581);
+ --color-pink-500: oklch(0.656 0.241 354.308);
+ --color-gray-400: oklch(0.707 0.022 261.325);
+ --color-gray-500: oklch(0.551 0.027 264.364);
+ --color-neutral-900: oklch(0.205 0 0);
+ --color-black: #000;
+ --color-white: #fff;
--spacing: 0.25rem;
+ --text-sm: 0.875rem;
+ --text-sm--line-height: calc(1.25 / 0.875);
--text-lg: 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125);
--text-5xl: 3rem;
--text-5xl--line-height: 1;
+ --font-weight-medium: 500;
--font-weight-bold: 700;
+ --font-weight-extrabold: 800;
+ --tracking-tight: -0.025em;
+ --radius-xl: 0.75rem;
+ --radius-2xl: 1rem;
+ --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+ --blur-xl: 24px;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
@@ -351,9 +373,21 @@
.m-1 {
margin: calc(var(--spacing) * 1);
}
+ .m-3 {
+ margin: calc(var(--spacing) * 3);
+ }
+ .m-6 {
+ margin: calc(var(--spacing) * 6);
+ }
+ .mx-auto {
+ margin-inline: auto;
+ }
.mt-10 {
margin-top: calc(var(--spacing) * 10);
}
+ .mb-3 {
+ margin-bottom: calc(var(--spacing) * 3);
+ }
.box-border {
box-sizing: border-box;
}
@@ -441,6 +475,17 @@
.aspect-square {
aspect-ratio: 1 / 1;
}
+ .size-48 {
+ width: calc(var(--spacing) * 48);
+ height: calc(var(--spacing) * 48);
+ }
+ .size-max {
+ width: max-content;
+ height: max-content;
+ }
+ .h-\[3rem\] {
+ height: 3rem;
+ }
.h-screen {
height: 100vh;
}
@@ -705,6 +750,9 @@
.auto-rows-min {
grid-auto-rows: min-content;
}
+ .grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
.grid-cols-none {
grid-template-columns: none;
}
@@ -861,6 +909,9 @@
.justify-items-stretch {
justify-items: stretch;
}
+ .gap-10 {
+ gap: calc(var(--spacing) * 10);
+ }
.space-y-reverse {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 1;
@@ -955,6 +1006,12 @@
.rounded {
border-radius: 0.25rem;
}
+ .rounded-2xl {
+ border-radius: var(--radius-2xl);
+ }
+ .rounded-xl {
+ border-radius: var(--radius-xl);
+ }
.rounded-s {
border-start-start-radius: 0.25rem;
border-end-start-radius: 0.25rem;
@@ -1007,6 +1064,10 @@
border-style: var(--tw-border-style);
border-width: 1px;
}
+ .border-2 {
+ border-style: var(--tw-border-style);
+ border-width: 2px;
+ }
.border-x {
border-inline-style: var(--tw-border-style);
border-inline-width: 1px;
@@ -1063,6 +1124,9 @@
--tw-border-style: solid;
border-style: solid;
}
+ .border-green-400 {
+ border-color: var(--color-green-400);
+ }
.bg-\(--my_variable\) {
background-color: var(--my_variable);
}
@@ -1087,6 +1151,9 @@
.bg-red-500\/\[50\%\] {
background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
+ .bg-white {
+ background-color: var(--color-white);
+ }
.-bg-conic {
--tw-gradient-position: in oklab;
background-image: conic-gradient(var(--tw-gradient-stops));
@@ -1095,6 +1162,14 @@
--tw-gradient-position: in oklab;
background-image: conic-gradient(var(--tw-gradient-stops));
}
+ .bg-linear-120\/decreasing {
+ --tw-gradient-position: 120deg in oklch decreasing hue;
+ background-image: linear-gradient(var(--tw-gradient-stops));
+ }
+ .bg-linear-to-r {
+ --tw-gradient-position: to right in oklab;
+ background-image: linear-gradient(var(--tw-gradient-stops));
+ }
.bg-radial {
--tw-gradient-position: in oklab;
background-image: radial-gradient(var(--tw-gradient-stops));
@@ -1105,6 +1180,27 @@
.via-none {
--tw-gradient-via-stops: initial;
}
+ .from-indigo-600 {
+ --tw-gradient-from: var(--color-indigo-600);
+ --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-violet-700 {
+ --tw-gradient-from: var(--color-violet-700);
+ --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));
+ }
+ .via-lime-300 {
+ --tw-gradient-via: var(--color-lime-300);
+ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
+ }
+ .to-pink-500 {
+ --tw-gradient-to: var(--color-pink-500);
+ --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-violet-700 {
+ --tw-gradient-to: var(--color-violet-700);
+ --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));
+ }
.box-decoration-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
@@ -1259,6 +1355,15 @@
.p-2 {
padding: calc(var(--spacing) * 2);
}
+ .p-5 {
+ padding: calc(var(--spacing) * 5);
+ }
+ .px-2 {
+ padding-inline: calc(var(--spacing) * 2);
+ }
+ .px-10 {
+ padding-inline: calc(var(--spacing) * 10);
+ }
.text-center {
text-align: center;
}
@@ -1301,6 +1406,12 @@
.align-top {
vertical-align: top;
}
+ .font-mono {
+ font-family: var(--font-mono);
+ }
+ .font-sans {
+ font-family: var(--font-sans);
+ }
.text-5xl {
font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height));
@@ -1309,6 +1420,14 @@
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));
+ }
+ .leading-\[3\.5rem\] {
+ --tw-leading: 3.5rem;
+ line-height: 3.5rem;
+ }
.leading-none {
--tw-leading: 1;
line-height: 1;
@@ -1317,6 +1436,18 @@
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
+ .font-extrabold {
+ --tw-font-weight: var(--font-weight-extrabold);
+ font-weight: var(--font-weight-extrabold);
+ }
+ .font-medium {
+ --tw-font-weight: var(--font-weight-medium);
+ font-weight: var(--font-weight-medium);
+ }
+ .tracking-tight {
+ --tw-tracking: var(--tracking-tight);
+ letter-spacing: var(--tracking-tight);
+ }
.text-balance {
text-wrap: balance;
}
@@ -1390,6 +1521,15 @@
.\[color\:red\]\/50\! {
color: color-mix(in oklab, red 50%, transparent) !important;
}
+ .text-black {
+ color: var(--color-black);
+ }
+ .text-gray-500 {
+ color: var(--color-gray-500);
+ }
+ .text-white {
+ color: var(--color-white);
+ }
.capitalize {
text-transform: capitalize;
}
@@ -1482,6 +1622,9 @@
.underline {
text-decoration-line: underline;
}
+ .decoration-amber-700 {
+ text-decoration-color: var(--color-amber-700);
+ }
.decoration-inherit {
text-decoration-color: inherit;
}
@@ -1559,6 +1702,9 @@
--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-amber-100 {
+ --tw-shadow-color: var(--color-amber-100);
+ }
.shadow-initial {
--tw-shadow-color: initial;
}
@@ -1584,10 +1730,18 @@
--tw-blur: ;
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
+ .brightness-150 {
+ --tw-brightness: brightness(150%);
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+ }
.drop-shadow {
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
+ .drop-shadow-lg {
+ --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+ }
.drop-shadow-none {
--tw-drop-shadow: ;
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1620,6 +1774,11 @@
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
+ .backdrop-blur-xl {
+ --tw-backdrop-blur: blur(var(--blur-xl));
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+ }
.backdrop-grayscale {
--tw-backdrop-grayscale: grayscale(100%);
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1678,6 +1837,10 @@
.transition-normal {
transition-behavior: normal;
}
+ .duration-200 {
+ --tw-duration: 200ms;
+ transition-duration: 200ms;
+ }
.ease-in {
--tw-ease: var(--ease-in);
transition-timing-function: var(--ease-in);
@@ -1839,6 +2002,43 @@
.transform-view {
transform-box: view-box;
}
+ .hover\:rotate-3 {
+ &:hover {
+ @media (hover: hover) {
+ rotate: 3deg;
+ }
+ }
+ }
+ .sm\:grid-cols-2 {
+ @media (width >= 40rem) {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+ }
+ .dark\:bg-neutral-900 {
+ @media (prefers-color-scheme: dark) {
+ background-color: var(--color-neutral-900);
+ }
+ }
+ .dark\:bg-none {
+ @media (prefers-color-scheme: dark) {
+ background-image: none;
+ }
+ }
+ .dark\:text-gray-400 {
+ @media (prefers-color-scheme: dark) {
+ color: var(--color-gray-400);
+ }
+ }
+ .dark\:text-white {
+ @media (prefers-color-scheme: dark) {
+ color: var(--color-white);
+ }
+ }
+ .dark\:decoration-amber-400 {
+ @media (prefers-color-scheme: dark) {
+ text-decoration-color: var(--color-amber-400);
+ }
+ }
}
@property --tw-translate-x {
syntax: "*";
@@ -1937,6 +2137,48 @@
inherits: false;
initial-value: 0;
}
+@property --tw-gradient-position {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-gradient-from {
+ syntax: "";
+ inherits: false;
+ initial-value: #0000;
+}
+@property --tw-gradient-via {
+ syntax: "";
+ inherits: false;
+ initial-value: #0000;
+}
+@property --tw-gradient-to {
+ syntax: "";
+ 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: "";
+ inherits: false;
+ initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+ syntax: "";
+ inherits: false;
+ initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+ syntax: "";
+ inherits: false;
+ initial-value: 100%;
+}
@property --tw-leading {
syntax: "*";
inherits: false;
@@ -1945,6 +2187,10 @@
syntax: "*";
inherits: false;
}
+@property --tw-tracking {
+ syntax: "*";
+ inherits: false;
+}
@property --tw-ordinal {
syntax: "*";
inherits: false;
@@ -2097,6 +2343,10 @@
syntax: "*";
inherits: false;
}
+@property --tw-duration {
+ syntax: "*";
+ inherits: false;
+}
@property --tw-ease {
syntax: "*";
inherits: false;
@@ -2117,7 +2367,3 @@
syntax: "*";
inherits: false;
}
-@property --tw-duration {
- syntax: "*";
- inherits: false;
-}