so://phie

blob: 576f20f6a1e8c5ee8b042ad3cd0ea73264929145 (9506 bytes)[doc][blame][raw]

  1@space-1x: 20px;
  2@space-2x: 40px;
  3@space-4x: 80px;
  4@space-8x: 160px;
  5
  6.space-1 {
  7	width: 100%;
  8	height: @space-1x;
  9}
 10
 11.space-2 {
 12	width: 100%;
 13	height: @space-2x;
 14}
 15
 16.space-4 {
 17	width: 100%;
 18	height: @space-4x;
 19}
 20
 21.space-8 {
 22	width: 100%;
 23	height: @space-8x;
 24}
 25
 26* {
 27	color: @color-gray-900;
 28	font-family: 'Inter';
 29}
 30
 31body {
 32
 33	@media(prefers-color-scheme: dark) {
 34		background: @color-black;
 35	}
 36}
 37
 38h1 {
 39	font-size: 36px;
 40	margin-top: @space-4x;
 41
 42	sup {
 43		font-size: 18px;
 44		font-weight: 600;
 45		padding-left: 2px;
 46		vertical-align: top;
 47	}
 48
 49	@media(prefers-color-scheme: dark) {
 50		color: @color-white;
 51	}
 52}
 53
 54h2 {
 55	font-size: 28px;
 56	font-weight: 700;
 57	margin-top: @space-8x;
 58	margin-bottom: @space-2x;
 59
 60	@media(prefers-color-scheme: dark) {
 61		color: @color-white;
 62	}
 63}
 64
 65h3 {
 66	font-size: 24px;
 67	font-weight: 600;
 68	margin-top: @space-2x;
 69
 70	@media(prefers-color-scheme: dark) {
 71		color: @color-white;
 72	}
 73}
 74
 75h4 {
 76	font-size: 18px;
 77	font-weight: 600;
 78	margin-top: @space-2x;
 79
 80	@media(prefers-color-scheme: dark) {
 81		color: @color-white;
 82	}
 83}
 84
 85p {
 86	color: @color-gray-700;
 87	font-size: 16px;
 88	margin-top: @space-2x;
 89	line-height: 26px;
 90
 91	@media(prefers-color-scheme: dark) {
 92		color: @color-gray-400;
 93	}
 94
 95	a {
 96		text-decoration: underline;
 97		white-space: nowrap;
 98	}
 99
100	mark {
101		background: @color-gray-200;
102		white-space: nowrap;
103		border-radius: 2px;
104		padding: 2px 4px;
105		color: @color-gray-800;
106
107		@media(prefers-color-scheme: dark) {
108			color: @color-gray-400;
109			background: darken(@color-gray-900, 8%);
110		}
111	}
112
113	b {
114		font-weight: 500;
115
116		@media(prefers-color-scheme: dark) {
117			color: @color-gray-100;
118		}
119
120		&.note {
121			margin-bottom: calc(@space-1x / 2);
122			display: inline-block;
123
124			@media(prefers-color-scheme: dark) {
125				color: @color-white;
126			}
127		}
128	}
129
130	span {
131		color: inherit;
132		display: block;
133	}
134}
135
136.slogan {
137	font-size: 64px;
138	margin-bottom: @space-4x;
139}
140
141.slogan-subline {
142	margin-bottom: @space-4x;
143}
144
145.subline {
146	margin-top: @space-2x;
147	font-weight: 500;
148	font-size: 18px;
149	line-height: 28px;
150	color: @color-gray-600;
151
152	@media(prefers-color-scheme: dark) {
153		color: @color-gray-400;
154	}
155}
156
157a {
158	text-decoration: none;
159	color: @color-gray-800;
160
161	&:hover {
162		text-decoration: underline;
163		color: @color-gray-900;
164	}
165
166	@media(prefers-color-scheme: dark) {
167		color: @color-gray-300;
168
169		&:hover {
170			color: @color-gray-100;
171		}
172	}
173}
174
175.list {
176	padding-left: @space-1x;
177
178	p {
179		margin-left: calc(@space-1x / 2);
180	}
181
182	&.list-short {
183		margin-top: @space-1x;
184
185		p {
186			margin-top: calc(@space-1x / 2);
187		}
188	}
189
190	@media(prefers-color-scheme: dark) {
191
192		li {
193			color: @color-gray-400;
194		}
195	}
196}
197
198.link-list {
199
200	span {
201		margin-top: calc(@space-1x / 2);
202
203		a {
204			display: inline-block;
205			margin-left: calc(@space-1x / 2);
206		}
207	}
208}
209
210&::-webkit-scrollbar {
211	width: 10px;
212}
213
214&::-webkit-scrollbar-thumb {
215	background: @color-gray-400;
216
217	&:hover {
218		background: @color-gray-500;
219	}
220}
221
222.container {
223	position: relative;
224}
225
226aside {
227	position: fixed;
228	transform: translate(calc(-100% - @space-2x), 0);
229	width: 250px;
230	padding-top: @space-4x;
231
232	h4 {
233		margin: 0;
234		cursor: pointer;
235		user-select: none;
236		margin-bottom: @space-1x;
237	}
238
239	ul {
240		list-style-type: none;
241		margin-top: @space-2x;
242
243		li {
244			margin-top: @space-1x;
245			cursor: pointer;
246			user-select: none;
247			font-size: 16px;
248			font-weight: 500;
249			color: @color-gray-700;
250			line-height: 24px;
251
252			&:hover {
253				color: @color-gray-900;
254			}
255
256			@media(prefers-color-scheme: dark) {
257				color: @color-gray-400;
258
259				&:hover {
260					color: @color-gray-200;
261				}
262			}
263		}
264	}
265}
266
267code {
268	display: block;
269	background: @color-gray-900;
270	border-radius: 4px;
271	padding: @space-1x;
272	margin-top: @space-2x;
273	position: relative;
274
275	@media(prefers-color-scheme: dark) {
276		background: darken(@color-gray-900, 8%);
277	}
278
279	pre {
280		color: @color-gray-400;
281		line-height: 22px;
282		tab-size: 40px;
283		font-family: 'JetBrains Mono', monospace;
284
285		span {
286			font-family: 'JetBrains Mono', monospace;
287			color: inherit;
288
289			&.n {
290				color: @color-gray-50;
291			}
292		
293			&.c {
294				color: @color-blue-300;
295			}
296		
297			&.s {
298				color: @color-green-300;
299			}
300		
301			&.p {
302				color: @color-cyan-300;
303			}
304
305			&.x {
306				color: @color-teal-400;
307			}
308
309			&.ref {
310				cursor: pointer;
311
312				&:hover {
313					text-decoration: underline;
314				}
315			}
316		}
317	}
318
319	.clipboard {
320		position: absolute;
321		top: 14px;
322		right: 14px;
323		width: 34px;
324		height: 34px;
325		padding: 5px;
326		border-radius: 50%;
327		cursor: pointer;
328		color: @color-gray-600;
329
330		&:hover {
331			color: @color-gray-700;
332
333			&::before,
334			&::after {
335				opacity: 1;
336			}
337		}
338
339		&::before {
340			content: '';
341			opacity: 0;
342			display: inline-block;
343			position: absolute;
344			user-select: none;
345			pointer-events: none;
346			left: 50%;
347			top: -2px;
348			transform: translate(-50%, 0);
349			border: 5px solid transparent;
350			border-top: 5px solid @color-gray-900;
351		}
352
353		&::after {
354			content: attr(data-title);
355			opacity: 0;
356			display: inline-block;
357			position: absolute;
358			background: @color-gray-900;
359			padding: 6px 8px;
360			color: @color-white;
361			font-family: 'Inter', sans-serif;
362			font-size: 12px;
363			border-radius: 3px;
364			user-select: none;
365			pointer-events: none;
366			left: 50%;
367			top: -25px;
368			transform: translate(-50%, 0);
369		}
370	}
371}
372
373.logo {
374	margin-top: @space-2x;
375	cursor: pointer;
376}
377
378.banner {
379	display: block;
380	margin-top: @space-4x;
381	
382	img {
383		width: 100%;
384		height: 100%;
385		object-fit: cover;
386		display: block;
387		border-radius: 4px;
388		height: 500px;
389	}
390
391	p {
392		margin-top: @space-2x;
393	}
394}
395
396.embed {
397	display: block;
398	margin-top: @space-4x;
399
400	iframe {
401		border-radius: 4px;
402		width: 100%;
403		height: 500px;
404		pointer-events: none;
405	}
406
407	p {
408		margin-top: @space-2x;
409	}
410}
411
412.breadcrumb {
413	display: flex;
414	padding-top: @space-4x;
415	list-style-type: none;
416
417	li {
418		color: @color-gray-700;
419		font-size: 16px;
420		line-height: 24px;
421		position: relative;
422		padding-right: @space-1x;
423
424		&:not(:last-of-type) {
425
426			&::after {
427				content: '/';
428				display: inline-block;
429				position: absolute;
430				right: 7px;
431				user-select: none;
432			}
433		}
434
435		@media(prefers-color-scheme: dark) {
436			color: @color-gray-400;
437
438			a {
439				color: @color-gray-400;
440
441				&:hover {
442					color: @color-gray-200;
443				}
444			}
445		}
446	}
447}
448
449.palette-list {
450	display: flex;
451	flex-wrap: wrap;
452	list-style-type: none;
453	margin-top: @space-4x;
454	gap: @space-1x;
455
456	.palette {
457		display: flex;
458		flex-direction: column;
459		border-radius: 4px;
460		width: calc(25% - @space-1x * 3 / 4);
461		margin-bottom: @space-1x;
462
463		.palette-tone {
464			width: 100%;
465			color: white;
466			font-size: 14px;
467			display: inline-flex;
468			align-items: center;
469			padding: calc(@space-1x / 1.25);
470			cursor: pointer;
471			user-select: none;
472			transition: margin ease 0.2s, width ease 0.2s, height ease 0.2s, padding ease 0.2s, border-radius ease 0.2s;
473
474			&.dark {
475				color: @color-gray-900;
476				font-weight: 600;
477			}
478
479			&:hover {
480				margin: -4px;
481				width: calc(100% + 8px);
482				height: calc(100% + 8px);
483				padding: calc(@space-1x / 1.25 + 4px);
484				z-index: 1;
485				border-radius: 4px;
486			}
487
488			&:first-of-type {
489				border-top-left-radius: 4px;
490				border-top-right-radius: 4px;
491			}
492
493			&:last-of-type {
494				border-bottom-left-radius: 4px;
495				border-bottom-right-radius: 4px;
496			}
497		}
498	}
499}
500
501.icon-list {
502	display: flex;
503	flex-wrap: wrap;
504	list-style-type: none;
505	margin-top: @space-2x;
506	margin-bottom: @space-2x;
507	gap: @space-1x;
508
509	.icon {
510		display: flex;
511		border-radius: 4px;
512		justify-content: center;
513		align-items: center;
514		width: calc(10% - @space-1x * 9 / 10);
515		aspect-ratio: 1 / 1;
516		background: @color-gray-50;
517		cursor: pointer;
518		
519		.ico {
520			color: @color-gray-600;
521			transition: color ease 0.2s;
522		}
523
524		&:hover {
525
526			.ico {
527				color: @color-gray-900;
528			}
529		}
530
531		@media(prefers-color-scheme: dark) {
532			background: darken(@color-gray-900, 8%);
533
534			.ico {
535				color: @color-gray-500;
536			}
537
538			&:hover {
539
540				.ico {
541					color: @color-gray-200;
542				}
543			}
544		}
545	}
546}
547
548footer {
549	margin-top: @space-8x;
550	margin-bottom: @space-4x;
551
552	.container {
553		display: flex;
554		justify-content: flex-end;
555		gap: @space-1x;
556	}
557
558	p {
559		flex: 1;
560		align-self: flex-start;
561		color: @color-gray-700;
562		margin: 0;
563	}
564
565	a {
566		font-size: 16px;
567	}
568
569	@media(prefers-color-scheme: dark) {
570		
571		p {
572			color: @color-gray-500;
573		}
574
575		a {
576			color: @color-gray-500;
577
578			&:hover {
579				color: @color-gray-300;
580			}
581		}
582	}
583}
584
585.tooltip {
586	position: relative;
587
588	&:hover {
589
590		&::before,
591		&::after {
592			opacity: 1;
593			transition-delay: 1s;
594		}
595
596		&::before {
597			bottom: -13px;
598		}
599
600		&::after {
601			bottom: -40px;
602		}
603	}
604
605	&::before,
606	&::after {
607		opacity: 0;
608		content: '';
609		display: inline-block;
610		position: absolute;
611		user-select: none;
612		pointer-events: none;
613		transition: opacity ease 0.1s, bottom ease 0.1s;
614		transition-delay: 0s;
615		z-index: 2;
616		left: 50%;
617		transform: translate(-50%, 0);
618	}
619
620	&::before {
621		border: 3px solid transparent;
622		border-bottom: 3px solid @color-gray-900;
623		bottom: -10px;
624	}
625
626	&::after {
627		content: attr(data-title);
628		background: @color-gray-900;
629		font-size: 12px;
630		color: @color-white;
631		white-space: nowrap;
632		padding: 6px 10px;
633		padding-bottom: 7px;
634		border-radius: 3px;
635		bottom: -37px;
636		height: 15px;
637		min-width: 40px;
638		text-align: center;
639		font-weight: 400;
640	}
641}
642
643.snackbar {
644	background: @color-gray-900;
645	position: fixed;
646	left: @space-2x;
647	bottom: @space-1x;
648	border-radius: 4px;
649	color: @color-white;
650	padding: 18px 30px;
651	pointer-events: none;
652	opacity: 0;
653	transition: opacity ease 0.2s, bottom ease 0.2s;
654
655	&.active {
656		opacity: 1;
657		bottom: @space-2x;
658	}