Spaces:
Running
Running
/* color palette personnalisée */ | |
:root { | |
--vt-c-white: #ffffff; | |
--vt-c-white-soft: #f8f8f8; | |
--vt-c-white-mute: #f2f2f2; | |
--vt-c-black: #000000; | |
--vt-c-black-soft: #1a1a1a; | |
--vt-c-black-mute: #2d2d2d; | |
--vt-c-lime: #33FF6B; | |
--vt-c-lime-soft: #08c4d1cf; | |
--vt-c-lime-mute: #08c4d185; | |
/* --vt-c-lime: #08C5D1; | |
--vt-c-lime-soft: #08c4d1cf; | |
--vt-c-lime-mute: #08c4d185; */ | |
/* --vt-c-lime: #FF00BF; | |
--vt-c-lime-soft: #ff00bfe2; | |
--vt-c-lime-mute: #ff00bfe9; */ | |
--vt-c-gray: #707070; | |
--vt-c-gray-soft: #8a8a8a; | |
--vt-c-gray-light: #a0a0a0; | |
--vt-c-divider-light-1: rgba(112, 112, 112, 0.29); | |
--vt-c-divider-light-2: rgba(112, 112, 112, 0.12); | |
--vt-c-divider-dark-1: #ff00bfb1; | |
--vt-c-divider-dark-2: #ff00bf83; | |
--vt-c-text-light-1: var(--vt-c-black); | |
--vt-c-text-light-2: var(--vt-c-gray); | |
--vt-c-text-dark-1: var(--vt-c-white); | |
--vt-c-text-dark-2: var(--vt-c-gray-light); | |
} | |
/* semantic color variables for this project */ | |
:root { | |
--color-background: var(--vt-c-white); | |
--color-background-soft: var(--vt-c-white-soft); | |
--color-background-mute: var(--vt-c-white-mute); | |
--color-border: var(--vt-c-divider-light-2); | |
--color-border-hover: var(--vt-c-divider-light-1); | |
--color-heading: var(--vt-c-text-light-1); | |
--color-text: var(--vt-c-text-light-1); | |
/* Nouvelles variables personnalisées */ | |
--color-primary: var(--vt-c-lime); | |
--color-primary-soft: var(--vt-c-lime-soft); | |
--color-primary-mute: var(--vt-c-lime-mute); | |
--color-secondary: var(--vt-c-black); | |
--color-secondary-soft: var(--vt-c-black-soft); | |
--color-accent: var(--vt-c-gray); | |
--color-accent-soft: var(--vt-c-gray-soft); | |
--color-accent-light: var(--vt-c-gray-light); | |
--section-gap: 160px; | |
} | |
@media (prefers-color-scheme: dark) { | |
:root { | |
--color-background: var(--vt-c-black); | |
--color-background-soft: var(--vt-c-black-soft); | |
--color-background-mute: var(--vt-c-black-mute); | |
--color-border: var(--vt-c-divider-dark-2); | |
--color-border-hover: var(--vt-c-divider-dark-1); | |
--color-heading: var(--vt-c-text-dark-1); | |
--color-text: var(--vt-c-text-dark-2); | |
} | |
} | |
*, | |
*::before, | |
*::after { | |
box-sizing: border-box; | |
margin: 0; | |
font-weight: normal; | |
} | |
body { | |
min-height: 100vh; | |
color: var(--color-text); | |
background: var(--color-secondary); | |
transition: | |
color 0.5s; | |
line-height: 1.6; | |
font-family: | |
Inter, | |
-apple-system, | |
BlinkMacSystemFont, | |
'Segoe UI', | |
Roboto, | |
Oxygen, | |
Ubuntu, | |
Cantarell, | |
'Fira Sans', | |
'Droid Sans', | |
'Helvetica Neue', | |
sans-serif; | |
font-size: 15px; | |
text-rendering: optimizeLegibility; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |