so://phie

blob: 08dd007244b88245ff1c58549247a81f3e6ae039 (3240 bytes)[doc][blame][raw]

  1@import './variable.less';
  2@import '../std/less/normalize.less';
  3@import '../std/less/color.less';
  4@import '../std/less/icons.less';
  5
  6@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700');
  7@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500');
  8
  9* {
 10	color: @color-gray-900;
 11	font-family: 'Inter';
 12}
 13
 14header {
 15	padding: 50px 0;
 16	margin-bottom: 20px;
 17
 18	h1 {
 19		font-size: 28px;
 20		margin-bottom: 10px;
 21	}
 22
 23	p {
 24		font-size: 16px;
 25		color: @color-gray-700;
 26	}
 27}
 28
 29main {
 30	margin-bottom: 100px;
 31
 32	h2 {
 33		font-size: 24px;
 34		margin-top: 80px;
 35		margin-bottom: 30px;
 36	}
 37
 38	h3 {
 39		font-size: 20px;
 40		margin-bottom: 20px;
 41	}
 42
 43	.overview {
 44		padding-left: 20px;
 45		display: inline-block;
 46
 47		li {
 48			margin-bottom: 25px;
 49
 50			p {
 51				font-weight: 500;
 52				margin-bottom: 10px;
 53			}
 54
 55			ul {
 56				padding-left: 20px;
 57
 58				li {
 59					margin-bottom: 5px;
 60				}
 61			}
 62
 63			a {
 64				color: @color-gray-800;
 65				font-size: 14px;
 66				text-decoration: underline;
 67				cursor: pointer;
 68			}
 69		}
 70	}
 71
 72	article {
 73		border: 1px solid @color-gray-300;
 74		border-radius: 4px;
 75		padding: 20px;
 76		margin-bottom: 20px;
 77		overflow-x: hidden;
 78
 79		label {
 80			display: block;
 81			font-size: 20px;
 82			font-weight: 600;
 83			margin-bottom: 10px;
 84		}
 85
 86		& > pre {
 87			display: inline-block;
 88			font-size: 13px;
 89			font-family: 'Roboto Mono';
 90			line-height: 19px;
 91			padding: 6px 6px;
 92			border: 1px solid @color-gray-200;
 93			border-radius: 2px;
 94			margin-bottom: 10px;
 95			overflow-x: auto;
 96			max-width: 100%;
 97
 98			&::-webkit-scrollbar {
 99				height: 8px;
100			}
101
102			&::-webkit-scrollbar-track {
103				background: @color-gray-200;
104			}
105
106			&::-webkit-scrollbar-thumb {
107				background: @color-gray-400;
108			
109				&:hover {
110					background: @color-gray-500;
111				}
112			}
113		}
114
115		p {
116			font-size: 14px;
117			font-weight: 400;
118			color: @color-gray-700;
119			line-height: 20px;
120			margin-bottom: 15px;
121		}
122
123		code {
124			display: block;
125			position: relative;
126			background: @color-gray-100;
127			border-radius: 2px;
128			margin-bottom: 15px;
129			overflow-x: hidden;
130
131			pre {
132				font-size: 13px;
133				font-family: 'Roboto Mono';
134				line-height: 19px;
135				tab-size: 25px;
136				overflow-x: auto;
137				padding: 10px 10px;
138				padding-right: 40px;
139
140				&::-webkit-scrollbar {
141					height: 8px;
142				}
143
144				&::-webkit-scrollbar-track {
145					background: @color-gray-200;
146				}
147
148				&::-webkit-scrollbar-thumb {
149					background: @color-gray-400;
150				
151					&:hover {
152						background: @color-gray-500;
153					}
154				}
155			}
156
157			.clipboard {
158				position: absolute;
159				top: 4px;
160				right: 4px;
161				width: 30px;
162				height: 30px;
163				border-radius: 50%;
164				color: @color-gray-500;
165				display: grid;
166				place-content: center;
167				cursor: pointer;
168
169				&:hover {
170					color: @color-gray-800;
171				}
172			}
173		}
174
175		h3 {
176			margin-bottom: 5px;
177		}
178	}
179}
180
181footer {
182	margin-bottom: 50px;
183
184	.container {
185		display: flex;
186		justify-content: flex-end;
187	}
188
189	span {
190		flex: 1;
191		align-self: flex-start;
192		color: @color-gray-700;
193	}
194
195	a {
196		margin-left: 15px;
197		color: @color-gray-700;
198
199		&:hover {
200			color: @color-gray-800;
201		}
202	}
203}
204
205.message {
206	border: 1px solid @color-gray-300;
207	border-radius: 4px;
208	padding: 20px;
209
210	h3 {
211		margin-bottom: 10px;
212	}
213
214	p {
215		color: @color-gray-700;
216	}