| @@ -68,6 +68,7 @@ |
| 68 | } | 68 | } |
| 69 | | 69 | |
| 70 | @layer components { | 70 | @layer components { |
| | 71 | + .article-body { max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; } |
| 71 | .article-body h1 { @apply text-2xl font-bold mt-8 mb-3 text-spot-text } | 72 | .article-body h1 { @apply text-2xl font-bold mt-8 mb-3 text-spot-text } |
| 72 | .article-body h2 { @apply text-xl font-semibold mt-6 mb-2 text-spot-text } | 73 | .article-body h2 { @apply text-xl font-semibold mt-6 mb-2 text-spot-text } |
| 73 | .article-body h3 { @apply text-lg font-semibold mt-5 mb-2 text-spot-text } | 74 | .article-body h3 { @apply text-lg font-semibold mt-5 mb-2 text-spot-text } |
| @@ -84,7 +85,7 @@ |
| 84 | .article-body figure { @apply my-4 } | 85 | .article-body figure { @apply my-4 } |
| 85 | .article-body figcaption { @apply text-sm text-spot-secondary text-center mt-2 } | 86 | .article-body figcaption { @apply text-sm text-spot-secondary text-center mt-2 } |
| 86 | .article-body a { @apply text-spot-green underline hover:brightness-110 } | 87 | .article-body a { @apply text-spot-green underline hover:brightness-110 } |
| 87 | - .article-body table { @apply w-full border-collapse my-4 } | 88 | + .article-body table { @apply w-full border-collapse my-4 text-sm } |
| 88 | .article-body th { @apply border border-spot-divider px-3 py-2 bg-spot-surface font-semibold text-left text-spot-text } | 89 | .article-body th { @apply border border-spot-divider px-3 py-2 bg-spot-surface font-semibold text-left text-spot-text } |
| 89 | .article-body td { @apply border border-spot-divider px-3 py-2 text-spot-body } | 90 | .article-body td { @apply border border-spot-divider px-3 py-2 text-spot-body } |
| 90 | .article-body hr { @apply border-spot-divider my-6 } | 91 | .article-body hr { @apply border-spot-divider my-6 } |
| @@ -94,6 +95,8 @@ |
| 94 | .article-body mark { @apply bg-spot-orange/30 px-1 rounded } | 95 | .article-body mark { @apply bg-spot-orange/30 px-1 rounded } |
| 95 | .article-body .annotation-highlight { @apply bg-spot-green/25 border-b-2 border-spot-green/50 px-0.5 rounded-sm transition-colors } | 96 | .article-body .annotation-highlight { @apply bg-spot-green/25 border-b-2 border-spot-green/50 px-0.5 rounded-sm transition-colors } |
| 96 | .article-body .annotation-highlight:hover { @apply bg-spot-green/40 } | 97 | .article-body .annotation-highlight:hover { @apply bg-spot-green/40 } |
| | 98 | + .article-body div, .article-body section, .article-body article, .article-body main, .article-body aside, .article-body nav, .article-body header, .article-body footer, .article-body span { max-width: 100%; overflow-wrap: break-word; } |
| | 99 | + .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } |
| 97 | } | 100 | } |
| 98 | | 101 | |
| 99 | @layer utilities { | 102 | @layer utilities { |