2nzi's picture
first commit
2964111 verified
/* 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;
}