├── .gitignore ├── LICENSE ├── README.md └── examples ├── README.md ├── basic ├── README.md └── sites │ ├── config.php │ └── templates │ ├── _init.php │ ├── _main.php │ ├── assets │ ├── .gitkeep │ ├── css │ │ └── .gitkeep │ ├── font │ │ └── .gitkeep │ ├── img │ │ └── .gitkeep │ └── js │ │ └── .gitkeep │ ├── bootstrap.sh │ ├── globals │ └── .gitkeep │ ├── helpers │ └── .gitkeep │ ├── home.php │ ├── partials │ ├── .gitkeep │ └── render_scripts.php │ ├── scripts │ ├── .gitkeep │ └── jquery.php │ ├── vendor │ └── .gitkeep │ └── views │ ├── .gitkeep │ ├── default.php │ └── home.php └── pw-ghost ├── .gitignore ├── LICENSE ├── README.md ├── assets ├── active.php ├── files │ ├── 1 │ │ ├── testimg-home-1.0x260.jpg │ │ └── testimg-home-1.jpg │ ├── 41 │ │ ├── ghostwriter_logo-1.260x0.jpg │ │ ├── ghostwriter_logo-1.jpg │ │ ├── testimg-home-1.0x260.jpg │ │ └── testimg-home-1.jpg │ ├── 1017 │ │ └── .phrase-index.txt │ ├── 1023 │ │ ├── cover1.0x260.jpg │ │ └── cover1.jpg │ ├── 1029 │ │ ├── favicon.ico │ │ ├── pwlogo.260x0.png │ │ └── pwlogo.png │ ├── 1034 │ │ ├── cover2.0x260.jpg │ │ └── cover2.jpg │ ├── 1035 │ │ ├── demo4.0x260.jpg │ │ └── demo4.jpg │ ├── 1036 │ │ ├── mlk.0x260.jpg │ │ ├── mlk.jpg │ │ ├── testimg-home-1.0x260.jpg │ │ └── testimg-home-1.jpg │ ├── 1037 │ │ ├── demo3.0x260.jpg │ │ └── demo3.jpg │ ├── 1039 │ │ ├── edgar.260x0.gif │ │ └── edgar.gif │ ├── 1040 │ │ ├── demo6.0x260.jpg │ │ ├── demo6.jpg │ │ ├── giants_causeway_1c.0x260.jpg │ │ ├── giants_causeway_1c.740x0-is.jpg │ │ └── giants_causeway_1c.jpg │ ├── 1041 │ │ ├── testimg-home-1.0x260.jpg │ │ └── testimg-home-1.jpg │ ├── 1042 │ │ └── lewis.jpeg │ ├── 1043 │ │ ├── demo2.0x260.jpg │ │ └── demo2.jpg │ └── README.txt ├── index.php └── installed.php ├── config.php ├── es-site.zip ├── htaccess.txt ├── modules └── InputfieldCKEditor │ ├── README.txt │ ├── config-body.js │ ├── config.js │ ├── contents-inline.css │ ├── contents.css │ ├── mystyles.js │ └── plugins │ └── README.txt ├── pwghost.sql ├── screenshot.png └── templates ├── 404.php ├── _init.php ├── _main.php ├── admin.php ├── assets ├── css │ ├── ghost.min.css │ └── screen.css ├── fonts │ ├── casper-icons.eot │ ├── casper-icons.svg │ ├── casper-icons.ttf │ └── casper-icons.woff └── js │ ├── index.js │ └── jquery.fitvids.js ├── authors.php ├── basic-page.php ├── blog-item.php ├── blog.php ├── helpers ├── background_cover.php ├── excerpt.php ├── helpers.php └── pagination_options.php ├── home.php ├── html └── casper │ ├── LICENSE │ ├── README.md │ ├── assets │ ├── css │ │ └── screen.css │ ├── fonts │ │ ├── casper-icons.eot │ │ ├── casper-icons.svg │ │ ├── casper-icons.ttf │ │ └── casper-icons.woff │ └── js │ │ ├── index.js │ │ └── jquery.fitvids.js │ ├── author.hbs │ ├── default.hbs │ ├── index.hbs │ ├── package.json │ ├── page.hbs │ ├── partials │ ├── loop.hbs │ └── navigation.hbs │ ├── post.hbs │ └── tag.hbs ├── partials ├── cover_header.php ├── header_bag │ ├── facebook_og.php │ ├── ld_json.php │ ├── translate_buttons.php │ └── twitter_card.php ├── loop.php ├── navigation.php ├── scripts.php └── tags.php ├── rss.php ├── tag-item.php ├── tags.php └── views ├── author_view.php ├── default_view.php ├── home_view.php ├── notfound_view.php ├── page_view.php ├── post_view.php └── tag_view.php /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 NinjasCL 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # The Wire Render Pattern 2 | 3 | This pattern or approach is what I´m using when creating new projects using Processwire. It heavily uses the `wireRenderFile()` method so thats the reason of the name, and so it will work only on PW versions that implement that method. This pattern does not need additional modules and enables easier code organization and reutilization. Feel free to adapt this way of doing projects to your own way, Processwire is awesome and flexible enough to support various ways of organization and patterns. 4 | 5 | ### The wireRenderFile() method 6 | The `wireRenderFile()` method is a wrapper to the `wire('files')->render()` method. You can choose the method that fits better in your use case. Note this function returns the output for you to output wherever you want (delayed output). For direct output, use the `wireInclude()` function instead. 7 | 8 | **Example** 9 | 10 | ```php 11 | $files = wire('files'); 12 | $files->render($filename, $vars, $options); 13 | ``` 14 | 15 | See https://github.com/processwire/processwire/blob/master/wire/core/Functions.php#L487 16 | and https://processwire.com/api/ref/files/render/ 17 | for a full documentation of the function. 18 | 19 | ### The region() method 20 | Since Processwire 3.0.39 the `region()` is available. You can know more about it here 21 | http://processwire.com/blog/posts/processwire-3.0.39-core-updates/ 22 | 23 | The new region function provides a nice option for delayed output on the front-end, letting you define regions for output, populate content to it, and retrieve it when ready for output. It's a good alternative to using variables for the same purpose, as editor environments often don't recognize the relationship of variables between files like `_init.php` (prepend file), template files, and `_main.php` (append file). It prevents your editor from flagging variables as undefined, and reduces the chance of variable collisions or variables getting accidentally overwritten. 24 | 25 | The region function can be accessed as `wireRegion()`, or if you have `$config->useFunctionsAPI` enabled, it can also be accessed as just `region()`. 26 | 27 | **Example** 28 | ```php 29 | // output regions in appropriate locations 30 |

31 |
32 | 33 |
34 | ``` 35 | 36 | ### Field templates 37 | Since Processwire 3.0.5 fields could use a template. This gives a better code organization. 38 | Read more about here https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/ and here https://processwire.com/blog/posts/more-repeaters-repeater-matrix-and-new-field-rendering/ 39 | 40 | ### The directory structure 41 | 42 | In Processwire you can organize your code the way it make most sence to you. All the files should be in the `/site/templates/` directory. In this pattern the directory structure will be: 43 | 44 | * assets 45 | * helpers 46 | * globals 47 | * partials 48 | * scripts 49 | * views 50 | * vendor 51 | * includes 52 | 53 | ### The Assets Directory 54 | 55 | This directory is for storing the front-end files like css, js, img, fonts, etc. And contains the following sub directories: 56 | 57 | * css 58 | * img 59 | * js 60 | * font 61 | 62 | ### The Helpers Directory 63 | 64 | The helpers directory is for code that can be used across all files in the project. Mainly for small code snippets or functions that do not output front-end code. 65 | 66 | An example file that should be put in helpers it is this code that I use mainly for debugging. Debug Helper. 67 | 68 | ### The Globals 69 | 70 | The Globals directory is used for “global” font-end code. Files like headers and footers should be put here. These files are used globally since they are included and should be rendered in all templates. 71 | 72 | ### The Partials 73 | 74 | The Partials directory contains reusable font-end code snippets. Things like menus, galleries or anything that one or more templates could use. Look them like “components” that could be attached between multiple templates. 75 | 76 | ### The Scripts 77 | 78 | The Scripts directory contains code that should be included in header or footer files on demand. Scripts like css, js or another code that does not need to be global but some template file requires them. 79 | 80 | For example in the index page you have an image gallery and this gallery is only present in the index page. You should only import the js and css files related to the gallery in the index page and not in other pages. For achieving this, the Wire Render pattern relies on “data bags” a concept that will be explained in a moment. 81 | 82 | ### The Views 83 | 84 | The views are the font-end code for the templates. Contains the html needed for creating the page. In this approach the template file only contains “glue code” that will be passed to the view. The template file should be responsible for formatting, querying and complex data manipulation and pass the view only the data formatted. In this way the view will only contain minimum php code like if, foreach, echo and `wireRenderFile` method calls. 85 | 86 | Example: 87 | 88 | You have a `home.php` template and a `views/home.php` file. All the logic (querys, parsing parameters, etc) goes to the `home.php` file while the html will be inside `views/home.php` file. 89 | 90 | ### The Vendor 91 | 92 | The Vendor directory is used for files that are external to your system. Mainly for libraries, sdks or code made by other people outside you or your organization. Maybe you could put here an Excel Export script or the SDK for Mandrill API. 93 | Using Delayed Output 94 | 95 | For this pattern to work needs the delayed output strategy. Basically we will use two files inside `/site/templates/` and autoload them for every template. The files needed are _init.php and _main.php. Using this strategy will make easier to configure the final output for the template. 96 | 97 | First you must add the files to the `/site/config.php` file. 98 | 99 | ```php 100 | /** 101 | * Prepend and Append template files 102 | */ 103 | 104 | $config->prependTemplateFile = '_init.php'; 105 | $config->appendTemplateFile = '_main.php'; 106 | ``` 107 | 108 | ### The Includes 109 | 110 | The Includes directory is used for code that may be used in different files or a section inside a bigger file. When you need to separate a big file in smaller units, use `wireIncludeFile()` function and you will have a nicer organization. 111 | 112 | *Example include file* 113 | 114 | Create a file named `includes/convenience-methods.php` 115 | 116 | ```php 117 | get('/'); 183 | $templatesUrl = $config->urls->templates; 184 | $assets = $templatesUrl . 'assets/'; 185 | 186 | // Data Bags 187 | $viewBag = array( 188 | 'home' => $home, 189 | 'templatesUrl' => $templatesUrl, 190 | 'assets' => $assets 191 | ); 192 | 193 | // Special Bags for Scripts 194 | $headerBag = array(); 195 | $footerBag = array(); 196 | ``` 197 | 198 | ### The template file 199 | 200 | The template file is beign loaded after the `_init.php` and before the `_main.php`. Its when you make all the data formatting, querys and configuration. As an example we will have a home.php template and a `/views/home.php` as its view. 201 | 202 | ```php 203 | 224 | 225 |

title ?>

226 | 227 |

228 | 229 |

230 | 231 | ``` 232 | 233 | We should try to make all the complex logic inside the template and the view only will deal with simple php methods. 234 | 235 | ### The header.php file 236 | 237 | The header file is the first used before the content when rendering the final output. 238 | 239 | ```php 240 | 245 | 246 | 247 | 248 | <?php echo $page->title ?> 249 | 250 | $headerBag)) ?> 251 | 252 | 253 | 254 | ``` 255 | 256 | ### The footer.php file 257 | 258 | The footer file is used after the content. 259 | 260 | ```php 261 | 266 | 267 | $footerBag)) ?> 268 | 269 | 270 | 271 | ``` 272 | 273 | ### The render_scripts.php file 274 | 275 | This is a partial file used both in `header.php` and `footer.php` to render the contents of the scripts loaded in `home.php`. 276 | 277 | ```php 278 | 298 | 299 | ``` 300 | 301 | ### The _main.php file 302 | 303 | The `_main.php` file is the last file beign loaded before the final output to the client. It echoes the header, content and footer. 304 | 305 | ```php 306 | 333 | 334 | 335 | Home 336 | 337 | 338 | 339 | 340 | 341 |

Home

342 |

Hello world

