├── .env ├── .env.local ├── .gitignore ├── .gitmodules ├── .travis.yml ├── CNAME ├── README.md ├── docs ├── .gitkeep ├── css │ └── styles.css ├── index.html ├── sitemap.xml └── tags │ ├── index.html │ └── index.xml └── src ├── archetypes └── default.md ├── config.toml ├── content ├── _index.md ├── log │ └── 2019 │ │ ├── 03 │ │ ├── 2019-03-10.md │ │ ├── 2019-03-11.md │ │ ├── 2019-03-12.md │ │ ├── 2019-03-13.md │ │ ├── 2019-03-14.md │ │ ├── 2019-03-15-md │ │ └── 2019-03-22.md │ │ └── 04 │ │ └── 2019-04-01.md └── post │ ├── 2019 │ ├── 10 │ │ └── mdbook.md │ ├── 03 │ │ └── hugo.md │ ├── 04 │ │ └── hugo-disqus.md │ └── 08 │ │ └── linode.md │ └── 2020 │ └── linode-s3-cloudflare.md ├── layouts ├── 404.html ├── _default │ ├── baseof.html │ ├── list.html │ ├── single.html │ └── terms.html ├── index.html ├── log │ └── single.html ├── partials │ ├── disqus-js-common.js │ ├── disqus-js-main.js │ ├── disqus.html │ ├── footer.html │ ├── google-analytics-async.html │ ├── head.html │ ├── header.html │ ├── jsonld.html │ ├── nav.html │ ├── script.html │ └── toc.html ├── post │ └── single.html └── shortcodes │ ├── blockquote.html │ ├── cmd.html │ ├── code.html │ ├── codePen.html │ ├── colors.html │ ├── expandable.html │ ├── figure.html │ ├── fileTree.html │ ├── gallery.html │ ├── note.html │ ├── principles.html │ ├── tested.html │ ├── ticks.html │ ├── warning.html │ └── wcag.html └── resources └── _gen └── assets └── css └── css ├── template-styles.css_c2e18c145f3470d19843d012c882b388.content └── template-styles.css_c2e18c145f3470d19843d012c882b388.json /.env: -------------------------------------------------------------------------------- 1 | HUGO_BASEURL=https://log.fripig.tw 2 | ARGS= --minify -------------------------------------------------------------------------------- /.env.local: -------------------------------------------------------------------------------- 1 | HUGO_BASEURL=http://127.0.0.1:8887/ 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### JetBrains template 3 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm 4 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 5 | 6 | # User-specific stuff 7 | .idea/**/workspace.xml 8 | .idea/**/tasks.xml 9 | .idea/**/usage.statistics.xml 10 | .idea/**/dictionaries 11 | .idea/**/shelf 12 | 13 | # Sensitive or high-churn files 14 | .idea/**/dataSources/ 15 | .idea/**/dataSources.ids 16 | .idea/**/dataSources.local.xml 17 | .idea/**/sqlDataSources.xml 18 | .idea/**/dynamic.xml 19 | .idea/**/uiDesigner.xml 20 | .idea/**/dbnavigator.xml 21 | 22 | # Gradle 23 | .idea/**/gradle.xml 24 | .idea/**/libraries 25 | 26 | # Gradle and Maven with auto-import 27 | # When using Gradle or Maven with auto-import, you should exclude module files, 28 | # since they will be recreated, and may cause churn. Uncomment if using 29 | # auto-import. 30 | # .idea/modules.xml 31 | # .idea/*.iml 32 | # .idea/modules 33 | 34 | # CMake 35 | cmake-build-*/ 36 | 37 | # Mongo Explorer plugin 38 | .idea/**/mongoSettings.xml 39 | 40 | # File-based project format 41 | *.iws 42 | 43 | # IntelliJ 44 | out/ 45 | 46 | # mpeltonen/sbt-idea plugin 47 | .idea_modules/ 48 | 49 | # JIRA plugin 50 | atlassian-ide-plugin.xml 51 | 52 | # Cursive Clojure plugin 53 | .idea/replstate.xml 54 | 55 | # Crashlytics plugin (for Android Studio and IntelliJ) 56 | com_crashlytics_export_strings.xml 57 | crashlytics.properties 58 | crashlytics-build.properties 59 | fabric.properties 60 | 61 | # Editor-based Rest Client 62 | .idea/httpRequests 63 | .idea 64 | resources/_gen/** 65 | docs 66 | 67 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "src/themes/cupper-hugo-theme"] 2 | path = src/themes/cupper-hugo-theme 3 | url = https://github.com/zwbetz-gh/cupper-hugo-theme.git 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: minimal 2 | services: 3 | - docker 4 | before_install: 5 | - docker pull jojomi/hugo:0.53 6 | script: 7 | - docker run --rm --publish-all --env-file .env --volume $TRAVIS_BUILD_DIR/src:/src --volume $TRAVIS_BUILD_DIR/docs:/output jojomi/hugo:0.53 8 | - cp CNAME $TRAVIS_BUILD_DIR/docs 9 | deploy: 10 | provider: pages 11 | skip-cleanup: true 12 | github-token: $GITHUB_TOKEN # Set in travis-ci.org dashboard, marked secure 13 | email: $GITHUB_EMAIL 14 | name: $GITHUB_USERNAME 15 | verbose: true 16 | keep-history: true 17 | local-dir: docs 18 | target_branch: gh-pages # branch contains blog content 19 | on: 20 | branch: master # branch contains Hugo generator code 21 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | log.fripig.tw -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 這邊只是備份 2 | 3 | 這邊主要目的是紀錄 4 | 5 | 並沒有做太多篩選的動作 6 | 7 | 想看篩選過的可以到 8 | [twitter](https://twitter.com/fripig) 9 | 不過也有些我的碎碎唸就是了 10 | 11 | ``` 12 | docker run --rm --volume ${pwd}:/src jojomi/hugo hugo new site src 13 | ``` 14 | 15 | 16 | 17 | ```powershell 18 | docker run --rm --env-file .env --publish-all --volume %cd%/src:/src --volume %cd%/docs:/output jojomi/hugo 19 | ``` 20 | -------------------------------------------------------------------------------- /docs/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fripig/article_log/ae9dc89b11b28896ec4f0c38d47a0ecfd9d2dfea/docs/.gitkeep -------------------------------------------------------------------------------- /docs/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Fonts */ 2 | @font-face { 3 | font-family: 'Miriam Libre'; 4 | src: url('css/fonts/miriamlibre-bold.woff2') format('woff2'), url('css/fonts/miriamlibre-bold.woff') format('woff'); 5 | font-weight: bold; 6 | font-style: normal; 7 | } 8 | *, 9 | *::before, 10 | *::after { 11 | font-family: inherit; 12 | background-color: inherit; 13 | color: inherit; 14 | margin: 0; 15 | padding: 0; 16 | box-sizing: border-box; 17 | } 18 | html { 19 | font-size: calc(1em + 0.33vw); 20 | font-family: Arial, Helvetica Neue, sans-serif; 21 | line-height: 1.5; 22 | color: #111; 23 | background-color: #fefefe; 24 | } 25 | template { 26 | display: none !important; 27 | } 28 | * + * { 29 | margin-top: 2.25rem; 30 | } 31 | br, 32 | dt, 33 | dd, 34 | th, 35 | td, 36 | option, 37 | [hidden] + *, 38 | li + li, 39 | body, 40 | .main-and-footer { 41 | margin-top: 0; 42 | } 43 | p + p { 44 | margin-top: 0.75rem; 45 | } 46 | .priority { 47 | margin-top: 0; 48 | } 49 | a { 50 | text-decoration: none; 51 | border-bottom: 1px solid; 52 | } 53 | abbr { 54 | text-decoration: none; 55 | cursor: help; 56 | border-bottom: 1px dashed; 57 | } 58 | img { 59 | max-width: 100%; 60 | max-height: 50vh; 61 | } 62 | .img-link { 63 | border-bottom: none; 64 | } 65 | p img { 66 | margin: 0.75rem 0; 67 | } 68 | figure p img { 69 | margin: 0; 70 | } 71 | :focus:not([tabindex="-1"]), 72 | [data-expands]:focus svg, 73 | .patterns a:focus .text, 74 | [for="themer"] :focus + [aria-hidden] { 75 | outline: 4px solid #999; 76 | } 77 | a { 78 | outline-offset: 2px; 79 | } 80 | 81 | /* Fix for IE :( */ 82 | [tabindex="-1"]:focus, 83 | div:not([tabindex]):focus { 84 | outline: none; 85 | } 86 | [hidden] { 87 | display: none; 88 | } 89 | 90 | /* Skip link */ 91 | [href="#main"] { 92 | display: block; 93 | width: 100%; 94 | padding: 0.75rem; 95 | color: #fefefe; 96 | background: #000; 97 | position: absolute; 98 | top: -3rem; 99 | text-align: center; 100 | z-index: 1; 101 | } 102 | [href="#main"]:focus { 103 | top: 0; 104 | outline: none; 105 | } 106 | 107 | /* Text styles */ 108 | h1, 109 | h2, 110 | h3, 111 | h4 { 112 | font-family: Miriam Libre, serif; 113 | line-height: 1.125; 114 | } 115 | h1 { 116 | font-size: 2rem; 117 | } 118 | h2 { 119 | font-size: 1.66rem; 120 | } 121 | h3 { 122 | font-size: 1.25rem; 123 | } 124 | h4, 125 | h5 { 126 | font-size: 1rem; 127 | font-family: PT Sans, sans-serif; 128 | } 129 | h5 { 130 | font-size: 0.85rem; 131 | text-transform: uppercase; 132 | } 133 | kbd { 134 | line-height: 1; 135 | font-size: 0.66rem; 136 | padding: 0.1rem 0.33rem; 137 | border-radius: 0.25rem; 138 | border: 2px solid; 139 | box-shadow: 0.125rem 0.125rem 0 #111; 140 | vertical-align: 0.33em; 141 | } 142 | pre, 143 | .file-tree { 144 | overflow-x: auto; 145 | padding: 1.5rem; 146 | border: 1px solid; 147 | } 148 | code { 149 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 150 | font-size: 0.85em; 151 | } 152 | .cmd { 153 | padding: 0.75rem; 154 | background: #111; 155 | } 156 | .cmd code { 157 | color: #fefefe; 158 | white-space: nowrap; 159 | } 160 | .cmd code::before { 161 | content: '$'; 162 | font-weight: bold; 163 | padding-right: 0.25em; 164 | } 165 | 166 | /* Lists */ 167 | main ul, 168 | main ol { 169 | margin-left: 2.25rem; 170 | } 171 | main li + li { 172 | margin-top: 0.5rem; 173 | } 174 | main ul ul, main ol ol, main li ul, main li ol { 175 | margin-top: 0.5rem; 176 | } 177 | ol ol { 178 | list-style: lower-latin; 179 | } 180 | ol ol ol { 181 | list-style: lower-roman; 182 | } 183 | main dt { 184 | font-weight: bold; 185 | } 186 | main dd { 187 | padding-left: 2rem; 188 | } 189 | dd ul { 190 | margin-left: 0; 191 | } 192 | dd li + li { 193 | margin: 0; 194 | } 195 | 196 | /* Blockquotes */ 197 | blockquote { 198 | border-left: 0.5rem solid; 199 | padding-left: 0.75rem; 200 | } 201 | blockquote .author { 202 | font-size: 0.85rem; 203 | } 204 | 205 | /* Buttons */ 206 | button { 207 | font-size: 1.25rem; 208 | border-radius: 0.33em; 209 | font-family: inherit; 210 | background: #111; 211 | color: #fefefe; 212 | padding: 0.75rem; 213 | border: 0; 214 | } 215 | [data-launch] { 216 | font-size: 0.66rem !important; 217 | padding: 0.5rem !important; 218 | margin-top: 0 !important; 219 | border-radius: 0 !important; 220 | border-top-left-radius: 0.33rem !important; 221 | box-shadow: none !important; 222 | background: #111 !important; 223 | color: #fefefe !important; 224 | position: absolute !important; 225 | right: 0 !important; 226 | bottom: 0 !important; 227 | } 228 | 229 | /* Forms */ 230 | label { 231 | display: inline-block; 232 | font-weight: bold; 233 | } 234 | [for="themer"] { 235 | background: #111; 236 | border-radius: 0.33em; 237 | color: #fefefe; 238 | padding: 0.25em 0.75em; 239 | margin: 0.5rem; 240 | } 241 | [for="themer"] [aria-hidden]::before { 242 | content: 'off'; 243 | } 244 | [for="themer"] :checked + [aria-hidden]::before { 245 | content: 'on'; 246 | } 247 | 248 | /* Tables */ 249 | table { 250 | text-align: left; 251 | table-layout: fixed; 252 | width: 100%; 253 | border-collapse: collapse; 254 | } 255 | th, 256 | td { 257 | border: 2px solid; 258 | padding: 0.5rem; 259 | line-height: 1.25; 260 | margin: 0; 261 | } 262 | th { 263 | font-weight: bold; 264 | } 265 | th:empty { 266 | border: 0; 267 | } 268 | 269 | /* Tested using... table */ 270 | .tested { 271 | text-align: center; 272 | border: 1px solid #111; 273 | } 274 | .tested tr { 275 | display: flex; 276 | flex-flow: row wrap; 277 | } 278 | .tested td, .tested th { 279 | vertical-align: middle; 280 | overflow: hidden; 281 | flex: 1 0 auto; 282 | border: 1px solid #111; 283 | } 284 | .tested th { 285 | width: 100%; 286 | background-color: #111; 287 | color: #fefefe; 288 | outline-color: #111; 289 | } 290 | .tested img { 291 | max-width: 3rem; 292 | } 293 | .tested span { 294 | display: block; 295 | margin: 0; 296 | } 297 | .tested .additional { 298 | font-size: 0.85rem; 299 | } 300 | caption { 301 | font-size: 1.125rem; 302 | padding-bottom: 0.25rem; 303 | font-style: italic; 304 | } 305 | 306 | /* Page structure */ 307 | .wrapper { 308 | position: relative; 309 | margin-top: 0; 310 | overflow-x: hidden; 311 | } 312 | .intro-and-nav { 313 | font-size: 0.8rem; 314 | width: 15rem; 315 | height: 100vh; 316 | position: fixed; 317 | top: 0; 318 | left: 0; 319 | border-right: 2px solid; 320 | } 321 | .intro-and-nav > div { 322 | padding: 2.25rem; 323 | display: flex; 324 | flex-direction: column; 325 | height: 100%; 326 | } 327 | .intro { 328 | flex: 0 0 auto; 329 | } 330 | .patterns { 331 | flex: 1 1 auto; 332 | } 333 | .logo { 334 | border: 0; 335 | } 336 | .logo img { 337 | width: 100%; 338 | max-width: 12rem; 339 | } 340 | .library-desc { 341 | margin-top: 0.5rem; 342 | margin-left: auto; 343 | margin-right: auto; 344 | max-width: 25rem; 345 | } 346 | .main-and-footer { 347 | margin-left: 15rem; 348 | } 349 | .main-and-footer > div { 350 | max-width: 40rem; 351 | margin: 0 auto; 352 | padding: 2.25rem; 353 | } 354 | [role="contentinfo"] { 355 | font-size: 0.85rem; 356 | margin-top: 4rem; 357 | text-align: center; 358 | } 359 | 360 | /* Patterns navigation */ 361 | .patterns { 362 | overflow: auto; 363 | margin-top: 1.5rem; 364 | } 365 | .patterns * { 366 | margin-top: 0; 367 | } 368 | .patterns h3 { 369 | font-size: 1rem; 370 | } 371 | .patterns h3 + ul { 372 | margin-top: 0.75rem; 373 | } 374 | .patterns li { 375 | line-height: 1.125; 376 | list-style: none; 377 | } 378 | .patterns li + li { 379 | margin-top: 0.75rem; 380 | } 381 | .patterns ul ul { 382 | margin-left: 0.75rem; 383 | } 384 | .pattern a { 385 | border: 0; 386 | display: flex; 387 | flex-wrap: nowrap; 388 | align-items: baseline; 389 | font-weight: bold; 390 | padding: 0 1rem; 391 | } 392 | .pattern a:focus { 393 | outline: none; 394 | } 395 | .pattern span { 396 | margin-left: 0.125rem; 397 | } 398 | 399 | /* After */ 400 | .pattern [aria-current] { 401 | background-color: #111; 402 | clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%); 403 | color: #fefefe; 404 | padding-top: 0.5em; 405 | padding-bottom: 0.5em; 406 | } 407 | 408 | /* Menu button */ 409 | #menu-button { 410 | display: none; 411 | width: 100%; 412 | text-align: center; 413 | } 414 | #menu-button:focus { 415 | outline: none; 416 | box-shadow: inset 0 0 0 0.25rem #999; 417 | } 418 | 419 | /* Tables of contents */ 420 | .toc { 421 | font-size: 0.85rem; 422 | border: 1px solid; 423 | padding: 1.5rem; 424 | } 425 | .toc h2 { 426 | font-size: 1rem; 427 | } 428 | .toc ol { 429 | margin-left: 0.75rem; 430 | margin-top: 0.5rem; 431 | } 432 | 433 | /* Pattern lists */ 434 | .patterns-list { 435 | list-style: none; 436 | margin-left: 0; 437 | } 438 | .patterns-list h2 { 439 | font-size: 1.25rem; 440 | line-height: 1.6; 441 | } 442 | .patterns-list li + li { 443 | margin-top: 1rem; 444 | padding-top: 1rem; 445 | border-top: 2px solid; 446 | } 447 | .patterns-list a { 448 | border: 0; 449 | } 450 | 451 | /* Tags */ 452 | .tags { 453 | margin-top: 0; 454 | font-size: 0.85rem; 455 | } 456 | .tags * { 457 | display: inline; 458 | margin: 0; 459 | } 460 | .tags strong { 461 | margin-right: 0.25rem; 462 | } 463 | .tags li { 464 | white-space: nowrap; 465 | margin: 0 0.25rem 0 0; 466 | } 467 | 468 | /* Date */ 469 | .date { 470 | margin-top: 0; 471 | font-size: 0.85rem; 472 | } 473 | 474 | /* Notes and warnings */ 475 | .note { 476 | border-left: 0.5rem solid; 477 | font-size: 0.85rem; 478 | } 479 | .note .sign { 480 | height: 2.25rem; 481 | width: 2.25rem; 482 | } 483 | .note > div { 484 | margin-left: 0.75rem; 485 | } 486 | .note > div > img:first-child { 487 | height: 1.5rem; 488 | } 489 | .note > div >:first-child + * { 490 | margin-top: 0; 491 | } 492 | .note.warning { 493 | border-left: 0; 494 | background-image: url(css/images/stripe.svg); 495 | background-size: 0.5rem auto; 496 | background-repeat: repeat-y; 497 | } 498 | .note.warning > div { 499 | margin-left: 1.25rem; 500 | } 501 | 502 | /* Tick lists */ 503 | .ticks li { 504 | list-style: none; 505 | position: relative; 506 | } 507 | .ticks li::before { 508 | content: ''; 509 | display: inline-block; 510 | width: 1rem; 511 | height: 1rem; 512 | margin-right: 0.25rem; 513 | background-image: url(css/images/icon-tick.svg); 514 | background-size: 100% auto; 515 | position: absolute; 516 | left: -1.25rem; 517 | top: 0.25rem; 518 | } 519 | 520 | /* Figures */ 521 | figure { 522 | text-align: center; 523 | } 524 | figcaption { 525 | font-size: 0.85rem; 526 | font-style: italic; 527 | margin-top: 0.5rem; 528 | } 529 | main { 530 | display: block; 531 | counter-reset: fig; 532 | min-height: 100vh; 533 | } 534 | figcaption::before { 535 | counter-increment: fig; 536 | content: 'Figure ' counter(fig) ':\0020'; 537 | font-weight: bold; 538 | } 539 | 540 | /* Code blocks */ 541 | pre[class*=language-] { 542 | background: none; 543 | margin-top: 2.25rem; 544 | margin-bottom: 0; 545 | overflow-y: hidden; 546 | overflow-x: auto; 547 | } 548 | code[class*="language-"], pre[class*="language-"] { 549 | text-shadow: none; 550 | /* filter: grayscale(100%); */ 551 | } 552 | pre[class*=language-][data-line] { 553 | padding: 1em 0 0 2.25rem; 554 | } 555 | pre[class*=language-] code * { 556 | margin-top: 0 !important; 557 | } 558 | [data-codeblock-shortcode], .code-annotated code { 559 | display: inline-block; 560 | margin-top: -1rem; 561 | } 562 | .code-annotated { 563 | overflow-y: hidden; 564 | overflow-x: auto; 565 | padding: 1.5rem; 566 | border: 1px solid; 567 | white-space: pre; 568 | counter-reset: annotation; 569 | } 570 | .highlight { 571 | background: #ddd; 572 | padding: 0.0625rem 0.33rem; 573 | border-radius: 0.5rem; 574 | } 575 | .numbered .highlight::after, 576 | .code-annotated.numbered + ol li::before { 577 | counter-increment: annotation; 578 | content: counter(annotation); 579 | font-weight: bold; 580 | font-size: 0.5rem; 581 | background: #111; 582 | color: #fefefe; 583 | border-radius: 1rem; 584 | margin-left: 0.25rem; 585 | padding: 0.125em 0.5em; 586 | vertical-align: 0.33em; 587 | } 588 | .code-annotated.numbered + ol { 589 | list-style: none; 590 | counter-reset: annotation; 591 | } 592 | .code-annotated.numbered + ol li::before { 593 | font-size: 0.66em; 594 | margin-right: 0.33em; 595 | vertical-align: 0.25em; 596 | } 597 | 598 | /* File tree lists */ 599 | .file-tree { 600 | overflow-x: auto; 601 | } 602 | .file-tree ul { 603 | font-family: Courier, monospace; 604 | margin: 0; 605 | padding: 0; 606 | padding-left: 3rem; 607 | list-style: none; 608 | line-height: 1.25; 609 | position: relative; 610 | } 611 | .file-tree > ul { 612 | padding-left: 0; 613 | overflow-x: auto; 614 | overflow-y: hidden; 615 | } 616 | .file-tree li { 617 | background: #fefefe; 618 | position: relative; 619 | white-space: nowrap; 620 | } 621 | .file-tree li + li { 622 | margin-top: 0; 623 | } 624 | .file-tree li:not(:last-child) > ul::before { 625 | content: '\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020'; 626 | position: absolute; 627 | left: 0; 628 | top: 0; 629 | bottom: 0; 630 | width: 1em; 631 | white-space: normal; 632 | } 633 | .file-tree li::before { 634 | content: '\251C\2500\2500\0020'; 635 | } 636 | .file-tree li:last-child::before { 637 | content: '\2514\2500\2500\0020'; 638 | } 639 | 640 | /* Expandable sections */ 641 | .expandable-section { 642 | border-top: 1px solid; 643 | border-bottom: 1px solid; 644 | padding: 0.75rem 0; 645 | } 646 | [id^="js-expandable-"] { 647 | margin: 0; 648 | padding: 1.5rem 0 0.75rem; 649 | } 650 | @media screen { 651 | .expandable-section + .expandable-section { 652 | margin-top: 0; 653 | border-top: 0; 654 | } 655 | } 656 | [data-expands] { 657 | text-align: left; 658 | color: #111; 659 | border: 0; 660 | background: none; 661 | width: 100%; 662 | padding: 0; 663 | margin: 0; 664 | display: flex; 665 | align-items: center; 666 | justify-content: space-between; 667 | cursor: pointer; 668 | } 669 | [data-expands] svg { 670 | margin-top: 0; 671 | width: 1em; 672 | height: 1em; 673 | } 674 | [data-expands][aria-expanded="true"] svg .up-strut { 675 | display: none; 676 | } 677 | [data-expands]:focus { 678 | outline: none; 679 | } 680 | p:empty { 681 | display: none; 682 | } 683 | *:not(p) + p:empty + p { 684 | margin-top: 2.25rem; 685 | } 686 | 687 | /* WCAG and principles */ 688 | .wcag li { 689 | font-size: 0.85em; 690 | } 691 | .principles p { 692 | font-size: 0.85rem; 693 | margin-top: 0.75rem; 694 | } 695 | .principles.with-desc > li + li, 696 | .wcag.with-desc > li + li { 697 | border-top: 1px solid; 698 | margin-top: 0.75rem; 699 | padding-top: 0.75rem; 700 | } 701 | 702 | /* Site errors */ 703 | .site-error { 704 | padding: 1.5rem; 705 | background: #efefef; 706 | } 707 | .site-error strong { 708 | color: #C83737; 709 | } 710 | 711 | /* SVG icons */ 712 | a svg, 713 | button svg, 714 | h1 svg, 715 | th svg, 716 | li > svg { 717 | height: 0.75em; 718 | width: 0.75em; 719 | margin-right: 0.25em; 720 | } 721 | h1 svg { 722 | margin-right: 0; 723 | width: 0.85em; 724 | height: 0.85em; 725 | } 726 | .wcag-icon { 727 | width: 1.25em; 728 | } 729 | .bookmark-icon { 730 | vertical-align: middle; 731 | } 732 | .link-icon { 733 | width: 0.75em; 734 | height: 0.75em; 735 | } 736 | .tags svg, .link-icon { 737 | vertical-align: middle; 738 | } 739 | .balloon-icon { 740 | width: 0.75em; 741 | margin-right: 0; 742 | } 743 | .print { 744 | white-space: nowrap; 745 | font-style: normal; 746 | } 747 | 748 | /* Color palettes */ 749 | .colors { 750 | display: flex; 751 | height: 5rem; 752 | margin: -0.25rem; 753 | list-style: none; 754 | flex-wrap: nowrap; 755 | } 756 | .colors li { 757 | margin: 0.25rem; 758 | flex: 1 0 auto; 759 | position: relative; 760 | } 761 | .colors span { 762 | line-height: 1; 763 | background-color: #111; 764 | color: #fefefe; 765 | font-size: 0.75rem; 766 | padding: 0.25rem; 767 | position: absolute; 768 | bottom: 0.25rem; 769 | right: 0.25rem; 770 | } 771 | 772 | /* Cross references */ 773 | .pattern-link { 774 | font-weight: bold; 775 | } 776 | 777 | /* Inline demos */ 778 | .demo-inner { 779 | border-top: 1px solid; 780 | border-bottom: 1px solid; 781 | padding: 1.5rem 0; 782 | position: relative; 783 | } 784 | [id^="js-demo-"] { 785 | all: initial; 786 | display: block; 787 | } 788 | 789 | /* Section links */ 790 | .h2-container { 791 | position: relative; 792 | font-size: 1.66rem; 793 | } 794 | .h2-container a { 795 | position: absolute; 796 | margin-top: 0; 797 | top: 0; 798 | line-height: 1; 799 | left: -1em; 800 | border: 0; 801 | } 802 | 803 | /* Single page layout */ 804 | .wrapper.print-version .main-and-footer { 805 | margin-left: 0; 806 | } 807 | .wrapper.print-version .intro-and-nav { 808 | position: static; 809 | border: 0; 810 | width: auto; 811 | text-align: center; 812 | display: flex; 813 | align-items: center; 814 | justify-content: center; 815 | } 816 | .wrapper.print-version main { 817 | min-height: 0; 818 | } 819 | .wrapper.print-version .library-desc { 820 | font-size: 1rem; 821 | } 822 | .wrapper.print-version .intro-and-nav > div { 823 | height: auto; 824 | } 825 | .wrapper.print-version #patterns-list { 826 | margin-left: 0; 827 | margin-top: 1.5rem; 828 | display: block; 829 | } 830 | .wrapper.print-version .toc { 831 | font-size: 1rem; 832 | } 833 | .wrapper.print-version .toc h2 { 834 | font-size: 1.66rem; 835 | } 836 | .wrapper.print-version #patterns-list h3 { 837 | font-size: 1.25rem; 838 | } 839 | .wrapper.print-version .patterns { 840 | margin-top: 0; 841 | } 842 | .pattern-section:not(:last-child) { 843 | padding-bottom: 2.25rem; 844 | border-bottom: 2px solid; 845 | } 846 | .pattern-section h1 { 847 | padding: 0 !important; 848 | } 849 | 850 | /* Custom 404 */ 851 | .custom-404 { 852 | text-align: center; 853 | } 854 | .custom-404 * { 855 | margin: 0; 856 | } 857 | .custom-404 svg { 858 | max-width: 100%; 859 | } 860 | 861 | /* Utilities */ 862 | .vh { 863 | clip: rect(1px, 1px, 1px, 1px); 864 | height: 1px; 865 | overflow: hidden; 866 | position: absolute; 867 | white-space: nowrap; 868 | width: 1px; 869 | } 870 | .gallery { 871 | display: flex; 872 | justify-content: center; 873 | } 874 | 875 | /* Media queries */ 876 | @media screen and (max-width: 45em) { 877 | body a { 878 | hyphens: auto; 879 | } 880 | [role="banner"] { 881 | position: static; 882 | width: auto; 883 | height: auto; 884 | } 885 | .intro { 886 | text-align: center; 887 | } 888 | .intro-and-nav { 889 | border-right: none; 890 | } 891 | .intro-and-nav > div { 892 | padding: 1.5rem; 893 | } 894 | .main-and-footer { 895 | margin: 0; 896 | } 897 | main { 898 | min-height: auto; 899 | } 900 | #patterns-list { 901 | margin-top: 0.5rem; 902 | border: 1px solid; 903 | } 904 | .patterns h3 { 905 | font-size: 1.5rem; 906 | padding: 1.5rem 1rem 0.75rem; 907 | } 908 | .patterns li:not(.pattern) { 909 | margin-top: 0; 910 | } 911 | .patterns ul ul { 912 | margin: 0; 913 | } 914 | .patterns li { 915 | margin-top: 0; 916 | } 917 | .pattern { 918 | font-size: 1rem; 919 | } 920 | .pattern a { 921 | padding: 1rem; 922 | } 923 | .pattern [aria-current] { 924 | clip-path: none; 925 | padding: 1rem; 926 | } 927 | .pattern + .pattern { 928 | border-top: 1px solid; 929 | margin-top: 0; 930 | } 931 | #menu-button { 932 | display: block; 933 | } 934 | #patterns-list { 935 | display: none; 936 | } 937 | .toc-link { 938 | display: none; 939 | } 940 | [aria-expanded="true"] + #patterns-list { 941 | display: block; 942 | } 943 | code { 944 | word-break: break-all; 945 | } 946 | } 947 | @media print { 948 | .wrapper:not(.print-version) .intro-and-nav, 949 | .wrapper:not(.print-version) [role="contentinfo"] { 950 | display: none; 951 | } 952 | .main-and-footer { 953 | margin-left: 0; 954 | } 955 | a { 956 | border: 0; 957 | } 958 | main a::after { 959 | content: " (" attr(href) ")"; 960 | word-break: break-word; 961 | } 962 | main nav a::after { 963 | content: ''; 964 | } 965 | .cmd code { 966 | background: #fefefe; 967 | color: #111; 968 | } 969 | pre code { 970 | white-space: pre-wrap !important; 971 | } 972 | .expandable-section { 973 | border: 0; 974 | padding: 0; 975 | } 976 | .expandable-section + p { 977 | margin-top: 0.75rem; 978 | } 979 | [id^="js-expandable-"] { 980 | display: block; 981 | } 982 | [data-expands] svg { 983 | display: none; 984 | } 985 | main *:not(.with-desc) { 986 | page-break-inside: avoid; 987 | } 988 | .note.warning { 989 | border-left: 0.5rem solid; 990 | background: none; 991 | } 992 | } 993 | @media (-ms-high-contrast: active) { 994 | img[src*=".svg"] { 995 | background: #fefefe; 996 | padding: 0.5rem; 997 | } 998 | .ticks li::before { 999 | content: '✓'; 1000 | background: none; 1001 | width: auto; 1002 | top: 0; 1003 | } 1004 | .note.warning { 1005 | border-left: 0.5rem solid; 1006 | background: none; 1007 | } 1008 | } 1009 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 36 | 37 | 38 | 39 | 40 | 41 | Cupper 42 | 43 | 44 | 45 | skip to content 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | W3C 55 | SVG 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 |
136 | 228 | 250 |
251 | 252 | 253 | 254 | 255 | 256 | 261 | 262 | 263 | 264 | 265 | 266 | -------------------------------------------------------------------------------- /docs/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | / 7 | 0 8 | 9 | 10 | 11 | /tags/ 12 | 0 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/tags/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 32 | 33 | 34 | 35 | Tags | Cupper 36 | 37 | 38 | 39 | skip to content 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | W3C 49 | SVG 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 |
130 | 222 | 247 |
248 | 249 | 250 | 251 | 252 | 253 | 258 | 259 | 260 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /docs/tags/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tags on Cupper 5 | /tags/ 6 | Recent content in Tags on Cupper 7 | Hugo -- gohugo.io 8 | en-us 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "{{ replace .Name "-" " " | title }}" 3 | date: {{ .Date }} 4 | draft: true 5 | --- 6 | 7 | -------------------------------------------------------------------------------- /src/config.toml: -------------------------------------------------------------------------------- 1 | baseURL = "http://log.fripig.tw" 2 | languageCode = "zh-TW" 3 | defaultContentLanguage = "zh-TW" 4 | title = "這邊只是備份" 5 | theme = "cupper-hugo-theme" 6 | googleAnalytics = "UA-51024970-3" 7 | disqusShortname = "fripig-article-log" 8 | 9 | 10 | [taxonomies] 11 | tag = "tags" 12 | 13 | [permalinks] 14 | post = "/:year/:month/:filename/" 15 | 16 | [imaging] 17 | quality = 99 18 | 19 | [params] 20 | description = "這邊主要目的是紀錄,並沒有做太多篩選的動作" 21 | homeMetaContent = "這邊主要目的是紀錄,並沒有做太多篩選的動作,想看篩選過的可以到,[twitter](https://twitter.com/fripig),不過也有些我的碎碎唸就是了" 22 | # For more date formats see https://gohugo.io/functions/format/ 23 | dateFormat = "Jan 2, 2006" 24 | codePenUser = "fripig" 25 | ISO8601 = "2006-01-02T15:04:05JST" 26 | author = "fripig" 27 | 28 | [menu] 29 | [[menu.nav]] 30 | name = "Home" 31 | url = "/" 32 | weight = 1 33 | [[menu.nav]] 34 | name = "Blog" 35 | url = "/post/" 36 | weight = 2 37 | [[menu.nav]] 38 | name = "Tags" 39 | url = "/tags/" 40 | weight = 3 41 | [[menu.nav]] 42 | name = "Log" 43 | url = "/log/" 44 | weight = 4 45 | [[menu.nav]] 46 | name = "RSS" 47 | url = "/index.xml" 48 | weight = 5 -------------------------------------------------------------------------------- /src/content/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: "2019-03-02T18:27:58+01:00" 3 | title: "首頁" 4 | --- 5 | 這邊主要目的是紀錄,並沒有做太多篩選的動作,想看篩選過的可以到,[twitter](https://twitter.com/fripig),不過也有些我的碎碎唸就是了 6 | 7 | -------------------------------------------------------------------------------- /src/content/log/2019/03/2019-03-10.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "2019-03-10 推薦文章" 3 | date: 2019-03-10 4 | tags: [mysql,javascript,python,爬蟲] 5 | --- 6 | ### [【译】MySQL挑战:建立10万连接](https://juejin.im/post/5c83cf6c5188257deb5c8586) 7 | 雖然遇到的機會不大 8 | 但是會調的參數還算是蠻常遇到的 9 | 10 | ### [PathFinding.js](https://qiao.github.io/PathFinding.js/visual/) 11 | 視覺呈現看起來很有趣 12 | 13 | ### [CriseLYJ/awesome-python-login-model](https://github.com/CriseLYJ/awesome-python-login-model) 14 | 算是可以研究一些爬蟲的範例 -------------------------------------------------------------------------------- /src/content/log/2019/03/2019-03-11.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "2019-03-11 推薦文章" 3 | date: 2019-03-11 4 | tags: [vue,laravel,elasticsearch,yaml,xml,vuex] 5 | --- 6 | ### [程序员写简历时必须注意的技术词汇拼写(持续更新...)](https://mp.weixin.qq.com/s/6fClr87-2AJygzrs7cVa2Q) 7 | 其實個人覺得溝通會懂就好 8 | 老是挑這類問題對溝通沒啥幫助 9 | 10 | ### [尤雨溪谈 Vue.js :缔造自由与真我](https://juejin.im/post/5c8628306fb9a049ae08b867) 11 | 如果初學者問我要學哪套前端framework 12 | 我都會先推薦vue 13 | 14 | ### [Laravel 下 Elasticsearch 使用](https://learnku.com/articles/25179) 15 | 接下來可能會用到 所以備用 16 | 17 | ### [yq: Command-line YAML/XML processor](https://yq.readthedocs.io/en/latest/) 18 | 跟jq一樣是備而不用的東西 19 | 20 | ### [Vuex Unit Test:Action](https://oomusou.io/vue/unit-test/vuex/action/) 21 | 難得有範例 -------------------------------------------------------------------------------- /src/content/log/2019/03/2019-03-12.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "2019-03-12 推薦文章" 3 | date: 2019-03-12 4 | tags: [vue,elasticsearch,AWS,MySQL,Docker] 5 | --- 6 | 7 | ### [干货 | Elasticsearch方案选型必须了解的10件事!](https://mp.weixin.qq.com/s/gCLtW0oGYSe6nd4cazxb2g) 8 | 內容簡潔 有講到重點 9 | 不過原因還是要自己補一下 10 | 11 | ### [vue-cli3 项目框架优化(OneLine周分享)](https://juejin.im/post/5c85af5de51d451a5a520021) 12 | vue-cli3建立出來的環境還是要微調才會更緊湊 13 | 讓網頁讀取更快的 14 | 15 | ### [AWS 對 Elastic Stack 實作免費的開源版本 Open Distro for Elasticsearch](https://blog.gslin.org/archives/2019/03/12/8806/aws-%E5%B0%8D-elastic-stack-%E5%AF%A6%E4%BD%9C%E5%85%8D%E8%B2%BB%E7%9A%84%E9%96%8B%E6%BA%90%E7%89%88%E6%9C%AC-open-distro-for-elasticsearch/) 16 | 期待 17 | 18 | ### [MySQL 避坑宝典 -- 来自小米的开源工具](https://learnku.com/articles/25270) 19 | 整理了不少實用的小訣竅 20 | 適合沒時間的人看 21 | 22 | ### [Docker volumes not mounted when using docker:dind](https://gitlab.com/gitlab-org/gitlab-ce/issues/41227) 23 | 解決怎麼在gitlab-ci 使用 docker in docker mount的設定 24 | -------------------------------------------------------------------------------- /src/content/log/2019/03/2019-03-13.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "2019-03-13 推薦文章" 3 | date: 2019-03-13 4 | tags: [laravel,python,linux,go,docker] 5 | --- 6 | 7 | ### [laravel 批次刪除job的作法](https://medium.com/@panjeh/laravel-delete-queued-jobs-using-redis-horizon-artisan-command-47c3527024e0) 8 | 可以指定queue去刪除還蠻方便的 9 | 但就個人使用上 是覺得應該找工具看能不能把指定queue的特定job migrate到其他的queue 10 | 這點之前還沒看到現成的 11 | 12 | ### [为什么Python不用设计模式?](https://mp.weixin.qq.com/s?__biz=MzAxOTc0NzExNg==&mid=2665515829&idx=1&sn=c5a7267b6575a975eedec94fe965a024&chksm=80d67376b7a1fa607b9cb003d01f04d3d6f25023f526ac80fdac0ea0fb290349e3d0b35907dd&token=634410754&lang=zh_CN#rd) 13 | 標題有點誇張啦 14 | 只是不同語言有不同解法而已 但核心概念是一樣的 15 | 另外本文是寫的蠻有趣的 16 | 17 | ### [影响Linux发展的四位天才黑客](https://juejin.im/post/5c889afdf265da2dcb67c0a3) 18 | 19 | ### [使用go mod结合docker分层缓存进行自动CI/CD](https://juejin.im/post/5c887c105188257edb45e5b1) 20 | -------------------------------------------------------------------------------- /src/content/log/2019/03/2019-03-14.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "2019-03-14 推薦文章" 3 | date: 2019-03-14 4 | tags: [firefox,editor,vue,vuex,test,mock,web,go] 5 | --- 6 | 7 | ### [Easily and securely share files from the command line. A fully featured Firefox Send client. ](https://github.com/timvisee/ffsend) 8 | 感覺可能會用到 9 | 10 | ### [code-server](https://github.com/codercom/code-server) 11 | 在公司內部架一個環境應急用好像蠻有趣的 12 | 13 | ### [如何在 Component 內 Mock Mutation ?](https://oomusou.io/vue/unit-test/vuex/mock-mutation/) 14 | 15 | ### [Web 应用安全性: 使用这些 HTTP 头保护 Web 应用](https://segmentfault.com/a/1190000018463035?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) 16 | 為了安全要設定的東西不少 17 | 18 | ### [golang防缓存击穿利器--singleflight](https://segmentfault.com/a/1190000018464029?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) 19 | -------------------------------------------------------------------------------- /src/content/log/2019/03/2019-03-15-md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "2019-03-15 推薦文章" 3 | date: 2019-03-15 4 | tags: [python,Jupyter,CICD,mysql,binlog] 5 | --- 6 | 7 | 1. [自学是门手艺](https://github.com/selfteaching/the-craft-of-selfteaching) 8 | 作者自學Python的過程寫成書 9 | 內容是用Jupyter寫的也蠻有趣的 10 | 可以直接跑Demo 11 | 12 | 2. [10 Steps to Set Up Your Python Project for Success](https://towardsdatascience.com/10-steps-to-set-up-your-python-project-for-success-14ff88b5d13) 13 | 一陣子沒寫python了 14 | 還是加減看看維持基本知識比較好 15 | 16 | 3. [把 MySQL 的 binlog 功能再拆出來的 mysql-ripple](https://blog.gslin.org/archives/2019/03/16/8833/%E6%8A%8A-mysql-%E7%9A%84-binlog-%E5%8A%9F%E8%83%BD%E5%86%8D%E6%8B%86%E5%87%BA%E4%BE%86%E7%9A%84-mysql-ripple/) 17 | 可以從binlog做出read only的master 18 | 感覺是蠻有趣的啦 19 | -------------------------------------------------------------------------------- /src/content/log/2019/03/2019-03-22.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "2019-03-22 推薦文章" 3 | date: 2019-03-22 4 | tags: [Istio,Gitlab CI,test,vue cli,laravel,git,react,web] 5 | --- 6 | 7 | ### [Istio1.1新特性之限制服务可见性](https://mp.weixin.qq.com/s/i57oi4YQbB7FvG9-pvcs1w) 8 | 昨天讀書會群組才看到別人討論而已 紀錄一下 9 | 10 | ### [Gitlab CI 与 Kubernetes 的结合-www.qikqiak.com|阳明的博客|Kubernetes|Docker|istio|Python|Golang|Cloud Native](https://www.qikqiak.com/post/gitlab-ci-k8s-cluster-feature/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) 11 | 個人認為gitlab-ci還是目前上手門檻比較低的CICD工具 12 | 13 | ### [自动化测试:六个值得参考的 Laravel 开源项目 - 掘金](https://juejin.im/post/5c94308c6fb9a070c11f8aed) 14 | 僅供參考 15 | 16 | ### [在 WebStorm 中,配置能够识别 Vue CLI 3 创建的项目的别名 alias @ - 掘金](https://juejin.im/post/5c9477ad6fb9a070ce31b050) 17 | 重點在留言 18 | [审查项目的-webpack-配置](https://cli.vuejs.org/zh/guide/webpack.html#%E5%AE%A1%E6%9F%A5%E9%A1%B9%E7%9B%AE%E7%9A%84-webpack-%E9%85%8D%E7%BD%AE) 19 | 看技術文章留言常會有些東西比本文還有用 20 | 21 | 22 | ### [手摸手教你让 Laravel 开发 API 更得心应手 | Laravel China 社区 - 高品质的 Laravel 开发者社区](https://learnku.com/articles/25947) 23 | 好長 24 | 有些想法值得參考 25 | 26 | ### [gitignore.io - Create Useful .gitignore Files For Your Project](https://gitignore.io/) 27 | 在沒用phpstorm的時候可以代替一下 28 | 29 | ### [React Training: React Router v5](https://reacttraining.com/blog/react-router-v5/#why-the-major-version-bump) 30 | 版本依賴沒弄好 31 | 32 | ### [Scaling webapps for newbs & non-techies](https://arcentry.com/blog/scaling-webapps-for-newbs-and-non-techies/) 33 | 大多網站都是這樣成長的吧 34 | 35 | ### [html - RegEx match open tags except XHTML self-contained tags - Stack Overflow](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) 36 | 很有趣的回答 37 | 38 | ### [Introduction to text manipulation on UNIX-based systems](https://www.ibm.com/developerworks/aix/library/au-unixtext/index.html) 39 | 看過一遍知道工具可以怎麼用還蠻不錯的 40 | 41 | ### [如何直接 Mock API Function ? | 點燈坊](https://oomusou.io/vue/unit-test/vuex/mock-api-function/) 42 | 參考參考 43 | 44 | ### [jakearchibald/idb: IndexedDB, but with promises](https://github.com/jakearchibald/idb) 45 | 備用 46 | 47 | ### [编写有弹性的组件 — Overreacted](https://overreacted.io/zh-hans/writing-resilient-components/) 48 | 今天才發現他有中文版 49 | 雖然不寫React 還是會看概念能不能搬過來用 50 | 51 | ### [Announcing fromfrom - a LINQ inspired library to transform sequences of data in JS. — Futurice](https://www.futurice.com/blog/announcing-fromfrom/) 52 | 在laravel裡面習慣用collection 這類工具還是覺得蠻有趣的 53 | -------------------------------------------------------------------------------- /src/content/log/2019/04/2019-04-01.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "2019-04-01 推薦文章" 3 | date: 2019-04-01 4 | tags: [mysql,css,html,pdf,vue,windows 10,awk] 5 | --- 6 | 7 | ### [关于技术选型方法论的探索](https://mp.weixin.qq.com/s/Z7jK8XnKnoY-FiP4inGjsA) 8 | 只有最適合 沒有最好 9 | 10 | ### [MySQL慢查询优化 - 文野](https://zhangcolin.github.io/2019/03/30/slow-optimization/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) 11 | 主要是拿來紀錄java的那個工具 12 | 13 | ### [纯CSS实现瀑布流,你会吗? - 掘金](https://juejin.im/post/5ca2014de51d4553c23e21f6) 14 | 記得之前跟問學長好像說很麻煩 15 | 看這個雨法好像還好 16 | 17 | ### [把HTML转成PDF的4个方案及实现方法 - 掘金](https://juejin.im/post/5ca1dc0251882543d569e075) 18 | 每次都會忘記這類工具 19 | 多紀錄幾次看會不會記得深一點 20 | 21 | 22 | ### [Vue.js + Tone.js 开发Web钢琴应用 - 掘金](https://juejin.im/post/5ca1d2f1e51d4509ea3d0518) 23 | 感覺有趣 24 | 25 | ### [Windows 10 無法 LISTEN Port 4200 與 Port 3000 的靈異事件整理 | The Will Will Web](https://blog.miniasp.com/post/2019/03/31/Ports-blocked-by-Windows-10-for-unknown-reason) 26 | 有種以前好像也撞過這個牆的感覺 27 | 28 | 29 | ### [使用 AWK 過濾不要的欄位 | Tsung's Blog](https://blog.longwin.com.tw/2019/04/linux-awk-filter-column-2019/) 30 | AWK真的很好用 -------------------------------------------------------------------------------- /src/content/post/2019/03/hugo.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "玩一下hugo跟travis" 3 | date: 2019-03-10 4 | tags: [hugo,docker,travis] 5 | --- 6 | 7 | 想說每天看的文章留於流水帳也不好 8 | 9 | 所以乾脆就在這個git弄個網站擺著也好 10 | 11 | 剛好最近看到有人說hugo編譯的很快 12 | 13 | 就順便拿來配合docker跟travis一起玩了 14 | 15 | >因為我懶的在我電腦弄golang的環境 16 | 所以用docker比較快 -------------------------------------------------------------------------------- /src/content/post/2019/04/hugo-disqus.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "終於把hugo加上disqus了" 3 | date: 2019-04-06 4 | tags: [hugo,disqus] 5 | --- 6 | 7 | 卡了很久 8 | 9 | 結果只是我沒注意到shortname跟Website Name是不一樣的 10 | 11 | 為了這個問題也順手加上GA跟search console 12 | 13 | 雖然應該沒人會看 14 | 15 | 但是也加個加減觀察一下 -------------------------------------------------------------------------------- /src/content/post/2019/08/linode.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "把linode上的mariadb資料 從ubuntu 1404 的主機 搬到ubuntu 1904下的mysql 5.7" 3 | date: 2019-08-21 4 | tags: [linode,mysql,ubuntu] 5 | --- 6 | 7 | ## 起因 8 | 昨天收到幫朋友管的網站從晚上就開始連不上的消息 9 | 10 | 中途發現mariadb的連線非常的慢 11 | 12 | 加上系統老舊很多以前試過的怪東西 13 | 14 | 想說與其把系統弄乾淨不如直接把資料搬出來 15 | 16 | 弄到一個乾淨的系統比較快 17 | 18 | 所以就用mysqldump把整個資料庫dump出來 19 | 20 | ```bash 21 | mysqldump -u root -p --all-databases > backup.sql; 22 | ``` 23 | > [參考來源](https://code.yidas.com/mysqldump/) 24 | 25 | 再用scp 複製到新主機 26 | ```bash 27 | scp backup.sql myuser@192.168.0.1:/path/file2 28 | ``` 29 | > [參考來源](https://blog.gtwang.org/linux/linux-scp-command-tutorial-examples/) 30 | 31 | 接著匯入已經裝好mysql 5.7的系統就好了 32 | 33 | ```bash 34 | # mysql -u root -p < backup.sql 35 | ``` 36 | > [參考來源](https://code.yidas.com/mysqldump/) 37 | 38 | 有時候與其釐清問題不如先快速恢復系統 39 | 40 | 因為在我把系統弄好以後才收到linode的通知信 41 | 42 | ``` 43 | Hello, 44 | 45 | 46 | Yesterday (August 20, 2019), we detected that there was an issue on the host on which your Linode resides. At around 15:00 (UTC -5), there was an emergency maintenance performed, resulting in short downtime for the Linodes on this host. Our administrators immediately acted upon this issue and the problem affecting your Linode's physical host has been resolved. No further action is required at this time. 47 | 48 | 49 | On your dashboard, you may notice that a reboot occurred on your Linode at around this timeframe that the emergency maintenance was performed. 50 | 51 | 52 | We understand downtime can be tough, so we would like to thank you for your patience and understanding throughout this emergency maintenance. We sincerely apologize for any inconvenience this may have caused. 53 | 54 | 55 | Please let us know if you have any additional questions or concerns. 56 | ``` 57 | -------------------------------------------------------------------------------- /src/content/post/2019/10/mdbook.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "將一堆markdown整合成一個pdf" 3 | date: 2019-10-26 4 | tags: [markdown,gitbook,mdbook,pdf] 5 | --- 6 | 前天試著解決gitbook不能直接輸出pdf的問題 7 | 找了一下別的工具 8 | 後來找到這個[mdbook](https://github.com/rust-lang-nursery/mdBook) 9 | 不過他也沒有輸出PDF的功能 10 | 後來嘗試了很久才發現打開它輸出的網頁版直接按列印就好了 11 | 不用技術解 12 | -------------------------------------------------------------------------------- /src/content/post/2020/linode-s3-cloudflare.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "linode Object Storage 對接cloudflare" 3 | date: 2020-07-10 4 | tags: [linode,對接cloudflare,s3] 5 | --- 6 | 7 | 因為最近的案子把主機架在linode上 8 | 9 | 所以就想說用用看linode的Object Storage看看 10 | 11 | 不過在使用上遇到一點小問題 12 | 13 | 連線跟上傳都沒啥問題 不過在接cloudflare的時候 14 | 15 | 老是遇到bucketnotfonud的問題 16 | 17 | 後來的解決方法就是建立一個跟網域一樣的bucket就好了 18 | 19 | 很詭異 但至少可以解 20 | -------------------------------------------------------------------------------- /src/layouts/404.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fripig/article_log/ae9dc89b11b28896ec4f0c38d47a0ecfd9d2dfea/src/layouts/404.html -------------------------------------------------------------------------------- /src/layouts/_default/baseof.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ partial "head.html" . }} 4 | 5 | skip to content 6 | {{ partial "svg.html" . }} 7 |
8 | {{ partial "header.html" . }} 9 | 15 |
16 | {{ partial "script.html" . }} 17 | {{ partial "google-analytics-async.html" . }} 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |

