| 1 | /* color palette from <https://github.com/vuejs/theme> */
|
|---|
| 2 | :root {
|
|---|
| 3 | --vt-c-white: #ffffff;
|
|---|
| 4 | --vt-c-white-soft: #f8f8f8;
|
|---|
| 5 | --vt-c-white-mute: #f2f2f2;
|
|---|
| 6 |
|
|---|
| 7 | --vt-c-black: #181818;
|
|---|
| 8 | --vt-c-black-soft: #222222;
|
|---|
| 9 | --vt-c-black-mute: #282828;
|
|---|
| 10 |
|
|---|
| 11 | --vt-c-indigo: #2c3e50;
|
|---|
| 12 |
|
|---|
| 13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
|---|
| 14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
|---|
| 15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
|---|
| 16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
|---|
| 17 |
|
|---|
| 18 | --vt-c-text-light-1: var(--vt-c-indigo);
|
|---|
| 19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
|---|
| 20 | --vt-c-text-dark-1: var(--vt-c-white);
|
|---|
| 21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
|---|
| 22 | }
|
|---|
| 23 |
|
|---|
| 24 | /* semantic color variables for this project */
|
|---|
| 25 | :root {
|
|---|
| 26 | --color-background: var(--vt-c-white);
|
|---|
| 27 | --color-background-soft: var(--vt-c-white-soft);
|
|---|
| 28 | --color-background-mute: var(--vt-c-white-mute);
|
|---|
| 29 |
|
|---|
| 30 | --color-border: var(--vt-c-divider-light-2);
|
|---|
| 31 | --color-border-hover: var(--vt-c-divider-light-1);
|
|---|
| 32 |
|
|---|
| 33 | --color-heading: var(--vt-c-text-light-1);
|
|---|
| 34 | --color-text: var(--vt-c-text-light-1);
|
|---|
| 35 |
|
|---|
| 36 | --section-gap: 160px;
|
|---|
| 37 | }
|
|---|
| 38 |
|
|---|
| 39 | @media (prefers-color-scheme: dark) {
|
|---|
| 40 | :root {
|
|---|
| 41 | --color-background: var(--vt-c-black);
|
|---|
| 42 | --color-background-soft: var(--vt-c-black-soft);
|
|---|
| 43 | --color-background-mute: var(--vt-c-black-mute);
|
|---|
| 44 |
|
|---|
| 45 | --color-border: var(--vt-c-divider-dark-2);
|
|---|
| 46 | --color-border-hover: var(--vt-c-divider-dark-1);
|
|---|
| 47 |
|
|---|
| 48 | --color-heading: var(--vt-c-text-dark-1);
|
|---|
| 49 | --color-text: var(--vt-c-text-dark-2);
|
|---|
| 50 | }
|
|---|
| 51 | }
|
|---|
| 52 |
|
|---|
| 53 | *,
|
|---|
| 54 | *::before,
|
|---|
| 55 | *::after {
|
|---|
| 56 | box-sizing: border-box;
|
|---|
| 57 | margin: 0;
|
|---|
| 58 | font-weight: normal;
|
|---|
| 59 | }
|
|---|
| 60 |
|
|---|
| 61 | body {
|
|---|
| 62 | min-height: 100vh;
|
|---|
| 63 | color: var(--color-text);
|
|---|
| 64 | background: var(--color-background);
|
|---|
| 65 | transition:
|
|---|
| 66 | color 0.5s,
|
|---|
| 67 | background-color 0.5s;
|
|---|
| 68 | line-height: 1.6;
|
|---|
| 69 | font-family:
|
|---|
| 70 | Inter,
|
|---|
| 71 | -apple-system,
|
|---|
| 72 | BlinkMacSystemFont,
|
|---|
| 73 | 'Segoe UI',
|
|---|
| 74 | Roboto,
|
|---|
| 75 | Oxygen,
|
|---|
| 76 | Ubuntu,
|
|---|
| 77 | Cantarell,
|
|---|
| 78 | 'Fira Sans',
|
|---|
| 79 | 'Droid Sans',
|
|---|
| 80 | 'Helvetica Neue',
|
|---|
| 81 | sans-serif;
|
|---|
| 82 | font-size: 15px;
|
|---|
| 83 | text-rendering: optimizeLegibility;
|
|---|
| 84 | -webkit-font-smoothing: antialiased;
|
|---|
| 85 | -moz-osx-font-smoothing: grayscale;
|
|---|
| 86 | }
|
|---|
