mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 06:31:09 -05:00
Enhance website's visual appeal and mobile responsiveness with style updates
Update CSS styles across various components to improve visual presentation and ensure better responsiveness on mobile devices, including adjustments to spacing, aspect ratios, and element sizing. Replit-Commit-Author: Agent Replit-Commit-Session-Id: c446bc9e-66df-438c-a86c-f53e6da13649 Replit-Commit-Checkpoint-Type: intermediate_checkpoint
This commit is contained in:
pac7
@@ -410,9 +410,15 @@
|
||||
.top-0 {
|
||||
top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.top-1\.5 {
|
||||
top: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.top-1\/2 {
|
||||
top: calc(1/2 * 100%);
|
||||
}
|
||||
.top-2 {
|
||||
top: calc(var(--spacing) * 2);
|
||||
}
|
||||
.top-3 {
|
||||
top: calc(var(--spacing) * 3);
|
||||
}
|
||||
@@ -425,6 +431,12 @@
|
||||
.right-0 {
|
||||
right: calc(var(--spacing) * 0);
|
||||
}
|
||||
.right-1\.5 {
|
||||
right: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.right-2 {
|
||||
right: calc(var(--spacing) * 2);
|
||||
}
|
||||
.right-3 {
|
||||
right: calc(var(--spacing) * 3);
|
||||
}
|
||||
@@ -524,6 +536,12 @@
|
||||
max-width: 96rem;
|
||||
}
|
||||
}
|
||||
.-m-1 {
|
||||
margin: calc(var(--spacing) * -1);
|
||||
}
|
||||
.-m-2 {
|
||||
margin: calc(var(--spacing) * -2);
|
||||
}
|
||||
.-mx-1\.5 {
|
||||
margin-inline: calc(var(--spacing) * -1.5);
|
||||
}
|
||||
@@ -692,6 +710,12 @@
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
.aspect-\[4\/3\] {
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
.aspect-\[16\/9\] {
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
.aspect-square {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
@@ -785,12 +809,21 @@
|
||||
.min-h-20 {
|
||||
min-height: calc(var(--spacing) * 20);
|
||||
}
|
||||
.min-h-\[24px\] {
|
||||
min-height: 24px;
|
||||
}
|
||||
.min-h-\[44px\] {
|
||||
min-height: 44px;
|
||||
}
|
||||
.min-h-\[100px\] {
|
||||
min-height: 100px;
|
||||
}
|
||||
.min-h-\[120px\] {
|
||||
min-height: 120px;
|
||||
}
|
||||
.min-h-\[300px\] {
|
||||
min-height: 300px;
|
||||
}
|
||||
.min-h-\[400px\] {
|
||||
min-height: 400px;
|
||||
}
|
||||
@@ -914,6 +947,12 @@
|
||||
.min-w-16 {
|
||||
min-width: calc(var(--spacing) * 16);
|
||||
}
|
||||
.min-w-\[24px\] {
|
||||
min-width: 24px;
|
||||
}
|
||||
.min-w-\[44px\] {
|
||||
min-width: 44px;
|
||||
}
|
||||
.min-w-\[200px\] {
|
||||
min-width: 200px;
|
||||
}
|
||||
@@ -1037,6 +1076,9 @@
|
||||
.list-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.appearance-none {
|
||||
appearance: none;
|
||||
}
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
@@ -1150,6 +1192,13 @@
|
||||
margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
}
|
||||
.space-x-1\.5 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-inline-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-x-reverse));
|
||||
margin-inline-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
}
|
||||
.space-x-2 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
@@ -1171,13 +1220,6 @@
|
||||
margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
}
|
||||
.space-x-6 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
|
||||
margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
}
|
||||
.space-x-8 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
@@ -1228,6 +1270,9 @@
|
||||
.rounded-md {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.rounded-sm {
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.rounded-xl {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
@@ -1583,6 +1628,12 @@
|
||||
background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-white\/50 {
|
||||
background-color: color-mix(in srgb, #fff 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-white\/80 {
|
||||
background-color: color-mix(in srgb, #fff 80%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -1595,6 +1646,12 @@
|
||||
background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-white\/95 {
|
||||
background-color: color-mix(in srgb, #fff 95%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-yellow-50 {
|
||||
background-color: var(--color-yellow-50);
|
||||
}
|
||||
@@ -1625,6 +1682,13 @@
|
||||
--tw-gradient-position: to top in oklab;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
.from-black\/20 {
|
||||
--tw-gradient-from: color-mix(in srgb, #000 20%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-gradient-from: color-mix(in oklab, var(--color-black) 20%, 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-black\/70 {
|
||||
--tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -1648,6 +1712,14 @@
|
||||
--tw-gradient-from: var(--color-gray-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));
|
||||
}
|
||||
.from-gray-200 {
|
||||
--tw-gradient-from: var(--color-gray-200);
|
||||
--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-gray-400 {
|
||||
--tw-gradient-from: var(--color-gray-400);
|
||||
--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-gray-900 {
|
||||
--tw-gradient-from: var(--color-gray-900);
|
||||
--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));
|
||||
@@ -1684,11 +1756,26 @@
|
||||
--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);
|
||||
}
|
||||
.via-gray-100 {
|
||||
--tw-gradient-via: var(--color-gray-100);
|
||||
--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);
|
||||
}
|
||||
.via-gray-500 {
|
||||
--tw-gradient-via: var(--color-gray-500);
|
||||
--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);
|
||||
}
|
||||
.via-purple-500 {
|
||||
--tw-gradient-via: var(--color-purple-500);
|
||||
--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);
|
||||
}
|
||||
.via-transparent {
|
||||
--tw-gradient-via: transparent;
|
||||
--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);
|
||||
}
|
||||
.via-white {
|
||||
--tw-gradient-via: var(--color-white);
|
||||
--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);
|
||||
@@ -1706,6 +1793,14 @@
|
||||
--tw-gradient-to: var(--color-gray-100);
|
||||
--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-gray-200 {
|
||||
--tw-gradient-to: var(--color-gray-200);
|
||||
--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-gray-600 {
|
||||
--tw-gradient-to: var(--color-gray-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));
|
||||
}
|
||||
.to-gray-700 {
|
||||
--tw-gradient-to: var(--color-gray-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));
|
||||
@@ -1761,9 +1856,6 @@
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
.p-0\.5 {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.p-1 {
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
@@ -1794,6 +1886,9 @@
|
||||
.px-1 {
|
||||
padding-inline: calc(var(--spacing) * 1);
|
||||
}
|
||||
.px-1\.5 {
|
||||
padding-inline: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.px-2 {
|
||||
padding-inline: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -1851,6 +1946,9 @@
|
||||
.pt-2 {
|
||||
padding-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
.pt-3 {
|
||||
padding-top: calc(var(--spacing) * 3);
|
||||
}
|
||||
.pt-4 {
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -2127,6 +2225,12 @@
|
||||
.text-white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.text-white\/70 {
|
||||
color: color-mix(in srgb, #fff 70%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, var(--color-white) 70%, transparent);
|
||||
}
|
||||
}
|
||||
.text-yellow-400 {
|
||||
color: var(--color-yellow-400);
|
||||
}
|
||||
@@ -2174,9 +2278,15 @@
|
||||
.opacity-50 {
|
||||
opacity: 50%;
|
||||
}
|
||||
.opacity-60 {
|
||||
opacity: 60%;
|
||||
}
|
||||
.opacity-75 {
|
||||
opacity: 75%;
|
||||
}
|
||||
.opacity-80 {
|
||||
opacity: 80%;
|
||||
}
|
||||
.opacity-100 {
|
||||
opacity: 100%;
|
||||
}
|
||||
@@ -2330,6 +2440,10 @@
|
||||
--tw-duration: 300ms;
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.duration-500 {
|
||||
--tw-duration: 500ms;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
.ease-in {
|
||||
--tw-ease: var(--ease-in);
|
||||
transition-timing-function: var(--ease-in);
|
||||
@@ -2354,6 +2468,10 @@
|
||||
--tw-outline-style: none;
|
||||
outline-style: none;
|
||||
}
|
||||
.select-none {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.\[coverage\:report\] {
|
||||
coverage: report;
|
||||
}
|
||||
@@ -2381,6 +2499,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-hover\:scale-110 {
|
||||
&:is(:where(.group):hover *) {
|
||||
@media (hover: hover) {
|
||||
--tw-scale-x: 110%;
|
||||
--tw-scale-y: 110%;
|
||||
--tw-scale-z: 110%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-hover\:text-blue-600 {
|
||||
&:is(:where(.group):hover *) {
|
||||
@media (hover: hover) {
|
||||
@@ -2983,6 +3111,11 @@
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.focus\:bg-gray-50 {
|
||||
&:focus {
|
||||
background-color: var(--color-gray-50);
|
||||
}
|
||||
}
|
||||
.focus\:bg-gray-100 {
|
||||
&:focus {
|
||||
background-color: var(--color-gray-100);
|
||||
@@ -3128,6 +3261,26 @@
|
||||
opacity: 50%;
|
||||
}
|
||||
}
|
||||
.sm\:top-2 {
|
||||
@media (width >= 40rem) {
|
||||
top: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
.sm\:top-3 {
|
||||
@media (width >= 40rem) {
|
||||
top: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
.sm\:right-2 {
|
||||
@media (width >= 40rem) {
|
||||
right: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
.sm\:right-3 {
|
||||
@media (width >= 40rem) {
|
||||
right: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
.sm\:col-span-3 {
|
||||
@media (width >= 40rem) {
|
||||
grid-column: span 3 / span 3;
|
||||
@@ -3143,16 +3296,41 @@
|
||||
grid-column: span 9 / span 9;
|
||||
}
|
||||
}
|
||||
.sm\:mt-2 {
|
||||
@media (width >= 40rem) {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
.sm\:mb-0 {
|
||||
@media (width >= 40rem) {
|
||||
margin-bottom: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.sm\:mb-3 {
|
||||
@media (width >= 40rem) {
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
.sm\:mb-4 {
|
||||
@media (width >= 40rem) {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.sm\:mb-8 {
|
||||
@media (width >= 40rem) {
|
||||
margin-bottom: calc(var(--spacing) * 8);
|
||||
}
|
||||
}
|
||||
.sm\:mb-16 {
|
||||
@media (width >= 40rem) {
|
||||
margin-bottom: calc(var(--spacing) * 16);
|
||||
}
|
||||
}
|
||||
.sm\:ml-2 {
|
||||
@media (width >= 40rem) {
|
||||
margin-left: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
.sm\:block {
|
||||
@media (width >= 40rem) {
|
||||
display: block;
|
||||
@@ -3173,16 +3351,76 @@
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.sm\:aspect-\[4\/3\] {
|
||||
@media (width >= 40rem) {
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
}
|
||||
.sm\:h-5 {
|
||||
@media (width >= 40rem) {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
}
|
||||
.sm\:h-10 {
|
||||
@media (width >= 40rem) {
|
||||
height: calc(var(--spacing) * 10);
|
||||
}
|
||||
}
|
||||
.sm\:min-h-0 {
|
||||
@media (width >= 40rem) {
|
||||
min-height: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.sm\:min-h-\[400px\] {
|
||||
@media (width >= 40rem) {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
.sm\:min-h-auto {
|
||||
@media (width >= 40rem) {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
.sm\:w-5 {
|
||||
@media (width >= 40rem) {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
}
|
||||
.sm\:w-10 {
|
||||
@media (width >= 40rem) {
|
||||
width: calc(var(--spacing) * 10);
|
||||
}
|
||||
}
|
||||
.sm\:w-32 {
|
||||
@media (width >= 40rem) {
|
||||
width: calc(var(--spacing) * 32);
|
||||
}
|
||||
}
|
||||
.sm\:w-96 {
|
||||
@media (width >= 40rem) {
|
||||
width: calc(var(--spacing) * 96);
|
||||
}
|
||||
}
|
||||
.sm\:w-auto {
|
||||
@media (width >= 40rem) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.sm\:min-w-0 {
|
||||
@media (width >= 40rem) {
|
||||
min-width: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.sm\:flex-1 {
|
||||
@media (width >= 40rem) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.sm\:flex-none {
|
||||
@media (width >= 40rem) {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
.sm\:grid-cols-1 {
|
||||
@media (width >= 40rem) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
@@ -3198,6 +3436,11 @@
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.sm\:flex-col {
|
||||
@media (width >= 40rem) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.sm\:flex-row {
|
||||
@media (width >= 40rem) {
|
||||
flex-direction: row;
|
||||
@@ -3218,6 +3461,62 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.sm\:justify-start {
|
||||
@media (width >= 40rem) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.sm\:gap-3 {
|
||||
@media (width >= 40rem) {
|
||||
gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
.sm\:gap-4 {
|
||||
@media (width >= 40rem) {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.sm\:gap-6 {
|
||||
@media (width >= 40rem) {
|
||||
gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
.sm\:space-y-0 {
|
||||
@media (width >= 40rem) {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
}
|
||||
.sm\:space-y-3 {
|
||||
@media (width >= 40rem) {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
}
|
||||
.sm\:space-y-6 {
|
||||
@media (width >= 40rem) {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
}
|
||||
.sm\:space-x-2 {
|
||||
@media (width >= 40rem) {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
|
||||
margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
}
|
||||
}
|
||||
.sm\:space-x-4 {
|
||||
@media (width >= 40rem) {
|
||||
:where(& > :not(:last-child)) {
|
||||
@@ -3236,11 +3535,106 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.sm\:p-0\.5 {
|
||||
@media (width >= 40rem) {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
.sm\:p-4 {
|
||||
@media (width >= 40rem) {
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.sm\:p-6 {
|
||||
@media (width >= 40rem) {
|
||||
padding: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
.sm\:px-0 {
|
||||
@media (width >= 40rem) {
|
||||
padding-inline: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.sm\:px-2 {
|
||||
@media (width >= 40rem) {
|
||||
padding-inline: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
.sm\:px-2\.5 {
|
||||
@media (width >= 40rem) {
|
||||
padding-inline: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
.sm\:px-4 {
|
||||
@media (width >= 40rem) {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.sm\:px-6 {
|
||||
@media (width >= 40rem) {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
.sm\:py-0 {
|
||||
@media (width >= 40rem) {
|
||||
padding-block: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.sm\:py-1 {
|
||||
@media (width >= 40rem) {
|
||||
padding-block: calc(var(--spacing) * 1);
|
||||
}
|
||||
}
|
||||
.sm\:py-2 {
|
||||
@media (width >= 40rem) {
|
||||
padding-block: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
.sm\:py-6 {
|
||||
@media (width >= 40rem) {
|
||||
padding-block: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
.sm\:pt-4 {
|
||||
@media (width >= 40rem) {
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.sm\:text-left {
|
||||
@media (width >= 40rem) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.sm\:text-3xl {
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
}
|
||||
}
|
||||
.sm\:text-base {
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--tw-leading, var(--text-base--line-height));
|
||||
}
|
||||
}
|
||||
.sm\:text-lg {
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-lg);
|
||||
line-height: var(--tw-leading, var(--text-lg--line-height));
|
||||
}
|
||||
}
|
||||
.sm\:text-sm {
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
}
|
||||
.sm\:text-xl {
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||
}
|
||||
}
|
||||
.md\:col-span-1 {
|
||||
@media (width >= 48rem) {
|
||||
grid-column: span 1 / span 1;
|
||||
@@ -3296,6 +3690,11 @@
|
||||
width: calc(var(--spacing) * 7);
|
||||
}
|
||||
}
|
||||
.md\:w-40 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(var(--spacing) * 40);
|
||||
}
|
||||
}
|
||||
.md\:w-48 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(var(--spacing) * 48);
|
||||
@@ -3409,6 +3808,11 @@
|
||||
width: calc(3/4 * 100%);
|
||||
}
|
||||
}
|
||||
.lg\:w-48 {
|
||||
@media (width >= 64rem) {
|
||||
width: calc(var(--spacing) * 48);
|
||||
}
|
||||
}
|
||||
.lg\:max-w-2xl {
|
||||
@media (width >= 64rem) {
|
||||
max-width: var(--container-2xl);
|
||||
@@ -3459,6 +3863,11 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.lg\:gap-6 {
|
||||
@media (width >= 64rem) {
|
||||
gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
.lg\:gap-8 {
|
||||
@media (width >= 64rem) {
|
||||
gap: calc(var(--spacing) * 8);
|
||||
@@ -3469,6 +3878,11 @@
|
||||
padding: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
.lg\:px-6 {
|
||||
@media (width >= 64rem) {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
.lg\:px-8 {
|
||||
@media (width >= 64rem) {
|
||||
padding-inline: calc(var(--spacing) * 8);
|
||||
@@ -3680,11 +4094,6 @@
|
||||
border-color: var(--color-green-800);
|
||||
}
|
||||
}
|
||||
.dark\:border-purple-800 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: var(--color-purple-800);
|
||||
}
|
||||
}
|
||||
.dark\:border-purple-800\/50 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: color-mix(in srgb, oklch(43.8% 0.218 303.724) 50%, transparent);
|
||||
@@ -3871,14 +4280,6 @@
|
||||
background-color: var(--color-purple-900);
|
||||
}
|
||||
}
|
||||
.dark\:bg-purple-900\/20 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 20%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-purple-900) 20%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:bg-purple-900\/30 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 30%, transparent);
|
||||
@@ -3995,6 +4396,18 @@
|
||||
--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));
|
||||
}
|
||||
}
|
||||
.dark\:from-gray-600 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--tw-gradient-from: var(--color-gray-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));
|
||||
}
|
||||
}
|
||||
.dark\:from-gray-700 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--tw-gradient-from: var(--color-gray-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));
|
||||
}
|
||||
}
|
||||
.dark\:from-gray-900 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--tw-gradient-from: var(--color-gray-900);
|
||||
@@ -4037,6 +4450,20 @@
|
||||
--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));
|
||||
}
|
||||
}
|
||||
.dark\:via-gray-600 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--tw-gradient-via: var(--color-gray-600);
|
||||
--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);
|
||||
}
|
||||
}
|
||||
.dark\:via-gray-700 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--tw-gradient-via: var(--color-gray-700);
|
||||
--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);
|
||||
}
|
||||
}
|
||||
.dark\:via-gray-800 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--tw-gradient-via: var(--color-gray-800);
|
||||
@@ -4057,6 +4484,18 @@
|
||||
--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));
|
||||
}
|
||||
}
|
||||
.dark\:to-gray-700 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--tw-gradient-to: var(--color-gray-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));
|
||||
}
|
||||
}
|
||||
.dark\:to-gray-800 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--tw-gradient-to: var(--color-gray-800);
|
||||
--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));
|
||||
}
|
||||
}
|
||||
.dark\:to-gray-900 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--tw-gradient-to: var(--color-gray-900);
|
||||
@@ -4644,13 +5083,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:focus\:border-blue-500 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:focus {
|
||||
border-color: var(--color-blue-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:focus\:bg-gray-700 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:focus {
|
||||
@@ -4679,6 +5111,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:focus\:ring-offset-gray-800 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:focus {
|
||||
--tw-ring-offset-color: var(--color-gray-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-logo {
|
||||
font-size: 1.5rem;
|
||||
|
||||
Reference in New Issue
Block a user