| @@ -85,7 +85,7 @@ |
| 85 | .article-body figure { @apply my-4 } | 85 | .article-body figure { @apply my-4 } |
| 86 | .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 } |
| 87 | .article-body a { @apply text-spot-green underline hover:brightness-110 } | 87 | .article-body a { @apply text-spot-green underline hover:brightness-110 } |
| 88 | - .article-body table { @apply w-full border-collapse my-4 text-sm } | 88 | + .article-body table { display: block; overflow-x: auto; @apply w-full border-collapse my-4 text-sm } |
| 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 th { @apply border border-spot-divider px-3 py-2 bg-spot-surface font-semibold text-left text-spot-text } |
| 90 | .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 } |
| 91 | .article-body hr { @apply border-spot-divider my-6 } | 91 | .article-body hr { @apply border-spot-divider my-6 } |
| @@ -96,15 +96,30 @@ |
| 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 { @apply bg-spot-green/25 border-b-2 border-spot-green/50 px-0.5 rounded-sm transition-colors } |
| 97 | .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; } | 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; } | | |
| 100 | -} | | |
| 101 | | 99 | |
| 102 | -@layer utilities { | 100 | + .sidebar-link { |
| 103 | - .line-clamp-2 { | 101 | + transition: color 0.15s, background-color 0.15s; |
| 104 | - display: -webkit-box; | 102 | + } |
| 105 | - -webkit-line-clamp: 2; | 103 | + .sidebar-link:hover { |
| 106 | - -webkit-box-orient: vertical; | 104 | + color: var(--spot-text); |
| 107 | - overflow: hidden; | 105 | + background: var(--spot-hover-50); |
| | 106 | + } |
| | 107 | + .sidebar-link.active { |
| | 108 | + color: var(--spot-green); |
| | 109 | + background: var(--spot-hover-50); |
| | 110 | + } |
| | 111 | + |
| | 112 | + .htmx-swapping { |
| | 113 | + opacity: 0; |
| | 114 | + transition: opacity 0.3s ease-out; |
| | 115 | + } |
| | 116 | + |
| | 117 | + .animate-fade-in { |
| | 118 | + animation: fadeIn 0.3s ease-out forwards; |
| | 119 | + } |
| | 120 | + |
| | 121 | + .animate-pulse-dot { |
| | 122 | + animation: pulse-dot 2s ease-in-out infinite; |
| 108 | } | 123 | } |
| 109 | } | 124 | } |
| 110 | | 125 | |
| @@ -115,18 +130,6 @@ body { |
| 115 | -moz-osx-font-smoothing: grayscale; | 130 | -moz-osx-font-smoothing: grayscale; |
| 116 | } | 131 | } |
| 117 | | 132 | |
| 118 | -.sidebar-link { | | |
| 119 | - transition: color 0.15s, background-color 0.15s; | | |
| 120 | -} | | |
| 121 | -.sidebar-link:hover { | | |
| 122 | - color: var(--spot-text); | | |
| 123 | - background: var(--spot-hover-50); | | |
| 124 | -} | | |
| 125 | -.sidebar-link.active { | | |
| 126 | - color: var(--spot-green); | | |
| 127 | - background: var(--spot-hover-50); | | |
| 128 | -} | | |
| 129 | - | | |
| 130 | ::-webkit-scrollbar { width: 8px; } | 133 | ::-webkit-scrollbar { width: 8px; } |
| 131 | ::-webkit-scrollbar-track { background: var(--spot-bg); } | 134 | ::-webkit-scrollbar-track { background: var(--spot-bg); } |
| 132 | ::-webkit-scrollbar-thumb { background: var(--spot-muted); border-radius: 6px; } | 135 | ::-webkit-scrollbar-thumb { background: var(--spot-muted); border-radius: 6px; } |
| @@ -137,34 +140,25 @@ body { |
| 137 | scrollbar-color: var(--spot-muted) transparent; | 140 | scrollbar-color: var(--spot-muted) transparent; |
| 138 | } | 141 | } |
| 139 | | 142 | |
| 140 | -.htmx-swapping { | | |
| 141 | - opacity: 0; | | |
| 142 | - transition: opacity 0.3s ease-out; | | |
| 143 | -} | | |
| 144 | - | | |
| 145 | ::selection { | 143 | ::selection { |
| 146 | background: rgba(0,117,74,0.30); | 144 | background: rgba(0,117,74,0.30); |
| 147 | color: var(--spot-text); | 145 | color: var(--spot-text); |
| 148 | } | 146 | } |
| 149 | | 147 | |
| 150 | -input:focus, textarea:focus { | | |
| 151 | - outline: none; | | |
| 152 | -} | | |
| 153 | - | | |
| 154 | @keyframes fadeIn { | 148 | @keyframes fadeIn { |
| 155 | from { opacity: 0; transform: translateY(4px); } | 149 | from { opacity: 0; transform: translateY(4px); } |
| 156 | to { opacity: 1; transform: translateY(0); } | 150 | to { opacity: 1; transform: translateY(0); } |
| 157 | } | 151 | } |
| 158 | | 152 | |
| 159 | -.animate-fade-in { | | |
| 160 | - animation: fadeIn 0.3s ease-out forwards; | | |
| 161 | -} | | |
| 162 | - | | |
| 163 | @keyframes pulse-dot { | 153 | @keyframes pulse-dot { |
| 164 | 0%, 100% { opacity: 1; } | 154 | 0%, 100% { opacity: 1; } |
| 165 | 50% { opacity: 0.5; } | 155 | 50% { opacity: 0.5; } |
| 166 | } | 156 | } |
| 167 | | 157 | |
| 168 | -.animate-pulse-dot { | 158 | +@media (prefers-reduced-motion: reduce) { |
| 169 | - animation: pulse-dot 2s ease-in-out infinite; | 159 | + *, *::before, *::after { |
| | 160 | + animation-duration: 0.01ms !important; |
| | 161 | + animation-iteration-count: 1 !important; |
| | 162 | + transition-duration: 0.01ms !important; |
| | 163 | + } |
| 170 | } | 164 | } |