- 코드 정리
- 경고 클래스 수정 - 카드 비율 수정 3:4 > 4:5
This commit is contained in:
@@ -93,6 +93,8 @@
|
||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||
--text-4xl: 2.25rem;
|
||||
--text-4xl--line-height: calc(2.5 / 2.25);
|
||||
--text-6xl: 3.75rem;
|
||||
--text-6xl--line-height: 1;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
@@ -321,9 +323,6 @@
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
.z-\[60\] {
|
||||
z-index: 60;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
@media (width >= 40rem) {
|
||||
@@ -345,8 +344,11 @@
|
||||
.mx-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
.mt-2 {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
.-mb-4 {
|
||||
margin-bottom: calc(var(--spacing) * -4);
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
@@ -354,6 +356,9 @@
|
||||
.mb-3 {
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.mb-6 {
|
||||
margin-bottom: calc(var(--spacing) * 6);
|
||||
}
|
||||
@@ -363,6 +368,15 @@
|
||||
.ml-0 {
|
||||
margin-left: calc(var(--spacing) * 0);
|
||||
}
|
||||
.ml-2 {
|
||||
margin-left: calc(var(--spacing) * 2);
|
||||
}
|
||||
.line-clamp-1 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@@ -378,6 +392,9 @@
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
.aspect-\[4\/5\] {
|
||||
aspect-ratio: 4/5;
|
||||
}
|
||||
@@ -400,6 +417,9 @@
|
||||
.h-2 {
|
||||
height: calc(var(--spacing) * 2);
|
||||
}
|
||||
.h-3 {
|
||||
height: calc(var(--spacing) * 3);
|
||||
}
|
||||
.h-4 {
|
||||
height: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -448,12 +468,18 @@
|
||||
.w-10 {
|
||||
width: calc(var(--spacing) * 10);
|
||||
}
|
||||
.w-12 {
|
||||
width: calc(var(--spacing) * 12);
|
||||
}
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.w-px {
|
||||
width: 1px;
|
||||
}
|
||||
.max-w-3xl {
|
||||
max-width: var(--container-3xl);
|
||||
}
|
||||
@@ -481,6 +507,9 @@
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.-translate-x-1\/2 {
|
||||
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
@@ -492,6 +521,9 @@
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
.cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -553,6 +585,20 @@
|
||||
margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.divide-y {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-bottom-style: var(--tw-border-style);
|
||||
border-top-style: var(--tw-border-style);
|
||||
border-top-width: calc(1px * var(--tw-divide-y-reverse));
|
||||
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
}
|
||||
}
|
||||
.divide-slate-100 {
|
||||
:where(& > :not(:last-child)) {
|
||||
border-color: var(--color-slate-100);
|
||||
}
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -622,6 +668,9 @@
|
||||
.border-slate-200 {
|
||||
border-color: var(--color-slate-200);
|
||||
}
|
||||
.border-slate-300 {
|
||||
border-color: var(--color-slate-300);
|
||||
}
|
||||
.border-slate-300\/30 {
|
||||
border-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 30%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -640,6 +689,9 @@
|
||||
.\!bg-green-600 {
|
||||
background-color: var(--color-green-600) !important;
|
||||
}
|
||||
.bg-\[\#fae100\] {
|
||||
background-color: #fae100;
|
||||
}
|
||||
.bg-amber-100 {
|
||||
background-color: var(--color-amber-100);
|
||||
}
|
||||
@@ -718,12 +770,6 @@
|
||||
.bg-slate-900 {
|
||||
background-color: var(--color-slate-900);
|
||||
}
|
||||
.bg-slate-900\/10 {
|
||||
background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 10%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-slate-900) 10%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-teal-100 {
|
||||
background-color: var(--color-teal-100);
|
||||
}
|
||||
@@ -760,6 +806,9 @@
|
||||
.p-1 {
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
.p-1\.5 {
|
||||
padding: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.p-3 {
|
||||
padding: calc(var(--spacing) * 3);
|
||||
}
|
||||
@@ -802,6 +851,9 @@
|
||||
.py-12 {
|
||||
padding-block: calc(var(--spacing) * 12);
|
||||
}
|
||||
.py-20 {
|
||||
padding-block: calc(var(--spacing) * 20);
|
||||
}
|
||||
.pt-4 {
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -820,9 +872,16 @@
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-6xl {
|
||||
font-size: var(--text-6xl);
|
||||
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
||||
}
|
||||
.text-base {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--tw-leading, var(--text-base--line-height));
|
||||
@@ -843,6 +902,12 @@
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
.\!text-\[14px\] {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.\!text-\[20px\] {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
.text-\[10px\] {
|
||||
font-size: 10px;
|
||||
}
|
||||
@@ -892,9 +957,6 @@
|
||||
--tw-tracking: var(--tracking-widest);
|
||||
letter-spacing: var(--tracking-widest);
|
||||
}
|
||||
.text-nowrap {
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
.wrap-break-word {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
@@ -908,6 +970,9 @@
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.text-\[\#3c1e1e\] {
|
||||
color: #3c1e1e;
|
||||
}
|
||||
.text-\[\#111418\] {
|
||||
color: #111418;
|
||||
}
|
||||
@@ -959,6 +1024,9 @@
|
||||
.text-sky-700 {
|
||||
color: var(--color-sky-700);
|
||||
}
|
||||
.text-slate-300 {
|
||||
color: var(--color-slate-300);
|
||||
}
|
||||
.text-slate-400 {
|
||||
color: var(--color-slate-400);
|
||||
}
|
||||
@@ -968,6 +1036,9 @@
|
||||
.text-slate-600 {
|
||||
color: var(--color-slate-600);
|
||||
}
|
||||
.text-slate-800 {
|
||||
color: var(--color-slate-800);
|
||||
}
|
||||
.text-slate-900 {
|
||||
color: var(--color-slate-900);
|
||||
}
|
||||
@@ -983,6 +1054,9 @@
|
||||
.line-through {
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
.opacity-20 {
|
||||
opacity: 20%;
|
||||
}
|
||||
.opacity-30 {
|
||||
opacity: 30%;
|
||||
}
|
||||
@@ -1086,6 +1160,20 @@
|
||||
color: var(--color-slate-400);
|
||||
}
|
||||
}
|
||||
.hover\:bg-\[\#f7d600\] {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: #f7d600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-slate-50 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-slate-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-slate-100 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -1100,6 +1188,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-slate-600 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-slate-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:opacity-50 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -1161,11 +1256,6 @@
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.sm\:flex-row {
|
||||
@media (width >= 40rem) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.sm\:items-center {
|
||||
@media (width >= 40rem) {
|
||||
align-items: center;
|
||||
@@ -1386,6 +1476,13 @@
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.dark\:divide-slate-800 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:where(& > :not(:last-child)) {
|
||||
border-color: var(--color-slate-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:border-gray-800 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: var(--color-gray-800);
|
||||
@@ -1509,6 +1606,14 @@
|
||||
background-color: var(--color-slate-800);
|
||||
}
|
||||
}
|
||||
.dark\:bg-slate-800\/50 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:bg-slate-900 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--color-slate-900);
|
||||
@@ -1605,6 +1710,11 @@
|
||||
color: var(--color-slate-100);
|
||||
}
|
||||
}
|
||||
.dark\:text-slate-200 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-slate-200);
|
||||
}
|
||||
}
|
||||
.dark\:text-slate-300 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-slate-300);
|
||||
@@ -1620,6 +1730,11 @@
|
||||
color: var(--color-slate-500);
|
||||
}
|
||||
}
|
||||
.dark\:text-slate-700 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-slate-700);
|
||||
}
|
||||
}
|
||||
.dark\:text-slate-900 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-slate-900);
|
||||
@@ -1653,6 +1768,27 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:hover\:bg-slate-800\/50 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:hover\:text-slate-200 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-slate-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@property --tw-translate-x {
|
||||
syntax: "*";
|
||||
@@ -1694,6 +1830,11 @@
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-divide-y-reverse {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@@ -1901,6 +2042,7 @@
|
||||
--tw-skew-x: initial;
|
||||
--tw-skew-y: initial;
|
||||
--tw-space-y-reverse: 0;
|
||||
--tw-divide-y-reverse: 0;
|
||||
--tw-border-style: solid;
|
||||
--tw-leading: initial;
|
||||
--tw-font-weight: initial;
|
||||
|
||||
Reference in New Issue
Block a user