so://phie

blob: 3dfa05ab70db99021392550258dd8def9438fe23 (3708 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		margin-bottom: 50px;
 81		display: inline-block;
 82
 83		li {
 84			margin-bottom: 25px;
 85
 86			p {
 87				font-weight: 500;
 88				margin-bottom: 10px;
 89			}
 90
 91			ul {
 92				padding-left: 20px;
 93
 94				li {
 95					margin-bottom: 5px;
 96				}
 97			}
 98
 99			a {
100				color: #424242;
101				font-size: 14px;
102				text-decoration: underline;
103				cursor: pointer;
104			}
105		}
106	}
107
108	article {
109		border: 1px solid #CCC;
110		border-radius: 4px;
111		padding: 20px;
112		margin-bottom: 20px;
113		overflow-x: hidden;
114
115		label {
116			display: block;
117			font-size: 20px;
118			font-weight: 600;
119			margin-bottom: 10px;
120		}
121
122		& > pre {
123			display: inline-block;
124			font-size: 13px;
125			font-family: 'Roboto Mono';
126			line-height: 19px;
127			padding: 6px 6px;
128			border: 1px solid #EEE;
129			border-radius: 2px;
130			margin-bottom: 10px;
131			overflow-x: auto;
132			max-width: 100%;
133
134			&::-webkit-scrollbar {
135				height: 8px;
136			}
137
138			&::-webkit-scrollbar-track {
139				background: #EEE;
140			}
141
142			&::-webkit-scrollbar-thumb {
143				background: #AAA;
144			
145				&:hover {
146					background: #888;
147				}
148			}
149		}
150
151		p {
152			font-size: 14px;
153			font-weight: 400;
154			color: #666666;
155			line-height: 20px;
156			margin-bottom: 15px;
157		}
158
159		code {
160			display: block;
161			position: relative;
162			background: #F5F5F5;
163			border-radius: 2px;
164			margin-bottom: 15px;
165			overflow-x: hidden;
166
167			pre {
168				font-size: 13px;
169				font-family: 'Roboto Mono';
170				line-height: 19px;
171				tab-size: 25px;
172				overflow-x: auto;
173				padding: 10px 10px;
174				padding-right: 40px;
175
176				&::-webkit-scrollbar {
177					height: 8px;
178				}
179
180				&::-webkit-scrollbar-track {
181					background: #EEE;
182				}
183
184				&::-webkit-scrollbar-thumb {
185					background: #AAA;
186				
187					&:hover {
188						background: #888;
189					}
190				}
191			}
192
193			.clipboard {
194				position: absolute;
195				top: 4px;
196				right: 4px;
197				width: 30px;
198				height: 30px;
199				border-radius: 50%;
200				color: #888888;
201				display: grid;
202				place-content: center;
203				cursor: pointer;
204
205				&:hover {
206					color: #424242;
207				}
208			}
209		}
210
211		h3 {
212			margin-bottom: 5px;
213		}
214	}
215}
216
217footer {
218	margin-bottom: 50px;
219
220	.container {
221		display: flex;
222		justify-content: flex-end;
223	}
224
225	span {
226		flex: 1;
227		align-self: flex-start;
228		color: #666666;
229	}
230
231	a {
232		margin-left: 15px;
233		color: #666666;
234
235		&:hover {
236			color: #424242;
237		}
238	}
239}
240
241.message {
242	border: 1px solid #CCC;
243	border-radius: 4px;
244	padding: 20px;
245
246	h3 {
247		margin-bottom: 10px;
248	}
249
250	p {
251		color: #666666;
252	}