so://phie

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