{{ .Title }}

4 | 18 |
19 | {{ end }} 20 | -------------------------------------------------------------------------------- /src/layouts/_default/single.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |

{{ .Title }}

4 | {{ .Content }} 5 |
6 | {{ end }} 7 | -------------------------------------------------------------------------------- /src/layouts/_default/terms.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |

{{ .Title }}

4 | 23 |
24 | {{ end }} 25 | -------------------------------------------------------------------------------- /src/layouts/index.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |

{{ .Title }}

4 | {{ .Content }} 5 | 6 | 20 | 21 | 22 |
23 | {{ end }} 24 | -------------------------------------------------------------------------------- /src/layouts/log/single.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |

4 | 7 | {{ .Title }} 8 |

9 |
10 | {{ $dateFormat := $.Site.Params.dateFormat | default "Jan 2, 2006" }} 11 | {{ .PublishDate.Format $dateFormat }} 12 |
13 | {{ with .Params.tags }} 14 |
15 | 16 | 26 |
27 | {{ end }} 28 | 29 | {{ if ne .Params.toc false }} 30 | {{ partial "toc" . }} 31 | {{ end }} 32 | {{ .Content }} 33 | {{ template "_internal/disqus.html" . }} 34 |
35 | {{ end }} 36 | -------------------------------------------------------------------------------- /src/layouts/partials/disqus-js-common.js: -------------------------------------------------------------------------------- 1 | // Remove button 2 | var disqusButton = document.getElementById('disqus-button'); 3 | disqusButton.parentNode.removeChild(disqusButton); 4 | // Un-hide comments 5 | var disqusComments = document.getElementById('disqus-comments'); 6 | disqusComments.style.display = 'block'; -------------------------------------------------------------------------------- /src/layouts/partials/disqus-js-main.js: -------------------------------------------------------------------------------- 1 | // Config 2 | var disqus_config = function () { 3 | this.page.url = "{{ .Permalink }}"; // Replace PAGE_URL with your page's canonical URL variable 4 | this.page.identifier = "{{ .Permalink }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable 5 | 6 | }; 7 | // Build and append comments 8 | var d = document; 9 | var s = d.createElement('script'); 10 | s.async = true; 11 | s.src = '//' + "{{ . }}" + '.disqus.com/embed.js'; 12 | s.setAttribute('data-timestamp', + new Date()); 13 | (d.head || d.body).appendChild(s); -------------------------------------------------------------------------------- /src/layouts/partials/disqus.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 17 | 18 | comments powered by Disqus -------------------------------------------------------------------------------- /src/layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/layouts/partials/google-analytics-async.html: -------------------------------------------------------------------------------- 1 | {{ if not .Site.IsServer }} 2 | {{ with .Site.GoogleAnalytics }} 3 | 8 | 9 | {{ end }} 10 | {{ end }} -------------------------------------------------------------------------------- /src/layouts/partials/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ .Hugo.Generator }} 7 | 8 | 9 | {{ if .IsHome }} 10 | {{ with .Site.Params.homeMetaContent }} 11 | 12 | {{ end }} 13 | {{ end }} 14 | {{ template "_internal/opengraph.html" . }} 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {{ $templateStyles := resources.Get "css/template-styles.css" }} 28 | {{ $styles := $templateStyles | resources.ExecuteAsTemplate "css/styles.css" . }} 29 | 30 | 31 | 36 | 37 | {{ $title := print .Title " | " .Site.Title }} 38 | {{ if .IsHome }} 39 | {{ $title = .Site.Title }} 40 | {{ end }} 41 | {{ with .Params.tags }} 42 | {{ $title = print $title " | " }} 43 | {{ range . }} 44 | {{ $title = print $title "(" . ")" }} 45 | {{ end }} 46 | {{ end }} 47 | {{ $title }} 48 | 49 | {{ partial "jsonld.html" . }} 50 | 51 | -------------------------------------------------------------------------------- /src/layouts/partials/header.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/layouts/partials/jsonld.html: -------------------------------------------------------------------------------- 1 | {{ "" | safeHTML }} 2 | {{ if .IsPage }} 3 | {{ if in "post log" .Type }} 4 | 35 | {{ end }} 36 | {{ end }} 37 | {{ "" | safeHTML }} -------------------------------------------------------------------------------- /src/layouts/partials/nav.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/layouts/partials/script.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/layouts/partials/toc.html: -------------------------------------------------------------------------------- 1 | {{ $headings := findRE "(.|\n])+?" .Content }} 2 | {{ if ge (len $headings) 2 }} 3 | 19 | {{ end }} 20 | -------------------------------------------------------------------------------- /src/layouts/post/single.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |

