so://phie

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