├── .gitignore ├── LICENSE ├── README.md ├── css ├── dist │ ├── bootstrap-grid.css │ ├── bootstrap-reboot.css │ ├── bootstrap.css │ ├── main.css │ └── main.css.map └── src │ ├── _comments.scss │ ├── _footer.scss │ ├── _header.scss │ ├── _jumbotron.scss │ ├── _sidebar.scss │ └── main.scss ├── favicon.ico ├── functions.php ├── gulpfile.js ├── index.php ├── js └── main.js ├── package.json ├── style.css └── templates ├── 404.php ├── _comment-form.php ├── _comments.php ├── _footer.php ├── _header.php ├── _nopost.php ├── _search-form.php ├── _sidebar.php ├── _theloop.php ├── archive.php ├── home.php ├── page.php ├── search.php └── single.php /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | nbproject/ 3 | node_modules/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Michael Soriano 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wp-vue-starter 2 | 3 | A basic WordPress (starter) theme that uses VueJS as the front-end rendering framework. Theme templates are Vue components and supports the loop, home, page, single, search, 404, paging and comments. Looks like a traditional "blog" and "Bootstrap" - which is serves as a good starting point for many projects. 4 | 5 | More information can be found in this post: http://michaelsoriano.com/wordpress-starter-theme-using-vuejs/ 6 | 7 | ## USES THE FOLLOWING 8 | 9 | - vuejs 10 | - vue-router 11 | - axios 12 | - bootstrap 4 (css) 13 | 14 | 15 | ## EDIT CSS DIRECTLY 16 | 17 | - open /css/dist/main.css 18 | - delete sourceMappingURL=main.css.map at the bottom of the file 19 | 20 | 21 | ## TO EDIT CSS USING SASS 22 | 23 | - npm init 24 | - npm i -g gulp-cli 25 | - npm i -D gulp gulp-sass gulp-sourcemaps gulp-clean-css 26 | - gulp watch 27 | - edit /css/src/main.scss 28 | 29 | ## TO EDIT THE JAVASCRIPT 30 | 31 | - open /js/main.js 32 | 33 | ## ROADMAP 34 | 35 | - Pagination - complete 36 | - Search - complete 37 | - 404 - complete 38 | - Comment Form - complete 39 | - Archive pages: tag, category 40 | - Header Menu - complete 41 | -------------------------------------------------------------------------------- /css/dist/bootstrap-grid.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Grid v4.0.0-beta.2 (https://getbootstrap.com) 3 | * Copyright 2011-2017 The Bootstrap Authors 4 | * Copyright 2011-2017 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | */ 7 | @-ms-viewport { 8 | width: device-width; 9 | } 10 | 11 | html { 12 | box-sizing: border-box; 13 | -ms-overflow-style: scrollbar; 14 | } 15 | 16 | *, 17 | *::before, 18 | *::after { 19 | box-sizing: inherit; 20 | } 21 | 22 | .container { 23 | width: 100%; 24 | padding-right: 15px; 25 | padding-left: 15px; 26 | margin-right: auto; 27 | margin-left: auto; 28 | } 29 | 30 | @media (min-width: 576px) { 31 | .container { 32 | max-width: 540px; 33 | } 34 | } 35 | 36 | @media (min-width: 768px) { 37 | .container { 38 | max-width: 720px; 39 | } 40 | } 41 | 42 | @media (min-width: 992px) { 43 | .container { 44 | max-width: 960px; 45 | } 46 | } 47 | 48 | @media (min-width: 1200px) { 49 | .container { 50 | max-width: 1140px; 51 | } 52 | } 53 | 54 | .container-fluid { 55 | width: 100%; 56 | padding-right: 15px; 57 | padding-left: 15px; 58 | margin-right: auto; 59 | margin-left: auto; 60 | } 61 | 62 | .row { 63 | display: -ms-flexbox; 64 | display: flex; 65 | -ms-flex-wrap: wrap; 66 | flex-wrap: wrap; 67 | margin-right: -15px; 68 | margin-left: -15px; 69 | } 70 | 71 | .no-gutters { 72 | margin-right: 0; 73 | margin-left: 0; 74 | } 75 | 76 | .no-gutters > .col, 77 | .no-gutters > [class*="col-"] { 78 | padding-right: 0; 79 | padding-left: 0; 80 | } 81 | 82 | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, 83 | .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, 84 | .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, 85 | .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, 86 | .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, 87 | .col-xl-auto { 88 | position: relative; 89 | width: 100%; 90 | min-height: 1px; 91 | padding-right: 15px; 92 | padding-left: 15px; 93 | } 94 | 95 | .col { 96 | -ms-flex-preferred-size: 0; 97 | flex-basis: 0; 98 | -ms-flex-positive: 1; 99 | flex-grow: 1; 100 | max-width: 100%; 101 | } 102 | 103 | .col-auto { 104 | -ms-flex: 0 0 auto; 105 | flex: 0 0 auto; 106 | width: auto; 107 | max-width: none; 108 | } 109 | 110 | .col-1 { 111 | -ms-flex: 0 0 8.333333%; 112 | flex: 0 0 8.333333%; 113 | max-width: 8.333333%; 114 | } 115 | 116 | .col-2 { 117 | -ms-flex: 0 0 16.666667%; 118 | flex: 0 0 16.666667%; 119 | max-width: 16.666667%; 120 | } 121 | 122 | .col-3 { 123 | -ms-flex: 0 0 25%; 124 | flex: 0 0 25%; 125 | max-width: 25%; 126 | } 127 | 128 | .col-4 { 129 | -ms-flex: 0 0 33.333333%; 130 | flex: 0 0 33.333333%; 131 | max-width: 33.333333%; 132 | } 133 | 134 | .col-5 { 135 | -ms-flex: 0 0 41.666667%; 136 | flex: 0 0 41.666667%; 137 | max-width: 41.666667%; 138 | } 139 | 140 | .col-6 { 141 | -ms-flex: 0 0 50%; 142 | flex: 0 0 50%; 143 | max-width: 50%; 144 | } 145 | 146 | .col-7 { 147 | -ms-flex: 0 0 58.333333%; 148 | flex: 0 0 58.333333%; 149 | max-width: 58.333333%; 150 | } 151 | 152 | .col-8 { 153 | -ms-flex: 0 0 66.666667%; 154 | flex: 0 0 66.666667%; 155 | max-width: 66.666667%; 156 | } 157 | 158 | .col-9 { 159 | -ms-flex: 0 0 75%; 160 | flex: 0 0 75%; 161 | max-width: 75%; 162 | } 163 | 164 | .col-10 { 165 | -ms-flex: 0 0 83.333333%; 166 | flex: 0 0 83.333333%; 167 | max-width: 83.333333%; 168 | } 169 | 170 | .col-11 { 171 | -ms-flex: 0 0 91.666667%; 172 | flex: 0 0 91.666667%; 173 | max-width: 91.666667%; 174 | } 175 | 176 | .col-12 { 177 | -ms-flex: 0 0 100%; 178 | flex: 0 0 100%; 179 | max-width: 100%; 180 | } 181 | 182 | .order-first { 183 | -ms-flex-order: -1; 184 | order: -1; 185 | } 186 | 187 | .order-1 { 188 | -ms-flex-order: 1; 189 | order: 1; 190 | } 191 | 192 | .order-2 { 193 | -ms-flex-order: 2; 194 | order: 2; 195 | } 196 | 197 | .order-3 { 198 | -ms-flex-order: 3; 199 | order: 3; 200 | } 201 | 202 | .order-4 { 203 | -ms-flex-order: 4; 204 | order: 4; 205 | } 206 | 207 | .order-5 { 208 | -ms-flex-order: 5; 209 | order: 5; 210 | } 211 | 212 | .order-6 { 213 | -ms-flex-order: 6; 214 | order: 6; 215 | } 216 | 217 | .order-7 { 218 | -ms-flex-order: 7; 219 | order: 7; 220 | } 221 | 222 | .order-8 { 223 | -ms-flex-order: 8; 224 | order: 8; 225 | } 226 | 227 | .order-9 { 228 | -ms-flex-order: 9; 229 | order: 9; 230 | } 231 | 232 | .order-10 { 233 | -ms-flex-order: 10; 234 | order: 10; 235 | } 236 | 237 | .order-11 { 238 | -ms-flex-order: 11; 239 | order: 11; 240 | } 241 | 242 | .order-12 { 243 | -ms-flex-order: 12; 244 | order: 12; 245 | } 246 | 247 | .offset-1 { 248 | margin-left: 8.333333%; 249 | } 250 | 251 | .offset-2 { 252 | margin-left: 16.666667%; 253 | } 254 | 255 | .offset-3 { 256 | margin-left: 25%; 257 | } 258 | 259 | .offset-4 { 260 | margin-left: 33.333333%; 261 | } 262 | 263 | .offset-5 { 264 | margin-left: 41.666667%; 265 | } 266 | 267 | .offset-6 { 268 | margin-left: 50%; 269 | } 270 | 271 | .offset-7 { 272 | margin-left: 58.333333%; 273 | } 274 | 275 | .offset-8 { 276 | margin-left: 66.666667%; 277 | } 278 | 279 | .offset-9 { 280 | margin-left: 75%; 281 | } 282 | 283 | .offset-10 { 284 | margin-left: 83.333333%; 285 | } 286 | 287 | .offset-11 { 288 | margin-left: 91.666667%; 289 | } 290 | 291 | @media (min-width: 576px) { 292 | .col-sm { 293 | -ms-flex-preferred-size: 0; 294 | flex-basis: 0; 295 | -ms-flex-positive: 1; 296 | flex-grow: 1; 297 | max-width: 100%; 298 | } 299 | .col-sm-auto { 300 | -ms-flex: 0 0 auto; 301 | flex: 0 0 auto; 302 | width: auto; 303 | max-width: none; 304 | } 305 | .col-sm-1 { 306 | -ms-flex: 0 0 8.333333%; 307 | flex: 0 0 8.333333%; 308 | max-width: 8.333333%; 309 | } 310 | .col-sm-2 { 311 | -ms-flex: 0 0 16.666667%; 312 | flex: 0 0 16.666667%; 313 | max-width: 16.666667%; 314 | } 315 | .col-sm-3 { 316 | -ms-flex: 0 0 25%; 317 | flex: 0 0 25%; 318 | max-width: 25%; 319 | } 320 | .col-sm-4 { 321 | -ms-flex: 0 0 33.333333%; 322 | flex: 0 0 33.333333%; 323 | max-width: 33.333333%; 324 | } 325 | .col-sm-5 { 326 | -ms-flex: 0 0 41.666667%; 327 | flex: 0 0 41.666667%; 328 | max-width: 41.666667%; 329 | } 330 | .col-sm-6 { 331 | -ms-flex: 0 0 50%; 332 | flex: 0 0 50%; 333 | max-width: 50%; 334 | } 335 | .col-sm-7 { 336 | -ms-flex: 0 0 58.333333%; 337 | flex: 0 0 58.333333%; 338 | max-width: 58.333333%; 339 | } 340 | .col-sm-8 { 341 | -ms-flex: 0 0 66.666667%; 342 | flex: 0 0 66.666667%; 343 | max-width: 66.666667%; 344 | } 345 | .col-sm-9 { 346 | -ms-flex: 0 0 75%; 347 | flex: 0 0 75%; 348 | max-width: 75%; 349 | } 350 | .col-sm-10 { 351 | -ms-flex: 0 0 83.333333%; 352 | flex: 0 0 83.333333%; 353 | max-width: 83.333333%; 354 | } 355 | .col-sm-11 { 356 | -ms-flex: 0 0 91.666667%; 357 | flex: 0 0 91.666667%; 358 | max-width: 91.666667%; 359 | } 360 | .col-sm-12 { 361 | -ms-flex: 0 0 100%; 362 | flex: 0 0 100%; 363 | max-width: 100%; 364 | } 365 | .order-sm-first { 366 | -ms-flex-order: -1; 367 | order: -1; 368 | } 369 | .order-sm-1 { 370 | -ms-flex-order: 1; 371 | order: 1; 372 | } 373 | .order-sm-2 { 374 | -ms-flex-order: 2; 375 | order: 2; 376 | } 377 | .order-sm-3 { 378 | -ms-flex-order: 3; 379 | order: 3; 380 | } 381 | .order-sm-4 { 382 | -ms-flex-order: 4; 383 | order: 4; 384 | } 385 | .order-sm-5 { 386 | -ms-flex-order: 5; 387 | order: 5; 388 | } 389 | .order-sm-6 { 390 | -ms-flex-order: 6; 391 | order: 6; 392 | } 393 | .order-sm-7 { 394 | -ms-flex-order: 7; 395 | order: 7; 396 | } 397 | .order-sm-8 { 398 | -ms-flex-order: 8; 399 | order: 8; 400 | } 401 | .order-sm-9 { 402 | -ms-flex-order: 9; 403 | order: 9; 404 | } 405 | .order-sm-10 { 406 | -ms-flex-order: 10; 407 | order: 10; 408 | } 409 | .order-sm-11 { 410 | -ms-flex-order: 11; 411 | order: 11; 412 | } 413 | .order-sm-12 { 414 | -ms-flex-order: 12; 415 | order: 12; 416 | } 417 | .offset-sm-0 { 418 | margin-left: 0; 419 | } 420 | .offset-sm-1 { 421 | margin-left: 8.333333%; 422 | } 423 | .offset-sm-2 { 424 | margin-left: 16.666667%; 425 | } 426 | .offset-sm-3 { 427 | margin-left: 25%; 428 | } 429 | .offset-sm-4 { 430 | margin-left: 33.333333%; 431 | } 432 | .offset-sm-5 { 433 | margin-left: 41.666667%; 434 | } 435 | .offset-sm-6 { 436 | margin-left: 50%; 437 | } 438 | .offset-sm-7 { 439 | margin-left: 58.333333%; 440 | } 441 | .offset-sm-8 { 442 | margin-left: 66.666667%; 443 | } 444 | .offset-sm-9 { 445 | margin-left: 75%; 446 | } 447 | .offset-sm-10 { 448 | margin-left: 83.333333%; 449 | } 450 | .offset-sm-11 { 451 | margin-left: 91.666667%; 452 | } 453 | } 454 | 455 | @media (min-width: 768px) { 456 | .col-md { 457 | -ms-flex-preferred-size: 0; 458 | flex-basis: 0; 459 | -ms-flex-positive: 1; 460 | flex-grow: 1; 461 | max-width: 100%; 462 | } 463 | .col-md-auto { 464 | -ms-flex: 0 0 auto; 465 | flex: 0 0 auto; 466 | width: auto; 467 | max-width: none; 468 | } 469 | .col-md-1 { 470 | -ms-flex: 0 0 8.333333%; 471 | flex: 0 0 8.333333%; 472 | max-width: 8.333333%; 473 | } 474 | .col-md-2 { 475 | -ms-flex: 0 0 16.666667%; 476 | flex: 0 0 16.666667%; 477 | max-width: 16.666667%; 478 | } 479 | .col-md-3 { 480 | -ms-flex: 0 0 25%; 481 | flex: 0 0 25%; 482 | max-width: 25%; 483 | } 484 | .col-md-4 { 485 | -ms-flex: 0 0 33.333333%; 486 | flex: 0 0 33.333333%; 487 | max-width: 33.333333%; 488 | } 489 | .col-md-5 { 490 | -ms-flex: 0 0 41.666667%; 491 | flex: 0 0 41.666667%; 492 | max-width: 41.666667%; 493 | } 494 | .col-md-6 { 495 | -ms-flex: 0 0 50%; 496 | flex: 0 0 50%; 497 | max-width: 50%; 498 | } 499 | .col-md-7 { 500 | -ms-flex: 0 0 58.333333%; 501 | flex: 0 0 58.333333%; 502 | max-width: 58.333333%; 503 | } 504 | .col-md-8 { 505 | -ms-flex: 0 0 66.666667%; 506 | flex: 0 0 66.666667%; 507 | max-width: 66.666667%; 508 | } 509 | .col-md-9 { 510 | -ms-flex: 0 0 75%; 511 | flex: 0 0 75%; 512 | max-width: 75%; 513 | } 514 | .col-md-10 { 515 | -ms-flex: 0 0 83.333333%; 516 | flex: 0 0 83.333333%; 517 | max-width: 83.333333%; 518 | } 519 | .col-md-11 { 520 | -ms-flex: 0 0 91.666667%; 521 | flex: 0 0 91.666667%; 522 | max-width: 91.666667%; 523 | } 524 | .col-md-12 { 525 | -ms-flex: 0 0 100%; 526 | flex: 0 0 100%; 527 | max-width: 100%; 528 | } 529 | .order-md-first { 530 | -ms-flex-order: -1; 531 | order: -1; 532 | } 533 | .order-md-1 { 534 | -ms-flex-order: 1; 535 | order: 1; 536 | } 537 | .order-md-2 { 538 | -ms-flex-order: 2; 539 | order: 2; 540 | } 541 | .order-md-3 { 542 | -ms-flex-order: 3; 543 | order: 3; 544 | } 545 | .order-md-4 { 546 | -ms-flex-order: 4; 547 | order: 4; 548 | } 549 | .order-md-5 { 550 | -ms-flex-order: 5; 551 | order: 5; 552 | } 553 | .order-md-6 { 554 | -ms-flex-order: 6; 555 | order: 6; 556 | } 557 | .order-md-7 { 558 | -ms-flex-order: 7; 559 | order: 7; 560 | } 561 | .order-md-8 { 562 | -ms-flex-order: 8; 563 | order: 8; 564 | } 565 | .order-md-9 { 566 | -ms-flex-order: 9; 567 | order: 9; 568 | } 569 | .order-md-10 { 570 | -ms-flex-order: 10; 571 | order: 10; 572 | } 573 | .order-md-11 { 574 | -ms-flex-order: 11; 575 | order: 11; 576 | } 577 | .order-md-12 { 578 | -ms-flex-order: 12; 579 | order: 12; 580 | } 581 | .offset-md-0 { 582 | margin-left: 0; 583 | } 584 | .offset-md-1 { 585 | margin-left: 8.333333%; 586 | } 587 | .offset-md-2 { 588 | margin-left: 16.666667%; 589 | } 590 | .offset-md-3 { 591 | margin-left: 25%; 592 | } 593 | .offset-md-4 { 594 | margin-left: 33.333333%; 595 | } 596 | .offset-md-5 { 597 | margin-left: 41.666667%; 598 | } 599 | .offset-md-6 { 600 | margin-left: 50%; 601 | } 602 | .offset-md-7 { 603 | margin-left: 58.333333%; 604 | } 605 | .offset-md-8 { 606 | margin-left: 66.666667%; 607 | } 608 | .offset-md-9 { 609 | margin-left: 75%; 610 | } 611 | .offset-md-10 { 612 | margin-left: 83.333333%; 613 | } 614 | .offset-md-11 { 615 | margin-left: 91.666667%; 616 | } 617 | } 618 | 619 | @media (min-width: 992px) { 620 | .col-lg { 621 | -ms-flex-preferred-size: 0; 622 | flex-basis: 0; 623 | -ms-flex-positive: 1; 624 | flex-grow: 1; 625 | max-width: 100%; 626 | } 627 | .col-lg-auto { 628 | -ms-flex: 0 0 auto; 629 | flex: 0 0 auto; 630 | width: auto; 631 | max-width: none; 632 | } 633 | .col-lg-1 { 634 | -ms-flex: 0 0 8.333333%; 635 | flex: 0 0 8.333333%; 636 | max-width: 8.333333%; 637 | } 638 | .col-lg-2 { 639 | -ms-flex: 0 0 16.666667%; 640 | flex: 0 0 16.666667%; 641 | max-width: 16.666667%; 642 | } 643 | .col-lg-3 { 644 | -ms-flex: 0 0 25%; 645 | flex: 0 0 25%; 646 | max-width: 25%; 647 | } 648 | .col-lg-4 { 649 | -ms-flex: 0 0 33.333333%; 650 | flex: 0 0 33.333333%; 651 | max-width: 33.333333%; 652 | } 653 | .col-lg-5 { 654 | -ms-flex: 0 0 41.666667%; 655 | flex: 0 0 41.666667%; 656 | max-width: 41.666667%; 657 | } 658 | .col-lg-6 { 659 | -ms-flex: 0 0 50%; 660 | flex: 0 0 50%; 661 | max-width: 50%; 662 | } 663 | .col-lg-7 { 664 | -ms-flex: 0 0 58.333333%; 665 | flex: 0 0 58.333333%; 666 | max-width: 58.333333%; 667 | } 668 | .col-lg-8 { 669 | -ms-flex: 0 0 66.666667%; 670 | flex: 0 0 66.666667%; 671 | max-width: 66.666667%; 672 | } 673 | .col-lg-9 { 674 | -ms-flex: 0 0 75%; 675 | flex: 0 0 75%; 676 | max-width: 75%; 677 | } 678 | .col-lg-10 { 679 | -ms-flex: 0 0 83.333333%; 680 | flex: 0 0 83.333333%; 681 | max-width: 83.333333%; 682 | } 683 | .col-lg-11 { 684 | -ms-flex: 0 0 91.666667%; 685 | flex: 0 0 91.666667%; 686 | max-width: 91.666667%; 687 | } 688 | .col-lg-12 { 689 | -ms-flex: 0 0 100%; 690 | flex: 0 0 100%; 691 | max-width: 100%; 692 | } 693 | .order-lg-first { 694 | -ms-flex-order: -1; 695 | order: -1; 696 | } 697 | .order-lg-1 { 698 | -ms-flex-order: 1; 699 | order: 1; 700 | } 701 | .order-lg-2 { 702 | -ms-flex-order: 2; 703 | order: 2; 704 | } 705 | .order-lg-3 { 706 | -ms-flex-order: 3; 707 | order: 3; 708 | } 709 | .order-lg-4 { 710 | -ms-flex-order: 4; 711 | order: 4; 712 | } 713 | .order-lg-5 { 714 | -ms-flex-order: 5; 715 | order: 5; 716 | } 717 | .order-lg-6 { 718 | -ms-flex-order: 6; 719 | order: 6; 720 | } 721 | .order-lg-7 { 722 | -ms-flex-order: 7; 723 | order: 7; 724 | } 725 | .order-lg-8 { 726 | -ms-flex-order: 8; 727 | order: 8; 728 | } 729 | .order-lg-9 { 730 | -ms-flex-order: 9; 731 | order: 9; 732 | } 733 | .order-lg-10 { 734 | -ms-flex-order: 10; 735 | order: 10; 736 | } 737 | .order-lg-11 { 738 | -ms-flex-order: 11; 739 | order: 11; 740 | } 741 | .order-lg-12 { 742 | -ms-flex-order: 12; 743 | order: 12; 744 | } 745 | .offset-lg-0 { 746 | margin-left: 0; 747 | } 748 | .offset-lg-1 { 749 | margin-left: 8.333333%; 750 | } 751 | .offset-lg-2 { 752 | margin-left: 16.666667%; 753 | } 754 | .offset-lg-3 { 755 | margin-left: 25%; 756 | } 757 | .offset-lg-4 { 758 | margin-left: 33.333333%; 759 | } 760 | .offset-lg-5 { 761 | margin-left: 41.666667%; 762 | } 763 | .offset-lg-6 { 764 | margin-left: 50%; 765 | } 766 | .offset-lg-7 { 767 | margin-left: 58.333333%; 768 | } 769 | .offset-lg-8 { 770 | margin-left: 66.666667%; 771 | } 772 | .offset-lg-9 { 773 | margin-left: 75%; 774 | } 775 | .offset-lg-10 { 776 | margin-left: 83.333333%; 777 | } 778 | .offset-lg-11 { 779 | margin-left: 91.666667%; 780 | } 781 | } 782 | 783 | @media (min-width: 1200px) { 784 | .col-xl { 785 | -ms-flex-preferred-size: 0; 786 | flex-basis: 0; 787 | -ms-flex-positive: 1; 788 | flex-grow: 1; 789 | max-width: 100%; 790 | } 791 | .col-xl-auto { 792 | -ms-flex: 0 0 auto; 793 | flex: 0 0 auto; 794 | width: auto; 795 | max-width: none; 796 | } 797 | .col-xl-1 { 798 | -ms-flex: 0 0 8.333333%; 799 | flex: 0 0 8.333333%; 800 | max-width: 8.333333%; 801 | } 802 | .col-xl-2 { 803 | -ms-flex: 0 0 16.666667%; 804 | flex: 0 0 16.666667%; 805 | max-width: 16.666667%; 806 | } 807 | .col-xl-3 { 808 | -ms-flex: 0 0 25%; 809 | flex: 0 0 25%; 810 | max-width: 25%; 811 | } 812 | .col-xl-4 { 813 | -ms-flex: 0 0 33.333333%; 814 | flex: 0 0 33.333333%; 815 | max-width: 33.333333%; 816 | } 817 | .col-xl-5 { 818 | -ms-flex: 0 0 41.666667%; 819 | flex: 0 0 41.666667%; 820 | max-width: 41.666667%; 821 | } 822 | .col-xl-6 { 823 | -ms-flex: 0 0 50%; 824 | flex: 0 0 50%; 825 | max-width: 50%; 826 | } 827 | .col-xl-7 { 828 | -ms-flex: 0 0 58.333333%; 829 | flex: 0 0 58.333333%; 830 | max-width: 58.333333%; 831 | } 832 | .col-xl-8 { 833 | -ms-flex: 0 0 66.666667%; 834 | flex: 0 0 66.666667%; 835 | max-width: 66.666667%; 836 | } 837 | .col-xl-9 { 838 | -ms-flex: 0 0 75%; 839 | flex: 0 0 75%; 840 | max-width: 75%; 841 | } 842 | .col-xl-10 { 843 | -ms-flex: 0 0 83.333333%; 844 | flex: 0 0 83.333333%; 845 | max-width: 83.333333%; 846 | } 847 | .col-xl-11 { 848 | -ms-flex: 0 0 91.666667%; 849 | flex: 0 0 91.666667%; 850 | max-width: 91.666667%; 851 | } 852 | .col-xl-12 { 853 | -ms-flex: 0 0 100%; 854 | flex: 0 0 100%; 855 | max-width: 100%; 856 | } 857 | .order-xl-first { 858 | -ms-flex-order: -1; 859 | order: -1; 860 | } 861 | .order-xl-1 { 862 | -ms-flex-order: 1; 863 | order: 1; 864 | } 865 | .order-xl-2 { 866 | -ms-flex-order: 2; 867 | order: 2; 868 | } 869 | .order-xl-3 { 870 | -ms-flex-order: 3; 871 | order: 3; 872 | } 873 | .order-xl-4 { 874 | -ms-flex-order: 4; 875 | order: 4; 876 | } 877 | .order-xl-5 { 878 | -ms-flex-order: 5; 879 | order: 5; 880 | } 881 | .order-xl-6 { 882 | -ms-flex-order: 6; 883 | order: 6; 884 | } 885 | .order-xl-7 { 886 | -ms-flex-order: 7; 887 | order: 7; 888 | } 889 | .order-xl-8 { 890 | -ms-flex-order: 8; 891 | order: 8; 892 | } 893 | .order-xl-9 { 894 | -ms-flex-order: 9; 895 | order: 9; 896 | } 897 | .order-xl-10 { 898 | -ms-flex-order: 10; 899 | order: 10; 900 | } 901 | .order-xl-11 { 902 | -ms-flex-order: 11; 903 | order: 11; 904 | } 905 | .order-xl-12 { 906 | -ms-flex-order: 12; 907 | order: 12; 908 | } 909 | .offset-xl-0 { 910 | margin-left: 0; 911 | } 912 | .offset-xl-1 { 913 | margin-left: 8.333333%; 914 | } 915 | .offset-xl-2 { 916 | margin-left: 16.666667%; 917 | } 918 | .offset-xl-3 { 919 | margin-left: 25%; 920 | } 921 | .offset-xl-4 { 922 | margin-left: 33.333333%; 923 | } 924 | .offset-xl-5 { 925 | margin-left: 41.666667%; 926 | } 927 | .offset-xl-6 { 928 | margin-left: 50%; 929 | } 930 | .offset-xl-7 { 931 | margin-left: 58.333333%; 932 | } 933 | .offset-xl-8 { 934 | margin-left: 66.666667%; 935 | } 936 | .offset-xl-9 { 937 | margin-left: 75%; 938 | } 939 | .offset-xl-10 { 940 | margin-left: 83.333333%; 941 | } 942 | .offset-xl-11 { 943 | margin-left: 91.666667%; 944 | } 945 | } 946 | 947 | .flex-row { 948 | -ms-flex-direction: row !important; 949 | flex-direction: row !important; 950 | } 951 | 952 | .flex-column { 953 | -ms-flex-direction: column !important; 954 | flex-direction: column !important; 955 | } 956 | 957 | .flex-row-reverse { 958 | -ms-flex-direction: row-reverse !important; 959 | flex-direction: row-reverse !important; 960 | } 961 | 962 | .flex-column-reverse { 963 | -ms-flex-direction: column-reverse !important; 964 | flex-direction: column-reverse !important; 965 | } 966 | 967 | .flex-wrap { 968 | -ms-flex-wrap: wrap !important; 969 | flex-wrap: wrap !important; 970 | } 971 | 972 | .flex-nowrap { 973 | -ms-flex-wrap: nowrap !important; 974 | flex-wrap: nowrap !important; 975 | } 976 | 977 | .flex-wrap-reverse { 978 | -ms-flex-wrap: wrap-reverse !important; 979 | flex-wrap: wrap-reverse !important; 980 | } 981 | 982 | .justify-content-start { 983 | -ms-flex-pack: start !important; 984 | justify-content: flex-start !important; 985 | } 986 | 987 | .justify-content-end { 988 | -ms-flex-pack: end !important; 989 | justify-content: flex-end !important; 990 | } 991 | 992 | .justify-content-center { 993 | -ms-flex-pack: center !important; 994 | justify-content: center !important; 995 | } 996 | 997 | .justify-content-between { 998 | -ms-flex-pack: justify !important; 999 | justify-content: space-between !important; 1000 | } 1001 | 1002 | .justify-content-around { 1003 | -ms-flex-pack: distribute !important; 1004 | justify-content: space-around !important; 1005 | } 1006 | 1007 | .align-items-start { 1008 | -ms-flex-align: start !important; 1009 | align-items: flex-start !important; 1010 | } 1011 | 1012 | .align-items-end { 1013 | -ms-flex-align: end !important; 1014 | align-items: flex-end !important; 1015 | } 1016 | 1017 | .align-items-center { 1018 | -ms-flex-align: center !important; 1019 | align-items: center !important; 1020 | } 1021 | 1022 | .align-items-baseline { 1023 | -ms-flex-align: baseline !important; 1024 | align-items: baseline !important; 1025 | } 1026 | 1027 | .align-items-stretch { 1028 | -ms-flex-align: stretch !important; 1029 | align-items: stretch !important; 1030 | } 1031 | 1032 | .align-content-start { 1033 | -ms-flex-line-pack: start !important; 1034 | align-content: flex-start !important; 1035 | } 1036 | 1037 | .align-content-end { 1038 | -ms-flex-line-pack: end !important; 1039 | align-content: flex-end !important; 1040 | } 1041 | 1042 | .align-content-center { 1043 | -ms-flex-line-pack: center !important; 1044 | align-content: center !important; 1045 | } 1046 | 1047 | .align-content-between { 1048 | -ms-flex-line-pack: justify !important; 1049 | align-content: space-between !important; 1050 | } 1051 | 1052 | .align-content-around { 1053 | -ms-flex-line-pack: distribute !important; 1054 | align-content: space-around !important; 1055 | } 1056 | 1057 | .align-content-stretch { 1058 | -ms-flex-line-pack: stretch !important; 1059 | align-content: stretch !important; 1060 | } 1061 | 1062 | .align-self-auto { 1063 | -ms-flex-item-align: auto !important; 1064 | align-self: auto !important; 1065 | } 1066 | 1067 | .align-self-start { 1068 | -ms-flex-item-align: start !important; 1069 | align-self: flex-start !important; 1070 | } 1071 | 1072 | .align-self-end { 1073 | -ms-flex-item-align: end !important; 1074 | align-self: flex-end !important; 1075 | } 1076 | 1077 | .align-self-center { 1078 | -ms-flex-item-align: center !important; 1079 | align-self: center !important; 1080 | } 1081 | 1082 | .align-self-baseline { 1083 | -ms-flex-item-align: baseline !important; 1084 | align-self: baseline !important; 1085 | } 1086 | 1087 | .align-self-stretch { 1088 | -ms-flex-item-align: stretch !important; 1089 | align-self: stretch !important; 1090 | } 1091 | 1092 | @media (min-width: 576px) { 1093 | .flex-sm-row { 1094 | -ms-flex-direction: row !important; 1095 | flex-direction: row !important; 1096 | } 1097 | .flex-sm-column { 1098 | -ms-flex-direction: column !important; 1099 | flex-direction: column !important; 1100 | } 1101 | .flex-sm-row-reverse { 1102 | -ms-flex-direction: row-reverse !important; 1103 | flex-direction: row-reverse !important; 1104 | } 1105 | .flex-sm-column-reverse { 1106 | -ms-flex-direction: column-reverse !important; 1107 | flex-direction: column-reverse !important; 1108 | } 1109 | .flex-sm-wrap { 1110 | -ms-flex-wrap: wrap !important; 1111 | flex-wrap: wrap !important; 1112 | } 1113 | .flex-sm-nowrap { 1114 | -ms-flex-wrap: nowrap !important; 1115 | flex-wrap: nowrap !important; 1116 | } 1117 | .flex-sm-wrap-reverse { 1118 | -ms-flex-wrap: wrap-reverse !important; 1119 | flex-wrap: wrap-reverse !important; 1120 | } 1121 | .justify-content-sm-start { 1122 | -ms-flex-pack: start !important; 1123 | justify-content: flex-start !important; 1124 | } 1125 | .justify-content-sm-end { 1126 | -ms-flex-pack: end !important; 1127 | justify-content: flex-end !important; 1128 | } 1129 | .justify-content-sm-center { 1130 | -ms-flex-pack: center !important; 1131 | justify-content: center !important; 1132 | } 1133 | .justify-content-sm-between { 1134 | -ms-flex-pack: justify !important; 1135 | justify-content: space-between !important; 1136 | } 1137 | .justify-content-sm-around { 1138 | -ms-flex-pack: distribute !important; 1139 | justify-content: space-around !important; 1140 | } 1141 | .align-items-sm-start { 1142 | -ms-flex-align: start !important; 1143 | align-items: flex-start !important; 1144 | } 1145 | .align-items-sm-end { 1146 | -ms-flex-align: end !important; 1147 | align-items: flex-end !important; 1148 | } 1149 | .align-items-sm-center { 1150 | -ms-flex-align: center !important; 1151 | align-items: center !important; 1152 | } 1153 | .align-items-sm-baseline { 1154 | -ms-flex-align: baseline !important; 1155 | align-items: baseline !important; 1156 | } 1157 | .align-items-sm-stretch { 1158 | -ms-flex-align: stretch !important; 1159 | align-items: stretch !important; 1160 | } 1161 | .align-content-sm-start { 1162 | -ms-flex-line-pack: start !important; 1163 | align-content: flex-start !important; 1164 | } 1165 | .align-content-sm-end { 1166 | -ms-flex-line-pack: end !important; 1167 | align-content: flex-end !important; 1168 | } 1169 | .align-content-sm-center { 1170 | -ms-flex-line-pack: center !important; 1171 | align-content: center !important; 1172 | } 1173 | .align-content-sm-between { 1174 | -ms-flex-line-pack: justify !important; 1175 | align-content: space-between !important; 1176 | } 1177 | .align-content-sm-around { 1178 | -ms-flex-line-pack: distribute !important; 1179 | align-content: space-around !important; 1180 | } 1181 | .align-content-sm-stretch { 1182 | -ms-flex-line-pack: stretch !important; 1183 | align-content: stretch !important; 1184 | } 1185 | .align-self-sm-auto { 1186 | -ms-flex-item-align: auto !important; 1187 | align-self: auto !important; 1188 | } 1189 | .align-self-sm-start { 1190 | -ms-flex-item-align: start !important; 1191 | align-self: flex-start !important; 1192 | } 1193 | .align-self-sm-end { 1194 | -ms-flex-item-align: end !important; 1195 | align-self: flex-end !important; 1196 | } 1197 | .align-self-sm-center { 1198 | -ms-flex-item-align: center !important; 1199 | align-self: center !important; 1200 | } 1201 | .align-self-sm-baseline { 1202 | -ms-flex-item-align: baseline !important; 1203 | align-self: baseline !important; 1204 | } 1205 | .align-self-sm-stretch { 1206 | -ms-flex-item-align: stretch !important; 1207 | align-self: stretch !important; 1208 | } 1209 | } 1210 | 1211 | @media (min-width: 768px) { 1212 | .flex-md-row { 1213 | -ms-flex-direction: row !important; 1214 | flex-direction: row !important; 1215 | } 1216 | .flex-md-column { 1217 | -ms-flex-direction: column !important; 1218 | flex-direction: column !important; 1219 | } 1220 | .flex-md-row-reverse { 1221 | -ms-flex-direction: row-reverse !important; 1222 | flex-direction: row-reverse !important; 1223 | } 1224 | .flex-md-column-reverse { 1225 | -ms-flex-direction: column-reverse !important; 1226 | flex-direction: column-reverse !important; 1227 | } 1228 | .flex-md-wrap { 1229 | -ms-flex-wrap: wrap !important; 1230 | flex-wrap: wrap !important; 1231 | } 1232 | .flex-md-nowrap { 1233 | -ms-flex-wrap: nowrap !important; 1234 | flex-wrap: nowrap !important; 1235 | } 1236 | .flex-md-wrap-reverse { 1237 | -ms-flex-wrap: wrap-reverse !important; 1238 | flex-wrap: wrap-reverse !important; 1239 | } 1240 | .justify-content-md-start { 1241 | -ms-flex-pack: start !important; 1242 | justify-content: flex-start !important; 1243 | } 1244 | .justify-content-md-end { 1245 | -ms-flex-pack: end !important; 1246 | justify-content: flex-end !important; 1247 | } 1248 | .justify-content-md-center { 1249 | -ms-flex-pack: center !important; 1250 | justify-content: center !important; 1251 | } 1252 | .justify-content-md-between { 1253 | -ms-flex-pack: justify !important; 1254 | justify-content: space-between !important; 1255 | } 1256 | .justify-content-md-around { 1257 | -ms-flex-pack: distribute !important; 1258 | justify-content: space-around !important; 1259 | } 1260 | .align-items-md-start { 1261 | -ms-flex-align: start !important; 1262 | align-items: flex-start !important; 1263 | } 1264 | .align-items-md-end { 1265 | -ms-flex-align: end !important; 1266 | align-items: flex-end !important; 1267 | } 1268 | .align-items-md-center { 1269 | -ms-flex-align: center !important; 1270 | align-items: center !important; 1271 | } 1272 | .align-items-md-baseline { 1273 | -ms-flex-align: baseline !important; 1274 | align-items: baseline !important; 1275 | } 1276 | .align-items-md-stretch { 1277 | -ms-flex-align: stretch !important; 1278 | align-items: stretch !important; 1279 | } 1280 | .align-content-md-start { 1281 | -ms-flex-line-pack: start !important; 1282 | align-content: flex-start !important; 1283 | } 1284 | .align-content-md-end { 1285 | -ms-flex-line-pack: end !important; 1286 | align-content: flex-end !important; 1287 | } 1288 | .align-content-md-center { 1289 | -ms-flex-line-pack: center !important; 1290 | align-content: center !important; 1291 | } 1292 | .align-content-md-between { 1293 | -ms-flex-line-pack: justify !important; 1294 | align-content: space-between !important; 1295 | } 1296 | .align-content-md-around { 1297 | -ms-flex-line-pack: distribute !important; 1298 | align-content: space-around !important; 1299 | } 1300 | .align-content-md-stretch { 1301 | -ms-flex-line-pack: stretch !important; 1302 | align-content: stretch !important; 1303 | } 1304 | .align-self-md-auto { 1305 | -ms-flex-item-align: auto !important; 1306 | align-self: auto !important; 1307 | } 1308 | .align-self-md-start { 1309 | -ms-flex-item-align: start !important; 1310 | align-self: flex-start !important; 1311 | } 1312 | .align-self-md-end { 1313 | -ms-flex-item-align: end !important; 1314 | align-self: flex-end !important; 1315 | } 1316 | .align-self-md-center { 1317 | -ms-flex-item-align: center !important; 1318 | align-self: center !important; 1319 | } 1320 | .align-self-md-baseline { 1321 | -ms-flex-item-align: baseline !important; 1322 | align-self: baseline !important; 1323 | } 1324 | .align-self-md-stretch { 1325 | -ms-flex-item-align: stretch !important; 1326 | align-self: stretch !important; 1327 | } 1328 | } 1329 | 1330 | @media (min-width: 992px) { 1331 | .flex-lg-row { 1332 | -ms-flex-direction: row !important; 1333 | flex-direction: row !important; 1334 | } 1335 | .flex-lg-column { 1336 | -ms-flex-direction: column !important; 1337 | flex-direction: column !important; 1338 | } 1339 | .flex-lg-row-reverse { 1340 | -ms-flex-direction: row-reverse !important; 1341 | flex-direction: row-reverse !important; 1342 | } 1343 | .flex-lg-column-reverse { 1344 | -ms-flex-direction: column-reverse !important; 1345 | flex-direction: column-reverse !important; 1346 | } 1347 | .flex-lg-wrap { 1348 | -ms-flex-wrap: wrap !important; 1349 | flex-wrap: wrap !important; 1350 | } 1351 | .flex-lg-nowrap { 1352 | -ms-flex-wrap: nowrap !important; 1353 | flex-wrap: nowrap !important; 1354 | } 1355 | .flex-lg-wrap-reverse { 1356 | -ms-flex-wrap: wrap-reverse !important; 1357 | flex-wrap: wrap-reverse !important; 1358 | } 1359 | .justify-content-lg-start { 1360 | -ms-flex-pack: start !important; 1361 | justify-content: flex-start !important; 1362 | } 1363 | .justify-content-lg-end { 1364 | -ms-flex-pack: end !important; 1365 | justify-content: flex-end !important; 1366 | } 1367 | .justify-content-lg-center { 1368 | -ms-flex-pack: center !important; 1369 | justify-content: center !important; 1370 | } 1371 | .justify-content-lg-between { 1372 | -ms-flex-pack: justify !important; 1373 | justify-content: space-between !important; 1374 | } 1375 | .justify-content-lg-around { 1376 | -ms-flex-pack: distribute !important; 1377 | justify-content: space-around !important; 1378 | } 1379 | .align-items-lg-start { 1380 | -ms-flex-align: start !important; 1381 | align-items: flex-start !important; 1382 | } 1383 | .align-items-lg-end { 1384 | -ms-flex-align: end !important; 1385 | align-items: flex-end !important; 1386 | } 1387 | .align-items-lg-center { 1388 | -ms-flex-align: center !important; 1389 | align-items: center !important; 1390 | } 1391 | .align-items-lg-baseline { 1392 | -ms-flex-align: baseline !important; 1393 | align-items: baseline !important; 1394 | } 1395 | .align-items-lg-stretch { 1396 | -ms-flex-align: stretch !important; 1397 | align-items: stretch !important; 1398 | } 1399 | .align-content-lg-start { 1400 | -ms-flex-line-pack: start !important; 1401 | align-content: flex-start !important; 1402 | } 1403 | .align-content-lg-end { 1404 | -ms-flex-line-pack: end !important; 1405 | align-content: flex-end !important; 1406 | } 1407 | .align-content-lg-center { 1408 | -ms-flex-line-pack: center !important; 1409 | align-content: center !important; 1410 | } 1411 | .align-content-lg-between { 1412 | -ms-flex-line-pack: justify !important; 1413 | align-content: space-between !important; 1414 | } 1415 | .align-content-lg-around { 1416 | -ms-flex-line-pack: distribute !important; 1417 | align-content: space-around !important; 1418 | } 1419 | .align-content-lg-stretch { 1420 | -ms-flex-line-pack: stretch !important; 1421 | align-content: stretch !important; 1422 | } 1423 | .align-self-lg-auto { 1424 | -ms-flex-item-align: auto !important; 1425 | align-self: auto !important; 1426 | } 1427 | .align-self-lg-start { 1428 | -ms-flex-item-align: start !important; 1429 | align-self: flex-start !important; 1430 | } 1431 | .align-self-lg-end { 1432 | -ms-flex-item-align: end !important; 1433 | align-self: flex-end !important; 1434 | } 1435 | .align-self-lg-center { 1436 | -ms-flex-item-align: center !important; 1437 | align-self: center !important; 1438 | } 1439 | .align-self-lg-baseline { 1440 | -ms-flex-item-align: baseline !important; 1441 | align-self: baseline !important; 1442 | } 1443 | .align-self-lg-stretch { 1444 | -ms-flex-item-align: stretch !important; 1445 | align-self: stretch !important; 1446 | } 1447 | } 1448 | 1449 | @media (min-width: 1200px) { 1450 | .flex-xl-row { 1451 | -ms-flex-direction: row !important; 1452 | flex-direction: row !important; 1453 | } 1454 | .flex-xl-column { 1455 | -ms-flex-direction: column !important; 1456 | flex-direction: column !important; 1457 | } 1458 | .flex-xl-row-reverse { 1459 | -ms-flex-direction: row-reverse !important; 1460 | flex-direction: row-reverse !important; 1461 | } 1462 | .flex-xl-column-reverse { 1463 | -ms-flex-direction: column-reverse !important; 1464 | flex-direction: column-reverse !important; 1465 | } 1466 | .flex-xl-wrap { 1467 | -ms-flex-wrap: wrap !important; 1468 | flex-wrap: wrap !important; 1469 | } 1470 | .flex-xl-nowrap { 1471 | -ms-flex-wrap: nowrap !important; 1472 | flex-wrap: nowrap !important; 1473 | } 1474 | .flex-xl-wrap-reverse { 1475 | -ms-flex-wrap: wrap-reverse !important; 1476 | flex-wrap: wrap-reverse !important; 1477 | } 1478 | .justify-content-xl-start { 1479 | -ms-flex-pack: start !important; 1480 | justify-content: flex-start !important; 1481 | } 1482 | .justify-content-xl-end { 1483 | -ms-flex-pack: end !important; 1484 | justify-content: flex-end !important; 1485 | } 1486 | .justify-content-xl-center { 1487 | -ms-flex-pack: center !important; 1488 | justify-content: center !important; 1489 | } 1490 | .justify-content-xl-between { 1491 | -ms-flex-pack: justify !important; 1492 | justify-content: space-between !important; 1493 | } 1494 | .justify-content-xl-around { 1495 | -ms-flex-pack: distribute !important; 1496 | justify-content: space-around !important; 1497 | } 1498 | .align-items-xl-start { 1499 | -ms-flex-align: start !important; 1500 | align-items: flex-start !important; 1501 | } 1502 | .align-items-xl-end { 1503 | -ms-flex-align: end !important; 1504 | align-items: flex-end !important; 1505 | } 1506 | .align-items-xl-center { 1507 | -ms-flex-align: center !important; 1508 | align-items: center !important; 1509 | } 1510 | .align-items-xl-baseline { 1511 | -ms-flex-align: baseline !important; 1512 | align-items: baseline !important; 1513 | } 1514 | .align-items-xl-stretch { 1515 | -ms-flex-align: stretch !important; 1516 | align-items: stretch !important; 1517 | } 1518 | .align-content-xl-start { 1519 | -ms-flex-line-pack: start !important; 1520 | align-content: flex-start !important; 1521 | } 1522 | .align-content-xl-end { 1523 | -ms-flex-line-pack: end !important; 1524 | align-content: flex-end !important; 1525 | } 1526 | .align-content-xl-center { 1527 | -ms-flex-line-pack: center !important; 1528 | align-content: center !important; 1529 | } 1530 | .align-content-xl-between { 1531 | -ms-flex-line-pack: justify !important; 1532 | align-content: space-between !important; 1533 | } 1534 | .align-content-xl-around { 1535 | -ms-flex-line-pack: distribute !important; 1536 | align-content: space-around !important; 1537 | } 1538 | .align-content-xl-stretch { 1539 | -ms-flex-line-pack: stretch !important; 1540 | align-content: stretch !important; 1541 | } 1542 | .align-self-xl-auto { 1543 | -ms-flex-item-align: auto !important; 1544 | align-self: auto !important; 1545 | } 1546 | .align-self-xl-start { 1547 | -ms-flex-item-align: start !important; 1548 | align-self: flex-start !important; 1549 | } 1550 | .align-self-xl-end { 1551 | -ms-flex-item-align: end !important; 1552 | align-self: flex-end !important; 1553 | } 1554 | .align-self-xl-center { 1555 | -ms-flex-item-align: center !important; 1556 | align-self: center !important; 1557 | } 1558 | .align-self-xl-baseline { 1559 | -ms-flex-item-align: baseline !important; 1560 | align-self: baseline !important; 1561 | } 1562 | .align-self-xl-stretch { 1563 | -ms-flex-item-align: stretch !important; 1564 | align-self: stretch !important; 1565 | } 1566 | } 1567 | /*# sourceMappingURL=bootstrap-grid.css.map */ -------------------------------------------------------------------------------- /css/dist/bootstrap-reboot.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com) 3 | * Copyright 2011-2017 The Bootstrap Authors 4 | * Copyright 2011-2017 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) 7 | */ 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: border-box; 12 | } 13 | 14 | html { 15 | font-family: sans-serif; 16 | line-height: 1.15; 17 | -webkit-text-size-adjust: 100%; 18 | -ms-text-size-adjust: 100%; 19 | -ms-overflow-style: scrollbar; 20 | -webkit-tap-highlight-color: transparent; 21 | } 22 | 23 | @-ms-viewport { 24 | width: device-width; 25 | } 26 | 27 | article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { 28 | display: block; 29 | } 30 | 31 | body { 32 | margin: 0; 33 | font-family: Georgia, "Times New Roman", Times, serif; 34 | font-size: 1rem; 35 | font-weight: 400; 36 | line-height: 1.5; 37 | color: #555; 38 | text-align: left; 39 | background-color: #fff; 40 | } 41 | 42 | [tabindex="-1"]:focus { 43 | outline: none !important; 44 | } 45 | 46 | hr { 47 | box-sizing: content-box; 48 | height: 0; 49 | overflow: visible; 50 | } 51 | 52 | h1, h2, h3, h4, h5, h6 { 53 | margin-top: 0; 54 | margin-bottom: 0.5rem; 55 | font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 56 | } 57 | 58 | p { 59 | margin-top: 0; 60 | margin-bottom: 1rem; 61 | } 62 | 63 | abbr[title], 64 | abbr[data-original-title] { 65 | text-decoration: underline; 66 | -webkit-text-decoration: underline dotted; 67 | text-decoration: underline dotted; 68 | cursor: help; 69 | border-bottom: 0; 70 | } 71 | 72 | address { 73 | margin-bottom: 1rem; 74 | font-style: normal; 75 | line-height: inherit; 76 | } 77 | 78 | ol, 79 | ul, 80 | dl { 81 | margin-top: 0; 82 | margin-bottom: 1rem; 83 | } 84 | 85 | ol ol, 86 | ul ul, 87 | ol ul, 88 | ul ol { 89 | margin-bottom: 0; 90 | } 91 | 92 | dt { 93 | font-weight: 700; 94 | } 95 | 96 | dd { 97 | margin-bottom: .5rem; 98 | margin-left: 0; 99 | } 100 | 101 | blockquote { 102 | margin: 0 0 1rem; 103 | } 104 | 105 | dfn { 106 | font-style: italic; 107 | } 108 | 109 | b, 110 | strong { 111 | font-weight: bolder; 112 | } 113 | 114 | small { 115 | font-size: 80%; 116 | } 117 | 118 | sub, 119 | sup { 120 | position: relative; 121 | font-size: 75%; 122 | line-height: 0; 123 | vertical-align: baseline; 124 | } 125 | 126 | sub { 127 | bottom: -.25em; 128 | } 129 | 130 | sup { 131 | top: -.5em; 132 | } 133 | 134 | a { 135 | color: #007bff; 136 | text-decoration: none; 137 | background-color: transparent; 138 | -webkit-text-decoration-skip: objects; 139 | } 140 | 141 | a:hover { 142 | color: #0056b3; 143 | text-decoration: underline; 144 | } 145 | 146 | a:not([href]):not([tabindex]) { 147 | color: inherit; 148 | text-decoration: none; 149 | } 150 | 151 | a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { 152 | color: inherit; 153 | text-decoration: none; 154 | } 155 | 156 | a:not([href]):not([tabindex]):focus { 157 | outline: 0; 158 | } 159 | 160 | pre, 161 | code, 162 | kbd, 163 | samp { 164 | font-family: monospace, monospace; 165 | font-size: 1em; 166 | } 167 | 168 | pre { 169 | margin-top: 0; 170 | margin-bottom: 1rem; 171 | overflow: auto; 172 | -ms-overflow-style: scrollbar; 173 | } 174 | 175 | figure { 176 | margin: 0 0 1rem; 177 | } 178 | 179 | img { 180 | vertical-align: middle; 181 | border-style: none; 182 | } 183 | 184 | svg:not(:root) { 185 | overflow: hidden; 186 | } 187 | 188 | a, 189 | area, 190 | button, 191 | [role="button"], 192 | input:not([type="range"]), 193 | label, 194 | select, 195 | summary, 196 | textarea { 197 | -ms-touch-action: manipulation; 198 | touch-action: manipulation; 199 | } 200 | 201 | table { 202 | border-collapse: collapse; 203 | } 204 | 205 | caption { 206 | padding-top: 0.75rem; 207 | padding-bottom: 0.75rem; 208 | color: #868e96; 209 | text-align: left; 210 | caption-side: bottom; 211 | } 212 | 213 | th { 214 | text-align: inherit; 215 | } 216 | 217 | label { 218 | display: inline-block; 219 | margin-bottom: .5rem; 220 | } 221 | 222 | button { 223 | border-radius: 0; 224 | } 225 | 226 | button:focus { 227 | outline: 1px dotted; 228 | outline: 5px auto -webkit-focus-ring-color; 229 | } 230 | 231 | input, 232 | button, 233 | select, 234 | optgroup, 235 | textarea { 236 | margin: 0; 237 | font-family: inherit; 238 | font-size: inherit; 239 | line-height: inherit; 240 | } 241 | 242 | button, 243 | input { 244 | overflow: visible; 245 | } 246 | 247 | button, 248 | select { 249 | text-transform: none; 250 | } 251 | 252 | button, 253 | html [type="button"], 254 | [type="reset"], 255 | [type="submit"] { 256 | -webkit-appearance: button; 257 | } 258 | 259 | button::-moz-focus-inner, 260 | [type="button"]::-moz-focus-inner, 261 | [type="reset"]::-moz-focus-inner, 262 | [type="submit"]::-moz-focus-inner { 263 | padding: 0; 264 | border-style: none; 265 | } 266 | 267 | input[type="radio"], 268 | input[type="checkbox"] { 269 | box-sizing: border-box; 270 | padding: 0; 271 | } 272 | 273 | input[type="date"], 274 | input[type="time"], 275 | input[type="datetime-local"], 276 | input[type="month"] { 277 | -webkit-appearance: listbox; 278 | } 279 | 280 | textarea { 281 | overflow: auto; 282 | resize: vertical; 283 | } 284 | 285 | fieldset { 286 | min-width: 0; 287 | padding: 0; 288 | margin: 0; 289 | border: 0; 290 | } 291 | 292 | legend { 293 | display: block; 294 | width: 100%; 295 | max-width: 100%; 296 | padding: 0; 297 | margin-bottom: .5rem; 298 | font-size: 1.5rem; 299 | line-height: inherit; 300 | color: inherit; 301 | white-space: normal; 302 | } 303 | 304 | progress { 305 | vertical-align: baseline; 306 | } 307 | 308 | [type="number"]::-webkit-inner-spin-button, 309 | [type="number"]::-webkit-outer-spin-button { 310 | height: auto; 311 | } 312 | 313 | [type="search"] { 314 | outline-offset: -2px; 315 | -webkit-appearance: none; 316 | } 317 | 318 | [type="search"]::-webkit-search-cancel-button, 319 | [type="search"]::-webkit-search-decoration { 320 | -webkit-appearance: none; 321 | } 322 | 323 | ::-webkit-file-upload-button { 324 | font: inherit; 325 | -webkit-appearance: button; 326 | } 327 | 328 | output { 329 | display: inline-block; 330 | } 331 | 332 | summary { 333 | display: list-item; 334 | } 335 | 336 | template { 337 | display: none; 338 | } 339 | 340 | [hidden] { 341 | display: none !important; 342 | } 343 | /*# sourceMappingURL=bootstrap-reboot.css.map */ -------------------------------------------------------------------------------- /css/dist/main.css: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | margin-bottom: 3rem; 3 | background: linear-gradient(180deg, #9f1c82, #772a66); 4 | padding: 9rem 3rem 8rem; 5 | border-radius: 0; 6 | color: #fff; 7 | text-align: center; } 8 | .jumbotron h1 { 9 | margin-bottom: .8rem; } 10 | .jumbotron .lead { 11 | margin-bottom: .8rem; } 12 | .jumbotron hr { 13 | border-top: 1px solid #be86b2; 14 | border-bottom: 1px solid #52003f; } 15 | 16 | .top-nav { 17 | background-color: #ebebeb; 18 | color: #000; 19 | padding-top: 5px; 20 | padding-bottom: 5px; } 21 | 22 | .main-header { 23 | border-bottom: 1px solid #ebebeb; 24 | margin-bottom: 35px; 25 | padding-top: 45px; 26 | padding-bottom: 35px; } 27 | 28 | .home .main-header { 29 | margin-bottom: 0; } 30 | 31 | .blogname { 32 | font-size: 60px; 33 | line-height: 64px; 34 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } 35 | 36 | .sidebar-section { 37 | padding: 18px 20px 12px; 38 | background-color: #ebebeb; 39 | border-radius: 4px; } 40 | 41 | .sidebar-section h3 { 42 | font-size: 18px; 43 | margin-left: -20px; 44 | margin-right: -20px; 45 | margin-bottom: 15px; 46 | padding-left: 20px; 47 | padding-right: 20px; 48 | padding-bottom: 15px; 49 | border-bottom: 1px solid #fff; } 50 | 51 | .comment { 52 | margin-bottom: 35px; } 53 | 54 | .comment-author, 55 | .comment-content { 56 | margin-left: 70px; } 57 | 58 | .comment-author { 59 | font-weight: bold; 60 | margin-bottom: 10px; } 61 | 62 | .comment-form-wrap { 63 | margin-top: 50px; 64 | margin-bottom: 50px; } 65 | 66 | .comment-form-wrap h3 { 67 | margin-bottom: 30px; 68 | border-bottom: 1px solid #ebebeb; 69 | padding-bottom: 22px; } 70 | 71 | .comment-form-wrap .btn { 72 | margin-top: 15px; } 73 | 74 | .comment-form-wrap textarea { 75 | min-height: 140px; } 76 | 77 | .gravatar { 78 | float: left; 79 | margin-top: 5px; } 80 | 81 | footer { 82 | background: #f8f8f8; 83 | padding-top: 75px; 84 | padding-bottom: 60px; 85 | margin-top: 45px; 86 | text-align: center; 87 | border-top: 1px solid #ebebeb; } 88 | 89 | .latest-title { 90 | margin-bottom: 25px; } 91 | 92 | .latest-title span { 93 | font-style: italic; 94 | font-size: 12px; } 95 | 96 | .main-title { 97 | text-transform: capitalize; 98 | margin-bottom: 15px; } 99 | 100 | .search-wrapper { 101 | display: flex; 102 | align-items: center; 103 | justify-content: center; } 104 | 105 | .single h1.post-title, 106 | .single h2.comments-title { 107 | margin-bottom: 25px; 108 | font-weight: 100; 109 | padding-bottom: 15px; 110 | border-bottom: 1px solid #ebebeb; } 111 | 112 | .the-loop { 113 | margin: 0 0 0 0; 114 | padding: 0 0 0 0; } 115 | 116 | .the-loop li { 117 | list-style: none; } 118 | 119 | .the-loop .title { 120 | font-size: 24px; 121 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } 122 | 123 | .meta { 124 | margin-bottom: 5px; } 125 | 126 | .meta, 127 | .meta a { 128 | color: #a8a8a8; } 129 | 130 | .fade-in-enter-active { 131 | transition: all .6s ease; } 132 | 133 | .fade-in-leave-active { 134 | transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1); } 135 | 136 | .fade-in-enter, .fade-in-leave-to { 137 | opacity: 0; } 138 | 139 | .content { 140 | margin-bottom: 35px; } 141 | 142 | .content-area img, 143 | .content img { 144 | max-width: 100%; 145 | margin-top: 5px; 146 | margin-bottom: 15px; } 147 | 148 | .pagination { 149 | margin-top: 30px; } 150 | 151 | /*# sourceMappingURL=main.css.map */ 152 | -------------------------------------------------------------------------------- /css/dist/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.css","sources":["main.scss","_jumbotron.scss","_header.scss","_sidebar.scss","_comments.scss","_footer.scss"],"sourcesContent":["$light-grey : #ebebeb;\n$med-grey : #a8a8a8;\n$primary-color: #000;\n\n@import 'jumbotron';\n@import 'header';\n@import 'sidebar';\n@import 'comments';\n@import 'footer';\n\n.latest-title {\n margin-bottom:25px;\n}\n.latest-title span{\n font-style:italic;\n font-size:12px;\n}\n.main-title {\n text-transform: capitalize;\n margin-bottom:15px;\n}\n.search-wrapper {\n display:flex;\n align-items: center;\n justify-content: center;\n}\n\n.single h1.post-title, \n.single h2.comments-title{\n margin-bottom:25px;\n font-weight: 100;\n padding-bottom:15px;\n border-bottom:1px solid #ebebeb;\n}\n.the-loop {\n margin:0 0 0 0;\n padding:0 0 0 0;\n}\n.the-loop li {\n list-style: none;\n}\n.the-loop .title {\n font-size:24px;\n font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;\n}\n.meta {\n margin-bottom:5px;\n}\n.meta, \n.meta a {\n color: $med-grey;\n}\n.fade-in-enter-active {\n transition: all .6s ease;\n}\n.fade-in-leave-active {\ntransition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n}\n.fade-in-enter, .fade-in-leave-to\n/* .slide-fade-leave-active below version 2.1.8 */ { \nopacity: 0;\n}\n.content {\n margin-bottom: 35px;\n}\n.content-area img, \n.content img {\n max-width:100%;\n margin-top:5px;\n margin-bottom:15px;\n}\n.pagination {\n margin-top:30px;\n}\n",".jumbotron {\r\n margin-bottom:3rem;\r\n background: linear-gradient(180deg,#9f1c82,#772a66);\r\n padding: 9rem 3rem 8rem;\r\n border-radius:0;\r\n color:#fff;\r\n text-align: center; \r\n h1 {\r\n margin-bottom: .8rem;\r\n }\r\n .lead {\r\n margin-bottom: .8rem;\r\n }\r\n hr {\r\n border-top: 1px solid #be86b2;\r\n border-bottom: 1px solid #52003f;\r\n }\r\n}","\r\n.top-nav {\r\n background-color:$light-grey;\r\n color:$primary-color;\r\n padding-top:5px;\r\n padding-bottom:5px;\r\n}\r\n.main-header {\r\n border-bottom:1px solid $light-grey;\r\n margin-bottom:35px;\r\n padding-top:45px;\r\n padding-bottom:35px;\r\n}\r\n.home .main-header {\r\n margin-bottom:0;\r\n}\r\n.blogname {\r\n font-size:60px;\r\n line-height: 64px;\r\n font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;\r\n}",".sidebar-section {\r\n padding:18px 20px 12px;\r\n background-color:$light-grey;\r\n border-radius:4px;\r\n}\r\n.sidebar-section h3 {\r\n font-size: 18px;\r\n margin-left:-20px;\r\n margin-right:-20px; \r\n margin-bottom:15px;\r\n padding-left:20px;\r\n padding-right:20px;\r\n padding-bottom:15px;\r\n border-bottom:1px solid #fff;\r\n}",".comment {\r\n margin-bottom: 35px;\r\n}\r\n.comment-author, \r\n.comment-content {\r\n margin-left: 70px;\r\n}\r\n.comment-author {\r\n font-weight: bold;\r\n margin-bottom: 10px;\r\n}\r\n.comment-form-wrap {\r\n margin-top: 50px;\r\n margin-bottom: 50px;\r\n}\r\n.comment-form-wrap {\r\n h3 {\r\n margin-bottom:30px;\r\n border-bottom:1px solid $light-grey;\r\n padding-bottom:22px;\r\n }\r\n .btn {\r\n margin-top:15px;\r\n }\r\n textarea{\r\n min-height:140px;\r\n } \r\n}\r\n\r\n.gravatar {\r\n float:left;\r\n margin-top:5px;\r\n}","footer {\r\n background:#f8f8f8;\r\n padding-top:75px;\r\n padding-bottom:60px;\r\n margin-top: 45px;\r\n text-align:center;\r\n border-top:1px solid $light-grey;\r\n}"],"names":[],"mappings":"ACAA,AAAA,UAAU,CAAC;EACP,aAAa,EAAC,IAAI;EAClB,UAAU,EAAE,yCAAuC;EACnD,OAAO,EAAE,cAAc;EACvB,aAAa,EAAC,CAAC;EACf,KAAK,EAAC,IAAI;EACV,UAAU,EAAE,MAAM,GAWrB;EAjBD,AAOI,UAPM,CAON,EAAE,CAAC;IACC,aAAa,EAAE,KAAK,GACvB;EATL,AAUI,UAVM,CAUN,KAAK,CAAC;IACF,aAAa,EAAE,KAAK,GACvB;EAZL,AAaI,UAbM,CAaN,EAAE,CAAC;IACC,UAAU,EAAE,iBAAiB;IAC7B,aAAa,EAAE,iBAAiB,GACnC;;ACfL,AAAA,QAAQ,CAAC;EACL,gBAAgB,EFFN,OAAO;EEGjB,KAAK,EFDO,IAAI;EEEhB,WAAW,EAAC,GAAG;EACf,cAAc,EAAC,GAAG,GACrB;;AACD,AAAA,YAAY,CAAC;EACT,aAAa,EAAC,GAAG,CAAC,KAAK,CFRb,OAAO;EESjB,aAAa,EAAC,IAAI;EAClB,WAAW,EAAC,IAAI;EAChB,cAAc,EAAC,IAAI,GACtB;;AACD,AAAM,KAAD,CAAC,YAAY,CAAC;EACf,aAAa,EAAC,CAAC,GAClB;;AACD,AAAA,SAAS,CAAC;EACN,SAAS,EAAC,IAAI;EACd,WAAW,EAAE,IAAI;EACjB,WAAW,EAAC,8CAA8C,GAC7D;;ACpBD,AAAA,gBAAgB,CAAC;EACb,OAAO,EAAC,cAAc;EACtB,gBAAgB,EHFN,OAAO;EGGjB,aAAa,EAAC,GAAG,GACpB;;AACD,AAAiB,gBAAD,CAAC,EAAE,CAAC;EAChB,SAAS,EAAE,IAAI;EACf,WAAW,EAAC,KAAK;EACjB,YAAY,EAAC,KAAK;EAClB,aAAa,EAAC,IAAI;EAClB,YAAY,EAAC,IAAI;EACjB,aAAa,EAAC,IAAI;EAClB,cAAc,EAAC,IAAI;EACnB,aAAa,EAAC,cAAc,GAC/B;;ACdD,AAAA,QAAQ,CAAC;EACL,aAAa,EAAE,IAAI,GACtB;;AACD,AAAA,eAAe;AACf,AAAA,gBAAgB,CAAC;EACb,WAAW,EAAE,IAAI,GACpB;;AACD,AAAA,eAAe,CAAC;EACZ,WAAW,EAAE,IAAI;EACjB,aAAa,EAAE,IAAI,GACtB;;AACD,AAAA,kBAAkB,CAAC;EACf,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,IAAI,GACtB;;AACD,AACI,kBADc,CACd,EAAE,CAAC;EACC,aAAa,EAAC,IAAI;EAClB,aAAa,EAAC,GAAG,CAAC,KAAK,CJlBjB,OAAO;EImBb,cAAc,EAAC,IAAI,GACtB;;AALL,AAMI,kBANc,CAMd,IAAI,CAAC;EACD,UAAU,EAAC,IAAI,GAClB;;AARL,AASI,kBATc,CASd,QAAQ,CAAA;EACJ,UAAU,EAAC,KAAK,GACnB;;AAGL,AAAA,SAAS,CAAC;EACN,KAAK,EAAC,IAAI;EACV,UAAU,EAAC,GAAG,GACjB;;AChCD,AAAA,MAAM,CAAC;EACH,UAAU,EAAC,OAAO;EAClB,WAAW,EAAC,IAAI;EAChB,cAAc,EAAC,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,UAAU,EAAC,MAAM;EACjB,UAAU,EAAC,GAAG,CAAC,KAAK,CLNV,OAAO,GKOpB;;ALGD,AAAA,aAAa,CAAC;EACV,aAAa,EAAC,IAAI,GACrB;;AACD,AAAc,aAAD,CAAC,IAAI,CAAA;EACd,UAAU,EAAC,MAAM;EACjB,SAAS,EAAC,IAAI,GACjB;;AACD,AAAA,WAAW,CAAC;EACR,cAAc,EAAE,UAAU;EAC1B,aAAa,EAAC,IAAI,GACrB;;AACD,AAAA,eAAe,CAAC;EACZ,OAAO,EAAC,IAAI;EACZ,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM,GAC1B;;AAED,AAAQ,OAAD,CAAC,EAAE,AAAA,WAAW;AACrB,AAAQ,OAAD,CAAC,EAAE,AAAA,eAAe,CAAA;EACrB,aAAa,EAAC,IAAI;EAClB,WAAW,EAAE,GAAG;EAChB,cAAc,EAAC,IAAI;EACnB,aAAa,EAAC,iBAAiB,GAClC;;AACD,AAAA,SAAS,CAAC;EACN,MAAM,EAAC,OAAO;EACd,OAAO,EAAC,OAAO,GAClB;;AACD,AAAU,SAAD,CAAC,EAAE,CAAC;EACT,UAAU,EAAE,IAAI,GACnB;;AACD,AAAU,SAAD,CAAC,MAAM,CAAC;EACb,SAAS,EAAC,IAAI;EACd,WAAW,EAAC,8CAA8C,GAC7D;;AACD,AAAA,KAAK,CAAC;EACF,aAAa,EAAC,GAAG,GACpB;;AACD,AAAA,KAAK;AACL,AAAM,KAAD,CAAC,CAAC,CAAC;EACJ,KAAK,EAjDG,OAAO,GAkDlB;;AACD,AAAA,qBAAqB,CAAC;EAClB,UAAU,EAAE,YAAY,GAC3B;;AACD,AAAA,qBAAqB,CAAC;EACtB,UAAU,EAAE,GAAG,CAAC,IAAG,CAAC,4BAAgC,GACnD;;AACD,AAAA,cAAc,EAAE,AAAA,iBAAiB,CACkB;EACnD,OAAO,EAAE,CAAC,GACT;;AACD,AAAA,QAAQ,CAAC;EACL,aAAa,EAAE,IAAI,GACtB;;AACD,AAAc,aAAD,CAAC,GAAG;AACjB,AAAS,QAAD,CAAC,GAAG,CAAC;EACT,SAAS,EAAC,IAAI;EACd,UAAU,EAAC,GAAG;EACd,aAAa,EAAC,IAAI,GACrB;;AACD,AAAA,WAAW,CAAC;EACR,UAAU,EAAC,IAAI,GAClB"} -------------------------------------------------------------------------------- /css/src/_comments.scss: -------------------------------------------------------------------------------- 1 | .comment { 2 | margin-bottom: 35px; 3 | } 4 | .comment-author, 5 | .comment-content { 6 | margin-left: 70px; 7 | } 8 | .comment-author { 9 | font-weight: bold; 10 | margin-bottom: 10px; 11 | } 12 | .comment-form-wrap { 13 | margin-top: 50px; 14 | margin-bottom: 50px; 15 | } 16 | .comment-form-wrap { 17 | h3 { 18 | margin-bottom:30px; 19 | border-bottom:1px solid $light-grey; 20 | padding-bottom:22px; 21 | } 22 | .btn { 23 | margin-top:15px; 24 | } 25 | textarea{ 26 | min-height:140px; 27 | } 28 | } 29 | 30 | .gravatar { 31 | float:left; 32 | margin-top:5px; 33 | } -------------------------------------------------------------------------------- /css/src/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | background:#f8f8f8; 3 | padding-top:75px; 4 | padding-bottom:60px; 5 | margin-top: 45px; 6 | text-align:center; 7 | border-top:1px solid $light-grey; 8 | } -------------------------------------------------------------------------------- /css/src/_header.scss: -------------------------------------------------------------------------------- 1 | 2 | .top-nav { 3 | background-color:$light-grey; 4 | color:$primary-color; 5 | padding-top:5px; 6 | padding-bottom:5px; 7 | } 8 | .main-header { 9 | border-bottom:1px solid $light-grey; 10 | margin-bottom:35px; 11 | padding-top:45px; 12 | padding-bottom:35px; 13 | } 14 | .home .main-header { 15 | margin-bottom:0; 16 | } 17 | .blogname { 18 | font-size:60px; 19 | line-height: 64px; 20 | font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 21 | } -------------------------------------------------------------------------------- /css/src/_jumbotron.scss: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | margin-bottom:3rem; 3 | background: linear-gradient(180deg,#9f1c82,#772a66); 4 | padding: 9rem 3rem 8rem; 5 | border-radius:0; 6 | color:#fff; 7 | text-align: center; 8 | h1 { 9 | margin-bottom: .8rem; 10 | } 11 | .lead { 12 | margin-bottom: .8rem; 13 | } 14 | hr { 15 | border-top: 1px solid #be86b2; 16 | border-bottom: 1px solid #52003f; 17 | } 18 | } -------------------------------------------------------------------------------- /css/src/_sidebar.scss: -------------------------------------------------------------------------------- 1 | .sidebar-section { 2 | padding:18px 20px 12px; 3 | background-color:$light-grey; 4 | border-radius:4px; 5 | } 6 | .sidebar-section h3 { 7 | font-size: 18px; 8 | margin-left:-20px; 9 | margin-right:-20px; 10 | margin-bottom:15px; 11 | padding-left:20px; 12 | padding-right:20px; 13 | padding-bottom:15px; 14 | border-bottom:1px solid #fff; 15 | } -------------------------------------------------------------------------------- /css/src/main.scss: -------------------------------------------------------------------------------- 1 | $light-grey : #ebebeb; 2 | $med-grey : #a8a8a8; 3 | $primary-color: #000; 4 | 5 | @import 'jumbotron'; 6 | @import 'header'; 7 | @import 'sidebar'; 8 | @import 'comments'; 9 | @import 'footer'; 10 | 11 | .latest-title { 12 | margin-bottom:25px; 13 | } 14 | .latest-title span{ 15 | font-style:italic; 16 | font-size:12px; 17 | } 18 | .main-title { 19 | text-transform: capitalize; 20 | margin-bottom:15px; 21 | } 22 | .search-wrapper { 23 | display:flex; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | 28 | .single h1.post-title, 29 | .single h2.comments-title{ 30 | margin-bottom:25px; 31 | font-weight: 100; 32 | padding-bottom:15px; 33 | border-bottom:1px solid #ebebeb; 34 | } 35 | .the-loop { 36 | margin:0 0 0 0; 37 | padding:0 0 0 0; 38 | } 39 | .the-loop li { 40 | list-style: none; 41 | } 42 | .the-loop .title { 43 | font-size:24px; 44 | font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 45 | } 46 | .meta { 47 | margin-bottom:5px; 48 | } 49 | .meta, 50 | .meta a { 51 | color: $med-grey; 52 | } 53 | .fade-in-enter-active { 54 | transition: all .6s ease; 55 | } 56 | .fade-in-leave-active { 57 | transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0); 58 | } 59 | .fade-in-enter, .fade-in-leave-to 60 | /* .slide-fade-leave-active below version 2.1.8 */ { 61 | opacity: 0; 62 | } 63 | .content { 64 | margin-bottom: 35px; 65 | } 66 | .content-area img, 67 | .content img { 68 | max-width:100%; 69 | margin-top:5px; 70 | margin-bottom:15px; 71 | } 72 | .pagination { 73 | margin-top:30px; 74 | } 75 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelsoriano/wp-vue-starter/a6b8bc2c74f227eba025b5b794f66920829312e8/favicon.ico -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | 'GET', 23 | 'callback' => 'post_preview_callback', 24 | )); 25 | } 26 | 27 | function post_preview_callback( $request_data ) { 28 | // endpoint looks like: /wp-json/wpvue/preview?id=98 29 | $parameters = $request_data->get_params(); 30 | $preview = wp_get_post_autosave($parameters[id]); 31 | 32 | $url = get_bloginfo('url').'/wp-json/wp/v2/posts?id='. $parameters[id]; 33 | $ch = curl_init(); 34 | curl_setopt($ch,CURLOPT_URL, $url); 35 | curl_setopt($ch,CURLOPT_RETURNTRANSFER, true); 36 | $result = curl_exec($ch); 37 | 38 | $postarray = json_decode($result); 39 | 40 | if(count($postarray) > 0){ 41 | $postarray[0]->title->rendered = $preview->post_title; 42 | $postarray[0]->content->rendered = $preview->post_content; 43 | }else{ 44 | throw new Exception('No record found'); 45 | } 46 | return $postarray; 47 | } 48 | 49 | /** 50 | * END POST / PAGE PREVIEW 51 | * 52 | */ 53 | 54 | 55 | /** 56 | * CHANGES URL PREFIX 57 | * TO MATCH OUR VUE ROUTE 58 | * SO A PAGE WILL LOOK LIKE 59 | * /post/post-name/ 60 | * /page/page-name/ 61 | * https://stackoverflow.com/questions/17613789/wordpress-rewrite-add-base-prefix-to-pages-only * 62 | * 63 | */ 64 | 65 | function change_base_permalinks() { 66 | global $wp_rewrite; 67 | 68 | // $wp_rewrite->permalink_structure = 'post/%postname%/'; 69 | $wp_rewrite->page_structure = 'page/%pagename%'; 70 | // $wp_rewrite->extra_permastructs['category']['struct'] = 'category/%category%'; 71 | $wp_rewrite->flush_rules(); 72 | // var_dump($wp_rewrite);exit; 73 | 74 | //look into this: 75 | //https://wordpress.stackexchange.com/questions/152306/change-permalinks-structure-for-specific-category 76 | 77 | } 78 | add_action('init','change_base_permalinks'); 79 | 80 | 81 | 82 | function prepare_rest($data,$post,$request){ 83 | 84 | 85 | $_data = $data->data; 86 | 87 | 88 | //Categories 89 | $cats = get_the_category($post->ID); 90 | $_data['cats'] = $cats; 91 | 92 | 93 | 94 | //Back to data 95 | $data->data = $_data; 96 | return $data; 97 | } 98 | add_filter('rest_prepare_post', 'prepare_rest', 10,3); 99 | 100 | //ADDS FILTER TO QUERY PARAMETER 101 | 102 | add_action( 'rest_api_init', 'rest_api_filter_add_filters' ); 103 | 104 | /** 105 | * Add the necessary filter to each post type 106 | **/ 107 | function rest_api_filter_add_filters() { 108 | foreach ( get_post_types( array( 'show_in_rest' => true ), 'objects' ) as $post_type ) { 109 | add_filter( 'rest_' . $post_type->name . '_query', 'rest_api_filter_add_filter_param', 10, 2 ); 110 | } 111 | } 112 | 113 | /** 114 | * Add the filter parameter 115 | * 116 | * @param array $args The query arguments. 117 | * @param WP_REST_Request $request Full details about the request. 118 | * @return array $args. 119 | **/ 120 | function rest_api_filter_add_filter_param( $args, $request ) { 121 | // Bail out if no filter parameter is set. 122 | if ( empty( $request['filter'] ) || ! is_array( $request['filter'] ) ) { 123 | return $args; 124 | } 125 | 126 | $filter = $request['filter']; 127 | 128 | if ( isset( $filter['posts_per_page'] ) && ( (int) $filter['posts_per_page'] >= 1 && (int) $filter['posts_per_page'] <= 100 ) ) { 129 | $args['posts_per_page'] = $filter['posts_per_page']; 130 | } 131 | 132 | global $wp; 133 | $vars = apply_filters( 'query_vars', $wp->public_query_vars ); 134 | 135 | foreach ( $vars as $var ) { 136 | if ( isset( $filter[ $var ] ) ) { 137 | $args[ $var ] = $filter[ $var ]; 138 | } 139 | } 140 | return $args; 141 | } 142 | /** 143 | * below will allow comments via rest api 144 | */ 145 | function allow_anonymous_comments() { 146 | return true; 147 | } 148 | add_filter('rest_allow_anonymous_comments','allow_anonymous_comments'); 149 | 150 | ?> -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-sass'); 3 | var sourcemaps = require('gulp-sourcemaps'); 4 | var cleanCSS = require('gulp-clean-css'); 5 | 6 | 7 | var sassFiles = './css/src/*.scss'; 8 | 9 | gulp.task('css', function () { 10 | gulp.src(sassFiles) 11 | .pipe(sourcemaps.init()) 12 | .pipe(sass().on('error', sass.logError)) 13 | //.pipe(cleanCSS()) 14 | .pipe(sourcemaps.write('./')) 15 | .pipe(gulp.dest('./css/dist')); 16 | }); 17 | 18 | 19 | //run gulp and tasks in 2nd param runs 20 | gulp.task('default', ['css']); 21 | 22 | //run gulp watch - and automatically runs task in 2nd param: 23 | gulp.task('watch',function() { 24 | gulp.watch(sassFiles,['css']); 25 | }); 26 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | Vue.config.devtools = true; 2 | 3 | //partial components 4 | 5 | Vue.component('the-loop',{ 6 | template : "#the-loop", 7 | props: ['posts', 'pagers'] 8 | }) 9 | 10 | Vue.component('sidebar',{ 11 | template : "#sidebar" 12 | }) 13 | 14 | Vue.component('footer-component',{ 15 | template : "#footer" 16 | }) 17 | 18 | Vue.component('nopost',{ 19 | template : "#nopost" 20 | }) 21 | 22 | Vue.component('header-component',{ 23 | template : "#header", 24 | data : function(){ 25 | return { 26 | pages : [] 27 | } 28 | }, 29 | mounted : function(){ 30 | var _this = this; 31 | axios.get('/wp-json/wp/v2/pages?per_page=5') 32 | .then(function (response) { 33 | _this.pages = response.data; 34 | }) 35 | .catch(function (error) { 36 | console.log(error); 37 | }); 38 | } 39 | }) 40 | 41 | Vue.component('search-form',{ 42 | template : "#search-form", 43 | methods : { 44 | doSearch : function(){ 45 | this.$router.push( 46 | { name: 'search', 47 | query: { 48 | term: this.searchTerm 49 | }}); 50 | } 51 | }, 52 | data: function () { 53 | var searchTerm = this.$route.query.term 54 | ? this.$route.query.term : ""; 55 | return { 56 | searchTerm : searchTerm 57 | } 58 | }, 59 | watch : { 60 | '$route' : function (to, from) { 61 | var searchTerm = to.query.term 62 | ? to.query.term : ""; 63 | this.searchTerm = searchTerm; 64 | } 65 | } 66 | }) 67 | 68 | Vue.component('comment-form',{ 69 | template : "#comment-form", 70 | methods : { 71 | validEmail : function(email) { 72 | var re = /\S+@\S+/; 73 | return re.test(email.toLowerCase()); 74 | }, 75 | validate : function(){ 76 | 77 | this.commenterBlured = true; 78 | this.emailBlured = true; 79 | this.contentBlured = true; 80 | 81 | if( this.commenter !== '' 82 | && this.validEmail(this.email) 83 | && this.content !== ''){ 84 | this.valid = true; 85 | } 86 | }, 87 | submit : function(){ 88 | var _this = this; 89 | _this.validate(); 90 | if(_this.valid){ 91 | axios.post('/wp-json/wp/v2/comments', { 92 | author_name: _this.commenter, 93 | author_email: _this.email, 94 | content: _this.content, 95 | author_url : _this.website, 96 | post : _this.$parent.post[0].id 97 | }).then(function (response) { 98 | _this.submitted = true; 99 | }) 100 | .catch(function (error) { 101 | console.log(error); 102 | }); 103 | } 104 | } //end submit 105 | }, 106 | data: function () { 107 | return { 108 | commenter : "", 109 | commenterBlured : false, 110 | email : "", 111 | emailBlured : false, 112 | website : "", 113 | content : "", 114 | contentBlured : false, 115 | valid : false, 116 | submitted : false 117 | } 118 | } 119 | }) 120 | 121 | Vue.component('comments',{ 122 | template : "#comments", 123 | props : ['comments'] 124 | }) 125 | 126 | //components with routes 127 | 128 | const PageNotFound = Vue.component('pagenotfound',{ 129 | template : "#pagenotfound" 130 | }) 131 | 132 | const Home = Vue.component('home', { 133 | template: '#home', 134 | props: ['posts', 'pagers'] 135 | }) 136 | 137 | const Single = Vue.component('single', { 138 | template: '#single', 139 | props: ['post','comments'] 140 | }) 141 | 142 | const Page = Vue.component('page', { 143 | template: '#page', 144 | props: ['post'] 145 | }) 146 | 147 | const Archive = Vue.component('archive', { 148 | template: '#archive', 149 | props: ['posts', 'pagers'] 150 | }) 151 | 152 | const Search = Vue.component('search', { 153 | template: '#search', 154 | props: ['posts', 'pagers'] 155 | }) 156 | 157 | // 2. Define some routes 158 | // Each route should map to a component. The "component" can 159 | // either be an actual component constructor created via 160 | // Vue.extend(), or just a component options object. 161 | // We'll talk about nested routes later. 162 | const routes = [ 163 | { path: '/', component: Home }, 164 | { path: '/post/:slug', component: Single, name : 'post' }, 165 | { path: '/preview/:id', component: Single, name : 'preview' }, 166 | { path: '/page/:slug', component: Page, name : 'page' }, 167 | { path: '/category/:category', name : 'category', component: Archive }, 168 | { path: '/tag/:tag', name : 'tag', component: Archive }, 169 | { path: '/blog/', name : 'blog', component: Archive }, 170 | { path: '/search/', name : 'search', component: Search }, 171 | { path: "*", component: PageNotFound } 172 | ] 173 | 174 | // 3. Create the router instance and pass the `routes` option 175 | // You can pass in additional options here, but let's 176 | // keep it simple for now. 177 | const router = new VueRouter({ 178 | routes : routes, 179 | mode: 'history' 180 | }) 181 | 182 | // 4. Create and mount the root instance. 183 | // Make sure to inject the router with the router option to make the 184 | // whole app router-aware. 185 | const app = new Vue({ 186 | router : router, 187 | data : { 188 | "bloginfo" : { 189 | "name" : "", 190 | "url" : "", 191 | "description" : "" 192 | }, 193 | "posts" : [], 194 | "comments" : [], 195 | "post" : {}, 196 | "pagers" : [] 197 | }, 198 | created : function(){ 199 | this.getBloginfo(); 200 | this.updateData(); 201 | }, 202 | watch : { 203 | '$route' : function (to, from) { 204 | this.updateData(); 205 | } 206 | }, 207 | methods : { 208 | getBloginfo : function(){ 209 | var _this = this; 210 | var urlStr = "/wp-json/" 211 | axios.get(urlStr) 212 | .then(function (response) { 213 | _this.bloginfo.name = response.data.name; 214 | _this.bloginfo.description = response.data.description; 215 | _this.bloginfo.url = response.data.url; 216 | }) 217 | .catch(function (error) { 218 | console.log(error); 219 | }); 220 | }, 221 | buildPager : function(headers){ 222 | var items = headers['x-wp-total']; 223 | var pages = headers['x-wp-totalpages']; 224 | var pagers = []; 225 | for(var i=0;i 0){ 272 | _this.fetchComments(); 273 | } 274 | }) 275 | .catch(function (error) { 276 | console.log(error); 277 | }); 278 | }, 279 | fetchPosts : function(){ 280 | var _this = this; 281 | var urlStr = '/wp-json/wp/v2/posts?'; 282 | //CATEGORY FILTER 283 | if(!_this.isEmpty(_this.$route.params)){ 284 | if(_this.$route.name == 'category'){ 285 | urlStr += '&filter[category_name]='+_this.$route.params.category; 286 | }else if(_this.$route.name == 'tag'){ 287 | urlStr += '&filter[tag]='+_this.$route.params.tag; 288 | } 289 | } 290 | if(!_this.isEmpty(_this.$route.query)){ 291 | if(_this.$route.query.term){ //SEARCH 292 | urlStr += '&search=' + _this.$route.query.term; 293 | } 294 | if(!isNaN(_this.$route.query.page)){ //PAGING 295 | urlStr += '&page=' + _this.$route.query.page; 296 | } 297 | } 298 | 299 | //LIMIT TO 3 IN HOME - TEMP ONLY!! Find a better way to do this: 300 | if(_this.$route.path == '/'){ 301 | urlStr += '&per_page=3'; 302 | } 303 | 304 | axios.get(urlStr) 305 | .then(function (response) { 306 | _this.posts = response.data; 307 | _this.pagers = _this.buildPager(response.headers); 308 | _this.post = {}; 309 | _this.comments = []; 310 | }) 311 | .catch(function (error) { 312 | console.log(error); 313 | }); 314 | }, 315 | isEmpty : function (obj) { 316 | for(var key in obj) { 317 | if(obj.hasOwnProperty(key)) 318 | return false; 319 | } 320 | return true; 321 | } 322 | } 323 | }).$mount('#app') 324 | 325 | // Now the app has started! 326 | 327 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wp-vue-starter", 3 | "version": "1.0.0", 4 | "description": "WordPress theme using VueJS", 5 | "main": "gulpfile.js", 6 | "dependencies": { 7 | "gulp": "^3.9.1", 8 | "gulp-clean-css": "^3.9.0", 9 | "gulp-sourcemaps": "^2.6.1", 10 | "gulp-sass": "^3.1.0" 11 | }, 12 | "devDependencies": { 13 | "gulp": "^3.9.1", 14 | "gulp-clean-css": "^3.9.0", 15 | "gulp-sass": "^3.1.0", 16 | "gulp-sourcemaps": "^2.6.1" 17 | }, 18 | "scripts": { 19 | "test": "echo \"Error: no test specified\" && exit 1" 20 | }, 21 | "author": "", 22 | "license": "ISC" 23 | } 24 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: WP + VueJS Starter Theme 3 | Description: WordPress Theme using VueJS and WP REST API 4 | Author: Michael Soriano 5 | Author URI: http://michaelsoriano.com/ 6 | Version: 1.0 7 | */ 8 | 9 | /* 10 | THIS THEME IS USING FILE: 11 | /css/dist/main.css 12 | */ -------------------------------------------------------------------------------- /templates/404.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/_comment-form.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/_comments.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/_footer.php: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /templates/_header.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/_nopost.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/_search-form.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/_sidebar.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/_theloop.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/archive.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/home.php: -------------------------------------------------------------------------------- 1 | 34 | -------------------------------------------------------------------------------- /templates/page.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/search.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/single.php: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------