63 lines
1.6 KiB
CSS
63 lines
1.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-paper-light text-paper-dark min-h-screen;
|
|
background-image:
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.paper-card {
|
|
@apply bg-paper-sand border-2 border-paper-brown shadow-paper;
|
|
}
|
|
|
|
.paper-card-light {
|
|
@apply bg-paper-light border-2 border-paper-gray shadow-paper;
|
|
}
|
|
|
|
.paper-card-dark {
|
|
@apply bg-paper-brown text-paper-light border-2 border-paper-dark shadow-paper-lg;
|
|
}
|
|
|
|
.cardboard-texture {
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
transparent 2px,
|
|
rgba(47, 41, 38, 0.03) 2px,
|
|
rgba(47, 41, 38, 0.03) 4px
|
|
),
|
|
repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 2px,
|
|
rgba(47, 41, 38, 0.03) 2px,
|
|
rgba(47, 41, 38, 0.03) 4px
|
|
);
|
|
}
|
|
|
|
.torn-edge {
|
|
position: relative;
|
|
}
|
|
|
|
.torn-edge::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background-image:
|
|
linear-gradient(45deg, transparent 33.33%, currentColor 33.33%, currentColor 66.66%, transparent 66.66%),
|
|
linear-gradient(-45deg, transparent 33.33%, currentColor 33.33%, currentColor 66.66%, transparent 66.66%);
|
|
background-size: 8px 4px;
|
|
background-repeat: repeat-x;
|
|
opacity: 0.1;
|
|
}
|
|
}
|