web/new-web/src/lib/elements/ArticlePage.css

/* Headings */
.prose h1 {
	@apply mt-12 mb-6 text-4xl font-bold text-gray-900 dark:text-gray-100;
}

.prose h2 {
	@apply mt-12 mb-4 text-3xl font-bold text-gray-900 dark:text-gray-100;
}

.prose h3 {
	@apply mt-8 mb-3 text-2xl font-bold text-gray-900 dark:text-gray-100;
}

.prose h4 {
	@apply mt-6 mb-2 text-xl font-bold text-gray-900 dark:text-gray-100;
}

.prose h5 {
	@apply mt-4 mb-2 text-lg font-bold text-gray-900 dark:text-gray-100;
}

.prose h6 {
	@apply mt-4 mb-2 text-base font-bold text-gray-900 dark:text-gray-100;
}

/* Paragraphs and spacing */
.prose p {
	@apply mt-4 leading-7 text-gray-700 dark:text-gray-300;
}

.prose > *:first-child {
	@apply mt-0;
}

/* Lists */
.prose ul {
	@apply mt-4 ml-6 space-y-2 list-disc list-outside;
}

.prose ol {
	@apply mt-4 ml-6 space-y-2 list-decimal list-outside;
}

.prose li {
	@apply leading-7 text-gray-700 dark:text-gray-300;
}

/* Blockquotes */
.prose blockquote {
	@apply pl-4 my-6 italic border-l-4 border-gray-300 dark:border-gray-700;
}

/* Code blocks */
.prose pre {
	@apply p-4 my-6 overflow-x-auto rounded-lg;
}

.prose code:not(.shiki code) {
	@apply px-1.5 py-0.5 rounded text-sm font-mono bg-gray-200 dark:bg-zinc-700;
}

.prose pre code {
	@apply p-0 text-sm leading-relaxed bg-transparent;
}

/* Tables */
.prose table {
	@apply w-full my-6 border-collapse;
}

.prose th {
	@apply px-4 py-2 text-left bg-gray-100 border border-gray-300 dark:border-gray-700 dark:bg-zinc-800;
}

.prose td {
	@apply px-4 py-2 border border-gray-300 dark:border-gray-700;
}

/* Links */
.prose a {
	@apply underline text-primary hover:text-primary/90 decoration-primary/30 hover:decoration-primary/50;
}

.prose a::after {
	content: "";
	@apply icon-[heroicons-outline--external-link] inline-block ml-1 w-3.5 h-3.5 align-text-bottom;
}

/* Horizontal rule */
.prose hr {
	@apply my-8 border-gray-200 dark:border-gray-700;
}

/* Images */
.prose img {
	@apply mx-auto my-6 rounded-lg;
}

/* Inline elements */
.prose strong {
	@apply font-bold text-gray-900 dark:text-gray-100;
}

.prose em {
	@apply italic;
}

.prose del {
	@apply line-through;
}

/* Definition lists */
.prose dl {
	@apply mt-4;
}

.prose dt {
	@apply font-bold text-gray-900 dark:text-gray-100;
}

.prose dd {
	@apply mt-2 ml-4;
}

/* Nested lists spacing */
.prose li > ul,
.prose li > ol {
	@apply mt-2 mb-2;
}

/* Code block filename */
.prose .filename {
	@apply mt-6 -mb-2 text-sm text-gray-500 dark:text-gray-400;
}

/* Summary blocks */
.prose summary {
	@apply leading-7 text-gray-700 cursor-pointer select-none dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100;
}

.prose details {
	@apply p-4 my-4 rounded-lg bg-gray-50 dark:bg-zinc-800;
}

.prose details[open] summary {
	@apply mb-3;
}

/* Aside blocks */
.prose aside {
	@apply p-4 my-6 border-l-4 rounded-lg border-primary bg-primary/5;
}

.prose aside p {
	@apply m-0;
}

/* Mark blocks */
.prose mark {
	@apply bg-primary/20 text-primary px-1.5 py-0.5 rounded;
}

/* Keyboard blocks */
.prose kbd {
	@apply px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500;
}

/* Mixtape embeds */
.prose .mixtape-embed {
	@apply items-center p-2 overflow-hidden border border-gray-300 mt-7;
}

.prose .mixtape-content {
	@apply flex flex-row justify-between p-2 overflow-hidden;
}

.prose .mixtape-text {
	@apply flex flex-col justify-center p-2;
}

.prose .mixtape-text h2 {
	@apply text-base font-bold text-black dark:text-gray-100;
}

.prose .mixtape-description {
	@apply block mt-2;
}

.prose .mixtape-description h3 {
	@apply text-sm text-gray-700;
}

.prose .mixtape-site {
	@apply mt-5;
}

.prose .mixtape-site p {
	@apply text-xs text-gray-700;
}

.prose .mixtape-image {
	@apply relative flex flex-row h-40 w-60;
}

.prose .mixtape-image-inner {
	@apply absolute inset-0 bg-center bg-cover;
}