so://phie

blob: 921aca239c0c868e3d523797a4f0fe5291c86c42 (3685 bytes)[doc][blame][raw]

  1@import 'variable';
  2@import 'normalize';
  3
  4@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
  5@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700');
  6@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500');
  7
  8* {
  9	color: #212121;
 10	font-family: 'Inter';
 11}
 12
 13.container-fluid {
 14	.col-auto;
 15}
 16
 17.container {
 18	max-width: @width;
 19	margin: 0 auto;
 20	.col-auto;
 21}
 22
 23.row {
 24	margin-left: calc(-@grid-gutter-width / 2);
 25	margin-right: calc(-@grid-gutter-width / 2);
 26}
 27
 28.ico {
 29	font-family: 'Material Icons';
 30	font-weight: normal;
 31	font-style: normal;
 32	font-size: 24px;
 33	display: inline-block;
 34	line-height: 1;
 35	text-transform: none;
 36	letter-spacing: normal;
 37	word-wrap: normal;
 38	white-space: nowrap;
 39	direction: ltr;
 40	-webkit-font-smoothing: antialiased;
 41	text-rendering: optimizedLegibility;
 42	-moz-osx-font-smoothing: grayscale;
 43	font-feature-settings: 'liga';
 44	user-select: none;
 45}
 46
 47header {
 48	padding: 50px 0;
 49	margin-bottom: 20px;
 50
 51	h1 {
 52		font-size: 28px;
 53		margin-bottom: 10px;
 54	}
 55
 56	p {
 57		font-size: 16px;
 58		color: #666666;
 59	}
 60}
 61
 62main {
 63	margin-bottom: 100px;
 64
 65	h2 {
 66		color: #212121;
 67		font-size: 24px;
 68		margin-top: 80px;
 69		margin-bottom: 30px;
 70	}
 71
 72	h3 {
 73		color: #212121;
 74		font-size: 20px;
 75		margin-bottom: 20px;
 76	}
 77
 78	.overview {
 79		padding-left: 20px;
 80		display: inline-block;
 81
 82		li {
 83			margin-bottom: 25px;
 84
 85			p {
 86				font-weight: 500;
 87				margin-bottom: 10px;
 88			}
 89
 90			ul {
 91				padding-left: 20px;
 92
 93				li {
 94					margin-bottom: 5px;
 95				}
 96			}
 97
 98			a {
 99				color: #424242;
100				font-size: 14px;
101				text-decoration: underline;
102				cursor: pointer;
103			}
104		}
105	}
106
107	article {
108		border: 1px solid #CCC;
109		border-radius: 4px;
110		padding: 20px;
111		margin-bottom: 20px;
112		overflow-x: hidden;
113
114		label {
115			display: block;
116			font-size: 20px;
117			font-weight: 600;
118			margin-bottom: 10px;
119		}
120
121		& > pre {
122			display: inline-block;
123			font-size: 13px;
124			font-family: 'Roboto Mono';
125			line-height: 19px;
126			padding: 6px 6px;
127			border: 1px solid #EEE;
128			border-radius: 2px;
129			margin-bottom: 10px;
130			overflow-x: auto;
131			max-width: 100%;
132
133			&::-webkit-scrollbar {
134				height: 8px;
135			}
136
137			&::-webkit-scrollbar-track {
138				background: #EEE;
139			}
140
141			&::-webkit-scrollbar-thumb {
142				background: #AAA;
143			
144				&:hover {
145					background: #888;
146				}
147			}
148		}
149
150		p {
151			font-size: 14px;
152			font-weight: 400;
153			color: #666666;
154			line-height: 20px;
155			margin-bottom: 15px;
156		}
157
158		code {
159			display: block;
160			position: relative;
161			background: #F5F5F5;
162			border-radius: 2px;
163			margin-bottom: 15px;
164			overflow-x: hidden;
165
166			pre {
167				font-size: 13px;
168				font-family: 'Roboto Mono';
169				line-height: 19px;
170				tab-size: 25px;
171				overflow-x: auto;
172				padding: 10px 10px;
173				padding-right: 40px;
174
175				&::-webkit-scrollbar {
176					height: 8px;
177				}
178
179				&::-webkit-scrollbar-track {
180					background: #EEE;
181				}
182
183				&::-webkit-scrollbar-thumb {
184					background: #AAA;
185				
186					&:hover {
187						background: #888;
188					}
189				}
190			}
191
192			.clipboard {
193				position: absolute;
194				top: 4px;
195				right: 4px;
196				width: 30px;
197				height: 30px;
198				border-radius: 50%;
199				color: #888888;
200				display: grid;
201				place-content: center;
202				cursor: pointer;
203
204				&:hover {
205					color: #424242;
206				}
207			}
208		}
209
210		h3 {
211			margin-bottom: 5px;
212		}
213	}
214}
215
216footer {
217	margin-bottom: 50px;
218
219	.container {
220		display: flex;
221		justify-content: flex-end;
222	}
223
224	span {
225		flex: 1;
226		align-self: flex-start;
227		color: #666666;
228	}
229
230	a {
231		margin-left: 15px;
232		color: #666666;
233
234		&:hover {
235			color: #424242;
236		}
237	}
238}
239
240.message {
241	border: 1px solid #CCC;
242	border-radius: 4px;
243	padding: 20px;
244
245	h3 {
246		margin-bottom: 10px;
247	}
248
249	p {
250		color: #666666;
251	}