├── LICENSE ├── README.md ├── assets ├── css │ └── screen.css ├── fonts │ ├── casper-icons.eot │ ├── casper-icons.svg │ ├── casper-icons.ttf │ └── casper-icons.woff └── js │ ├── index.js │ └── jquery.fitvids.js ├── author.hbs ├── default.hbs ├── index.hbs ├── package.json ├── page.hbs ├── partials ├── loop.hbs └── navigation.hbs ├── post.hbs └── tag.hbs /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013-2015 Ghost Foundation 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ghost-Theme-Examples 2 | A bunch of examples of different Ghost theme customizations 3 | 4 | This repo houses different branches for each of our posts to show live examples of the code. The default code is based on the (Casper theme)[https://github.com/TryGhost/Casper] written and maintained by the official Ghost organization. 5 | 6 | Each post has their own branch with the code inside. Suggestions for improvements more than welcome! -------------------------------------------------------------------------------- /assets/css/screen.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Table of Contents 3 | ========================================================================== */ 4 | 5 | /* 6 | 7 | 0. Normalize 8 | 1. Icons 9 | 2. General 10 | 3. Utilities 11 | 4. General 12 | 5. Single Post 13 | 6. Tag Archive 14 | 7. Third Party Elements 15 | 8. Pagination 16 | 9. Footer 17 | 10. Media Queries (Tablet) 18 | 11. Media Queries (Mobile) 19 | 12. Animations 20 | 21 | */ 22 | 23 | /* ========================================================================== 24 | 0. Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified) 25 | ========================================================================== */ 26 | 27 | article, aside, details, 28 | figcaption, figure, 29 | footer, header, hgroup, 30 | main, nav, section, 31 | summary { display: block; } 32 | audio, canvas, video { display: inline-block; } 33 | audio:not([controls]) { display: none; height: 0; } 34 | [hidden], template { display: none; } 35 | html { 36 | font-family: sans-serif; 37 | -ms-text-size-adjust: 100%; 38 | -webkit-text-size-adjust: 100%; 39 | } 40 | body { margin: 0; } 41 | a { background: transparent; } 42 | a:focus { outline: thin dotted; } 43 | a:active, a:hover { outline: 0; } 44 | h1 { font-size: 2em; margin: 0.67em 0; } 45 | abbr[title] { border-bottom: 1px dotted; } 46 | b, strong { font-weight: 700; } 47 | dfn { font-style: italic; } 48 | hr { 49 | -moz-box-sizing: content-box; 50 | box-sizing: content-box; 51 | height: 0; 52 | } 53 | mark { background: #FF0; color: #000; } 54 | code, kbd, pre, 55 | samp { font-family: monospace, serif; font-size: 1em; } 56 | pre { white-space: pre-wrap; } 57 | q { quotes: "\201C" "\201D" "\2018" "\2019"; } 58 | small { font-size: 80%; } 59 | sub, sup { 60 | font-size: 75%; 61 | line-height: 0; 62 | position: relative; 63 | vertical-align: baseline; 64 | } 65 | sup { top: -0.5em; } 66 | sub { bottom: -0.25em; } 67 | img { border: 0; } 68 | svg:not(:root) { overflow: hidden; } 69 | figure { margin: 0; } 70 | fieldset { 71 | border: 1px solid #c0c0c0; 72 | margin: 0 2px; 73 | padding: 0.35em 0.625em 0.75em; 74 | } 75 | legend { border: 0; padding: 0; } 76 | button, input, select, 77 | textarea { font-family: inherit; font-size: 100%; margin: 0; } 78 | button, input { line-height: normal; } 79 | button, select { text-transform: none; } 80 | button, html input[type="button"], 81 | input[type="reset"], input[type="submit"] { 82 | -webkit-appearance: button; 83 | cursor: pointer; 84 | } 85 | button[disabled], html input[disabled] { cursor: default; } 86 | input[type="checkbox"], 87 | input[type="radio"] { box-sizing: border-box; padding: 0; } 88 | input[type="search"] { 89 | -webkit-appearance: textfield; 90 | -moz-box-sizing: content-box; 91 | -webkit-box-sizing: content-box; 92 | box-sizing: content-box; 93 | } 94 | input[type="search"]::-webkit-search-cancel-button, 95 | input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 96 | button::-moz-focus-inner, 97 | input::-moz-focus-inner { border: 0; padding: 0; } 98 | textarea { overflow: auto; vertical-align: top; } 99 | table { border-collapse: collapse; border-spacing: 0; } 100 | 101 | 102 | /* ========================================================================== 103 | 1. Icons - Sets up the icon font and respective classes 104 | ========================================================================== */ 105 | 106 | /* Import the font file with the icons in it */ 107 | @font-face { 108 | font-family: "casper-icons"; 109 | src:url("../fonts/casper-icons.eot"); 110 | src:url("../fonts/casper-icons.eot?#iefix") format("embedded-opentype"), 111 | url("../fonts/casper-icons.woff") format("woff"), 112 | url("../fonts/casper-icons.ttf") format("truetype"), 113 | url("../fonts/casper-icons.svg#icons") format("svg"); 114 | font-weight: normal; 115 | font-style: normal; 116 | } 117 | 118 | /* Apply these base styles to all icons */ 119 | [class^="icon-"]:before, [class*=" icon-"]:before { 120 | font-family: "casper-icons", "Open Sans", sans-serif; 121 | speak: none; 122 | font-style: normal; 123 | font-weight: normal; 124 | font-variant: normal; 125 | text-transform: none; 126 | line-height: 1; 127 | text-decoration: none !important; 128 | -webkit-font-smoothing: antialiased; 129 | -moz-osx-font-smoothing: grayscale; 130 | } 131 | 132 | /* Each icon is created by inserting the correct character into the 133 | content of the :before pseudo element. Like a boss. */ 134 | .icon-ghost:before { 135 | content: "\f600"; 136 | } 137 | .icon-feed:before { 138 | content: "\f601"; 139 | } 140 | .icon-twitter:before { 141 | content: "\f602"; 142 | font-size: 1.1em; 143 | } 144 | .icon-google-plus:before { 145 | content: "\f603"; 146 | } 147 | .icon-facebook:before { 148 | content: "\f604"; 149 | } 150 | .icon-arrow-left:before { 151 | content: "\f605"; 152 | } 153 | .icon-stats:before { 154 | content: "\f606"; 155 | } 156 | .icon-location:before { 157 | content: "\f607"; 158 | margin-left: -3px; /* Tracking fix */ 159 | } 160 | .icon-link:before { 161 | content: "\f608"; 162 | } 163 | 164 | 165 | /* ========================================================================== 166 | 2. General - Setting up some base styles 167 | ========================================================================== */ 168 | 169 | html { 170 | height: 100%; 171 | max-height: 100%; 172 | font-size: 62.5%; 173 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 174 | } 175 | 176 | body { 177 | height: 100%; 178 | max-height: 100%; 179 | font-family: "Merriweather", serif; 180 | letter-spacing: 0.01rem; 181 | font-size: 1.8rem; 182 | line-height: 1.75em; 183 | color: #3A4145; 184 | -webkit-font-feature-settings: 'kern' 1; 185 | -moz-font-feature-settings: 'kern' 1; 186 | -o-font-feature-settings: 'kern' 1; 187 | text-rendering: geometricPrecision; 188 | } 189 | 190 | ::-moz-selection { 191 | background: #D6EDFF; 192 | } 193 | 194 | ::selection { 195 | background: #D6EDFF; 196 | } 197 | 198 | h1, h2, h3, 199 | h4, h5, h6 { 200 | -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; 201 | -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; 202 | -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; 203 | color: #2E2E2E; 204 | line-height: 1.15em; 205 | margin: 0 0 0.4em 0; 206 | font-family: "Open Sans", sans-serif; 207 | text-rendering: geometricPrecision; 208 | } 209 | 210 | h1 { 211 | font-size: 5rem; 212 | letter-spacing: -2px; 213 | text-indent: -3px; 214 | } 215 | 216 | h2 { 217 | font-size: 3.6rem; 218 | letter-spacing: -1px; 219 | } 220 | 221 | h3 { 222 | font-size: 3rem; 223 | } 224 | 225 | h4 { 226 | font-size: 2.5rem; 227 | } 228 | 229 | h5 { 230 | font-size: 2rem; 231 | } 232 | 233 | h6 { 234 | font-size: 2rem; 235 | } 236 | 237 | a { 238 | color: #4A4A4A; 239 | transition: color 0.3s ease; 240 | } 241 | 242 | a:hover { 243 | color: #111; 244 | } 245 | 246 | p, ul, ol, dl { 247 | -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; 248 | -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; 249 | -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; 250 | margin: 0 0 1.75em 0; 251 | text-rendering: geometricPrecision; 252 | } 253 | 254 | ol, ul { 255 | padding-left: 3rem; 256 | } 257 | 258 | ol ol, ul ul, 259 | ul ol, ol ul { 260 | margin: 0 0 0.4em 0; 261 | padding-left: 2em; 262 | } 263 | 264 | dl dt { 265 | float: left; 266 | width: 180px; 267 | overflow: hidden; 268 | clear: left; 269 | text-align: right; 270 | text-overflow: ellipsis; 271 | white-space: nowrap; 272 | font-weight: 700; 273 | margin-bottom: 1em; 274 | } 275 | 276 | dl dd { 277 | margin-left: 200px; 278 | margin-bottom: 1em 279 | } 280 | 281 | li { 282 | margin: 0.4em 0; 283 | } 284 | 285 | li li { 286 | margin: 0; 287 | } 288 | 289 | hr { 290 | display: block; 291 | height: 1px; 292 | border: 0; 293 | border-top: #EFEFEF 1px solid; 294 | margin: 3.2em 0; 295 | padding: 0; 296 | } 297 | 298 | blockquote { 299 | -moz-box-sizing: border-box; 300 | box-sizing: border-box; 301 | margin: 1.75em 0 1.75em -2.2em; 302 | padding: 0 0 0 1.75em; 303 | border-left: #4A4A4A 0.4em solid; 304 | } 305 | 306 | blockquote p { 307 | margin: 0.8em 0; 308 | font-style: italic; 309 | } 310 | 311 | blockquote small { 312 | display: inline-block; 313 | margin: 0.8em 0 0.8em 1.5em; 314 | font-size: 0.9em; 315 | color: #CCC; 316 | } 317 | 318 | blockquote small:before { content: "\2014 \00A0"; } 319 | 320 | blockquote cite { 321 | font-weight: 700; 322 | } 323 | 324 | blockquote cite a { font-weight: normal; } 325 | 326 | mark { 327 | background-color: #FFC336; 328 | } 329 | 330 | code, tt { 331 | padding: 1px 3px; 332 | font-family: Inconsolata, monospace, sans-serif; 333 | font-size: 0.85em; 334 | white-space: pre-wrap; 335 | border: #E3EDF3 1px solid; 336 | background: #F7FAFB; 337 | border-radius: 2px; 338 | } 339 | 340 | pre { 341 | -moz-box-sizing: border-box; 342 | box-sizing: border-box; 343 | margin: 0 0 1.75em 0; 344 | border: #E3EDF3 1px solid; 345 | width: 100%; 346 | padding: 10px; 347 | font-family: Inconsolata, monospace, sans-serif; 348 | font-size: 0.9em; 349 | white-space: pre; 350 | overflow: auto; 351 | background: #F7FAFB; 352 | border-radius: 3px; 353 | } 354 | 355 | pre code, pre tt { 356 | font-size: inherit; 357 | white-space: pre-wrap; 358 | background: transparent; 359 | border: none; 360 | padding: 0; 361 | } 362 | 363 | kbd { 364 | display: inline-block; 365 | margin-bottom: 0.4em; 366 | padding: 1px 8px; 367 | border: #CCC 1px solid; 368 | color: #666; 369 | text-shadow: #FFF 0 1px 0; 370 | font-size: 0.9em; 371 | font-weight: 700; 372 | background: #F4F4F4; 373 | border-radius: 4px; 374 | box-shadow: 375 | 0 1px 0 rgba(0, 0, 0, 0.2), 376 | 0 1px 0 0 #fff inset; 377 | } 378 | 379 | table { 380 | -moz-box-sizing: border-box; 381 | box-sizing: border-box; 382 | margin: 1.75em 0; 383 | width: 100%; 384 | max-width: 100%; 385 | background-color: transparent; 386 | } 387 | 388 | table th, 389 | table td { 390 | padding: 8px; 391 | line-height: 20px; 392 | text-align: left; 393 | vertical-align: top; 394 | border-top: #EFEFEF 1px solid; 395 | } 396 | 397 | table th { color: #000; } 398 | 399 | table caption + thead tr:first-child th, 400 | table caption + thead tr:first-child td, 401 | table colgroup + thead tr:first-child th, 402 | table colgroup + thead tr:first-child td, 403 | table thead:first-child tr:first-child th, 404 | table thead:first-child tr:first-child td { 405 | border-top: 0; 406 | } 407 | 408 | table tbody + tbody { border-top: #EFEFEF 2px solid; } 409 | 410 | table table table { background-color: #FFF; } 411 | 412 | table tbody > tr:nth-child(odd) > td, 413 | table tbody > tr:nth-child(odd) > th { 414 | background-color: #F6F6F6; 415 | } 416 | 417 | table.plain tbody > tr:nth-child(odd) > td, 418 | table.plain tbody > tr:nth-child(odd) > th { 419 | background: transparent; 420 | } 421 | 422 | iframe, .fluid-width-video-wrapper { 423 | display: block; 424 | margin: 1.75em 0; 425 | } 426 | 427 | /* When a video is inside the fitvids wrapper, drop the 428 | margin on the iframe, cause it breaks stuff. */ 429 | .fluid-width-video-wrapper iframe { 430 | margin: 0; 431 | } 432 | 433 | 434 | /* ========================================================================== 435 | 3. Utilities - These things get used a lot 436 | ========================================================================== */ 437 | 438 | /* Clears shit */ 439 | .clearfix:before, 440 | .clearfix:after { 441 | content: " "; 442 | display: table; 443 | } 444 | .clearfix:after { clear: both; } 445 | .clearfix { zoom: 1; } 446 | 447 | /* Hides shit */ 448 | .hidden { 449 | text-indent: -9999px; 450 | visibility: hidden; 451 | display: none; 452 | } 453 | 454 | /* Creates a responsive wrapper that makes our content scale nicely */ 455 | .inner { 456 | position: relative; 457 | width: 80%; 458 | max-width: 710px; 459 | margin: 0 auto; 460 | } 461 | 462 | /* Centres vertically yo. (IE8+) */ 463 | .vertical { 464 | display: table-cell; 465 | vertical-align: middle; 466 | } 467 | 468 | /* Wraps the main content & footer */ 469 | .site-wrapper { 470 | position: relative; 471 | z-index: 10; 472 | min-height: 100%; 473 | background: #fff; 474 | -webkit-transition: -webkit-transform 0.5s ease; 475 | transition: transform 0.5s ease; 476 | } 477 | 478 | body.nav-opened .site-wrapper { 479 | overflow-x: hidden; 480 | -webkit-transform: translate3D(-240px, 0, 0); 481 | -ms-transform: translate3D(-240px, 0, 0); 482 | transform: translate3D(-240px, 0, 0); 483 | -webkit-transition: -webkit-transform 0.3s ease; 484 | transition: transform 0.3s ease; 485 | } 486 | 487 | 488 | /* ========================================================================== 489 | 4. General - The main styles for the the theme 490 | ========================================================================== */ 491 | 492 | /* Big cover image on the home page */ 493 | .main-header { 494 | position: relative; 495 | display: table; 496 | width: 100%; 497 | height: 100vh; 498 | margin-bottom: 5rem; 499 | text-align: center; 500 | background: #222 no-repeat center center; 501 | background-size: cover; 502 | overflow: hidden; 503 | } 504 | 505 | .main-header .inner { 506 | width: 80%; 507 | } 508 | 509 | .main-nav { 510 | position: relative; 511 | padding: 35px 40px; 512 | margin: 0 0 30px 0; 513 | } 514 | 515 | .main-nav a { 516 | text-decoration: none; 517 | font-family: 'Open Sans', sans-serif; 518 | } 519 | 520 | /* Navigation */ 521 | body.nav-opened .nav-cover { 522 | position: fixed; 523 | top: 0; 524 | left: 0; 525 | right: 240px; 526 | bottom: 0; 527 | z-index: 200; 528 | } 529 | 530 | .nav { 531 | position: fixed; 532 | top: 0; 533 | right: 0; 534 | bottom: 0; 535 | z-index: 5; 536 | width: 240px; 537 | opacity: 0; 538 | background: #111; 539 | margin-bottom: 0; 540 | text-align: left; 541 | overflow-y: auto; 542 | -webkit-transition: -webkit-transform 0.5s ease, 543 | opacity 0.3s ease 0.7s; 544 | transition: transform 0.5s ease, 545 | opacity 0.3s ease 0.7s; 546 | } 547 | 548 | body.nav-closed .nav { 549 | -webkit-transform: translate3D(97px, 0, 0); 550 | -ms-transform: translate3D(97px, 0, 0); 551 | transform: translate3D(97px, 0, 0); 552 | } 553 | 554 | body.nav-opened .nav { 555 | opacity: 1; 556 | -webkit-transition: -webkit-transform 0.3s ease, 557 | opacity 0s ease 0s; 558 | transition: transform 0.3s ease, 559 | opacity 0s ease 0s; 560 | -webkit-transform: translate3D(0, 0, 0); 561 | -ms-transform: translate3D(0, 0, 0); 562 | transform: translate3D(0, 0, 0); 563 | } 564 | 565 | .nav-title { 566 | position: absolute; 567 | top: 45px; 568 | left: 30px; 569 | font-size: 16px; 570 | font-weight: 100; 571 | text-transform: uppercase; 572 | color: #fff; 573 | } 574 | 575 | .nav-close { 576 | position: absolute; 577 | top: 38px; 578 | right: 25px; 579 | width: 20px; 580 | height: 20px; 581 | padding: 0; 582 | font-size: 10px; 583 | } 584 | 585 | .nav-close:focus { 586 | outline: 0; 587 | } 588 | 589 | .nav-close:before, 590 | .nav-close:after { 591 | content: ''; 592 | position: absolute; 593 | top: 0; 594 | width: 20px; 595 | height: 1px; 596 | background: rgb(150,150,150); 597 | top: 15px; 598 | -webkit-transition: background 0.15s ease; 599 | transition: background 0.15s ease; 600 | } 601 | 602 | .nav-close:before { 603 | -webkit-transform: rotate(45deg); 604 | -ms-transform: rotate(45deg); 605 | transform: rotate(45deg); 606 | } 607 | 608 | .nav-close:after { 609 | -webkit-transform: rotate(-45deg); 610 | -ms-transform: rotate(-45deg); 611 | transform: rotate(-45deg); 612 | } 613 | 614 | .nav-close:hover:before, 615 | .nav-close:hover:after { 616 | background: rgb(255,255,255); 617 | } 618 | 619 | .nav ul { 620 | padding: 90px 9% 5%; 621 | list-style: none; 622 | counter-reset: item; 623 | } 624 | 625 | .nav li:before { 626 | display: block; 627 | float: right; 628 | padding-right: 4%; 629 | padding-left: 5px; 630 | text-align: right; 631 | font-size: 1.2rem; 632 | vertical-align: bottom; 633 | color: #B8B8B8; 634 | content: counter(item, lower-roman); 635 | counter-increment: item; 636 | } 637 | .nav li { 638 | margin: 0; 639 | } 640 | .nav li a { 641 | text-decoration: none; 642 | line-height: 1.4; 643 | font-size: 1.4rem; 644 | display: block; 645 | padding: 0.6rem 4%; 646 | overflow: hidden; 647 | white-space: nowrap; 648 | text-overflow: ellipsis; 649 | } 650 | .nav li a:after { 651 | display: inline-block; 652 | content: " ......................................................."; 653 | color: rgba(255,255,255,0.2); 654 | margin-left: 5px; 655 | } 656 | .nav .nav-current:before { 657 | color: #fff; 658 | } 659 | .nav .nav-current a:after { 660 | content: " "; 661 | border-bottom: rgba(255,255,255,0.5) 1px solid; 662 | width: 100%; 663 | height: 1px; 664 | } 665 | 666 | .nav a:link, 667 | .nav a:visited { 668 | color: #B8B8B8; 669 | } 670 | 671 | .nav li.nav-current a, 672 | .nav a:hover, 673 | .nav a:active, 674 | .nav a:focus { 675 | color: #fff; 676 | } 677 | 678 | .subscribe-button { 679 | -webkit-box-sizing: border-box; 680 | -moz-box-sizing: border-box; 681 | box-sizing: border-box; 682 | display: block; 683 | position: absolute; 684 | bottom: 30px; 685 | left: 30px; 686 | right: 30px; 687 | height: 38px; 688 | padding: 0 20px; 689 | color: #111 !important; 690 | text-align: center; 691 | font-size: 12px; 692 | font-family: "Open Sans", sans-serif; 693 | text-transform: uppercase; 694 | text-decoration: none; 695 | line-height: 35px; 696 | border-radius: 3px; 697 | background: #fff; 698 | transition: all ease 0.3s; 699 | } 700 | .subscribe-button:before { 701 | font-size: 9px; 702 | margin-right: 6px; 703 | } 704 | 705 | 706 | /* Create a bouncing scroll-down arrow on homepage with cover image */ 707 | .scroll-down { 708 | display: block; 709 | position: absolute; 710 | z-index: 100; 711 | bottom: 45px; 712 | left: 50%; 713 | margin-left: -16px; 714 | width: 34px; 715 | height: 34px; 716 | font-size: 34px; 717 | text-align: center; 718 | text-decoration: none; 719 | color: rgba(255,255,255,0.7); 720 | -webkit-transform: rotate(-90deg); 721 | -ms-transform: rotate(-90deg); 722 | transform: rotate(-90deg); 723 | -webkit-animation: bounce 4s 2s infinite; 724 | animation: bounce 4s 2s infinite; 725 | } 726 | 727 | /* Stop it bouncing and increase contrast when hovered */ 728 | .scroll-down:hover { 729 | color: #fff; 730 | -webkit-animation: none; 731 | animation: none; 732 | } 733 | 734 | /* Put a semi-opaque radial gradient behind the icon to make it more visible 735 | on photos which happen to have a light background. */ 736 | .home-template .main-header:after { 737 | display: block; 738 | content: " "; 739 | width: 150px; 740 | height: 130px; 741 | border-radius: 100%; 742 | position: absolute; 743 | bottom: 0; 744 | left: 50%; 745 | margin-left: -75px; 746 | background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%); 747 | } 748 | 749 | /* Hide when there's no cover image or on page2+ */ 750 | .no-cover .scroll-down, 751 | .no-cover.main-header:after, 752 | .archive-template .scroll-down, 753 | .archive-template .main-header:after { 754 | display: none 755 | } 756 | 757 | /* Appears in the top right corner of your home page */ 758 | .blog-logo { 759 | display: block; 760 | float: left; 761 | background: none !important; 762 | border: none !important; 763 | } 764 | 765 | .blog-logo img { 766 | -webkit-box-sizing: border-box; 767 | -moz-box-sizing: border-box; 768 | box-sizing: border-box; 769 | display: block; 770 | height: 38px; 771 | padding: 1px 0 5px 0; 772 | width: auto; 773 | } 774 | 775 | .menu-button { 776 | -webkit-box-sizing: border-box; 777 | -moz-box-sizing: border-box; 778 | box-sizing: border-box; 779 | display: inline-block; 780 | float: right; 781 | height: 38px; 782 | padding: 0 15px; 783 | border: #bfc8cd 1px solid; 784 | opacity: 1; 785 | color: #9EABB3; 786 | text-align: center; 787 | font-size: 12px; 788 | text-transform: uppercase; 789 | line-height: 35px; 790 | white-space: nowrap; 791 | border-radius: 3px; 792 | background: rgba(0,0,0,0.1); 793 | transition: all 0.5s ease; 794 | } 795 | .menu-button:focus { 796 | outline: 0; 797 | } 798 | .menu-button .burger { 799 | font-size: 12px; 800 | margin-right: 6px; 801 | } 802 | 803 | body.nav-opened .menu-button { 804 | padding: 0 12px; 805 | background: #111 !important; 806 | border-color: #111 !important; 807 | color: #fff !important; 808 | -webkit-transform: translate3D(94px, 0, 0); 809 | -ms-transform: translate3D(94px, 0, 0); 810 | transform: translate3D(94px, 0, 0); 811 | transition: all 0.3s ease; 812 | } 813 | body.nav-opened .menu-button .word { 814 | opacity: 0; 815 | transition: all 0.3s ease; 816 | } 817 | 818 | /* Special styles when overlaid on an image*/ 819 | .main-nav.overlay { 820 | position: absolute; 821 | top: 0; 822 | left: 0; 823 | right: 0; 824 | height: 70px; 825 | border: none; 826 | background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); 827 | } 828 | .no-cover .main-nav.overlay, 829 | .no-cover .menu-button { 830 | background: none; 831 | } 832 | 833 | .main-nav.overlay a { 834 | color: #fff; 835 | } 836 | 837 | .main-nav.overlay .menu-button { 838 | border-color: rgba(255,255,255,0.6); 839 | } 840 | 841 | .main-nav.overlay a:hover { 842 | color: #222; 843 | border-color: #fff; 844 | background: #fff; 845 | } 846 | 847 | /* Add a border to the buttons on hover */ 848 | .menu-button:hover { 849 | border-color: #555; 850 | color: #555; 851 | } 852 | 853 | /* The details of your blog. Defined in ghost/settings/ */ 854 | .page-title { 855 | margin: 10px 0 10px 0; 856 | font-size: 5rem; 857 | letter-spacing: -1px; 858 | font-weight: 700; 859 | font-family: "Open Sans", sans-serif; 860 | color: #fff; 861 | } 862 | 863 | .page-description { 864 | margin: 0; 865 | font-size: 2rem; 866 | line-height: 1.5em; 867 | font-weight: 400; 868 | font-family: "Merriweather", serif; 869 | letter-spacing: 0.01rem; 870 | color: rgba(255,255,255,0.8); 871 | } 872 | 873 | .no-cover.main-header { 874 | min-height: 160px; 875 | max-height: 40vh; 876 | background: #f5f8fa; 877 | } 878 | 879 | .no-cover .page-title { 880 | color: rgba(0,0,0,0.8); 881 | } 882 | 883 | .no-cover .page-description { 884 | color: rgba(0,0,0,0.5); 885 | } 886 | 887 | .no-cover .main-nav.overlay .menu-button { 888 | color: rgba(0,0,0,0.4); 889 | border-color: rgba(0,0,0,0.3); 890 | } 891 | 892 | /* Add subtle load-in animation for content on the home page */ 893 | .home-template .page-title { 894 | -webkit-animation: fade-in-down 0.6s; 895 | animation: fade-in-down 0.6s; 896 | -webkit-animation-delay: 0.2s; 897 | animation-delay: 0.2s; 898 | } 899 | .home-template .page-description { 900 | -webkit-animation: fade-in-down 0.9s; 901 | animation: fade-in-down 0.9s; 902 | -webkit-animation-delay: 0.1s; 903 | animation-delay: 0.1s; 904 | } 905 | 906 | /* Every post, on every page, gets this style on its
tag */ 907 | .post { 908 | position: relative; 909 | width: 80%; 910 | max-width: 710px; 911 | margin: 4rem auto; 912 | padding-bottom: 4rem; 913 | border-bottom: #EBF2F6 1px solid; 914 | word-wrap: break-word; 915 | -moz-hyphens: auto; 916 | -ms-hyphens: auto; 917 | -webkit-hyphens: auto; 918 | hyphens: auto; 919 | } 920 | 921 | /* Add a little circle in the middle of the border-bottom on our .post 922 | just for the lolz and stylepoints. */ 923 | .post:after { 924 | display: block; 925 | content: ""; 926 | width: 7px; 927 | height: 7px; 928 | border: #E7EEF2 1px solid; 929 | position: absolute; 930 | bottom: -5px; 931 | left: 50%; 932 | margin-left: -5px; 933 | background: #FFF; 934 | border-radius: 100%; 935 | box-shadow: #FFF 0 0 0 5px; 936 | } 937 | 938 | body:not(.post-template) .post-title { 939 | font-size: 3.6rem; 940 | } 941 | 942 | .post-title a { 943 | text-decoration: none; 944 | } 945 | 946 | .post-excerpt p { 947 | margin: 0; 948 | font-size: 0.9em; 949 | line-height: 1.7em; 950 | } 951 | 952 | .read-more { 953 | text-decoration: none; 954 | } 955 | 956 | .post-meta { 957 | display: block; 958 | margin: 1.75rem 0 0 0; 959 | font-family: "Open Sans", sans-serif; 960 | font-size: 1.5rem; 961 | line-height: 2.2rem; 962 | color: #9EABB3; 963 | } 964 | 965 | .author-thumb { 966 | width: 24px; 967 | height: 24px; 968 | float: left; 969 | margin-right: 9px; 970 | border-radius: 100%; 971 | } 972 | 973 | .post-meta a { 974 | color: #9EABB3; 975 | text-decoration: none; 976 | } 977 | 978 | .post-meta a:hover { 979 | text-decoration: underline; 980 | } 981 | 982 | .user-meta { 983 | position: relative; 984 | padding: 0.3rem 40px 0 100px; 985 | min-height: 77px; 986 | } 987 | 988 | .post-date { 989 | display: inline-block; 990 | margin-left: 8px; 991 | padding-left: 12px; 992 | border-left: #d5dbde 1px solid; 993 | text-transform: uppercase; 994 | font-size: 1.3rem; 995 | white-space: nowrap; 996 | } 997 | 998 | .user-image { 999 | position: absolute; 1000 | top: 0; 1001 | left: 0; 1002 | } 1003 | 1004 | .user-name { 1005 | display: block; 1006 | font-weight: 700; 1007 | } 1008 | 1009 | .user-bio { 1010 | display: block; 1011 | max-width: 440px; 1012 | font-size: 1.4rem; 1013 | line-height: 1.5em; 1014 | } 1015 | 1016 | .publish-meta { 1017 | position: absolute; 1018 | top: 0; 1019 | right: 0; 1020 | padding: 4.3rem 0 4rem 0; 1021 | text-align: right; 1022 | } 1023 | 1024 | .publish-heading { 1025 | display: block; 1026 | font-weight: 700; 1027 | } 1028 | 1029 | .publish-date { 1030 | display: block; 1031 | font-size: 1.4rem; 1032 | line-height: 1.5em; 1033 | } 1034 | 1035 | 1036 | /* ========================================================================== 1037 | 5. Single Post - When you click on an individual post 1038 | ========================================================================== */ 1039 | 1040 | .post-template .post-header { 1041 | margin-bottom: 3.4rem; 1042 | } 1043 | 1044 | .post-template .post-title { 1045 | margin-bottom: 0; 1046 | } 1047 | 1048 | .post-template .post-meta { 1049 | margin: 0; 1050 | } 1051 | 1052 | .post-template .post-date { 1053 | padding: 0; 1054 | margin: 0; 1055 | border: none; 1056 | } 1057 | 1058 | /* Stop elements, such as img wider than the post content, from 1059 | creating horizontal scroll - slight hack due to imperfections 1060 | with browser width % calculations and rounding */ 1061 | .post-template .content { 1062 | overflow: hidden; 1063 | } 1064 | 1065 | /* Tweak the .post wrapper style */ 1066 | .post-template .post { 1067 | margin-top: 0; 1068 | border-bottom: none; 1069 | padding-bottom: 0; 1070 | } 1071 | 1072 | /* Kill that stylish little circle that was on the border, too */ 1073 | .post-template .post:after { 1074 | display: none; 1075 | } 1076 | 1077 | /* Keep images centered, and allow images wider than the main 1078 | text column to break out. */ 1079 | .post-content img { 1080 | display: block; 1081 | max-width: 126%; 1082 | height: auto; 1083 | padding: 0.6em 0; 1084 | /* Centers an image by (1) pushing its left edge to the 1085 | center of its container and (2) shifting the entire image 1086 | in the opposite direction by half its own width. 1087 | Works for images that are larger than their containers. */ 1088 | position: relative; 1089 | left: 50%; 1090 | -webkit-transform: translateX(-50%); /* for Safari and iOS */ 1091 | -ms-transform: translateX(-50%); /* for IE9 */ 1092 | transform: translateX(-50%); 1093 | } 1094 | 1095 | /* The author credit area after the post */ 1096 | .post-footer { 1097 | position: relative; 1098 | margin: 6rem 0 0 0; 1099 | padding: 6rem 0 0 0; 1100 | border-top: #EBF2F6 1px solid; 1101 | } 1102 | 1103 | .post-footer h4 { 1104 | font-size: 1.8rem; 1105 | margin: 0; 1106 | } 1107 | 1108 | .post-footer p { 1109 | margin: 1rem 0; 1110 | font-size: 1.4rem; 1111 | line-height: 1.75em; 1112 | } 1113 | 1114 | /* list of author links - location / url */ 1115 | .author-meta { 1116 | padding: 0; 1117 | margin: 0; 1118 | list-style: none; 1119 | font-size: 1.4rem; 1120 | line-height: 1; 1121 | font-style: italic; 1122 | color: #9EABB3; 1123 | } 1124 | 1125 | .author-meta a { 1126 | color: #9EABB3; 1127 | } 1128 | .author-meta a:hover { 1129 | color: #111; 1130 | } 1131 | 1132 | /* Create some space to the right for the share links */ 1133 | .post-footer .author { 1134 | margin-right: 180px; 1135 | } 1136 | 1137 | .post-footer h4 a { 1138 | color: #2e2e2e; 1139 | text-decoration: none; 1140 | } 1141 | 1142 | .post-footer h4 a:hover { 1143 | text-decoration: underline; 1144 | } 1145 | 1146 | /* Drop the share links in the space to the right. 1147 | Doing it like this means it's easier for the author bio 1148 | to be flexible at smaller screen sizes while the share 1149 | links remain at a fixed width the whole time */ 1150 | .post-footer .share { 1151 | position: absolute; 1152 | top: 6rem; 1153 | right: 0; 1154 | width: 140px; 1155 | } 1156 | 1157 | .post-footer .share a { 1158 | font-size: 1.8rem; 1159 | display: inline-block; 1160 | margin: 1rem 1.6rem 1.6rem 0; 1161 | color: #BBC7CC; 1162 | text-decoration: none; 1163 | } 1164 | 1165 | .post-footer .share a:hover { 1166 | color: #50585D; 1167 | } 1168 | 1169 | 1170 | /* ========================================================================== 1171 | 6. Author profile 1172 | ========================================================================== */ 1173 | 1174 | .post-head.main-header { 1175 | height: 65vh; 1176 | min-height: 180px; 1177 | } 1178 | 1179 | .no-cover.post-head.main-header { 1180 | height: 85px; 1181 | min-height: 0; 1182 | margin-bottom: 0; 1183 | background: transparent; 1184 | } 1185 | 1186 | .tag-head.main-header { 1187 | height: 40vh; 1188 | min-height: 180px; 1189 | } 1190 | 1191 | .author-head.main-header { 1192 | height: 40vh; 1193 | min-height: 180px; 1194 | } 1195 | 1196 | .no-cover.author-head.main-header { 1197 | height: 10vh; 1198 | min-height: 100px; 1199 | background: transparent; 1200 | } 1201 | 1202 | .author-profile { 1203 | padding: 0 15px 5rem 15px; 1204 | border-bottom: #EBF2F6 1px solid; 1205 | text-align: center; 1206 | } 1207 | 1208 | /* Add a little circle in the middle of the border-bottom */ 1209 | .author-profile:after { 1210 | display: block; 1211 | content: ""; 1212 | width: 7px; 1213 | height: 7px; 1214 | border: #E7EEF2 1px solid; 1215 | position: absolute; 1216 | bottom: -5px; 1217 | left: 50%; 1218 | margin-left: -5px; 1219 | background: #FFF; 1220 | border-radius: 100%; 1221 | box-shadow: #FFF 0 0 0 5px; 1222 | } 1223 | 1224 | .author-image { 1225 | -webkit-box-sizing: border-box; 1226 | -moz-box-sizing: border-box; 1227 | box-sizing: border-box; 1228 | display: block; 1229 | position: absolute; 1230 | top: -40px; 1231 | left: 50%; 1232 | margin-left: -40px; 1233 | width: 80px; 1234 | height: 80px; 1235 | border-radius: 100%; 1236 | overflow: hidden; 1237 | padding: 6px; 1238 | background: #fff; 1239 | z-index: 2; 1240 | box-shadow: #E7EEF2 0 0 0 1px; 1241 | } 1242 | 1243 | .author-image .img { 1244 | position: relative; 1245 | display: block; 1246 | width: 100%; 1247 | height: 100%; 1248 | background-size: cover; 1249 | background-position: center center; 1250 | border-radius: 100%; 1251 | } 1252 | 1253 | .author-profile .author-image { 1254 | position: relative; 1255 | left: auto; 1256 | top: auto; 1257 | width: 120px; 1258 | height: 120px; 1259 | padding: 3px; 1260 | margin: -100px auto 0 auto; 1261 | box-shadow: none; 1262 | } 1263 | 1264 | .author-title { 1265 | margin: 1.5rem 0 1rem; 1266 | } 1267 | 1268 | .author-bio { 1269 | font-size: 1.8rem; 1270 | line-height: 1.5em; 1271 | font-weight: 200; 1272 | color: #50585D; 1273 | letter-spacing: 0; 1274 | text-indent: 0; 1275 | } 1276 | 1277 | .author-meta { 1278 | margin: 1.6rem 0; 1279 | } 1280 | /* Location, website, and link */ 1281 | .author-profile .author-meta { 1282 | margin: 2rem 0; 1283 | font-family: "Merriweather", serif; 1284 | letter-spacing: 0.01rem; 1285 | font-size: 1.7rem; 1286 | } 1287 | .author-meta span { 1288 | display: inline-block; 1289 | margin: 0 2rem 1rem 0; 1290 | word-wrap: break-word; 1291 | } 1292 | .author-meta a { 1293 | text-decoration: none; 1294 | } 1295 | 1296 | /* Turn off meta for page2+ to make room for extra 1297 | pagination prev/next links */ 1298 | .archive-template .author-profile .author-meta { 1299 | display: none; 1300 | } 1301 | 1302 | /* ========================================================================== 1303 | 7. Third Party Elements - Embeds from other services 1304 | ========================================================================== */ 1305 | 1306 | /* Github */ 1307 | .gist table { 1308 | margin: 0; 1309 | font-size: 1.4rem; 1310 | } 1311 | .gist td { 1312 | line-height: 1.4; 1313 | } 1314 | .gist .line-number { 1315 | min-width: 25px; 1316 | } 1317 | 1318 | /* Pastebin */ 1319 | .content .embedPastebin { 1320 | margin-bottom: 1.75em; 1321 | } 1322 | 1323 | /* ========================================================================== 1324 | 8. Pagination - Tools to let you flick between pages 1325 | ========================================================================== */ 1326 | 1327 | /* The main wrapper for our pagination links */ 1328 | .pagination { 1329 | position: relative; 1330 | width: 80%; 1331 | max-width: 710px; 1332 | margin: 4rem auto; 1333 | font-family: "Open Sans", sans-serif; 1334 | font-size: 1.3rem; 1335 | color: #9EABB3; 1336 | text-align: center; 1337 | } 1338 | 1339 | .pagination a { 1340 | color: #9EABB3; 1341 | transition: all 0.2s ease; 1342 | } 1343 | 1344 | /* Push the previous/next links out to the left/right */ 1345 | .older-posts, 1346 | .newer-posts { 1347 | position: absolute; 1348 | display: inline-block; 1349 | padding: 0 15px; 1350 | border: #bfc8cd 1px solid; 1351 | text-decoration: none; 1352 | border-radius: 4px; 1353 | transition: border 0.3s ease; 1354 | } 1355 | 1356 | .older-posts { 1357 | right: 0; 1358 | } 1359 | 1360 | .page-number { 1361 | display: inline-block; 1362 | padding: 2px 0; 1363 | min-width: 100px; 1364 | } 1365 | 1366 | .newer-posts { 1367 | left: 0; 1368 | } 1369 | 1370 | .older-posts:hover, 1371 | .newer-posts:hover { 1372 | color: #889093; 1373 | border-color: #98a0a4; 1374 | } 1375 | 1376 | .extra-pagination { 1377 | display: none; 1378 | border-bottom: #EBF2F6 1px solid; 1379 | } 1380 | .extra-pagination:after { 1381 | display: block; 1382 | content: ""; 1383 | width: 7px; 1384 | height: 7px; 1385 | border: #E7EEF2 1px solid; 1386 | position: absolute; 1387 | bottom: -5px; 1388 | left: 50%; 1389 | margin-left: -5px; 1390 | background: #FFF; 1391 | border-radius: 100%; 1392 | box-shadow: #FFF 0 0 0 5px; 1393 | } 1394 | .extra-pagination .pagination { 1395 | width: auto; 1396 | } 1397 | 1398 | /* On page2+ make all the headers smaller */ 1399 | .archive-template .main-header { 1400 | max-height: 30vh; 1401 | } 1402 | 1403 | /* On page2+ show extra pagination controls at the top of post list */ 1404 | .archive-template .extra-pagination { 1405 | display: block; 1406 | } 1407 | 1408 | 1409 | /* ========================================================================== 1410 | 9. Footer - The bottom of every page 1411 | ========================================================================== */ 1412 | 1413 | .site-footer { 1414 | position: relative; 1415 | margin: 8rem 0 0 0; 1416 | padding: 0.5rem 15px; 1417 | border-top: #EBF2F6 1px solid; 1418 | font-family: "Open Sans", sans-serif; 1419 | font-size: 1rem; 1420 | line-height: 1.75em; 1421 | color: #BBC7CC; 1422 | } 1423 | 1424 | .site-footer a { 1425 | color: #BBC7CC; 1426 | text-decoration: none; 1427 | font-weight: bold; 1428 | } 1429 | 1430 | .site-footer a:hover { 1431 | color: #50585D; 1432 | } 1433 | 1434 | .poweredby { 1435 | display: block; 1436 | width: 45%; 1437 | float: right; 1438 | text-align: right; 1439 | } 1440 | 1441 | .copyright { 1442 | display: block; 1443 | width: 45%; 1444 | float: left; 1445 | } 1446 | 1447 | 1448 | /* ========================================================================== 1449 | 10. Media Queries - Smaller than 900px 1450 | ========================================================================== */ 1451 | 1452 | @media only screen and (max-width: 900px) { 1453 | 1454 | blockquote { 1455 | margin-left: 0; 1456 | } 1457 | 1458 | .main-header { 1459 | -webkit-box-sizing: border-box; 1460 | -moz-box-sizing: border-box; 1461 | box-sizing: border-box; 1462 | height: auto; 1463 | min-height: 240px; 1464 | height: 60vh; 1465 | padding: 15% 0; 1466 | } 1467 | 1468 | .scroll-down, 1469 | .home-template .main-header:after { display: none; } 1470 | 1471 | .archive-template .main-header { 1472 | min-height: 180px; 1473 | padding: 10% 0; 1474 | } 1475 | 1476 | .blog-logo img { 1477 | padding: 4px 0; 1478 | } 1479 | 1480 | .page-title { 1481 | font-size: 4rem; 1482 | letter-spacing: -1px; 1483 | } 1484 | 1485 | .page-description { 1486 | font-size: 1.8rem; 1487 | line-height: 1.5em; 1488 | } 1489 | 1490 | .post { 1491 | font-size: 0.95em 1492 | } 1493 | 1494 | body:not(.post-template) .post-title { 1495 | font-size: 3.2rem; 1496 | } 1497 | 1498 | hr { 1499 | margin: 2.4em 0; 1500 | } 1501 | 1502 | ol, ul { 1503 | padding-left: 2em; 1504 | } 1505 | 1506 | h1 { 1507 | font-size: 4.5rem; 1508 | text-indent: -2px; 1509 | } 1510 | 1511 | h2 { 1512 | font-size: 3.6rem; 1513 | } 1514 | 1515 | h3 { 1516 | font-size: 3.1rem; 1517 | } 1518 | 1519 | h4 { 1520 | font-size: 2.5rem; 1521 | } 1522 | 1523 | h5 { 1524 | font-size: 2.2rem; 1525 | } 1526 | 1527 | h6 { 1528 | font-size: 1.8rem; 1529 | } 1530 | 1531 | .author-profile { 1532 | padding-bottom: 4rem; 1533 | } 1534 | 1535 | .author-profile .author-bio { 1536 | font-size: 1.6rem; 1537 | } 1538 | 1539 | .author-meta span { 1540 | display: block; 1541 | margin: 1.5rem 0; 1542 | } 1543 | .author-profile .author-meta span { 1544 | font-size: 1.6rem; 1545 | } 1546 | 1547 | .post-head.main-header { 1548 | height:45vh; 1549 | } 1550 | 1551 | .tag-head.main-header, 1552 | .author-head.main-header { 1553 | height: 30vh; 1554 | } 1555 | 1556 | .no-cover.post-head.main-header { 1557 | height: 55px; 1558 | padding: 0; 1559 | } 1560 | 1561 | .no-cover.author-head.main-header { 1562 | padding: 0; 1563 | } 1564 | 1565 | } 1566 | 1567 | 1568 | /* ========================================================================== 1569 | 11. Media Queries - Smaller than 500px 1570 | ========================================================================== */ 1571 | 1572 | @media only screen and (max-width: 500px) { 1573 | 1574 | .main-header { 1575 | margin-bottom: 15px; 1576 | height: 40vh; 1577 | } 1578 | 1579 | .no-cover.main-header { 1580 | height: 30vh; 1581 | } 1582 | 1583 | .archive-template .main-header { 1584 | max-height: 20vh; 1585 | min-height: 160px; 1586 | padding: 10% 0; 1587 | } 1588 | 1589 | .main-nav { 1590 | padding: 5px; 1591 | margin-bottom: 2rem; 1592 | } 1593 | 1594 | .blog-logo { 1595 | padding: 5px; 1596 | } 1597 | 1598 | .blog-logo img { 1599 | height: 30px; 1600 | } 1601 | 1602 | .menu-button { 1603 | padding: 0 5px; 1604 | border-radius: 0; 1605 | border-color: transparent; 1606 | color: #2e2e2e; 1607 | background: transparent; 1608 | } 1609 | .menu-button:hover { 1610 | color: #2e2e2e; 1611 | border-color: transparent; 1612 | background: none; 1613 | } 1614 | body.nav-opened .menu-button { 1615 | background: none !important; 1616 | border: transparent !important; 1617 | } 1618 | 1619 | .main-nav.overlay a:hover { 1620 | color: #fff; 1621 | border-color: transparent; 1622 | background: transparent; 1623 | } 1624 | 1625 | .no-cover .main-nav.overlay { 1626 | background: none; 1627 | } 1628 | .no-cover .main-nav.overlay .menu-button { 1629 | border: none; 1630 | } 1631 | 1632 | .main-nav.overlay .menu-button { 1633 | border-color: transparent; 1634 | } 1635 | 1636 | .nav-title { 1637 | top: 25px; 1638 | 1639 | } 1640 | 1641 | .nav-close { 1642 | position: absolute; 1643 | top: 18px; 1644 | } 1645 | 1646 | .nav ul { 1647 | padding: 60px 9% 5%; 1648 | } 1649 | 1650 | .inner, 1651 | .pagination { 1652 | width: auto; 1653 | margin: 2rem auto; 1654 | } 1655 | 1656 | .post { 1657 | width: auto; 1658 | margin-top: 2rem; 1659 | margin-bottom: 2rem; 1660 | margin-left: 16px; 1661 | margin-right: 16px; 1662 | padding-bottom: 2rem; 1663 | line-height: 1.65em; 1664 | } 1665 | 1666 | .post-date { 1667 | display: none; 1668 | } 1669 | 1670 | .post-template .post-header { 1671 | margin-bottom: 2rem; 1672 | } 1673 | 1674 | .post-template .post-date { 1675 | display: inline-block; 1676 | } 1677 | 1678 | hr { 1679 | margin: 1.75em 0; 1680 | } 1681 | 1682 | p, ul, ol, dl { 1683 | font-size: 0.95em; 1684 | margin: 0 0 2.5rem 0; 1685 | } 1686 | 1687 | .page-title { 1688 | font-size: 3rem; 1689 | } 1690 | 1691 | .post-excerpt p { 1692 | font-size: 0.85em; 1693 | } 1694 | 1695 | .page-description { 1696 | font-size: 1.6rem; 1697 | } 1698 | 1699 | h1, h2, h3, 1700 | h4, h5, h6 { 1701 | margin: 0 0 0.3em 0; 1702 | } 1703 | 1704 | h1 { 1705 | font-size: 2.8rem; 1706 | letter-spacing: -1px; 1707 | } 1708 | 1709 | h2 { 1710 | font-size: 2.4rem; 1711 | letter-spacing: 0; 1712 | } 1713 | 1714 | h3 { 1715 | font-size: 2.1rem; 1716 | } 1717 | 1718 | h4 { 1719 | font-size: 1.9rem; 1720 | } 1721 | 1722 | h5 { 1723 | font-size: 1.8rem; 1724 | } 1725 | 1726 | h6 { 1727 | font-size: 1.8rem; 1728 | } 1729 | 1730 | body:not(.post-template) .post-title { 1731 | font-size: 2.5rem; 1732 | } 1733 | 1734 | .post-template .post { 1735 | padding-bottom: 0; 1736 | margin-bottom: 0; 1737 | } 1738 | 1739 | .post-template .site-footer { 1740 | margin-top: 0; 1741 | } 1742 | 1743 | .post-content img { 1744 | padding: 0; 1745 | width: calc(100% + 32px); /* expand with to image + margins */ 1746 | min-width: 0; 1747 | max-width: 112%; /* fallback when calc doesn't work */ 1748 | } 1749 | 1750 | .post-meta { 1751 | font-size: 1.3rem; 1752 | margin-top: 1rem; 1753 | } 1754 | 1755 | .post-footer { 1756 | padding: 5rem 0 3rem 0; 1757 | text-align: center; 1758 | } 1759 | 1760 | .post-footer .author { 1761 | margin: 0 0 2rem 0; 1762 | padding: 0 0 1.6rem 0; 1763 | border-bottom: #EBF2F6 1px dashed; 1764 | } 1765 | 1766 | .post-footer .share { 1767 | position: static; 1768 | width: auto; 1769 | } 1770 | 1771 | .post-footer .share a { 1772 | margin: 1.4rem 0.8rem 0 0.8rem; 1773 | } 1774 | 1775 | .author-meta li { 1776 | float: none; 1777 | margin: 0; 1778 | line-height: 1.75em; 1779 | } 1780 | 1781 | .author-meta li:before { 1782 | display: none; 1783 | } 1784 | 1785 | .older-posts, 1786 | .newer-posts { 1787 | position: static; 1788 | margin: 10px 0; 1789 | } 1790 | 1791 | .page-number { 1792 | display: block; 1793 | } 1794 | 1795 | .site-footer { 1796 | margin-top: 3rem; 1797 | } 1798 | 1799 | .author-profile { 1800 | padding-bottom: 2rem; 1801 | } 1802 | 1803 | .post-head.main-header { 1804 | height: 30vh; 1805 | } 1806 | 1807 | .tag-head.main-header, 1808 | .author-head.main-header { 1809 | height: 20vh; 1810 | } 1811 | 1812 | .author-profile .author-image { 1813 | margin-top: -70px; 1814 | } 1815 | 1816 | .author-profile .author-meta span { 1817 | font-size: 1.4rem; 1818 | } 1819 | 1820 | .archive-template .main-header .page-description { 1821 | display: none; 1822 | } 1823 | 1824 | } 1825 | 1826 | 1827 | /* ========================================================================== 1828 | 12. Animations 1829 | ========================================================================== */ 1830 | 1831 | /* Used to fade in title/desc on the home page */ 1832 | @-webkit-keyframes fade-in-down { 1833 | 0% { 1834 | opacity: 0; 1835 | -webkit-transform: translateY(-10px); 1836 | transform: translateY(-10px); 1837 | } 1838 | 100% { 1839 | opacity: 1; 1840 | -webkit-transform: translateY(0); 1841 | transform: translateY(0); 1842 | } 1843 | } 1844 | @keyframes fade-in-down { 1845 | 0% { 1846 | opacity: 0; 1847 | -webkit-transform: translateY(-10px); 1848 | transform: translateY(-10px); 1849 | } 1850 | 100% { 1851 | opacity: 1; 1852 | -webkit-transform: translateY(0); 1853 | transform: translateY(0); 1854 | } 1855 | } 1856 | 1857 | /* Used to bounce .scroll-down on home page */ 1858 | @-webkit-keyframes bounce { 1859 | 0%, 10%, 25%, 40%, 50% { 1860 | -webkit-transform: translateY(0) rotate(-90deg); 1861 | transform: translateY(0) rotate(-90deg); 1862 | } 1863 | 20% { 1864 | -webkit-transform: translateY(-10px) rotate(-90deg); 1865 | transform: translateY(-10px) rotate(-90deg); 1866 | } 1867 | 30% { 1868 | -webkit-transform: translateY(-5px) rotate(-90deg); 1869 | transform: translateY(-5px) rotate(-90deg); 1870 | } 1871 | } 1872 | @keyframes bounce { 1873 | 0%, 20%, 50%, 80%, 100% { 1874 | -webkit-transform: translateY(0) rotate(-90deg); 1875 | transform: translateY(0) rotate(-90deg); 1876 | } 1877 | 40% { 1878 | -webkit-transform: translateY(-10px) rotate(-90deg); 1879 | transform: translateY(-10px) rotate(-90deg); 1880 | } 1881 | 60% { 1882 | -webkit-transform: translateY(-5px) rotate(-90deg); 1883 | transform: translateY(-5px) rotate(-90deg); 1884 | } 1885 | } 1886 | 1887 | 1888 | /* ========================================================================== 1889 | End of file. Animations should be the last thing here. Do not add stuff 1890 | below this point, or it will probably fuck everything up. 1891 | ========================================================================== */ 1892 | -------------------------------------------------------------------------------- /assets/fonts/casper-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HowtoGhost/Ghost-Theme-Examples/3d64aa879d6f38b07bbc18cab8c90d26b58f0cd9/assets/fonts/casper-icons.eot -------------------------------------------------------------------------------- /assets/fonts/casper-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/fonts/casper-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HowtoGhost/Ghost-Theme-Examples/3d64aa879d6f38b07bbc18cab8c90d26b58f0cd9/assets/fonts/casper-icons.ttf -------------------------------------------------------------------------------- /assets/fonts/casper-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HowtoGhost/Ghost-Theme-Examples/3d64aa879d6f38b07bbc18cab8c90d26b58f0cd9/assets/fonts/casper-icons.woff -------------------------------------------------------------------------------- /assets/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main JS file for Casper behaviours 3 | */ 4 | 5 | /* globals jQuery, document */ 6 | (function ($, undefined) { 7 | "use strict"; 8 | 9 | var $document = $(document); 10 | 11 | $document.ready(function () { 12 | 13 | var $postContent = $(".post-content"); 14 | $postContent.fitVids(); 15 | 16 | $(".scroll-down").arctic_scroll(); 17 | 18 | $(".menu-button, .nav-cover, .nav-close").on("click", function(e){ 19 | e.preventDefault(); 20 | $("body").toggleClass("nav-opened nav-closed"); 21 | }); 22 | 23 | }); 24 | 25 | // Arctic Scroll by Paul Adam Davis 26 | // https://github.com/PaulAdamDavis/Arctic-Scroll 27 | $.fn.arctic_scroll = function (options) { 28 | 29 | var defaults = { 30 | elem: $(this), 31 | speed: 500 32 | }, 33 | 34 | allOptions = $.extend(defaults, options); 35 | 36 | allOptions.elem.click(function (event) { 37 | event.preventDefault(); 38 | var $this = $(this), 39 | $htmlBody = $('html, body'), 40 | offset = ($this.attr('data-offset')) ? $this.attr('data-offset') : false, 41 | position = ($this.attr('data-position')) ? $this.attr('data-position') : false, 42 | toMove; 43 | 44 | if (offset) { 45 | toMove = parseInt(offset); 46 | $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed); 47 | } else if (position) { 48 | toMove = parseInt(position); 49 | $htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed); 50 | } else { 51 | $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed); 52 | } 53 | }); 54 | 55 | }; 56 | })(jQuery); 57 | -------------------------------------------------------------------------------- /assets/js/jquery.fitvids.js: -------------------------------------------------------------------------------- 1 | /*global jQuery */ 2 | /*jshint browser:true */ 3 | /*! 4 | * FitVids 1.1 5 | * 6 | * Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com 7 | * Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ 8 | * Released under the WTFPL license - http://sam.zoy.org/wtfpl/ 9 | * 10 | */ 11 | 12 | (function( $ ){ 13 | 14 | "use strict"; 15 | 16 | $.fn.fitVids = function( options ) { 17 | var settings = { 18 | customSelector: null 19 | }; 20 | 21 | if(!document.getElementById('fit-vids-style')) { 22 | // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js 23 | var head = document.head || document.getElementsByTagName('head')[0]; 24 | var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}'; 25 | var div = document.createElement('div'); 26 | div.innerHTML = '

x

'; 27 | head.appendChild(div.childNodes[1]); 28 | } 29 | 30 | if ( options ) { 31 | $.extend( settings, options ); 32 | } 33 | 34 | return this.each(function(){ 35 | var selectors = [ 36 | "iframe[src*='player.vimeo.com']", 37 | "iframe[src*='youtube.com']", 38 | "iframe[src*='youtube-nocookie.com']", 39 | "iframe[src*='kickstarter.com'][src*='video.html']", 40 | "object", 41 | "embed" 42 | ]; 43 | 44 | if (settings.customSelector) { 45 | selectors.push(settings.customSelector); 46 | } 47 | 48 | var $allVideos = $(this).find(selectors.join(',')); 49 | $allVideos = $allVideos.not("object object"); // SwfObj conflict patch 50 | 51 | $allVideos.each(function(){ 52 | var $this = $(this); 53 | if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } 54 | var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(), 55 | width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(), 56 | aspectRatio = height / width; 57 | if(!$this.attr('id')){ 58 | var videoID = 'fitvid' + Math.floor(Math.random()*999999); 59 | $this.attr('id', videoID); 60 | } 61 | $this.wrap('
').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%"); 62 | $this.removeAttr('height').removeAttr('width'); 63 | }); 64 | }); 65 | }; 66 | // Works with either jQuery or Zepto 67 | })( window.jQuery || window.Zepto ); 68 | -------------------------------------------------------------------------------- /author.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }} 3 | 4 | {{! The big featured header }} 5 | 6 | {{! Everything inside the #author tags pulls data from the author }} 7 | {{#author}} 8 |
9 | 15 |
16 | 17 |
18 | {{#if image}} 19 |
20 |
21 |
22 | {{/if}} 23 |

{{name}}

24 | {{#if bio}} 25 |

{{bio}}

26 | {{/if}} 27 |
28 | {{#if location}}{{location}}{{/if}} 29 | {{#if website}}{{website}}{{/if}} 30 | {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} 31 |
32 |
33 | {{/author}} 34 | 35 | {{! The main content area on the homepage }} 36 |
37 | 38 | {{! The tag below includes the post loop - partials/loop.hbs }} 39 | {{> "loop"}} 40 | 41 |
42 | -------------------------------------------------------------------------------- /default.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{! Document Settings }} 5 | 6 | 7 | 8 | {{! Page Meta }} 9 | {{meta_title}} 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | {{! Styles'n'Scripts }} 18 | 19 | 20 | 21 | {{! Ghost outputs important style and meta data with this tag }} 22 | {{ghost_head}} 23 | 24 | 25 | 26 | {{navigation}} 27 | 28 |
29 | 30 | {{! Everything else gets inserted here }} 31 | {{{body}}} 32 | 33 | 37 | 38 |
39 | 40 | {{! Ghost outputs important scripts and data with this tag }} 41 | {{ghost_foot}} 42 | 43 | {{! The main JavaScript file for Casper }} 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /index.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }} 3 | 4 | {{! The big featured header }} 5 |
6 | 12 |
13 |
14 |

{{@blog.title}}

15 |

{{@blog.description}}

16 |
17 |
18 | 19 |
20 | 21 | {{! The main content area on the homepage }} 22 |
23 | 24 | {{! The tag below includes the post loop - partials/loop.hbs }} 25 | {{> "loop"}} 26 | 27 |
28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Casper", 3 | "version": "1.1.7" 4 | } 5 | -------------------------------------------------------------------------------- /page.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 | {{! This is a page template. A page outputs content just like any other post, and has all the same 4 | attributes by default, but you can also customise it to behave differently if you prefer. }} 5 | 6 | {{! Everything inside the #post tags pulls data from the page }} 7 | {{#post}} 8 | 9 |
10 | 16 |
17 | 18 |
19 |
20 | 21 |
22 |

{{title}}

23 |
24 | 25 |
26 | {{content}} 27 |
28 | 29 |
30 |
31 | {{/post}} 32 | -------------------------------------------------------------------------------- /partials/loop.hbs: -------------------------------------------------------------------------------- 1 | {{! Previous/next page links - only displayed on page 2+ }} 2 |
3 | {{pagination}} 4 |
5 | 6 | {{! This is the post loop - each post will be output using this markup }} 7 | {{#foreach posts}} 8 |
9 |
10 |

{{{title}}}

11 |
12 |
13 |

{{excerpt words="26"}} »

14 |
15 |
16 | {{#if author.image}}Author image{{/if}} 17 | {{author}} 18 | {{tags prefix=" on "}} 19 | 20 |
21 |
22 | {{/foreach}} 23 | 24 | {{! Previous/next page links - displayed on every page }} 25 | {{pagination}} 26 | -------------------------------------------------------------------------------- /partials/navigation.hbs: -------------------------------------------------------------------------------- 1 |
2 |

Menu

3 | 4 | 5 | 6 | 11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /post.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 | {{! The comment above "< default" means - insert everything in this file into 4 | the {body} of the default.hbs template, which contains our header/footer. }} 5 | 6 | {{! Everything inside the #post tags pulls data from the post }} 7 | {{#post}} 8 | 9 |
10 | 16 |
17 | 18 |
19 |
20 | 21 |
22 |

{{title}}

23 |
24 | {{tags prefix=" on "}} 25 |
26 |
27 | 28 |
29 | {{content}} 30 |
31 | 32 | 76 | 77 |
78 |
79 | 80 | {{/post}} 81 | -------------------------------------------------------------------------------- /tag.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }} 3 | 4 | {{! If we have a tag cover, display that - else blog cover - else nothing }} 5 |
6 | 12 |
13 |
14 |

{{tag.name}}

15 |

16 | {{#if tag.description}} 17 | {{tag.description}} 18 | {{else}} 19 | A {{pagination.total}}-post collection 20 | {{/if}} 21 |

22 |
23 |
24 |
25 | 26 | {{! The main content area on the homepage }} 27 |
28 | 29 | {{! The tag below includes the post loop - partials/loop.hbs }} 30 | {{> "loop"}} 31 | 32 |
33 | --------------------------------------------------------------------------------