| @@ -1,111 +1,23 @@ | |||||
| :root { | :root { | ||||
| --text: #6b6375; | |||||
| --text-h: #08060d; | |||||
| --bg: #fff; | |||||
| --border: #e5e4e7; | |||||
| --code-bg: #f4f3ec; | |||||
| --accent: #aa3bff; | |||||
| --accent-bg: rgba(170, 59, 255, 0.1); | |||||
| --accent-border: rgba(170, 59, 255, 0.5); | |||||
| --social-bg: rgba(244, 243, 236, 0.5); | |||||
| --shadow: | |||||
| rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; | |||||
| --sans: system-ui, 'Segoe UI', Roboto, sans-serif; | |||||
| --heading: system-ui, 'Segoe UI', Roboto, sans-serif; | |||||
| --mono: ui-monospace, Consolas, monospace; | |||||
| font: 18px/145% var(--sans); | |||||
| letter-spacing: 0.18px; | |||||
| color-scheme: light dark; | |||||
| color: var(--text); | |||||
| background: var(--bg); | |||||
| color: #111827; | |||||
| background: #f7f9fc; | |||||
| font-family: 'Public Sans', 'Segoe UI', Arial, sans-serif; | |||||
| font-synthesis: none; | font-synthesis: none; | ||||
| line-height: 1.5; | |||||
| text-rendering: optimizeLegibility; | text-rendering: optimizeLegibility; | ||||
| -webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||||
| -moz-osx-font-smoothing: grayscale; | -moz-osx-font-smoothing: grayscale; | ||||
| @media (max-width: 1024px) { | |||||
| font-size: 16px; | |||||
| } | |||||
| } | } | ||||
| @media (prefers-color-scheme: dark) { | |||||
| :root { | |||||
| --text: #9ca3af; | |||||
| --text-h: #f3f4f6; | |||||
| --bg: #16171d; | |||||
| --border: #2e303a; | |||||
| --code-bg: #1f2028; | |||||
| --accent: #c084fc; | |||||
| --accent-bg: rgba(192, 132, 252, 0.15); | |||||
| --accent-border: rgba(192, 132, 252, 0.5); | |||||
| --social-bg: rgba(47, 48, 58, 0.5); | |||||
| --shadow: | |||||
| rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; | |||||
| } | |||||
| #social .button-icon { | |||||
| filter: invert(1) brightness(2); | |||||
| } | |||||
| } | |||||
| #root { | |||||
| width: 1126px; | |||||
| max-width: 100%; | |||||
| margin: 0 auto; | |||||
| text-align: center; | |||||
| border-inline: 1px solid var(--border); | |||||
| min-height: 100svh; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| * { | |||||
| box-sizing: border-box; | box-sizing: border-box; | ||||
| } | } | ||||
| body { | body { | ||||
| margin: 0; | margin: 0; | ||||
| min-width: 320px; | |||||
| } | } | ||||
| h1, | |||||
| h2 { | |||||
| font-family: var(--heading); | |||||
| font-weight: 500; | |||||
| color: var(--text-h); | |||||
| } | |||||
| h1 { | |||||
| font-size: 56px; | |||||
| letter-spacing: -1.68px; | |||||
| margin: 32px 0; | |||||
| @media (max-width: 1024px) { | |||||
| font-size: 36px; | |||||
| margin: 20px 0; | |||||
| } | |||||
| } | |||||
| h2 { | |||||
| font-size: 24px; | |||||
| line-height: 118%; | |||||
| letter-spacing: -0.24px; | |||||
| margin: 0 0 8px; | |||||
| @media (max-width: 1024px) { | |||||
| font-size: 20px; | |||||
| } | |||||
| } | |||||
| p { | |||||
| margin: 0; | |||||
| } | |||||
| code, | |||||
| .counter { | |||||
| font-family: var(--mono); | |||||
| display: inline-flex; | |||||
| border-radius: 4px; | |||||
| color: var(--text-h); | |||||
| } | |||||
| code { | |||||
| font-size: 15px; | |||||
| line-height: 135%; | |||||
| padding: 4px 8px; | |||||
| background: var(--code-bg); | |||||
| #root { | |||||
| min-height: 100vh; | |||||
| } | } | ||||
Powered by TurnKey Linux.