so://phie

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