|
4 | 4 | <div class="content__footer-container">
|
5 | 5 | <div class="content__footer">
|
6 | 6 | <div v-if="editLink" class="edit-link">
|
7 |
| - <a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a> |
8 |
| - <svg viewBox="0 0 33 32" version="1.1" xmlns="http://www.w3.org/2000/svg" height="16" width="16"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="github" fill="#000"><path d="M16.3,0 C7.3,0 -3.55271368e-15,7.3 -3.55271368e-15,16.3 C-3.55271368e-15,23.5 4.7,29.6 11.1,31.8 C11.9,31.9 12.2,31.4 12.2,31 L12.2,28.2 C7.7,29.2 6.7,26 6.7,26 C6,24.2 5,23.7 5,23.7 C3.5,22.7 5.1,22.7 5.1,22.7 C6.7,22.8 7.6,24.4 7.6,24.4 C9.1,26.9 11.4,26.2 12.3,25.8 C12.4,24.7 12.9,24 13.3,23.6 C9.7,23.2 5.9,21.8 5.9,15.5 C5.9,13.7 6.5,12.3 7.6,11.1 C7.4,10.7 6.9,9 7.8,6.8 C7.8,6.8 9.2,6.4 12.3,8.5 C13.6,8.1 15,8 16.4,8 C17.8,8 19.2,8.2 20.5,8.5 C23.6,6.4 25,6.8 25,6.8 C25.9,9 25.3,10.7 25.2,11.1 C26.2,12.2 26.9,13.7 26.9,15.5 C26.9,21.8 23.1,23.1 19.5,23.5 C20.1,24 20.6,25 20.6,26.5 L20.6,31 C20.6,31.4 20.9,31.9 21.7,31.8 C28.2,29.6 32.8,23.5 32.8,16.3 C32.6,7.3 25.3,0 16.3,0 L16.3,0 Z" id="Shape"></path></g></g></svg> |
| 7 | + <a :href="editLink" target="_blank" rel="noopener noreferrer"> |
| 8 | + {{ editLinkText }} |
| 9 | + </a> |
| 10 | + <svg |
| 11 | + viewBox="0 0 33 32" |
| 12 | + version="1.1" |
| 13 | + xmlns="http://www.w3.org/2000/svg" |
| 14 | + height="16" |
| 15 | + width="16" |
| 16 | + > |
| 17 | + <g |
| 18 | + id="Page-1" |
| 19 | + stroke="none" |
| 20 | + stroke-width="1" |
| 21 | + fill="none" |
| 22 | + fill-rule="evenodd" |
| 23 | + > |
| 24 | + <g id="github" fill="#000"> |
| 25 | + <path |
| 26 | + d="M16.3,0 C7.3,0 -3.55271368e-15,7.3 -3.55271368e-15,16.3 C-3.55271368e-15,23.5 4.7,29.6 11.1,31.8 C11.9,31.9 12.2,31.4 12.2,31 L12.2,28.2 C7.7,29.2 6.7,26 6.7,26 C6,24.2 5,23.7 5,23.7 C3.5,22.7 5.1,22.7 5.1,22.7 C6.7,22.8 7.6,24.4 7.6,24.4 C9.1,26.9 11.4,26.2 12.3,25.8 C12.4,24.7 12.9,24 13.3,23.6 C9.7,23.2 5.9,21.8 5.9,15.5 C5.9,13.7 6.5,12.3 7.6,11.1 C7.4,10.7 6.9,9 7.8,6.8 C7.8,6.8 9.2,6.4 12.3,8.5 C13.6,8.1 15,8 16.4,8 C17.8,8 19.2,8.2 20.5,8.5 C23.6,6.4 25,6.8 25,6.8 C25.9,9 25.3,10.7 25.2,11.1 C26.2,12.2 26.9,13.7 26.9,15.5 C26.9,21.8 23.1,23.1 19.5,23.5 C20.1,24 20.6,25 20.6,26.5 L20.6,31 C20.6,31.4 20.9,31.9 21.7,31.8 C28.2,29.6 32.8,23.5 32.8,16.3 C32.6,7.3 25.3,0 16.3,0 L16.3,0 Z" |
| 27 | + id="Shape" |
| 28 | + /> |
| 29 | + </g> |
| 30 | + </g> |
| 31 | + </svg> |
9 | 32 | </div>
|
10 | 33 | <time v-if="lastUpdated" class="last-updated">
|
11 |
| - <span class="prefix">{{ lastUpdatedText }}: </span> |
| 34 | + <span class="prefix">{{ lastUpdatedText }}:</span> |
12 | 35 | <span class="time">{{ lastUpdated }}</span>
|
13 | 36 | </time>
|
14 | 37 | </div>
|
@@ -163,87 +186,109 @@ export default {
|
163 | 186 | </script>
|
164 | 187 |
|
165 | 188 | <style lang="stylus">
|
166 |
| -@import './styles/_variables.styl' |
167 |
| -
|
168 |
| -.page__container |
169 |
| - min-height: 100vh |
170 |
| - padding: 4rem 6rem 0 |
171 |
| -
|
172 |
| - .curl__container |
173 |
| - text-align: center |
174 |
| -
|
175 |
| -.content__footer |
176 |
| - display: flex |
177 |
| - justify-content: space-between |
178 |
| - padding: 2em 0 |
179 |
| - font-size: 14px |
180 |
| - color: #999 |
181 |
| -
|
182 |
| - .edit-link |
183 |
| - a |
184 |
| - margin-right: .5em |
185 |
| - font-weight: 600 |
186 |
| - color: #000 |
187 |
| - svg |
188 |
| - vertical-align: middle |
189 |
| -
|
190 |
| -.page--block-layout |
191 |
| - .content__footer-container |
192 |
| - margin: 0 -3rem |
193 |
| - background-color: #000 |
194 |
| -
|
195 |
| - .content__footer |
| 189 | +@import './styles/_variables.styl'; |
| 190 | +
|
| 191 | +.page__container { |
| 192 | + min-height: 100vh; |
| 193 | + padding: 4rem 6rem 0; |
| 194 | +
|
| 195 | + .curl__container { |
| 196 | + text-align: center; |
| 197 | + } |
| 198 | +} |
| 199 | +
|
| 200 | +.content__footer { |
| 201 | + display: flex; |
| 202 | + justify-content: space-between; |
| 203 | + padding: 2em 0; |
| 204 | + font-size: 14px; |
| 205 | + color: #999; |
| 206 | +
|
| 207 | + .edit-link { |
| 208 | + a { |
| 209 | + margin-right: 0.5em; |
| 210 | + font-weight: 600; |
| 211 | + color: #000; |
| 212 | + } |
| 213 | +
|
| 214 | + svg { |
| 215 | + vertical-align: middle; |
| 216 | + } |
| 217 | + } |
| 218 | +} |
| 219 | +
|
| 220 | +.page--block-layout { |
| 221 | + .content__footer-container { |
| 222 | + margin: 0 -3rem; |
| 223 | + background-color: #000; |
| 224 | + } |
| 225 | +
|
| 226 | + .content__footer { |
196 | 227 | width: 50%;
|
197 |
| - padding: 0 3rem 2rem |
198 |
| - background-color: #fafafa |
| 228 | + padding: 0 3rem 2rem; |
| 229 | + background-color: #fafafa; |
| 230 | + } |
| 231 | +} |
199 | 232 |
|
200 |
| -.content-block |
201 |
| - margin: -4rem -6rem 4rem |
202 |
| - background-color: $black |
| 233 | +.content-block { |
| 234 | + margin: -4rem -6rem 4rem; |
| 235 | + background-color: $black; |
203 | 236 |
|
204 |
| - &:last-child |
205 |
| - margin-bottom: 0 |
| 237 | + &:last-child { |
| 238 | + margin-bottom: 0; |
| 239 | + } |
206 | 240 |
|
207 |
| - &:after |
208 |
| - height: 1px |
209 |
| - display: block |
210 |
| - content: '' |
211 |
| - width: 100% |
212 |
| - background-image: linear-gradient(90deg,#eaeaea 50%,#333 50%) |
| 241 | + &:after { |
| 242 | + height: 1px; |
| 243 | + display: block; |
| 244 | + content: ''; |
| 245 | + width: 100%; |
| 246 | + background-image: linear-gradient(90deg, #eaeaea 50%, #333 50%); |
| 247 | + } |
213 | 248 |
|
214 |
| - &:last-child:after |
215 |
| - display: none |
| 249 | + &:last-child:after { |
| 250 | + display: none; |
| 251 | + } |
216 | 252 |
|
217 |
| - &__heading |
218 |
| - width: 50% |
219 |
| - padding: 4rem 3rem 0 |
220 |
| - overflow: auto |
221 |
| - background-color: #fafafa |
| 253 | + &__heading { |
| 254 | + width: 50%; |
| 255 | + padding: 4rem 3rem 0; |
| 256 | + overflow: auto; |
| 257 | + background-color: #fafafa; |
| 258 | + } |
222 | 259 |
|
223 |
| - &__body |
224 |
| - display: flex |
| 260 | + &__body { |
| 261 | + display: flex; |
| 262 | + } |
225 | 263 |
|
226 |
| - &__cont, |
227 |
| - &__examples |
228 |
| - width: 50% |
229 |
| - padding: 0 3rem 2rem |
| 264 | + &__cont, &__examples { |
| 265 | + width: 50%; |
| 266 | + padding: 0 3rem 2rem; |
| 267 | + } |
230 | 268 |
|
231 |
| - &__cont |
232 |
| - background-color: #fafafa |
| 269 | + &__cont { |
| 270 | + background-color: #fafafa; |
| 271 | + } |
233 | 272 |
|
234 |
| - &__examples |
235 |
| - color: $white |
| 273 | + &__examples { |
| 274 | + color: $white; |
236 | 275 |
|
237 |
| - .btn |
238 |
| - margin: 2em 0 |
| 276 | + .btn { |
| 277 | + margin: 2em 0; |
| 278 | + } |
239 | 279 |
|
240 |
| - p |
241 |
| - font-size: 12px |
| 280 | + p { |
| 281 | + font-size: 12px; |
| 282 | + } |
242 | 283 |
|
243 | 284 | // reset style
|
244 |
| - blockquote |
245 |
| - border-left-color: $white |
| 285 | + blockquote { |
| 286 | + border-left-color: $white; |
246 | 287 |
|
247 |
| - p |
248 |
| - color: #888 |
| 288 | + p { |
| 289 | + color: #888; |
| 290 | + } |
| 291 | + } |
| 292 | + } |
| 293 | +} |
249 | 294 | </style>
|
0 commit comments