| 126 | } |
| 127 | |
| 128 | static get styles() { |
| 129 | return css` |
| 130 | :host { |
| 131 | --text: #6b6375; |
| 132 | --text-h: #08060d; |
| 133 | --bg: #fff; |
| 134 | --border: #e5e4e7; |
| 135 | --code-bg: #f4f3ec; |
| 136 | --accent: #aa3bff; |
| 137 | --accent-bg: rgba(170, 59, 255, 0.1); |
| 138 | --accent-border: rgba(170, 59, 255, 0.5); |
| 139 | --social-bg: rgba(244, 243, 236, 0.5); |
| 140 | --shadow: |
| 141 | rgba(0, 0, 0, 0.1) 0 10px 15px -3px, |
| 142 | rgba(0, 0, 0, 0.05) 0 4px 6px -2px; |
| 143 | |
| 144 | --sans: system-ui, 'Segoe UI', Roboto, sans-serif; |
| 145 | --heading: system-ui, 'Segoe UI', Roboto, sans-serif; |
| 146 | --mono: ui-monospace, Consolas, monospace; |
| 147 | |
| 148 | font: 18px/145% var(--sans); |
| 149 | letter-spacing: 0.18px; |
| 150 | |
| 151 | width: 1126px; |
| 152 | max-width: 100%; |
| 153 | margin: 0 auto; |
| 154 | text-align: center; |
| 155 | border-inline: 1px solid var(--border); |
| 156 | min-height: 100svh; |
| 157 | display: flex; |
| 158 | flex-direction: column; |
| 159 | box-sizing: border-box; |
| 160 | color: var(--text); |
| 161 | } |
| 162 | |
| 163 | @media (prefers-color-scheme: dark) { |
| 164 | :host { |
| 165 | --text: #9ca3af; |
| 166 | --text-h: #f3f4f6; |
| 167 | --bg: #16171d; |
| 168 | --border: #2e303a; |
| 169 | --code-bg: #1f2028; |
| 170 | --accent: #c084fc; |
| 171 | --accent-bg: rgba(192, 132, 252, 0.15); |
| 172 | --accent-border: rgba(192, 132, 252, 0.5); |
| 173 | --social-bg: rgba(47, 48, 58, 0.5); |
| 174 | --shadow: |
| 175 | rgba(0, 0, 0, 0.4) 0 10px 15px -3px, |
| 176 | rgba(0, 0, 0, 0.25) 0 4px 6px -2px; |
| 177 | } |
| 178 | |
| 179 | #social .button-icon { |
| 180 | filter: invert(1) brightness(2); |
| 181 | } |
| 182 | } |
| 183 | |
| 184 | h1, |
| 185 | h2, |