├── assets ├── webfonts │ ├── fa-brands-400.eot │ ├── fa-brands-400.ttf │ ├── fa-solid-900.eot │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff │ ├── fa-brands-400.woff │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.eot │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff │ ├── fa-regular-400.woff2 │ └── fa-solid-900.woff2 ├── scss │ ├── main.scss │ ├── _variables.scss │ ├── _vendors.scss │ ├── _pagination.scss │ ├── _loop.scss │ ├── _footer.scss │ ├── _share-selected-text.scss │ ├── _members.scss │ ├── _base.scss │ ├── _header.scss │ └── _post.scss ├── js │ ├── config.js │ └── main.js └── img │ └── x.svg ├── .gitignore ├── routes.yaml ├── LICENSE.md ├── partials ├── theme_head.hbs ├── navigation.hbs ├── pagination.hbs ├── loop-featured.hbs ├── theme_footer.hbs ├── loop.hbs └── theme_header.hbs ├── default.hbs ├── members ├── signin.hbs ├── account.hbs └── signup.hbs ├── index.hbs ├── tag.hbs ├── package.json ├── page.hbs ├── author.hbs ├── gulpfile.js ├── locales └── en.json ├── post.hbs └── amp.hbs /assets/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /assets/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /assets/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /assets/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HauntedThemes/joelma/HEAD/assets/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | b-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | node_modules 16 | package-lock.json 17 | 18 | .DS_Store 19 | package-lock.json -------------------------------------------------------------------------------- /assets/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import "_vendors"; 2 | @import "_variables"; 3 | @import "_base"; 4 | @import "_header"; 5 | @import "_post"; 6 | @import "_loop"; 7 | @import "_pagination"; 8 | @import "_share-selected-text"; 9 | @import "_members"; 10 | @import "_footer"; -------------------------------------------------------------------------------- /assets/js/config.js: -------------------------------------------------------------------------------- 1 | var config = { 2 | 'share-selected-text': true, 3 | 'load-more': false, 4 | 'infinite-scroll': false, 5 | 'infinite-scroll-step': 1, 6 | 'disqus-shortname': 'hauntedthemes-demo', 7 | 'content-api-host': '', 8 | 'content-api-key': '', 9 | }; -------------------------------------------------------------------------------- /routes.yaml: -------------------------------------------------------------------------------- 1 | routes: 2 | /signup/: members/signup 3 | /signin/: members/signin 4 | /account/: members/account 5 | 6 | collections: 7 | /: 8 | permalink: /{slug}/ 9 | template: index 10 | 11 | taxonomies: 12 | tag: /tag/{slug}/ 13 | author: /author/{slug}/ -------------------------------------------------------------------------------- /assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $black: #000000; 2 | $white: #ffffff; 3 | $purple: #667EEA; 4 | $red: #ea6666; 5 | $grey-1: #A0A8BD; 6 | $grey-2: #54575d; 7 | $grey-3: #202226; 8 | $grey-4: #eceef2; 9 | 10 | $main_font: "sofia-pro", "Ubuntu", sans-serif; 11 | $icons_font: Font Awesome\ 5 Free; 12 | 13 | $extra_small: 575px; 14 | $small: 767px; 15 | $medium: 991px; 16 | $large: 1199px; -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Joelma - Writer Ghost Theme by Haunted Themes 2 | ============================ 3 | 4 | > Copyright (C) HauntedThemes SRL 5 | > https://www.hauntedthemes.com 6 | 7 | This theme is available as part of the HauntedThemes.com membership. 8 | The membership provides access to important theme updates and tech support, as well as the rest of our awesome Ghost Themes. 9 | 10 | All themes are released under the GNU Public License version 2.0. 11 | 12 | https://www.hauntedthemes.com/terms-of-service/ 13 | https://www.hauntedthemes.com/privacy-policy/ -------------------------------------------------------------------------------- /assets/scss/_vendors.scss: -------------------------------------------------------------------------------- 1 | @import "node_modules/bootstrap/scss/bootstrap"; 2 | @import "node_modules/highlight.js/scss/default"; 3 | @import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome"; 4 | @import "node_modules/@fortawesome/fontawesome-free/scss/brands"; 5 | @import "node_modules/@fortawesome/fontawesome-free/scss/solid"; 6 | @import "node_modules/@fortawesome/fontawesome-free/scss/regular"; 7 | @import "node_modules/highlight.js/scss/default"; 8 | @import "node_modules/share-selected-text/dist/shareSelectedText.min"; 9 | @import "node_modules/swiper/css/swiper.min"; 10 | -------------------------------------------------------------------------------- /partials/theme_head.hbs: -------------------------------------------------------------------------------- 1 | {{!-- Document Settings --}} 2 | 3 | 4 | 5 | {{!-- Page Meta --}} 6 | {{meta_title}} 7 | 8 | {{!-- Mobile Meta --}} 9 | 10 | 11 | 12 | {{!-- Brand icon --}} 13 | 14 | 15 | {{!-- Styles'n'Scripts --}} 16 | 17 | 18 | {{!-- Google Fonts embed code --}} 19 | -------------------------------------------------------------------------------- /assets/scss/_pagination.scss: -------------------------------------------------------------------------------- 1 | #load-posts { 2 | margin: 50px 0 100px 0; 3 | display: inline-block; 4 | padding: 9px 19px; 5 | border: none; 6 | background: transparent; 7 | font-size: 0.875rem; 8 | text-transform: uppercase; 9 | font-weight: bold; 10 | outline: 0; 11 | } 12 | #load-posts.visible { 13 | + { 14 | .pagination { 15 | display: none; 16 | } 17 | } 18 | } 19 | .pagination { 20 | margin: 50px 0 100px 0; 21 | position: relative; 22 | font-size: 0.875rem; 23 | font-weight: bold; 24 | a { 25 | text-transform: uppercase; 26 | } 27 | .older-posts { 28 | position: absolute; 29 | right: 0; 30 | top: 0; 31 | } 32 | .newer-posts { 33 | position: absolute; 34 | left: 0; 35 | top: 0; 36 | } 37 | } -------------------------------------------------------------------------------- /default.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{> theme_head}} 6 | 7 | {{!-- Ghost outputs important style and meta data with this tag --}} 8 | {{ghost_head}} 9 | 10 | 11 | 12 | 13 |
14 | 15 | {{> theme_header}} 16 | 17 | {{{body}}} 18 | 19 | {{> theme_footer}} 20 | 21 |
22 | 23 | {{#if pagination.pages}} 24 | 27 | {{/if}} 28 | 29 | {{!-- The main JavaScript file --}} 30 | 31 | 32 | {{!-- Ghost outputs important scripts and data with this tag --}} 33 | {{ghost_foot}} 34 | 35 | 36 | -------------------------------------------------------------------------------- /assets/img/x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Control & Navigation_cross-arrow 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /partials/navigation.hbs: -------------------------------------------------------------------------------- 1 | {{!-- This is the menu container - visible after a user clicks the menu button --}} 2 | -------------------------------------------------------------------------------- /partials/pagination.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | {{!-- Load more button - Visible only if it's enabled in main.js --}} 5 | 6 | 7 | {{!-- Pagination --}} 8 | 19 |
20 |
21 |
-------------------------------------------------------------------------------- /assets/scss/_loop.scss: -------------------------------------------------------------------------------- 1 | .loop { 2 | margin: 50px 0 0 0; 3 | .inner { 4 | position: relative; 5 | } 6 | .post { 7 | margin: 50px 0; 8 | padding-bottom: 50px; 9 | border-bottom: 1px solid rgba($black, 0.1); 10 | .img-holder { 11 | overflow: hidden; 12 | display: block; 13 | width: calc(100% + 140px); 14 | margin-left: -70px; 15 | margin-bottom: 50px; 16 | &:hover { 17 | img { 18 | filter: brightness(1.1); 19 | transform: scale(1.1, 1.1); 20 | } 21 | } 22 | img { 23 | width: 100%; 24 | -webkit-transition: all 0.3s ease-in-out; 25 | -moz-transition: all 0.3s ease-in-out; 26 | -o-transition: all 0.3s ease-in-out; 27 | transition: all 0.3s ease-in-out; 28 | } 29 | } 30 | } 31 | h2 { 32 | max-width: 80%; 33 | margin-bottom: 10px; 34 | } 35 | .post-meta { 36 | font-size: 0.875rem; 37 | } 38 | } 39 | 40 | @media (max-width: $small) { 41 | .loop { 42 | margin: 0; 43 | } 44 | } 45 | 46 | @media (max-width: $extra_small) { 47 | .loop { 48 | .post { 49 | .img-holder { 50 | width: calc(100% + 30px); 51 | margin-left: -15px; 52 | margin-bottom: 30px; 53 | } 54 | margin: 30px 0; 55 | padding-bottom: 20px; 56 | } 57 | } 58 | } -------------------------------------------------------------------------------- /assets/scss/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | color: $white; 3 | background: $black; 4 | border-top: 1px solid rgba($black, 0.1); 5 | padding-top: 50px; 6 | .tags { 7 | li { 8 | margin-bottom: 10px; 9 | a { 10 | margin-bottom: 0; 11 | } 12 | } 13 | } 14 | .copyright { 15 | margin-top: 50px; 16 | background: $grey-3; 17 | p { 18 | margin: 20px 0; 19 | font-size: 0.875rem; 20 | } 21 | } 22 | a { 23 | color: $white; 24 | &:hover { 25 | color: $purple; 26 | } 27 | } 28 | } 29 | 30 | .latest-posts { 31 | list-style-type: none; 32 | margin: 0; 33 | padding: 0; 34 | font-weight: 500; 35 | time { 36 | font-size: 0.875rem; 37 | display: block; 38 | i { 39 | margin-right: 10px; 40 | } 41 | } 42 | h5 { 43 | font-size: 1rem; 44 | margin-bottom: 10px; 45 | } 46 | li { 47 | &:not(:last-child) { 48 | padding-bottom: 15px; 49 | margin-bottom: 15px; 50 | border-bottom: 1px solid rgba($grey-1, 0.25); 51 | } 52 | } 53 | } 54 | 55 | @media (max-width: $medium) { 56 | footer { 57 | h1 { 58 | margin-bottom: 30px; 59 | margin-top: 30px; 60 | } 61 | h2 { 62 | margin-bottom: 30px; 63 | margin-top: 30px; 64 | } 65 | h3 { 66 | margin-bottom: 30px; 67 | margin-top: 30px; 68 | } 69 | h4 { 70 | margin-bottom: 30px; 71 | margin-top: 30px; 72 | } 73 | h5 { 74 | margin-bottom: 30px; 75 | margin-top: 30px; 76 | } 77 | h6 { 78 | margin-bottom: 30px; 79 | margin-top: 30px; 80 | } 81 | padding-top: 20px; 82 | } 83 | } -------------------------------------------------------------------------------- /members/signin.hbs: -------------------------------------------------------------------------------- 1 | {{!-- The tag below means - insert everything in this file into the {body} of the default.hbs template --}} 2 | {{!< ../default}} 3 | 4 | {{#if @member}} 5 | 6 | {{!-- Logged in: Redirect home --}} 7 | 8 | 9 | {{else}} 10 | 11 |
12 |
13 |
14 |
  • 15 |
    16 |
    17 |
    18 |
    19 |
    20 |

    {{t "Sign in"}}

    21 | 22 | {{!-- Not logged in: Sign up --}} 23 | 31 | 32 |
    33 |
    34 |
    35 |
    36 |
    • 37 |
    38 |
    39 |
    40 | 41 | {{/if}} 42 | -------------------------------------------------------------------------------- /partials/loop-featured.hbs: -------------------------------------------------------------------------------- 1 | {{!-- This is the post loop - each post will be output using this markup --}} 2 |
    3 | {{#if feature_image}} 4 | 22 | {{/if}} 23 |
    24 |
    25 |
    26 |
    27 |
    28 | {{#if tags}} 29 |
      30 | {{#foreach tags}} 31 |
    • 32 | {{name}} 33 |
      • 34 | {{/foreach}} 35 |
    36 | {{/if}} 37 |

    {{title}}

    38 |

    {{excerpt words="28"}} ... {{t "read more"}}

    39 |
      40 |
      • 41 |
    • {{authors}}
      • 42 |
    • {{reading_time minute=(t "1 min read") minutes=(t "% min read")}}
      • 43 |
    44 |
    45 |
    46 |
    47 |
    48 |
    -------------------------------------------------------------------------------- /partials/theme_footer.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.hbs: -------------------------------------------------------------------------------- 1 | {{!-- The tag below means - insert everything in this file into the {body} of the default.hbs template --}} 2 | {{!< default}} 3 | 4 | {{^is "paged"}} 5 | {{#get "posts" include="tags,authors" filter="featured:true" limit="5"}} 6 | {{#if posts}} 7 |
    8 |
    9 | 16 |
    17 | 18 |
    19 |
    20 | {{else}} 21 |
    22 |
    23 |
    24 |
  • 25 | {{#if @site.cover_image}} 26 | 44 | {{/if}} 45 |
    46 |
    47 |
    48 |
    49 |
    50 |

    {{@site.title}}

    51 |

    {{@site.description}}

    52 |
    53 |
    54 |
    55 |
    56 |
    • 57 |
    58 | 59 |
    60 |
    61 | {{/if}} 62 | {{/get}} 63 | {{/is}} 64 | 65 | {{!-- The main content area --}} 66 |
    67 |
    68 |
    69 | {{#foreach posts}} 70 | {{> "loop"}} 71 | {{/foreach}} 72 |
    73 |
    74 |
    75 | {{pagination}} -------------------------------------------------------------------------------- /tag.hbs: -------------------------------------------------------------------------------- 1 | {{!-- The tag below means - insert everything in this file into the {body} of the default.hbs template --}} 2 | {{!< default}} 3 | 4 | {{#tag}} 5 | {{#if feature_image}} 6 | 24 | {{/if}} 25 |
    26 |
    27 |
    28 |
  • 29 |
    30 |
    31 |
    32 |
    33 |
    34 |

    {{name}}

    35 |

    {{description}}

    36 |
      37 |
    • {{plural ../pagination.total empty=(t "A collection of posts") singular=(t "A collection of 1 post") plural=(t "A collection of % posts")}}
      • 38 |
    39 |
    40 |
    41 |
    42 |
    43 |
    • 44 |
    45 | 46 |
    47 |
    48 | {{/tag}} 49 | 50 | {{!-- The main content area --}} 51 |
    52 |
    53 |
    54 | {{#foreach posts}} 55 | {{> "loop"}} 56 | {{/foreach}} 57 |
    58 |
    59 |
    60 | {{pagination}} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "joelma", 3 | "description": "Joelma is a feature-rich theme that is likely to impress you with its beautiful design. This theme has everything that a professional blog needs. Check it out!", 4 | "demo": "https://joelma.hauntedthemes.com/", 5 | "version": "3.0.2", 6 | "license": "GNU General Public License, Version 2", 7 | "engines": { 8 | "ghost": ">=3.0.0", 9 | "ghost-api": "v3" 10 | }, 11 | "author": { 12 | "name": "Haunted Themes", 13 | "email": "contact@hauntedthemes.com", 14 | "url": "https://www.hauntedthemes.com" 15 | }, 16 | "gpm": { 17 | "type": "theme", 18 | "categories": [ 19 | "Writer" 20 | ] 21 | }, 22 | "keywords": [ 23 | "ghost", 24 | "theme", 25 | "ghost-theme" 26 | ], 27 | "browserslist": [ 28 | "> 1%", 29 | "ie >= 8", 30 | "edge >= 15", 31 | "ie_mob >= 10", 32 | "ff >= 45", 33 | "chrome >= 45", 34 | "safari >= 7", 35 | "opera >= 23", 36 | "ios >= 7", 37 | "android >= 4", 38 | "bb >= 10" 39 | ], 40 | "devDependencies": { 41 | "gscan": "^2.7.0", 42 | "gulp": "4.0.2", 43 | "gulp-concat": "^2.6.1", 44 | "gulp-livereload": "4.0.1", 45 | "gulp-postcss": "8.0.0", 46 | "gulp-sass": "^4.0.1", 47 | "gulp-sourcemaps": "^2.6.5", 48 | "gulp-uglify": "3.0.2", 49 | "gulp-util": "3.0.8", 50 | "gulp-watch": "5.0.1", 51 | "gulp-zip": "5.0.0", 52 | "gulp-autoprefixer": "^7.0.1", 53 | "gulp-clean-css": "^4.2.0", 54 | "gulp-strip-css-comments": "^2.0.0", 55 | "gulp-minify-css": "^1.2.4" 56 | }, 57 | "dependencies": { 58 | "@fortawesome/fontawesome-free": "^5.11.2", 59 | "@tryghost/content-api": "^1.3.3", 60 | "bootstrap": "^4.3.1", 61 | "clipboard": "^2.0.4", 62 | "ghost-search": "^1.1.0", 63 | "highlight.js": "^9.16.2", 64 | "imagesloaded": "^4.1.4", 65 | "jquery": "^3.4.1", 66 | "jquery-validation": "^1.19.1", 67 | "js-cookie": "^2.2.1", 68 | "moment": "^2.24.0", 69 | "popper.js": "^1.16.0", 70 | "share-selected-text": "^1.1.4", 71 | "simplebar": "^5.0.4", 72 | "sticky-kit": "^1.1.3", 73 | "swiper": "^5.2.0" 74 | }, 75 | "config": { 76 | "posts_per_page": 5, 77 | "image_sizes": { 78 | "xs": { 79 | "width": 80, 80 | "height": 80 81 | }, 82 | "m": { 83 | "width": 870 84 | }, 85 | "l": { 86 | "width": 1920 87 | } 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /page.hbs: -------------------------------------------------------------------------------- 1 | {{!-- The tag below means - insert everything in this file into the {body} of the default.hbs template --}} 2 | {{!< default}} 3 | 4 | {{!-- Everything inside the #post tags pulls data from the post --}} 5 | {{#post}} 6 | {{#if feature_image}} 7 | 25 | {{/if}} 26 |
    27 |
    28 |
    29 |
  • 30 |
    31 |
    32 |
    33 |
    34 |
    35 |

    {{title}}

    36 |
      37 |
      • 38 |
    • {{reading_time minute=(t "1 min read") minutes=(t "% min read")}}
      • 39 |
    40 |
    41 |
    42 |
    43 |
    44 |
    • 45 |
    46 | 47 |
    48 |
    49 |
    50 |
    51 |
    52 |
    53 |
    {{content}}
    54 |
    55 |
    56 |
    57 |
    58 | 59 | {{/post}} 60 | -------------------------------------------------------------------------------- /members/account.hbs: -------------------------------------------------------------------------------- 1 | {{!-- The tag below means - insert everything in this file into the {body} of the default.hbs template --}} 2 | {{!< ../default}} 3 | 4 | 5 | {{#if @member.paid}} 6 | 7 |
    8 |
    9 |
    10 |
  • 11 |
    12 |
    13 |
    14 |
    15 |
    16 |

    {{t "Nice, you're a subscriber!"}}

    17 |

    {{{t "Hey! {email} has an active {title} account with access to all areas. You're all set, but if you need any help, get in touch with us and we'd be happy to help." email=@member.email title=@site.title}}}

    18 |
    19 |
    20 |
    21 |
    22 |
    • 23 |
    24 |
    25 |
    26 | 27 | {{else if @member}} 28 | 29 |
    30 |
    31 |
    32 |
  • 33 |
    34 |
    35 |
    36 |
    37 |
    38 |

    {{t "Currently, you're not a subscriber"}}

    39 |

    {{{t "Hey there! {email} is subscribed to free updates from {title}, but doesn't have a paid subscription to unlock full access." email=@member.email title=@site.title}}}

    40 | 45 |
    46 |
    47 |
    48 |
    49 |
    • 50 |
    51 |
    52 |
    53 | 54 | {{else}} 55 | 56 | {{!-- Not logged in: Redirect to signin --}} 57 | 58 | 59 | {{/if}} 60 | -------------------------------------------------------------------------------- /partials/loop.hbs: -------------------------------------------------------------------------------- 1 | {{!-- This is the post loop - each post will be output using this markup --}} 2 |
    3 | {{#if feature_image}} 4 | 5 | {{title}} 6 | 7 | {{/if}} 8 |
    9 | {{#if tags}} 10 | 17 | {{/if}} 18 |

    {{title}}

    19 |

    {{excerpt words="28"}} ... {{t "read more"}}

    20 | 34 | 35 |
    36 |
    -------------------------------------------------------------------------------- /assets/scss/_share-selected-text.scss: -------------------------------------------------------------------------------- 1 | .share-selected-text-main-container { 2 | position: absolute; 3 | margin-left: 10%; 4 | width: 80%; 5 | opacity: 0; 6 | margin-top: 7px; 7 | -webkit-transform: translateY(5px); 8 | -ms-transform: translateY(5px); 9 | transform: translateY(5px); 10 | -webkit-transition: all 0.5s; 11 | transition: all 0.5s; 12 | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); 13 | transition-timing-function: cubic-bezier(0.2,1,0.3,1); 14 | display: -webkit-flex; 15 | display: -ms-flexbox; 16 | display: flex; 17 | -webkit-justify-content: center; 18 | -ms-flex-pack: center; 19 | justify-content: center; 20 | -webkit-align-items: center; 21 | -ms-flex-align: center; 22 | align-items: center; 23 | -webkit-flex-direction: column; 24 | -ms-flex-direction: column; 25 | flex-direction: column; 26 | z-index: 99; 27 | pointer-events: none; 28 | .share-selected-text-inner { 29 | -webkit-flex: 1; 30 | -ms-flex: 1; 31 | flex: 1; 32 | display: -webkit-flex; 33 | display: -ms-flexbox; 34 | display: flex; 35 | -webkit-justify-content: center; 36 | -ms-flex-pack: center; 37 | justify-content: center; 38 | -webkit-align-items: center; 39 | -ms-flex-align: center; 40 | align-items: center; 41 | border-radius: 50%; 42 | background: $black; 43 | height: 100%; 44 | pointer-events: none; 45 | position: relative; 46 | -webkit-transition: all 0.5s; 47 | transition: all 0.5s; 48 | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); 49 | transition-timing-function: cubic-bezier(0.2,1,0.3,1); 50 | &:after { 51 | content: ''; 52 | position: absolute; 53 | bottom: -4px; 54 | left: 0; 55 | right: 0; 56 | margin: auto; 57 | width: 0; 58 | height: 0; 59 | border-style: solid; 60 | border-width: 7px 7.5px 0; 61 | border-color: $black transparent transparent; 62 | -webkit-transition: all 0.5s; 63 | transition: all 0.5s; 64 | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); 65 | transition-timing-function: cubic-bezier(0.2,1,0.3,1); 66 | } 67 | &:hover { 68 | &:after { 69 | border-color: #646464 transparent transparent; 70 | } 71 | } 72 | } 73 | .share-selected-text-btn { 74 | display: -webkit-flex; 75 | display: -ms-flexbox; 76 | display: flex; 77 | -webkit-justify-content: center; 78 | -ms-flex-pack: center; 79 | justify-content: center; 80 | -webkit-align-items: center; 81 | -ms-flex-align: center; 82 | align-items: center; 83 | text-transform: uppercase; 84 | font-weight: 700; 85 | color: $white; 86 | height: 100%; 87 | margin: 0; 88 | padding: 0 20px; 89 | border-radius: 50%; 90 | transition: .3s ease all; 91 | width: 50px; 92 | &:focus { 93 | background: #646464; 94 | } 95 | &:hover { 96 | background: #646464; 97 | } 98 | .icon-sst-twitter { 99 | &:before { 100 | font-size: 0.875rem; 101 | font-style: normal; 102 | } 103 | } 104 | } 105 | } 106 | .share-selected-text-main-container.active { 107 | opacity: 1; 108 | -webkit-transform: translateY(0); 109 | -ms-transform: translateY(0); 110 | transform: translateY(0); 111 | z-index: 999; 112 | .share-selected-text-inner { 113 | pointer-events: auto; 114 | } 115 | } -------------------------------------------------------------------------------- /assets/scss/_members.scss: -------------------------------------------------------------------------------- 1 | .gh-signin, 2 | .signup-form, 3 | .signin-form{ 4 | position: relative; 5 | margin: 50px 0 100px 0; 6 | button[type="submit"] { 7 | border: none; 8 | position: absolute; 9 | top: 0; 10 | right: 0; 11 | padding: 11px 30px; 12 | font-size: 1rem; 13 | font-weight: normal; 14 | font-family: $main_font; 15 | background: $white; 16 | border-radius: 0 3px 3px 0; 17 | color: $black; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | -webkit-transition: all 0.3s ease-in-out; 22 | -moz-transition: all 0.3s ease-in-out; 23 | -o-transition: all 0.3s ease-in-out; 24 | transition: all 0.3s ease-in-out; 25 | &:hover { 26 | color: $purple; 27 | } 28 | } 29 | } 30 | 31 | @media (max-width: $small) { 32 | .gh-signin, 33 | .signup-form, 34 | .signin-form { 35 | button[type="submit"] { 36 | background: $white; 37 | height: 40px; 38 | padding: 0 20px; 39 | font-size: 0.875rem; 40 | } 41 | } 42 | .signup-form, 43 | .signin-form { 44 | button[type="submit"] { 45 | background: $grey-4; 46 | } 47 | h1{ 48 | margin-top: 0; 49 | } 50 | } 51 | } 52 | 53 | .subscribe { 54 | .main-container { 55 | padding: 100px 0; 56 | .gh-input { 57 | background: $white; 58 | } 59 | .gh-signin { 60 | button[type="submit"] { 61 | background: $grey-4; 62 | } 63 | } 64 | } 65 | } 66 | 67 | @media (max-width: $small) { 68 | .subscribe { 69 | .main-container { 70 | padding: 50px 0; 71 | } 72 | } 73 | } 74 | 75 | form[data-members-form] .button-loader, 76 | form[data-members-form] .message-error, 77 | form[data-members-form] .message-success{ 78 | display: none; 79 | } 80 | 81 | .signup-form, 82 | .signin-form{ 83 | &.loading{ 84 | input, 85 | button[type="submit"]{ 86 | opacity: .5; 87 | pointer-events: none; 88 | } 89 | } 90 | &.success{ 91 | input, 92 | button[type="submit"]{ 93 | opacity: .5; 94 | pointer-events: none; 95 | } 96 | .message-success{ 97 | display: block; 98 | margin-bottom: 50px; 99 | } 100 | } 101 | .signup-box, 102 | .signin-box{ 103 | position: relative; 104 | margin-bottom: 10px; 105 | } 106 | button[type="submit"]{ 107 | background: $grey-4; 108 | &:hover{ 109 | background: $purple; 110 | color: $white; 111 | } 112 | } 113 | p{ 114 | a{ 115 | text-decoration: underline; 116 | } 117 | } 118 | } 119 | 120 | .checkout-form{ 121 | margin-top: 50px; 122 | } 123 | 124 | .checkout-plan{ 125 | background: $grey-4; 126 | padding: 50px 30px 30px 30px; 127 | border-radius: 3px; 128 | margin-bottom: 50px; 129 | height: calc(100% - 50px); 130 | display: flex; 131 | flex-direction: column; 132 | align-items: center; 133 | h3{ 134 | margin: 0; 135 | padding: 0; 136 | font-size: 1rem; 137 | } 138 | .pricing{ 139 | margin: 0px 0 30px 0px; 140 | display: flex; 141 | align-items: baseline; 142 | justify-content: center; 143 | font-size: 0.8125rem; 144 | strong{ 145 | font-size: 4rem; 146 | margin: 0 5px; 147 | color: $purple; 148 | } 149 | } 150 | .checkout-plan-content{ 151 | flex: 1; 152 | display: flex; 153 | flex-direction: column; 154 | ul{ 155 | list-style-type: none; 156 | margin: 0 0 30px 0; 157 | padding: 0; 158 | text-align: left; 159 | li{ 160 | margin-bottom: 5px; 161 | i{ 162 | margin-right: 10px; 163 | } 164 | } 165 | } 166 | .btn{ 167 | margin-top: auto; 168 | } 169 | } 170 | } 171 | 172 | @media (max-width: $extra_small) { 173 | .checkout-plan{ 174 | .checkout-plan-content{ 175 | ul{ 176 | li{ 177 | font-size: 0.8125rem; 178 | } 179 | } 180 | } 181 | } 182 | } 183 | 184 | .account-box{ 185 | margin-bottom: 50px; 186 | } 187 | 188 | @media (max-width: $small) { 189 | .account-box{ 190 | margin-bottom: 30px; 191 | h1{ 192 | margin-top: 0; 193 | } 194 | } 195 | } -------------------------------------------------------------------------------- /author.hbs: -------------------------------------------------------------------------------- 1 | {{!-- The tag below means - insert everything in this file into the {body} of the default.hbs template --}} 2 | {{!< default}} 3 | 4 | {{!-- Everything inside the #author tags pulls data from the author --}} 5 | {{#author}} 6 | {{^is "paged"}} 7 |
    8 |
    9 |
    10 |
  • 11 | {{#if cover_image}} 12 | 30 | {{/if}} 31 |
    32 |
    33 |
    34 |
    35 |
    36 | {{#if profile_image}} 37 | {{name}} 38 | {{/if}} 39 |

    {{name}}

    40 | {{#if bio}} 41 |

    {{bio}}

    42 | {{/if}} 43 |
      44 | {{#if location}}
    • {{location}}
      • {{/if}} 45 | {{#if website}}
      • {{/if}} 46 | {{#if twitter}}
      • {{/if}} 47 | {{#if facebook}}
      • {{/if}} 48 |
    49 |
    50 |
    51 |
    52 |
    53 |
    • 54 |
    55 | 56 |
    57 |
    58 | {{/is}} 59 | {{/author}} 60 | 61 | {{!-- The main content area --}} 62 |
    63 |
    64 |
    65 | {{#foreach posts}} 66 | {{> "loop"}} 67 | {{/foreach}} 68 |
    69 |
    70 |
    71 | {{pagination}} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const {series, watch, src, dest, parallel} = require('gulp'); 2 | const gulp = require('gulp') 3 | const pump = require('pump'); 4 | 5 | // gulp plugins and utils 6 | const livereload = require('gulp-livereload'); 7 | const postcss = require('gulp-postcss'); 8 | const zip = require('gulp-zip'); 9 | const uglify = require('gulp-uglify'); 10 | const beeper = require('beeper'); 11 | const fs = require('fs'); 12 | const sass = require('gulp-sass'); 13 | const concat = require('gulp-concat'); 14 | const sourcemaps = require('gulp-sourcemaps'); 15 | const prefix = require('gulp-autoprefixer'); 16 | 17 | function serve(done) { 18 | livereload.listen(); 19 | done(); 20 | } 21 | 22 | const handleError = (done) => { 23 | return function (err) { 24 | if (err) { 25 | beeper(); 26 | } 27 | return done(err); 28 | }; 29 | }; 30 | 31 | function hbs(done) { 32 | pump([ 33 | src(['*.hbs', 'partials/**/*.hbs']), 34 | livereload() 35 | ], handleError(done)); 36 | } 37 | 38 | function css(done) { 39 | pump([ 40 | gulp.src('assets/scss/main.scss') 41 | .pipe(sourcemaps.init()) 42 | .pipe(sass({outputStyle: 'compressed'})) 43 | .pipe(prefix({ cascade: false })) 44 | .pipe(sourcemaps.write('.')) 45 | .pipe(gulp.dest('assets/built/')), 46 | livereload() 47 | ], handleError(done)); 48 | } 49 | 50 | function js(done) { 51 | pump([ 52 | gulp.src([ 53 | 'node_modules/jquery/dist/jquery.min.js', 54 | 'assets/js/libraries/*.js', 55 | 'node_modules/popper.js/dist/umd/popper.min.js', 56 | 'node_modules/bootstrap/dist/js/bootstrap.min.js', 57 | 'node_modules/imagesloaded/imagesloaded.pkgd.min.js', 58 | 'node_modules/ghost-search/dist/ghost-search.min.js', 59 | 'node_modules/highlight.js/lib/highlight.js', 60 | 'node_modules/imagesloaded/imagesloaded.pkgd.min.js', 61 | 'node_modules/share-selected-text/dist/shareSelectedText.min.js', 62 | 'node_modules/js-cookie/src/js.cookie.js', 63 | 'node_modules/simplebar/dist/simplebar.min.js', 64 | 'node_modules/swiper/js/swiper.min.js', 65 | 'node_modules/clipboard/dist/clipboard.min.js', 66 | 'node_modules/sticky-kit/dist/sticky-kit.min.js', 67 | // 'node_modules/moment/locale/[COUNTRY-CODE].js', // Replace [COUNTRY-CODE] with value from Ghost Dashboard -> General -> Publication Language if different than 'en'. Example: fr.js 68 | 'node_modules/moment/min/moment.min.js', 69 | // 'node_modules/jquery-validation/dist/localization/messages_[COUNTRY-CODE].min.js', // Replace [COUNTRY-CODE] with value from Ghost Dashboard -> General -> Publication Language if different than 'en'. Example: messages_fr.min.js 70 | 'node_modules/jquery-validation/dist/jquery.validate.min.js', 71 | 'node_modules/@tryghost/content-api/umd/content-api.min.js', 72 | 'assets/js/*.js' 73 | ]) 74 | .pipe(sourcemaps.init()) 75 | .pipe(concat('main.js')) 76 | .pipe(sourcemaps.write()), 77 | uglify(), 78 | dest('assets/built/', {sourcemaps: '.'}), 79 | livereload() 80 | ], handleError(done)); 81 | } 82 | 83 | function zipper(done) { 84 | const targetDir = 'dist/'; 85 | const themeName = require('./package.json').name; 86 | const filename = themeName + '.zip'; 87 | 88 | pump([ 89 | src([ 90 | '**', 91 | '!node_modules', '!node_modules/**', 92 | '!dist', '!dist/**' 93 | ]), 94 | zip(filename), 95 | dest(targetDir) 96 | ], handleError(done)); 97 | } 98 | 99 | const cssWatcher = () => watch('assets/scss/**', css); 100 | const jsWatcher = () => watch('assets/js/**', js); 101 | const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs); 102 | const watcher = parallel(cssWatcher, jsWatcher, hbsWatcher); 103 | const build = series(css, js); 104 | const dev = series(build, serve, watcher); 105 | 106 | exports.build = build; 107 | exports.zip = series(build, zipper); 108 | exports.default = dev; -------------------------------------------------------------------------------- /locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "Search": "Search", 3 | "Share on Facebook": "Share on Facebook", 4 | "Share on Twitter": "Share on Twitter", 5 | "Share on Google+": "Share on Google+", 6 | "Share on Reddit": "Share on Reddit", 7 | "Share by Email": "Share by Email", 8 | "Newer Posts": "Newer Posts", 9 | "Older Posts": "Older Posts", 10 | "of": "of", 11 | "Tags": "Tags", 12 | "Newsletter": "Newsletter", 13 | "Your email address": "Your email address", 14 | "Back": "Back", 15 | "Subscribe": "Subscribe", 16 | "Subscribe to {blogtitle}": "Subscribe to {blogtitle}", 17 | "Subscribed!": "Subscribed!", 18 | "with the email address": "with the email address", 19 | "You've successfully subscribed to": "You've successfully subscribed to", 20 | "Read more posts by this author.": "Read more posts by this author.", 21 | "1 min read": "1 min read", 22 | "% min read": "% min read", 23 | "1 post": "1 post", 24 | "% posts": "% posts", 25 | " (Page %)": " (Page %)", 26 | "Copyright": "Copyright", 27 | "All Right Reserved": "All Right Reserved", 28 | "YouTube": "YouTube", 29 | "Instagram": "Instagram", 30 | "RSS Feed": "RSS Feed", 31 | "Social": "Social", 32 | "or": "or", 33 | "Menu": "Menu", 34 | "Return to main page": "Return to main page", 35 | "{name} has no posts written": "{name} has no posts written", 36 | "There are no posts in {name}": "There are no posts in {name}", 37 | "Featured": "Featured", 38 | "{total} posts": "{total} posts", 39 | "Bookmarks": "Bookmarks", 40 | "You haven't yet saved any bookmarks. To bookmark a post, just click .": "You haven't yet saved any bookmarks. To bookmark a post, just click .", 41 | "Other": "Other", 42 | "by": "by", 43 | "Connect with us": "Connect with us", 44 | "Comments": "Comments", 45 | "Write a comment ...": "Write a comment ...", 46 | "Related posts": "Related posts", 47 | "Previous post": "Previous post", 48 | "Next post": "Next post", 49 | "Back to homepage": "Back to homepage", 50 | "read more": "read more", 51 | "Remove bookmark": "Remove bookmark", 52 | "Bookmark article": "Bookmark article", 53 | "Load more posts": "Load more posts", 54 | "Latest posts": "Latest posts", 55 | "About": "About", 56 | "Subscribe to our newsletter to receive our latest news.": "Subscribe to our newsletter to receive our latest news.", 57 | "Copy link to clipboard.": "Copy link to clipboard.", 58 | "A collection of posts": "A collection of posts", 59 | "A collection of 1 post": "A collection of 1 post", 60 | "A collection of % posts": "A collection of % posts", 61 | "Already have an account? Sign in": "Already have an account? Sign in", 62 | "Great! Check your inbox and click the link to confirm your subscription": "Great! Check your inbox and click the link to confirm your subscription", 63 | "Submit": "Submit", 64 | "Signup to {title}": "Signup to {title}", 65 | "Sign in": "Sign in", 66 | "Don't have an account yet? Sign up": "Don't have an account yet? Sign up", 67 | "Great! Check your inbox and click the link to complete signin": "Great! Check your inbox and click the link to complete signin", 68 | "Nice, you're a subscriber!": "Nice, you're a subscriber!", 69 | "Hey there! {email} is subscribed to free updates from {title}, but doesn't have a paid subscription to unlock full access.": "Hey there! {email} is subscribed to free updates from {title}, but doesn't have a paid subscription to unlock full access.", 70 | "Subscribe now": "Subscribe now", 71 | "Currently, you're not a subscriber": "Currently, you're not a subscriber", 72 | "Hey! {email} has an active {title} account with access to all areas. You're all set, but if you need any help, get in touch with us and we'd be happy to help.": "Hey! {email} has an active {title} account with access to all areas. You're all set, but if you need any help, get in touch with us and we'd be happy to help.", 73 | "Choose your subscription": "Choose your subscription", 74 | "Unlock full access to {title} and see the entire
    library of members-only content & updates": "Unlock full access to {title} and see the entire
    library of members-only content & updates", 75 | "Monthly": "Monthly", 76 | "month": "month", 77 | "Full access to all private posts": "Full access to all private posts", 78 | "Regular updates with new content": "Regular updates with new content", 79 | "Support independent publishing": "Support independent publishing", 80 | "Simple, secure card payment": "Simple, secure card payment", 81 | "Choose this plan": "Choose this plan", 82 | "year": "year", 83 | "One easy payment instead of 12!": "One easy payment instead of 12!" 84 | } -------------------------------------------------------------------------------- /members/signup.hbs: -------------------------------------------------------------------------------- 1 | {{!-- The tag below means - insert everything in this file into the {body} of the default.hbs template --}} 2 | {{!< ../default}} 3 | 4 | 5 | {{#if @member.paid}} 6 | 7 | {{!-- Logged in, paying member: Redirect home --}} 8 | 9 | 10 | {{else if @member}} 11 | 12 |
    13 |
    14 |
    15 |
  • 16 |
    17 |
    18 |
    19 |
    20 |
    21 |

    {{t "Choose your subscription"}}

    22 |

    {{{t "Unlock full access to {title} and see the entire
    library of members-only content & updates" title=@site.title}}}

    23 |
    24 |
    25 |
    26 |
    27 |
    • 28 |
    29 |
    30 |
    31 | 32 |
    33 |
    34 |
    35 | {{!-- Logged in, not paying: Check out --}} 36 |
    37 |
    38 |
    39 |
    40 |

    {{t "Monthly"}}

    41 |
    ${{@price.monthly}} / {{t "month"}}
    42 |
    43 |
      44 |
    • {{t "Full access to all private posts"}}
      • 45 |
    • {{t "Regular updates with new content"}}
      • 46 |
    • {{t "Support independent publishing"}}
      • 47 |
    • {{t "Simple, secure card payment"}}
      • 48 |
    49 | {{t "Choose this plan"}} 50 |
    51 |
    52 |
    53 |
    54 |
    55 |

    Yearly

    56 |
    ${{@price.yearly}} / {{t "year"}}
    57 |
    58 |
      59 |
    • {{t "Full access to all private posts"}}
      • 60 |
    • {{t "Regular updates with new content"}}
      • 61 |
    • {{t "Support independent publishing"}}
      • 62 |
    • {{t "Simple, secure card payment"}}
      • 63 |
    • {{t "One easy payment instead of 12!"}}
      • 64 |
    65 | {{t "Choose this plan"}} 66 |
    67 |
    68 |
    69 |
    70 |
    71 |
    72 |
    73 |
    74 | 75 | {{else}} 76 | 77 |
    78 |
    79 |
    80 |
  • 81 |
    82 |
    83 |
    84 |
    85 |
    86 |

    {{{t "Signup to {title}" title=@site.title}}}

    87 | 88 | {{!-- Not logged in: Sign up --}} 89 | 97 | 98 |
    99 |
    100 |
    101 |
    102 |
    • 103 |
    104 |
    105 |
    106 | 107 | {{/if}} 108 | -------------------------------------------------------------------------------- /partials/theme_header.hbs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |
    5 | 10 |
    11 |
    12 |
    13 |
    14 | 15 | 16 | 17 |
    18 | 19 | {{navigation}} 20 |
    21 |
    22 |
    23 |
    24 | 25 |
    26 | 27 |
    28 | 29 |
    30 |
    31 |
    32 |
    33 |
    34 | 35 |
    36 | 37 |

    {{t "Bookmarks"}}

    38 |
    39 |

    {{{t "You haven't yet saved any bookmarks. To bookmark a post, just click ."}}}

    40 |
    41 |
    42 |
    43 | 63 |
    64 |
    65 |
    66 |
    67 |
    68 |
    -------------------------------------------------------------------------------- /assets/scss/_base.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes "go" { 2 | 0% { 3 | transform: translateY(0); 4 | } 5 | 75% { 6 | transform: translateY(-10px); 7 | } 8 | 100% { 9 | transform: translateY(0); 10 | } 11 | } 12 | @-moz-keyframes "go" { 13 | 0% { 14 | transform: translateY(0); 15 | } 16 | 75% { 17 | transform: translateY(-10px); 18 | } 19 | 100% { 20 | transform: translateY(0); 21 | } 22 | } 23 | @-o-keyframes "go" { 24 | 0% { 25 | transform: translateY(0); 26 | } 27 | 75% { 28 | transform: translateY(-10px); 29 | } 30 | 100% { 31 | transform: translateY(0); 32 | } 33 | } 34 | @keyframes "go" { 35 | 0% { 36 | transform: translateY(0); 37 | } 38 | 75% { 39 | transform: translateY(-10px); 40 | } 41 | 100% { 42 | transform: translateY(0); 43 | } 44 | } 45 | @keyframes "next" { 46 | 0% { 47 | transform: translate3d(0,100%,0); 48 | } 49 | 100% { 50 | transform: translate3d(0,0,0); 51 | } 52 | } 53 | @keyframes "slideTop" { 54 | from { 55 | opacity: 0; 56 | transform: translateY(100%); 57 | } 58 | to { 59 | opacity: 1; 60 | transform: translateY(0); 61 | } 62 | } 63 | 64 | ::selection { 65 | background: rgba($black, 0.2); 66 | } 67 | ::-moz-selection { 68 | background: rgba($black, 0.2); 69 | } 70 | ::-webkit-input-placeholder { 71 | color: rgba($white, 0.5); 72 | } 73 | ::-moz-placeholder { 74 | color: rgba($white, 0.5); 75 | } 76 | :-ms-input-placeholder { 77 | color: rgba($white, 0.5); 78 | } 79 | :-moz-placeholder { 80 | color: rgba($white, 0.5); 81 | } 82 | body { 83 | font-family: $main_font; 84 | font-weight: 300; 85 | color: $black; 86 | background: $white; 87 | font-size: 1rem; 88 | } 89 | h1 { 90 | font-weight: bold; 91 | line-height: 1.2; 92 | margin-bottom: 50px; 93 | } 94 | h2 { 95 | font-weight: bold; 96 | line-height: 1.2; 97 | margin-bottom: 50px; 98 | } 99 | h3 { 100 | font-weight: bold; 101 | line-height: 1.2; 102 | margin-bottom: 50px; 103 | } 104 | h4 { 105 | font-weight: bold; 106 | line-height: 1.2; 107 | margin-bottom: 50px; 108 | } 109 | h5 { 110 | font-weight: bold; 111 | line-height: 1.2; 112 | margin-bottom: 50px; 113 | } 114 | h6 { 115 | font-weight: bold; 116 | line-height: 1.2; 117 | margin-bottom: 50px; 118 | } 119 | b { 120 | font-weight: bold; 121 | } 122 | strong { 123 | font-weight: bold; 124 | } 125 | a { 126 | color: $black; 127 | -webkit-transition: all 0.5s; 128 | transition: all 0.5s; 129 | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); 130 | transition-timing-function: cubic-bezier(0.2,1,0.3,1); 131 | &:hover { 132 | text-decoration: none; 133 | color: $purple; 134 | } 135 | } 136 | p { 137 | line-height: 1.5rem; 138 | font-size: 1rem; 139 | margin-bottom: 30px; 140 | } 141 | code { 142 | font-family: monospace, monospace; 143 | font-size: 1em; 144 | color: $grey-1; 145 | } 146 | kbd { 147 | font-family: monospace, monospace; 148 | font-size: 1em; 149 | color: $grey-1; 150 | } 151 | pre { 152 | font-family: monospace, monospace; 153 | font-size: 1em; 154 | color: $grey-1; 155 | code { 156 | padding: 20px; 157 | } 158 | } 159 | samp { 160 | font-family: monospace, monospace; 161 | font-size: 1em; 162 | color: $grey-1; 163 | } 164 | mark { 165 | background: rgba($grey-1, 0.2); 166 | } 167 | figure { 168 | margin: 30px 0; 169 | } 170 | .hljs { 171 | padding: 20px; 172 | } 173 | .hidden { 174 | display: none !important; 175 | } 176 | label.error { 177 | font-size: 0.75rem; 178 | margin-top: 5px; 179 | color: $red; 180 | } 181 | input { 182 | width: 100%; 183 | padding: 6px 12px; 184 | font-size: 1rem; 185 | line-height: 1.42857143; 186 | color: $white; 187 | background-color: $black; 188 | background-image: none; 189 | background: $grey-3; 190 | border: 1px solid $grey-1; 191 | box-sizing: border-box; 192 | border-radius: 3px; 193 | height: 40px; 194 | display: block; 195 | } 196 | textarea { 197 | width: 100%; 198 | padding: 6px 12px; 199 | font-size: 1rem; 200 | line-height: 1.42857143; 201 | color: $white; 202 | background-color: $black; 203 | background-image: none; 204 | background: $grey-3; 205 | border: 1px solid $grey-1; 206 | box-sizing: border-box; 207 | border-radius: 3px; 208 | height: 40px; 209 | display: block; 210 | } 211 | .btn { 212 | padding: 9px 19px; 213 | border-radius: 30px; 214 | box-shadow: none; 215 | outline: 0; 216 | line-height: normal; 217 | font-size: 0.875rem; 218 | color: $white; 219 | text-transform: uppercase; 220 | font-weight: bold; 221 | position: relative; 222 | background: transparent; 223 | border: 1px solid $grey-1; 224 | color: $grey-1; 225 | outline: 0; 226 | &:focus { 227 | box-shadow: none; 228 | } 229 | } 230 | .btn.focus { 231 | box-shadow: none; 232 | } 233 | 234 | .main-container { 235 | overflow: hidden; 236 | position: relative; 237 | z-index: 2; 238 | background: $white; 239 | } 240 | 241 | .tooltip.show { 242 | opacity: 1; 243 | } 244 | 245 | @media (max-width: $small) { 246 | .tooltip { 247 | display: none; 248 | } 249 | } 250 | 251 | .fade { 252 | -webkit-transition: opacity .3s cubic-bezier(0.2,1,0.3,1); 253 | -moz-transition: opacity .3s cubic-bezier(0.2,1,0.3,1); 254 | -o-transition: opacity .3s cubic-bezier(0.2,1,0.3,1); 255 | transition: opacity .3s cubic-bezier(0.2,1,0.3,1); 256 | } 257 | .tooltip { 258 | font-weight: 300; 259 | font-family: $main_font; 260 | margin-left: 5px; 261 | border-radius: 3px; 262 | .tooltip-inner { 263 | box-shadow: 0px 10px 40px rgba($black, 0.1); 264 | background-color: #2b2b2b; 265 | } 266 | } 267 | .bs-tooltip-auto[x-placement^=right] { 268 | .arrow { 269 | &::before { 270 | border-right-color: #2b2b2b; 271 | } 272 | } 273 | } 274 | .bs-tooltip-right { 275 | .arrow { 276 | &::before { 277 | border-right-color: #2b2b2b; 278 | } 279 | } 280 | } 281 | .bs-tooltip-auto[x-placement^=left] { 282 | .arrow { 283 | &::before { 284 | border-left-color: #2b2b2b; 285 | } 286 | } 287 | } 288 | .bs-tooltip-left { 289 | .arrow { 290 | &::before { 291 | border-left-color: #2b2b2b; 292 | } 293 | } 294 | } 295 | .bs-tooltip-auto[x-placement^=bottom] { 296 | .arrow { 297 | &::before { 298 | border-bottom-color: #2b2b2b; 299 | } 300 | } 301 | } 302 | .bs-tooltip-bottom { 303 | .arrow { 304 | &::before { 305 | border-bottom-color: #2b2b2b; 306 | } 307 | } 308 | } 309 | 310 | .page-contact{ 311 | .content-inner{ 312 | .post-content{ 313 | border: none; 314 | } 315 | } 316 | } 317 | 318 | .contact-form{ 319 | input, 320 | textarea{ 321 | padding: 10px 12px; 322 | height: auto; 323 | border: 1px solid $grey-3; 324 | margin-bottom: 10px; 325 | } 326 | } -------------------------------------------------------------------------------- /post.hbs: -------------------------------------------------------------------------------- 1 | {{!-- The tag below means - insert everything in this file into the {body} of the default.hbs template --}} 2 | {{!< default}} 3 | 4 | {{!-- Everything inside the #post tags pulls data from the post --}} 5 | {{#post}} 6 | {{#if feature_image}} 7 | 25 | {{/if}} 26 |
    27 |
    28 |
    29 |
  • 30 |
    31 |
    32 |
    33 |
    34 |
    35 | {{#if tags}} 36 |
      37 | {{#foreach tags}} 38 |
    • 39 | {{name}} 40 |
      • 41 | {{/foreach}} 42 |
    43 | {{/if}} 44 |

    {{title}}

    45 |
      46 |
      • 47 |
    • {{authors}}
      • 48 |
    • {{reading_time minute=(t "1 min read") minutes=(t "% min read")}}
      • 49 |
    50 |
    51 |
    52 |
    53 |
    54 |
    • 55 |
    56 | 57 |
    58 |
    59 |
    60 |
    61 |
    62 | 63 |
    64 |
    {{content}}
    65 | 66 | {{#if tags}} 67 |
      68 | {{#foreach tags}} 69 |
    • 70 | {{name}} 71 |
      • 72 | {{/foreach}} 73 |
    74 | {{/if}} 75 | 76 | 85 | 86 |
    87 |
    88 |
    89 |
    90 | 91 |
    92 |
    93 |
    94 |

    {{t "Comments"}}

    95 | 96 | {{t "Write a comment ..."}} 97 | 98 |
    99 |
    100 |
    101 |
    102 | 103 | {{#get "posts" limit="6" include="tags,authors" filter="id:-{{id}}+primary_tag:{{primary_tag.slug}}"}} 104 | {{#if posts}} 105 |
    106 |
    107 |
    108 |
    109 |

    {{t "Related posts"}}

    110 |
    111 |
    112 |
    113 |
    114 |
    115 |
    116 |
    117 | {{#foreach posts}} 118 |
    119 | {{> "loop"}} 120 |
    121 | {{/foreach}} 122 |
    123 |
    124 |
    125 | {{/if}} 126 | {{/get}} 127 | 128 |
    129 |
    130 |
    131 |
    132 | {{#prev_post}} 133 | 134 | {{/prev_post}} 135 | {{t "Back to homepage"}} 136 | {{#next_post}} 137 | 138 | {{/next_post}} 139 |
    140 |
    141 |
    142 |
    143 | 144 | {{/post}} 145 | -------------------------------------------------------------------------------- /assets/scss/_header.scss: -------------------------------------------------------------------------------- 1 | body.scroll { 2 | header { 3 | padding: 10px 0; 4 | background: rgba(0,0,0,0.8); 5 | &:hover { 6 | background: $black; 7 | } 8 | .blog-logo { 9 | img { 10 | max-height: 30px; 11 | } 12 | } 13 | } 14 | } 15 | header { 16 | position: fixed; 17 | z-index: 9900; 18 | width: 100%; 19 | top: 0; 20 | left: 0; 21 | padding: 50px 0; 22 | transform: translateY(0); 23 | -webkit-transition: all .3s cubic-bezier(0.2,1,0.3,1); 24 | -moz-transition: all .3s cubic-bezier(0.2,1,0.3,1); 25 | -o-transition: all .3s cubic-bezier(0.2,1,0.3,1); 26 | transition: all .3s cubic-bezier(0.2,1,0.3,1); 27 | .blog-logo { 28 | img { 29 | max-width: 150px; 30 | max-height: 50px; 31 | height: auto; 32 | width: auto; 33 | -webkit-transition: all .3s cubic-bezier(0.2,1,0.3,1); 34 | -moz-transition: all .3s cubic-bezier(0.2,1,0.3,1); 35 | -o-transition: all .3s cubic-bezier(0.2,1,0.3,1); 36 | transition: all .3s cubic-bezier(0.2,1,0.3,1); 37 | } 38 | span { 39 | font-weight: bold; 40 | font-size: 1.5rem; 41 | line-height: 1; 42 | } 43 | } 44 | a { 45 | color: $white; 46 | svg { 47 | path { 48 | fill: $white; 49 | -webkit-transition: all .3s cubic-bezier(0.2,1,0.3,1); 50 | -moz-transition: all .3s cubic-bezier(0.2,1,0.3,1); 51 | -o-transition: all .3s cubic-bezier(0.2,1,0.3,1); 52 | transition: all .3s cubic-bezier(0.2,1,0.3,1); 53 | } 54 | } 55 | &:hover { 56 | svg { 57 | path { 58 | fill: $purple; 59 | } 60 | } 61 | } 62 | } 63 | nav { 64 | ul { 65 | list-style-type: none; 66 | padding: 0; 67 | margin: 0 30px 0 auto; 68 | display: flex; 69 | li { 70 | a { 71 | white-space: nowrap; 72 | font-size: 0.75rem; 73 | font-weight: bold; 74 | text-transform: uppercase; 75 | margin-left: 40px; 76 | } 77 | } 78 | } 79 | } 80 | .navigation-trigger { 81 | display: none; 82 | } 83 | .navigation { 84 | .popover { 85 | position: absolute; 86 | display: none; 87 | } 88 | border-right: 1px solid rgba($white, 0.25); 89 | margin-right: 20px; 90 | } 91 | .search { 92 | display: inline-block; 93 | margin-right: 20px; 94 | display: flex; 95 | align-items: center; 96 | justify-content: center; 97 | position: relative; 98 | width: 25px; 99 | height: 25px; 100 | .search-trigger { 101 | display: flex; 102 | align-items: center; 103 | justify-content: center; 104 | height: 100%; 105 | } 106 | .search-popover { 107 | position: absolute; 108 | display: none; 109 | } 110 | svg { 111 | width: 16px; 112 | height: 16px; 113 | } 114 | #results { 115 | padding-top: 38px; 116 | } 117 | } 118 | .bookmark-content { 119 | .bookmark-popover { 120 | position: absolute; 121 | display: none; 122 | } 123 | } 124 | .social-popover { 125 | position: absolute; 126 | display: none; 127 | } 128 | .inner { 129 | display: flex; 130 | justify-content: flex-end; 131 | margin-left: auto; 132 | align-items: center; 133 | } 134 | .col-6 { 135 | display: flex; 136 | } 137 | .triggers { 138 | display: flex; 139 | .search-trigger { 140 | width: 25px; 141 | height: 25px; 142 | display: flex; 143 | align-items: center; 144 | justify-content: center; 145 | } 146 | .bookmark { 147 | width: 25px; 148 | height: 25px; 149 | display: flex; 150 | align-items: center; 151 | justify-content: center; 152 | } 153 | .social-trigger { 154 | width: 25px; 155 | height: 25px; 156 | display: flex; 157 | align-items: center; 158 | justify-content: center; 159 | } 160 | } 161 | .popover { 162 | background: transparent; 163 | box-shadow: 0px 10px 40px rgba($black, 0.1); 164 | border-radius: 3px; 165 | margin-top: 0; 166 | width: 300px; 167 | border: none; 168 | max-height: calc(100vh - 150px); 169 | margin-left: -230px; 170 | padding-top: 15px; 171 | .arrow { 172 | top: 7px; 173 | right: 10px; 174 | left: auto !important; 175 | &:before { 176 | border-bottom-color: $grey-2; 177 | border-width: 0 .5rem .5rem .5rem; 178 | } 179 | &:after { 180 | border-bottom-color: $grey-2; 181 | border-width: 0 .5rem .5rem .5rem; 182 | } 183 | } 184 | .popover-body { 185 | padding: 0; 186 | background: $grey-2; 187 | border-radius: 3px; 188 | } 189 | form { 190 | width: 100%; 191 | } 192 | input { 193 | background: $grey-2; 194 | border: none; 195 | outline: 0; 196 | color: $white; 197 | padding: 10px 15px; 198 | width: 100%; 199 | border-radius: 3px; 200 | position: absolute; 201 | top: 15px; 202 | left: 0; 203 | border-bottom: 1px solid $grey-2; 204 | z-index: 99; 205 | } 206 | h5 { 207 | padding: 10px 15px; 208 | line-height: 1.25rem; 209 | font-size: 0.75rem; 210 | color: $grey-1; 211 | background: rgba($grey-1, 0.2); 212 | margin: 0; 213 | font-weight: bold; 214 | } 215 | } 216 | .popover-body { 217 | ul { 218 | list-style-type: none; 219 | margin: 0; 220 | padding: 0; 221 | li { 222 | padding: 10px 35px 10px 15px; 223 | border-bottom: 1px solid rgba($black, 0.2); 224 | position: relative; 225 | &:last-child { 226 | border-bottom: none; 227 | } 228 | .read-later { 229 | top: 10px; 230 | right: 5px; 231 | } 232 | } 233 | } 234 | a { 235 | display: block; 236 | font-weight: bold; 237 | } 238 | time { 239 | color: $white; 240 | font-size: 0.75rem; 241 | margin-bottom: 5px; 242 | display: block; 243 | } 244 | h3 { 245 | font-size: 1.125rem; 246 | padding: 15px; 247 | color: $white; 248 | margin: 0; 249 | } 250 | ul.social-icons { 251 | display: flex; 252 | border-bottom: 1px solid rgba($black, 0.2); 253 | border-top: 1px solid rgba($black, 0.2); 254 | li { 255 | flex: 1; 256 | padding: 0; 257 | border: none; 258 | border-right: 1px solid rgba($black, 0.2); 259 | &:last-child { 260 | border: none; 261 | } 262 | a { 263 | text-align: center; 264 | padding: 10px; 265 | } 266 | } 267 | } 268 | } 269 | .bookmark { 270 | position: relative; 271 | display: flex; 272 | height: 100%; 273 | align-items: center; 274 | justify-content: center; 275 | .counter { 276 | font-size: 0.75rem; 277 | width: 20px; 278 | height: 20px; 279 | position: absolute; 280 | background: $grey-1; 281 | z-index: 2; 282 | border-radius: 50%; 283 | text-align: center; 284 | top: -8px; 285 | right: -10px; 286 | color: $grey-4; 287 | } 288 | } 289 | .no-bookmarks { 290 | color: $white; 291 | font-size: 0.875rem; 292 | margin: 0; 293 | padding: 0 15px 15px 15px; 294 | i { 295 | margin: 0 5px; 296 | } 297 | } 298 | } 299 | 300 | .ie { 301 | header { 302 | .popover { 303 | overflow: auto; 304 | } 305 | } 306 | } 307 | 308 | .counter.hidden { 309 | + { 310 | .far { 311 | + { 312 | .fas { 313 | display: none; 314 | } 315 | } 316 | display: block; 317 | } 318 | } 319 | } 320 | .counter { 321 | &:not(.hidden) { 322 | + { 323 | .far { 324 | display: none; 325 | + { 326 | .fas { 327 | display: block; 328 | } 329 | } 330 | } 331 | } 332 | } 333 | } 334 | 335 | @media (max-width: $large) { 336 | header { 337 | .navigation-trigger { 338 | display: flex; 339 | } 340 | .navigation-popover { 341 | display: none; 342 | } 343 | .navigation { 344 | padding-right: 30px; 345 | display: flex; 346 | align-items: center; 347 | ul { 348 | li { 349 | padding: 0; 350 | a { 351 | margin: 0; 352 | padding: 8px 13px; 353 | font-family: $main_font; 354 | } 355 | } 356 | } 357 | .popover { 358 | display: block; 359 | width: 150px; 360 | margin-left: -102px; 361 | } 362 | } 363 | nav { 364 | ul { 365 | flex-wrap: wrap; 366 | flex-direction: column; 367 | width: 100%; 368 | } 369 | } 370 | } 371 | } 372 | 373 | @media (max-width: $small) { 374 | header { 375 | .popover { 376 | max-height: calc(100vh - 100px); 377 | max-height: calc(100vh - 100px); 378 | } 379 | } 380 | } 381 | 382 | @media (max-width: $extra_small) { 383 | header { 384 | .navigation { 385 | margin-right: 10px; 386 | padding-right: 20px; 387 | .popover { 388 | height: calc(100vh - 46px); 389 | max-height: calc(100vh - 46px); 390 | left: 0 !important; 391 | width: 100vw; 392 | max-width: 100vw; 393 | margin-left: 0; 394 | transform: initial !important; 395 | will-change: initial !important; 396 | margin-top: 0; 397 | top: 100% !important; 398 | padding-top: 0; 399 | overflow: auto; 400 | } 401 | ul { 402 | li { 403 | a { 404 | padding: 17px 13px; 405 | } 406 | } 407 | } 408 | } 409 | .search { 410 | margin-right: 10px; 411 | position: static; 412 | #results { 413 | padding-top: 51px; 414 | } 415 | } 416 | padding: 10px 0; 417 | .blog-logo { 418 | img { 419 | max-width: 100px; 420 | max-height: 30px; 421 | } 422 | } 423 | .col-6 { 424 | position: static; 425 | } 426 | .popover { 427 | height: calc(100vh - 46px); 428 | max-height: calc(100vh - 46px); 429 | left: 0 !important; 430 | width: 100vw; 431 | max-width: 100vw; 432 | margin-left: 0; 433 | transform: initial !important; 434 | will-change: initial !important; 435 | margin-top: 0; 436 | top: 100% !important; 437 | padding-top: 0; 438 | overflow: auto; 439 | .popover-body { 440 | min-height: calc(100vh - 46px); 441 | } 442 | .arrow { 443 | display: none; 444 | } 445 | input { 446 | top: 100%; 447 | height: 51px; 448 | position: fixed; 449 | } 450 | } 451 | iframe { 452 | width: 100% !important; 453 | } 454 | .popover-body { 455 | h3 { 456 | position: fixed; 457 | top: 100%; 458 | background: $grey-2; 459 | width: 100%; 460 | z-index: 2; 461 | } 462 | } 463 | } 464 | } 465 | 466 | .paged { 467 | header { 468 | background: rgba(0,0,0,0.8); 469 | } 470 | #content { 471 | margin-top: 100px; 472 | } 473 | } 474 | .popover { 475 | .close { 476 | position: absolute; 477 | top: 11px; 478 | right: 12px; 479 | z-index: 999; 480 | width: 14px; 481 | height: 14px; 482 | background-image: url(../img/x.svg); 483 | background-size: 14px; 484 | background-color: #3f3f3f; 485 | opacity: 1; 486 | padding: 15px; 487 | background-position: center; 488 | background-repeat: no-repeat; 489 | border-radius: 3px; 490 | display: none; 491 | } 492 | } 493 | 494 | @media (max-width: $extra_small) { 495 | .popover { 496 | .close { 497 | display: block; 498 | top: calc(100% + 11px); 499 | position: fixed; 500 | } 501 | } 502 | } 503 | 504 | .search { 505 | .popover { 506 | .close { 507 | top: 5px; 508 | } 509 | } 510 | } 511 | 512 | @media (max-width: $extra_small) { 513 | .search { 514 | .popover { 515 | .close { 516 | top: calc(100% + 11px); 517 | position: fixed; 518 | } 519 | } 520 | } 521 | } 522 | 523 | .social-content { 524 | display: flex; 525 | align-items: center; 526 | width: 25px; 527 | height: 25px; 528 | margin-left: 20px; 529 | &:last-child { 530 | &:first-child { 531 | margin-left: 0; 532 | } 533 | } 534 | } 535 | 536 | @media (max-width: $extra_small) { 537 | .social-container { 538 | padding-top: 51px; 539 | } 540 | } 541 | 542 | .social-trigger { 543 | display: flex; 544 | a { 545 | display: flex; 546 | align-items: center; 547 | justify-content: center; 548 | margin-left: 30px; 549 | } 550 | svg { 551 | width: 18px; 552 | height: 24px; 553 | } 554 | } 555 | 556 | .bookmark-content { 557 | display: flex; 558 | align-items: center; 559 | width: 25px; 560 | height: 25px; 561 | } 562 | 563 | @media (max-width: $extra_small) { 564 | .bookmark-container { 565 | padding-top: 51px; 566 | } 567 | } 568 | 569 | .simplebar-placeholder{ 570 | display: none; 571 | } -------------------------------------------------------------------------------- /amp.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{!-- Document Settings --}} 5 | 6 | 7 | {{!-- Page Meta --}} 8 | {{meta_title}} 9 | 10 | {{!-- Mobile Meta --}} 11 | 12 | 13 | 14 | {{!-- Brand icon --}} 15 | 16 | 17 | {{amp_ghost_head}} 18 | 19 | {{!-- Styles'n'Scripts --}} 20 | 21 | 507 | 508 | {{!-- The AMP boilerplate --}} 509 | 510 | 511 | 512 | {{amp_components}} 513 | 514 | 515 | 516 | 517 | {{#post}} 518 |
    519 |
    520 |
    521 |
    522 | 527 |
    528 |
    529 |
    530 |
    531 | 532 |
    533 |
    534 |
    535 |
  • 536 |
    537 | {{#if feature_image}} 538 | 539 | {{/if}} 540 |
    541 |
    542 |
    543 |
    544 |
    545 | {{#if tags}} 546 |
      547 | {{#foreach tags}} 548 |
    • 549 | {{name}} 550 |
      • 551 | {{/foreach}} 552 |
    553 | {{/if}} 554 |

    {{title}}

    555 |

    {{excerpt words="28"}} ... {{t "read more"}}

    556 |
      557 |
      • 558 |
    • {{authors}}
      • 559 |
    • {{reading_time minute=(t "1 min read") minutes=(t "% min read")}}
      • 560 |
    561 |
    562 |
    563 |
    564 |
    565 |
    • 566 |
    567 | 568 |
    569 |
    570 | 571 |
    572 |
    573 |
    574 | 575 |
    576 |
    {{amp_content}}
    577 |
    578 | 579 |
    580 |
    581 |
    582 | 583 | {{/post}} 584 | 593 | 594 | 595 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main JS file for Joelma 3 | */ 4 | 5 | jQuery(document).ready(function($) { 6 | 7 | if(typeof changeConfig !== "undefined"){ 8 | config = Object.assign(config, changeConfig); 9 | } 10 | 11 | var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0), 12 | h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0), 13 | readLaterPosts = [], 14 | noBookmarksMessage = $('.no-bookmarks').html(), 15 | monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "Sepember", "October", "November", "December"]; 16 | 17 | var ghostAPI = new GhostContentAPI({ 18 | url: config['content-api-url'], 19 | key: config['content-api-key'], 20 | version: 'v3' 21 | }); 22 | 23 | // Detect IE 24 | if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) { 25 | $('body').addClass('ie'); 26 | } 27 | 28 | // Featured Posts Slider 29 | 30 | if ($('.intro .swiper-slide').length == 1) { 31 | $('.intro .swiper-pagination').addClass('hidden'); 32 | }; 33 | 34 | setGalleryRation(); 35 | 36 | var swiperIntro = new Swiper('.intro .swiper-container', { 37 | pagination: { 38 | el: '.intro .swiper-pagination', 39 | clickable: true, 40 | }, 41 | simulateTouch: false, 42 | autoplay: { 43 | delay: 5000, 44 | disableOnInteraction: false 45 | }, 46 | }); 47 | 48 | if ($('.intro').length) { 49 | $('.intro .swiper-pagination .swiper-pagination-bullet:nth-child('+ (swiperIntro.activeIndex+2) +')').addClass('next'); 50 | swiperIntro.on('slideChange', function () { 51 | $('.intro .swiper-pagination .swiper-pagination-bullet').removeClass('next'); 52 | if (swiperIntro.isEnd) { 53 | $('.intro .swiper-pagination .swiper-pagination-bullet:nth-child(1)').addClass('next'); 54 | }else{ 55 | $('.intro .swiper-pagination .swiper-pagination-bullet:nth-child('+ (swiperIntro.activeIndex+2) +')').addClass('next'); 56 | }; 57 | }); 58 | }; 59 | 60 | // Related Posts Slider 61 | 62 | var swiperRelatedPosts = new Swiper('.related-posts .swiper-container', { 63 | slidesPerView: 'auto', 64 | centeredSlides: true, 65 | roundLengths: true, 66 | navigation: { 67 | nextEl: '.related-posts .swiper-button-next', 68 | prevEl: '.related-posts .swiper-button-prev', 69 | }, 70 | }); 71 | 72 | // Check 'read later' posts 73 | if (typeof Cookies.get('joelma-read-later') !== "undefined") { 74 | readLaterPosts = JSON.parse(Cookies.get('joelma-read-later')); 75 | } 76 | 77 | readLaterPosts = readLater($('#content .loop'), readLaterPosts); 78 | readLaterPosts = readLater($('.related-posts'), readLaterPosts); 79 | 80 | $('.go').on('click', function(event) { 81 | event.preventDefault(); 82 | $("html, body").animate({ scrollTop: $('#content').offset().top }, 600); 83 | return false; 84 | }); 85 | 86 | $('.social-trigger, .bookmark, .search-trigger, .navigation-trigger, .trigger-share').on('click', function(event) { 87 | event.preventDefault(); 88 | }); 89 | 90 | function closePopover(id){ 91 | $(id).find('.close').on('click', function(event) { 92 | event.preventDefault(); 93 | $(id).popover('hide'); 94 | }); 95 | } 96 | 97 | // Navigation Popover 98 | 99 | $('.navigation-trigger').popover({ 100 | container: '.navigation', 101 | html: true, 102 | placement: 'bottom', 103 | sanitize: false, 104 | content: function() { 105 | return $('.navigation-popover').html(); 106 | } 107 | }); 108 | 109 | $('.navigation-trigger').on('shown.bs.popover', function () { 110 | var id = $('.navigation-trigger').attr('aria-describedby'); 111 | if (w > 575) { 112 | if (!$('body').hasClass('ie')) { 113 | new SimpleBar($('#' + id)[0]); 114 | }; 115 | } 116 | closePopover('#' + id); 117 | }); 118 | 119 | // Search Popover 120 | 121 | $('.search-trigger').popover({ 122 | container: '.search', 123 | html: true, 124 | placement: 'bottom', 125 | sanitize: false, 126 | content: function() { 127 | return $('.search-popover').html(); 128 | } 129 | }); 130 | 131 | $('.search-trigger').on('shown.bs.popover', function () { 132 | var id = $('.search-trigger').attr('aria-describedby'); 133 | searchInit('#' + id); 134 | closePopover('#' + id); 135 | }); 136 | 137 | // Bookmark Popover 138 | 139 | $('.bookmark').popover({ 140 | container: '.bookmark-content', 141 | html: true, 142 | placement: 'bottom', 143 | content: function() { 144 | return $('.bookmark-popover').html(); 145 | } 146 | }); 147 | 148 | $('.bookmark').on('shown.bs.popover', function () { 149 | var id = $('.bookmark').attr('aria-describedby'); 150 | if (w > 575) { 151 | if (!$('body').hasClass('ie')) { 152 | new SimpleBar($('#' + id)[0]); 153 | }; 154 | }; 155 | readLaterPosts = readLater($('#' + id + " #results"), readLaterPosts); 156 | closePopover('#' + id); 157 | }) 158 | 159 | // Social Popover 160 | 161 | $('.social-trigger').popover({ 162 | container: '.social-content', 163 | html: true, 164 | placement: 'bottom', 165 | content: function() { 166 | return $('.social-popover').html(); 167 | } 168 | }); 169 | 170 | $('.social-trigger').on('shown.bs.popover', function () { 171 | var id = $('.social-trigger').attr('aria-describedby'); 172 | if ($('.social-popover').attr('data-twitter') != '') { 173 | var twitter = $('.social-popover').attr('data-twitter').substr(1); 174 | $('#' + id).find('.social-container').append(' '); 175 | }; 176 | if (w > 575) { 177 | if (!$('body').hasClass('ie')) { 178 | new SimpleBar($('#' + id)[0]); 179 | }; 180 | }; 181 | closePopover('#' + id); 182 | }); 183 | 184 | // Initialize Disqus comments 185 | if ($('#content').attr('data-id') && config['disqus-shortname'] != '') { 186 | 187 | $('.comments-trigger').on('click', function(event) { 188 | event.preventDefault(); 189 | $(this).addClass('hidden'); 190 | $('.comments-inner').append('
    '); 191 | 192 | var url = [location.protocol, '//', location.host, location.pathname].join(''); 193 | var disqus_config = function () { 194 | this.page.url = url; 195 | this.page.identifier = $('#content').attr('data-id'); 196 | }; 197 | 198 | (function() { 199 | var d = document, s = d.createElement('script'); 200 | s.src = '//'+ config['disqus-shortname'] +'.disqus.com/embed.js'; 201 | s.setAttribute('data-timestamp', +new Date()); 202 | (d.head || d.body).appendChild(s); 203 | })(); 204 | }); 205 | 206 | }; 207 | 208 | // Initialize ghostHunter - A Ghost blog search engine 209 | function searchInit(id){ 210 | 211 | var ghostSearch = new GhostSearch({ 212 | url: config['content-api-url'], 213 | key: config['content-api-key'], 214 | input: id + " #search-field", 215 | results: id + " #results", 216 | version: 'v3', 217 | api: { 218 | parameters: { 219 | fields: ['title', 'slug', 'published_at', 'primary_tag', 'id'], 220 | include: 'tags', 221 | }, 222 | }, 223 | on: { 224 | afterDisplay: function(results){ 225 | 226 | $(id + " #results").empty(); 227 | 228 | var tags = []; 229 | $.each(results, function(index, val) { 230 | if (val.obj.primary_tag) { 231 | if ($.inArray(val.obj.primary_tag.name, tags) === -1) { 232 | tags.push(val.obj.primary_tag.name); 233 | }; 234 | }else{ 235 | if ($.inArray('Other', tags) === -1) { 236 | tags.push('Other'); 237 | }; 238 | }; 239 | }); 240 | 241 | tags.sort(); 242 | 243 | $.each(tags, function(index, val) { 244 | var tag = val; 245 | if (val == 'Other') { 246 | tag = $(id + ' #results').attr('data-other'); 247 | }; 248 | $(id + ' #results').append('
    '+ tag +'
    '); 249 | }); 250 | 251 | $.each(results, function(index, val) { 252 | var dateSplit = val.obj.published_at.split('T'); 253 | dateSplit = dateSplit[0].split('-'); 254 | var month = monthNames[dateSplit[1]-1]; 255 | var date = moment(dateSplit[2]+'-'+month+'-'+dateSplit[1], "DD-MM-YYYY").format('DD MMM YYYY'); 256 | if (val.obj.primary_tag) { 257 | $(id + ' #results ul[data-tag="'+ val.obj.primary_tag.name +'"]').append('
  • '+ val.obj.title +'
    • '); 258 | }else{ 259 | $(id + ' #results ul[data-tag="Other"]').append('
  • '+ val.obj.title +'
    • '); 260 | }; 261 | }); 262 | 263 | readLaterPosts = readLater($(id + ' #results'), readLaterPosts); 264 | 265 | }, 266 | } 267 | }) 268 | 269 | if (w > 575) { 270 | if (!$('body').hasClass('ie')) { 271 | new SimpleBar($(id)[0]); 272 | }; 273 | }; 274 | $(id + " #search-field").focus(); 275 | 276 | } 277 | 278 | function readLater(content, readLaterPosts){ 279 | 280 | if (typeof Cookies.get('joelma-read-later') !== "undefined") { 281 | $.each(readLaterPosts, function(index, val) { 282 | $('.read-later[data-id="'+ val +'"]').addClass('active'); 283 | }); 284 | bookmarks(readLaterPosts); 285 | } 286 | 287 | $(content).find('.read-later').each(function(index, el) { 288 | $(this).on('click', function(event) { 289 | event.preventDefault(); 290 | var id = $(this).attr('data-id'); 291 | if ($(this).hasClass('active')) { 292 | removeValue(readLaterPosts, id); 293 | }else{ 294 | readLaterPosts.push(id); 295 | }; 296 | $('.read-later[data-id="'+ id +'"]').each(function(index, el) { 297 | $(this).toggleClass('active'); 298 | }); 299 | $('header .counter').addClass('shake'); 300 | setTimeout(function() { 301 | $('header .counter').removeClass('shake'); 302 | }, 300); 303 | Cookies.set('joelma-read-later', readLaterPosts, { expires: 365 }); 304 | bookmarks(readLaterPosts); 305 | }); 306 | }); 307 | 308 | return readLaterPosts; 309 | 310 | } 311 | 312 | function bookmarks(readLaterPosts){ 313 | 314 | $('.bookmark-container').empty(); 315 | if (readLaterPosts.length) { 316 | 317 | var filter = readLaterPosts.toString(); 318 | filter = "id:["+filter+"]"; 319 | 320 | ghostAPI.posts 321 | .browse({limit: 'all', filter: filter, include: 'tags'}) 322 | .then(function(results){ 323 | 324 | $('.bookmark-container').empty(); 325 | 326 | var tags = []; 327 | $.each(results, function(index, val) { 328 | if (val.primary_tag) { 329 | if ($.inArray(val.primary_tag.name, tags) === -1) { 330 | tags.push(val.primary_tag.name); 331 | }; 332 | }else{ 333 | if ($.inArray('Other', tags) === -1) { 334 | tags.push('Other'); 335 | }; 336 | }; 337 | }); 338 | 339 | tags.sort(); 340 | 341 | $.each(tags, function(index, val) { 342 | var tag = val; 343 | if (val == 'Other') { 344 | tag = $('.bookmark-container').attr('data-other'); 345 | }; 346 | $('.bookmark-container').append('
    '+ tag +'
    '); 347 | }); 348 | 349 | $.each(results, function(index, val) { 350 | var dateSplit = val.published_at.split('T'); 351 | dateSplit = dateSplit[0].split('-'); 352 | var month = monthNames[dateSplit[1]-1]; 353 | var date = moment(dateSplit[2]+'-'+month+'-'+dateSplit[1], "DD-MM-YYYY").format('DD MMM YYYY'); 354 | if (val.primary_tag) { 355 | $('.bookmark-container ul[data-tag="'+ val.primary_tag.name +'"]').append('
  • '+ val.title +'
    • '); 356 | }else{ 357 | $('.bookmark-container ul[data-tag="Other"]').append('
  • '+ val.title +'
    • '); 358 | }; 359 | }); 360 | 361 | $('.bookmark-container').find('.read-later').each(function(index, el) { 362 | $(this).on('click', function(event) { 363 | event.preventDefault(); 364 | var id = $(this).attr('data-id'); 365 | if ($(this).hasClass('active')) { 366 | removeValue(readLaterPosts, id); 367 | }else{ 368 | readLaterPosts.push(id); 369 | }; 370 | $('.read-later[data-id="'+ id +'"]').each(function(index, el) { 371 | $(this).toggleClass('active'); 372 | }); 373 | Cookies.set('joelma-read-later', readLaterPosts, { expires: 365 }); 374 | bookmarks(readLaterPosts); 375 | }); 376 | }); 377 | 378 | if (results.length) { 379 | $('header .counter').removeClass('hidden').text(results.length); 380 | }else{ 381 | $('header .counter').addClass('hidden'); 382 | $('.bookmark-container').append('

    '); 383 | $('.no-bookmarks').html(noBookmarksMessage) 384 | }; 385 | 386 | }) 387 | .catch(function(err){ 388 | console.error(err); 389 | }); 390 | 391 | }else{ 392 | $('header .counter').addClass('hidden'); 393 | $('.bookmark-container').append('

    '); 394 | $('.no-bookmarks').html(noBookmarksMessage) 395 | }; 396 | 397 | } 398 | 399 | function removeValue(arr) { 400 | var what, a = arguments, L = a.length, ax; 401 | while (L > 1 && arr.length) { 402 | what = a[--L]; 403 | while ((ax= arr.indexOf(what)) !== -1) { 404 | arr.splice(ax, 1); 405 | } 406 | } 407 | return arr; 408 | } 409 | 410 | // On click outside popover, close it 411 | 412 | $(document).on('click', function (e) { 413 | $('[data-toggle="popover"],[data-original-title]').each(function () { 414 | if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { 415 | (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false 416 | } 417 | }); 418 | }); 419 | 420 | var didScroll, 421 | lastScrollTop = 0, 422 | delta = 5; 423 | 424 | // Execute on load 425 | $(window).on('load', function(event) { 426 | 427 | setGalleryRation(); 428 | 429 | var currentPage = 1; 430 | var pathname = window.location.pathname; 431 | var $result = $('.post'); 432 | var step = 0; 433 | 434 | // remove hash params from pathname 435 | pathname = pathname.replace(/#(.*)$/g, '').replace('/\//g', '/'); 436 | 437 | if ($('body').hasClass('paged')) { 438 | currentPage = parseInt(pathname.replace(/[^0-9]/gi, '')); 439 | } 440 | 441 | // Load more posts on click 442 | if (config['load-more']) { 443 | 444 | $('#load-posts').addClass('visible').removeClass('hidden'); 445 | 446 | $('#load-posts').on('click', function(event) { 447 | event.preventDefault(); 448 | 449 | if (currentPage == maxPages) { 450 | $('#load-posts').addClass('hidden'); 451 | return; 452 | }; 453 | 454 | var $this = $(this); 455 | 456 | // next page 457 | currentPage++; 458 | 459 | if ($('body').hasClass('paged')) { 460 | pathname = '/'; 461 | }; 462 | 463 | // Load more 464 | var nextPage = pathname + 'page/' + currentPage + '/'; 465 | 466 | if ($this.hasClass('step')) { 467 | setTimeout(function() { 468 | $this.removeClass('step'); 469 | step = 0; 470 | }, 1000); 471 | }; 472 | 473 | $.get(nextPage, function (content) { 474 | step++; 475 | var post = $(content).find('.post').addClass('hidden'); 476 | $('#content .loop').append( post ); 477 | $.each(post, function(index, val) { 478 | var $this = $(this); 479 | var id = $(this).attr('data-id'); 480 | $this.removeClass('hidden'); 481 | }); 482 | }); 483 | 484 | }); 485 | }; 486 | 487 | if (config['infinite-scroll'] && config['load-more']) { 488 | var checkTimer = 'on'; 489 | if ($('#load-posts').length > 0) { 490 | $(window).on('scroll', function(event) { 491 | var timer; 492 | if (isScrolledIntoView('#load-posts') && checkTimer == 'on' && step < config['infinite-scroll-step']) { 493 | $('#load-posts').click(); 494 | checkTimer = 'off'; 495 | timer = setTimeout(function() { 496 | checkTimer = 'on'; 497 | if (step == config['infinite-scroll-step']) { 498 | $('#load-posts').addClass('step'); 499 | }; 500 | }, 1000); 501 | }; 502 | }); 503 | }; 504 | }; 505 | 506 | }); 507 | 508 | // Add 'Copy to clipboard' for headings 509 | $('.content-inner h1, .content-inner h2, .content-inner h3, .content-inner h4, .content-inner h5, .content-inner h6').each(function(index, el) { 510 | var id = $(this).attr('id'); 511 | var url = window.location.href.split(/[?#]/)[0] + '#' + id; 512 | $(this).prepend(''); 513 | }); 514 | 515 | new ClipboardJS('.chain'); 516 | 517 | $('.chain').each(function(index, el) { 518 | $(this).on('click', function(event) { 519 | event.preventDefault(); 520 | $('#' + $(this).attr('aria-describedby')).find('.tooltip-inner').text('Copied!'); 521 | $(this).tooltip('update'); 522 | }); 523 | }); 524 | 525 | // Initialize Highlight.js 526 | $('pre code').each(function(i, block) { 527 | hljs.highlightBlock(block); 528 | }); 529 | 530 | // Make share buttons sticky 531 | function stickyShareButtons(w){ 532 | if (w < 576) { 533 | $('.content-inner .share').trigger("sticky_kit:detach"); 534 | }else{ 535 | $('.content-inner .share').stick_in_parent({ 536 | offset_top: 100 537 | }); 538 | } 539 | } 540 | stickyShareButtons(w); 541 | 542 | // Execute on scroll 543 | var shareHeight = $('.content-inner .share ul').height(); 544 | if ($(this).scrollTop() > 0) { 545 | $('body').addClass('scroll'); 546 | } 547 | $(window).on('scroll', function(event) { 548 | 549 | var checkShare = 0; 550 | 551 | $('.content-inner img').each(function(index, el) { 552 | var scrollTop = $(window).scrollTop(); 553 | var elementOffset = $(this).offset().top; 554 | var imgDistance = (elementOffset - scrollTop); 555 | var imgHeight = $(this).height(); 556 | var shareDistance = shareHeight + 100; 557 | if (imgDistance < shareDistance && (imgDistance + imgHeight) > 100) { 558 | checkShare++; 559 | }; 560 | }); 561 | 562 | if (checkShare > 0) { 563 | $('.content-inner .share').addClass('fade'); 564 | }else{ 565 | $('.content-inner .share').removeClass('fade'); 566 | }; 567 | 568 | if ($(this).scrollTop() > 0) { 569 | $('body').addClass('scroll'); 570 | }else{ 571 | $('body').removeClass('scroll'); 572 | }; 573 | 574 | }); 575 | 576 | var imgHeight = 0; 577 | $('.related-posts').imagesLoaded( function() { 578 | $('.related-posts img').each(function(index, el) { 579 | if (imgHeight >= $(this).height() || imgHeight == 0) { 580 | imgHeight = $(this).height(); 581 | }; 582 | }); 583 | $('.related-posts .img-holder').each(function(index, el) { 584 | $(this).height(imgHeight); 585 | }); 586 | }); 587 | 588 | // Check if element is into view when scrolling 589 | function isScrolledIntoView(elem){ 590 | var docViewTop = $(window).scrollTop(); 591 | var docViewBottom = docViewTop + $(window).height(); 592 | 593 | var elemTop = $(elem).offset().top; 594 | var elemBottom = elemTop + $(elem).height(); 595 | 596 | return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 597 | } 598 | 599 | // Initialize bootstrap tootlip 600 | $('[data-toggle="tooltip"]').tooltip(); 601 | 602 | // Validate subscribe form 603 | $(".gh-signin").each(function(index, el) { 604 | $(this).validate({ 605 | rules: { 606 | email: { 607 | required: true, 608 | email: true 609 | }, 610 | }, 611 | submitHandler: function (form) { 612 | $(form).submit(); 613 | } 614 | }); 615 | }); 616 | 617 | // Initialize shareSelectedText 618 | if (config['share-selected-text']) { 619 | shareSelectedText('.post-template .post-content', { 620 | sanitize: true, 621 | buttons: [ 622 | 'twitter', 623 | ], 624 | tooltipTimeout: 250 625 | }); 626 | }; 627 | 628 | // Execute on resize 629 | $(window).on('resize', function(event) { 630 | w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 631 | stickyShareButtons(w); 632 | }); 633 | 634 | if ($('.error-title').length) { 635 | $('body').addClass('error'); 636 | }; 637 | 638 | // Set the right proportion for images inside the gallery 639 | function setGalleryRation(){ 640 | $('.kg-gallery-image img').each(function(index, el) { 641 | var container = $(this).closest('.kg-gallery-image'); 642 | var width = $(this)[0].naturalWidth; 643 | var height = $(this)[0].naturalHeight; 644 | var ratio = width / height; 645 | container.attr('style', 'flex: ' + ratio + ' 1 0%'); 646 | }); 647 | } 648 | 649 | // Parse the URL parameter 650 | function getParameterByName(name, url) { 651 | if (!url) url = window.location.href; 652 | name = name.replace(/[\[\]]/g, "\\$&"); 653 | var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 654 | results = regex.exec(url); 655 | if (!results) return null; 656 | if (!results[2]) return ''; 657 | return decodeURIComponent(results[2].replace(/\+/g, " ")); 658 | } 659 | // Give the parameter a variable name 660 | var action = getParameterByName('action'); 661 | var stripe = getParameterByName('stripe'); 662 | 663 | if (action == 'subscribe') { 664 | $('body').addClass("subscribe-success"); 665 | } 666 | if (action == 'signup') { 667 | window.location = '/signup/?action=checkout'; 668 | } 669 | if (action == 'checkout') { 670 | $('body').addClass("signup-success"); 671 | } 672 | if (action == 'signin') { 673 | $('body').addClass("signin-success"); 674 | } 675 | if (stripe == 'success') { 676 | $('body').addClass("checkout-success"); 677 | } 678 | $('.notification-close').click(function () { 679 | $(this).parent().addClass('closed'); 680 | var uri = window.location.toString(); 681 | if (uri.indexOf("?") > 0) { 682 | var clean_uri = uri.substring(0, uri.indexOf("?")); 683 | window.history.replaceState({}, document.title, clean_uri); 684 | } 685 | }); 686 | 687 | // Validate signup form 688 | $(".signup-form").validate({ 689 | rules: { 690 | email: { 691 | required: true, 692 | email: true 693 | }, 694 | }, 695 | }); 696 | 697 | // Validate signin form 698 | $(".signin-form").validate({ 699 | rules: { 700 | email: { 701 | required: true, 702 | email: true 703 | }, 704 | }, 705 | }); 706 | 707 | }); -------------------------------------------------------------------------------- /assets/scss/_post.scss: -------------------------------------------------------------------------------- 1 | .intro { 2 | position: relative; 3 | z-index: 110; 4 | &.intro-small{ 5 | .swiper-slide { 6 | min-height: 500px; 7 | padding-bottom: 100px; 8 | h1{ 9 | font-size: 3rem; 10 | } 11 | } 12 | } 13 | .swiper-wrapper { 14 | padding: 0; 15 | margin: 0; 16 | } 17 | .swiper-slide { 18 | min-height: 100vh; 19 | background: grey; 20 | display: flex; 21 | position: relative; 22 | padding: 200px 0 150px 0px; 23 | align-items: center; 24 | height: auto; 25 | .post { 26 | width: 100%; 27 | } 28 | .bg { 29 | background-repeat: no-repeat; 30 | background-position: center; 31 | background-size: cover; 32 | width: 100%; 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 100%; 38 | z-index: 1; 39 | &:before { 40 | content: ''; 41 | position: absolute; 42 | top: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 100%; 46 | z-index: 1; 47 | background: linear-gradient(180deg, $black 0%, rgba(51, 51, 51, 0.5) 100%); 48 | } 49 | } 50 | .inner { 51 | position: relative; 52 | z-index: 2; 53 | color: $white; 54 | display: flex; 55 | height: 100%; 56 | width: 100%; 57 | align-items: center; 58 | .post-title { 59 | font-weight: bold; 60 | font-size: 3.875rem; 61 | margin-bottom: 10px; 62 | margin-top: 0; 63 | } 64 | } 65 | } 66 | .swiper-pagination { 67 | bottom: auto; 68 | left: auto; 69 | right: calc((100% - 1140px)/2 + 15px); 70 | top: 50%; 71 | width: auto; 72 | display: flex; 73 | flex-direction: column; 74 | transform: translateY(-50%); 75 | .swiper-pagination-bullet { 76 | width: 20px; 77 | height: 20px; 78 | border-radius: 50%; 79 | background: rgba(252, 252, 252, 0.25); 80 | margin: 10px 0; 81 | overflow: hidden; 82 | font-size: 0; 83 | -webkit-transform: scale3d(0.5,0.5,1); 84 | transform: scale3d(0.5,0.5,1); 85 | -webkit-transition: -webkit-transform 0.5s; 86 | transition: transform 0.5s; 87 | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); 88 | transition-timing-function: cubic-bezier(0.2,1,0.3,1); 89 | opacity: .8; 90 | &:before { 91 | content: ''; 92 | position: absolute; 93 | top: 0; 94 | left: 0; 95 | width: 100%; 96 | height: 100%; 97 | background: $white; 98 | -webkit-transform: translate3d(0,100%,0); 99 | transform: translate3d(0,100%,0); 100 | -webkit-transition: -webkit-transform 0.5s; 101 | transition: transform 0.5s; 102 | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); 103 | transition-timing-function: cubic-bezier(0.2,1,0.3,1); 104 | } 105 | } 106 | .swiper-pagination-bullet.swiper-pagination-bullet-active { 107 | -webkit-transform: scale3d(1,1,1); 108 | transform: scale3d(1,1,1); 109 | opacity: 1; 110 | &:before { 111 | -webkit-transform: translate3d(0,0,0); 112 | transform: translate3d(0,0,0); 113 | } 114 | } 115 | .swiper-pagination-bullet.next { 116 | &:before { 117 | -webkit-animation: next 5.2s linear forwards; 118 | -moz-animation: next 5.2s linear forwards; 119 | -o-animation: next 5.2s linear forwards; 120 | animation: next 5.2s linear forwards; 121 | } 122 | } 123 | } 124 | .excerpt { 125 | margin-bottom: 50px; 126 | } 127 | a { 128 | color: $white; 129 | &:hover { 130 | color: $purple; 131 | } 132 | } 133 | .tags { 134 | margin: 0; 135 | } 136 | .post-meta { 137 | color: $white; 138 | a { 139 | font-size: 1rem; 140 | } 141 | } 142 | } 143 | 144 | @media (max-width: $large) { 145 | .intro { 146 | .swiper-pagination { 147 | right: calc((100% - 960px)/2 + 15px); 148 | } 149 | } 150 | } 151 | 152 | @media (max-width: $medium) { 153 | .intro { 154 | .swiper-pagination { 155 | right: calc((100% - 720px)/2 + 15px); 156 | } 157 | .swiper-slide { 158 | .inner { 159 | .post-title { 160 | font-size: 2.625rem; 161 | } 162 | } 163 | padding: 175px 0 125px 0px; 164 | } 165 | .excerpt { 166 | margin-bottom: 20px; 167 | } 168 | } 169 | .swiper-container { 170 | .post-meta { 171 | li { 172 | margin-right: 0; 173 | width: 100%; 174 | justify-content: flex-start; 175 | } 176 | flex-direction: column; 177 | } 178 | } 179 | } 180 | 181 | @media (max-width: $small) { 182 | .intro { 183 | &.intro-small{ 184 | .swiper-slide{ 185 | min-height: 0; 186 | padding-bottom: 50px; 187 | padding-top: 100px; 188 | } 189 | } 190 | .swiper-slide{ 191 | min-height: 0; 192 | padding-bottom: 50px; 193 | padding-top: 100px; 194 | } 195 | .swiper-pagination { 196 | right: 50%; 197 | transform: translateX(50%); 198 | top: auto; 199 | bottom: 50px; 200 | flex-direction: row; 201 | .swiper-pagination-bullet { 202 | width: 18px; 203 | height: 18px; 204 | margin: 5px 10px; 205 | } 206 | } 207 | } 208 | } 209 | 210 | @media (max-width: $extra_small) { 211 | .intro { 212 | .swiper-slide { 213 | padding: 85px 0 75px 0px; 214 | align-items: flex-start; 215 | } 216 | .swiper-pagination { 217 | bottom: 25px; 218 | } 219 | } 220 | } 221 | 222 | .go { 223 | position: absolute; 224 | bottom: 30px; 225 | left: 50%; 226 | z-index: 999; 227 | width: 50px; 228 | height: 50px; 229 | display: flex; 230 | align-items: center; 231 | justify-content: center; 232 | margin-left: -25px; 233 | color: $white; 234 | font-size: 1.5rem; 235 | opacity: .5; 236 | transform: translateY(0); 237 | -webkit-animation: go 2s infinite; 238 | -moz-animation: go 2s infinite; 239 | -o-animation: go 2s infinite; 240 | animation: go 2s infinite; 241 | &:hover { 242 | opacity: 1; 243 | color: $white; 244 | } 245 | } 246 | 247 | @media (max-width: $small) { 248 | .go { 249 | display: none; 250 | } 251 | } 252 | 253 | .excerpt { 254 | max-width: 66.66%; 255 | } 256 | 257 | @media (max-width: $extra_small) { 258 | .excerpt { 259 | max-width: 100%; 260 | } 261 | } 262 | 263 | .read-more { 264 | font-weight: bold; 265 | } 266 | 267 | .tags { 268 | list-style-type: none; 269 | margin: 0; 270 | padding: 0; 271 | display: flex; 272 | flex-wrap: wrap; 273 | li { 274 | a { 275 | margin-right: 10px; 276 | margin-bottom: 10px; 277 | line-height: 1.25rem; 278 | font-size: 0.75rem; 279 | color: $grey-1; 280 | border: 1px solid transparent; 281 | background: rgba($grey-1, 0.2); 282 | border-radius: 15px; 283 | padding: 3px 15px; 284 | font-weight: normal; 285 | display: block; 286 | &:hover { 287 | background: transparent; 288 | border: 1px solid $purple; 289 | color: $purple; 290 | } 291 | } 292 | } 293 | } 294 | 295 | .read-later { 296 | font-size: 1rem; 297 | position: absolute; 298 | right: 0; 299 | top: 5px; 300 | padding: 4px 10px 5px 10px; 301 | .fas { 302 | display: none; 303 | } 304 | .far { 305 | display: block; 306 | } 307 | } 308 | .read-later.active { 309 | .far { 310 | display: none; 311 | } 312 | .fas { 313 | display: block; 314 | } 315 | } 316 | 317 | .post-meta { 318 | line-height: 2rem; 319 | font-size: 1rem; 320 | display: flex; 321 | list-style-type: none; 322 | padding: 0; 323 | margin: 30px 0 0 0; 324 | font-weight: 500; 325 | li { 326 | margin-right: 40px; 327 | display: flex; 328 | align-items: center; 329 | justify-content: center; 330 | i { 331 | margin-right: 10px; 332 | } 333 | } 334 | li.share { 335 | margin-left: auto; 336 | margin-right: 0; 337 | i { 338 | margin-right: 0; 339 | } 340 | } 341 | a { 342 | line-height: 2rem; 343 | font-size: 0.875rem; 344 | font-weight: 500; 345 | } 346 | } 347 | 348 | @media (max-width: $small) { 349 | .post-meta { 350 | li.share { 351 | position: absolute; 352 | bottom: 0; 353 | left: 100%; 354 | transform: translateX(-100%); 355 | width: auto; 356 | } 357 | } 358 | } 359 | 360 | @media (max-width: $extra_small) { 361 | .post-meta { 362 | li { 363 | margin-right: 0; 364 | width: 100%; 365 | justify-content: flex-start; 366 | } 367 | flex-direction: column; 368 | } 369 | } 370 | 371 | .share { 372 | margin-top: -10px; 373 | position: relative; 374 | perspective: 250px; 375 | padding: 10px 10px 0 10px; 376 | z-index: 10; 377 | a { 378 | cursor: default; 379 | &:hover { 380 | color: $black; 381 | } 382 | } 383 | &:hover { 384 | ul { 385 | visibility: visible; 386 | opacity: 1; 387 | pointer-events: auto; 388 | -webkit-transform: translateY(0) scale(1); 389 | transform: translateY(0) scale(1); 390 | } 391 | } 392 | ul { 393 | -webkit-transition: all .3s cubic-bezier(0.2,1,0.3,1); 394 | -moz-transition: all .3s cubic-bezier(0.2,1,0.3,1); 395 | -o-transition: all .3s cubic-bezier(0.2,1,0.3,1); 396 | transition: all .3s cubic-bezier(0.2,1,0.3,1); 397 | -webkit-transform: translateY(20px) scale(0.9); 398 | transform: translateY(20px) scale(0.9); 399 | pointer-events: none; 400 | visibility: hidden; 401 | opacity: 0; 402 | position: absolute; 403 | margin: 0; 404 | padding: 0; 405 | bottom: 40px; 406 | background: #2b2b2b; 407 | box-shadow: 0px 10px 40px rgba($black, 0.1); 408 | border-radius: 3px; 409 | right: -4px; 410 | list-style-type: none; 411 | li { 412 | margin: 0; 413 | border-bottom: 1px solid rgba(229, 229, 229, 0.1); 414 | &:last-child { 415 | border: none; 416 | } 417 | a { 418 | color: $white; 419 | width: 100%; 420 | text-align: center; 421 | padding: 3px 10px; 422 | cursor: pointer; 423 | display: block; 424 | line-height: 2rem; 425 | font-size: 0.875rem; 426 | &:hover { 427 | color: $white; 428 | background: rgba($grey-1, 0.2); 429 | } 430 | i { 431 | margin: 0; 432 | } 433 | } 434 | } 435 | } 436 | } 437 | 438 | .content-inner { 439 | padding: 100px 15px; 440 | p { 441 | line-height: 1.75rem; 442 | font-size: 1.125rem; 443 | } 444 | ul { 445 | line-height: 1.75rem; 446 | font-size: 1.125rem; 447 | padding-left: 20px; 448 | li { 449 | p { 450 | margin-bottom: 10px; 451 | } 452 | } 453 | } 454 | ol { 455 | line-height: 1.75rem; 456 | font-size: 1.125rem; 457 | padding-left: 20px; 458 | } 459 | h1 { 460 | &:first-child { 461 | margin-top: -20px; 462 | } 463 | margin-top: 30px; 464 | margin-bottom: 30px; 465 | position: relative; 466 | padding-top: 20px; 467 | font-size: 4.5rem; 468 | &:hover { 469 | .chain { 470 | visibility: visible; 471 | opacity: 1; 472 | } 473 | } 474 | .chain { 475 | top: 45px; 476 | } 477 | } 478 | h2 { 479 | &:first-child { 480 | margin-top: -20px; 481 | } 482 | margin-top: 30px; 483 | margin-bottom: 30px; 484 | position: relative; 485 | padding-top: 20px; 486 | font-size: 3rem; 487 | &:hover { 488 | .chain { 489 | visibility: visible; 490 | opacity: 1; 491 | } 492 | } 493 | .chain { 494 | top: 35px; 495 | } 496 | } 497 | h3 { 498 | &:first-child { 499 | margin-top: -20px; 500 | } 501 | margin-top: 30px; 502 | margin-bottom: 30px; 503 | position: relative; 504 | padding-top: 20px; 505 | font-size: 2rem; 506 | &:hover { 507 | .chain { 508 | visibility: visible; 509 | opacity: 1; 510 | } 511 | } 512 | .chain { 513 | top: 25px; 514 | } 515 | } 516 | h4 { 517 | &:first-child { 518 | margin-top: -20px; 519 | } 520 | margin-top: 30px; 521 | margin-bottom: 30px; 522 | position: relative; 523 | padding-top: 20px; 524 | font-size: 1.375rem; 525 | &:hover { 526 | .chain { 527 | visibility: visible; 528 | opacity: 1; 529 | } 530 | } 531 | .chain { 532 | top: 21px; 533 | } 534 | } 535 | h5 { 536 | &:first-child { 537 | margin-top: -20px; 538 | } 539 | margin-top: 30px; 540 | margin-bottom: 30px; 541 | position: relative; 542 | padding-top: 20px; 543 | font-size: 0.875rem; 544 | &:hover { 545 | .chain { 546 | visibility: visible; 547 | opacity: 1; 548 | } 549 | } 550 | .chain { 551 | display: none; 552 | } 553 | } 554 | h6 { 555 | &:first-child { 556 | margin-top: -20px; 557 | } 558 | margin-top: 30px; 559 | margin-bottom: 30px; 560 | position: relative; 561 | padding-top: 20px; 562 | font-size: 0.75rem; 563 | &:hover { 564 | .chain { 565 | visibility: visible; 566 | opacity: 1; 567 | } 568 | } 569 | .chain { 570 | display: none; 571 | } 572 | } 573 | .chain { 574 | visibility: hidden; 575 | opacity: 0; 576 | position: absolute; 577 | left: -40px; 578 | font-size: 1rem; 579 | bottom: calc(50% - 25px); 580 | width: 40px; 581 | height: 30px; 582 | text-align: center; 583 | line-height: 1.875rem; 584 | } 585 | iframe { 586 | margin: 0 auto; 587 | display: block; 588 | margin-bottom: 30px; 589 | } 590 | iframe[src*="https://www.youtube.com/"] { 591 | height: calc(730px / 1.77777778) !important; 592 | width: 100% !important; 593 | } 594 | img { 595 | max-width: 100%; 596 | position: relative; 597 | left: 50%; 598 | transform: translateX(-50%); 599 | &:not(.kg-image) { 600 | margin: 50px 0; 601 | } 602 | } 603 | .share { 604 | position: absolute; 605 | top: 0; 606 | margin-left: -140px; 607 | margin-top: 0; 608 | display: block; 609 | position: absolute; 610 | padding-bottom: 30px; 611 | ul { 612 | bottom: auto; 613 | top: 40px; 614 | margin: 0; 615 | padding: 0; 616 | left: 0; 617 | li { 618 | margin: 0; 619 | line-height: 1.4; 620 | font-size: 1.125rem; 621 | a { 622 | line-height: 2rem; 623 | font-size: 0.875rem; 624 | } 625 | } 626 | } 627 | } 628 | .tags { 629 | padding-left: 0; 630 | } 631 | .post-content { 632 | padding-bottom: 10px; 633 | border-bottom: 1px solid rgba($black, 0.1); 634 | .editor-content { 635 | a { 636 | text-decoration: underline; 637 | } 638 | } 639 | blockquote { 640 | font-style: italic; 641 | position: relative; 642 | p { 643 | font-size: 1.5rem; 644 | line-height: 1.6; 645 | } 646 | &:before { 647 | content: "\f10e"; 648 | font-weight: 900; 649 | font-style: normal; 650 | font-family: $icons_font; 651 | font-size: 2.125rem; 652 | position: absolute; 653 | z-index: -1; 654 | color: #e5e5e5; 655 | top: -10px; 656 | left: -10px; 657 | } 658 | } 659 | } 660 | .kg-bookmark-card { 661 | background: $white; 662 | width: 100%; 663 | } 664 | .kg-card { 665 | + { 666 | .kg-bookmark-card { 667 | margin-top: 0; 668 | } 669 | } 670 | } 671 | .editor-content { 672 | a.kg-bookmark-container { 673 | display: flex; 674 | flex-wrap: wrap; 675 | color: black; 676 | text-decoration: none; 677 | background: #f5f5f5; 678 | .kg-bookmark-icon { 679 | margin: 0 8px 0 0; 680 | } 681 | .kg-bookmark-thumbnail { 682 | img { 683 | margin: 0; 684 | } 685 | } 686 | } 687 | } 688 | .kg-bookmark-content { 689 | flex-basis: 0; 690 | flex-grow: 999; 691 | min-width: 50%; 692 | padding: 20px; 693 | } 694 | .kg-bookmark-title { 695 | font-weight: 600; 696 | } 697 | .kg-bookmark-description { 698 | margin-top: 12px; 699 | } 700 | .kg-bookmark-metadata { 701 | margin-top: 12px; 702 | } 703 | .kg-bookmark-thumbnail { 704 | flex-basis: 15rem; 705 | flex-grow: 1; 706 | align-items: center; 707 | justify-content: center; 708 | display: flex; 709 | img { 710 | vertical-align: bottom; 711 | object-fit: cover; 712 | width: 100%; 713 | } 714 | } 715 | .kg-bookmark-icon { 716 | width: 22px; 717 | height: 22px; 718 | margin: 0 8px 0 0; 719 | left: 0; 720 | transform: none; 721 | vertical-align: bottom; 722 | } 723 | .kg-bookmark-author { 724 | &:after { 725 | content: "•"; 726 | margin: 0 6px; 727 | } 728 | } 729 | .kg-bookmark-publisher { 730 | overflow: hidden; 731 | line-height: 1.5em; 732 | text-overflow: ellipsis; 733 | white-space: nowrap; 734 | max-width: 240px; 735 | } 736 | } 737 | 738 | @media (max-width: $large) { 739 | .content-inner { 740 | iframe[src*="https://www.youtube.com/"] { 741 | height: calc(610px / 1.77777778) !important; 742 | } 743 | } 744 | } 745 | 746 | @media (max-width: $medium) { 747 | .content-inner { 748 | h1 { 749 | font-size: 2.625rem; 750 | .chain { 751 | top: 30px; 752 | } 753 | } 754 | h2 { 755 | font-size: 2rem; 756 | .chain { 757 | top: 25px; 758 | } 759 | } 760 | h3 { 761 | font-size: 1.5rem; 762 | .chain { 763 | top: 21px; 764 | } 765 | } 766 | h4 { 767 | font-size: 1.125rem; 768 | .chain { 769 | top: 16px; 770 | } 771 | } 772 | .share { 773 | margin-left: -70px; 774 | } 775 | iframe[src*="https://www.youtube.com/"] { 776 | height: calc(570px / 1.77777778) !important; 777 | } 778 | } 779 | } 780 | 781 | @media (max-width: $small) { 782 | .content-inner { 783 | .post-content { 784 | blockquote { 785 | p { 786 | font-size: 1.125rem; 787 | } 788 | } 789 | } 790 | .share { 791 | margin-left: -60px; 792 | } 793 | iframe[src*="https://www.youtube.com/"] { 794 | height: calc(420px / 1.77777778) !important; 795 | } 796 | padding-bottom: 50px; 797 | } 798 | } 799 | 800 | @media (max-width: $extra_small) { 801 | .content-inner { 802 | padding: 50px 15px; 803 | p { 804 | line-height: 1.5rem; 805 | font-size: 1rem; 806 | } 807 | .share { 808 | position: fixed; 809 | bottom: 30px !important; 810 | margin-left: 0; 811 | top: auto; 812 | width: 100%; 813 | left: 0; 814 | padding: 0; 815 | opacity: 1; 816 | .trigger-share { 817 | display: none; 818 | } 819 | ul { 820 | border-radius: 0; 821 | top: 0; 822 | flex-direction: row; 823 | width: 100%; 824 | flex-wrap: nowrap; 825 | position: relative; 826 | visibility: visible; 827 | opacity: 1; 828 | -webkit-transform: none; 829 | transform: none; 830 | pointer-events: auto; 831 | display: flex; 832 | li { 833 | flex: 1; 834 | border-bottom: none; 835 | border-right: 1px solid rgba(229, 229, 229, 0.1); 836 | &:last-child { 837 | border-right: none; 838 | } 839 | } 840 | } 841 | } 842 | img { 843 | max-width: 100vw; 844 | } 845 | iframe[src*="https://www.youtube.com/"] { 846 | height: calc((100vw - 30px) / 1.77777778) !important; 847 | } 848 | } 849 | } 850 | 851 | .editor-content { 852 | .kg-image-card { 853 | margin: 50px 0; 854 | } 855 | .kg-gallery-container { 856 | display: flex; 857 | flex-direction: column; 858 | margin: 50px auto; 859 | max-width: calc(100vw - (100vw - 730px)/2); 860 | transform: translateX(-50%); 861 | left: 50%; 862 | position: relative; 863 | z-index: 5; 864 | width: 100vw; 865 | } 866 | .kg-gallery-row { 867 | display: flex; 868 | flex-direction: row; 869 | justify-content: center; 870 | &:not(:first-of-type) { 871 | margin: 10px 0 0 0; 872 | } 873 | } 874 | .kg-gallery-image { 875 | img { 876 | display: flex; 877 | object-fit: cover; 878 | margin: 0; 879 | width: 100%; 880 | height: 100%; 881 | } 882 | &:not(:first-of-type) { 883 | margin: 0 0 0 10px; 884 | } 885 | } 886 | figcaption { 887 | padding: 10px 15px; 888 | font-size: 0.875rem; 889 | border-bottom: 1px solid #cccccc; 890 | } 891 | .kg-width-full { 892 | img { 893 | max-width: 100vw; 894 | transform: translateX(-50%); 895 | left: 50%; 896 | position: relative; 897 | } 898 | } 899 | .kg-width-wide { 900 | img { 901 | max-width: calc(100vw - (100vw - 730px)/2); 902 | transform: translateX(-50%); 903 | left: 50%; 904 | position: relative; 905 | } 906 | } 907 | } 908 | 909 | @media (max-width: $large) { 910 | .editor-content { 911 | .kg-width-wide { 912 | img { 913 | max-width: calc(100vw - (100vw - 610px)/2); 914 | } 915 | } 916 | .kg-gallery-container { 917 | max-width: calc(100vw - (100vw - 610px)/2); 918 | } 919 | } 920 | } 921 | 922 | @media (max-width: $medium) { 923 | .editor-content { 924 | .kg-width-wide { 925 | img { 926 | max-width: calc(100vw - (100vw - 570px)/2); 927 | } 928 | } 929 | .kg-gallery-container { 930 | max-width: calc(100vw - (100vw - 570px)/2); 931 | } 932 | } 933 | } 934 | 935 | @media (max-width: $small) { 936 | .editor-content { 937 | .kg-width-wide { 938 | img { 939 | max-width: calc(100vw - (100vw - 420px)/2); 940 | } 941 | } 942 | .kg-gallery-container { 943 | max-width: calc(100vw - (100vw - 420px)/2); 944 | } 945 | } 946 | } 947 | 948 | @media (max-width: $extra_small) { 949 | .editor-content { 950 | .kg-width-wide { 951 | img { 952 | max-width: 100vw; 953 | } 954 | } 955 | .kg-gallery-container { 956 | max-width: 100vw; 957 | } 958 | } 959 | } 960 | 961 | .related-posts { 962 | margin: 0; 963 | .loop { 964 | left: calc((100% - 750px)/2 - 15px); 965 | .post { 966 | border: none; 967 | margin: 0 0 50px; 968 | .img-holder { 969 | width: 100%; 970 | margin-left: 0; 971 | justify-content: center; 972 | align-items: flex-start; 973 | display: flex; 974 | img { 975 | object-fit: cover; 976 | } 977 | } 978 | } 979 | .swiper-slide { 980 | width: 730px; 981 | margin: 0 15px; 982 | opacity: .25; 983 | -webkit-transition: opacity .3s cubic-bezier(0.2,1,0.3,1); 984 | -moz-transition: opacity .3s cubic-bezier(0.2,1,0.3,1); 985 | -o-transition: opacity .3s cubic-bezier(0.2,1,0.3,1); 986 | transition: opacity .3s cubic-bezier(0.2,1,0.3,1); 987 | } 988 | .swiper-slide.swiper-slide-active { 989 | opacity: 1; 990 | } 991 | .swiper-slide.swiper-slide-duplicate-active { 992 | opacity: 1; 993 | } 994 | } 995 | .swiper-container-horizontal { 996 | .loop { 997 | left: 0; 998 | } 999 | } 1000 | h3 { 1001 | margin-bottom: 0; 1002 | } 1003 | .swiper-button-next { 1004 | height: 100%; 1005 | top: 0; 1006 | right: 0; 1007 | left: auto; 1008 | width: calc((100% - 750px)/2 - 15px); 1009 | background: transparent; 1010 | &:hover { 1011 | ~ { 1012 | .loop { 1013 | .swiper-slide-next { 1014 | opacity: .35; 1015 | } 1016 | } 1017 | } 1018 | } 1019 | } 1020 | .swiper-button-prev { 1021 | height: 100%; 1022 | top: 0; 1023 | right: 0; 1024 | left: auto; 1025 | width: calc((100% - 750px)/2 - 15px); 1026 | background: transparent; 1027 | right: auto; 1028 | left: 0; 1029 | &:hover { 1030 | ~ { 1031 | .loop { 1032 | .swiper-slide-prev { 1033 | opacity: .35; 1034 | } 1035 | } 1036 | } 1037 | } 1038 | } 1039 | } 1040 | 1041 | @media (max-width: $small) { 1042 | .related-posts { 1043 | h3 { 1044 | margin-bottom: 30px; 1045 | } 1046 | .loop { 1047 | .swiper-slide { 1048 | width: 420px; 1049 | } 1050 | } 1051 | } 1052 | } 1053 | 1054 | @media (max-width: $medium) { 1055 | .related-posts { 1056 | .loop { 1057 | .swiper-slide { 1058 | width: 570px; 1059 | } 1060 | .post { 1061 | margin-bottom: 50px; 1062 | } 1063 | } 1064 | .swiper-button-next { 1065 | width: calc((100% - 570px)/2 - 15px); 1066 | } 1067 | .swiper-button-prev { 1068 | width: calc((100% - 570px)/2 - 15px); 1069 | } 1070 | } 1071 | } 1072 | 1073 | @media (max-width: $large) { 1074 | .related-posts { 1075 | .loop { 1076 | .swiper-slide { 1077 | width: 610px; 1078 | } 1079 | } 1080 | } 1081 | } 1082 | 1083 | @media (max-width: $extra_small) { 1084 | .related-posts { 1085 | .loop { 1086 | .swiper-slide { 1087 | width: calc(100% - 30px); 1088 | } 1089 | } 1090 | } 1091 | } 1092 | 1093 | .fixed-post-nav { 1094 | position: fixed; 1095 | bottom: 0; 1096 | width: 100%; 1097 | height: 30px; 1098 | background: $white; 1099 | border-top: 1px solid rgba($black, 0.1); 1100 | font-size: 0.875rem; 1101 | font-weight: bold; 1102 | text-transform: uppercase; 1103 | text-align: center; 1104 | padding-top: 3px; 1105 | z-index: 90; 1106 | .prev { 1107 | position: absolute; 1108 | left: 15px; 1109 | } 1110 | .next { 1111 | position: absolute; 1112 | right: 15px; 1113 | } 1114 | } 1115 | 1116 | @media (max-width: $medium) { 1117 | .fixed-post-nav { 1118 | .prev { 1119 | color: $grey-1; 1120 | border: 1px solid transparent; 1121 | background: rgba($grey-1, 0.2); 1122 | border-radius: 15px; 1123 | padding: 3px 15px; 1124 | font-weight: normal; 1125 | font-size: 0; 1126 | i { 1127 | font-size: 0.875rem; 1128 | } 1129 | } 1130 | .next { 1131 | color: $grey-1; 1132 | border: 1px solid transparent; 1133 | background: rgba($grey-1, 0.2); 1134 | border-radius: 15px; 1135 | padding: 3px 15px; 1136 | font-weight: normal; 1137 | font-size: 0; 1138 | i { 1139 | font-size: 0.875rem; 1140 | } 1141 | } 1142 | } 1143 | } 1144 | 1145 | .comments { 1146 | margin-bottom: 100px; 1147 | .comments-trigger { 1148 | position: relative; 1149 | background: #F0F0F0; 1150 | color: $grey-3; 1151 | outline: 0; 1152 | display: block; 1153 | padding: 30px; 1154 | &:hover { 1155 | opacity: .75; 1156 | } 1157 | i { 1158 | font-size: 1.5rem; 1159 | margin-right: 10px; 1160 | } 1161 | } 1162 | } 1163 | 1164 | @media (max-width: $small) { 1165 | .comments { 1166 | h3 { 1167 | margin-bottom: 30px; 1168 | } 1169 | margin-bottom: 50px; 1170 | } 1171 | } 1172 | 1173 | @media (max-width: $extra_small) { 1174 | .comments { 1175 | margin-bottom: 50px; 1176 | .comments-trigger { 1177 | padding: 15px; 1178 | } 1179 | } 1180 | } 1181 | 1182 | .post-template { 1183 | footer { 1184 | .copyright { 1185 | p { 1186 | padding-bottom: 30px; 1187 | } 1188 | } 1189 | } 1190 | } 1191 | 1192 | @media (max-width: $extra_small) { 1193 | .post-template { 1194 | footer { 1195 | .copyright { 1196 | p { 1197 | padding-bottom: 70px; 1198 | } 1199 | } 1200 | } 1201 | } 1202 | } 1203 | 1204 | .profile-image { 1205 | width: 80px; 1206 | height: 80px; 1207 | border-radius: 50%; 1208 | display: flex; 1209 | object-fit: cover; 1210 | + { 1211 | h1 { 1212 | margin-top: 0; 1213 | } 1214 | } 1215 | } 1216 | 1217 | @media (max-width: $small) { 1218 | .paged { 1219 | #content { 1220 | margin-top: 150px; 1221 | } 1222 | } 1223 | } 1224 | 1225 | @media (max-width: $extra_small) { 1226 | .social-content { 1227 | margin-left: 10px; 1228 | } 1229 | .paged { 1230 | #content { 1231 | margin-top: 50px; 1232 | } 1233 | } 1234 | } --------------------------------------------------------------------------------