so://phie

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