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.3 kB · 117 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
@layer components { .onesheet { display: flex; flex-direction: column; color: var(--color-base-content); line-height: 1.6; gap: 1em;
@media (min-width: 480px) { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 2rem; }
pre { overflow-x: auto; max-width: 100%; min-width: 0; padding: 0.5em 0.75em; border-radius: 0.375rem; }
h1 { font-size: 2.25em; font-weight: 300; text-align: center; margin-top: 0; margin-bottom: 0.5rem; }
h2 { font-size: 1.5em; font-weight: 300; margin-top: 1em; margin-bottom: 0.5em; }
h3 { font-size: 1.25em; font-weight: 300; margin-top: 1rem; margin-bottom: 0.15rem; }
p { margin-top: 0.5em; margin-bottom: 0.5em; }
a { text-decoration: underline; text-decoration-style: dotted; overflow-wrap: anywhere; }
strong { font-weight: 700; }
em { font-style: italic; }
ul { list-style-type: disc; padding-left: 1.5em; margin-top: 0; margin-bottom: 0; }
li { margin-top: 0.15em; margin-bottom: 0.15em; }
img { max-width: 100%; height: auto; }
td { padding: 0 0.75em 0.25rem 0; vertical-align: baseline; }
td:has(em) { text-align: right; white-space: nowrap; width: 1%; color: var(--color-primary); } }
.onesheet-col { flex: 1; min-width: 0;
&:first-child { flex-basis: 100%; }
& > h2:first-of-type { margin-top: 0; } }
.onesheet-avatar { float: right; width: 8rem; height: 8rem; object-fit: cover; border-radius: 0.75rem; margin: 0.5rem; }}