4 | 7 | {{ .Title }} 8 |

9 |
10 | {{ $dateFormat := $.Site.Params.dateFormat | default "Jan 2, 2006" }} 11 | {{ .PublishDate.Format $dateFormat }} 12 |
13 | {{ with .Params.tags }} 14 |
15 | 16 |
    17 | {{ range . }} 18 |
  • 19 | 22 | {{ . }} 23 |
  • 24 | {{ end }} 25 |
26 |
27 | {{ end }} 28 | 29 | {{ if ne .Params.toc false }} 30 | {{ partial "toc" . }} 31 | {{ end }} 32 | {{ .Content }} 33 | {{ template "_internal/disqus.html" . }} 34 |
35 | {{ end }} 36 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/blockquote.html: -------------------------------------------------------------------------------- 1 | {{ $quote := .Inner }} 2 | 3 |
4 |

5 | {{ $quote | markdownify }} 6 | {{ with (.Get "author") }} 7 |
8 | — {{ . }} 9 | {{ end }} 10 |

11 |
-------------------------------------------------------------------------------- /src/layouts/shortcodes/cmd.html: -------------------------------------------------------------------------------- 1 |
{{ trim .Inner "\n" }}
2 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/code.html: -------------------------------------------------------------------------------- 1 | {{ $code := .Inner | htmlEscape }} 2 | {{ $code := replace $code "[[[" "" }} 3 | {{ $code := replace $code "]]]" "" }} 4 | {{ $numbered := .Get "numbered" }} 5 |
{{ $code | safeHTML }}
6 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/codePen.html: -------------------------------------------------------------------------------- 1 | {{ $pen := .Get 0 }} 2 | {{ with .Site.Params.codePenUser }} 3 | 8 | {{ else }} 9 |