343 | 344 | 345 | 346 | 347 | ``` 348 | 349 | ### The Data Bags 350 | 351 | The “data bags” are just arrays that contains different keys and information wich are passed to the different files on `wireRenderFile()` method. Here we used 3 data bags. The main one beign called viewBag, the one used for header scripts beign called `headerBag` and the last one used for footer scripts beign called `footerBag`. They were set in the `_init.php` file and available for all templates. 352 | 353 | ### Using the $page object as data bag 354 | You can also use the `$page` object for storing data and pass that to the views. It's better to use namespaces. 355 | 356 | Example 357 | 358 | *hello.php* 359 | 360 | ```php 361 | message = 'Hello World'; 365 | 366 | $body = wireRenderFile('views/hello'); 367 | ``` 368 | 369 | *views/hello.php* 370 | 371 | ```php 372 | 375 | 376 | 377 | message ?> 378 | 379 | ``` 380 | 381 | ### Conclusion 382 | 383 | The Wire Render approach enables better code organization and reutilization. Relies on standard Processwire methods and its flexible enough for adapting it to your needs. 384 | 385 | For example files please check `examples` directory. 386 | -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | # Wire Render Examples 2 | 3 | These examples demostrate the use of the Wire Render Pattern. 4 | 5 | - [Basic](basic) : Simple files with the bare bones. 6 | - [PW Ghost](pw-ghost) : An example blog engine inspired by Ghost. -------------------------------------------------------------------------------- /examples/basic/README.md: -------------------------------------------------------------------------------- 1 | # Wire Render Pattern Example 2 | This is a simple example for organizing the files. It takes a sightly different configuration as `global/header.php` and `globals/footer.php` were put in a single file called `views/default.php`. Also `views/home_view.php` was renamed to `views/home.php`. Processwire 3.x namespaces were added as well. 3 | 4 | A file named `bootstrap.sh` was used for creating the directory structure quickly. 5 | -------------------------------------------------------------------------------- /examples/basic/sites/config.php: -------------------------------------------------------------------------------- 1 | prependTemplateFile = '_init.php'; 9 | $config->appendTemplateFile = '_main.php'; 10 | -------------------------------------------------------------------------------- /examples/basic/sites/templates/_init.php: -------------------------------------------------------------------------------- 1 | get('/'); 12 | $templatesUrl = $config->urls->templates; 13 | $assets = $templatesUrl . 'assets/'; 14 | 15 | // Data Bags 16 | $viewBag = [ 17 | 'home' => $home, 18 | 'templatesUrl' => $templatesUrl, 19 | 'assets' => $assets 20 | ]; 21 | 22 | // Special Bags for Scripts 23 | $headerBag = []; 24 | $footerBag = []; 25 | 26 | // Set the layout 27 | $view = 'default'; -------------------------------------------------------------------------------- /examples/basic/sites/templates/_main.php: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /examples/basic/sites/templates/vendor/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joyofpw/wire-render-pattern/b8b6e62a87296ba5704c05f8ef21edb6613a1b97/examples/basic/sites/templates/vendor/.gitkeep -------------------------------------------------------------------------------- /examples/basic/sites/templates/views/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joyofpw/wire-render-pattern/b8b6e62a87296ba5704c05f8ef21edb6613a1b97/examples/basic/sites/templates/views/.gitkeep -------------------------------------------------------------------------------- /examples/basic/sites/templates/views/default.php: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | <?php echo $page->title ?> 11 | 12 | $headerBag]) ?> 13 | 14 | 15 | 16 | 17 | 18 | 19 | $footerBag]) ?> 20 | 21 | 22 | -------------------------------------------------------------------------------- /examples/basic/sites/templates/views/home.php: -------------------------------------------------------------------------------- 1 | 7 |

title ?>

8 | 9 |

10 | 11 |

-------------------------------------------------------------------------------- /examples/pw-ghost/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | assets/sessions/ 3 | assets/cache/ 4 | assets/logs/ 5 | -------------------------------------------------------------------------------- /examples/pw-ghost/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 Ninjas.cl 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /examples/pw-ghost/README.md: -------------------------------------------------------------------------------- 1 | # Processwire Ghost Writer 2 | This is a simple http://ghost.org clone made in Processwire [http://processwire.com](http://processwire.com) 3 | 4 | It does not have all the ghost platform features. It was made mainly for 5 | demostrating the Wire Render Pattern [https://github.com/joyofpw/wire-render-pattern](https://github.com/joyofpw/wire-render-pattern) 6 | and having a basic blog site in Processwire with the Casper theme [https://github.com/TryGhost/Casper](https://github.com/TryGhost/Casper). 7 | 8 | Supports Multilanguage. 9 | 10 | ## How to install 11 | 12 | - Configure your database and upload `pwghost.sql` 13 | - Grab a Processwire 3.x installation 14 | - Copy files to site/ directory 15 | - Setup `config.php` 16 | - Modify `htaccess.txt` to `.htaccess` 17 | 18 | Be sure to set the `htaccess` file in your installation. Translation to spanish available in the file `es-site.zip`. 19 | 20 | ## Admin 21 | 22 | ``` 23 | path: /astral 24 | user: ghost 25 | password: ghost.writer123 26 | ``` 27 | ## Licence 28 | MIT 29 | 30 | ## Screenshot 31 | ![Screenshot](screenshot.png) 32 | 33 | ## Ninjas.cl 34 | Made with Love by [http://ninjas.cl](http://ninjas.cl) 35 | -------------------------------------------------------------------------------- /examples/pw-ghost/assets/active.php: -------------------------------------------------------------------------------- 1 | debug = false; 40 | 41 | 42 | /*** INSTALLER CONFIG ********************************************************************/ 43 | 44 | 45 | /** 46 | * Installer: Database Configuration 47 | * 48 | */ 49 | $config->dbHost = 'localhost'; 50 | $config->dbName = 'ninjas'; 51 | $config->dbUser = 'ninjas'; 52 | $config->dbPass = 'ninjas'; 53 | $config->dbPort = '3306'; 54 | $config->dbCharset = 'utf8mb4'; 55 | 56 | /** 57 | * Installer: User Authentication Salt 58 | * 59 | * Must be retained if you migrate your site from one server to another 60 | * 61 | */ 62 | $config->userAuthSalt = 'ae795523de5b37b353cc73234cb57ed6'; 63 | 64 | /** 65 | * Installer: File Permission Configuration 66 | * 67 | */ 68 | $config->chmodDir = '0755'; // permission for directories created by ProcessWire 69 | $config->chmodFile = '0644'; // permission for files created by ProcessWire 70 | 71 | /** 72 | * Installer: Time zone setting 73 | * 74 | */ 75 | $config->timezone = 'America/Santiago'; 76 | 77 | /** 78 | * Installer: Unix timestamp of date/time installed 79 | * 80 | * This is used to detect which when certain behaviors must be backwards compatible. 81 | * Please leave this value as-is. 82 | * 83 | */ 84 | $config->installed = 1469023310; 85 | 86 | 87 | /** 88 | * Installer: HTTP Hosts Whitelist 89 | * 90 | */ 91 | $config->httpHosts = array('localhost:8888', 'localhost'); 92 | 93 | /** 94 | * Wire render pattern appended template files 95 | */ 96 | $config->prependTemplateFile = '_init.php'; 97 | $config->appendTemplateFile = '_main.php'; 98 | 99 | -------------------------------------------------------------------------------- /examples/pw-ghost/es-site.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joyofpw/wire-render-pattern/b8b6e62a87296ba5704c05f8ef21edb6613a1b97/examples/pw-ghost/es-site.zip -------------------------------------------------------------------------------- /examples/pw-ghost/htaccess.txt: -------------------------------------------------------------------------------- 1 | ################################################################################################# 2 | # START PROCESSWIRE HTACCESS DIRECTIVES 3 | # @version 3.0 4 | # @indexVersion 300 5 | ################################################################################################# 6 | 7 | # ----------------------------------------------------------------------------------------------- 8 | # 1. Don't show directory indexes, but do follow symbolic links 9 | # 500 NOTE: Some cloud hosting companies don't allow +FollowSymLinks. 10 | # Uncomment +SymLinksifOwnerMatch and comment +FollowSymLinks if you have 500 errors. 11 | # If that doesn't resolve the error, then set it back to +FollowSymLinks. 12 | # ----------------------------------------------------------------------------------------------- 13 | 14 | Options -Indexes 15 | Options +FollowSymLinks 16 | # Options +SymLinksifOwnerMatch 17 | 18 | # ----------------------------------------------------------------------------------------------- 19 | # 2. Let ProcessWire handle 404s 20 | # ----------------------------------------------------------------------------------------------- 21 | 22 | ErrorDocument 404 /index.php 23 | 24 | # ----------------------------------------------------------------------------------------------- 25 | # 3. Handle request for missing favicon.ico/robots.txt files (no ending quote for Apache 1.3) 26 | # ----------------------------------------------------------------------------------------------- 27 | 28 | 29 | ErrorDocument 404 "The requested file favicon.ico was not found. 30 | 31 | 32 | 33 | ErrorDocument 404 "The requested file robots.txt was not found. 34 | 35 | 36 | # ----------------------------------------------------------------------------------------------- 37 | # 4. Protect from XSS with Apache headers 38 | # ----------------------------------------------------------------------------------------------- 39 | 40 | 41 | # prevent site from being loaded in an iframe on another site 42 | # you will need to remove this one if you want to allow external iframes 43 | Header always append X-Frame-Options SAMEORIGIN 44 | 45 | # to prevent cross site scripting (IE8+ proprietary) 46 | Header set X-XSS-Protection "1; mode=block" 47 | 48 | # prevent mime-based attacks via content sniffing (IE+Chrome) 49 | # Header set X-Content-Type-Options "nosniff" 50 | 51 | 52 | # ----------------------------------------------------------------------------------------------- 53 | # 5. Protect ProcessWire system files 54 | # ----------------------------------------------------------------------------------------------- 55 | 56 | 57 | 58 | Require all denied 59 | 60 | 61 | Order allow,deny 62 | 63 | 64 | 65 | # ----------------------------------------------------------------------------------------------- 66 | # 6. Override a few PHP settings that can't be changed at runtime (not required) 67 | # 500 NOTE: Try commenting out this entire section below if getting Apache 500 errors. 68 | # ----------------------------------------------------------------------------------------------- 69 | 70 | 71 | php_flag magic_quotes_gpc off 72 | php_flag magic_quotes_sybase off 73 | php_flag register_globals off 74 | 75 | 76 | # ----------------------------------------------------------------------------------------------- 77 | # 7. Set default directory index files 78 | # ----------------------------------------------------------------------------------------------- 79 | 80 | DirectoryIndex index.php index.html index.htm 81 | 82 | # ----------------------------------------------------------------------------------------------- 83 | # 8. ProcessWire requires mod_rewrite 84 | # ----------------------------------------------------------------------------------------------- 85 | 86 | 87 | 88 | RewriteEngine On 89 | AddDefaultCharset UTF-8 90 | 91 | # ----------------------------------------------------------------------------------------------- 92 | # 9. If you only want to allow HTTPS, uncomment the RewriteCond and RewriteRule lines below. 93 | # ----------------------------------------------------------------------------------------------- 94 | # RewriteCond %{HTTPS} off 95 | # RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] 96 | 97 | # If using an AWS load balancer, use these two lines below instead of those above: 98 | # RewriteCond %{HTTP:X-Forwarded-Proto} =http 99 | # RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] 100 | 101 | # ----------------------------------------------------------------------------------------------- 102 | # 10. Set an environment variable so the installer can detect that mod_rewrite is active. 103 | # Note that some web hosts don't support this. If you get a 500 error, you might try 104 | # commenting out this SetEnv line below. 105 | # ----------------------------------------------------------------------------------------------- 106 | 107 | 108 | SetEnv HTTP_MOD_REWRITE On 109 | 110 | 111 | # ----------------------------------------------------------------------------------------------- 112 | # 11. OPTIONAL: Set a rewrite base if rewrites aren't working properly on your server. 113 | # And if your site directory starts with a "~" you will most likely have to use this. 114 | # ----------------------------------------------------------------------------------------------- 115 | 116 | # RewriteBase / 117 | # RewriteBase /pw/ 118 | # RewriteBase /~user/ 119 | 120 | # ----------------------------------------------------------------------------------------------- 121 | # 12. Access Restrictions: Keep web users out of dirs that begin with a period, 122 | # but let services like Lets Encrypt use the webroot authentication method. 123 | # ----------------------------------------------------------------------------------------------- 124 | 125 | RewriteRule "(^|/)\.(?!well-known)" - [F] 126 | 127 | # ----------------------------------------------------------------------------------------------- 128 | # 13. OPTIONAL: Redirect users to the 'www.' version of the site (uncomment to enable). 129 | # For example: http://processwire.com/ would be redirected to http://www.processwire.com/ 130 | # ----------------------------------------------------------------------------------------------- 131 | 132 | # RewriteCond %{HTTP_HOST} !^www\. [NC] 133 | # RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301] 134 | 135 | # ----------------------------------------------------------------------------------------------- 136 | # 14. OPTIONAL: Send URLs with non-ASCII name-format characters to 404 page (optimization) 137 | # ----------------------------------------------------------------------------------------------- 138 | 139 | # RewriteCond %{REQUEST_URI} "[^-_.a-zA-Z0-9/~]" 140 | # RewriteCond %{REQUEST_FILENAME} !-f 141 | # RewriteCond %{REQUEST_FILENAME} !-d 142 | # RewriteRule ^(.*)$ index.php?it=/http404/ [L,QSA] 143 | 144 | # ----------------------------------------------------------------------------------------------- 145 | # 15. Access Restrictions: Protect ProcessWire system files 146 | # ----------------------------------------------------------------------------------------------- 147 | 148 | # Allow screenshot files (for install.php only: this 1 line below may be removed after install) 149 | RewriteCond %{REQUEST_URI} !(^|/)site-[^/]+/install/[^/]+\.(jpg|jpeg|png|gif)$ 150 | # Block access to any htaccess files 151 | RewriteCond %{REQUEST_URI} (^|/)\.htaccess$ [NC,OR] 152 | # Block access to protected assets directories 153 | RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/assets/(cache|logs|backups|sessions|config|install|tmp)($|/.*$) [OR] 154 | # Block acceess to the /site/install/ directory 155 | RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/install($|/.*$) [OR] 156 | # Block dirs in /site/assets/ dirs that start with a hyphen 157 | RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/assets.*/-.+/.* [OR] 158 | # Block access to /wire/config.php, /site/config.php, /site/config-dev.php, and /wire/index.config.php 159 | RewriteCond %{REQUEST_URI} (^|/)(wire|site|site-[^/]+)/(config|index\.config|config-dev)\.php$ [OR] 160 | # Block access to any PHP-based files in /templates-admin/ 161 | RewriteCond %{REQUEST_URI} (^|/)(wire|site|site-[^/]+)/templates-admin($|/|/.*\.(php|html?|tpl|inc))$ [OR] 162 | # Block access to any PHP or markup files in /site/templates/ 163 | RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))$ [OR] 164 | # Block access to any PHP files in /site/assets/ 165 | RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/assets($|/|/.*\.php)$ [OR] 166 | # Block access to any PHP files in core or core module directories 167 | RewriteCond %{REQUEST_URI} (^|/)wire/(core|modules)/.*\.(php|inc|tpl|module|info\.json)$ [OR] 168 | # Block access to any PHP files in /site/modules/ 169 | RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/modules/.*\.(php|inc|tpl|module|info\.json)$ [OR] 170 | # Block access to any software identifying txt files 171 | RewriteCond %{REQUEST_URI} (^|/)(COPYRIGHT|INSTALL|README|htaccess)\.(txt|md|textile)$ [OR] 172 | # Block all http access to the default/uninstalled site-default directory 173 | RewriteCond %{REQUEST_URI} (^|/)site-default/ 174 | # If any conditions above match, issue a 403 forbidden 175 | RewriteRule ^.*$ - [F,L] 176 | 177 | # PW-PAGENAME 178 | # ----------------------------------------------------------------------------------------------- 179 | # 16a. Ensure that the URL follows the name-format specification required by PW 180 | # See also directive 16b below, you should choose and use either 16a or 16b. 181 | # ----------------------------------------------------------------------------------------------- 182 | 183 | RewriteCond %{REQUEST_URI} "^/~?[-_.a-zA-Z0-9/]*$" 184 | 185 | # ----------------------------------------------------------------------------------------------- 186 | # 16b. Alternative name-format specification for UTF8 page name support. 187 | # If used, comment out section 16a above and uncomment the directive below. If you have updated 188 | # your $config->pageNameWhitelist make the characters below consistent with that. 189 | # ----------------------------------------------------------------------------------------------- 190 | 191 | # RewriteCond %{REQUEST_URI} "^/~?[-_./a-zA-Z0-9æåäßöüđжхцчшщюяàáâèéëêěìíïîõòóôøùúûůñçčćďĺľńňŕřšťýžабвгдеёзийклмнопрстуфыэęąśłżź]*$" 192 | 193 | # END-PW-PAGENAME 194 | # ----------------------------------------------------------------------------------------------- 195 | # 17. If the request is for a file or directory that physically exists on the server, 196 | # then don't give control to ProcessWire, and instead load the file 197 | # ----------------------------------------------------------------------------------------------- 198 | 199 | RewriteCond %{REQUEST_FILENAME} !-f 200 | RewriteCond %{REQUEST_FILENAME} !-d 201 | RewriteCond %{REQUEST_FILENAME} !(favicon\.ico|robots\.txt) 202 | 203 | # ----------------------------------------------------------------------------------------------- 204 | # 18. OPTIONAL: Prevent ProcessWire from attempting to serve images or anything in /site/assets/. 205 | # Both of these lines are optional, but can help to reduce server load. However, they 206 | # are not compatible with the $config->pagefileSecure option (if enabled) and they 207 | # may produce an Apache 404 rather than your regular 404. You may uncomment the two lines 208 | # below if you don't need to use the $config->pagefileSecure option. After uncommenting, test 209 | # a URL like domain.com/site/assets/files/test.jpg to make sure you are getting a 404 and not 210 | # your homepage. If getting your homepage, then either: do not use this option, or comment out 211 | # section #2 above that makes ProcessWire the 404 handler. 212 | # ----------------------------------------------------------------------------------------------- 213 | 214 | # RewriteCond %{REQUEST_FILENAME} !\.(jpg|jpeg|gif|png|ico)$ [NC] 215 | # RewriteCond %{REQUEST_FILENAME} !(^|/)site/assets/ 216 | 217 | # ----------------------------------------------------------------------------------------------- 218 | # 19. Pass control to ProcessWire if all the above directives allow us to this point. 219 | # For regular VirtualHosts (most installs) 220 | # ----------------------------------------------------------------------------------------------- 221 | RewriteRule ^(.*)$ index.php?it=$1 [L,QSA] 222 | 223 | # ----------------------------------------------------------------------------------------------- 224 | # 20. If using VirtualDocumentRoot (500 NOTE): comment out the one above and use this one instead 225 | # ----------------------------------------------------------------------------------------------- 226 | # RewriteRule ^(.*)$ /index.php?it=$1 [L,QSA] 227 | 228 | 229 | 230 | ################################################################################################# 231 | # END PROCESSWIRE HTACCESS DIRECTIVES 232 | ################################################################################################# 233 | 234 | -------------------------------------------------------------------------------- /examples/pw-ghost/modules/InputfieldCKEditor/README.txt: -------------------------------------------------------------------------------- 1 | This InputfieldCKEditor directory is here to provide optional extra configuration options 2 | and plugins to the CKEditor Inputfield module. 3 | 4 | 5 | plugins/ 6 | ======== 7 | Directory to place additional CKEditor plugins in. You can then activate them 8 | from your CKEditor field settings. 9 | 10 | 11 | contents.css 12 | ============ 13 | Example CSS file for the admin editor. To make CKEditor use this file, go to your CKEditor 14 | field settings and specify /site/modules/InputfieldCKEditor/contents.css as the regular 15 | mode Contents CSS file. 16 | 17 | 18 | contents-inline.css 19 | =================== 20 | Same as contents.css but for the inline mode editor. 21 | 22 | 23 | mystyles.js 24 | =========== 25 | Optional configuration for the CKEditor Styles option. To use this file, go to your 26 | CKEditor field settings and set the Custom Styles Set to be this file. 27 | 28 | 29 | config.js 30 | ========= 31 | Custom config file used by all CKEditor instances (except instances configured by their 32 | own custom config file, see below...) 33 | 34 | 35 | config-body.js 36 | ============== 37 | Example of field-specific custom config file. This one applies to a field named "body". 38 | Note that these config settings can also be specified directly in your CKEditor field 39 | settings in the admin, which many may prefer. 40 | 41 | -------------------------------------------------------------------------------- /examples/pw-ghost/modules/InputfieldCKEditor/config-body.js: -------------------------------------------------------------------------------- 1 | /** 2 | * CKEditor field-specific (body) custom config file for ProcessWire 3 | * 4 | * Use this file to specify additional config options to a field named "body". 5 | * This is here just for example purposes. If you wanted to create a config 6 | * specific to some other field, like "sidebar", you would create another file 7 | * exactly like this named: config-sidebar.js 8 | * 9 | * If you wanted to use the same config.js for all of your CKEditor fields, 10 | * you would remove this file and just use the config.js file instead. Meaning, 11 | * this file completely overrides config.js if the field being edited is named 12 | * "body". The regular config.js file is not loaded when this one is loaded. 13 | * 14 | */ 15 | 16 | /** 17 | * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. 18 | * For licensing, see LICENSE.html or http://ckeditor.com/license 19 | */ 20 | 21 | CKEDITOR.editorConfig = function( config ) { 22 | // Define changes to default configuration here. For example: 23 | // config.uiColor = '#AADC6E'; 24 | }; -------------------------------------------------------------------------------- /examples/pw-ghost/modules/InputfieldCKEditor/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * CKEditor custom config file for ProcessWire 3 | * 4 | * Use this file to specify additional config options to all CKEditor instances, 5 | * except those that have field-specific config files, i.e. config-body.js for 6 | * config specific to a field named "body". 7 | * 8 | */ 9 | 10 | /** 11 | * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. 12 | * For licensing, see LICENSE.html or http://ckeditor.com/license 13 | */ 14 | 15 | CKEDITOR.editorConfig = function( config ) { 16 | // Define changes to default configuration here. For example: 17 | // config.uiColor = '#AADC6E'; 18 | }; -------------------------------------------------------------------------------- /examples/pw-ghost/modules/InputfieldCKEditor/contents-inline.css: -------------------------------------------------------------------------------- 1 | /** 2 | * contents-inline.css 3 | * 4 | * CKEditor editor styles for inline mode editor 5 | * 6 | * See also: contents-inline.scss 7 | * 8 | * PLEASE NOTE: 9 | * 10 | * It's possible this file may be out of date since it is in /site/ rather than /wire/, 11 | * and the version of this file will reflect whatever version you had when you first 12 | * installed this copy of ProcessWire. 13 | * 14 | * If you intend to use this, you may first want to get the newest copy out of: 15 | * /wire/modules/Inputfield/InputfieldCKEditor/contents-inline.css 16 | * 17 | * Original file copyright (as included with CKEditor): 18 | * Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. 19 | * For licensing, see LICENSE.html or http://ckeditor.com/license 20 | * 21 | */ 22 | 23 | .InputfieldForm .InputfieldCKEditorInline { 24 | font-family: Arial, sans-serif; 25 | } 26 | .InputfieldForm .InputfieldCKEditorInline p, 27 | .InputfieldForm .InputfieldCKEditorInline li, 28 | .InputfieldForm .InputfieldCKEditorInline dl, 29 | .InputfieldForm .InputfieldCKEditorInline td { 30 | font-size: 1em; 31 | color: #333333; 32 | background: white; 33 | } 34 | .InputfieldForm .InputfieldCKEditorInline a { 35 | color: #444444; 36 | background: none; 37 | text-decoration: underline; 38 | } 39 | .InputfieldForm .InputfieldCKEditorInline a:hover { 40 | color: #222222; 41 | background: #ffffdd; 42 | } 43 | .InputfieldForm .InputfieldCKEditorInline i, 44 | .InputfieldForm .InputfieldCKEditorInline em { 45 | font-style: italic; 46 | } 47 | .InputfieldForm .InputfieldCKEditorInline b, 48 | .InputfieldForm .InputfieldCKEditorInline strong { 49 | font-weight: bold; 50 | } 51 | .InputfieldForm .InputfieldCKEditorInline strong em, 52 | .InputfieldForm .InputfieldCKEditorInline em strong { 53 | font-weight: bold; 54 | font-style: italic; 55 | } 56 | .InputfieldForm .InputfieldCKEditorInline small { 57 | font-size: 0.875em; 58 | } 59 | .InputfieldForm .InputfieldCKEditorInline pre, 60 | .InputfieldForm .InputfieldCKEditorInline code { 61 | font-family: Menlo, Monaco, 'Andale Mono', 'Lucida Console', 'Courier New', monospace; 62 | } 63 | .InputfieldForm .InputfieldCKEditorInline code { 64 | display: inline; 65 | background: #fff2a8; 66 | } 67 | .InputfieldForm .InputfieldCKEditorInline ul li, 68 | .InputfieldForm .InputfieldCKEditorInline ol li { 69 | list-style: disc; 70 | display: list-item; 71 | margin: 0 0 0 2em; 72 | } 73 | .InputfieldForm .InputfieldCKEditorInline ol li { 74 | list-style: decimal; 75 | } 76 | .InputfieldForm .InputfieldCKEditorInline blockquote { 77 | padding-left: 1em; 78 | border-left: 3px solid #ccc; 79 | } 80 | .InputfieldForm .InputfieldCKEditorInline h1, 81 | .InputfieldForm .InputfieldCKEditorInline h2, 82 | .InputfieldForm .InputfieldCKEditorInline h3, 83 | .InputfieldForm .InputfieldCKEditorInline h4, 84 | .InputfieldForm .InputfieldCKEditorInline h5 { 85 | color: #222222; 86 | font-family: Arial, sans-serif; 87 | font-weight: normal; 88 | text-transform: none; 89 | } 90 | .InputfieldForm .InputfieldCKEditorInline h1 { 91 | font-size: 2.0em; 92 | } 93 | .InputfieldForm .InputfieldCKEditorInline h2 { 94 | font-size: 1.7em; 95 | } 96 | .InputfieldForm .InputfieldCKEditorInline h3 { 97 | font-size: 1.5em; 98 | } 99 | .InputfieldForm .InputfieldCKEditorInline h4 { 100 | font-size: 1.3em; 101 | } 102 | .InputfieldForm .InputfieldCKEditorInline h5 { 103 | font-size: 1.2em; 104 | } 105 | .InputfieldForm .InputfieldCKEditorInline h6 { 106 | font-size: 1.1em; 107 | } 108 | .InputfieldForm .InputfieldCKEditorInline table td, 109 | .InputfieldForm .InputfieldCKEditorInline table th { 110 | padding: 3px; 111 | } 112 | .InputfieldForm .InputfieldCKEditorInline table th { 113 | font-weight: bold; 114 | } 115 | .InputfieldForm .InputfieldCKEditorInline img { 116 | max-width: 100%; 117 | } 118 | .InputfieldForm .InputfieldCKEditorInline img.cke_anchor { 119 | display: inline; 120 | } 121 | 122 | -------------------------------------------------------------------------------- /examples/pw-ghost/modules/InputfieldCKEditor/contents.css: -------------------------------------------------------------------------------- 1 | /** 2 | * contents.css 3 | * 4 | * CKEditor editor styles for regular (non-inline) editor 5 | * See contents-inline.css for inline editor styles. 6 | * 7 | * Note that this file is not in use unless you configure your editor settings to use it 8 | * in the "Custom Editor CSS File (regular mode)" option. As a result, this file is here 9 | * primarily as a placeholder and for instructions, though you may certainly modify and 10 | * use it as-is. 11 | * 12 | * PLEASE NOTE: 13 | * 14 | * It's possible this file may be out of date since it is in /site/ rather than /wire/, 15 | * and the version of this file will reflect whatever version you had when you first 16 | * installed this copy of ProcessWire. 17 | * 18 | * If you intend to use this, you may first want to get the newest copy out of: 19 | * /wire/modules/Inputfield/InputfieldCKEditor/contents.css 20 | * 21 | * Original file copyright (as included with CKEditor): 22 | * Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. 23 | * For licensing, see LICENSE.html or http://ckeditor.com/license 24 | * 25 | */ 26 | 27 | body { 28 | /* Font */ 29 | font-family: sans-serif, Arial, Verdana, "Trebuchet MS"; 30 | font-size: 14px; 31 | 32 | /* Text color */ 33 | color: #333; 34 | 35 | /* Remove the background color to make it transparent */ 36 | background-color: #fff; 37 | 38 | margin: 10px; 39 | } 40 | 41 | .cke_editable { 42 | font-size: 14px; 43 | line-height: 1.6em; 44 | } 45 | 46 | blockquote { 47 | font-style: italic; 48 | font-family: Georgia, Times, "Times New Roman", serif; 49 | padding: 2px 0; 50 | border-style: solid; 51 | border-color: #ccc; 52 | border-width: 0; 53 | } 54 | 55 | .cke_contents_ltr blockquote { 56 | padding-left: 20px; 57 | padding-right: 8px; 58 | border-left-width: 5px; 59 | } 60 | 61 | .cke_contents_rtl blockquote { 62 | padding-left: 8px; 63 | padding-right: 20px; 64 | border-right-width: 5px; 65 | } 66 | 67 | a { 68 | color: #0782C1; 69 | } 70 | 71 | ol,ul,dl { 72 | /* IE7: reset rtl list margin. (#7334) */ 73 | *margin-right: 0px; 74 | /* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/ 75 | padding: 0 40px; 76 | } 77 | 78 | h1,h2,h3,h4,h5,h6 { 79 | font-weight: bold; 80 | line-height: 1.2em; 81 | } 82 | 83 | hr { 84 | border: 0px; 85 | border-top: 1px solid #ccc; 86 | } 87 | 88 | img { 89 | max-width: 100%; 90 | } 91 | 92 | img.right, 93 | img.align_right, 94 | img.align-right { 95 | /* RCD */ 96 | border: 1px solid #ccc; 97 | float: right; 98 | margin-left: 15px; 99 | padding: 5px; 100 | } 101 | 102 | img.left, 103 | img.align_left, 104 | img.align-left { 105 | /* RCD */ 106 | border: 1px solid #ccc; 107 | float: left; 108 | margin-right: 15px; 109 | padding: 5px; 110 | } 111 | 112 | img.align_center, 113 | img.align-center { 114 | /* RCD */ 115 | display: block; 116 | margin-left: auto; 117 | margin-right: auto; 118 | } 119 | 120 | img:hover { 121 | opacity: .9; 122 | filter: alpha(opacity = 90); 123 | } 124 | 125 | pre { 126 | white-space: pre-wrap; 127 | word-wrap: break-word; 128 | -moz-tab-size: 4; 129 | -o-tab-size: 4; 130 | -webkit-tab-size: 4; 131 | tab-size: 4; 132 | } 133 | 134 | .marker { 135 | background-color: Yellow; 136 | } 137 | 138 | span[lang] { 139 | font-style: italic; 140 | } 141 | 142 | figure { 143 | text-align: center; 144 | border: solid 1px #ccc; 145 | border-radius: 2px; 146 | background: rgba(0,0,0,0.05); 147 | padding: 10px; 148 | margin: 10px 20px; 149 | display: inline-block; 150 | } 151 | 152 | figure > figcaption { 153 | text-align: center; 154 | display: block; /* For IE8 */ 155 | } 156 | 157 | code { 158 | /* RCD */ 159 | background: #fff2a8; 160 | } 161 | 162 | a > img { 163 | padding: 1px; 164 | margin: 1px; 165 | border: none; 166 | outline: 1px solid #0782C1; 167 | } 168 | 169 | 170 | -------------------------------------------------------------------------------- /examples/pw-ghost/modules/InputfieldCKEditor/mystyles.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mystyles.js - for ProcessWire CKEditor "Custom Editor Styles Set" option 3 | * 4 | * Example file for "Custom Editor Styles Set" as seen in your CKEditor field config. 5 | * This file is not in use unless you specify it for that configuration item. 6 | * 7 | * PLEASE NOTE: 8 | * 9 | * It's possible this file may be out of date since it is in /site/ rather than /wire/, 10 | * and the version of this file will reflect whatever version you had when you first 11 | * installed this copy of ProcessWire. 12 | * 13 | * If you intend to use this, you may first want to get the newest copy out of: 14 | * /wire/modules/Inputfield/InputfieldCKEditor/mystyles.js 15 | * 16 | * For a more comprehensive example, see: 17 | * /wire/modules/Inputfield/InputfieldCKEditor/ckeditor-[version]/styles.js 18 | * 19 | */ 20 | 21 | CKEDITOR.stylesSet.add( 'mystyles', [ 22 | { name: 'Inline Code', element: 'code' }, 23 | { name: 'Inline Quotation', element: 'q' }, 24 | { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } }, 25 | { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } }, 26 | { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } }, 27 | { name: 'Small', element: 'small' }, 28 | { name: 'Deleted Text', element: 'del' }, 29 | { name: 'Inserted Text', element: 'ins' }, 30 | { name: 'Cited Work', element: 'cite' } 31 | ]); 32 | 33 | -------------------------------------------------------------------------------- /examples/pw-ghost/modules/InputfieldCKEditor/plugins/README.txt: -------------------------------------------------------------------------------- 1 | Directory to place additional CKEditor plugins in. You can then activate them 2 | from your CKEditor field settings. Place each plugin in its own directory 3 | having the same name as the plugin. 4 | -------------------------------------------------------------------------------- /examples/pw-ghost/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joyofpw/wire-render-pattern/b8b6e62a87296ba5704c05f8ef21edb6613a1b97/examples/pw-ghost/screenshot.png -------------------------------------------------------------------------------- /examples/pw-ghost/templates/404.php: -------------------------------------------------------------------------------- 1 | get('/'); 16 | $templatesUrl = $config->urls->templates; 17 | $assets = $templatesUrl . 'assets/'; 18 | 19 | $meta = $pages->get('template=meta'); 20 | 21 | $title = $page->title; 22 | 23 | $meta_description = (($page->about && $page->about != '') ? $page->about : $meta->about); 24 | 25 | $blog = $pages->get('template=blog'); 26 | 27 | $blog_title = $home->title; 28 | 29 | $meta_title = $blog_title; 30 | 31 | $blog_url = $home->httpUrl; 32 | 33 | $blog_logo = $meta->logo; 34 | 35 | $copyright_year = ($meta->year > 0 ? $meta->year : 2016); 36 | $today = date('Y'); 37 | 38 | if($today > $copyright_year) { 39 | $copyright_year = "$copyright_year - $today"; 40 | } 41 | 42 | 43 | $rss = $pages->get('template=rss'); 44 | 45 | $authors = $pages->get('template=authors'); 46 | 47 | $language = $user->language; 48 | 49 | $view = 'default'; 50 | 51 | $body = ''; 52 | 53 | // Posts Limits 54 | $defaultLimit = 10; 55 | 56 | $postsInHome = $defaultLimit; 57 | $postsInAuthor = $defaultLimit; 58 | $postsInTags = $defaultLimit; 59 | $postsInRss = $defaultLimit; 60 | 61 | // View Bags 62 | 63 | $headerBag = []; 64 | 65 | $bodyBag = ['blog' => $blog]; 66 | 67 | $footerBag = []; 68 | 69 | $menu = $pages->get('template=menu'); 70 | $current_menu_item = $menu->children->get("pointer=$page"); 71 | 72 | $navigationBag = ['items' => $menu->children, 73 | 'current_item' => $current_menu_item, 74 | 'blog_url' => $blog_url, 75 | 'rss_subscription' => true]; 76 | 77 | $navigation = ''; 78 | 79 | // This variables will likely no change 80 | // so we put them at the start. 81 | $viewBag = ['home' => $home, 82 | 'templatesUrl' => $templatesUrl, 83 | 'assets' => $assets, 84 | 'blog' => $blog, 85 | 'blog_title' => $blog_title, 86 | 'blog_url' => $blog_url, 87 | 'copyright_year' => $copyright_year, 88 | 'rss' => $rss, 89 | 'favicon' => $meta->favicon->url 90 | ]; 91 | 92 | $cover = $page->get('cover'); 93 | 94 | if(empty($cover)){ 95 | $cover = new NullPage; 96 | } 97 | 98 | $facebookOgBag = [ 99 | 'meta_title' => $meta_title, 100 | 'title' => $title, 101 | 'description' => $meta_description, 102 | 'url' => $page->httpUrl, 103 | 'image' => $cover->httpUrl 104 | ]; 105 | 106 | $twitterCardBag = [ 107 | 'meta_title' => $meta_title, 108 | 'title' => $title, 109 | 'description' => $meta_description, 110 | 'url' => $page->httpUrl, 111 | 'image' => $cover->httpUrl 112 | ]; 113 | 114 | $ldJsonBag = [ 115 | 'meta_title' => $meta_title, 116 | 'title' => $title, 117 | 'description' => $meta_description, 118 | 'url' => $page->httpUrl, 119 | 'image' => $cover->httpUrl 120 | ]; 121 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/_main.php: -------------------------------------------------------------------------------- 1 | template != 'home') { 27 | $meta_title = $blog_title . ' | ' . $title; 28 | } 29 | 30 | $viewBag['meta_title'] = $meta_title; 31 | $viewBag['meta_description'] = $meta_description; 32 | $viewBag['body'] = $body; 33 | $viewBag['navigation'] = $navigation; 34 | 35 | $viewBag['header_bag'] = $headerBag; 36 | $viewBag['footer_bag'] = $footerBag; 37 | 38 | $output = wireRenderFile('views/default_view', $viewBag); 39 | 40 | echo $output; 41 | } 42 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/admin.php: -------------------------------------------------------------------------------- 1 | paths->adminTemplates . 'controller.php'); 16 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/assets/css/screen.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Table of Contents 3 | ========================================================================== */ 4 | 5 | /* 6 | 7 | 0. Normalize 8 | 1. Icons 9 | 2. General 10 | 3. Utilities 11 | 4. General 12 | 5. Single Post 13 | 6. Author Profile 14 | 7. Read More 15 | 8. Third Party Elements 16 | 9. Pagination 17 | 10. Subscribe 18 | 11. Footer 19 | 12. Media Queries (Tablet) 20 | 13. Media Queries (Mobile) 21 | 14. Animations 22 | 23 | */ 24 | 25 | /* ========================================================================== 26 | 0. normalize.css v3.0.3 | MIT License | git.io/normalize | (minified) 27 | ========================================================================== */ 28 | 29 | html { 30 | font-family: sans-serif; 31 | -ms-text-size-adjust: 100%; 32 | -webkit-text-size-adjust: 100% 33 | } 34 | body { margin: 0; } 35 | article, aside, details, 36 | figcaption, figure, 37 | footer, header, 38 | main, menu, nav, 39 | section, summary { display:block; } 40 | audio, canvas, progress, video { 41 | display: inline-block; 42 | vertical-align: baseline; 43 | } 44 | audio:not([controls]) { display: none; height: 0; } 45 | [hidden], template { display: none; } 46 | a { background-color: transparent;} 47 | a:active, a:hover { outline: 0; } 48 | abbr[title] { border-bottom: 1px dotted; } 49 | b, strong { font-weight: bold; } 50 | dfn { font-style: italic; } 51 | h1 { font-size: 2em; margin: 0.67em 0; } 52 | mark { background: #ff0; color: #000; } 53 | small { font-size: 80%; } 54 | sub, sup { 55 | font-size: 75%; 56 | line-height: 0; 57 | position: relative; 58 | vertical-align: baseline; 59 | } 60 | sup { top: -0.5em; } 61 | sub { bottom: -0.25em; } 62 | img { border: 0; } 63 | svg:not(:root) { overflow: hidden; } 64 | figure { margin: 1em 40px; } 65 | hr { box-sizing: content-box; height: 0; } 66 | pre { overflow: auto; } 67 | code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } 68 | button, input, optgroup, select, textarea { 69 | color: inherit; 70 | font: inherit; 71 | margin: 0; 72 | } 73 | button { overflow: visible; } 74 | button, select { text-transform: none; } 75 | button, html input[type="button"], 76 | input[type="reset"], input[type="submit"] { 77 | -webkit-appearance: button; 78 | cursor: pointer; 79 | } 80 | button[disabled], html input[disabled] { cursor: default; } 81 | button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } 82 | input { line-height: normal; } 83 | input[type="checkbox"], 84 | input[type="radio"] { box-sizing: border-box; padding: 0; } 85 | input[type="number"]::-webkit-inner-spin-button, 86 | input[type="number"]::-webkit-outer-spin-button { height: auto; } 87 | input[type="search"] { -webkit-appearance: textfield; } 88 | input[type="search"]::-webkit-search-cancel-button, 89 | input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 90 | fieldset { 91 | border: 1px solid #c0c0c0; 92 | margin: 0 2px; 93 | padding: 0.35em 0.625em 0.75em; 94 | } 95 | legend { border: 0; padding: 0; } 96 | textarea { overflow: auto; } 97 | optgroup { font-weight: bold; } 98 | table{ border-collapse: collapse; border-spacing: 0; } 99 | td, th{ padding: 0; } 100 | 101 | 102 | /* ========================================================================== 103 | 1. Icons - Sets up the icon font and respective classes 104 | ========================================================================== */ 105 | 106 | /* Import the font file with the icons in it */ 107 | @font-face { 108 | font-family: "casper-icons"; 109 | src:url("../fonts/casper-icons.eot?v=1"); 110 | src:url("../fonts/casper-icons.eot?v=1#iefix") format("embedded-opentype"), 111 | url("../fonts/casper-icons.woff?v=1") format("woff"), 112 | url("../fonts/casper-icons.ttf?v=1") format("truetype"), 113 | url("../fonts/casper-icons.svg?v=1#icons") format("svg"); 114 | font-weight: normal; 115 | font-style: normal; 116 | } 117 | 118 | /* Apply these base styles to all icons */ 119 | [class^="icon-"]:before, [class*=" icon-"]:before { 120 | font-family: "casper-icons", "Open Sans", sans-serif; 121 | speak: none; 122 | font-style: normal; 123 | font-weight: normal; 124 | font-variant: normal; 125 | text-transform: none; 126 | line-height: 1; 127 | text-decoration: none !important; 128 | -webkit-font-smoothing: antialiased; 129 | -moz-osx-font-smoothing: grayscale; 130 | } 131 | 132 | /* Each icon is created by inserting the correct character into the 133 | content of the :before pseudo element. Like a boss. */ 134 | .icon-ghost:before { 135 | content: "\f600"; 136 | } 137 | .icon-feed:before { 138 | content: "\f601"; 139 | } 140 | .icon-twitter:before { 141 | content: "\f602"; 142 | font-size: 1.1em; 143 | } 144 | .icon-google-plus:before { 145 | content: "\f603"; 146 | } 147 | .icon-facebook:before { 148 | content: "\f604"; 149 | } 150 | .icon-arrow-left:before { 151 | content: "\f605"; 152 | } 153 | .icon-stats:before { 154 | content: "\f606"; 155 | } 156 | .icon-location:before { 157 | content: "\f607"; 158 | margin-left: -3px; /* Tracking fix */ 159 | } 160 | .icon-link:before { 161 | content: "\f608"; 162 | } 163 | .icon-menu:before { 164 | content: "\f609"; 165 | } 166 | /* 167 | IMPORTANT: When making any changes to the icon font, be sure to increment 168 | the version number by 1 in the @font-face rule. `?v=1` becomes `?v=2` 169 | This forces browsers to download the new font file. 170 | */ 171 | 172 | 173 | /* ========================================================================== 174 | 2. General - Setting up some base styles 175 | ========================================================================== */ 176 | 177 | html { 178 | height: 100%; 179 | max-height: 100%; 180 | font-size: 62.5%; 181 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 182 | } 183 | 184 | body { 185 | height: 100%; 186 | max-height: 100%; 187 | font-family: "Merriweather", serif; 188 | letter-spacing: 0.01rem; 189 | font-size: 1.8rem; 190 | line-height: 1.75em; 191 | color: #3A4145; 192 | -webkit-font-feature-settings: 'kern' 1; 193 | -moz-font-feature-settings: 'kern' 1; 194 | -o-font-feature-settings: 'kern' 1; 195 | text-rendering: geometricPrecision; 196 | } 197 | 198 | ::-moz-selection { 199 | background: #D6EDFF; 200 | } 201 | 202 | ::selection { 203 | background: #D6EDFF; 204 | } 205 | 206 | h1, h2, h3, 207 | h4, h5, h6 { 208 | -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; 209 | -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; 210 | -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; 211 | color: #2E2E2E; 212 | line-height: 1.15em; 213 | margin: 0 0 0.4em 0; 214 | font-family: "Open Sans", sans-serif; 215 | text-rendering: geometricPrecision; 216 | } 217 | 218 | h1 { 219 | font-size: 5rem; 220 | letter-spacing: -2px; 221 | text-indent: -3px; 222 | } 223 | 224 | h2 { 225 | font-size: 3.6rem; 226 | letter-spacing: -1px; 227 | } 228 | 229 | h3 { 230 | font-size: 3rem; 231 | letter-spacing: -0.6px; 232 | } 233 | 234 | h4 { 235 | font-size: 2.5rem; 236 | } 237 | 238 | h5 { 239 | font-size: 2rem; 240 | } 241 | 242 | h6 { 243 | font-size: 2rem; 244 | } 245 | 246 | a { 247 | color: #4A4A4A; 248 | transition: color 0.3s ease; 249 | } 250 | 251 | a:hover { 252 | color: #111; 253 | } 254 | 255 | p, ul, ol, dl { 256 | -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; 257 | -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; 258 | -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; 259 | margin: 0 0 1.75em 0; 260 | text-rendering: geometricPrecision; 261 | } 262 | 263 | ol, ul { 264 | padding-left: 3rem; 265 | } 266 | 267 | ol ol, ul ul, 268 | ul ol, ol ul { 269 | margin: 0 0 0.4em 0; 270 | padding-left: 2em; 271 | } 272 | 273 | dl dt { 274 | float: left; 275 | width: 180px; 276 | overflow: hidden; 277 | clear: left; 278 | text-align: right; 279 | text-overflow: ellipsis; 280 | white-space: nowrap; 281 | font-weight: 700; 282 | margin-bottom: 1em; 283 | } 284 | 285 | dl dd { 286 | margin-left: 200px; 287 | margin-bottom: 1em 288 | } 289 | 290 | li { 291 | margin: 0.4em 0; 292 | } 293 | 294 | li li { 295 | margin: 0; 296 | } 297 | 298 | hr { 299 | display: block; 300 | height: 1px; 301 | border: 0; 302 | border-top: #EFEFEF 1px solid; 303 | margin: 3.2em 0; 304 | padding: 0; 305 | } 306 | 307 | blockquote { 308 | -moz-box-sizing: border-box; 309 | box-sizing: border-box; 310 | margin: 1.75em 0 1.75em -2.2em; 311 | padding: 0 0 0 1.75em; 312 | border-left: #4A4A4A 0.4em solid; 313 | } 314 | 315 | blockquote p { 316 | margin: 0.8em 0; 317 | font-style: italic; 318 | } 319 | 320 | blockquote small { 321 | display: inline-block; 322 | margin: 0.8em 0 0.8em 1.5em; 323 | font-size: 0.9em; 324 | color: #CCC; 325 | } 326 | 327 | blockquote small:before { content: "\2014 \00A0"; } 328 | 329 | blockquote cite { 330 | font-weight: 700; 331 | } 332 | 333 | blockquote cite a { font-weight: normal; } 334 | 335 | mark { 336 | background-color: #fdffb6; 337 | } 338 | 339 | code, tt { 340 | padding: 1px 3px; 341 | font-family: Inconsolata, monospace, sans-serif; 342 | font-size: 0.85em; 343 | white-space: pre-wrap; 344 | border: #E3EDF3 1px solid; 345 | background: #F7FAFB; 346 | border-radius: 2px; 347 | -webkit-font-feature-settings: "liga" 0; 348 | -moz-font-feature-settings: "liga" 0; 349 | font-feature-settings: "liga" 0; 350 | } 351 | 352 | pre { 353 | -moz-box-sizing: border-box; 354 | box-sizing: border-box; 355 | margin: 0 0 1.75em 0; 356 | border: #E3EDF3 1px solid; 357 | width: 100%; 358 | padding: 10px; 359 | font-family: Inconsolata, monospace, sans-serif; 360 | font-size: 0.9em; 361 | white-space: pre; 362 | overflow: auto; 363 | background: #F7FAFB; 364 | border-radius: 3px; 365 | } 366 | 367 | pre code, pre tt { 368 | font-size: inherit; 369 | white-space: pre-wrap; 370 | background: transparent; 371 | border: none; 372 | padding: 0; 373 | } 374 | 375 | kbd { 376 | display: inline-block; 377 | margin-bottom: 0.4em; 378 | padding: 1px 8px; 379 | border: #CCC 1px solid; 380 | color: #666; 381 | text-shadow: #FFF 0 1px 0; 382 | font-size: 0.9em; 383 | font-weight: 700; 384 | background: #F4F4F4; 385 | border-radius: 4px; 386 | box-shadow: 387 | 0 1px 0 rgba(0, 0, 0, 0.2), 388 | 0 1px 0 0 #fff inset; 389 | } 390 | 391 | table { 392 | -moz-box-sizing: border-box; 393 | box-sizing: border-box; 394 | margin: 1.75em 0; 395 | width: 100%; 396 | max-width: 100%; 397 | background-color: transparent; 398 | } 399 | 400 | table th, 401 | table td { 402 | padding: 8px; 403 | line-height: 20px; 404 | text-align: left; 405 | vertical-align: top; 406 | border-top: #EFEFEF 1px solid; 407 | } 408 | 409 | table th { color: #000; } 410 | 411 | table caption + thead tr:first-child th, 412 | table caption + thead tr:first-child td, 413 | table colgroup + thead tr:first-child th, 414 | table colgroup + thead tr:first-child td, 415 | table thead:first-child tr:first-child th, 416 | table thead:first-child tr:first-child td { 417 | border-top: 0; 418 | } 419 | 420 | table tbody + tbody { border-top: #EFEFEF 2px solid; } 421 | 422 | table table table { background-color: #FFF; } 423 | 424 | table tbody > tr:nth-child(odd) > td, 425 | table tbody > tr:nth-child(odd) > th { 426 | background-color: #F6F6F6; 427 | } 428 | 429 | table.plain tbody > tr:nth-child(odd) > td, 430 | table.plain tbody > tr:nth-child(odd) > th { 431 | background: transparent; 432 | } 433 | 434 | iframe, .fluid-width-video-wrapper { 435 | display: block; 436 | margin: 1.75em 0; 437 | } 438 | 439 | /* When a video is inside the fitvids wrapper, drop the 440 | margin on the iframe, cause it breaks stuff. */ 441 | .fluid-width-video-wrapper iframe { 442 | margin: 0; 443 | } 444 | 445 | textarea, select, input { 446 | width: 260px; 447 | padding: 6px 9px; 448 | margin: 0 0 5px 0; 449 | outline: 0; 450 | font-family: 'Open Sans', sans-serif; 451 | font-size: 1.6rem; 452 | font-weight: 100; 453 | line-height: 1.4em; 454 | background: #fff; 455 | border: #e7eef2 1px solid; 456 | border-radius: 4px; 457 | box-shadow: none; 458 | -webkit-appearance: none; 459 | } 460 | 461 | textarea { 462 | width: 100%; 463 | max-width: 340px; 464 | min-width: 250px; 465 | height: auto; 466 | min-height: 80px; 467 | } 468 | 469 | input[type="text"]:focus, 470 | input[type="email"]:focus, 471 | input[type="search"]:focus, 472 | input[type="tel"]:focus, 473 | input[type="url"]:focus, 474 | input[type="password"]:focus, 475 | input[type="number"]:focus, 476 | input[type="date"]:focus, 477 | input[type="month"]:focus, 478 | input[type="week"]:focus, 479 | input[type="time"]:focus, 480 | input[type="datetime"]:focus, 481 | input[type="datetime-local"]:focus, 482 | textarea:focus { 483 | border: #bbc7cc 1px solid; 484 | background: #fff; 485 | outline: none; 486 | outline-width: 0; 487 | } 488 | 489 | select { 490 | width: 270px; 491 | height: 30px; 492 | line-height: 30px; 493 | } 494 | 495 | button { 496 | min-height: 35px; 497 | width: auto; 498 | display: inline-block; 499 | padding: 0.1rem 1.5rem; 500 | cursor: pointer; 501 | outline: none; 502 | text-decoration: none; 503 | color: #fff; 504 | font-family: 'Open Sans', sans-serif; 505 | font-size: 11px; /* Hacks targeting Firefox. */ 506 | line-height: 13px; /* Hacks targeting Firefox. */ 507 | font-weight: 300; 508 | text-align: center; 509 | letter-spacing: 1px; 510 | text-transform: uppercase; 511 | text-shadow: none; 512 | border-radius: 0.3rem; 513 | border: rgba(0,0,0,0.05) 0.1em solid; 514 | background: #5ba4e5; 515 | } 516 | 517 | 518 | /* ========================================================================== 519 | 3. Utilities - These things get used a lot 520 | ========================================================================== */ 521 | 522 | /* Clears shit */ 523 | .clearfix:before, 524 | .clearfix:after { 525 | content: " "; 526 | display: table; 527 | } 528 | .clearfix:after { clear: both; } 529 | .clearfix { zoom: 1; } 530 | 531 | /* Hides shit */ 532 | .hidden { 533 | text-indent: -9999px; 534 | visibility: hidden; 535 | display: none; 536 | } 537 | 538 | /* Creates a responsive wrapper that makes our content scale nicely */ 539 | .inner { 540 | position: relative; 541 | width: 80%; 542 | max-width: 710px; 543 | margin: 0 auto; 544 | } 545 | 546 | /* Centres vertically yo. (IE8+) */ 547 | .vertical { 548 | display: table-cell; 549 | vertical-align: middle; 550 | } 551 | 552 | /* Wraps the main content & footer */ 553 | .site-wrapper { 554 | position: relative; 555 | z-index: 10; 556 | min-height: 100%; 557 | background: #fff; 558 | -webkit-transition: -webkit-transform 0.5s ease; 559 | transition: transform 0.5s ease; 560 | } 561 | 562 | body.nav-opened .site-wrapper { 563 | overflow-x: hidden; 564 | -webkit-transform: translate3D(-240px, 0, 0); 565 | -ms-transform: translate3D(-240px, 0, 0); 566 | transform: translate3D(-240px, 0, 0); 567 | -webkit-transition: -webkit-transform 0.3s ease; 568 | transition: transform 0.3s ease; 569 | } 570 | 571 | 572 | /* ========================================================================== 573 | 4. General - The main styles for the the theme 574 | ========================================================================== */ 575 | 576 | /* Big cover image on the home page */ 577 | .main-header { 578 | position: relative; 579 | display: table; 580 | width: 100%; 581 | height: 100vh; 582 | margin-bottom: 5rem; 583 | text-align: center; 584 | background: #222 no-repeat center center; 585 | background-size: cover; 586 | overflow: hidden; 587 | } 588 | 589 | .main-header .inner { 590 | width: 80%; 591 | } 592 | 593 | .main-nav { 594 | position: relative; 595 | padding: 35px 40px; 596 | margin: 0 0 30px 0; 597 | } 598 | 599 | .main-nav a { 600 | text-decoration: none; 601 | font-family: 'Open Sans', sans-serif; 602 | } 603 | 604 | /* Navigation */ 605 | body.nav-opened .nav-cover { 606 | position: fixed; 607 | top: 0; 608 | left: 0; 609 | right: 240px; 610 | bottom: 0; 611 | z-index: 200; 612 | } 613 | 614 | .nav { 615 | position: fixed; 616 | top: 0; 617 | right: 0; 618 | bottom: 0; 619 | z-index: 5; 620 | width: 240px; 621 | opacity: 0; 622 | background: #111; 623 | margin-bottom: 0; 624 | text-align: left; 625 | overflow-y: auto; 626 | -webkit-transition: -webkit-transform 0.5s ease, 627 | opacity 0.3s ease 0.7s; 628 | transition: transform 0.5s ease, 629 | opacity 0.3s ease 0.7s; 630 | } 631 | 632 | body.nav-closed .nav { 633 | -webkit-transform: translate3D(97px, 0, 0); 634 | -ms-transform: translate3D(97px, 0, 0); 635 | transform: translate3D(97px, 0, 0); 636 | } 637 | 638 | body.nav-opened .nav { 639 | opacity: 1; 640 | -webkit-transition: -webkit-transform 0.3s ease, 641 | opacity 0s ease 0s; 642 | transition: transform 0.3s ease, 643 | opacity 0s ease 0s; 644 | -webkit-transform: translate3D(0, 0, 0); 645 | -ms-transform: translate3D(0, 0, 0); 646 | transform: translate3D(0, 0, 0); 647 | } 648 | 649 | .nav-title { 650 | position: absolute; 651 | top: 45px; 652 | left: 30px; 653 | font-size: 16px; 654 | font-weight: 100; 655 | text-transform: uppercase; 656 | color: #fff; 657 | } 658 | 659 | .nav-close { 660 | position: absolute; 661 | top: 38px; 662 | right: 25px; 663 | width: 20px; 664 | height: 20px; 665 | padding: 0; 666 | font-size: 10px; 667 | } 668 | 669 | .nav-close:focus { 670 | outline: 0; 671 | } 672 | 673 | .nav-close:before, 674 | .nav-close:after { 675 | content: ''; 676 | position: absolute; 677 | top: 0; 678 | width: 20px; 679 | height: 1px; 680 | background: rgb(150,150,150); 681 | top: 15px; 682 | -webkit-transition: background 0.15s ease; 683 | transition: background 0.15s ease; 684 | } 685 | 686 | .nav-close:before { 687 | -webkit-transform: rotate(45deg); 688 | -ms-transform: rotate(45deg); 689 | transform: rotate(45deg); 690 | } 691 | 692 | .nav-close:after { 693 | -webkit-transform: rotate(-45deg); 694 | -ms-transform: rotate(-45deg); 695 | transform: rotate(-45deg); 696 | } 697 | 698 | .nav-close:hover:before, 699 | .nav-close:hover:after { 700 | background: rgb(255,255,255); 701 | } 702 | 703 | .nav ul { 704 | padding: 90px 9% 5%; 705 | list-style: none; 706 | counter-reset: item; 707 | } 708 | 709 | .nav li:before { 710 | display: block; 711 | float: right; 712 | padding-right: 4%; 713 | padding-left: 5px; 714 | text-align: right; 715 | font-size: 1.2rem; 716 | vertical-align: bottom; 717 | color: #B8B8B8; 718 | content: counter(item, lower-roman); 719 | counter-increment: item; 720 | } 721 | .nav li { 722 | margin: 0; 723 | } 724 | .nav li a { 725 | text-decoration: none; 726 | line-height: 1.4; 727 | font-size: 1.4rem; 728 | display: block; 729 | padding: 0.6rem 4%; 730 | overflow: hidden; 731 | white-space: nowrap; 732 | text-overflow: ellipsis; 733 | } 734 | .nav li a:after { 735 | display: inline-block; 736 | content: " ......................................................."; 737 | color: rgba(255,255,255,0.2); 738 | margin-left: 5px; 739 | } 740 | .nav .nav-current:before { 741 | color: #fff; 742 | } 743 | .nav .nav-current a:after { 744 | content: " "; 745 | border-bottom: rgba(255,255,255,0.5) 1px solid; 746 | width: 100%; 747 | height: 1px; 748 | } 749 | 750 | .nav a:link, 751 | .nav a:visited { 752 | color: #B8B8B8; 753 | } 754 | 755 | .nav li.nav-current a, 756 | .nav a:hover, 757 | .nav a:active, 758 | .nav a:focus { 759 | color: #fff; 760 | } 761 | 762 | .subscribe-button { 763 | -webkit-box-sizing: border-box; 764 | -moz-box-sizing: border-box; 765 | box-sizing: border-box; 766 | display: block; 767 | position: absolute; 768 | bottom: 30px; 769 | left: 30px; 770 | right: 30px; 771 | height: 38px; 772 | padding: 0 20px; 773 | color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */ 774 | text-align: center; 775 | font-size: 12px; 776 | font-family: "Open Sans", sans-serif; 777 | text-transform: uppercase; 778 | text-decoration: none; 779 | line-height: 35px; 780 | border-radius: 3px; 781 | background: #fff; 782 | transition: all ease 0.3s; 783 | } 784 | .subscribe-button:before { 785 | font-size: 9px; 786 | margin-right: 6px; 787 | } 788 | 789 | 790 | /* Create a bouncing scroll-down arrow on homepage with cover image */ 791 | .scroll-down { 792 | display: block; 793 | position: absolute; 794 | z-index: 100; 795 | bottom: 45px; 796 | left: 50%; 797 | margin-left: -16px; 798 | width: 34px; 799 | height: 34px; 800 | font-size: 34px; 801 | text-align: center; 802 | text-decoration: none; 803 | color: rgba(255,255,255,0.7); 804 | -webkit-transform: rotate(-90deg); 805 | -ms-transform: rotate(-90deg); 806 | transform: rotate(-90deg); 807 | -webkit-animation: bounce 4s 2s infinite; 808 | animation: bounce 4s 2s infinite; 809 | } 810 | 811 | /* Stop it bouncing and increase contrast when hovered */ 812 | .scroll-down:hover { 813 | color: #fff; 814 | -webkit-animation: none; 815 | animation: none; 816 | } 817 | 818 | /* Put a semi-opaque radial gradient behind the icon to make it more visible 819 | on photos which happen to have a light background. */ 820 | .home-template .main-header:after { 821 | display: block; 822 | content: " "; 823 | width: 150px; 824 | height: 130px; 825 | border-radius: 100%; 826 | position: absolute; 827 | bottom: 0; 828 | left: 50%; 829 | margin-left: -75px; 830 | background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%); 831 | } 832 | 833 | /* Hide when there's no cover image or on page2+ */ 834 | .no-cover .scroll-down, 835 | .no-cover.main-header:after, 836 | .archive-template .scroll-down, 837 | .archive-template .main-header:after { 838 | display: none 839 | } 840 | 841 | /* Appears in the top left corner of your home page */ 842 | .blog-logo { 843 | display: block; 844 | float: left; 845 | background: none !important; /* Makes sure there is never a background */ 846 | border: none !important; /* Makes sure there is never a border */ 847 | } 848 | 849 | .blog-logo img { 850 | -webkit-box-sizing: border-box; 851 | -moz-box-sizing: border-box; 852 | box-sizing: border-box; 853 | display: block; 854 | height: 38px; 855 | padding: 1px 0 5px 0; 856 | width: auto; 857 | } 858 | 859 | .menu-button { 860 | -webkit-box-sizing: border-box; 861 | -moz-box-sizing: border-box; 862 | box-sizing: border-box; 863 | display: inline-block; 864 | float: right; 865 | height: 38px; 866 | padding: 0 15px; 867 | border-style: solid; 868 | border-width: 1px; 869 | opacity: 1; 870 | text-align: center; 871 | font-size: 12px; 872 | text-transform: uppercase; 873 | line-height: 35px; 874 | white-space: nowrap; 875 | border-radius: 3px; 876 | transition: all 0.5s ease; 877 | } 878 | .menu-button:before { 879 | font-size: 12px; 880 | font-weight: bold; 881 | margin-right: 6px; 882 | position: relative; 883 | top: 1px; 884 | } 885 | .menu-button:hover { 886 | background: #fff; 887 | } 888 | .menu-button:focus { 889 | outline: 0; 890 | } 891 | 892 | /* When the navigation is closed */ 893 | .nav-closed .menu-button { 894 | color: #fff; 895 | border-color: rgba(255, 255, 255, 0.6); 896 | } 897 | .nav-closed .menu-button:hover { 898 | color: #222; 899 | } 900 | 901 | /* When the navigation is closed and there is no cover image */ 902 | .nav-closed .no-cover .menu-button { 903 | border-color: #BFC8CD; 904 | color: #9EABB3; 905 | } 906 | .nav-closed .no-cover .menu-button:hover { 907 | border-color: #555; 908 | color: #555; 909 | } 910 | 911 | /* When the navigation is opened */ 912 | .nav-opened .menu-button { 913 | padding: 0 12px; 914 | background: #111; 915 | border-color: #111; 916 | color: #fff; 917 | -webkit-transform: translate3D(94px, 0, 0); 918 | -ms-transform: translate3D(94px, 0, 0); 919 | transform: translate3D(94px, 0, 0); 920 | transition: all 0.3s ease; 921 | } 922 | 923 | .nav-opened .menu-button .word { 924 | opacity: 0; 925 | transition: all 0.3s ease; 926 | } 927 | 928 | /* Special styles when overlaid on an image*/ 929 | .main-nav.overlay { 930 | position: absolute; 931 | top: 0; 932 | left: 0; 933 | right: 0; 934 | height: 70px; 935 | border: none; 936 | background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); 937 | } 938 | .no-cover .main-nav.overlay { 939 | background: none; 940 | } 941 | 942 | /* The details of your blog. Defined in ghost/settings/ */ 943 | .page-title { 944 | margin: 10px 0 10px 0; 945 | font-size: 5rem; 946 | letter-spacing: -1px; 947 | font-weight: 700; 948 | font-family: "Open Sans", sans-serif; 949 | color: #fff; 950 | } 951 | 952 | .page-description { 953 | margin: 0; 954 | font-size: 2rem; 955 | line-height: 1.5em; 956 | font-weight: 400; 957 | font-family: "Merriweather", serif; 958 | letter-spacing: 0.01rem; 959 | color: rgba(255,255,255,0.8); 960 | } 961 | 962 | .no-cover.main-header { 963 | min-height: 160px; 964 | max-height: 40vh; 965 | background: #f5f8fa; 966 | } 967 | 968 | .no-cover .page-title { 969 | color: rgba(0,0,0,0.8); 970 | } 971 | 972 | .no-cover .page-description { 973 | color: rgba(0,0,0,0.5); 974 | } 975 | 976 | /* Add subtle load-in animation for content on the home page */ 977 | .home-template .page-title { 978 | -webkit-animation: fade-in-down 0.6s; 979 | animation: fade-in-down 0.6s; 980 | -webkit-animation-delay: 0.2s; 981 | animation-delay: 0.2s; 982 | } 983 | .home-template .page-description { 984 | -webkit-animation: fade-in-down 0.9s; 985 | animation: fade-in-down 0.9s; 986 | -webkit-animation-delay: 0.1s; 987 | animation-delay: 0.1s; 988 | } 989 | 990 | /* Every post, on every page, gets this style on its
tag */ 991 | .post { 992 | position: relative; 993 | width: 80%; 994 | max-width: 710px; 995 | margin: 4rem auto; 996 | padding-bottom: 4rem; 997 | border-bottom: #EBF2F6 1px solid; 998 | word-wrap: break-word; 999 | } 1000 | 1001 | /* Add a little circle in the middle of the border-bottom on our .post 1002 | just for the lolz and stylepoints. */ 1003 | .post:after { 1004 | display: block; 1005 | content: ""; 1006 | width: 7px; 1007 | height: 7px; 1008 | border: #E7EEF2 1px solid; 1009 | position: absolute; 1010 | bottom: -5px; 1011 | left: 50%; 1012 | margin-left: -5px; 1013 | background: #FFF; 1014 | border-radius: 100%; 1015 | box-shadow: #FFF 0 0 0 5px; 1016 | } 1017 | 1018 | body:not(.post-template) .post-title { 1019 | font-size: 3.6rem; 1020 | } 1021 | 1022 | .post-title a { 1023 | text-decoration: none; 1024 | } 1025 | 1026 | .post-excerpt p { 1027 | margin: 0; 1028 | font-size: 0.9em; 1029 | line-height: 1.7em; 1030 | } 1031 | 1032 | .read-more { 1033 | text-decoration: none; 1034 | } 1035 | 1036 | .post-meta { 1037 | display: block; 1038 | margin: 1.75rem 0 0 0; 1039 | font-family: "Open Sans", sans-serif; 1040 | font-size: 1.5rem; 1041 | line-height: 2.2rem; 1042 | color: #9EABB3; 1043 | } 1044 | 1045 | .author-thumb { 1046 | width: 24px; 1047 | height: 24px; 1048 | float: left; 1049 | margin-right: 9px; 1050 | border-radius: 100%; 1051 | } 1052 | 1053 | .post-meta a { 1054 | color: #9EABB3; 1055 | text-decoration: none; 1056 | } 1057 | 1058 | .post-meta a:hover { 1059 | text-decoration: underline; 1060 | } 1061 | 1062 | .user-meta { 1063 | position: relative; 1064 | padding: 0.3rem 40px 0 100px; 1065 | min-height: 77px; 1066 | } 1067 | 1068 | .post-date { 1069 | display: inline-block; 1070 | margin-left: 8px; 1071 | padding-left: 12px; 1072 | border-left: #d5dbde 1px solid; 1073 | text-transform: uppercase; 1074 | font-size: 1.3rem; 1075 | white-space: nowrap; 1076 | } 1077 | 1078 | .user-image { 1079 | position: absolute; 1080 | top: 0; 1081 | left: 0; 1082 | } 1083 | 1084 | .user-name { 1085 | display: block; 1086 | font-weight: 700; 1087 | } 1088 | 1089 | .user-bio { 1090 | display: block; 1091 | max-width: 440px; 1092 | font-size: 1.4rem; 1093 | line-height: 1.5em; 1094 | } 1095 | 1096 | .publish-meta { 1097 | position: absolute; 1098 | top: 0; 1099 | right: 0; 1100 | padding: 4.3rem 0 4rem 0; 1101 | text-align: right; 1102 | } 1103 | 1104 | .publish-heading { 1105 | display: block; 1106 | font-weight: 700; 1107 | } 1108 | 1109 | .publish-date { 1110 | display: block; 1111 | font-size: 1.4rem; 1112 | line-height: 1.5em; 1113 | } 1114 | 1115 | 1116 | /* ========================================================================== 1117 | 5. Single Post - When you click on an individual post 1118 | ========================================================================== */ 1119 | 1120 | .post-template .post-header { 1121 | margin-bottom: 3.4rem; 1122 | } 1123 | 1124 | .post-template .post-title { 1125 | margin-bottom: 0; 1126 | } 1127 | 1128 | .post-template .post-meta { 1129 | margin: 0; 1130 | } 1131 | 1132 | .post-template .post-date { 1133 | padding: 0; 1134 | margin: 0; 1135 | border: none; 1136 | } 1137 | 1138 | /* Stop elements, such as img wider than the post content, from 1139 | creating horizontal scroll - slight hack due to imperfections 1140 | with browser width % calculations and rounding */ 1141 | .post-template .content { 1142 | overflow: hidden; 1143 | } 1144 | 1145 | /* Tweak the .post wrapper style */ 1146 | .post-template .post { 1147 | margin-top: 0; 1148 | border-bottom: none; 1149 | padding-bottom: 0; 1150 | } 1151 | 1152 | /* Kill that stylish little circle that was on the border, too */ 1153 | .post-template .post:after { 1154 | display: none; 1155 | } 1156 | 1157 | /* Keep images centered, and allow images wider than the main 1158 | text column to break out. */ 1159 | .post-content img { 1160 | display: block; 1161 | max-width: 126%; 1162 | height: auto; 1163 | padding: 0.6em 0; 1164 | /* Centers an image by (1) pushing its left edge to the 1165 | center of its container and (2) shifting the entire image 1166 | in the opposite direction by half its own width. 1167 | Works for images that are larger than their containers. */ 1168 | position: relative; 1169 | left: 50%; 1170 | -webkit-transform: translateX(-50%); /* for Safari and iOS */ 1171 | -ms-transform: translateX(-50%); /* for IE9 */ 1172 | transform: translateX(-50%); 1173 | } 1174 | 1175 | .footnotes { 1176 | font-style: italic; 1177 | font-size: 1.3rem; 1178 | line-height: 1.6em; 1179 | } 1180 | 1181 | .footnotes li { 1182 | margin: 0.6rem 0; 1183 | } 1184 | 1185 | .footnotes p { 1186 | margin: 0; 1187 | } 1188 | 1189 | .footnotes p a:last-child { 1190 | text-decoration: none; 1191 | } 1192 | 1193 | 1194 | /* The author credit area after the post */ 1195 | .post-footer { 1196 | position: relative; 1197 | margin: 6rem 0 0 0; 1198 | padding: 3rem 0 0 0; 1199 | border-top: #EBF2F6 1px solid; 1200 | } 1201 | 1202 | .post-footer h4 { 1203 | font-size: 1.8rem; 1204 | margin: 0; 1205 | } 1206 | 1207 | .post-footer p { 1208 | margin: 1rem 0; 1209 | font-size: 1.4rem; 1210 | line-height: 1.75em; 1211 | } 1212 | 1213 | /* list of author links - location / url */ 1214 | .author-meta { 1215 | padding: 0; 1216 | margin: 0; 1217 | list-style: none; 1218 | font-size: 1.4rem; 1219 | line-height: 1; 1220 | font-style: italic; 1221 | color: #9EABB3; 1222 | } 1223 | 1224 | .author-meta a { 1225 | color: #9EABB3; 1226 | } 1227 | .author-meta a:hover { 1228 | color: #111; 1229 | } 1230 | 1231 | /* Create some space to the right for the share links */ 1232 | .post-footer .author { 1233 | margin-right: 180px; 1234 | } 1235 | 1236 | .post-footer h4 a { 1237 | color: #2e2e2e; 1238 | text-decoration: none; 1239 | } 1240 | 1241 | .post-footer h4 a:hover { 1242 | text-decoration: underline; 1243 | } 1244 | 1245 | /* Drop the share links in the space to the right. 1246 | Doing it like this means it's easier for the author bio 1247 | to be flexible at smaller screen sizes while the share 1248 | links remain at a fixed width the whole time */ 1249 | .post-footer .share { 1250 | position: absolute; 1251 | top: 3rem; 1252 | right: 0; 1253 | width: 140px; 1254 | } 1255 | 1256 | .post-footer .share a { 1257 | font-size: 1.8rem; 1258 | display: inline-block; 1259 | margin: 1rem 1.6rem 1.6rem 0; 1260 | color: #BBC7CC; 1261 | text-decoration: none; 1262 | } 1263 | 1264 | .post-footer .share .icon-twitter:hover { 1265 | color: #55acee; 1266 | } 1267 | .post-footer .share .icon-facebook:hover { 1268 | color: #3b5998; 1269 | } 1270 | .post-footer .share .icon-google-plus:hover { 1271 | color: #dd4b39; 1272 | } 1273 | 1274 | 1275 | /* ========================================================================== 1276 | 6. Author profile 1277 | ========================================================================== */ 1278 | 1279 | .post-head.main-header { 1280 | height: 65vh; 1281 | min-height: 180px; 1282 | } 1283 | 1284 | .no-cover.post-head.main-header { 1285 | height: 85px; 1286 | min-height: 0; 1287 | margin-bottom: 0; 1288 | background: transparent; 1289 | } 1290 | 1291 | .tag-head.main-header { 1292 | height: 40vh; 1293 | min-height: 180px; 1294 | } 1295 | 1296 | .author-head.main-header { 1297 | height: 40vh; 1298 | min-height: 180px; 1299 | } 1300 | 1301 | .no-cover.author-head.main-header { 1302 | height: 10vh; 1303 | min-height: 100px; 1304 | background: transparent; 1305 | } 1306 | 1307 | .author-profile { 1308 | padding: 0 15px 5rem 15px; 1309 | border-bottom: #EBF2F6 1px solid; 1310 | text-align: center; 1311 | } 1312 | 1313 | /* Add a little circle in the middle of the border-bottom */ 1314 | .author-profile:after { 1315 | display: block; 1316 | content: ""; 1317 | width: 7px; 1318 | height: 7px; 1319 | border: #E7EEF2 1px solid; 1320 | position: absolute; 1321 | bottom: -5px; 1322 | left: 50%; 1323 | margin-left: -5px; 1324 | background: #FFF; 1325 | border-radius: 100%; 1326 | box-shadow: #FFF 0 0 0 5px; 1327 | } 1328 | 1329 | .author-image { 1330 | -webkit-box-sizing: border-box; 1331 | -moz-box-sizing: border-box; 1332 | box-sizing: border-box; 1333 | display: block; 1334 | position: absolute; 1335 | top: -40px; 1336 | left: 50%; 1337 | margin-left: -40px; 1338 | width: 80px; 1339 | height: 80px; 1340 | border-radius: 100%; 1341 | overflow: hidden; 1342 | padding: 6px; 1343 | background: #fff; 1344 | z-index: 2; 1345 | box-shadow: #E7EEF2 0 0 0 1px; 1346 | } 1347 | 1348 | .author-image .img { 1349 | position: relative; 1350 | display: block; 1351 | width: 100%; 1352 | height: 100%; 1353 | background-size: cover; 1354 | background-position: center center; 1355 | border-radius: 100%; 1356 | } 1357 | 1358 | .author-profile .author-image { 1359 | position: relative; 1360 | left: auto; 1361 | top: auto; 1362 | width: 120px; 1363 | height: 120px; 1364 | padding: 3px; 1365 | margin: -100px auto 0 auto; 1366 | box-shadow: none; 1367 | } 1368 | 1369 | .author-title { 1370 | margin: 1.5rem 0 1rem; 1371 | } 1372 | 1373 | .author-bio { 1374 | font-size: 1.8rem; 1375 | line-height: 1.5em; 1376 | font-weight: 200; 1377 | color: #50585D; 1378 | letter-spacing: 0; 1379 | text-indent: 0; 1380 | } 1381 | 1382 | .author-meta { 1383 | margin: 1.6rem 0; 1384 | } 1385 | /* Location, website, and link */ 1386 | .author-profile .author-meta { 1387 | margin: 2rem 0; 1388 | font-family: "Merriweather", serif; 1389 | letter-spacing: 0.01rem; 1390 | font-size: 1.7rem; 1391 | } 1392 | .author-meta span { 1393 | display: inline-block; 1394 | margin: 0 2rem 1rem 0; 1395 | word-wrap: break-word; 1396 | } 1397 | .author-meta a { 1398 | text-decoration: none; 1399 | } 1400 | 1401 | /* Turn off meta for page2+ to make room for extra 1402 | pagination prev/next links */ 1403 | .archive-template .author-profile .author-meta { 1404 | display: none; 1405 | } 1406 | 1407 | 1408 | /* ========================================================================== 1409 | 7. Read More - Next/Prev Post Links 1410 | ========================================================================== */ 1411 | 1412 | .read-next { 1413 | display: -webkit-box; 1414 | display: -webkit-flex; 1415 | display: -ms-flexbox; 1416 | display: flex; 1417 | -webkit-box-align: stretch; 1418 | -webkit-align-items: stretch; 1419 | -ms-flex-align: stretch; 1420 | align-items: stretch; 1421 | margin-top: 10rem; 1422 | } 1423 | 1424 | .read-next-story { 1425 | display: -webkit-box; 1426 | display: -webkit-flex; 1427 | display: -ms-flexbox; 1428 | display: flex; 1429 | -webkit-box-flex: 1; 1430 | -webkit-flex-grow: 1; 1431 | -ms-flex-positive: 1; 1432 | flex-grow: 1; 1433 | min-width: 50%; 1434 | text-decoration: none; 1435 | position: relative; 1436 | text-align: center; 1437 | color: #fff; 1438 | background: #222 no-repeat center center; 1439 | background-size: cover; 1440 | overflow: hidden; 1441 | } 1442 | .read-next-story:hover:before { 1443 | background: rgba(0,0,0,0.8); 1444 | transition: all 0.2s ease; 1445 | } 1446 | .read-next-story:hover .post:before { 1447 | color: #222; 1448 | background: #fff; 1449 | transition: all 0.2s ease; 1450 | } 1451 | 1452 | .read-next-story:before { 1453 | content: ""; 1454 | display: block; 1455 | position: absolute; 1456 | top: 0; 1457 | right: 0; 1458 | bottom: 0; 1459 | left: 0; 1460 | background: rgba(0,0,0,0.7); 1461 | transition: all 0.5s ease; 1462 | } 1463 | 1464 | .read-next-story .post { 1465 | padding-top: 6rem; 1466 | padding-bottom: 6rem; 1467 | } 1468 | 1469 | .read-next-story .post:before { 1470 | content: "Read This Next"; 1471 | padding: 4px 10px 5px; 1472 | text-transform: uppercase; 1473 | font-size: 1.1rem; 1474 | font-family: "Open Sans", sans-serif; 1475 | color: rgba(255,255,255,0.8); 1476 | border: rgba(255,255,255,0.5) 1px solid; 1477 | border-radius: 4px; 1478 | transition: all 0.5s ease; 1479 | } 1480 | .read-next-story.prev .post:before { 1481 | content: "You Might Enjoy"; 1482 | } 1483 | 1484 | .read-next-story h2 { 1485 | margin-top: 1rem; 1486 | color: #fff; 1487 | } 1488 | 1489 | .read-next-story p { 1490 | margin: 0; 1491 | color: rgba(255,255,255,0.8); 1492 | } 1493 | 1494 | /* Special styles for posts with no cover images */ 1495 | .read-next-story.no-cover { 1496 | background: #f5f8fa; 1497 | } 1498 | 1499 | .read-next-story.no-cover:before { 1500 | display: none; 1501 | } 1502 | 1503 | .read-next-story.no-cover .post:before { 1504 | color: rgba(0,0,0,0.5); 1505 | border-color: rgba(0,0,0,0.2); 1506 | } 1507 | 1508 | .read-next-story.no-cover h2 { 1509 | color: rgba(0,0,0,0.8); 1510 | } 1511 | 1512 | .read-next-story.no-cover p { 1513 | color: rgba(0,0,0,0.5); 1514 | } 1515 | 1516 | /* if there are two posts without covers, put a border between them */ 1517 | .read-next-story.no-cover + .read-next-story.no-cover { 1518 | border-left: rgba(0,0,100,0.04) 1px solid; 1519 | -webkit-box-sizing: border-box; 1520 | -moz-box-sizing: border-box; 1521 | box-sizing: border-box; 1522 | } 1523 | 1524 | /* Correctly position site-footer when next to the .read-next container */ 1525 | .read-next + .site-footer { 1526 | position: absolute; 1527 | bottom: 0; 1528 | left: 0; 1529 | right: 0; 1530 | margin: 0; 1531 | } 1532 | 1533 | /* ========================================================================== 1534 | 8. Third Party Elements - Embeds from other services 1535 | ========================================================================== */ 1536 | 1537 | /* Github */ 1538 | .gist table { 1539 | margin: 0; 1540 | font-size: 1.4rem; 1541 | text-rendering: auto; 1542 | } 1543 | .gist td { 1544 | line-height: 1.4; 1545 | } 1546 | .gist .line-number { 1547 | min-width: 25px; 1548 | } 1549 | 1550 | /* Pastebin */ 1551 | .content .embedPastebin { 1552 | margin-bottom: 1.75em; 1553 | } 1554 | 1555 | 1556 | /* ========================================================================== 1557 | 9. Pagination - Tools to let you flick between pages 1558 | ========================================================================== */ 1559 | 1560 | /* The main wrapper for our pagination links */ 1561 | .pagination { 1562 | position: relative; 1563 | width: 80%; 1564 | max-width: 710px; 1565 | margin: 4rem auto; 1566 | font-family: "Open Sans", sans-serif; 1567 | font-size: 1.3rem; 1568 | color: #9EABB3; 1569 | text-align: center; 1570 | } 1571 | 1572 | .pagination a { 1573 | color: #9EABB3; 1574 | transition: all 0.2s ease; 1575 | } 1576 | 1577 | /* Push the previous/next links out to the left/right */ 1578 | .older-posts, 1579 | .newer-posts { 1580 | position: absolute; 1581 | display: inline-block; 1582 | padding: 0 15px; 1583 | border: #bfc8cd 1px solid; 1584 | text-decoration: none; 1585 | border-radius: 4px; 1586 | transition: border 0.3s ease; 1587 | } 1588 | 1589 | .older-posts { 1590 | right: 0; 1591 | } 1592 | 1593 | .page-number { 1594 | display: inline-block; 1595 | padding: 2px 0; 1596 | min-width: 100px; 1597 | } 1598 | 1599 | .newer-posts { 1600 | left: 0; 1601 | } 1602 | 1603 | .older-posts:hover, 1604 | .newer-posts:hover { 1605 | color: #889093; 1606 | border-color: #98a0a4; 1607 | } 1608 | 1609 | .extra-pagination { 1610 | display: none; 1611 | border-bottom: #EBF2F6 1px solid; 1612 | } 1613 | .extra-pagination:after { 1614 | display: block; 1615 | content: ""; 1616 | width: 7px; 1617 | height: 7px; 1618 | border: #E7EEF2 1px solid; 1619 | position: absolute; 1620 | bottom: -5px; 1621 | left: 50%; 1622 | margin-left: -5px; 1623 | background: #FFF; 1624 | border-radius: 100%; 1625 | box-shadow: #FFF 0 0 0 5px; 1626 | } 1627 | .extra-pagination .pagination { 1628 | width: auto; 1629 | } 1630 | 1631 | /* On page2+ make all the headers smaller */ 1632 | .archive-template .main-header { 1633 | max-height: 30vh; 1634 | } 1635 | 1636 | /* On page2+ show extra pagination controls at the top of post list */ 1637 | .archive-template .extra-pagination { 1638 | display: block; 1639 | } 1640 | 1641 | 1642 | /* ========================================================================== 1643 | 10. Subscribe - Generate those email subscribers 1644 | ========================================================================== */ 1645 | 1646 | .gh-subscribe { 1647 | border: #e7eef2 1px solid; 1648 | padding: 3rem; 1649 | margin-top: 3rem; 1650 | text-align: center; 1651 | background: #f5f8fa; 1652 | border-radius: 5px; 1653 | } 1654 | 1655 | .gh-subscribe-title { 1656 | margin-bottom: 0; 1657 | font-size: 2.4rem 1658 | } 1659 | 1660 | .gh-subscribe p { 1661 | margin-top: 0; 1662 | font-size: 1.5rem; 1663 | } 1664 | 1665 | .gh-subscribe form { 1666 | display: flex; 1667 | justify-content: center; 1668 | margin: 20px 0 0 0; 1669 | } 1670 | 1671 | .gh-subscribe .form-group { 1672 | flex-grow: 1; 1673 | max-width: 300px; 1674 | } 1675 | 1676 | .gh-subscribe .subscribe-email { 1677 | box-sizing: border-box; 1678 | width: 100%; 1679 | margin: 0; 1680 | border-radius: 4px 0 0 4px; 1681 | transition: all ease 0.5s; 1682 | } 1683 | 1684 | .gh-subscribe .subscribe-email:focus { 1685 | border: #5ba4e5 1px solid; 1686 | transition: all ease 0.2s; 1687 | } 1688 | 1689 | .gh-subscribe button { 1690 | margin-left: -1px; 1691 | border-radius: 0 4px 4px 0; 1692 | } 1693 | 1694 | .gh-subscribe-rss { 1695 | font-family: 'Open Sans', sans-serif; 1696 | font-size: 1.2rem; 1697 | line-height: 1.4em; 1698 | } 1699 | 1700 | /* ========================================================================== 1701 | 11. Footer - The bottom of every page 1702 | ========================================================================== */ 1703 | 1704 | .site-footer { 1705 | position: relative; 1706 | margin: 8rem 0 0 0; 1707 | padding: 1rem 15px; 1708 | font-family: "Open Sans", sans-serif; 1709 | font-size: 1rem; 1710 | line-height: 1.75em; 1711 | color: #BBC7CC; 1712 | } 1713 | 1714 | .site-footer a { 1715 | color: #BBC7CC; 1716 | text-decoration: none; 1717 | font-weight: bold; 1718 | } 1719 | 1720 | .site-footer a:hover { 1721 | border-bottom: #bbc7cc 1px solid; 1722 | } 1723 | 1724 | .poweredby { 1725 | display: block; 1726 | width: 45%; 1727 | float: right; 1728 | text-align: right; 1729 | } 1730 | 1731 | .copyright { 1732 | display: block; 1733 | width: 45%; 1734 | float: left; 1735 | } 1736 | 1737 | 1738 | /* ========================================================================== 1739 | 12. Media Queries - Smaller than 900px 1740 | ========================================================================== */ 1741 | 1742 | @media only screen and (max-width: 900px) { 1743 | 1744 | blockquote { 1745 | margin-left: 0; 1746 | } 1747 | 1748 | .main-header { 1749 | -webkit-box-sizing: border-box; 1750 | -moz-box-sizing: border-box; 1751 | box-sizing: border-box; 1752 | height: auto; 1753 | min-height: 240px; 1754 | height: 60vh; 1755 | padding: 15% 0; 1756 | } 1757 | 1758 | .scroll-down, 1759 | .home-template .main-header:after { display: none; } 1760 | 1761 | .archive-template .main-header { 1762 | min-height: 180px; 1763 | padding: 10% 0; 1764 | } 1765 | 1766 | .blog-logo img { 1767 | padding: 4px 0; 1768 | } 1769 | 1770 | .page-title { 1771 | font-size: 4rem; 1772 | letter-spacing: -1px; 1773 | } 1774 | 1775 | .page-description { 1776 | font-size: 1.8rem; 1777 | line-height: 1.5em; 1778 | } 1779 | 1780 | .post { 1781 | font-size: 0.95em 1782 | } 1783 | 1784 | body:not(.post-template) .post-title { 1785 | font-size: 3.2rem; 1786 | } 1787 | 1788 | hr { 1789 | margin: 2.4em 0; 1790 | } 1791 | 1792 | ol, ul { 1793 | padding-left: 2em; 1794 | } 1795 | 1796 | h1 { 1797 | font-size: 4.5rem; 1798 | text-indent: -2px; 1799 | } 1800 | 1801 | h2 { 1802 | font-size: 3.6rem; 1803 | } 1804 | 1805 | h3 { 1806 | font-size: 3.1rem; 1807 | } 1808 | 1809 | h4 { 1810 | font-size: 2.5rem; 1811 | } 1812 | 1813 | h5 { 1814 | font-size: 2.2rem; 1815 | } 1816 | 1817 | h6 { 1818 | font-size: 1.8rem; 1819 | } 1820 | 1821 | .author-profile { 1822 | padding-bottom: 4rem; 1823 | } 1824 | 1825 | .author-profile .author-bio { 1826 | font-size: 1.6rem; 1827 | } 1828 | 1829 | .author-meta span { 1830 | display: block; 1831 | margin: 1.5rem 0; 1832 | } 1833 | .author-profile .author-meta span { 1834 | font-size: 1.6rem; 1835 | } 1836 | 1837 | .post-head.main-header { 1838 | height:45vh; 1839 | } 1840 | 1841 | .tag-head.main-header, 1842 | .author-head.main-header { 1843 | height: 30vh; 1844 | } 1845 | 1846 | .no-cover.post-head.main-header { 1847 | height: 55px; 1848 | padding: 0; 1849 | } 1850 | 1851 | .no-cover.author-head.main-header { 1852 | padding: 0; 1853 | } 1854 | 1855 | .gh-subscribe { 1856 | padding: 2rem; 1857 | } 1858 | 1859 | .gh-subscribe-title { 1860 | font-size: 2rem 1861 | } 1862 | 1863 | .gh-subscribe p { 1864 | font-size: 1.4rem; 1865 | } 1866 | 1867 | .read-next { 1868 | -webkit-box-orient: vertical; 1869 | -webkit-box-direction: normal; 1870 | -webkit-flex-direction: column; 1871 | -ms-flex-direction: column; 1872 | flex-direction: column; 1873 | margin-top: 4rem; 1874 | } 1875 | 1876 | .read-next p { 1877 | display: none; 1878 | } 1879 | 1880 | .read-next-story.no-cover + .read-next-story.no-cover { 1881 | border-top: rgba(0,0,100,0.06) 1px solid; 1882 | border-left: none; 1883 | } 1884 | 1885 | } 1886 | 1887 | 1888 | /* ========================================================================== 1889 | 13. Media Queries - Smaller than 500px 1890 | ========================================================================== */ 1891 | 1892 | @media only screen and (max-width: 500px) { 1893 | 1894 | .main-header { 1895 | margin-bottom: 15px; 1896 | height: 40vh; 1897 | } 1898 | 1899 | .no-cover.main-header { 1900 | height: 30vh; 1901 | } 1902 | 1903 | .archive-template .main-header { 1904 | max-height: 20vh; 1905 | min-height: 160px; 1906 | padding: 10% 0; 1907 | } 1908 | 1909 | .main-nav { 1910 | padding: 5px; 1911 | margin-bottom: 2rem; 1912 | } 1913 | 1914 | .blog-logo { 1915 | padding: 5px; 1916 | } 1917 | 1918 | .blog-logo img { 1919 | height: 30px; 1920 | } 1921 | 1922 | .menu-button { 1923 | padding: 0 5px; 1924 | border-radius: 0; 1925 | border-width: 0; 1926 | color: #2e2e2e; 1927 | background: transparent; 1928 | } 1929 | .menu-button:hover { 1930 | color: #2e2e2e; 1931 | border-color: transparent; 1932 | background: none; 1933 | } 1934 | body.nav-opened .menu-button { 1935 | background: none; 1936 | border: transparent; 1937 | } 1938 | 1939 | .main-nav.overlay a:hover { 1940 | color: #fff; 1941 | border-color: transparent; 1942 | background: transparent; 1943 | } 1944 | 1945 | .no-cover .main-nav.overlay { 1946 | background: none; 1947 | } 1948 | .no-cover .main-nav.overlay .menu-button { 1949 | border: none; 1950 | } 1951 | 1952 | .main-nav.overlay .menu-button { 1953 | border-color: transparent; 1954 | } 1955 | 1956 | .nav-title { 1957 | top: 25px; 1958 | 1959 | } 1960 | 1961 | .nav-close { 1962 | position: absolute; 1963 | top: 18px; 1964 | } 1965 | 1966 | .nav ul { 1967 | padding: 60px 9% 5%; 1968 | } 1969 | 1970 | .inner, 1971 | .pagination { 1972 | width: auto; 1973 | margin: 2rem auto; 1974 | } 1975 | 1976 | .post { 1977 | width: auto; 1978 | margin-top: 2rem; 1979 | margin-bottom: 2rem; 1980 | margin-left: 16px; 1981 | margin-right: 16px; 1982 | padding-bottom: 2rem; 1983 | line-height: 1.65em; 1984 | } 1985 | 1986 | .post-date { 1987 | display: none; 1988 | } 1989 | 1990 | .post-template .post-header { 1991 | margin-bottom: 2rem; 1992 | } 1993 | 1994 | .post-template .post-date { 1995 | display: inline-block; 1996 | } 1997 | 1998 | hr { 1999 | margin: 1.75em 0; 2000 | } 2001 | 2002 | p, ul, ol, dl { 2003 | font-size: 0.95em; 2004 | margin: 0 0 2.5rem 0; 2005 | } 2006 | 2007 | .page-title { 2008 | font-size: 3rem; 2009 | } 2010 | 2011 | .post-excerpt p { 2012 | font-size: 0.85em; 2013 | } 2014 | 2015 | .page-description { 2016 | font-size: 1.6rem; 2017 | } 2018 | 2019 | h1, h2, h3, 2020 | h4, h5, h6 { 2021 | margin: 0 0 0.3em 0; 2022 | } 2023 | 2024 | h1 { 2025 | font-size: 2.8rem; 2026 | letter-spacing: -1px; 2027 | } 2028 | 2029 | h2 { 2030 | font-size: 2.4rem; 2031 | letter-spacing: 0; 2032 | } 2033 | 2034 | h3 { 2035 | font-size: 2.1rem; 2036 | } 2037 | 2038 | h4 { 2039 | font-size: 1.9rem; 2040 | } 2041 | 2042 | h5 { 2043 | font-size: 1.8rem; 2044 | } 2045 | 2046 | h6 { 2047 | font-size: 1.8rem; 2048 | } 2049 | 2050 | body:not(.post-template) .post-title { 2051 | font-size: 2.5rem; 2052 | } 2053 | 2054 | .post-template .site-footer { 2055 | margin-top: 0; 2056 | } 2057 | 2058 | .post-content img { 2059 | padding: 0; 2060 | width: calc(100% + 32px); /* expand with to image + margins */ 2061 | min-width: 0; 2062 | max-width: 112%; /* fallback when calc doesn't work */ 2063 | } 2064 | 2065 | .post-meta { 2066 | font-size: 1.3rem; 2067 | margin-top: 1rem; 2068 | } 2069 | 2070 | .post-footer { 2071 | padding: 5rem 0 3rem 0; 2072 | text-align: center; 2073 | } 2074 | 2075 | .post-footer .author { 2076 | margin: 0 0 2rem 0; 2077 | padding: 0 0 1.6rem 0; 2078 | border-bottom: #EBF2F6 1px dashed; 2079 | } 2080 | 2081 | .post-footer .share { 2082 | position: static; 2083 | width: auto; 2084 | } 2085 | 2086 | .post-footer .share a { 2087 | margin: 1.4rem 0.8rem 0 0.8rem; 2088 | } 2089 | 2090 | .author-meta li { 2091 | float: none; 2092 | margin: 0; 2093 | line-height: 1.75em; 2094 | } 2095 | 2096 | .author-meta li:before { 2097 | display: none; 2098 | } 2099 | 2100 | .older-posts, 2101 | .newer-posts { 2102 | position: static; 2103 | margin: 10px 0; 2104 | } 2105 | 2106 | .page-number { 2107 | display: block; 2108 | } 2109 | 2110 | .site-footer { 2111 | margin-top: 3rem; 2112 | } 2113 | 2114 | .author-profile { 2115 | padding-bottom: 2rem; 2116 | } 2117 | 2118 | .post-head.main-header { 2119 | height: 30vh; 2120 | } 2121 | 2122 | .tag-head.main-header, 2123 | .author-head.main-header { 2124 | height: 20vh; 2125 | } 2126 | 2127 | .post-footer .author-image { 2128 | top: -60px; 2129 | } 2130 | 2131 | .author-profile .author-image { 2132 | margin-top: -70px; 2133 | } 2134 | 2135 | .author-profile .author-meta span { 2136 | font-size: 1.4rem; 2137 | } 2138 | 2139 | .archive-template .main-header .page-description { 2140 | display: none; 2141 | } 2142 | 2143 | .gh-subscribe { 2144 | padding: 15px; 2145 | } 2146 | 2147 | .gh-subscribe form { 2148 | margin-top: 10px; 2149 | } 2150 | 2151 | .read-next { 2152 | margin-top: 2rem; 2153 | margin-bottom: -37px; 2154 | } 2155 | 2156 | .read-next .post { 2157 | width: 100%; 2158 | } 2159 | 2160 | } 2161 | 2162 | 2163 | /* ========================================================================== 2164 | 14. Animations 2165 | ========================================================================== */ 2166 | 2167 | /* Used to fade in title/desc on the home page */ 2168 | @-webkit-keyframes fade-in-down { 2169 | 0% { 2170 | opacity: 0; 2171 | -webkit-transform: translateY(-10px); 2172 | transform: translateY(-10px); 2173 | } 2174 | 100% { 2175 | opacity: 1; 2176 | -webkit-transform: translateY(0); 2177 | transform: translateY(0); 2178 | } 2179 | } 2180 | @keyframes fade-in-down { 2181 | 0% { 2182 | opacity: 0; 2183 | -webkit-transform: translateY(-10px); 2184 | transform: translateY(-10px); 2185 | } 2186 | 100% { 2187 | opacity: 1; 2188 | -webkit-transform: translateY(0); 2189 | transform: translateY(0); 2190 | } 2191 | } 2192 | 2193 | /* Used to bounce .scroll-down on home page */ 2194 | @-webkit-keyframes bounce { 2195 | 0%, 10%, 25%, 40%, 50% { 2196 | -webkit-transform: translateY(0) rotate(-90deg); 2197 | transform: translateY(0) rotate(-90deg); 2198 | } 2199 | 20% { 2200 | -webkit-transform: translateY(-10px) rotate(-90deg); 2201 | transform: translateY(-10px) rotate(-90deg); 2202 | } 2203 | 30% { 2204 | -webkit-transform: translateY(-5px) rotate(-90deg); 2205 | transform: translateY(-5px) rotate(-90deg); 2206 | } 2207 | } 2208 | @keyframes bounce { 2209 | 0%, 10%, 25%, 40%, 50% { 2210 | -webkit-transform: translateY(0) rotate(-90deg); 2211 | transform: translateY(0) rotate(-90deg); 2212 | } 2213 | 20% { 2214 | -webkit-transform: translateY(-10px) rotate(-90deg); 2215 | transform: translateY(-10px) rotate(-90deg); 2216 | } 2217 | 30% { 2218 | -webkit-transform: translateY(-5px) rotate(-90deg); 2219 | transform: translateY(-5px) rotate(-90deg); 2220 | } 2221 | } 2222 | 2223 | 2224 | /* ========================================================================== 2225 | End of file. Animations should be the last thing here. Do not add stuff 2226 | below this point, or it will probably fuck everything up. 2227 | ========================================================================== */ 2228 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/assets/fonts/casper-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joyofpw/wire-render-pattern/b8b6e62a87296ba5704c05f8ef21edb6613a1b97/examples/pw-ghost/templates/assets/fonts/casper-icons.eot -------------------------------------------------------------------------------- /examples/pw-ghost/templates/assets/fonts/casper-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/assets/fonts/casper-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joyofpw/wire-render-pattern/b8b6e62a87296ba5704c05f8ef21edb6613a1b97/examples/pw-ghost/templates/assets/fonts/casper-icons.ttf -------------------------------------------------------------------------------- /examples/pw-ghost/templates/assets/fonts/casper-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joyofpw/wire-render-pattern/b8b6e62a87296ba5704c05f8ef21edb6613a1b97/examples/pw-ghost/templates/assets/fonts/casper-icons.woff -------------------------------------------------------------------------------- /examples/pw-ghost/templates/assets/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main JS file for Casper behaviours 3 | */ 4 | 5 | /* globals jQuery, document */ 6 | (function ($, undefined) { 7 | "use strict"; 8 | 9 | var $document = $(document); 10 | 11 | $document.ready(function () { 12 | 13 | var $postContent = $(".post-content"); 14 | $postContent.fitVids(); 15 | 16 | $(".scroll-down").arctic_scroll(); 17 | 18 | $(".menu-button, .nav-cover, .nav-close").on("click", function(e){ 19 | e.preventDefault(); 20 | $("body").toggleClass("nav-opened nav-closed"); 21 | }); 22 | 23 | }); 24 | 25 | // Arctic Scroll by Paul Adam Davis 26 | // https://github.com/PaulAdamDavis/Arctic-Scroll 27 | $.fn.arctic_scroll = function (options) { 28 | 29 | var defaults = { 30 | elem: $(this), 31 | speed: 500 32 | }, 33 | 34 | allOptions = $.extend(defaults, options); 35 | 36 | allOptions.elem.click(function (event) { 37 | event.preventDefault(); 38 | var $this = $(this), 39 | $htmlBody = $('html, body'), 40 | offset = ($this.attr('data-offset')) ? $this.attr('data-offset') : false, 41 | position = ($this.attr('data-position')) ? $this.attr('data-position') : false, 42 | toMove; 43 | 44 | if (offset) { 45 | toMove = parseInt(offset); 46 | $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed); 47 | } else if (position) { 48 | toMove = parseInt(position); 49 | $htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed); 50 | } else { 51 | $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed); 52 | } 53 | }); 54 | 55 | }; 56 | })(jQuery); 57 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/assets/js/jquery.fitvids.js: -------------------------------------------------------------------------------- 1 | /*global jQuery */ 2 | /*jshint browser:true */ 3 | /*! 4 | * FitVids 1.1 5 | * 6 | * Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com 7 | * Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ 8 | * Released under the WTFPL license - http://sam.zoy.org/wtfpl/ 9 | * 10 | */ 11 | 12 | (function( $ ){ 13 | 14 | "use strict"; 15 | 16 | $.fn.fitVids = function( options ) { 17 | var settings = { 18 | customSelector: null 19 | }; 20 | 21 | if(!document.getElementById('fit-vids-style')) { 22 | // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js 23 | var head = document.head || document.getElementsByTagName('head')[0]; 24 | var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}'; 25 | var div = document.createElement('div'); 26 | div.innerHTML = '

x

'; 27 | head.appendChild(div.childNodes[1]); 28 | } 29 | 30 | if ( options ) { 31 | $.extend( settings, options ); 32 | } 33 | 34 | return this.each(function(){ 35 | var selectors = [ 36 | "iframe[src*='player.vimeo.com']", 37 | "iframe[src*='youtube.com']", 38 | "iframe[src*='youtube-nocookie.com']", 39 | "iframe[src*='kickstarter.com'][src*='video.html']", 40 | "object", 41 | "embed" 42 | ]; 43 | 44 | if (settings.customSelector) { 45 | selectors.push(settings.customSelector); 46 | } 47 | 48 | var $allVideos = $(this).find(selectors.join(',')); 49 | $allVideos = $allVideos.not("object object"); // SwfObj conflict patch 50 | 51 | $allVideos.each(function(){ 52 | var $this = $(this); 53 | if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } 54 | var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(), 55 | width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(), 56 | aspectRatio = height / width; 57 | if(!$this.attr('id')){ 58 | var videoID = 'fitvid' + Math.floor(Math.random()*999999); 59 | $this.attr('id', videoID); 60 | } 61 | $this.wrap('
').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%"); 62 | $this.removeAttr('height').removeAttr('width'); 63 | }); 64 | }); 65 | }; 66 | // Works with either jQuery or Zepto 67 | })( window.jQuery || window.Zepto ); 68 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/authors.php: -------------------------------------------------------------------------------- 1 | text(wire('input')->urlSegment(1)); 5 | 6 | $author = wire('pages')->get("template=user, nickname=$author"); 7 | 8 | if (empty($author) || ($author instanceof NullPage)) { 9 | throw new Wire404Exception(); 10 | } 11 | 12 | $totalPosts = wire('pages')->count("template=blog-item, author=$author"); 13 | 14 | $message = __('No posts'); 15 | 16 | if ($totalPosts > 0) { 17 | $message = sprintf(__('%d post'), $totalPosts); 18 | } 19 | 20 | if ($totalPosts > 1) { 21 | $message = sprintf(__('%d posts'), $totalPosts); 22 | } 23 | 24 | $cover = $author->get('cover'); 25 | 26 | if (empty($cover)) { 27 | $cover = new NullPage; 28 | } 29 | 30 | $params['cover'] = $cover->url; 31 | $params['blog_url'] = $blog_url; 32 | $params['logo'] = $blog_logo; 33 | $params['show_navigation'] = true; 34 | $params['type'] = 'author-head'; 35 | $params['show_scroll_down'] = false; 36 | 37 | 38 | $posts = $blog->children("template=blog-item, limit=$postsInAuthor, sort=-publishedAt, author=$author"); 39 | 40 | $blogBag['posts'] = $posts; 41 | $blogBag['pagination'] = $posts->renderPager(\Helpers\paginationOptions()); 42 | 43 | $bodyBag['header_params'] = $params; 44 | $bodyBag['totalPostsMessage'] = $message; 45 | $bodyBag['author'] = $author; 46 | $bodyBag['blog_params'] = $blogBag; 47 | 48 | $title = $author->fullname; 49 | 50 | $viewBag['body_class'] = 'author-template author-' . $author->name; 51 | $viewBag['canonical'] = $page->httpUrl . $author->name; 52 | 53 | $body = wireRenderFile('views/author_view', $bodyBag); 54 | 55 | $meta_description = $author->about; 56 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/basic-page.php: -------------------------------------------------------------------------------- 1 | url; 5 | $params['title'] = $page->title; 6 | $params['description'] = $page->about; 7 | $params['blog_url'] = $blog_url; 8 | $params['logo'] = $blog_logo; 9 | 10 | $params['show_navigation'] = true; 11 | $params['type'] = 'post-head'; 12 | $params['show_scroll_down'] = false; 13 | $params['show_vertical_info'] = false; 14 | 15 | $bodyBag['header_params'] = $params; 16 | 17 | $bodyBag['title'] = $title; 18 | $bodyBag['content'] = $page->content; 19 | 20 | $body = wireRenderFile('views/page_view', $bodyBag); 21 | 22 | $viewBag['body_class'] = 'post-template page-template page page-'. $page->name; 23 | 24 | $meta_description = $page->about; -------------------------------------------------------------------------------- /examples/pw-ghost/templates/blog-item.php: -------------------------------------------------------------------------------- 1 | url; 5 | $params['blog_url'] = $blog_url; 6 | $params['logo'] = $blog_logo; 7 | $params['show_navigation'] = true; 8 | $params['type'] = 'post-head'; 9 | $params['show_scroll_down'] = false; 10 | 11 | $bodyBag['header_params'] = $params; 12 | 13 | $bodyBag['blog_title'] = $blog_title; 14 | $bodyBag['blog_url'] = $blog_url; 15 | 16 | $bodyBag['title'] = $page->title; 17 | $bodyBag['date'] = $page->publishedAt; 18 | $bodyBag['tags'] = $page->tags; 19 | $bodyBag['content'] = $page->content; 20 | $bodyBag['class'] = ($page->class->name != '' ? $page->class->name : 'post'); 21 | $bodyBag['author'] = $page->author; 22 | $bodyBag['author_url'] = $authors->localHttpUrl($language) . $page->author->nickname; 23 | $bodyBag['url'] = $page->httpUrl; 24 | $bodyBag['encoded_title'] = urlencode($page->title); 25 | $bodyBag['rss_subscription'] = true; 26 | 27 | $has_siblings = ($page->siblings->count() > 0); 28 | 29 | if ($has_siblings) { 30 | 31 | $nextCover = $page->next->cover; 32 | 33 | if (empty($nextCover)) { 34 | $nextCover = new NullPage; 35 | } 36 | 37 | $bodyBag['next_title'] = $page->next->title; 38 | $bodyBag['next_excerpt'] = \Helpers\excerpt($page->next->content, 19); 39 | $bodyBag['next_cover'] = \Helpers\cover($nextCover->url); 40 | $bodyBag['next_url'] = $page->next->httpUrl; 41 | 42 | $prevCover = $page->prev->cover; 43 | 44 | if (empty($prevCover)) { 45 | $prevCover = new NullPage; 46 | } 47 | 48 | $bodyBag['prev_title'] = $page->prev->title; 49 | $bodyBag['prev_excerpt'] = \Helpers\excerpt($page->prev->content, 19); 50 | $bodyBag['prev_cover'] = \Helpers\cover($prevCover->url); 51 | $bodyBag['prev_url'] = $page->prev->httpUrl; 52 | 53 | $bodyBag['has_siblings'] = $has_siblings; 54 | } 55 | 56 | 57 | $body = wireRenderFile('views/post_view', $bodyBag); 58 | 59 | $headerBag[] = wireRenderFile('partials/header_bag/translate_buttons'); 60 | 61 | $viewBag['body_class'] = 'post-template'; 62 | 63 | $meta_description = \Helpers\excerpt($page->content, 20); 64 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/blog.php: -------------------------------------------------------------------------------- 1 | redirect($home->httpUrl); -------------------------------------------------------------------------------- /examples/pw-ghost/templates/helpers/background_cover.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/helpers/excerpt.php: -------------------------------------------------------------------------------- 1 | "\n\n", 7 | 'itemMarkup' => "{out}\n", 8 | 'linkMarkup' => "{out}\n", 9 | 'nextItemLabel' => \Processwire\__('Older Posts'), 10 | 'previousItemLabel' => \Processwire\__('Newer Posts'), 11 | 'nextItemClass' => 'older-posts', 12 | 'previousItemClass' => 'newer-posts', 13 | 'separatorItemClass' => 'pagination-separator', 14 | 'firstItemClass' => 'pagination-first-item', 15 | 'firstNumberItemClass' => 'page-number pagination-first-number-item', 16 | 'lastItemClass' => 'pagination-last-item', 17 | 'lastNumberItemClass' => 'page-number pagination-last-number-item', 18 | 'currentItemClass' => 'pagination-current-item' 19 | ]; 20 | } -------------------------------------------------------------------------------- /examples/pw-ghost/templates/home.php: -------------------------------------------------------------------------------- 1 | url; 5 | $params['title'] = $page->title; 6 | $params['description'] = $page->about; 7 | $params['blog_url'] = $blog_url; 8 | $params['logo'] = $blog_logo; 9 | 10 | $params['show_navigation'] = true; 11 | $params['type'] = ''; 12 | $params['show_scroll_down'] = true; 13 | $params['show_vertical_info'] = true; 14 | 15 | $bodyBag['header_params'] = $params; 16 | 17 | $posts = $blog->children("template=blog-item, limit=$postsInHome, sort=-publishedAt"); 18 | 19 | $blogBag['posts'] = $posts; 20 | $blogBag['pagination'] = $posts->renderPager(\Helpers\paginationOptions()); 21 | 22 | $bodyBag['blog_params'] = $blogBag; 23 | 24 | $body = wireRenderFile('views/home_view', $bodyBag); 25 | 26 | $viewBag['body_class'] = 'home-template'; 27 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013-2016 Ghost Foundation 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/README.md: -------------------------------------------------------------------------------- 1 | # Casper 2 | 3 | The default theme for [Ghost](http://github.com/tryghost/ghost/). 4 | 5 | To download, visit the [releases](https://github.com/TryGhost/Casper/releases) page. 6 | 7 | ## Copyright & License 8 | 9 | Copyright (c) 2013-2016 Ghost Foundation - Released under the MIT License. 10 | 11 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 16 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 17 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/assets/fonts/casper-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joyofpw/wire-render-pattern/b8b6e62a87296ba5704c05f8ef21edb6613a1b97/examples/pw-ghost/templates/html/casper/assets/fonts/casper-icons.eot -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/assets/fonts/casper-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/assets/fonts/casper-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joyofpw/wire-render-pattern/b8b6e62a87296ba5704c05f8ef21edb6613a1b97/examples/pw-ghost/templates/html/casper/assets/fonts/casper-icons.ttf -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/assets/fonts/casper-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joyofpw/wire-render-pattern/b8b6e62a87296ba5704c05f8ef21edb6613a1b97/examples/pw-ghost/templates/html/casper/assets/fonts/casper-icons.woff -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/assets/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main JS file for Casper behaviours 3 | */ 4 | 5 | /* globals jQuery, document */ 6 | (function ($, undefined) { 7 | "use strict"; 8 | 9 | var $document = $(document); 10 | 11 | $document.ready(function () { 12 | 13 | var $postContent = $(".post-content"); 14 | $postContent.fitVids(); 15 | 16 | $(".scroll-down").arctic_scroll(); 17 | 18 | $(".menu-button, .nav-cover, .nav-close").on("click", function(e){ 19 | e.preventDefault(); 20 | $("body").toggleClass("nav-opened nav-closed"); 21 | }); 22 | 23 | }); 24 | 25 | // Arctic Scroll by Paul Adam Davis 26 | // https://github.com/PaulAdamDavis/Arctic-Scroll 27 | $.fn.arctic_scroll = function (options) { 28 | 29 | var defaults = { 30 | elem: $(this), 31 | speed: 500 32 | }, 33 | 34 | allOptions = $.extend(defaults, options); 35 | 36 | allOptions.elem.click(function (event) { 37 | event.preventDefault(); 38 | var $this = $(this), 39 | $htmlBody = $('html, body'), 40 | offset = ($this.attr('data-offset')) ? $this.attr('data-offset') : false, 41 | position = ($this.attr('data-position')) ? $this.attr('data-position') : false, 42 | toMove; 43 | 44 | if (offset) { 45 | toMove = parseInt(offset); 46 | $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed); 47 | } else if (position) { 48 | toMove = parseInt(position); 49 | $htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed); 50 | } else { 51 | $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed); 52 | } 53 | }); 54 | 55 | }; 56 | })(jQuery); 57 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/assets/js/jquery.fitvids.js: -------------------------------------------------------------------------------- 1 | /*global jQuery */ 2 | /*jshint browser:true */ 3 | /*! 4 | * FitVids 1.1 5 | * 6 | * Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com 7 | * Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ 8 | * Released under the WTFPL license - http://sam.zoy.org/wtfpl/ 9 | * 10 | */ 11 | 12 | (function( $ ){ 13 | 14 | "use strict"; 15 | 16 | $.fn.fitVids = function( options ) { 17 | var settings = { 18 | customSelector: null 19 | }; 20 | 21 | if(!document.getElementById('fit-vids-style')) { 22 | // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js 23 | var head = document.head || document.getElementsByTagName('head')[0]; 24 | var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}'; 25 | var div = document.createElement('div'); 26 | div.innerHTML = '

x

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

{{name}}

24 | {{#if bio}} 25 |

{{bio}}

26 | {{/if}} 27 |
28 | {{#if location}}{{location}}{{/if}} 29 | {{#if website}}{{website}}{{/if}} 30 | {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} 31 |
32 |
33 | {{/author}} 34 | 35 | {{!-- The main content area on the homepage --}} 36 |
37 | 38 | {{!-- The tag below includes the post loop - partials/loop.hbs --}} 39 | {{> "loop"}} 40 | 41 |
42 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/default.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{!-- Document Settings --}} 5 | 6 | 7 | 8 | {{!-- Page Meta --}} 9 | {{meta_title}} 10 | 11 | 12 | {{!-- Mobile Meta --}} 13 | 14 | 15 | 16 | {{!-- Brand icon --}} 17 | 18 | 19 | {{!-- Styles'n'Scripts --}} 20 | 21 | 22 | 23 | {{!-- Ghost outputs important style and meta data with this tag --}} 24 | {{ghost_head}} 25 | 26 | 27 | 28 | {{!-- The blog navigation links --}} 29 | {{navigation}} 30 | 31 |
32 | 33 | {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}} 34 | {{{body}}} 35 | 36 | {{!-- The tiny footer at the very bottom --}} 37 | 41 | 42 |
43 | 44 | {{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}} 45 | 46 | {{!-- Ghost outputs important scripts and data with this tag --}} 47 | {{ghost_foot}} 48 | {{!-- Fitvids makes video embeds responsive and awesome --}} 49 | 50 | {{!-- The main JavaScript file for Casper --}} 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/index.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} 3 | 4 | {{!-- The big featured header --}} 5 |
6 | 12 |
13 |
14 |

{{@blog.title}}

15 |

{{@blog.description}}

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

{{title}}

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

{{title}}

11 |
12 |
13 |

{{excerpt words="26"}} »

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

Menu

3 | 4 | 5 | 6 | 11 | {{#if @labs.subscribers}} 12 | 13 | {{else}} 14 | 15 | {{/if}} 16 |
17 | 18 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/post.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 | {{!-- The comment above "< default" means - insert everything in this file into 4 | the {{{body}}} of the default.hbs template, containing the blog header/footer. --}} 5 | 6 | {{!-- Everything inside the #post tags pulls data from the post --}} 7 | {{#post}} 8 | 9 |
10 | 16 |
17 | 18 |
19 |
20 | 21 |
22 |

{{title}}

23 |
24 | {{tags prefix=" on "}} 25 |
26 |
27 | 28 |
29 | {{content}} 30 |
31 | 32 |
33 | 34 | {{!-- Everything inside the #author tags pulls data from the author --}} 35 | {{#author}} 36 | 37 | {{#if image}} 38 |
39 | 40 |
41 | {{/if}} 42 | 43 |
44 |

{{name}}

45 | 46 | {{#if bio}} 47 |

{{bio}}

48 | {{else}} 49 |

Read more posts by this author.

50 | {{/if}} 51 |
52 | {{#if location}}{{location}}{{/if}} 53 | {{#if website}}{{website}}{{/if}} 54 |
55 |
56 | 57 | {{/author}} 58 | 59 | 74 | 75 | {{!-- Email subscribe form at the bottom of the page --}} 76 | {{#if @labs.subscribers}} 77 |
78 |

Subscribe to {{@blog.title}}

79 |

Get the latest posts delivered right to your inbox.

80 | {{subscribe_form placeholder="Your email address"}} 81 | or subscribe via RSS with Feedly! 82 |
83 | {{/if}} 84 | 85 |
86 | 87 |
88 |
89 | 90 | {{!-- Links to Previous/Next posts --}} 91 | 109 | 110 | {{/post}} 111 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/html/casper/tag.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} 3 | 4 | {{!-- If we have a tag cover, display that - else blog cover - else nothing --}} 5 |
6 | 12 |
13 | {{#tag}} 14 |
15 |

{{name}}

16 |

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

23 |
24 | {{/tag}} 25 |
26 |
27 | 28 | {{!-- The main content area on the homepage --}} 29 |
30 | 31 | {{!-- The tag below includes the post loop - partials/loop.hbs --}} 32 | {{> "loop"}} 33 | 34 |
35 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/partials/cover_header.php: -------------------------------------------------------------------------------- 1 | get('url') && $logo->url != '') { 33 | $logo = ''; 34 | } 35 | 36 | ?> 37 | 38 |
39 | 45 | 46 |
47 |
48 |

49 |

50 |
51 |
52 | 53 | 54 | 55 | 56 |
-------------------------------------------------------------------------------- /examples/pw-ghost/templates/partials/header_bag/facebook_og.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/partials/header_bag/ld_json.php: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/partials/header_bag/translate_buttons.php: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/partials/header_bag/twitter_card.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/partials/loop.php: -------------------------------------------------------------------------------- 1 | get('template=authors'); 7 | $language = wire('user')->language; 8 | 9 | ?> 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 | 19 | author; 22 | 23 | if (empty($author)) { 24 | $author = new NullPage; 25 | } 26 | 27 | $author_image = $author->get('picture'); 28 | 29 | if (empty($author_image)) { 30 | $author_image = new NullPage; 31 | } 32 | 33 | ?> 34 | 35 | class->name != '' ? $post->class->name : 'post') ?> 36 | 37 |
38 |
39 |

title ?>

40 |
41 |
42 |

excerpt == '' ? \Helpers\excerpt($post->content, 50) : $post->excerpt) ?> »

43 |
44 |
45 | 46 | url != ''): ?><?php echo $author->fullname ?> 47 | 48 | fullname ?> 49 | 50 | $post->tags]) ?> 51 | 52 | 53 | 54 |
55 |
56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/partials/navigation.php: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

7 | 8 | 9 | 10 | 15 | 16 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |
48 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/partials/scripts.php: -------------------------------------------------------------------------------- 1 | language; 4 | 5 | if ($items->count() > 0) { 6 | echo __('On') . ' '; 7 | } 8 | 9 | foreach($items as $item): 10 | ?> 11 | title ?> 12 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/rss.php: -------------------------------------------------------------------------------- 1 | find() or $page->children(), etc. 8 | $items = $blog->children("template=blog-item, limit=$postsInRss, sort=-published"); 9 | 10 | // retrieve the RSS module 11 | $markup = $modules->get("MarkupRSS"); 12 | 13 | // configure the feed. see the actual module file for more optional config options. 14 | $markup->title = $meta->title; 15 | $markup->description = $meta->about; 16 | $markup->url = $home->httpUrl; 17 | 18 | $markup->itemDescriptionField = 'content'; 19 | $markup->itemDateField = 'publishedAt'; 20 | $markup->itemAuthorField = 'author.fullname'; 21 | $markup->copyright = $meta->title; 22 | 23 | // send the output of the RSS feed, and you are done 24 | $markup->render($items); -------------------------------------------------------------------------------- /examples/pw-ghost/templates/tag-item.php: -------------------------------------------------------------------------------- 1 | url; 5 | $params['title'] = $page->title; 6 | 7 | $params['description'] = ($page->about != '' ? $page->about : sprintf(__('A %d-post collection'), 8 | $blog->children("tags=$page")->count())); 9 | 10 | $params['blog_url'] = $blog_url; 11 | $params['logo'] = $blog_logo; 12 | 13 | $params['show_navigation'] = true; 14 | $params['type'] = 'tag-head'; 15 | $params['show_scroll_down'] = true; 16 | $params['show_vertical_info'] = true; 17 | 18 | $bodyBag['header_params'] = $params; 19 | 20 | $posts = $blog->children("template=blog-item, limit=$postsInTags, sort=-published, tags=$page"); 21 | 22 | $blogBag['posts'] = $posts; 23 | $blogBag['pagination'] = $posts->renderPager(\Helpers\paginationOptions()); 24 | 25 | $bodyBag['blog_params'] = $blogBag; 26 | 27 | $body = wireRenderFile('views/tag_view', $bodyBag); 28 | 29 | $viewBag['body_class'] = 'tag-template tag-'. $page->name; 30 | 31 | $meta_description = $page->about; 32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/tags.php: -------------------------------------------------------------------------------- 1 | redirect($home->httpUrl); -------------------------------------------------------------------------------- /examples/pw-ghost/templates/views/author_view.php: -------------------------------------------------------------------------------- 1 | get('picture'); 9 | 10 | if (empty($author_image)) { 11 | $author_image = new NullPage; 12 | } 13 | ?> 14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 |
22 | 23 |

fullname ?>

24 | about): ?> 25 |

about ?>

26 | 27 |
28 | location): ?>location ?> 29 | website): ?>website ?> 30 | 31 |
32 |
33 | 34 |
35 | 36 |
-------------------------------------------------------------------------------- /examples/pw-ghost/templates/views/default_view.php: -------------------------------------------------------------------------------- 1 | httpUrl; 6 | } 7 | 8 | ?> 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | <?php echo $meta_title ?> 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | $header_bag]) ?> 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | 58 | 59 |
60 | 61 | 62 | 63 | 64 | $footer_bag]) ?> 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/views/home_view.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 |
9 | 10 |
-------------------------------------------------------------------------------- /examples/pw-ghost/templates/views/notfound_view.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 404 — <?php echo __('Page not found') ?> 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |

404

33 |

34 | → 35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | 43 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/views/page_view.php: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |
7 | 8 |
9 |

10 |
11 | 12 |
13 | 14 |
15 | 16 |
17 |
-------------------------------------------------------------------------------- /examples/pw-ghost/templates/views/post_view.php: -------------------------------------------------------------------------------- 1 | get('picture'); 9 | 10 | if (empty($author_image)) { 11 | $author_image = new NullPage; 12 | } 13 | ?> 14 | 15 | 16 | 17 |
18 |
19 | 20 |
21 |

22 |
23 | $tags]) ?> 24 | 25 |
26 |
27 | 28 |
29 | 30 |
31 | 32 | 80 | 81 |
82 |
83 | 84 | 85 | 86 | 107 | -------------------------------------------------------------------------------- /examples/pw-ghost/templates/views/tag_view.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 |
8 | 9 |
--------------------------------------------------------------------------------