so://phie

blob: e015a65b83b5390a029e471446696de7e7937977 (10863 bytes)[doc][blame][raw]

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