├── .gitignore ├── LICENSE ├── README.md ├── assets └── readme.png ├── blueprints.yaml ├── css └── screen.css ├── fonts ├── casper-icons.eot ├── casper-icons.ttf └── casper-icons.woff ├── gulpfile.js ├── js ├── index.js └── prism.js ├── languages.yaml ├── masonry.php ├── masonry.yaml ├── package.json ├── screenshot.jpg ├── src └── scss │ ├── global.scss │ ├── menu.scss │ ├── prism.scss │ └── screen.scss ├── templates ├── default.html.twig ├── error.html.twig ├── page.html.twig ├── partials │ ├── article.html.twig │ ├── base.html.twig │ ├── breadcrumbs.html.twig │ ├── header.html.twig │ ├── navigation.html.twig │ └── pagination.html.twig └── post.html.twig └── thumbnail.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Mesut Koca 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Masonry Grav Theme 2 | 3 | ![Masonry](assets/readme.png) 4 | 5 | The **Masonry** theme for Grav is a direct port of the [Masonry Theme for Ghost](https://github.com/chris-brown/Masonry-Ghost-Theme) designed by [Chris Brown](http://blog.zirafon.org/about). 6 | 7 | # Installation 8 | 9 | Installing the Masonry theme can be done in one of two ways. With GPM (Grav Package Manager) installation method enables you to quickly and easily install the theme with a simple terminal command, while the manual method enables you to do so via a zip file. 10 | 11 | ### GPM Installation (Preferred) 12 | 13 | The simplest way to install this theme is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm) through your system's Terminal (also called the command line). From the root of your Grav install type: 14 | 15 | bin/gpm install masonry 16 | 17 | This will install the Masonry theme into your `/user/themes` directory within Grav. Its files can be found under `/your/site/grav/user/themes/masonry`. 18 | 19 | ### Manual Installation 20 | 21 | To install this theme, just download the zip version of this repository and unzip it under `/your/site/grav/user/themes`. Then, rename the folder to `masonry`. 22 | 23 | You should now have all the theme files under 24 | 25 | /your/site/grav/user/themes/masonry 26 | 27 | # Dependencies 28 | This theme requires [Pagination](https://github.com/getgrav/grav-plugin-pagination) plugin. 29 | Supports Disqus or [Comments](https://github.com/getgrav/grav-plugin-comments) plugin. 30 | And i highly recommend [Grav Admin](https://github.com/getgrav/grav-plugin-admin) plugin. 31 | 32 | # Skeleton 33 | The theme works best in combination with appropriate content and configuration. Please check out the [Mediator Skeleton Package](https://github.com/getgrav/grav-skeleton-mediator-site). 34 | 35 | ## Pages Hierarchy 36 | `your/site/user/pages` should look like: 37 | ``` 38 | ├── 01.blog (Main folder for blog posts) 39 | │   ├── default.md (blog settings) 40 | | |── header.jpg (blog cover image if you want to) 41 | | | 42 | │   ├── post-with-cover (folder for a blog post) 43 | │   │   ├── post.md 44 | │   │   └── unsplash.jpg 45 | │   ├── tooling-grunt (folder for a blog post) 46 | │   │   └── post.md 47 | | 48 | └── 02.about (Page Folder) 49 | └── page.md 50 | ``` 51 | 52 | # Configuration 53 | 54 | Open the `your/site/user/data/site.yaml` file and add/replace these lines. 55 | 56 | ``` 57 | # Home Page Title 58 | title: 'Mesut Koca · Web Developer' 59 | description: 'Thoughts, stories and ideas.' 60 | 61 | author: 62 | name: 'Mesut Koca' 63 | email: youremail@domain.com 64 | # Avatar image optional (under your/site/user/themes/masonry/images/avatar.png) 65 | image: avatar.png 66 | # Optional 67 | link: 'https://twitter.com/twitterusername' 68 | # Optional 69 | location: Poland 70 | # Optional 71 | bio: 'Type something cool here.' 72 | 73 | 74 | # Optional 75 | disqus: disqususername 76 | # Optional (under your/site/user/themes/masonry/images/logofile.png) 77 | logo: logofile.png 78 | ``` 79 | 80 | ## Blog Settings 81 | 82 | Sample `your/site/user/pages/01.blog/default.md` file 83 | 84 | ``` 85 | 86 | --- 87 | #cover: header.jpg this is optional... 88 | sitemap: 89 | changefreq: weekly 90 | priority: 1.03 91 | content: 92 | items: '@self.children' 93 | order: 94 | by: date 95 | dir: desc 96 | limit: 8 97 | pagination: true 98 | feed: 99 | description: 'Sample Blog Description' 100 | limit: 3 101 | pagination: true 102 | --- 103 | 104 | ``` 105 | ## Cover Image for Blog Home Page 106 | 107 | Go to the `your/site/user/pages/01.blog/default.md` file and add this line: 108 | 109 | cover: header.jpg 110 | 111 | ## Cover Images for Posts 112 | 113 | If you want to add cover images to your pages or posts add `image: covername.jpg` to your markdown file. Like so: 114 | 115 | ``` 116 | --- 117 | title: 'Tooling: Grunt' 118 | image: yourimagefile.png 119 | --- 120 | Lorem ipsum your post.... 121 | ``` 122 | 123 | ## Language 124 | 125 | English, German and French languages are supported out of the box. If you want to add your language, edit the `languages.yaml` file. And don't forget to send a Pull Request :) 126 | 127 | 128 | # Updating 129 | 130 | As development for the Masonry theme continues, new versions may become available that add additional features and functionality, improve compatibility with newer Grav releases, and generally provide a better user experience. Updating Masonry is easy, and can be done through Grav's GPM system, as well as manually. 131 | 132 | ## GPM Update (Preferred) 133 | 134 | The simplest way to update this theme is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm). You can do this with this by navigating to the root directory of your Grav install using your system's Terminal (also called command line) and typing the following: 135 | 136 | bin/gpm update masonry 137 | 138 | This command will check your Grav install to see if your Masonry theme is due for an update. If a newer release is found, you will be asked whether or not you wish to update. To continue, type `y` and hit enter. The theme will automatically update and clear Grav's cache. 139 | 140 | ## Manual Update 141 | 142 | Manually updating Masonry is pretty simple. Here is what you will need to do to get this done: 143 | 144 | * Delete the `your/site/user/themes/masonry` directory. 145 | * Downalod the new version of the Masonry theme from either [GitHub](https://github.com/koca/grav-theme-masonry) or [GetGrav.org](http://getgrav.org/downloads/themes#extras). 146 | * Unzip the zip file in `your/site/user/themes` and rename the resulting folder to `masonry`. 147 | * Clear the Grav cache. The simplest way to do this is by going to the root Grav directory in terminal and typing `bin/grav clear-cache`. 148 | 149 | > Note: Any changes you have made to any of the files listed under this directory will also be removed and replaced by the new set. Any files located elsewhere (for example a YAML settings file placed in `user/config/themes`) will remain intact. 150 | 151 | # Setup 152 | 153 | If you want to set Masonry as the default theme, you can do so by following these steps: 154 | 155 | * Navigate to `/your/site/grav/user/config`. 156 | * Open the **system.yaml** file. 157 | * Change the `theme:` setting to `theme: masonry`. 158 | * Save your changes. 159 | * Clear the Grav cache. The simplest way to do this is by going to the root Grav directory in Terminal and typing `bin/grav clear-cache`. 160 | 161 | Once this is done, you should be able to see the new theme on the frontend. Keep in mind any customizations made to the previous theme will not be reflected as all of the theme and templating information is now being pulled from the **Masonry** folder. 162 | 163 | --- 164 | 165 | ## License 166 | 167 | This theme is free and open source software, distributed under the [MIT License](/LICENSE) 168 | -------------------------------------------------------------------------------- /assets/readme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koca/grav-theme-masonry/c78da24c5d6de6e5f3e57ba1fdcb2a294010abf3/assets/readme.png -------------------------------------------------------------------------------- /blueprints.yaml: -------------------------------------------------------------------------------- 1 | name: Masonry 2 | version: 1.5.0 3 | description: "Masonry, grid-based blog theme by Chris Brown ported to **Grav**" 4 | icon: th-large 5 | author: 6 | name: Mesut Koca 7 | email: i@mesutkoca.com 8 | url: http://mesutkoca.com 9 | homepage: https://github.com/koca/grav-theme-masonry 10 | demo: https://github.com/koca/grav-theme-masonry 11 | keywords: masonry, grid, theme, modern, fast, responsive, blog 12 | bugs: https://github.com/koca/grav-theme-masonry/issues 13 | license: MIT 14 | 15 | form: 16 | validation: loose 17 | -------------------------------------------------------------------------------- /css/screen.css: -------------------------------------------------------------------------------- 1 | .menu-button label{cursor:pointer}.show-menu{display:none}.show-menu:checked~.nav{opacity:1;-webkit-transition:-webkit-transform .3s ease,opacity 0s ease 0s;transition:transform .3s ease,opacity 0s ease 0s;-webkit-transform:translate3D(0,0,0);transform:translate3D(0,0,0)}.show-menu:checked~.site-wrapper{overflow-x:hidden;-webkit-transform:translate3D(-240px,0,0);transform:translate3D(-240px,0,0);-webkit-transition:-webkit-transform .3s ease;transition:transform .3s ease}.show-menu:checked~.nav-cover{top:0;left:0;right:240px;bottom:0;z-index:5}.post-content code,.post-content pre{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.post-content code::-moz-selection,.post-content code ::-moz-selection,.post-content pre::-moz-selection,.post-content pre ::-moz-selection{text-shadow:none;background:#b3d4fc}.post-content code::selection,.post-content code ::selection,.post-content pre::selection,.post-content pre ::selection{text-shadow:none;background:#b3d4fc}@media print{.post-content code,.post-content pre{text-shadow:none}}.post-content pre{padding:1em;margin:.5em 0;overflow:auto}.post-content :not(pre)>code,.post-content pre{background:#f5f2f0}.post-content :not(pre)>code{padding:.1em;border-radius:.3em;white-space:normal}.post-content .token.cdata,.post-content .token.comment,.post-content .token.doctype,.post-content .token.prolog{color:#708090}.post-content .token.punctuation{color:#999}.post-content .namespace{opacity:.7}.post-content .token.boolean,.post-content .token.constant,.post-content .token.deleted,.post-content .token.number,.post-content .token.property,.post-content .token.symbol,.post-content .token.tag{color:#905}.post-content .token.attr-name,.post-content .token.builtin,.post-content .token.char,.post-content .token.inserted,.post-content .token.selector,.post-content .token.string{color:#690}.post-content .language-css .token.string,.post-content .style .token.string,.post-content .token.entity,.post-content .token.operator,.post-content .token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.post-content .token.atrule,.post-content .token.attr-value,.post-content .token.keyword{color:#07a}.post-content .token.function{color:#dd4a68}.post-content .token.important,.post-content .token.regex,.post-content .token.variable{color:#e90}.post-content .token.bold,.post-content .token.important{font-weight:700}.post-content .token.italic{font-style:italic}.post-content .token.entity{cursor:help}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}h1,h2,h3,h4,h5,h6{-webkit-font-feature-settings:'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;-moz-font-feature-settings:'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;-o-font-feature-settings:'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;color:#2e2e2e;line-height:1.15em;margin:0 0 .4em;font-family:Open Sans,"sans-serif"}dl,h1,h2,h3,h4,h5,h6,ol,p,ul{text-rendering:geometricPrecision}dl,ol,p,ul{-webkit-font-feature-settings:'liga' 1,'onum' 1,'kern' 1;-moz-font-feature-settings:'liga' 1,'onum' 1,'kern' 1;-o-font-feature-settings:'liga' 1,'onum' 1,'kern' 1;margin:0 0 1.75em}code,tt{padding:1px 3px;font-family:Inconsolata,monospace,"sans-serif";font-size:.85em;white-space:pre-wrap;border:1px solid #e3edf3;background:#f7fafb;border-radius:2px}pre code,pre tt{font-size:inherit;white-space:pre-wrap;background:transparent;border:none;padding:0}table td,table th{padding:8px;line-height:20px;text-align:left;vertical-align:top;border-top:1px solid #efefef}.nav-close:after,.nav-close:before{content:'';position:absolute;top:0;width:20px;height:1px;background:#969696;top:15px;-webkit-transition:background .15s ease;transition:background .15s ease}.newer-posts,.older-posts{position:absolute;display:inline-block;padding:0 15px;border:1px solid #bfc8cd;text-decoration:none;border-radius:4px;transition:border .3s ease}.masonry .post:focus .post-image img,.masonry .post:hover .post-image img{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:.7}article,aside,details,figcaption,figure{display:block}figure{margin:0}footer,header,hgroup,main,nav,section,summary{display:block}audio{display:inline-block}audio:not([controls]){display:none;height:0}canvas,video{display:inline-block}[hidden],template{display:none}html{font-family:"sans-serif";-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;height:100%;max-height:100%;font-size:62.5%;-webkit-tap-highlight-color:transparent}html input[type=button]{-webkit-appearance:button;cursor:pointer}html input[disabled]{cursor:default}body{margin:0;height:100%;max-height:100%;font-family:Merriweather,"serif";letter-spacing:.01rem;font-size:1.8rem;line-height:1.75em;color:#3a4145;-webkit-font-feature-settings:'kern' 1;-moz-font-feature-settings:'kern' 1;-o-font-feature-settings:'kern' 1;text-rendering:geometricPrecision}body.nav-opened .site-wrapper{overflow-x:hidden;-webkit-transform:translate3D(-240px,0,0);transform:translate3D(-240px,0,0);-webkit-transition:-webkit-transform .3s ease;transition:transform .3s ease}body.nav-opened .nav-cover{position:fixed;top:0;left:0;right:240px;bottom:0;z-index:5}body.nav-opened .nav{opacity:1;-webkit-transition:-webkit-transform .3s ease,opacity 0s ease 0s;transition:transform .3s ease,opacity 0s ease 0s;-webkit-transform:translate3D(0,0,0);transform:translate3D(0,0,0)}body.nav-closed .nav{-webkit-transform:translate3D(97px,0,0);transform:translate3D(97px,0,0)}body:not(.post-template) .post-title{font-size:3.6rem}a{background:transparent;color:#4a4a4a;transition:color .3s ease}a:focus{outline:thin dotted}a:active,a:hover{outline:0}a:hover{color:#111}h1{font-size:2em;margin:.67em 0;font-size:5rem;letter-spacing:-2px;text-indent:-3px}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0;display:block;height:1px;border:0;border-top:1px solid #efefef;margin:3.2em 0;padding:0}mark{background:#ff0;color:#000;background-color:#fdffb6}code{font-family:monospace,"serif";font-size:1em}kbd{display:inline-block;margin-bottom:.4em;padding:1px 8px;border:1px solid #ccc;color:#666;text-shadow:#fff 0 1px 0;font-weight:700;background:#f4f4f4;border-radius:4px;box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 1px 0 0 #fff}kbd,pre{font-family:monospace,"serif";font-size:1em;font-size:.9em}pre{white-space:pre-wrap;box-sizing:border-box;margin:0 0 1.75em;border:1px solid #e3edf3;width:100%;padding:10px;font-family:Inconsolata,monospace,"sans-serif";white-space:pre;overflow:auto;background:#f7fafb;border-radius:3px}samp{font-family:monospace,"serif";font-size:1em}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub{bottom:-.25em}sup{top:-.5em}img{border:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button{text-transform:none;-webkit-appearance:button;cursor:pointer}button,input{line-height:normal}select{text-transform:none}textarea{overflow:auto;vertical-align:top}input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}table{border-collapse:collapse;border-spacing:0;box-sizing:border-box;margin:1.75em 0;width:100%;max-width:100%;background-color:transparent}table th{color:#000}table tbody+tbody{border-top:2px solid #efefef}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:#f6f6f6}table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-top:0}table table table{background-color:#fff}table.plain tbody>tr:nth-child(odd)>td,table.plain tbody>tr:nth-child(odd)>th{background:transparent}@font-face{font-family:casper-icons;src:url(../fonts/casper-icons.eot?v=1);src:url(../fonts/casper-icons.eot?v=1#iefix) format("embedded-opentype"),url(../fonts/casper-icons.woff?v=1) format("woff"),url(../fonts/casper-icons.ttf?v=1) format("truetype"),url(../fonts/casper-icons.svg?v=1#icons) format("svg");font-weight:400;font-style:normal}[class*=" icon-"]:before,[class^=icon-]:before{font-family:casper-icons,Open Sans,sans-serif;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;text-decoration:none!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-moz-selection{background:#d6edff}::selection{background:#d6edff}h2{font-size:3.6rem;letter-spacing:-1px}h3{font-size:3rem}h4{font-size:2.5rem}h5,h6{font-size:2rem}ul{padding-left:3rem}ul ol,ul ul{margin:0 0 .4em;padding-left:2em}ol{padding-left:3rem}ol ol,ol ul{margin:0 0 .4em;padding-left:2em}dl dt{float:left;width:180px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap;font-weight:700}dl dd,dl dt{margin-bottom:1em}dl dd{margin-left:200px}li{margin:.4em 0}li li{margin:0}blockquote{box-sizing:border-box;margin:1.75em 0;padding:0 0 0 1.75em;border-left:.4em solid #4a4a4a}blockquote p{margin:.8em 0;font-style:italic}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;color:#ccc}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}.fluid-width-video-wrapper,iframe{display:block;margin:1.75em 0}.fluid-width-video-wrapper iframe{margin:0}.clearfix{zoom:1;clear:both}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.hidden{text-indent:-9999px;visibility:hidden;display:none}.inner{position:relative;width:80%;max-width:710px;margin:0 auto}.vertical{display:table-cell;vertical-align:middle}.site-wrapper{position:relative;z-index:3;min-height:100%;background-color:#f2f3f5;-webkit-transition:-webkit-transform .5s ease;transition:transform .5s ease}.main-header{position:relative;display:table;width:100%;height:100vh;margin-bottom:5rem;text-align:center;background:#222 no-repeat 50%;background-size:cover;overflow:hidden}.main-header .inner{width:80%}.main-nav{position:relative;padding:35px 40px;margin:0 0 30px}.main-nav a{text-decoration:none;font-family:Open Sans,"sans-serif"}.main-nav.overlay{position:absolute;top:0;left:0;right:0;height:70px;border:none;background:linear-gradient(180deg,rgba(0,0,0,.2) 0,transparent)}.nav{position:fixed;top:0;right:0;bottom:0;z-index:2;width:240px;opacity:0;background:#111;margin-bottom:0;text-align:left;overflow-y:auto;-webkit-transition:-webkit-transform .5s ease,opacity .3s ease .7s;transition:transform .5s ease,opacity .3s ease .7s}.nav ul{padding:90px 9% 5%;list-style:none;counter-reset:a}.nav li{margin:0}.nav li:before{display:block;float:right;padding-right:4%;padding-left:5px;text-align:right;font-size:1.2rem;vertical-align:bottom;color:#b8b8b8;content:counter(a,lower-roman);counter-increment:a}.nav li a{text-decoration:none;line-height:1.4;font-size:1.4rem;display:block;padding:.6rem 4%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nav li a:after{display:inline-block;content:" .......................................................";color:hsla(0,0%,100%,.2);margin-left:5px}.nav .nav-current:before,.nav li.nav-current a{color:#fff}.nav .nav-current a:after{content:" ";border-bottom:1px solid hsla(0,0%,100%,.5);width:100%;height:1px}.nav a:link,.nav a:visited{color:#b8b8b8}.nav a:active,.nav a:focus,.nav a:hover{color:#fff}.nav-title{position:absolute;top:45px;left:30px;font-size:16px;font-weight:100;text-transform:uppercase;color:#fff}.nav-close{position:absolute;top:38px;right:25px;width:20px;height:20px;padding:0;font-size:10px}.nav-close:focus{outline:0}.nav-close:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.nav-close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.nav-close:hover:after,.nav-close:hover:before{background:#fff}.subscribe-button{box-sizing:border-box;display:block;position:absolute;bottom:30px;left:30px;right:30px;height:38px;padding:0 20px;color:#111!important;text-align:center;font-size:12px;font-family:Open Sans,"sans-serif";text-transform:uppercase;text-decoration:none;line-height:35px;border-radius:3px;background:#fff;transition:all ease .3s}.subscribe-button:before{font-size:9px;margin-right:6px}.scroll-down{display:block;position:absolute;z-index:4;bottom:45px;left:50%;margin-left:-16px;width:34px;height:34px;font-size:34px;text-align:center;text-decoration:none;color:hsla(0,0%,100%,.7);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-animation:b 4s 2s infinite;animation:b 4s 2s infinite}.scroll-down:hover{color:#fff;-webkit-animation:none;animation:none}.home-template .page-title{-webkit-animation:a .6s;animation:a .6s;-webkit-animation-delay:.2s;animation-delay:.2s}.home-template .page-description{-webkit-animation:a .9s;animation:a .9s;-webkit-animation-delay:.1s;animation-delay:.1s}.home-template .main-header:after{display:block;content:" ";width:150px;height:130px;border-radius:100%;position:absolute;bottom:0;left:50%;margin-left:-75px;background:radial-gradient(ellipse at center,rgba(0,0,0,.15) 0,transparent 70%,transparent 100%)}.no-cover .scroll-down{display:none}.no-cover.main-header{min-height:160px;max-height:40vh;background:#f6f6f6}.no-cover.main-header:after{display:none}.no-cover .page-title{color:rgba(0,0,0,.8)}.no-cover .page-description{color:rgba(0,0,0,.5)}.no-cover .main-nav.overlay{background:none}.no-cover.post-head.main-header{height:85px;min-height:0;margin-bottom:0;background:transparent}.no-cover.author-head.main-header{height:10vh;min-height:100px;background:transparent}.archive-template .scroll-down{display:none}.archive-template .main-header{max-height:30vh}.archive-template .main-header:after{display:none}.archive-template .extra-pagination{display:block}.archive-template .author-profile .author-meta{display:none}.blog-logo{display:block;float:left;background:none!important;border:none!important}.blog-logo img{display:block;padding:1px 0 5px;width:auto}.blog-logo img,.menu-button{box-sizing:border-box;height:38px}.menu-button{display:inline-block;float:right;padding:0 15px;border-style:solid;border-width:1px;opacity:1;text-align:center;font-size:12px;text-transform:uppercase;line-height:35px;white-space:nowrap;border-radius:3px;transition:all .5s ease}.menu-button:before{font-size:12px;font-weight:700;margin-right:6px;position:relative;top:1px}.menu-button:hover{background:#fff}.menu-button:focus{outline:0}.nav-closed .menu-button{color:#fff;border-color:hsla(0,0%,100%,.6)}.nav-closed .menu-button:hover{color:#222}.nav-closed .no-cover .menu-button{border-color:#bfc8cd;color:#9eabb3}.nav-closed .no-cover .menu-button:hover{border-color:#555;color:#555}.page-title{margin:10px 0;font-size:5rem;letter-spacing:-1px;font-weight:700;font-family:Open Sans,"sans-serif";color:#fff}.page-description{margin:0;font-size:2rem;line-height:1.5em;font-weight:400;font-family:Merriweather,"serif";letter-spacing:.01rem;color:hsla(0,0%,100%,.8)}.post-template .post{position:relative;width:80%;max-width:710px;margin:4rem auto;padding-bottom:4rem;border-bottom:1px solid #ebf2f6;word-wrap:break-word;margin-top:0;border-bottom:none;padding-bottom:0}.post-template .post:after{display:block;content:"";width:7px;height:7px;border:1px solid #e7eef2;position:absolute;bottom:-5px;left:50%;margin-left:-5px;background:#fff;border-radius:100%;box-shadow:0 0 0 5px #fff;display:none}.post-template .post-header{margin-bottom:3.4rem}.post-template .post-header__breadcrumb{list-style:none;margin:0 0 1em;padding:0;font-size:.8em}.post-template .post-header__breadcrumb li{display:inline-block;font-style:italic}.post-template .post-header__breadcrumb li a{font-style:normal}.post-template .post-title{margin-bottom:0}.post-template .post-meta{margin:0}.post-template .post-date{padding:0;margin:0;border:none}.post-template .content{overflow:hidden}.read-more{text-decoration:none;font-weight:700;position:relative;display:inline-block}.read-more:after{content:'\003e';display:inline-block;font-size:1.5em;color:#ed0677;position:absolute;transition:all .2s ease}.read-more:hover:after{margin-left:5px}.post-meta{display:block;margin:1.75rem 0 0;font-family:Open Sans,"sans-serif";font-size:1.5rem;line-height:2.2rem;color:#9eabb3}.post-meta a{color:#9eabb3;text-decoration:none}.post-meta a:hover{text-decoration:underline}.author-thumb{width:24px;height:24px;float:left;margin-right:9px;border-radius:100%}.user-meta{position:relative;padding:.3rem 40px 0 100px;min-height:77px}.post-date{display:inline-block;margin-left:8px;padding-left:12px;border-left:1px solid #d5dbde;text-transform:uppercase;font-size:1.3rem;white-space:nowrap}.user-image{position:absolute;top:0;left:0}.user-name{display:block;font-weight:700}.user-bio{display:block;max-width:440px;font-size:1.4rem;line-height:1.5em}.publish-meta{position:absolute;top:0;right:0;padding:4.3rem 0 4rem;text-align:right}.publish-heading{display:block;font-weight:700}.publish-date{display:block;font-size:1.4rem;line-height:1.5em}.footnotes{font-style:italic;font-size:1.3rem;line-height:1.6em}.footnotes li{margin:.6rem 0}.footnotes p{margin:0}.footnotes p a:last-child{text-decoration:none}.post-footer{position:relative;margin:6rem 0 0;padding:6rem 0 0;border-top:1px solid #ebf2f6}.post-footer h4{font-size:1.8rem;margin:0}.post-footer h4 a{color:#2e2e2e;text-decoration:none}.post-footer h4 a:hover{text-decoration:underline}.post-footer p{margin:1rem 0;font-size:1.4rem;line-height:1.75em}.post-footer .author{margin-right:180px}.post-footer .share{position:absolute;top:6rem;right:0;width:140px}.post-footer .share a{font-size:1.8rem;display:inline-block;margin:1rem 1.6rem 1.6rem 0;color:#bbc7cc;text-decoration:none}.post-footer .share .icon-twitter:hover{color:#55acee}.post-footer .share .icon-facebook:hover{color:#3b5998}.post-footer .share .icon-google-plus:hover{color:#dd4b39}.author-meta{padding:0;margin:0;list-style:none;font-size:1.4rem;line-height:1;font-style:italic;color:#9eabb3;margin:1.6rem 0}.author-meta a{color:#9eabb3;text-decoration:none}.author-meta a:hover{color:#111}.author-meta span{display:inline-block;margin:0 2rem 1rem 0;word-wrap:break-word}.author-profile{padding:0 15px 5rem;border-bottom:1px solid #ebf2f6;text-align:center}.author-profile:after{display:block;content:"";width:7px;height:7px;border:1px solid #e7eef2;position:absolute;bottom:-5px;left:50%;margin-left:-5px;background:#fff;border-radius:100%;box-shadow:0 0 0 5px #fff}.author-profile .author-image{position:relative;left:auto;top:auto;width:120px;height:120px;padding:3px;margin:-100px auto 0;box-shadow:none}.author-profile .author-meta{margin:2rem 0;font-family:Merriweather,"serif";letter-spacing:.01rem;font-size:1.7rem}.author-image{box-sizing:border-box;display:block;position:absolute;top:-40px;left:50%;margin-left:-40px;width:80px;height:80px;border-radius:100%;overflow:hidden;padding:6px;background:#fff;z-index:1;box-shadow:0 0 0 1px #e7eef2}.author-image .img{position:relative;display:block;width:100%;height:100%;background-size:cover;background-position:50%;border-radius:100%}.author-title{margin:1.5rem 0 1rem}.author-bio{font-size:1.8rem;line-height:1.5em;font-weight:200;color:#50585d;letter-spacing:0;text-indent:0}.read-next{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;margin-top:10rem}.read-next+.site-footer{position:absolute;bottom:0;left:0;right:0;margin:0}.read-next-story{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:50%;text-decoration:none;position:relative;text-align:center;color:#fff;background:#222 no-repeat 50%;background-size:cover;overflow:hidden}.read-next-story:hover:before{background:rgba(0,0,0,.8);transition:all .2s ease}.read-next-story:hover .post:before{color:#222;background:#fff;transition:all .2s ease}.read-next-story:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.7);transition:all .5s ease}.read-next-story .post{padding-top:6rem;padding-bottom:6rem}.read-next-story .post:before{content:"Read This Next";padding:4px 10px 5px;text-transform:uppercase;font-size:1.1rem;font-family:Open Sans,"sans-serif";color:hsla(0,0%,100%,.8);border:1px solid hsla(0,0%,100%,.5);border-radius:4px;transition:all .5s ease}.read-next-story h2{margin-top:1rem;color:#fff}.read-next-story p{margin:0;color:hsla(0,0%,100%,.8)}.read-next-story.no-cover{background:#f6f6f6}.read-next-story.no-cover:before{display:none}.read-next-story.no-cover h2{color:rgba(0,0,0,.8)}.read-next-story.no-cover p{color:rgba(0,0,0,.5)}.read-next-story.no-cover .post:before{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.2)}.read-next-story.no-cover+.read-next-story.no-cover{border-left:1px solid rgba(0,0,100,.04)}.read-next-story.prev .post:before{content:"You Might Enjoy"}.gist table{margin:0;font-size:1.4rem}.gist td{line-height:1.4}.gist .line-number{min-width:25px}.pagination{position:relative;width:80%;max-width:710px;margin:4rem auto;font-family:Open Sans,"sans-serif";font-size:1.3rem;color:#9eabb3;text-align:center}.pagination a{color:#9eabb3;transition:all .2s ease}.older-posts{right:0}.older-posts:hover{color:#889093;border-color:#98a0a4}.newer-posts{left:0}.newer-posts:hover{color:#889093;border-color:#98a0a4}.page-number{display:inline-block;padding:2px 0;min-width:100px}.extra-pagination{display:none;border-bottom:1px solid #ebf2f6}.extra-pagination:after{display:block;content:"";width:7px;height:7px;border:1px solid #e7eef2;position:absolute;bottom:-5px;left:50%;margin-left:-5px;background:#fff;border-radius:100%;box-shadow:0 0 0 5px #fff}.extra-pagination .pagination{width:auto}.site-footer{position:relative;margin:8rem 0 0;padding:1rem 15px;font-family:Open Sans,"sans-serif";font-size:1rem;line-height:1.75em;color:#bbc7cc}.site-footer a{color:#bbc7cc;text-decoration:none;font-weight:700}.site-footer a:hover{border-bottom:1px solid #bbc7cc}.poweredby{float:right;text-align:right}.copyright,.poweredby{display:block;width:45%}.copyright{float:left}@media only screen and (max-width:900px){blockquote{margin-left:0}.main-header{box-sizing:border-box;height:auto;min-height:240px;height:60vh;padding:15% 0}.scroll-down{display:none}.page-title{font-size:4rem;letter-spacing:-1px}.page-description{font-size:1.8rem;line-height:1.5em}.post{font-size:.95em}hr{margin:2.4em 0}ol,ul{padding-left:2em}h1{font-size:4.5rem;text-indent:-2px}h2{font-size:3.6rem}h3{font-size:3.1rem}h4{font-size:2.5rem}h5{font-size:2.2rem}h6{font-size:1.8rem}.author-profile{padding-bottom:4rem}.author-profile .author-bio,.author-profile .author-meta span{font-size:1.6rem}.no-cover.post-head.main-header{height:55px;padding:0}.no-cover.author-head.main-header{padding:0}.read-next{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:4rem}.home-template .main-header:after,.read-next p{display:none}.archive-template .main-header{min-height:180px;padding:10% 0}.blog-logo img{padding:4px 0}body:not(.post-template) .post-title{font-size:3.2rem}.author-meta span{display:block;margin:1.5rem 0}.post-head.main-header{height:45vh}.author-head.main-header,.tag-head.main-header{height:30vh}.read-next-story.no-cover+.read-next-story.no-cover{border-top:1px solid rgba(0,0,100,.06);border-left:none}}@media only screen and (max-width:500px){.main-header{margin-bottom:15px;height:40vh}.no-cover.main-header{height:30vh}.no-cover .main-nav.overlay{background:none}.no-cover .main-nav.overlay .menu-button{border:none}.main-nav{padding:5px;margin-bottom:2rem}.main-nav.overlay .menu-button{border-color:transparent}.main-nav.overlay a:hover{color:#fff;border-color:transparent;background:transparent}.blog-logo{padding:5px}.blog-logo img{height:30px}.menu-button{padding:0 5px;border-radius:0;border-width:0;color:#2e2e2e;background:transparent}.menu-button:hover{color:#2e2e2e;border-color:transparent;background:none}body.nav-opened .menu-button{background:none;border:transparent}body:not(.post-template) .post-title{font-size:2.5rem}.nav-title{top:25px}.nav-close{position:absolute;top:18px}.inner,.pagination{width:auto;margin:2rem auto}.post{width:auto;margin:2rem 16px;padding-bottom:2rem;line-height:1.65em}.post-date{display:none}.post-template .post-header{margin-bottom:2rem}.post-template .post-date{display:inline-block}.post-template .site-footer{margin-top:0}hr{margin:1.75em 0}dl,ol,p,ul{font-size:.95em;margin:0 0 2.5rem}.page-title{font-size:3rem}.page-description{font-size:1.6rem}h1{font-size:2.8rem;letter-spacing:-1px}h1,h2{margin:0 0 .3em}h2{font-size:2.4rem;letter-spacing:0}h3{font-size:2.1rem}h3,h4{margin:0 0 .3em}h4{font-size:1.9rem}h5,h6{margin:0 0 .3em;font-size:1.8rem}.post-meta{font-size:1.3rem;margin-top:1rem}.post-footer{padding:5rem 0 3rem;text-align:center}.post-footer .author{margin:0 0 2rem;padding:0 0 1.6rem;border-bottom:1px dashed #ebf2f6}.post-footer .share{position:static;width:auto}.post-footer .share a{margin:1.4rem .8rem 0}.newer-posts,.older-posts{position:static;margin:10px 0}.page-number{display:block}.site-footer{margin-top:3rem}.author-profile{padding-bottom:2rem}.author-profile .author-image{margin-top:-70px}.author-profile .author-meta span{font-size:1.4rem}.read-next{margin-top:2rem;margin-bottom:-37px}.read-next .post{width:100%}.archive-template .main-header{max-height:20vh;min-height:160px;padding:10% 0}.archive-template .main-header .page-description{display:none}.nav ul{padding:60px 9% 5%}.post-excerpt p{font-size:.85em}.post-content img{padding:0;width:calc(100% 32px);min-width:0;max-width:112%}.author-meta li{float:none;margin:0;line-height:1.75em}.author-meta li:before{display:none}.post-head.main-header{height:30vh}.author-head.main-header,.tag-head.main-header{height:20vh}}@-webkit-keyframes a{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes a{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes b{0%{-webkit-transform:translateY(0) rotate(-90deg);transform:translateY(0) rotate(-90deg)}10%{-webkit-transform:translateY(0) rotate(-90deg);transform:translateY(0) rotate(-90deg)}25%{-webkit-transform:translateY(0) rotate(-90deg);transform:translateY(0) rotate(-90deg)}40%{-webkit-transform:translateY(0) rotate(-90deg);transform:translateY(0) rotate(-90deg)}50%{-webkit-transform:translateY(0) rotate(-90deg);transform:translateY(0) rotate(-90deg)}20%{-webkit-transform:translateY(-10px) rotate(-90deg);transform:translateY(-10px) rotate(-90deg)}30%{-webkit-transform:translateY(-5px) rotate(-90deg);transform:translateY(-5px) rotate(-90deg)}}@keyframes b{0%{-webkit-transform:translateY(0) rotate(-90deg);transform:translateY(0) rotate(-90deg)}20%{-webkit-transform:translateY(0) rotate(-90deg);transform:translateY(0) rotate(-90deg)}50%{-webkit-transform:translateY(0) rotate(-90deg);transform:translateY(0) rotate(-90deg)}80%{-webkit-transform:translateY(0) rotate(-90deg);transform:translateY(0) rotate(-90deg)}to{-webkit-transform:translateY(0) rotate(-90deg);transform:translateY(0) rotate(-90deg)}40%{-webkit-transform:translateY(-10px) rotate(-90deg);transform:translateY(-10px) rotate(-90deg)}60%{-webkit-transform:translateY(-5px) rotate(-90deg);transform:translateY(-5px) rotate(-90deg)}}.wrapper{width:95%;margin:3em auto}.masonry{margin:1.5em 0;padding:0;-moz-column-gap:1.5em;-webkit-column-gap:1.5em;column-gap:1.5em;font-size:.85em}.masonry .post{display:inline-block;background:#fff;padding:1.5em;margin:0 0 1.5em;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-shadow:0 1px 1px 0 rgba(0,0,0,.18);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.masonry .post:hover{box-shadow:2px 2px 4px 0 #ccc}.masonry .post .post-image{display:block;margin:0;padding:0;position:relative;margin:-1.5em -1.5em 12px;overflow:hidden}.masonry .post .post-image img{transition:all ease-out 1s;opacity:1;display:block;width:100%;height:auto;margin:0;padding:0}.masonry .post-excerpt a{color:#ed0677}@media only screen and (min-width:400px){.masonry{-moz-column-count:2;-webkit-column-count:2;column-count:2}}@media only screen and (min-width:700px){.masonry{-moz-column-count:3;-webkit-column-count:3;column-count:3}}@media only screen and (min-width:1280px){.wrapper{width:1260px}}svg:not(:root){overflow:hidden}.icon-ghost:before{content:"\f600"}.icon-feed:before{content:"\f601"}.icon-twitter:before{content:"\f602";font-size:1.1em}.icon-google-plus:before{content:"\f603"}.icon-facebook:before{content:"\f604"}.icon-arrow-left:before{content:"\f605"}.icon-stats:before{content:"\f606"}.icon-location:before{content:"\f607";margin-left:-3px}.icon-link:before{content:"\f608"}.icon-menu:before{content:"\f609"}.nav-opened .menu-button{padding:0 12px;background:#111;border-color:#111;color:#fff;-webkit-transform:translate3D(94px,0,0);transform:translate3D(94px,0,0);transition:all .3s ease}.nav-opened .menu-button .word{opacity:0;transition:all .3s ease}.post-title a{text-decoration:none}.post-excerpt p{margin:0;font-size:.9em;line-height:1.7em}.post-content img{display:block;max-width:126%;height:auto;padding:.6em 0;position:relative;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.post-head.main-header{height:65vh;min-height:180px}.author-head.main-header,.tag-head.main-header{height:40vh;min-height:180px}.content .embedPastebin{margin-bottom:1.75em} -------------------------------------------------------------------------------- /fonts/casper-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koca/grav-theme-masonry/c78da24c5d6de6e5f3e57ba1fdcb2a294010abf3/fonts/casper-icons.eot -------------------------------------------------------------------------------- /fonts/casper-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koca/grav-theme-masonry/c78da24c5d6de6e5f3e57ba1fdcb2a294010abf3/fonts/casper-icons.ttf -------------------------------------------------------------------------------- /fonts/casper-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koca/grav-theme-masonry/c78da24c5d6de6e5f3e57ba1fdcb2a294010abf3/fonts/casper-icons.woff -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'), 4 | plugins = require('gulp-load-plugins')(), 5 | nano = require('gulp-cssnano'); 6 | 7 | gulp.task('sass', function () { 8 | gulp.src('./src/scss/**/*.scss') 9 | .pipe(plugins.sass().on('error', plugins.sass.logError)) 10 | .pipe(plugins.concatCss("screen.css")) 11 | .pipe(nano()) 12 | .pipe(gulp.dest('./css')); 13 | }); 14 | 15 | //Watch task 16 | gulp.task('watch',function() { 17 | gulp.watch('./src/scss/**/*.scss', ['sass']); 18 | }); 19 | 20 | gulp.task('default', ['sass']); -------------------------------------------------------------------------------- /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 | $(".scroll-down").arctic_scroll(); 14 | 15 | $(".menu-button, .nav-cover, .nav-close").on("click", function(e){ 16 | e.preventDefault(); 17 | $("body").toggleClass("nav-opened nav-closed"); 18 | }); 19 | 20 | }); 21 | 22 | // Arctic Scroll by Paul Adam Davis 23 | // https://github.com/PaulAdamDavis/Arctic-Scroll 24 | $.fn.arctic_scroll = function (options) { 25 | 26 | var defaults = { 27 | elem: $(this), 28 | speed: 500 29 | }, 30 | 31 | allOptions = $.extend(defaults, options); 32 | 33 | allOptions.elem.click(function (event) { 34 | event.preventDefault(); 35 | var $this = $(this), 36 | $htmlBody = $('html, body'), 37 | offset = ($this.attr('data-offset')) ? $this.attr('data-offset') : false, 38 | position = ($this.attr('data-position')) ? $this.attr('data-position') : false, 39 | toMove; 40 | 41 | if (offset) { 42 | toMove = parseInt(offset); 43 | $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed); 44 | } else if (position) { 45 | toMove = parseInt(position); 46 | $htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed); 47 | } else { 48 | $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed); 49 | } 50 | }); 51 | 52 | }; 53 | })(jQuery); -------------------------------------------------------------------------------- /js/prism.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=clike */ 2 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(m instanceof a)){u.lastIndex=0;var y=u.exec(m),v=1;if(!y&&h&&p!=r.length-1){var b=r[p+1].matchedStr||r[p+1],k=m+b;if(p=m.length)continue;var _=y.index+y[0].length,P=m.length+b.length;if(v=3,P>=_){if(r[p+1].greedy)continue;v=2,k=k.slice(0,P)}m=k}if(y){g&&(f=y[1].length);var w=y.index+f,y=y[0].slice(f),_=w+y.length,S=m.slice(0,w),O=m.slice(_),j=[p,v];S&&j.push(S);var A=new a(i,c?n.tokenize(y,c):y,d,y,h);j.push(A),O&&j.push(O),Array.prototype.splice.apply(r,j)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.matchedStr=a||null,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var l={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o="";for(var s in l.attributes)o+=(o?" ":"")+s+'="'+(l.attributes[s]||"")+'"';return"<"+l.tag+' class="'+l.classes.join(" ")+'" '+o+">"+l.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,l=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",n.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); 3 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; -------------------------------------------------------------------------------- /languages.yaml: -------------------------------------------------------------------------------- 1 | en: 2 | THEME_MASONRY: 3 | HOME: Home 4 | MENU_TITLE: Menu 5 | BLOG: 6 | CONTINUE_READING: Read More 7 | POST: 8 | MORE: 9 | AUTHOR: More posts by this author 10 | SPEC_AUTHOR: More posts by 11 | SHARE: Share this post 12 | PAGINATION: 13 | OLDER: Older posts 14 | NEWER: Newer posts 15 | PAGE: 16 | PAGE: Page 17 | OF: of 18 | SUBSCRIBE: Subscribe 19 | DISQUS: 20 | NOSCRIPT: Please enable JavaScript to view the comments powered by Disqus. 21 | ERROR: 22 | 404: 404, Page Not Found 23 | 24 | 25 | de: 26 | THEME_MASONRY: 27 | HOME: Startseite 28 | MENU_TITLE: Menü 29 | BLOG: 30 | CONTINUE_READING: Weiterlesen 31 | POST: 32 | MORE: 33 | AUTHOR: Mehr Beiträge 34 | SPEC_AUTHOR: Mehr Beiträge von 35 | SHARE: Beitrag teilen 36 | PAGINATION: 37 | OLDER: Ältere Beiträge 38 | NEWER: Neuere Beiträge 39 | PAGE: 40 | PAGE: Seite 41 | OF: von 42 | SUBSCRIBE: Abonnieren 43 | DISQUS: 44 | NOSCRIPT: Bitte aktivieren Sie JavaScript um Disquis-Kommentare anschauen zu können. 45 | ERROR: 46 | 404: Diese Seite existiert nicht (Fehler 404) 47 | 48 | 49 | fr: 50 | THEME_MASONRY: 51 | HOME: Accueil 52 | MENU_TITLE: Menu 53 | BLOG: 54 | CONTINUE_READING: Lire la suite 55 | POST: 56 | MORE: 57 | AUTHOR: Plus de posts 58 | SPEC_AUTHOR: Plus de posts de 59 | SHARE: Partager ce post 60 | PAGINATION: 61 | OLDER: Posts plus anciens 62 | NEWER: Posts plus récents 63 | PAGE: 64 | PAGE: Page 65 | OF: de 66 | SUBSCRIBE: S'abonner 67 | DISQUS: 68 | NOSCRIPT: Veuillez activer JavaScript pour afficher les commentaires Disquis. 69 | ERROR: 70 | 404: 404, Page introuvable 71 | 72 | 73 | pl: 74 | THEME_MASONRY: 75 | HOME: Strona domowa 76 | MENU_TITLE: Menu 77 | BLOG: 78 | CONTINUE_READING: Czytaj więcej 79 | POST: 80 | MORE: 81 | AUTHOR: Więcej artykułów tego autora 82 | SPEC_AUTHOR: Więcej artykułów od 83 | SHARE: Udostępnij ten artykuł 84 | PAGINATION: 85 | OLDER: Stare artykuły 86 | NEWER: Nowe artykuły 87 | PAGE: 88 | PAGE: Strona 89 | OF: z 90 | SUBSCRIBE: Subskrybuj 91 | DISQUS: 92 | NOSCRIPT: Proszę włączyć JavaScript, aby przeglądać komentarze obsługiwane przez Disqus. 93 | ERROR: 94 | 404: 404, Nie znaleziono strony -------------------------------------------------------------------------------- /masonry.php: -------------------------------------------------------------------------------- 1 | code, 60 | pre { 61 | background: #f5f2f0; 62 | } 63 | 64 | /* Inline code */ 65 | :not(pre) > code { 66 | padding: .1em; 67 | border-radius: .3em; 68 | white-space: normal; 69 | } 70 | 71 | .token.comment, 72 | .token.prolog, 73 | .token.doctype, 74 | .token.cdata { 75 | color: slategray; 76 | } 77 | 78 | .token.punctuation { 79 | color: #999; 80 | } 81 | 82 | .namespace { 83 | opacity: .7; 84 | } 85 | 86 | .token.property, 87 | .token.tag, 88 | .token.boolean, 89 | .token.number, 90 | .token.constant, 91 | .token.symbol, 92 | .token.deleted { 93 | color: #905; 94 | } 95 | 96 | .token.selector, 97 | .token.attr-name, 98 | .token.string, 99 | .token.char, 100 | .token.builtin, 101 | .token.inserted { 102 | color: #690; 103 | } 104 | 105 | .token.operator, 106 | .token.entity, 107 | .token.url, 108 | .language-css .token.string, 109 | .style .token.string { 110 | color: #a67f59; 111 | background: hsla(0, 0%, 100%, .5); 112 | } 113 | 114 | .token.atrule, 115 | .token.attr-value, 116 | .token.keyword { 117 | color: #07a; 118 | } 119 | 120 | .token.function { 121 | color: #DD4A68; 122 | } 123 | 124 | .token.regex, 125 | .token.important, 126 | .token.variable { 127 | color: #e90; 128 | } 129 | 130 | .token.important, 131 | .token.bold { 132 | font-weight: bold; 133 | } 134 | .token.italic { 135 | font-style: italic; 136 | } 137 | 138 | .token.entity { 139 | cursor: help; 140 | } 141 | } -------------------------------------------------------------------------------- /src/scss/screen.scss: -------------------------------------------------------------------------------- 1 | @import "global.scss"; 2 | 3 | article { 4 | display: block; 5 | } 6 | aside { 7 | display: block; 8 | } 9 | details { 10 | display: block; 11 | } 12 | figcaption { 13 | display: block; 14 | } 15 | figure { 16 | display: block; 17 | margin: 0; 18 | } 19 | footer { 20 | display: block; 21 | } 22 | header { 23 | display: block; 24 | } 25 | hgroup { 26 | display: block; 27 | } 28 | main { 29 | display: block; 30 | } 31 | nav { 32 | display: block; 33 | } 34 | section { 35 | display: block; 36 | } 37 | summary { 38 | display: block; 39 | } 40 | audio { 41 | display: inline-block; 42 | &:not([controls]) { 43 | display: none; 44 | height: 0; 45 | } 46 | } 47 | canvas { 48 | display: inline-block; 49 | } 50 | video { 51 | display: inline-block; 52 | } 53 | [hidden] { 54 | display: none; 55 | } 56 | template { 57 | display: none; 58 | } 59 | html { 60 | font-family: $font_1; 61 | -ms-text-size-adjust: 100%; 62 | -webkit-text-size-adjust: 100%; 63 | height: 100%; 64 | max-height: 100%; 65 | font-size: 62.5%; 66 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 67 | input[type="button"] { 68 | -webkit-appearance: button; 69 | cursor: pointer; 70 | } 71 | input[disabled] { 72 | cursor: default; 73 | } 74 | } 75 | body { 76 | margin: 0; 77 | height: 100%; 78 | max-height: 100%; 79 | font-family: $font_4, $font_5; 80 | letter-spacing: 0.01rem; 81 | font-size: 1.8rem; 82 | line-height: 1.75em; 83 | color: $color_cape_cod_approx; 84 | -webkit-font-feature-settings: 'kern' 1; 85 | -moz-font-feature-settings: 'kern' 1; 86 | -o-font-feature-settings: 'kern' 1; 87 | text-rendering: geometricPrecision; 88 | &.nav-opened { 89 | .site-wrapper { 90 | overflow-x: hidden; 91 | -webkit-transform: translate3D(-240px, 0, 0); 92 | -ms-transform: translate3D(-240px, 0, 0); 93 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 94 | transform: translate3D(-240px, 0, 0); 95 | -webkit-transition: -webkit-transform 0.3s ease; 96 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 97 | transition: transform 0.3s ease; 98 | } 99 | .nav-cover { 100 | position: fixed; 101 | top: 0; 102 | left: 0; 103 | right: 240px; 104 | bottom: 0; 105 | z-index: 200; 106 | } 107 | .nav { 108 | opacity: 1; 109 | -webkit-transition: -webkit-transform 0.3s ease, opacity 0s ease 0s; 110 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 111 | transition: transform 0.3s ease, opacity 0s ease 0s; 112 | -webkit-transform: translate3D(0, 0, 0); 113 | -ms-transform: translate3D(0, 0, 0); 114 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 115 | transform: translate3D(0, 0, 0); 116 | } 117 | } 118 | &.nav-closed .nav { 119 | -webkit-transform: translate3D(97px, 0, 0); 120 | -ms-transform: translate3D(97px, 0, 0); 121 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 122 | transform: translate3D(97px, 0, 0); 123 | } 124 | &:not(.post-template) .post-title { 125 | font-size: 3.6rem; 126 | } 127 | } 128 | a { 129 | background: transparent; 130 | color: $color_gravel_approx; 131 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 132 | transition: color 0.3s ease; 133 | &:focus { 134 | outline: thin dotted; 135 | } 136 | &:active { 137 | outline: 0; 138 | } 139 | &:hover { 140 | outline: 0; 141 | color: $color_woodsmoke_approx; 142 | } 143 | } 144 | h1 { 145 | font-size: 2em; 146 | margin: 0.67em 0; 147 | font-size: 5rem; 148 | letter-spacing: -2px; 149 | text-indent: -3px; 150 | @extend %extend_3; 151 | } 152 | abbr[title] { 153 | border-bottom: 1px dotted; 154 | } 155 | b { 156 | font-weight: 700; 157 | } 158 | strong { 159 | font-weight: 700; 160 | } 161 | dfn { 162 | font-style: italic; 163 | } 164 | hr { 165 | -moz-box-sizing: content-box; 166 | //Instead of the line below you could use @include box-sizing($bs) 167 | box-sizing: content-box; 168 | height: 0; 169 | display: block; 170 | height: 1px; 171 | border: 0; 172 | border-top: $gallery 1px solid; 173 | margin: 3.2em 0; 174 | padding: 0; 175 | } 176 | mark { 177 | background: $yellow; 178 | color: $black; 179 | background-color: $color_pale_prim_approx; 180 | } 181 | code { 182 | font-family: $font_2, $font_3; 183 | font-size: 1em; 184 | @extend %extend_5; 185 | } 186 | kbd { 187 | font-family: $font_2, $font_3; 188 | font-size: 1em; 189 | display: inline-block; 190 | margin-bottom: 0.4em; 191 | padding: 1px 8px; 192 | border: $color_celeste_approx 1px solid; 193 | color: $color_storm_dust_approx; 194 | //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) 195 | text-shadow: $white 0 1px 0; 196 | font-size: 0.9em; 197 | font-weight: 700; 198 | background: $wild_sand; 199 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 200 | border-radius: 4px; 201 | //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) 202 | box-shadow: 0 1px 0 $black_20, 0 1px 0 0 $white inset; 203 | } 204 | pre { 205 | font-family: $font_2, $font_3; 206 | font-size: 1em; 207 | white-space: pre-wrap; 208 | -moz-box-sizing: border-box; 209 | //Instead of the line below you could use @include box-sizing($bs) 210 | box-sizing: border-box; 211 | margin: 0 0 1.75em 0; 212 | border: $color_mystic_approx 1px solid; 213 | width: 100%; 214 | padding: 10px; 215 | font-family: $font_11, $font_12, $font_13; 216 | font-size: 0.9em; 217 | white-space: pre; 218 | overflow: auto; 219 | background: $color_alabaster_approx; 220 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 221 | border-radius: 3px; 222 | code { 223 | @extend %extend_6; 224 | } 225 | tt { 226 | @extend %extend_6; 227 | } 228 | } 229 | samp { 230 | font-family: $font_2, $font_3; 231 | font-size: 1em; 232 | } 233 | q { 234 | quotes: "\201C" "\201D" "\2018" "\2019"; 235 | } 236 | small { 237 | font-size: 80%; 238 | } 239 | sub { 240 | @extend %extend_1; 241 | bottom: -0.25em; 242 | } 243 | sup { 244 | @extend %extend_1; 245 | top: -0.5em; 246 | } 247 | img { 248 | border: 0; 249 | } 250 | fieldset { 251 | border: 1px solid $silver; 252 | margin: 0 2px; 253 | padding: 0.35em 0.625em 0.75em; 254 | } 255 | legend { 256 | border: 0; 257 | padding: 0; 258 | } 259 | button { 260 | @extend %extend_2; 261 | line-height: normal; 262 | text-transform: none; 263 | -webkit-appearance: button; 264 | cursor: pointer; 265 | } 266 | input { 267 | @extend %extend_2; 268 | line-height: normal; 269 | } 270 | select { 271 | @extend %extend_2; 272 | text-transform: none; 273 | } 274 | textarea { 275 | @extend %extend_2; 276 | overflow: auto; 277 | vertical-align: top; 278 | } 279 | input[type="reset"] { 280 | -webkit-appearance: button; 281 | cursor: pointer; 282 | } 283 | input[type="submit"] { 284 | -webkit-appearance: button; 285 | cursor: pointer; 286 | } 287 | button[disabled] { 288 | cursor: default; 289 | } 290 | input[type="checkbox"] { 291 | //Instead of the line below you could use @include box-sizing($bs) 292 | box-sizing: border-box; 293 | padding: 0; 294 | } 295 | input[type="radio"] { 296 | //Instead of the line below you could use @include box-sizing($bs) 297 | box-sizing: border-box; 298 | padding: 0; 299 | } 300 | input[type="search"] { 301 | -webkit-appearance: textfield; 302 | -moz-box-sizing: content-box; 303 | -webkit-box-sizing: content-box; 304 | //Instead of the line below you could use @include box-sizing($bs) 305 | box-sizing: content-box; 306 | } 307 | input[type="search"]::-webkit-search-cancel-button { 308 | -webkit-appearance: none; 309 | } 310 | input[type="search"]::-webkit-search-decoration { 311 | -webkit-appearance: none; 312 | } 313 | button::-moz-focus-inner { 314 | border: 0; 315 | padding: 0; 316 | } 317 | input::-moz-focus-inner { 318 | border: 0; 319 | padding: 0; 320 | } 321 | table { 322 | border-collapse: collapse; 323 | border-spacing: 0; 324 | -moz-box-sizing: border-box; 325 | //Instead of the line below you could use @include box-sizing($bs) 326 | box-sizing: border-box; 327 | margin: 1.75em 0; 328 | width: 100%; 329 | max-width: 100%; 330 | background-color: transparent; 331 | th { 332 | @extend %extend_7; 333 | color: $black; 334 | } 335 | td { 336 | @extend %extend_7; 337 | } 338 | tbody { 339 | + tbody { 340 | border-top: $gallery 2px solid; 341 | } 342 | > tr:nth-child(odd) { 343 | > td { 344 | background-color: $color_black_haze_approx; 345 | } 346 | > th { 347 | background-color: $color_black_haze_approx; 348 | } 349 | } 350 | } 351 | caption + thead tr:first-child { 352 | th { 353 | border-top: 0; 354 | } 355 | td { 356 | border-top: 0; 357 | } 358 | } 359 | colgroup + thead tr:first-child { 360 | th { 361 | border-top: 0; 362 | } 363 | td { 364 | border-top: 0; 365 | } 366 | } 367 | thead:first-child tr:first-child { 368 | th { 369 | border-top: 0; 370 | } 371 | td { 372 | border-top: 0; 373 | } 374 | } 375 | table table { 376 | background-color: $white; 377 | } 378 | &.plain tbody > tr:nth-child(odd) { 379 | > td { 380 | background: transparent; 381 | } 382 | > th { 383 | background: transparent; 384 | } 385 | } 386 | } 387 | @font-face { 388 | font-family: "casper-icons"; 389 | src:url("../fonts/casper-icons.eot?v=1"); 390 | src:url("../fonts/casper-icons.eot?v=1#iefix") format("embedded-opentype"), 391 | url("../fonts/casper-icons.woff?v=1") format("woff"), 392 | url("../fonts/casper-icons.ttf?v=1") format("truetype"), 393 | url("../fonts/casper-icons.svg?v=1#icons") format("svg"); 394 | font-weight: normal; 395 | font-style: normal; 396 | } 397 | 398 | /* Apply these base styles to all icons */ 399 | [class^="icon-"]:before, [class*=" icon-"]:before { 400 | font-family: "casper-icons", "Open Sans", sans-serif; 401 | speak: none; 402 | font-style: normal; 403 | font-weight: normal; 404 | font-variant: normal; 405 | text-transform: none; 406 | line-height: 1; 407 | text-decoration: none !important; 408 | -webkit-font-smoothing: antialiased; 409 | -moz-osx-font-smoothing: grayscale; 410 | } 411 | ::-moz-selection { 412 | background: $color_mabel_approx; 413 | } 414 | ::selection { 415 | background: $color_mabel_approx; 416 | } 417 | h2 { 418 | @extend %extend_3; 419 | font-size: 3.6rem; 420 | letter-spacing: -1px; 421 | } 422 | h3 { 423 | @extend %extend_3; 424 | font-size: 3rem; 425 | } 426 | h4 { 427 | @extend %extend_3; 428 | font-size: 2.5rem; 429 | } 430 | h5 { 431 | @extend %extend_3; 432 | font-size: 2rem; 433 | } 434 | h6 { 435 | @extend %extend_3; 436 | font-size: 2rem; 437 | } 438 | p { 439 | @extend %extend_4; 440 | } 441 | ul { 442 | @extend %extend_4; 443 | padding-left: 3rem; 444 | ul { 445 | margin: 0 0 0.4em 0; 446 | padding-left: 2em; 447 | } 448 | ol { 449 | margin: 0 0 0.4em 0; 450 | padding-left: 2em; 451 | } 452 | } 453 | ol { 454 | @extend %extend_4; 455 | padding-left: 3rem; 456 | ol { 457 | margin: 0 0 0.4em 0; 458 | padding-left: 2em; 459 | } 460 | ul { 461 | margin: 0 0 0.4em 0; 462 | padding-left: 2em; 463 | } 464 | } 465 | dl { 466 | @extend %extend_4; 467 | dt { 468 | float: left; 469 | width: 180px; 470 | overflow: hidden; 471 | clear: left; 472 | text-align: right; 473 | text-overflow: ellipsis; 474 | white-space: nowrap; 475 | font-weight: 700; 476 | margin-bottom: 1em; 477 | } 478 | dd { 479 | margin-left: 200px; 480 | margin-bottom: 1em; 481 | } 482 | } 483 | li { 484 | margin: 0.4em 0; 485 | li { 486 | margin: 0; 487 | } 488 | } 489 | blockquote { 490 | -moz-box-sizing: border-box; 491 | //Instead of the line below you could use @include box-sizing($bs) 492 | box-sizing: border-box; 493 | margin: 1.75em 0 1.75em 0; 494 | padding: 0 0 0 1.75em; 495 | border-left: $color_gravel_approx 0.4em solid; 496 | p { 497 | margin: 0.8em 0; 498 | font-style: italic; 499 | } 500 | small { 501 | display: inline-block; 502 | margin: 0.8em 0 0.8em 1.5em; 503 | font-size: 0.9em; 504 | color: $color_celeste_approx; 505 | &:before { 506 | content: "\2014 \00A0"; 507 | } 508 | } 509 | cite { 510 | font-weight: 700; 511 | a { 512 | font-weight: normal; 513 | } 514 | } 515 | } 516 | tt { 517 | @extend %extend_5; 518 | } 519 | iframe { 520 | display: block; 521 | margin: 1.75em 0; 522 | } 523 | .fluid-width-video-wrapper { 524 | display: block; 525 | margin: 1.75em 0; 526 | iframe { 527 | margin: 0; 528 | } 529 | } 530 | .clearfix { 531 | zoom: 1; 532 | clear: both; 533 | &:before { 534 | content: " "; 535 | display: table; 536 | } 537 | &:after { 538 | content: " "; 539 | display: table; 540 | clear: both; 541 | } 542 | } 543 | .hidden { 544 | text-indent: -9999px; 545 | visibility: hidden; 546 | display: none; 547 | } 548 | .inner { 549 | position: relative; 550 | width: 80%; 551 | max-width: 710px; 552 | margin: 0 auto; 553 | } 554 | .vertical { 555 | display: table-cell; 556 | vertical-align: middle; 557 | } 558 | .site-wrapper { 559 | position: relative; 560 | z-index: 10; 561 | min-height: 100%; 562 | background-color: $color_wild_sand_approx; 563 | -webkit-transition: -webkit-transform 0.5s ease; 564 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 565 | transition: transform 0.5s ease; 566 | } 567 | .main-header { 568 | position: relative; 569 | display: table; 570 | width: 100%; 571 | height: 100vh; 572 | margin-bottom: 5rem; 573 | text-align: center; 574 | background: $color_log_cabin_approx no-repeat center center; 575 | background-size: cover; 576 | overflow: hidden; 577 | .inner { 578 | width: 80%; 579 | } 580 | } 581 | .main-nav { 582 | position: relative; 583 | padding: 35px 40px; 584 | margin: 0 0 30px 0; 585 | a { 586 | text-decoration: none; 587 | font-family: $font_14, $font_15; 588 | } 589 | &.overlay { 590 | position: absolute; 591 | top: 0; 592 | left: 0; 593 | right: 0; 594 | height: 70px; 595 | border: none; 596 | background: linear-gradient(to bottom, $black_20 0,rgba(0,0,0,0) 100%); 597 | } 598 | } 599 | .nav { 600 | position: fixed; 601 | top: 0; 602 | right: 0; 603 | bottom: 0; 604 | z-index: 5; 605 | width: 240px; 606 | opacity: 0; 607 | background: $color_woodsmoke_approx; 608 | margin-bottom: 0; 609 | text-align: left; 610 | overflow-y: auto; 611 | -webkit-transition: -webkit-transform 0.5s ease, opacity 0.3s ease 0.7s; 612 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 613 | transition: transform 0.5s ease, opacity 0.3s ease 0.7s; 614 | ul { 615 | padding: 90px 9% 5%; 616 | list-style: none; 617 | counter-reset: item; 618 | } 619 | li { 620 | margin: 0; 621 | &:before { 622 | display: block; 623 | float: right; 624 | padding-right: 4%; 625 | padding-left: 5px; 626 | text-align: right; 627 | font-size: 1.2rem; 628 | vertical-align: bottom; 629 | color: $color_pink_swan_approx; 630 | content: counter(item, lower-roman); 631 | counter-increment: item; 632 | } 633 | a { 634 | text-decoration: none; 635 | line-height: 1.4; 636 | font-size: 1.4rem; 637 | display: block; 638 | padding: 0.6rem 4%; 639 | overflow: hidden; 640 | white-space: nowrap; 641 | text-overflow: ellipsis; 642 | &:after { 643 | display: inline-block; 644 | content: " ......................................................."; 645 | color: $white_20; 646 | margin-left: 5px; 647 | } 648 | } 649 | &.nav-current a { 650 | color: $white; 651 | } 652 | } 653 | .nav-current { 654 | &:before { 655 | color: $white; 656 | } 657 | a:after { 658 | content: " "; 659 | border-bottom: $white_50 1px solid; 660 | width: 100%; 661 | height: 1px; 662 | } 663 | } 664 | a { 665 | &:link { 666 | color: $color_pink_swan_approx; 667 | } 668 | &:visited { 669 | color: $color_pink_swan_approx; 670 | } 671 | &:hover { 672 | color: $white; 673 | } 674 | &:active { 675 | color: $white; 676 | } 677 | &:focus { 678 | color: $white; 679 | } 680 | } 681 | } 682 | .nav-title { 683 | position: absolute; 684 | top: 45px; 685 | left: 30px; 686 | font-size: 16px; 687 | font-weight: 100; 688 | text-transform: uppercase; 689 | color: $white; 690 | } 691 | .nav-close { 692 | position: absolute; 693 | top: 38px; 694 | right: 25px; 695 | width: 20px; 696 | height: 20px; 697 | padding: 0; 698 | font-size: 10px; 699 | &:focus { 700 | outline: 0; 701 | } 702 | &:before { 703 | @extend %extend_8; 704 | -webkit-transform: rotate(45deg); 705 | -ms-transform: rotate(45deg); 706 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 707 | transform: rotate(45deg); 708 | } 709 | &:after { 710 | @extend %extend_8; 711 | -webkit-transform: rotate(-45deg); 712 | -ms-transform: rotate(-45deg); 713 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 714 | transform: rotate(-45deg); 715 | } 716 | &:hover { 717 | &:before { 718 | background: $white; 719 | } 720 | &:after { 721 | background: $white; 722 | } 723 | } 724 | } 725 | .subscribe-button { 726 | -webkit-box-sizing: border-box; 727 | -moz-box-sizing: border-box; 728 | //Instead of the line below you could use @include box-sizing($bs) 729 | box-sizing: border-box; 730 | display: block; 731 | position: absolute; 732 | bottom: 30px; 733 | left: 30px; 734 | right: 30px; 735 | height: 38px; 736 | padding: 0 20px; 737 | color: $color_woodsmoke_approx !important; 738 | text-align: center; 739 | font-size: 12px; 740 | font-family: $font_16, $font_17; 741 | text-transform: uppercase; 742 | text-decoration: none; 743 | line-height: 35px; 744 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 745 | border-radius: 3px; 746 | background: $white; 747 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 748 | transition: all ease 0.3s; 749 | &:before { 750 | font-size: 9px; 751 | margin-right: 6px; 752 | } 753 | } 754 | .scroll-down { 755 | display: block; 756 | position: absolute; 757 | z-index: 100; 758 | bottom: 45px; 759 | left: 50%; 760 | margin-left: -16px; 761 | width: 34px; 762 | height: 34px; 763 | font-size: 34px; 764 | text-align: center; 765 | text-decoration: none; 766 | color: $white_70; 767 | -webkit-transform: rotate(-90deg); 768 | -ms-transform: rotate(-90deg); 769 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 770 | transform: rotate(-90deg); 771 | -webkit-animation: bounce 4s 2s infinite; 772 | animation: bounce 4s 2s infinite; 773 | &:hover { 774 | color: $white; 775 | -webkit-animation: none; 776 | animation: none; 777 | } 778 | } 779 | .home-template { 780 | .page-title { 781 | -webkit-animation: fade-in-down 0.6s; 782 | animation: fade-in-down 0.6s; 783 | -webkit-animation-delay: 0.2s; 784 | animation-delay: 0.2s; 785 | } 786 | .page-description { 787 | -webkit-animation: fade-in-down 0.9s; 788 | animation: fade-in-down 0.9s; 789 | -webkit-animation-delay: 0.1s; 790 | animation-delay: 0.1s; 791 | } 792 | .main-header:after { 793 | display: block; 794 | content: " "; 795 | width: 150px; 796 | height: 130px; 797 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 798 | border-radius: 100%; 799 | position: absolute; 800 | bottom: 0; 801 | left: 50%; 802 | margin-left: -75px; 803 | background: radial-gradient(ellipse at center, $black_15 0,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%); 804 | } 805 | } 806 | .no-cover { 807 | .scroll-down { 808 | display: none; 809 | } 810 | &.main-header { 811 | min-height: 160px; 812 | max-height: 40vh; 813 | background: $color_black_haze_approx; 814 | &:after { 815 | display: none; 816 | } 817 | } 818 | .page-title { 819 | color: $black_80; 820 | } 821 | .page-description { 822 | color: $black_50; 823 | } 824 | .main-nav.overlay { 825 | background: none; 826 | } 827 | &.post-head.main-header { 828 | height: 85px; 829 | min-height: 0; 830 | margin-bottom: 0; 831 | background: transparent; 832 | } 833 | &.author-head.main-header { 834 | height: 10vh; 835 | min-height: 100px; 836 | background: transparent; 837 | } 838 | } 839 | .archive-template { 840 | .scroll-down { 841 | display: none; 842 | } 843 | .main-header { 844 | max-height: 30vh; 845 | &:after { 846 | display: none; 847 | } 848 | } 849 | .extra-pagination { 850 | display: block; 851 | } 852 | .author-profile .author-meta { 853 | display: none; 854 | } 855 | } 856 | .blog-logo { 857 | display: block; 858 | float: left; 859 | background: none !important; 860 | border: none !important; 861 | img { 862 | -webkit-box-sizing: border-box; 863 | -moz-box-sizing: border-box; 864 | //Instead of the line below you could use @include box-sizing($bs) 865 | box-sizing: border-box; 866 | display: block; 867 | height: 38px; 868 | padding: 1px 0 5px; 869 | width: auto; 870 | } 871 | } 872 | .menu-button { 873 | -webkit-box-sizing: border-box; 874 | -moz-box-sizing: border-box; 875 | //Instead of the line below you could use @include box-sizing($bs) 876 | box-sizing: border-box; 877 | display: inline-block; 878 | float: right; 879 | height: 38px; 880 | padding: 0 15px; 881 | border-style: solid; 882 | border-width: 1px; 883 | opacity: 1; 884 | text-align: center; 885 | font-size: 12px; 886 | text-transform: uppercase; 887 | line-height: 35px; 888 | white-space: nowrap; 889 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 890 | border-radius: 3px; 891 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 892 | transition: all 0.5s ease; 893 | &:before { 894 | font-size: 12px; 895 | font-weight: bold; 896 | margin-right: 6px; 897 | position: relative; 898 | top: 1px; 899 | } 900 | &:hover { 901 | background: $white; 902 | } 903 | &:focus { 904 | outline: 0; 905 | } 906 | } 907 | .nav-closed { 908 | .menu-button { 909 | color: $white; 910 | border-color: $white_60; 911 | &:hover { 912 | color: $color_log_cabin_approx; 913 | } 914 | } 915 | .no-cover .menu-button { 916 | border-color: $color_loblolly_approx; 917 | color: $color_hit_gray_approx; 918 | &:hover { 919 | border-color: $color_fuscous_gray_approx; 920 | color: $color_fuscous_gray_approx; 921 | } 922 | } 923 | } 924 | .page-title { 925 | margin: 10px 0; 926 | font-size: 5rem; 927 | letter-spacing: -1px; 928 | font-weight: 700; 929 | font-family: $font_18, $font_19; 930 | color: $white; 931 | } 932 | .page-description { 933 | margin: 0; 934 | font-size: 2rem; 935 | line-height: 1.5em; 936 | font-weight: 400; 937 | font-family: $font_20, $font_21; 938 | letter-spacing: 0.01rem; 939 | color: $white_80; 940 | } 941 | .post-template { 942 | .post { 943 | position: relative; 944 | width: 80%; 945 | max-width: 710px; 946 | margin: 4rem auto; 947 | padding-bottom: 4rem; 948 | border-bottom: $color_aqua_haze_approx 1px solid; 949 | word-wrap: break-word; 950 | margin-top: 0; 951 | border-bottom: none; 952 | padding-bottom: 0; 953 | &:after { 954 | display: block; 955 | content: ""; 956 | width: 7px; 957 | height: 7px; 958 | border: $color_aqua_squeeze_approx 1px solid; 959 | position: absolute; 960 | bottom: -5px; 961 | left: 50%; 962 | margin-left: -5px; 963 | background: $white; 964 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 965 | border-radius: 100%; 966 | //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) 967 | box-shadow: $white 0 0 0 5px; 968 | display: none; 969 | } 970 | } 971 | .post-header { 972 | margin-bottom: 3.4rem; 973 | 974 | &__breadcrumb { 975 | list-style: none; 976 | margin: 0 0 1em 0; 977 | padding: 0; 978 | font-size: 0.8em; 979 | 980 | li { 981 | display: inline-block; 982 | font-style: italic; 983 | 984 | a { 985 | font-style: normal; 986 | } 987 | } 988 | } 989 | } 990 | .post-title { 991 | margin-bottom: 0; 992 | } 993 | .post-meta { 994 | margin: 0; 995 | } 996 | .post-date { 997 | padding: 0; 998 | margin: 0; 999 | border: none; 1000 | } 1001 | .content { 1002 | overflow: hidden; 1003 | } 1004 | } 1005 | .read-more { 1006 | text-decoration: none; 1007 | font-weight: 700; 1008 | position: relative; 1009 | display: inline-block; 1010 | &:after { 1011 | content: '\003e'; 1012 | display: inline-block; 1013 | font-size: 1.5em; 1014 | color: $color_rose_approx; 1015 | position: absolute; 1016 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 1017 | transition: all 0.2s ease; 1018 | } 1019 | &:hover:after { 1020 | margin-left: 5px; 1021 | } 1022 | } 1023 | .post-meta { 1024 | display: block; 1025 | margin: 1.75rem 0 0 0; 1026 | font-family: $font_22, $font_23; 1027 | font-size: 1.5rem; 1028 | line-height: 2.2rem; 1029 | color: $color_hit_gray_approx; 1030 | a { 1031 | color: $color_hit_gray_approx; 1032 | text-decoration: none; 1033 | &:hover { 1034 | text-decoration: underline; 1035 | } 1036 | } 1037 | } 1038 | .author-thumb { 1039 | width: 24px; 1040 | height: 24px; 1041 | float: left; 1042 | margin-right: 9px; 1043 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 1044 | border-radius: 100%; 1045 | } 1046 | .user-meta { 1047 | position: relative; 1048 | padding: 0.3rem 40px 0 100px; 1049 | min-height: 77px; 1050 | } 1051 | .post-date { 1052 | display: inline-block; 1053 | margin-left: 8px; 1054 | padding-left: 12px; 1055 | border-left: $color_geyser_approx 1px solid; 1056 | text-transform: uppercase; 1057 | font-size: 1.3rem; 1058 | white-space: nowrap; 1059 | } 1060 | .user-image { 1061 | position: absolute; 1062 | top: 0; 1063 | left: 0; 1064 | } 1065 | .user-name { 1066 | display: block; 1067 | font-weight: 700; 1068 | } 1069 | .user-bio { 1070 | display: block; 1071 | max-width: 440px; 1072 | font-size: 1.4rem; 1073 | line-height: 1.5em; 1074 | } 1075 | .publish-meta { 1076 | position: absolute; 1077 | top: 0; 1078 | right: 0; 1079 | padding: 4.3rem 0 4rem 0; 1080 | text-align: right; 1081 | } 1082 | .publish-heading { 1083 | display: block; 1084 | font-weight: 700; 1085 | } 1086 | .publish-date { 1087 | display: block; 1088 | font-size: 1.4rem; 1089 | line-height: 1.5em; 1090 | } 1091 | .footnotes { 1092 | font-style: italic; 1093 | font-size: 1.3rem; 1094 | line-height: 1.6em; 1095 | li { 1096 | margin: 0.6rem 0; 1097 | } 1098 | p { 1099 | margin: 0; 1100 | a:last-child { 1101 | text-decoration: none; 1102 | } 1103 | } 1104 | } 1105 | .post-footer { 1106 | position: relative; 1107 | margin: 6rem 0 0; 1108 | padding: 6rem 0 0; 1109 | border-top: $color_aqua_haze_approx 1px solid; 1110 | h4 { 1111 | font-size: 1.8rem; 1112 | margin: 0; 1113 | a { 1114 | color: $color_mine_shaft_approx; 1115 | text-decoration: none; 1116 | &:hover { 1117 | text-decoration: underline; 1118 | } 1119 | } 1120 | } 1121 | p { 1122 | margin: 1rem 0; 1123 | font-size: 1.4rem; 1124 | line-height: 1.75em; 1125 | } 1126 | .author { 1127 | margin-right: 180px; 1128 | } 1129 | .share { 1130 | position: absolute; 1131 | top: 6rem; 1132 | right: 0; 1133 | width: 140px; 1134 | a { 1135 | font-size: 1.8rem; 1136 | display: inline-block; 1137 | margin: 1rem 1.6rem 1.6rem 0; 1138 | color: $color_submarine_approx; 1139 | text-decoration: none; 1140 | } 1141 | .icon-twitter:hover { 1142 | color: $color_picton_blue_approx; 1143 | } 1144 | .icon-facebook:hover { 1145 | color: $color_azure_approx; 1146 | } 1147 | .icon-google-plus:hover { 1148 | color: $color_valencia_approx; 1149 | } 1150 | } 1151 | } 1152 | .author-meta { 1153 | padding: 0; 1154 | margin: 0; 1155 | list-style: none; 1156 | font-size: 1.4rem; 1157 | line-height: 1; 1158 | font-style: italic; 1159 | color: $color_hit_gray_approx; 1160 | margin: 1.6rem 0; 1161 | a { 1162 | color: $color_hit_gray_approx; 1163 | text-decoration: none; 1164 | &:hover { 1165 | color: $color_woodsmoke_approx; 1166 | } 1167 | } 1168 | span { 1169 | display: inline-block; 1170 | margin: 0 2rem 1rem 0; 1171 | word-wrap: break-word; 1172 | } 1173 | } 1174 | .author-profile { 1175 | padding: 0 15px 5rem; 1176 | border-bottom: $color_aqua_haze_approx 1px solid; 1177 | text-align: center; 1178 | &:after { 1179 | display: block; 1180 | content: ""; 1181 | width: 7px; 1182 | height: 7px; 1183 | border: $color_aqua_squeeze_approx 1px solid; 1184 | position: absolute; 1185 | bottom: -5px; 1186 | left: 50%; 1187 | margin-left: -5px; 1188 | background: $white; 1189 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 1190 | border-radius: 100%; 1191 | //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) 1192 | box-shadow: $white 0 0 0 5px; 1193 | } 1194 | .author-image { 1195 | position: relative; 1196 | left: auto; 1197 | top: auto; 1198 | width: 120px; 1199 | height: 120px; 1200 | padding: 3px; 1201 | margin: -100px auto 0 auto; 1202 | //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) 1203 | box-shadow: none; 1204 | } 1205 | .author-meta { 1206 | margin: 2rem 0; 1207 | font-family: $font_24, $font_25; 1208 | letter-spacing: 0.01rem; 1209 | font-size: 1.7rem; 1210 | } 1211 | } 1212 | .author-image { 1213 | -webkit-box-sizing: border-box; 1214 | -moz-box-sizing: border-box; 1215 | //Instead of the line below you could use @include box-sizing($bs) 1216 | box-sizing: border-box; 1217 | display: block; 1218 | position: absolute; 1219 | top: -40px; 1220 | left: 50%; 1221 | margin-left: -40px; 1222 | width: 80px; 1223 | height: 80px; 1224 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 1225 | border-radius: 100%; 1226 | overflow: hidden; 1227 | padding: 6px; 1228 | background: $white; 1229 | z-index: 2; 1230 | //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) 1231 | box-shadow: $color_aqua_squeeze_approx 0 0 0 1px; 1232 | .img { 1233 | position: relative; 1234 | display: block; 1235 | width: 100%; 1236 | height: 100%; 1237 | background-size: cover; 1238 | background-position: center center; 1239 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 1240 | border-radius: 100%; 1241 | } 1242 | } 1243 | .author-title { 1244 | margin: 1.5rem 0 1rem; 1245 | } 1246 | .author-bio { 1247 | font-size: 1.8rem; 1248 | line-height: 1.5em; 1249 | font-weight: 200; 1250 | color: $color_scarpa_flow_approx; 1251 | letter-spacing: 0; 1252 | text-indent: 0; 1253 | } 1254 | .read-next { 1255 | display: -webkit-box; 1256 | display: -webkit-flex; 1257 | display: -ms-flexbox; 1258 | display: flex; 1259 | -webkit-box-align: stretch; 1260 | -webkit-align-items: stretch; 1261 | -ms-flex-align: stretch; 1262 | align-items: stretch; 1263 | margin-top: 10rem; 1264 | + .site-footer { 1265 | position: absolute; 1266 | bottom: 0; 1267 | left: 0; 1268 | right: 0; 1269 | margin: 0; 1270 | } 1271 | } 1272 | .read-next-story { 1273 | display: -webkit-box; 1274 | display: -webkit-flex; 1275 | display: -ms-flexbox; 1276 | display: flex; 1277 | -webkit-box-flex: 1; 1278 | -webkit-flex-grow: 1; 1279 | -ms-flex-positive: 1; 1280 | flex-grow: 1; 1281 | min-width: 50%; 1282 | text-decoration: none; 1283 | position: relative; 1284 | text-align: center; 1285 | color: $white; 1286 | background: $color_log_cabin_approx no-repeat center center; 1287 | background-size: cover; 1288 | overflow: hidden; 1289 | &:hover { 1290 | &:before { 1291 | background: $black_80; 1292 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 1293 | transition: all 0.2s ease; 1294 | } 1295 | .post:before { 1296 | color: $color_log_cabin_approx; 1297 | background: $white; 1298 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 1299 | transition: all 0.2s ease; 1300 | } 1301 | } 1302 | &:before { 1303 | content: ""; 1304 | display: block; 1305 | position: absolute; 1306 | top: 0; 1307 | right: 0; 1308 | bottom: 0; 1309 | left: 0; 1310 | background: $black_70; 1311 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 1312 | transition: all 0.5s ease; 1313 | } 1314 | .post { 1315 | padding-top: 6rem; 1316 | padding-bottom: 6rem; 1317 | &:before { 1318 | content: "Read This Next"; 1319 | padding: 4px 10px 5px; 1320 | text-transform: uppercase; 1321 | font-size: 1.1rem; 1322 | font-family: $font_26, $font_27; 1323 | color: $white_80; 1324 | border: $white_50 1px solid; 1325 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 1326 | border-radius: 4px; 1327 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 1328 | transition: all 0.5s ease; 1329 | } 1330 | } 1331 | h2 { 1332 | margin-top: 1rem; 1333 | color: $white; 1334 | } 1335 | p { 1336 | margin: 0; 1337 | color: $white_80; 1338 | } 1339 | &.no-cover { 1340 | background: $color_black_haze_approx; 1341 | &:before { 1342 | display: none; 1343 | } 1344 | h2 { 1345 | color: $black_80; 1346 | } 1347 | p { 1348 | color: $black_50; 1349 | } 1350 | .post:before { 1351 | color: $black_50; 1352 | border-color: $black_20; 1353 | } 1354 | + .read-next-story.no-cover { 1355 | border-left: $color_arapawa_4_approx 1px solid; 1356 | } 1357 | } 1358 | &.prev .post:before { 1359 | content: "You Might Enjoy"; 1360 | } 1361 | } 1362 | .gist { 1363 | table { 1364 | margin: 0; 1365 | font-size: 1.4rem; 1366 | } 1367 | td { 1368 | line-height: 1.4; 1369 | } 1370 | .line-number { 1371 | min-width: 25px; 1372 | } 1373 | } 1374 | .pagination { 1375 | position: relative; 1376 | width: 80%; 1377 | max-width: 710px; 1378 | margin: 4rem auto; 1379 | font-family: $font_28, $font_29; 1380 | font-size: 1.3rem; 1381 | color: $color_hit_gray_approx; 1382 | text-align: center; 1383 | a { 1384 | color: $color_hit_gray_approx; 1385 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 1386 | transition: all 0.2s ease; 1387 | } 1388 | } 1389 | .older-posts { 1390 | @extend %extend_9; 1391 | right: 0; 1392 | &:hover { 1393 | color: $color_oslo_gray_approx; 1394 | border-color: $color_pewter_approx; 1395 | } 1396 | } 1397 | .newer-posts { 1398 | @extend %extend_9; 1399 | left: 0; 1400 | &:hover { 1401 | color: $color_oslo_gray_approx; 1402 | border-color: $color_pewter_approx; 1403 | } 1404 | } 1405 | .page-number { 1406 | display: inline-block; 1407 | padding: 2px 0; 1408 | min-width: 100px; 1409 | } 1410 | .extra-pagination { 1411 | display: none; 1412 | border-bottom: $color_aqua_haze_approx 1px solid; 1413 | &:after { 1414 | display: block; 1415 | content: ""; 1416 | width: 7px; 1417 | height: 7px; 1418 | border: $color_aqua_squeeze_approx 1px solid; 1419 | position: absolute; 1420 | bottom: -5px; 1421 | left: 50%; 1422 | margin-left: -5px; 1423 | background: $white; 1424 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 1425 | border-radius: 100%; 1426 | //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) 1427 | box-shadow: $white 0 0 0 5px; 1428 | } 1429 | .pagination { 1430 | width: auto; 1431 | } 1432 | } 1433 | .site-footer { 1434 | position: relative; 1435 | margin: 8rem 0 0; 1436 | padding: 1rem 15px; 1437 | font-family: $font_30, $font_31; 1438 | font-size: 1rem; 1439 | line-height: 1.75em; 1440 | color: $color_submarine_approx; 1441 | a { 1442 | color: $color_submarine_approx; 1443 | text-decoration: none; 1444 | font-weight: bold; 1445 | &:hover { 1446 | border-bottom: $color_submarine_approx 1px solid; 1447 | } 1448 | } 1449 | } 1450 | .poweredby { 1451 | display: block; 1452 | width: 45%; 1453 | float: right; 1454 | text-align: right; 1455 | } 1456 | .copyright { 1457 | display: block; 1458 | width: 45%; 1459 | float: left; 1460 | } 1461 | @media only screen and(max-width: 900px) { 1462 | blockquote { 1463 | margin-left: 0; 1464 | } 1465 | .main-header { 1466 | -webkit-box-sizing: border-box; 1467 | -moz-box-sizing: border-box; 1468 | //Instead of the line below you could use @include box-sizing($bs) 1469 | box-sizing: border-box; 1470 | height: auto; 1471 | min-height: 240px; 1472 | height: 60vh; 1473 | padding: 15% 0; 1474 | } 1475 | .scroll-down { 1476 | display: none; 1477 | } 1478 | .page-title { 1479 | font-size: 4rem; 1480 | letter-spacing: -1px; 1481 | } 1482 | .page-description { 1483 | font-size: 1.8rem; 1484 | line-height: 1.5em; 1485 | } 1486 | .post { 1487 | font-size: 0.95em; 1488 | } 1489 | hr { 1490 | margin: 2.4em 0; 1491 | } 1492 | ol { 1493 | padding-left: 2em; 1494 | } 1495 | ul { 1496 | padding-left: 2em; 1497 | } 1498 | h1 { 1499 | font-size: 4.5rem; 1500 | text-indent: -2px; 1501 | } 1502 | h2 { 1503 | font-size: 3.6rem; 1504 | } 1505 | h3 { 1506 | font-size: 3.1rem; 1507 | } 1508 | h4 { 1509 | font-size: 2.5rem; 1510 | } 1511 | h5 { 1512 | font-size: 2.2rem; 1513 | } 1514 | h6 { 1515 | font-size: 1.8rem; 1516 | } 1517 | .author-profile { 1518 | padding-bottom: 4rem; 1519 | .author-bio { 1520 | font-size: 1.6rem; 1521 | } 1522 | .author-meta span { 1523 | font-size: 1.6rem; 1524 | } 1525 | } 1526 | .no-cover { 1527 | &.post-head.main-header { 1528 | height: 55px; 1529 | padding: 0; 1530 | } 1531 | &.author-head.main-header { 1532 | padding: 0; 1533 | } 1534 | } 1535 | .read-next { 1536 | -webkit-box-orient: vertical; 1537 | -webkit-box-direction: normal; 1538 | -webkit-flex-direction: column; 1539 | -ms-flex-direction: column; 1540 | flex-direction: column; 1541 | margin-top: 4rem; 1542 | p { 1543 | display: none; 1544 | } 1545 | } 1546 | .home-template .main-header:after { 1547 | display: none; 1548 | } 1549 | .archive-template .main-header { 1550 | min-height: 180px; 1551 | padding: 10% 0; 1552 | } 1553 | .blog-logo img { 1554 | padding: 4px 0; 1555 | } 1556 | body:not(.post-template) .post-title { 1557 | font-size: 3.2rem; 1558 | } 1559 | .author-meta span { 1560 | display: block; 1561 | margin: 1.5rem 0; 1562 | } 1563 | .post-head.main-header { 1564 | height: 45vh; 1565 | } 1566 | .tag-head.main-header { 1567 | height: 30vh; 1568 | } 1569 | .author-head.main-header { 1570 | height: 30vh; 1571 | } 1572 | .read-next-story.no-cover + .read-next-story.no-cover { 1573 | border-top: $color_arapawa_6_approx 1px solid; 1574 | border-left: none; 1575 | } 1576 | } 1577 | @media only screen and(max-width: 500px) { 1578 | .main-header { 1579 | margin-bottom: 15px; 1580 | height: 40vh; 1581 | } 1582 | .no-cover { 1583 | &.main-header { 1584 | height: 30vh; 1585 | } 1586 | .main-nav.overlay { 1587 | background: none; 1588 | .menu-button { 1589 | border: none; 1590 | } 1591 | } 1592 | } 1593 | .main-nav { 1594 | padding: 5px; 1595 | margin-bottom: 2rem; 1596 | &.overlay { 1597 | .menu-button { 1598 | border-color: transparent; 1599 | } 1600 | a:hover { 1601 | color: $white; 1602 | border-color: transparent; 1603 | background: transparent; 1604 | } 1605 | } 1606 | } 1607 | .blog-logo { 1608 | padding: 5px; 1609 | img { 1610 | height: 30px; 1611 | } 1612 | } 1613 | .menu-button { 1614 | padding: 0 5px; 1615 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 1616 | border-radius: 0; 1617 | border-width: 0; 1618 | color: $color_mine_shaft_approx; 1619 | background: transparent; 1620 | &:hover { 1621 | color: $color_mine_shaft_approx; 1622 | border-color: transparent; 1623 | background: none; 1624 | } 1625 | } 1626 | body { 1627 | &.nav-opened .menu-button { 1628 | background: none; 1629 | border: transparent; 1630 | } 1631 | &:not(.post-template) .post-title { 1632 | font-size: 2.5rem; 1633 | } 1634 | } 1635 | .nav-title { 1636 | top: 25px; 1637 | } 1638 | .nav-close { 1639 | position: absolute; 1640 | top: 18px; 1641 | } 1642 | .inner { 1643 | width: auto; 1644 | margin: 2rem auto; 1645 | } 1646 | .pagination { 1647 | width: auto; 1648 | margin: 2rem auto; 1649 | } 1650 | .post { 1651 | width: auto; 1652 | margin-top: 2rem; 1653 | margin-bottom: 2rem; 1654 | margin-left: 16px; 1655 | margin-right: 16px; 1656 | padding-bottom: 2rem; 1657 | line-height: 1.65em; 1658 | } 1659 | .post-date { 1660 | display: none; 1661 | } 1662 | .post-template { 1663 | .post-header { 1664 | margin-bottom: 2rem; 1665 | } 1666 | .post-date { 1667 | display: inline-block; 1668 | } 1669 | .site-footer { 1670 | margin-top: 0; 1671 | } 1672 | } 1673 | hr { 1674 | margin: 1.75em 0; 1675 | } 1676 | p { 1677 | font-size: 0.95em; 1678 | margin: 0 0 2.5rem 0; 1679 | } 1680 | ul { 1681 | font-size: 0.95em; 1682 | margin: 0 0 2.5rem 0; 1683 | } 1684 | ol { 1685 | font-size: 0.95em; 1686 | margin: 0 0 2.5rem 0; 1687 | } 1688 | dl { 1689 | font-size: 0.95em; 1690 | margin: 0 0 2.5rem 0; 1691 | } 1692 | .page-title { 1693 | font-size: 3rem; 1694 | } 1695 | .page-description { 1696 | font-size: 1.6rem; 1697 | } 1698 | h1 { 1699 | margin: 0 0 0.3em 0; 1700 | font-size: 2.8rem; 1701 | letter-spacing: -1px; 1702 | } 1703 | h2 { 1704 | margin: 0 0 0.3em 0; 1705 | font-size: 2.4rem; 1706 | letter-spacing: 0; 1707 | } 1708 | h3 { 1709 | margin: 0 0 0.3em 0; 1710 | font-size: 2.1rem; 1711 | } 1712 | h4 { 1713 | margin: 0 0 0.3em 0; 1714 | font-size: 1.9rem; 1715 | } 1716 | h5 { 1717 | margin: 0 0 0.3em 0; 1718 | font-size: 1.8rem; 1719 | } 1720 | h6 { 1721 | margin: 0 0 0.3em 0; 1722 | font-size: 1.8rem; 1723 | } 1724 | .post-meta { 1725 | font-size: 1.3rem; 1726 | margin-top: 1rem; 1727 | } 1728 | .post-footer { 1729 | padding: 5rem 0 3rem; 1730 | text-align: center; 1731 | .author { 1732 | margin: 0 0 2rem 0; 1733 | padding: 0 0 1.6rem 0; 1734 | border-bottom: $color_aqua_haze_approx 1px dashed; 1735 | } 1736 | .share { 1737 | position: static; 1738 | width: auto; 1739 | a { 1740 | margin: 1.4rem 0.8rem 0 0.8rem; 1741 | } 1742 | } 1743 | } 1744 | .older-posts { 1745 | position: static; 1746 | margin: 10px 0; 1747 | } 1748 | .newer-posts { 1749 | position: static; 1750 | margin: 10px 0; 1751 | } 1752 | .page-number { 1753 | display: block; 1754 | } 1755 | .site-footer { 1756 | margin-top: 3rem; 1757 | } 1758 | .author-profile { 1759 | padding-bottom: 2rem; 1760 | .author-image { 1761 | margin-top: -70px; 1762 | } 1763 | .author-meta span { 1764 | font-size: 1.4rem; 1765 | } 1766 | } 1767 | .read-next { 1768 | margin-top: 2rem; 1769 | margin-bottom: -37px; 1770 | .post { 1771 | width: 100%; 1772 | } 1773 | } 1774 | .archive-template .main-header { 1775 | max-height: 20vh; 1776 | min-height: 160px; 1777 | padding: 10% 0; 1778 | .page-description { 1779 | display: none; 1780 | } 1781 | } 1782 | .nav ul { 1783 | padding: 60px 9% 5%; 1784 | } 1785 | .post-excerpt p { 1786 | font-size: 0.85em; 1787 | } 1788 | .post-content img { 1789 | padding: 0; 1790 | width: calc(100% +32px); 1791 | min-width: 0; 1792 | max-width: 112%; 1793 | } 1794 | .author-meta li { 1795 | float: none; 1796 | margin: 0; 1797 | line-height: 1.75em; 1798 | &:before { 1799 | display: none; 1800 | } 1801 | } 1802 | .post-head.main-header { 1803 | height: 30vh; 1804 | } 1805 | .tag-head.main-header { 1806 | height: 20vh; 1807 | } 1808 | .author-head.main-header { 1809 | height: 20vh; 1810 | } 1811 | } 1812 | @-webkit-keyframes fade-in-down { 1813 | 0% { 1814 | opacity: 0; 1815 | -webkit-transform: translateY(-10px); 1816 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1817 | transform: translateY(-10px); 1818 | } 1819 | 100% { 1820 | opacity: 1; 1821 | -webkit-transform: translateY(0); 1822 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1823 | transform: translateY(0); 1824 | } 1825 | } 1826 | @keyframes fade-in-down { 1827 | 0% { 1828 | opacity: 0; 1829 | -webkit-transform: translateY(-10px); 1830 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1831 | transform: translateY(-10px); 1832 | } 1833 | 100% { 1834 | opacity: 1; 1835 | -webkit-transform: translateY(0); 1836 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1837 | transform: translateY(0); 1838 | } 1839 | } 1840 | @-webkit-keyframes bounce { 1841 | 0% { 1842 | -webkit-transform: translateY(0) rotate(-90deg); 1843 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1844 | transform: translateY(0) rotate(-90deg); 1845 | } 1846 | 10% { 1847 | -webkit-transform: translateY(0) rotate(-90deg); 1848 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1849 | transform: translateY(0) rotate(-90deg); 1850 | } 1851 | 25% { 1852 | -webkit-transform: translateY(0) rotate(-90deg); 1853 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1854 | transform: translateY(0) rotate(-90deg); 1855 | } 1856 | 40% { 1857 | -webkit-transform: translateY(0) rotate(-90deg); 1858 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1859 | transform: translateY(0) rotate(-90deg); 1860 | } 1861 | 50% { 1862 | -webkit-transform: translateY(0) rotate(-90deg); 1863 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1864 | transform: translateY(0) rotate(-90deg); 1865 | } 1866 | 20% { 1867 | -webkit-transform: translateY(-10px) rotate(-90deg); 1868 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1869 | transform: translateY(-10px) rotate(-90deg); 1870 | } 1871 | 30% { 1872 | -webkit-transform: translateY(-5px) rotate(-90deg); 1873 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1874 | transform: translateY(-5px) rotate(-90deg); 1875 | } 1876 | } 1877 | @keyframes bounce { 1878 | 0% { 1879 | -webkit-transform: translateY(0) rotate(-90deg); 1880 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1881 | transform: translateY(0) rotate(-90deg); 1882 | } 1883 | 20% { 1884 | -webkit-transform: translateY(0) rotate(-90deg); 1885 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1886 | transform: translateY(0) rotate(-90deg); 1887 | } 1888 | 50% { 1889 | -webkit-transform: translateY(0) rotate(-90deg); 1890 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1891 | transform: translateY(0) rotate(-90deg); 1892 | } 1893 | 80% { 1894 | -webkit-transform: translateY(0) rotate(-90deg); 1895 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1896 | transform: translateY(0) rotate(-90deg); 1897 | } 1898 | 100% { 1899 | -webkit-transform: translateY(0) rotate(-90deg); 1900 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1901 | transform: translateY(0) rotate(-90deg); 1902 | } 1903 | 40% { 1904 | -webkit-transform: translateY(-10px) rotate(-90deg); 1905 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1906 | transform: translateY(-10px) rotate(-90deg); 1907 | } 1908 | 60% { 1909 | -webkit-transform: translateY(-5px) rotate(-90deg); 1910 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 1911 | transform: translateY(-5px) rotate(-90deg); 1912 | } 1913 | } 1914 | .wrapper { 1915 | width: 95%; 1916 | margin: 3em auto; 1917 | } 1918 | .masonry { 1919 | margin: 1.5em 0; 1920 | padding: 0; 1921 | -moz-column-gap: 1.5em; 1922 | -webkit-column-gap: 1.5em; 1923 | //Instead of the line below you could use @include column-gap($width) 1924 | column-gap: 1.5em; 1925 | font-size: .85em; 1926 | .post { 1927 | display: inline-block; 1928 | background: $white; 1929 | padding: 1.5em; 1930 | margin: 0 0 1.5em; 1931 | width: 100%; 1932 | //Instead of the line below you could use @include box-sizing($bs) 1933 | box-sizing: border-box; 1934 | -moz-box-sizing: border-box; 1935 | -webkit-box-sizing: border-box; 1936 | //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) 1937 | box-shadow: 0 1px 1px 0 $black_18; 1938 | //Instead of the line below you could use @include border-radius($radius, $vertical-radius) 1939 | border-radius: 3px; 1940 | -moz-border-radius: 3px; 1941 | -webkit-border-radius: 3px; 1942 | &:hover { 1943 | //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) 1944 | box-shadow: 2px 2px 4px 0 $color_celeste_approx; 1945 | 1946 | .post-image img { 1947 | @extend %extend_10; 1948 | } 1949 | } 1950 | .post-image { 1951 | display: block; 1952 | margin: 0; 1953 | padding: 0; 1954 | position: relative; 1955 | margin: -1.5em -1.5em 12px; 1956 | overflow: hidden; 1957 | 1958 | img { 1959 | transition: all ease-out 1s; 1960 | opacity: 1.0; 1961 | display: block; 1962 | width: 100%; 1963 | height: auto; 1964 | margin: 0; 1965 | padding: 0; 1966 | } 1967 | } 1968 | &:focus .post-image img { 1969 | @extend %extend_10; 1970 | } 1971 | } 1972 | .post-excerpt a { 1973 | color: $color_rose_approx; 1974 | } 1975 | } 1976 | @media only screen and(min-width: 400px) { 1977 | .masonry { 1978 | -moz-column-count: 2; 1979 | -webkit-column-count: 2; 1980 | //Instead of the line below you could use @include column-count($count) 1981 | column-count: 2; 1982 | } 1983 | } 1984 | @media only screen and(min-width: 700px) { 1985 | .masonry { 1986 | -moz-column-count: 3; 1987 | -webkit-column-count: 3; 1988 | //Instead of the line below you could use @include column-count($count) 1989 | column-count: 3; 1990 | } 1991 | } 1992 | @media only screen and(min-width: 1280px) { 1993 | .wrapper { 1994 | width: 1260px; 1995 | } 1996 | } 1997 | svg:not(:root) { 1998 | overflow: hidden; 1999 | } 2000 | .icon-ghost:before { 2001 | content: "\f600"; 2002 | } 2003 | .icon-feed:before { 2004 | content: "\f601"; 2005 | } 2006 | .icon-twitter:before { 2007 | content: "\f602"; 2008 | font-size: 1.1em; 2009 | } 2010 | .icon-google-plus:before { 2011 | content: "\f603"; 2012 | } 2013 | .icon-facebook:before { 2014 | content: "\f604"; 2015 | } 2016 | .icon-arrow-left:before { 2017 | content: "\f605"; 2018 | } 2019 | .icon-stats:before { 2020 | content: "\f606"; 2021 | } 2022 | .icon-location:before { 2023 | content: "\f607"; 2024 | margin-left: -3px; 2025 | } 2026 | .icon-link:before { 2027 | content: "\f608"; 2028 | } 2029 | .icon-menu:before { 2030 | content: "\f609"; 2031 | } 2032 | .nav-opened .menu-button { 2033 | padding: 0 12px; 2034 | background: $color_woodsmoke_approx; 2035 | border-color: $color_woodsmoke_approx; 2036 | color: $white; 2037 | -webkit-transform: translate3D(94px, 0, 0); 2038 | -ms-transform: translate3D(94px, 0, 0); 2039 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 2040 | transform: translate3D(94px, 0, 0); 2041 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 2042 | transition: all 0.3s ease; 2043 | .word { 2044 | opacity: 0; 2045 | //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) 2046 | transition: all 0.3s ease; 2047 | } 2048 | } 2049 | .post-title a { 2050 | text-decoration: none; 2051 | } 2052 | .post-excerpt p { 2053 | margin: 0; 2054 | font-size: 0.9em; 2055 | line-height: 1.7em; 2056 | } 2057 | .post-content img { 2058 | display: block; 2059 | max-width: 126%; 2060 | height: auto; 2061 | padding: 0.6em 0; 2062 | position: relative; 2063 | left: 50%; 2064 | -webkit-transform: translateX(-50%); 2065 | -ms-transform: translateX(-50%); 2066 | //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) 2067 | transform: translateX(-50%); 2068 | } 2069 | .post-head.main-header { 2070 | height: 65vh; 2071 | min-height: 180px; 2072 | } 2073 | .tag-head.main-header { 2074 | height: 40vh; 2075 | min-height: 180px; 2076 | } 2077 | .author-head.main-header { 2078 | height: 40vh; 2079 | min-height: 180px; 2080 | } 2081 | .content .embedPastebin { 2082 | margin-bottom: 1.75em; 2083 | } -------------------------------------------------------------------------------- /templates/default.html.twig: -------------------------------------------------------------------------------- 1 | {% extends 'partials/base.html.twig' %} 2 | {% set collection = page.collection() %} 3 | 4 | {% block content %} 5 | 6 |
7 | 16 |
17 |
18 |

{{ site.title }}

19 |

{{ site.description}}

20 |
21 |
22 | 23 |
24 | 25 |
26 |
27 |
28 | {% for post in collection %} {% include 'partials/article.html.twig' %} {% endfor %} 29 |
30 |
31 | {% if config.plugins.pagination.enabled and collection.params.pagination %} 32 | {% include 'partials/pagination.html.twig' with {'base_url': page.url, 'pagination':collection.params.pagination} %} 33 | {% endif %} 34 |
35 | 36 | {% endblock %} 37 | -------------------------------------------------------------------------------- /templates/error.html.twig: -------------------------------------------------------------------------------- 1 | {% embed 'partials/base.html.twig' %} 2 | 3 | {% block body %} 4 | 5 | {% endblock %} 6 | 7 | {% block content %} 8 | 9 | {% include 'partials/header.html.twig' %} 10 | 11 |
12 |
13 |
14 | {% include 'partials/breadcrumbs.html.twig' %} 15 |

{{ 'THEME_MASONRY.ERROR.404'|t }}

16 |
17 |
18 |
19 | 20 | {% endblock %} 21 | 22 | {% block footer %}{% endblock %} 23 | 24 | {% endembed %} 25 | -------------------------------------------------------------------------------- /templates/page.html.twig: -------------------------------------------------------------------------------- 1 | {% embed 'partials/base.html.twig' %} 2 | 3 | {% block body %} 4 | 5 | {% endblock %} 6 | 7 | {% block content %} 8 | 9 | {% include 'partials/header.html.twig' %} 10 | 11 |
12 |
13 |
14 | {% include 'partials/breadcrumbs.html.twig' %} 15 |

{{page.title}}

16 |
17 |
18 | {{content}} 19 |
20 |
21 |
22 | 23 | {% endblock %} 24 | 25 | {% block footer %}{% endblock %} 26 | 27 | {% endembed %} -------------------------------------------------------------------------------- /templates/partials/article.html.twig: -------------------------------------------------------------------------------- 1 |
2 | {% if post.header.image %} 3 |
4 | 5 |
6 | {% endif %} 7 |
8 |

9 |
10 |
11 |

{{ post.content | striptags | truncate(140) }} {{ 'THEME_MASONRY.BLOG.CONTINUE_READING'|t }}

12 |
13 |
14 | {% if post.taxonomy.tag|length > 0 %} 15 | {% for tag in post.taxonomy.tag %}{{ tag }}{%if not loop.last %}, {% endif %}{% endfor %} 16 | {% endif %} 17 | 18 |
19 |
20 | -------------------------------------------------------------------------------- /templates/partials/base.html.twig: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% block head %} 5 | 6 | 7 | 8 | 9 | {% if header.description %} 10 | 11 | {% else %} 12 | 13 | {% endif %} 14 | {% if header.robots %} 15 | 16 | {% endif %} 17 | 18 | 19 | 20 | {% for meta in page.metadata %} 21 | 22 | {% endfor %} 23 | 24 | {% if header.title %}{{ header.title }} | {% endif %}{{ site.title }} 25 | 26 | {# Fonts #} 27 | 28 | 29 | {% block stylesheets %} 30 | {% do assets.add('theme://css/screen.css',101) %} 31 | {{ assets.css() }} 32 | {% endblock %} 33 | 34 | {% endblock head %} 35 | 36 | 37 | {% block body %} 38 | 39 | {% endblock %} 40 | 41 | {% include 'partials/navigation.html.twig' %} 42 | 43 |
44 | 45 | {% block content %}{% endblock %} 46 | 47 | 52 |
53 | 54 | {# Footer JS #} 55 | {% block javascripts %} 56 | {% do assets.add('jquery', 101) %} 57 | 58 | {# Main JS #} 59 | {% do assets.add('theme://js/index.js') %} 60 | 61 | {# Highlighting #} 62 | {% do assets.add('theme://js/prism.js') %} 63 | 64 | {# ... #} 65 | {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %} 66 | {% do assets.add('https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js') %} 67 | {% do assets.add('https://oss.maxcdn.com/respond/1.4.2/respond.min.js') %} 68 | {% endif %} 69 | 70 | {{ assets.js() }} 71 | {% endblock %} 72 | 73 | 74 | {% block bottom %}{% endblock %} 75 | 76 | -------------------------------------------------------------------------------- /templates/partials/breadcrumbs.html.twig: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /templates/partials/header.html.twig: -------------------------------------------------------------------------------- 1 |
2 | 8 |
9 | -------------------------------------------------------------------------------- /templates/partials/navigation.html.twig: -------------------------------------------------------------------------------- 1 | 2 |
3 |

{{ 'THEME_MASONRY.MENU_TITLE'|t }}

4 | 5 | 6 | 7 | 15 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /templates/partials/pagination.html.twig: -------------------------------------------------------------------------------- 1 | {% if base_url == '' %} 2 | {% set base_url = '/' %} 3 | {% endif %} 4 | 5 | 16 | -------------------------------------------------------------------------------- /templates/post.html.twig: -------------------------------------------------------------------------------- 1 | {% embed 'partials/base.html.twig' %} 2 | 3 | {% block body %} 4 | 5 | {% endblock %} 6 | 7 | {% block content %} 8 | 9 | {% include 'partials/header.html.twig' %} 10 | 11 |
12 |
13 |
14 | {% include 'partials/breadcrumbs.html.twig' %} 15 |

{{page.title}}

16 |
17 | 18 | {% if page.taxonomy.tag|length > 0 %} 19 | on {% for tag in page.taxonomy.tag %}{{ tag }}{%if not loop.last %}, {% endif %}{% endfor %} 20 | {% endif %} 21 |
22 |
23 | 24 |
25 | {{content}} 26 |
27 | 28 |
29 | 30 | 79 | 80 |
81 |
82 | 83 | 101 | 102 | 103 | {% endblock %} 104 | 105 | {% block bottom %} 106 | 107 | {% if site.disqus %} 108 | 116 | {% endif %} 117 | 118 | {% endblock %} 119 | 120 | {% endembed %} 121 | -------------------------------------------------------------------------------- /thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koca/grav-theme-masonry/c78da24c5d6de6e5f3e57ba1fdcb2a294010abf3/thumbnail.jpg --------------------------------------------------------------------------------