this repo has no description
1@use "prism.theme";
2
3:root {
4 --vt-c-white: #ffffff;
5 --vt-c-white-soft: #f8f8f8;
6 --vt-c-white-mute: #f2f2f2;
7
8 --vt-c-black: #181818;
9 --vt-c-black-soft: #222222;
10 --vt-c-black-mute: #282828;
11
12 --vt-c-indigo: #2c3e50;
13
14 --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
15 --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
16 --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
17 --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
18
19 --vt-c-text-light-1: var(--vt-c-indigo);
20 --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
21 --vt-c-text-dark-1: var(--vt-c-white);
22 --vt-c-text-dark-2: rgba(235, 235, 235, 0.9);
23
24 --shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px,
25 rgba(0, 0, 0, 0.16) 0px 2px 4px,
26 rgba(0, 0, 0, 0.12) 0px 4px 8px,
27 rgba(0, 0, 0, 0.08) 0px 8px 16px,
28 rgba(0, 0, 0, 0.07) 0px 16px 32px;
29}
30
31/* semantic color variables for this project */
32:root {
33 --color-background: var(--vt-c-white);
34 --color-background-soft: var(--vt-c-white-soft);
35 --color-background-mute: var(--vt-c-white-mute);
36
37 --color-border: var(--vt-c-divider-light-2);
38 --color-border-hover: var(--vt-c-divider-light-1);
39
40 --color-heading: var(--vt-c-text-light-1);
41 --color-text: var(--vt-c-text-light-1);
42
43 --section-gap: 160px;
44 --primary: hsl(229, 90%, 28%);
45
46 --code-font-family: 'Oxygen Mono', monospace;
47}
48
49@media (prefers-color-scheme: dark) {
50 :root {
51 --color-background: var(--vt-c-black);
52 --color-background-soft: var(--vt-c-black-soft);
53 --color-background-mute: var(--vt-c-black-mute);
54
55 --color-border: var(--vt-c-divider-dark-2);
56 --color-border-hover: var(--vt-c-divider-dark-1);
57
58 --color-heading: var(--vt-c-text-dark-1);
59 --color-text: var(--vt-c-text-dark-2);
60 --primary: hsl(229, 100%, 80%);
61 }
62}
63
64*,
65*::before,
66*::after {
67 box-sizing: border-box;
68 margin: 0;
69 font-weight: normal;
70}
71
72body {
73 min-height: 100vh;
74 color: var(--color-text);
75 background: var(--color-background);
76 transition: color 0.5s, background-color 0.5s;
77 font-family: 'Noto Serif', serif;
78 font-size: 20px;
79 line-height: 1.6rem;
80 text-rendering: optimizeLegibility;
81 -webkit-font-smoothing: antialiased;
82 -moz-osx-font-smoothing: grayscale;
83}
84
85a {
86 color: var(--color-text);
87}
88
89p,
90blockquote,
91ul,
92ol {
93 margin-bottom: 1rem;
94
95 &:last-child {
96 margin-bottom: 0;
97 }
98}
99
100h1,
101h2,
102h3,
103h4,
104h5,
105h6 {
106 color: var(--primary);
107 padding-bottom: 0.5rem;
108}
109
110h2,
111h3,
112h4,
113h5,
114h6 {
115 margin-top: 1rem;
116}
117
118h1 {
119 font-size: 1.8em;
120 font-weight: bold;
121}
122
123h2 {
124 font-size: 1.5em;
125}
126
127h3,
128h4 {
129 font-size: 1.3em;
130}
131
132.julien-calixte {
133 font-family: "Meow Script", "Lucida Sans", "Lucida Sans Regular", Geneva,
134 Verdana, sans-serif;
135}
136
137strong {
138 font-weight: bold;
139}
140
141code {
142 font-family: var(--code-font-family);
143 font-size: 16px;
144}
145
146blockquote {
147 padding: 1.2rem;
148 margin: 1rem 2rem;
149 border-radius: 0.3em;
150 background-color: #574b90;
151 color: #e8e8e8;
152}
153
154iframe.youtube {
155 width: 100%;
156 height: 500px;
157 max-height: 35vh;
158}
159
160input {
161 box-shadow: inset 0 .0625em .125em rgba(10, 10, 10, .05);
162 max-width: 100%;
163
164 background-color: #fff;
165 border-color: #dbdbdb;
166 border-radius: .375em;
167 color: #363636;
168 border: 1px solid transparent;
169 align-items: center;
170 display: inline-flex;
171 height: 2rem;
172 justify-content: flex-start;
173 line-height: 1.5;
174 margin: 0;
175 padding: 0 0.5rem;
176}
177
178video {
179 max-width: 100%;
180}