109 lines
2.2 KiB
Svelte
109 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import * as Components from '$lib/blog/components.svelte';
|
|
export { Components };
|
|
</script>
|
|
|
|
<div
|
|
class="blog mx-auto w-70% md:pl-30 md:w-80% lg:pl-0 lg:w-100% beak-normal mt-8 leading-loose text-lg text-gray-700 dark:text-gray-300"
|
|
>
|
|
<slot />
|
|
</div>
|
|
|
|
<style>
|
|
/* I HATE OVERWRITING STYLES I HATE OVERWRITING STYLES */
|
|
.blog :global(h1) {
|
|
@apply text-5xl font-bold;
|
|
}
|
|
.blog :global(h2) {
|
|
@apply text-4xl font-bold;
|
|
}
|
|
.blog :global(h3) {
|
|
@apply text-3xl font-bold;
|
|
}
|
|
.blog :global(h4) {
|
|
@apply text-2xl font-bold;
|
|
}
|
|
.blog :global(h5) {
|
|
@apply text-xl font-bold;
|
|
}
|
|
.blog :global(h6) {
|
|
@apply text-lg font-bold;
|
|
}
|
|
.blog :global(p) {
|
|
@apply text-lg py-2;
|
|
}
|
|
.blog :global(a) {
|
|
@apply text-blue-500;
|
|
}
|
|
.blog :global(a:hover) {
|
|
@apply text-blue-700;
|
|
}
|
|
.blog :global(ul) {
|
|
@apply list-disc list-inside;
|
|
}
|
|
.blog :global(ol) {
|
|
@apply list-decimal list-inside display-inline-block;
|
|
}
|
|
.blog :global(ul > li) {
|
|
@apply ml-4;
|
|
}
|
|
.blog :global(ol > li > p) {
|
|
@apply inline;
|
|
}
|
|
.blog :global(ol > li) {
|
|
@apply ml-4;
|
|
}
|
|
.blog :global(blockquote) {
|
|
@apply border-gray-600 pl-4;
|
|
@apply border-l-4 'dark:border-gray-300';
|
|
}
|
|
.blog :global(pre) {
|
|
@apply overflow-x-auto;
|
|
}
|
|
.blog :global(table) {
|
|
@apply w-full border-collapse;
|
|
}
|
|
.blog :global(th) {
|
|
@apply text-left p-2 border border-gray-600;
|
|
}
|
|
.blog :global(td) {
|
|
@apply p-2 border border-gray-600 'dark:border-gray-700';
|
|
}
|
|
.blog :global(hr) {
|
|
@apply my-4 border-gray-600 'dark:border-gray-700';
|
|
}
|
|
.blog :global(img) {
|
|
@apply w-full;
|
|
}
|
|
.blog :global(code) {
|
|
@apply text-gray-200;
|
|
background-color: #282a36;
|
|
}
|
|
.blog :global(code) {
|
|
@apply rounded-1 'md:p-2' p-0 text-left;
|
|
}
|
|
.blog :global(kbd) {
|
|
@apply rounded-1 p-2;
|
|
}
|
|
.blog :global(samp) {
|
|
@apply rounded-1 p-2;
|
|
}
|
|
.blog :global(pre) {
|
|
@apply rounded-1 'md:p-2' text-left p-0 'w-100%' overflow-x-auto;
|
|
}
|
|
.blog :global(.prose) {
|
|
@apply prose;
|
|
}
|
|
.blog::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.blog {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
/* Force dark mode as it is ignored. */
|
|
:global(.dark, blockquote.dark) {
|
|
@apply dark;
|
|
}
|
|
</style>
|