tw-runner
Version:
Run and manage Tower Website projects with this utility.
86 lines (85 loc) • 2.41 kB
CSS
@layer components {
.card {
@apply px-6 py-12 sm:px-12 flex flex-col sm:flex-row shadow-lg hover:shadow-xl rounded-xl relative overflow-hidden;
.content {
@apply flex flex-col justify-between gap-6 z-5;
.excerpt {
@apply h-full flex flex-col justify-between gap-4;
.title {
@apply font-mono mb-6 font-semibold transition-colors duration-150;
line-height: 1.25;
}
.summary {
@apply font-extralight mb-6 tracking-wider;
line-height: 1.35;
}
}
.drill-down {
@apply font-mono font-semibold text-right sm:text-left text-nowrap sm:opacity-75 sm:hover:opacity-100 cursor-pointer text-warning transition-all duration-200;
}
}
.image {
@apply sm:w-1/3 grayscale-30 opacity-60 absolute;
}
}
.card-1 {
@apply px-8 bg-primary dark:bg-primary-dark text-primary-text dark:text-primary-dark-text;
.content {
@apply sm:w-2/3 pb-54 sm:pb-6;
.excerpt {
.title {
@apply text-[26px] sm:text-[40px];
}
.summary {
@apply text-[23px] sm:text-[24px] font-extralight;
}
}
.drill-down {
@apply text-[32px];
}
}
.image {
@apply sm:w-1/3 -bottom-20 sm:-right-10 sm:-bottom-10 self-center;
}
}
.card-2 {
@apply bg-ground-primary dark:bg-ground-primary text-slate-50 dark:text-slate-50;
.content {
.excerpt {
@apply px-2;
.title {
@apply text-[22px] sm:text-[34px] font-semibold;
}
.summary {
@apply text-[20px] sm:text-[22px];
}
}
.drill-down {
@apply text-[21px] sm:text-[32px] text-center px-1.5 rounded-lg bg-ground/50;
}
}
.image {
@apply w-1/2 -right-6 -bottom-6;
}
}
.card-3 {
@apply bg-ground-secondary dark:bg-ground-secondary-dark text-ground-secondary-text dark:text-ground-secondary-dark-text px-8 py-8;
.content {
@apply w-full;
.excerpt {
.title {
@apply mb-2 text-[21px] sm:text-[23px] text-error;
}
.summary {
@apply text-[18px];
}
}
.drill-down {
@apply text-[19px] sm:text-[19px] text-inherit text-center px-1.5 rounded-lg bg-ground/60;
}
}
.image {
@apply w-6/10 -right-6 -bottom-6 grayscale-50 opacity-35;
}
}
}