Site error: The codePenUser param has not been set in config.toml

10 | {{ end }} 11 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/colors.html: -------------------------------------------------------------------------------- 1 | {{ $colorString := replace (.Get 0) " " "" | upper }} 2 | {{ $colors := split $colorString "," }} 3 |
4 | 11 |
12 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/expandable.html: -------------------------------------------------------------------------------- 1 |
2 | {{ if .Get "level" }} 3 | 4 | {{ end }} 5 | 14 | {{ if .Get "level" }} 15 | 16 | {{ end }} 17 |
18 | {{ .Inner }} 19 |
20 |
21 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/figure.html: -------------------------------------------------------------------------------- 1 | {{ $img := .Get "img" }} 2 | {{ $caption := .Get "caption" }} 3 | {{ $command := .Get "command" }} 4 | {{ $options := .Get "options" }} 5 | 6 | {{ $original := .Page.Resources.GetMatch (printf "*%s*" $img) }} 7 | {{ $new := "" }} 8 | 9 | {{ if eq $command "Fit" }} 10 | {{ $new = $original.Fit $options }} 11 | {{ else if eq $command "Fill" }} 12 | {{ $new = $original.Fill $options }} 13 | {{ else if eq $command "Resize" }} 14 | {{ $new = $original.Resize $options }} 15 | {{ else if eq $command "Original" }} 16 | {{ $new = $original }} 17 | {{ else }} 18 | {{ errorf "Invalid image processing command: Must be one of Fit, Fill, Resize, Original." }} 19 | {{ end }} 20 | 21 |
22 | 23 | 24 | 25 |
26 | {{ $caption | markdownify }} 27 |
28 |
29 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/fileTree.html: -------------------------------------------------------------------------------- 1 |
2 | {{ .Inner }} 3 |
4 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/gallery.html: -------------------------------------------------------------------------------- 1 | {{ $command := .Get "command" }} 2 | {{ $options := .Get "options" }} 3 | 4 | {{ with .Page.Resources.ByType "image" }} 5 | {{ range . }} 6 | 7 | {{ $original := . }} 8 | {{ $new := "" }} 9 | 10 | {{ if eq $command "Fit" }} 11 | {{ $new = $original.Fit $options }} 12 | {{ else if eq $command "Fill" }} 13 | {{ $new = $original.Fill $options }} 14 | {{ else if eq $command "Resize" }} 15 | {{ $new = $original.Resize $options }} 16 | {{ else if eq $command "Original" }} 17 | {{ $new = $original }} 18 | {{ else }} 19 | {{ errorf "Invalid image processing command: Must be one of Fit, Fill, Resize, Original." }} 20 | {{ end }} 21 | 22 | 27 | 28 | {{ end }} 29 | {{ end }} 30 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/note.html: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/principles.html: -------------------------------------------------------------------------------- 1 | {{ $JSON := $.Site.Data.principles }} 2 | {{ $included := replace (.Get "include") ", " "," }} 3 | {{ $included := apply (split $included ",") "lower" "." }} 4 | {{ $descriptions := .Get "descriptions" }} 5 | 25 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/tested.html: -------------------------------------------------------------------------------- 1 | {{ $tested := replace (.Get "using") ", " "," }} 2 | {{ $tested := replace $tested " + " "+" }} 3 | {{ $tested := split $tested "," }} 4 | 5 | 6 | 12 | {{ range $tested }} 13 | 26 | {{ end }} 27 | 28 |
7 | 10 | Tested using 11 | 14 | {{ $browser := findRE "^[a-zA-Z ]+" . }} 15 | {{ $browser := index $browser 0 }} 16 | {{ $version := findRE "[0-9]+$" . }} 17 | {{ $slug := replace $browser " " "-" | lower }} 18 | 19 | {{ $browser }} {{ index $version 0 }} 20 | {{ if in . "+" }} 21 | {{ $parts := split . "+" }} 22 | {{ $additional := index $parts 1 }} 23 | with {{ $additional }} 24 | {{ end }} 25 |
29 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/ticks.html: -------------------------------------------------------------------------------- 1 |
2 | {{ .Inner }} 3 |
4 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/warning.html: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/layouts/shortcodes/wcag.html: -------------------------------------------------------------------------------- 1 | {{ $JSON := $.Site.Data.wcag }} 2 | {{ $included := replace (.Get "include") ", " "," }} 3 | {{ $included := split $included "," }} 4 | {{ $descriptions := .Get "descriptions" }} 5 | 31 | -------------------------------------------------------------------------------- /src/resources/_gen/assets/css/css/template-styles.css_c2e18c145f3470d19843d012c882b388.content: -------------------------------------------------------------------------------- 1 | /* Fonts */ 2 | @font-face { 3 | font-family: 'Miriam Libre'; 4 | src: url('http://127.0.0.1:8887/css/fonts/miriamlibre-bold.woff2') format('woff2'), url('http://127.0.0.1:8887/css/fonts/miriamlibre-bold.woff') format('woff'); 5 | font-weight: bold; 6 | font-style: normal; 7 | } 8 | *, 9 | *::before, 10 | *::after { 11 | font-family: inherit; 12 | background-color: inherit; 13 | color: inherit; 14 | margin: 0; 15 | padding: 0; 16 | box-sizing: border-box; 17 | } 18 | html { 19 | font-size: calc(1em + 0.33vw); 20 | font-family: Arial, Helvetica Neue, sans-serif; 21 | line-height: 1.5; 22 | color: #111; 23 | background-color: #fefefe; 24 | } 25 | template { 26 | display: none !important; 27 | } 28 | * + * { 29 | margin-top: 2.25rem; 30 | } 31 | br, 32 | dt, 33 | dd, 34 | th, 35 | td, 36 | option, 37 | [hidden] + *, 38 | li + li, 39 | body, 40 | .main-and-footer { 41 | margin-top: 0; 42 | } 43 | p + p { 44 | margin-top: 0.75rem; 45 | } 46 | .priority { 47 | margin-top: 0; 48 | } 49 | a { 50 | text-decoration: none; 51 | border-bottom: 1px solid; 52 | } 53 | abbr { 54 | text-decoration: none; 55 | cursor: help; 56 | border-bottom: 1px dashed; 57 | } 58 | img { 59 | max-width: 100%; 60 | max-height: 50vh; 61 | } 62 | .img-link { 63 | border-bottom: none; 64 | } 65 | p img { 66 | margin: 0.75rem 0; 67 | } 68 | figure p img { 69 | margin: 0; 70 | } 71 | :focus:not([tabindex="-1"]), 72 | [data-expands]:focus svg, 73 | .patterns a:focus .text, 74 | [for="themer"] :focus + [aria-hidden] { 75 | outline: 4px solid #999; 76 | } 77 | a { 78 | outline-offset: 2px; 79 | } 80 | 81 | /* Fix for IE :( */ 82 | [tabindex="-1"]:focus, 83 | div:not([tabindex]):focus { 84 | outline: none; 85 | } 86 | [hidden] { 87 | display: none; 88 | } 89 | 90 | /* Skip link */ 91 | [href="#main"] { 92 | display: block; 93 | width: 100%; 94 | padding: 0.75rem; 95 | color: #fefefe; 96 | background: #000; 97 | position: absolute; 98 | top: -3rem; 99 | text-align: center; 100 | z-index: 1; 101 | } 102 | [href="#main"]:focus { 103 | top: 0; 104 | outline: none; 105 | } 106 | 107 | /* Text styles */ 108 | h1, 109 | h2, 110 | h3, 111 | h4 { 112 | font-family: Miriam Libre, serif; 113 | line-height: 1.125; 114 | } 115 | h1 { 116 | font-size: 2rem; 117 | } 118 | h2 { 119 | font-size: 1.66rem; 120 | } 121 | h3 { 122 | font-size: 1.25rem; 123 | } 124 | h4, 125 | h5 { 126 | font-size: 1rem; 127 | font-family: PT Sans, sans-serif; 128 | } 129 | h5 { 130 | font-size: 0.85rem; 131 | text-transform: uppercase; 132 | } 133 | kbd { 134 | line-height: 1; 135 | font-size: 0.66rem; 136 | padding: 0.1rem 0.33rem; 137 | border-radius: 0.25rem; 138 | border: 2px solid; 139 | box-shadow: 0.125rem 0.125rem 0 #111; 140 | vertical-align: 0.33em; 141 | } 142 | pre, 143 | .file-tree { 144 | overflow-x: auto; 145 | padding: 1.5rem; 146 | border: 1px solid; 147 | } 148 | code { 149 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 150 | font-size: 0.85em; 151 | } 152 | .cmd { 153 | padding: 0.75rem; 154 | background: #111; 155 | } 156 | .cmd code { 157 | color: #fefefe; 158 | white-space: nowrap; 159 | } 160 | .cmd code::before { 161 | content: '$'; 162 | font-weight: bold; 163 | padding-right: 0.25em; 164 | } 165 | 166 | /* Lists */ 167 | main ul, 168 | main ol { 169 | margin-left: 2.25rem; 170 | } 171 | main li + li { 172 | margin-top: 0.5rem; 173 | } 174 | main ul ul, main ol ol, main li ul, main li ol { 175 | margin-top: 0.5rem; 176 | } 177 | ol ol { 178 | list-style: lower-latin; 179 | } 180 | ol ol ol { 181 | list-style: lower-roman; 182 | } 183 | main dt { 184 | font-weight: bold; 185 | } 186 | main dd { 187 | padding-left: 2rem; 188 | } 189 | dd ul { 190 | margin-left: 0; 191 | } 192 | dd li + li { 193 | margin: 0; 194 | } 195 | 196 | /* Blockquotes */ 197 | blockquote { 198 | border-left: 0.5rem solid; 199 | padding-left: 0.75rem; 200 | } 201 | blockquote .author { 202 | font-size: 0.85rem; 203 | } 204 | 205 | /* Buttons */ 206 | button { 207 | font-size: 1.25rem; 208 | border-radius: 0.33em; 209 | font-family: inherit; 210 | background: #111; 211 | color: #fefefe; 212 | padding: 0.75rem; 213 | border: 0; 214 | } 215 | [data-launch] { 216 | font-size: 0.66rem !important; 217 | padding: 0.5rem !important; 218 | margin-top: 0 !important; 219 | border-radius: 0 !important; 220 | border-top-left-radius: 0.33rem !important; 221 | box-shadow: none !important; 222 | background: #111 !important; 223 | color: #fefefe !important; 224 | position: absolute !important; 225 | right: 0 !important; 226 | bottom: 0 !important; 227 | } 228 | 229 | /* Forms */ 230 | label { 231 | display: inline-block; 232 | font-weight: bold; 233 | } 234 | [for="themer"] { 235 | background: #111; 236 | border-radius: 0.33em; 237 | color: #fefefe; 238 | padding: 0.25em 0.75em; 239 | margin: 0.5rem; 240 | } 241 | [for="themer"] [aria-hidden]::before { 242 | content: 'off'; 243 | } 244 | [for="themer"] :checked + [aria-hidden]::before { 245 | content: 'on'; 246 | } 247 | 248 | /* Tables */ 249 | table { 250 | text-align: left; 251 | table-layout: fixed; 252 | width: 100%; 253 | border-collapse: collapse; 254 | } 255 | th, 256 | td { 257 | border: 2px solid; 258 | padding: 0.5rem; 259 | line-height: 1.25; 260 | margin: 0; 261 | } 262 | th { 263 | font-weight: bold; 264 | } 265 | th:empty { 266 | border: 0; 267 | } 268 | 269 | /* Tested using... table */ 270 | .tested { 271 | text-align: center; 272 | border: 1px solid #111; 273 | } 274 | .tested tr { 275 | display: flex; 276 | flex-flow: row wrap; 277 | } 278 | .tested td, .tested th { 279 | vertical-align: middle; 280 | overflow: hidden; 281 | flex: 1 0 auto; 282 | border: 1px solid #111; 283 | } 284 | .tested th { 285 | width: 100%; 286 | background-color: #111; 287 | color: #fefefe; 288 | outline-color: #111; 289 | } 290 | .tested img { 291 | max-width: 3rem; 292 | } 293 | .tested span { 294 | display: block; 295 | margin: 0; 296 | } 297 | .tested .additional { 298 | font-size: 0.85rem; 299 | } 300 | caption { 301 | font-size: 1.125rem; 302 | padding-bottom: 0.25rem; 303 | font-style: italic; 304 | } 305 | 306 | /* Page structure */ 307 | .wrapper { 308 | position: relative; 309 | margin-top: 0; 310 | overflow-x: hidden; 311 | } 312 | .intro-and-nav { 313 | font-size: 0.8rem; 314 | width: 15rem; 315 | height: 100vh; 316 | position: fixed; 317 | top: 0; 318 | left: 0; 319 | border-right: 2px solid; 320 | } 321 | .intro-and-nav > div { 322 | padding: 2.25rem; 323 | display: flex; 324 | flex-direction: column; 325 | height: 100%; 326 | } 327 | .intro { 328 | flex: 0 0 auto; 329 | } 330 | .patterns { 331 | flex: 1 1 auto; 332 | } 333 | .logo { 334 | border: 0; 335 | } 336 | .logo img { 337 | width: 100%; 338 | max-width: 12rem; 339 | } 340 | .library-desc { 341 | margin-top: 0.5rem; 342 | margin-left: auto; 343 | margin-right: auto; 344 | max-width: 25rem; 345 | } 346 | .main-and-footer { 347 | margin-left: 15rem; 348 | } 349 | .main-and-footer > div { 350 | max-width: 40rem; 351 | margin: 0 auto; 352 | padding: 2.25rem; 353 | } 354 | [role="contentinfo"] { 355 | font-size: 0.85rem; 356 | margin-top: 4rem; 357 | text-align: center; 358 | } 359 | 360 | /* Patterns navigation */ 361 | .patterns { 362 | overflow: auto; 363 | margin-top: 1.5rem; 364 | } 365 | .patterns * { 366 | margin-top: 0; 367 | } 368 | .patterns h3 { 369 | font-size: 1rem; 370 | } 371 | .patterns h3 + ul { 372 | margin-top: 0.75rem; 373 | } 374 | .patterns li { 375 | line-height: 1.125; 376 | list-style: none; 377 | } 378 | .patterns li + li { 379 | margin-top: 0.75rem; 380 | } 381 | .patterns ul ul { 382 | margin-left: 0.75rem; 383 | } 384 | .pattern a { 385 | border: 0; 386 | display: flex; 387 | flex-wrap: nowrap; 388 | align-items: baseline; 389 | font-weight: bold; 390 | padding: 0 1rem; 391 | } 392 | .pattern a:focus { 393 | outline: none; 394 | } 395 | .pattern span { 396 | margin-left: 0.125rem; 397 | } 398 | 399 | /* After */ 400 | .pattern [aria-current] { 401 | background-color: #111; 402 | clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%); 403 | color: #fefefe; 404 | padding-top: 0.5em; 405 | padding-bottom: 0.5em; 406 | } 407 | 408 | /* Menu button */ 409 | #menu-button { 410 | display: none; 411 | width: 100%; 412 | text-align: center; 413 | } 414 | #menu-button:focus { 415 | outline: none; 416 | box-shadow: inset 0 0 0 0.25rem #999; 417 | } 418 | 419 | /* Tables of contents */ 420 | .toc { 421 | font-size: 0.85rem; 422 | border: 1px solid; 423 | padding: 1.5rem; 424 | } 425 | .toc h2 { 426 | font-size: 1rem; 427 | } 428 | .toc ol { 429 | margin-left: 0.75rem; 430 | margin-top: 0.5rem; 431 | } 432 | 433 | /* Disqus Comments */ 434 | #disqus-container { 435 | font-size: 0.85rem; 436 | border: 1px solid; 437 | padding: 1.5rem; 438 | } 439 | #disqus-button { 440 | width: 100%; 441 | } 442 | #disqus-comments { 443 | display: none; 444 | } 445 | 446 | /* Pattern lists */ 447 | .patterns-list { 448 | list-style: none; 449 | margin-left: 0; 450 | } 451 | .patterns-list h2 { 452 | font-size: 1.25rem; 453 | line-height: 1.6; 454 | } 455 | .patterns-list li + li { 456 | margin-top: 1rem; 457 | padding-top: 1rem; 458 | border-top: 2px solid; 459 | } 460 | .patterns-list a { 461 | border: 0; 462 | } 463 | 464 | /* Tags */ 465 | .tags { 466 | margin-top: 0; 467 | font-size: 0.85rem; 468 | } 469 | .tags * { 470 | display: inline; 471 | margin: 0; 472 | } 473 | .tags strong { 474 | margin-right: 0.25rem; 475 | } 476 | .tags li { 477 | white-space: nowrap; 478 | margin: 0 0.25rem 0 0; 479 | } 480 | 481 | /* Date */ 482 | .date { 483 | margin-top: 0; 484 | font-size: 0.85rem; 485 | } 486 | 487 | /* Notes and warnings */ 488 | .note { 489 | border-left: 0.5rem solid; 490 | font-size: 0.85rem; 491 | } 492 | .note .sign { 493 | height: 2.25rem; 494 | width: 2.25rem; 495 | } 496 | .note > div { 497 | margin-left: 0.75rem; 498 | } 499 | .note > div > img:first-child { 500 | height: 1.5rem; 501 | } 502 | .note > div >:first-child + * { 503 | margin-top: 0; 504 | } 505 | .note.warning { 506 | border-left: 0; 507 | background-image: url(http://127.0.0.1:8887/css/images/stripe.svg); 508 | background-size: 0.5rem auto; 509 | background-repeat: repeat-y; 510 | } 511 | .note.warning > div { 512 | margin-left: 1.25rem; 513 | } 514 | 515 | /* Tick lists */ 516 | .ticks li { 517 | list-style: none; 518 | position: relative; 519 | } 520 | .ticks li::before { 521 | content: ''; 522 | display: inline-block; 523 | width: 1rem; 524 | height: 1rem; 525 | margin-right: 0.25rem; 526 | background-image: url(http://127.0.0.1:8887/css/images/icon-tick.svg); 527 | background-size: 100% auto; 528 | position: absolute; 529 | left: -1.25rem; 530 | top: 0.25rem; 531 | } 532 | 533 | /* Figures */ 534 | figure { 535 | text-align: center; 536 | } 537 | figcaption { 538 | font-size: 0.85rem; 539 | font-style: italic; 540 | margin-top: 0.5rem; 541 | } 542 | main { 543 | display: block; 544 | counter-reset: fig; 545 | min-height: 100vh; 546 | } 547 | figcaption::before { 548 | counter-increment: fig; 549 | content: 'Figure ' counter(fig) ':\0020'; 550 | font-weight: bold; 551 | } 552 | 553 | /* Code blocks */ 554 | pre[class*=language-] { 555 | background: none; 556 | margin-top: 2.25rem; 557 | margin-bottom: 0; 558 | overflow-y: hidden; 559 | overflow-x: auto; 560 | } 561 | code[class*="language-"], pre[class*="language-"] { 562 | text-shadow: none; 563 | /* filter: grayscale(100%); */ 564 | } 565 | pre[class*=language-][data-line] { 566 | padding: 1em 0 0 2.25rem; 567 | } 568 | pre[class*=language-] code * { 569 | margin-top: 0 !important; 570 | } 571 | [data-codeblock-shortcode], .code-annotated code { 572 | display: inline-block; 573 | margin-top: -1rem; 574 | } 575 | .code-annotated { 576 | overflow-y: hidden; 577 | overflow-x: auto; 578 | padding: 1.5rem; 579 | border: 1px solid; 580 | white-space: pre; 581 | counter-reset: annotation; 582 | } 583 | .highlight { 584 | background: #ddd; 585 | padding: 0.0625rem 0.33rem; 586 | border-radius: 0.5rem; 587 | } 588 | .numbered .highlight::after, 589 | .code-annotated.numbered + ol li::before { 590 | counter-increment: annotation; 591 | content: counter(annotation); 592 | font-weight: bold; 593 | font-size: 0.5rem; 594 | background: #111; 595 | color: #fefefe; 596 | border-radius: 1rem; 597 | margin-left: 0.25rem; 598 | padding: 0.125em 0.5em; 599 | vertical-align: 0.33em; 600 | } 601 | .code-annotated.numbered + ol { 602 | list-style: none; 603 | counter-reset: annotation; 604 | } 605 | .code-annotated.numbered + ol li::before { 606 | font-size: 0.66em; 607 | margin-right: 0.33em; 608 | vertical-align: 0.25em; 609 | } 610 | 611 | /* File tree lists */ 612 | .file-tree { 613 | overflow-x: auto; 614 | } 615 | .file-tree ul { 616 | font-family: Courier, monospace; 617 | margin: 0; 618 | padding: 0; 619 | padding-left: 3rem; 620 | list-style: none; 621 | line-height: 1.25; 622 | position: relative; 623 | } 624 | .file-tree > ul { 625 | padding-left: 0; 626 | overflow-x: auto; 627 | overflow-y: hidden; 628 | } 629 | .file-tree li { 630 | background: #fefefe; 631 | position: relative; 632 | white-space: nowrap; 633 | } 634 | .file-tree li + li { 635 | margin-top: 0; 636 | } 637 | .file-tree li:not(:last-child) > ul::before { 638 | content: '\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020'; 639 | position: absolute; 640 | left: 0; 641 | top: 0; 642 | bottom: 0; 643 | width: 1em; 644 | white-space: normal; 645 | } 646 | .file-tree li::before { 647 | content: '\251C\2500\2500\0020'; 648 | } 649 | .file-tree li:last-child::before { 650 | content: '\2514\2500\2500\0020'; 651 | } 652 | 653 | /* Expandable sections */ 654 | .expandable-section { 655 | border-top: 1px solid; 656 | border-bottom: 1px solid; 657 | padding: 0.75rem 0; 658 | } 659 | [id^="js-expandable-"] { 660 | margin: 0; 661 | padding: 1.5rem 0 0.75rem; 662 | } 663 | @media screen { 664 | .expandable-section + .expandable-section { 665 | margin-top: 0; 666 | border-top: 0; 667 | } 668 | } 669 | [data-expands] { 670 | text-align: left; 671 | color: #111; 672 | border: 0; 673 | background: none; 674 | width: 100%; 675 | padding: 0; 676 | margin: 0; 677 | display: flex; 678 | align-items: center; 679 | justify-content: space-between; 680 | cursor: pointer; 681 | } 682 | [data-expands] svg { 683 | margin-top: 0; 684 | width: 1em; 685 | height: 1em; 686 | } 687 | [data-expands][aria-expanded="true"] svg .up-strut { 688 | display: none; 689 | } 690 | [data-expands]:focus { 691 | outline: none; 692 | } 693 | p:empty { 694 | display: none; 695 | } 696 | *:not(p) + p:empty + p { 697 | margin-top: 2.25rem; 698 | } 699 | 700 | /* WCAG and principles */ 701 | .wcag li { 702 | font-size: 0.85em; 703 | } 704 | .principles p { 705 | font-size: 0.85rem; 706 | margin-top: 0.75rem; 707 | } 708 | .principles.with-desc > li + li, 709 | .wcag.with-desc > li + li { 710 | border-top: 1px solid; 711 | margin-top: 0.75rem; 712 | padding-top: 0.75rem; 713 | } 714 | 715 | /* Site errors */ 716 | .site-error { 717 | padding: 1.5rem; 718 | background: #efefef; 719 | } 720 | .site-error strong { 721 | color: #C83737; 722 | } 723 | 724 | /* SVG icons */ 725 | a svg, 726 | button svg, 727 | h1 svg, 728 | th svg, 729 | li > svg { 730 | height: 0.75em; 731 | width: 0.75em; 732 | margin-right: 0.25em; 733 | } 734 | h1 svg { 735 | margin-right: 0; 736 | width: 0.85em; 737 | height: 0.85em; 738 | } 739 | .wcag-icon { 740 | width: 1.25em; 741 | } 742 | .bookmark-icon { 743 | vertical-align: middle; 744 | } 745 | .link-icon { 746 | width: 0.75em; 747 | height: 0.75em; 748 | } 749 | .tags svg, .link-icon { 750 | vertical-align: middle; 751 | } 752 | .balloon-icon { 753 | width: 0.75em; 754 | margin-right: 0; 755 | } 756 | .print { 757 | white-space: nowrap; 758 | font-style: normal; 759 | } 760 | 761 | /* Color palettes */ 762 | .colors { 763 | display: flex; 764 | height: 5rem; 765 | margin: -0.25rem; 766 | list-style: none; 767 | flex-wrap: nowrap; 768 | } 769 | .colors li { 770 | margin: 0.25rem; 771 | flex: 1 0 auto; 772 | position: relative; 773 | } 774 | .colors span { 775 | line-height: 1; 776 | background-color: #111; 777 | color: #fefefe; 778 | font-size: 0.75rem; 779 | padding: 0.25rem; 780 | position: absolute; 781 | bottom: 0.25rem; 782 | right: 0.25rem; 783 | } 784 | 785 | /* Cross references */ 786 | .pattern-link { 787 | font-weight: bold; 788 | } 789 | 790 | /* Inline demos */ 791 | .demo-inner { 792 | border-top: 1px solid; 793 | border-bottom: 1px solid; 794 | padding: 1.5rem 0; 795 | position: relative; 796 | } 797 | [id^="js-demo-"] { 798 | all: initial; 799 | display: block; 800 | } 801 | 802 | /* Section links */ 803 | .h2-container { 804 | position: relative; 805 | font-size: 1.66rem; 806 | } 807 | .h2-container a { 808 | position: absolute; 809 | margin-top: 0; 810 | top: 0; 811 | line-height: 1; 812 | left: -1em; 813 | border: 0; 814 | } 815 | 816 | /* Single page layout */ 817 | .wrapper.print-version .main-and-footer { 818 | margin-left: 0; 819 | } 820 | .wrapper.print-version .intro-and-nav { 821 | position: static; 822 | border: 0; 823 | width: auto; 824 | text-align: center; 825 | display: flex; 826 | align-items: center; 827 | justify-content: center; 828 | } 829 | .wrapper.print-version main { 830 | min-height: 0; 831 | } 832 | .wrapper.print-version .library-desc { 833 | font-size: 1rem; 834 | } 835 | .wrapper.print-version .intro-and-nav > div { 836 | height: auto; 837 | } 838 | .wrapper.print-version #patterns-list { 839 | margin-left: 0; 840 | margin-top: 1.5rem; 841 | display: block; 842 | } 843 | .wrapper.print-version .toc { 844 | font-size: 1rem; 845 | } 846 | .wrapper.print-version .toc h2 { 847 | font-size: 1.66rem; 848 | } 849 | .wrapper.print-version #patterns-list h3 { 850 | font-size: 1.25rem; 851 | } 852 | .wrapper.print-version .patterns { 853 | margin-top: 0; 854 | } 855 | .pattern-section:not(:last-child) { 856 | padding-bottom: 2.25rem; 857 | border-bottom: 2px solid; 858 | } 859 | .pattern-section h1 { 860 | padding: 0 !important; 861 | } 862 | 863 | /* Custom 404 */ 864 | .custom-404 { 865 | text-align: center; 866 | } 867 | .custom-404 * { 868 | margin: 0; 869 | } 870 | .custom-404 svg { 871 | max-width: 100%; 872 | } 873 | 874 | /* Utilities */ 875 | .vh { 876 | clip: rect(1px, 1px, 1px, 1px); 877 | height: 1px; 878 | overflow: hidden; 879 | position: absolute; 880 | white-space: nowrap; 881 | width: 1px; 882 | } 883 | .gallery { 884 | display: flex; 885 | justify-content: center; 886 | } 887 | 888 | /* Media queries */ 889 | @media screen and (max-width: 45em) { 890 | body a { 891 | hyphens: auto; 892 | } 893 | [role="banner"] { 894 | position: static; 895 | width: auto; 896 | height: auto; 897 | } 898 | .intro { 899 | text-align: center; 900 | } 901 | .intro-and-nav { 902 | border-right: none; 903 | } 904 | .intro-and-nav > div { 905 | padding: 1.5rem; 906 | } 907 | .main-and-footer { 908 | margin: 0; 909 | } 910 | main { 911 | min-height: auto; 912 | } 913 | #patterns-list { 914 | margin-top: 0.5rem; 915 | border: 1px solid; 916 | } 917 | .patterns h3 { 918 | font-size: 1.5rem; 919 | padding: 1.5rem 1rem 0.75rem; 920 | } 921 | .patterns li:not(.pattern) { 922 | margin-top: 0; 923 | } 924 | .patterns ul ul { 925 | margin: 0; 926 | } 927 | .patterns li { 928 | margin-top: 0; 929 | } 930 | .pattern { 931 | font-size: 1rem; 932 | } 933 | .pattern a { 934 | padding: 1rem; 935 | } 936 | .pattern [aria-current] { 937 | clip-path: none; 938 | padding: 1rem; 939 | } 940 | .pattern + .pattern { 941 | border-top: 1px solid; 942 | margin-top: 0; 943 | } 944 | #menu-button { 945 | display: block; 946 | } 947 | #patterns-list { 948 | display: none; 949 | } 950 | .toc-link { 951 | display: none; 952 | } 953 | [aria-expanded="true"] + #patterns-list { 954 | display: block; 955 | } 956 | code { 957 | word-break: break-all; 958 | } 959 | } 960 | @media print { 961 | .wrapper:not(.print-version) .intro-and-nav, 962 | .wrapper:not(.print-version) [role="contentinfo"] { 963 | display: none; 964 | } 965 | .main-and-footer { 966 | margin-left: 0; 967 | } 968 | a { 969 | border: 0; 970 | } 971 | main a::after { 972 | content: " (" attr(href) ")"; 973 | word-break: break-word; 974 | } 975 | main nav a::after { 976 | content: ''; 977 | } 978 | .cmd code { 979 | background: #fefefe; 980 | color: #111; 981 | } 982 | pre code { 983 | white-space: pre-wrap !important; 984 | } 985 | .expandable-section { 986 | border: 0; 987 | padding: 0; 988 | } 989 | .expandable-section + p { 990 | margin-top: 0.75rem; 991 | } 992 | [id^="js-expandable-"] { 993 | display: block; 994 | } 995 | [data-expands] svg { 996 | display: none; 997 | } 998 | main *:not(.with-desc) { 999 | page-break-inside: avoid; 1000 | } 1001 | .note.warning { 1002 | border-left: 0.5rem solid; 1003 | background: none; 1004 | } 1005 | } 1006 | @media (-ms-high-contrast: active) { 1007 | img[src*=".svg"] { 1008 | background: #fefefe; 1009 | padding: 0.5rem; 1010 | } 1011 | .ticks li::before { 1012 | content: '✓'; 1013 | background: none; 1014 | width: auto; 1015 | top: 0; 1016 | } 1017 | .note.warning { 1018 | border-left: 0.5rem solid; 1019 | background: none; 1020 | } 1021 | } 1022 | -------------------------------------------------------------------------------- /src/resources/_gen/assets/css/css/template-styles.css_c2e18c145f3470d19843d012c882b388.json: -------------------------------------------------------------------------------- 1 | {"Target":"css/styles.css","MediaType":"text/css","Data":{}} --------------------------------------------------------------------------------