diff --git a/src/static/css/tailwind.css b/src/static/css/tailwind.css index 40b6283..84927a1 100644 --- a/src/static/css/tailwind.css +++ b/src/static/css/tailwind.css @@ -518,12 +518,18 @@ } } @layer utilities { + .collapse { + visibility: collapse; + } .invisible { visibility: hidden; } .absolute { position: absolute; } + .fixed { + position: fixed; + } .relative { position: relative; } @@ -608,9 +614,21 @@ .grid { display: grid; } + .hidden { + display: none; + } .inline { display: inline; } + .inline-flex { + display: inline-flex; + } + .list-item { + display: list-item; + } + .table { + display: table; + } .aspect-square { aspect-ratio: 1 / 1; } @@ -665,9 +683,18 @@ .max-w-\[1210px\] { max-width: 1210px; } + .flex-shrink { + flex-shrink: 1; + } .flex-shrink-0 { flex-shrink: 0; } + .border-collapse { + border-collapse: collapse; + } + .origin-center { + transform-origin: center; + } .scale-80 { --tw-scale-x: 80%; --tw-scale-y: 80%; @@ -692,9 +719,18 @@ --tw-scale-z: 150%; scale: var(--tw-scale-x) var(--tw-scale-y); } + .transform { + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } + .animate-bounce { + animation: var(--animate-bounce); + } .animate-ping { animation: var(--animate-ping); } + .resize { + resize: both; + } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -855,6 +891,20 @@ .text-white { color: var(--color-white); } + .underline { + text-decoration-line: underline; + } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } + .filter { + 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,); + } + .backdrop-filter { + -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,); + } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -865,6 +915,11 @@ 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-400 { --tw-duration: 400ms; transition-duration: 400ms; @@ -873,6 +928,27 @@ --tw-ease: var(--ease-in); transition-timing-function: var(--ease-in); } + .hover\:-rotate-5 { + &:hover { + @media (hover: hover) { + rotate: calc(5deg * -1); + } + } + } + .hover\:-rotate-15 { + &:hover { + @media (hover: hover) { + rotate: calc(15deg * -1); + } + } + } + .hover\:-rotate-45 { + &:hover { + @media (hover: hover) { + rotate: calc(45deg * -1); + } + } + } .hover\:border-\[\#FF851A\] { &:hover { @media (hover: hover) { @@ -1023,6 +1099,31 @@ body { inherits: false; initial-value: 1; } +@property --tw-rotate-x { + syntax: "*"; + inherits: false; + initial-value: rotateX(0); +} +@property --tw-rotate-y { + syntax: "*"; + inherits: false; + initial-value: rotateY(0); +} +@property --tw-rotate-z { + syntax: "*"; + inherits: false; + initial-value: rotateZ(0); +} +@property --tw-skew-x { + syntax: "*"; + inherits: false; + initial-value: skewX(0); +} +@property --tw-skew-y { + syntax: "*"; + inherits: false; + initial-value: skewY(0); +} @property --tw-border-style { syntax: "*"; inherits: false; @@ -1078,6 +1179,83 @@ body { syntax: "*"; inherits: false; } +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-blur { + syntax: "*"; + inherits: false; +} +@property --tw-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-invert { + syntax: "*"; + inherits: false; +} +@property --tw-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-blur { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-invert { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-sepia { + syntax: "*"; + inherits: false; +} @property --tw-duration { syntax: "*"; inherits: false; diff --git a/src/templates/Title.tsx b/src/templates/Title.tsx index f62b201..9105ded 100644 --- a/src/templates/Title.tsx +++ b/src/templates/Title.tsx @@ -10,10 +10,10 @@ export default function Title() { non-company, 200% wah!

-
+ Sleeping red panda on the tree -
+ ); }