new_site/src/img
This commit is contained in:
parent
17b3c9e9e9
commit
ed1aeafb48
GPG Key ID:
327233DA85435270
@ -7,10 +7,36 @@
|
||||
<link href="./output.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="bg-white text-black decoration-amber-700
|
||||
dark:bg-neutral-900 dark:bg-none dark:text-white dark:decoration-amber-400">
|
||||
<h1 class="text-5xl decoration-2 decoration-inherit font-bold underline text-center p-2 mt-10">Hello you!</h1>
|
||||
<p class="text-lg text-center p-2">This is a test paragraph!</p>
|
||||
|
||||
<div class="shadow-amber-100 size-max mx-auto grid grid-cols-1 gap-10 px-10 font-mono font-bold sm:grid-cols-2 m-6
|
||||
border-2 border-green-400 rounded-2xl p-5 backdrop-blur-xl drop-shadow-lg
|
||||
hover:rotate-3 duration-200">
|
||||
<div class="flex flex-col">
|
||||
<p class="mb-3 font-mono text-sm font-medium text-gray-500 dark:text-gray-400">box-decoration-slice</p>
|
||||
<div class="font-sans text-5xl leading-none font-extrabold tracking-tight"><span
|
||||
class="bg-linear-to-r from-indigo-600 to-pink-500 box-decoration-slice px-2 leading-[3.5rem] text-white">Hello<br>World</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<p class="mb-3 font-mono text-sm font-medium text-gray-500 dark:text-gray-400">box-decoration-clone</p>
|
||||
<div class="font-sans text-5xl leading-none font-extrabold tracking-tight"><span
|
||||
class="bg-linear-to-r from-indigo-600 to-pink-500 box-decoration-clone px-2 leading-[3.5rem] text-white">Hello<br>World</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mx-auto hover:rotate-3 m-3 duration-200 size-48 h-[3rem] rounded-xl bg-linear-120/decreasing from-violet-700 via-lime-300 to-violet-700">
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mx-auto hover:rotate-3 m-3 duration-200 size-48 h-[3rem] rounded-xl bg-linear-120/decreasing from-violet-700 to-pink-500 brightness-150"">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -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: "<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;
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user