so://phie

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