1 zmienionych plików z 8 dodań i 96 usunięć
+ 8
- 96
campaign-tracker-client/src/index.css
Wyświetl plik
| @@ -1,111 +1,23 @@ | |||
| :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; | |||
| line-height: 1.5; | |||
| text-rendering: optimizeLegibility; | |||
| -webkit-font-smoothing: antialiased; | |||
| -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; | |||
| } | |||
| body { | |||
| 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; | |||
| } | |||