so://phie

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