Something went wrong. Try again.
A self publishing platform and presentation framework on fire built with Elixir & Phoenix LiveView 🐦🔥 alchemy-pub.fly.dev
liveview slides blog-engine ssg blog markdown elixir presentation rss phoenix
Something went wrong. Try again.
2.8 kB · 128 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
@layer components { .deck { h1 { @apply text-[12cqw] text-primary text-center; }
h2 { @apply text-[10cqw] text-accent text-center; }
h3 { @apply text-[6cqw] text-secondary text-center; }
h4 { @apply text-[4cqw] text-info text-center; }
p { @apply text-[3cqw] max-w-[90cqw] text-center; }
a { @apply link-info inline whitespace-nowrap no-underline; }
pre { @apply min-w-[80cqw] p-2 bg-neutral text-base-100 text-[2cqw] rounded border-1 border-info; }
blockquote { @apply min-w-[50cqw] m-[2cqw] p-[2cqw] rounded-[2cqw] bg-base-100; }
blockquote p { @apply font-serif font-light text-left; }
blockquote p em { @apply text-right; }
ul { @apply min-w-[50cqw] list-outside list-disc pl-[3cqw]; }
ul ul { @apply min-w-0 list-outside list-[circle] pl-[3cqw] mt-0; }
ol { @apply min-w-[50cqw] list-outside list-decimal pl-[3cqw]; }
li { @apply text-[3cqw]; }
li p { @apply contents; }
img { @apply object-contain w-full rounded-[1cqw]; }
a img { @apply inline-block w-auto h-[1em] rounded-none align-middle; }
p:has(> img) { @apply flex flex-col items-center grow shrink justify-center min-w-0 min-h-0; }
p > img { @apply h-auto shrink min-h-0; }
/*  fills the remaining slide space */ p:has(> img[src$="#fill"]) { @apply w-full; }
p > img[src$="#fill"] { @apply flex-1 min-h-0; }
img + em { @apply text-[1.5cqw] opacity-60 shrink-0; }
table { @apply min-w-[50cqw] m-[1cqw] bg-base-100 rounded-[2cqw] text-[3cqw]; }
th, td { @apply px-[2cqw] py-[1cqw]; }
& table { & :where(thead tr, tbody tr:not(:last-child)) { border-bottom: solid var(--color-base-200); } }
.col-header { @apply w-full flex flex-col items-center; }
.cols { @apply flex flex-row gap-[4cqw] w-full flex-1 min-h-0; }
.col { @apply flex-1 flex flex-col items-center justify-center min-w-0 min-h-0; }
.col :is(blockquote, ul, ol, table, pre) { @apply min-w-0 w-full max-w-full; }
.col p { @apply max-w-full; } }}