├── sass ├── _photoset.sass ├── _quote.sass ├── _mixins.sass ├── _variables.sass ├── _navigation.sass ├── _chat.sass ├── _link.sass ├── style.sass ├── _notes.sass ├── _text.sass ├── _video.sass ├── _transitions.sass └── _base.sass ├── .gitignore ├── yuki.sublime-project ├── package.json ├── gulpfile.js ├── README.md ├── style.css.map ├── style.css └── yuki.html /sass/_photoset.sass: -------------------------------------------------------------------------------- 1 | .photoset 2 | img 3 | height: auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .sass-cache 4 | yuki.sublime-workspace -------------------------------------------------------------------------------- /sass/_quote.sass: -------------------------------------------------------------------------------- 1 | // quote posts 2 | 3 | .quote 4 | background-color: #f2f2f2 5 | padding: 10px -------------------------------------------------------------------------------- /sass/_mixins.sass: -------------------------------------------------------------------------------- 1 | =breakpoint($point) 2 | @if $point == mobile 3 | @media (max-width: 640px) 4 | @content -------------------------------------------------------------------------------- /sass/_variables.sass: -------------------------------------------------------------------------------- 1 | $font-size: 13px 2 | 3 | 4 | $color-font: #3f3f3f 5 | $link-hover: lighten($color-font, 40%) -------------------------------------------------------------------------------- /sass/_navigation.sass: -------------------------------------------------------------------------------- 1 | .navigation 2 | margin: 0 20px 40px 20px 3 | border-top: 1px solid #c7c7c7 4 | padding: 10px 0 0 0 5 | width: 260px 6 | float: left 7 | display: none -------------------------------------------------------------------------------- /sass/_chat.sass: -------------------------------------------------------------------------------- 1 | // chat posts 2 | 3 | .chat 4 | background-color: #f2f2f2 5 | padding: 10px 6 | 7 | ul 8 | margin: 0 9 | padding: 0 10 | 11 | li 12 | list-style: none 13 | -------------------------------------------------------------------------------- /yuki.sublime-project: -------------------------------------------------------------------------------- 1 | { 2 | "folders": 3 | [ 4 | { 5 | "follow_symlinks": true, 6 | "path": ".", 7 | "folder_exclude_patterns": [ 8 | ".sass-cache", 9 | "node_modules" 10 | ] 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "yuki", 3 | "version": "1.0.0", 4 | "author": "Cory Gibbons", 5 | "devDependencies": { 6 | "gulp": "^3.8.6", 7 | "gulp-autoprefixer": "0.0.8", 8 | "gulp-notify": "^1.4.0", 9 | "gulp-ruby-sass": "^0.7.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /sass/_link.sass: -------------------------------------------------------------------------------- 1 | // link posts 2 | 3 | .link 4 | 5 | .link-title 6 | font-size: 1.2em 7 | font-weight: bold 8 | &:hover 9 | border: none 10 | color: $link-hover 11 | 12 | .description 13 | margin-top: 0.5em 14 | p 15 | margin: 0 -------------------------------------------------------------------------------- /sass/style.sass: -------------------------------------------------------------------------------- 1 | /*! Yuki 2 | by Cory Gibbons 3 | @corygibbons 4 | */ 5 | 6 | @import variables 7 | @import mixins 8 | @import base 9 | @import navigation 10 | @import text 11 | @import chat 12 | @import link 13 | @import quote 14 | @import photoset 15 | @import video 16 | @import notes 17 | @import transitions -------------------------------------------------------------------------------- /sass/_notes.sass: -------------------------------------------------------------------------------- 1 | .notes-container 2 | margin: 0 20px 40px 20px 3 | border-top: 1px solid #c7c7c7 4 | padding: 10px 0 0 0 5 | width: 560px 6 | float: left 7 | display: none 8 | 9 | +breakpoint(mobile) 10 | width: 260px 11 | 12 | ol.notes 13 | padding: 0 14 | margin: 0 0 40px 0 15 | list-style-type: none 16 | 17 | img.avatar 18 | display: none 19 | 20 | blockquote 21 | padding: 4px 10px 22 | margin: 10px 0px 10px 25px -------------------------------------------------------------------------------- /sass/_text.sass: -------------------------------------------------------------------------------- 1 | .text 2 | 3 | h2 4 | font-size: 1.2em 5 | margin: 0 0 0.5em 0 6 | 7 | a:hover 8 | border: none 9 | color: $link-hover 10 | 11 | .text-body 12 | 13 | a 14 | text-decoration: underline 15 | color: $color-font 16 | 17 | &:hover 18 | border: none 19 | color: $link-hover 20 | 21 | p 22 | margin: 0 0 1em 0 23 | 24 | &:last-of-type 25 | margin-bottom: 0 -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-ruby-sass'); 3 | var autoprefixer = require('gulp-autoprefixer'); 4 | var notify = require('gulp-notify'); 5 | 6 | gulp.task('sass', function() { 7 | return gulp.src('sass/**/*.sass') 8 | .pipe(sass({style: 'compressed'})) 9 | .pipe(autoprefixer('last 15 version')) 10 | .on('error', function(err) { console.log(err.message); }) 11 | .pipe(gulp.dest('.')); 12 | }); 13 | 14 | gulp.task('default', function() { 15 | gulp.watch('sass/**/*.sass', function() { 16 | gulp.run('sass'); 17 | }); 18 | }); -------------------------------------------------------------------------------- /sass/_video.sass: -------------------------------------------------------------------------------- 1 | .video-play-button 2 | position: absolute 3 | z-index: 99 4 | left: 50% 5 | top: 50% 6 | max-width: 80px 7 | width: 80px 8 | margin-left: -40px 9 | height: 54px 10 | margin-top: -27px 11 | background-repeat: no-repeat 12 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA2CAYAAABQvB7qAAACT0lEQVR4Ae3cz0oCURQGcM0IColw1Z9dLSSwWkU+QdtaBNKyBwgkWrdxn0JbHyCohS17gKCopRAKBW7CWriSFmHS9zFes1qIc8A5l86B04yXOeT8PNNMw1zjsb+xjKFdZBY5j5xB/ud4x843kbfIK+QTsh/x/losNon1I+QecmJg3Fa/BbpYvUSeIjscdoDEO0NuctBiqMA9tjhEdhK9TY+x3O6t22K4wBI2mUXesAP5N+8caYctEEYIHs777MAD5PoIhbZpIMDm67DreLa1CCewRUBeqliEE5gn4H+/zgtHF1TN2IlDwodaAzRAoYCw3DrQAIUCwnLrQAMUCgjLrQMNUCggLI+0A7PZ7HQqlXK31IS7Ek15pIC5XG6u0WisFYvFBV8hIwVkzySTyUQ+n1/0FTJyQHfg+QqpBtBXSHWAvkGqBfQFUj2gdkhvALVCegf4G7Jara6m0+kpNz7upbeA7Xb7s1QqvWQymcdarfYxbjj3+/hIh1dBuHK5/FooFN5ardZn1G/eG0BtcO6DUw+oFU49oHY4tYC+wKkD9A1ODaCvcA6Qj2g9uBfjXvKOdL1e/9BwORJ23yMFDPumNdV5+5+IFkQDFH4SBmiAQgFhuXWgAQoFhOXWgQYoFBCWswM5G9EinMA7ATmV0yKcQJOAd+FqrQoCtwSsIDlxzmI0AZpVCMgZ2JxEbDGaAM2e3cONPIw3kJwHazFcgBOuT5BdB8h2vEZyEvEqkre5LP4K0OkCSbwfU/4HN13Bix2kfelEoDL4pRM8XzwHw8HPL6t/0mA73vMvAAAAAElFTkSuQmCC) 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Screenshot](http://files.corygibbons.com/cory-gibbons-yuki.png) 2 | # Yuki 3 | Yuki is a responsive masonry style theme for Tumblr by [@corygibbons](http://twitter.com/corygibbons). 4 | 5 | ## Notes 6 | Currently the theme works best for photo based blogs. At the moment all post types are supported but some work better than others, will create better support in the future when I have time. 7 | 8 | _Version 1.0.0 is slowly underway in the `develop` branch._ 9 | 10 | ## Install 11 | Copy and paste all contents from [yuki.html](https://raw.github.com/corygibbons/yuki/master/yuki.html) into your Tumblr theme customization window. 12 | 13 | ## Demo 14 | Demo available at [yuki-theme.tumblr.com](http://yuki-theme.tumblr.com) 15 | 16 | ## Changelog 17 | 18 | #### 0.2.15 19 | * Change tumblr asset links from http to https 20 | 21 | #### 0.2.14 22 | * Add missing html markup 23 | 24 | #### 0.2.13 25 | * Switch to CSS transitions for tile hover 26 | 27 | #### 0.2.12 28 | * Photosets on permalink pages should now output high-res images 29 | 30 | #### 0.2.11 31 | * Fix an issue that caused mobile screens to display at wrong width 32 | 33 | #### 0.2.10 34 | * Add setting to show only first image in photoset on post index 35 | 36 | #### 0.2.9 37 | * Make sure all assets are hosted on Tumblr 38 | 39 | #### 0.2.8 40 | * Add caption to photo posts on permalink pages 41 | * Fix an issue with photoset captions on permalink pages 42 | * Fix an issue with video captions on permalink pages 43 | 44 | #### 0.2.7 45 | * Add setting to change image hover colour 46 | 47 | #### 0.2.6 48 | * Add support for post notes 49 | 50 | #### 0.2.5 51 | * Fix image hover issues 52 | * Start adding support for audio posts 53 | * Small aesthetic changes on text and link posts 54 | 55 | #### 0.2.4 56 | * Add support for video posts 57 | 58 | #### 0.2.3 59 | * Fix infinite scroll on custom domains 60 | * Fix photoset posts so images maintain their aspect ratio 61 | 62 | #### 0.2.2 63 | * Add string localization 64 | 65 | #### 0.2.1 66 | * Fix bug so load more button won't display on single post pages 67 | 68 | #### 0.2.0 69 | * Add infinite scroll 70 | 71 | #### 0.1.1 72 | * Minor bug fixes 73 | * Start implementation of infinite scroll 74 | 75 | #### 0.1.0 76 | * Initial release 77 | -------------------------------------------------------------------------------- /sass/_transitions.sass: -------------------------------------------------------------------------------- 1 | .masonry, 2 | .masonry .masonry-brick 3 | -webkit-transition-duration: 0.6s 4 | -moz-transition-duration: 0.6s 5 | -o-transition-duration: 0.6s 6 | transition-duration: 0.6s 7 | 8 | .masonry 9 | -webkit-transition-property: height, width 10 | -moz-transition-property: height, width 11 | -o-transition-property: height, width 12 | transition-property: height, width 13 | 14 | .masonry .masonry-brick 15 | -webkit-transition-property: left, right, top 16 | -moz-transition-property: left, right, top 17 | -o-transition-property: left, right, top 18 | transition-property: left, right, top 19 | 20 | 21 | 22 | 23 | 24 | #infscr-loading 25 | width: 16px 26 | height: 16px 27 | position: fixed 28 | top: 14px 29 | left: 14px 30 | border: solid 2px transparent 31 | border-top-color: darken(white, 50%) 32 | border-left-color: darken(white, 50%) 33 | border-radius: 10px 34 | 35 | -webkit-animation: yuki-spinner 550ms linear infinite 36 | -moz-animation: yuki-spinner 550ms linear infinite 37 | -ms-animation: yuki-spinner 550ms linear infinite 38 | -o-animation: yuki-spinner 550ms linear infinite 39 | animation: yuki-spinner 550ms linear infinite 40 | 41 | @-webkit-keyframes yuki-spinner 42 | 0% 43 | -webkit-transform: rotate(0deg) 44 | transform: rotate(0deg) 45 | 100% 46 | -webkit-transform: rotate(360deg) 47 | transform: rotate(360deg) 48 | 49 | 50 | @-moz-keyframes yuki-spinner 51 | 0% 52 | -moz-transform: rotate(0deg) 53 | transform: rotate(0deg) 54 | 100% 55 | -moz-transform: rotate(360deg) 56 | transform: rotate(360deg) 57 | 58 | 59 | @-o-keyframes yuki-spinner 60 | 0% 61 | -o-transform: rotate(0deg) 62 | transform: rotate(0deg) 63 | 100% 64 | -o-transform: rotate(360deg) 65 | transform: rotate(360deg) 66 | 67 | 68 | @-ms-keyframes yuki-spinner 69 | 0% 70 | -ms-transform: rotate(0deg) 71 | transform: rotate(0deg) 72 | 100% 73 | -ms-transform: rotate(360deg) 74 | transform: rotate(360deg) 75 | 76 | 77 | @keyframes yuki-spinner 78 | 0% 79 | transform: rotate(0deg) 80 | transform: rotate(0deg) 81 | 100% 82 | transform: rotate(360deg) 83 | transform: rotate(360deg) 84 | 85 | 86 | // img 87 | // opacity: 1 88 | // -o-transition: .4s 89 | // -ms-transition: .4s 90 | // -moz-transition: .4s 91 | // -webkit-transition: .4s 92 | // transition: .4s 93 | // &:hover 94 | // opacity: 0.4 -------------------------------------------------------------------------------- /sass/_base.sass: -------------------------------------------------------------------------------- 1 | html 2 | -webkit-font-smoothing: antialiased 3 | 4 | body 5 | background-color: #fbfbfb 6 | font-family: Helvetica, Arial, Sans-serif 7 | font-size: $font-size 8 | line-height: 1.6em 9 | color: $color-font 10 | padding: 40px 20px 11 | margin: 0 12 | 13 | a 14 | color: $color-font 15 | text-decoration: none 16 | 17 | &:hover 18 | color: $color-font 19 | border-bottom: 1px solid #7f7f7f 20 | padding-bottom: 2px 21 | 22 | 23 | 24 | h1 25 | font-size: 1em 26 | font-weight: normal 27 | margin: 0 auto 28 | padding: 0 5px 0 0 29 | display: inline 30 | 31 | #container 32 | margin: 0 auto 33 | padding: 0 34 | 35 | header.main 36 | margin: 60px auto 100px auto 37 | padding: 0 20px 38 | text-align: center 39 | 40 | footer.primary-footer 41 | text-align: center 42 | margin: 0 auto 40px auto 43 | clear: both 44 | float: left 45 | width: 100% 46 | padding: 30px 0 47 | 48 | .load-more-entries 49 | padding: 12px 22px 50 | background: darken(white, 5%) 51 | font-size: 1.4em 52 | &:hover 53 | background: darken(white, 8%) 54 | 55 | #posts 56 | margin: 0 auto 57 | clear: both 58 | 59 | .post 60 | margin: 0 20px 40px 20px 61 | float: left 62 | min-width: 260px 63 | transition: opacity .25s linear 64 | 65 | &:hover 66 | opacity: .3 67 | 68 | iframe 69 | width: 100% 70 | display: block 71 | 72 | 73 | header 74 | color: #b4b4b4 75 | display: block 76 | margin: 0 77 | padding: 0 78 | width: 100% 79 | 80 | .caption 81 | margin-top: 20px 82 | 83 | 84 | 85 | 86 | 87 | // columns 88 | 89 | .single 90 | width: 260px 91 | float: left 92 | 93 | img 94 | width: 260px 95 | line-height: 0px 96 | display: block 97 | 98 | 99 | 100 | .double 101 | width: 560px 102 | float: left 103 | 104 | +breakpoint(mobile) 105 | width: 260px 106 | 107 | img 108 | width: 560px 109 | display: block 110 | +breakpoint(mobile) 111 | width: 260px 112 | height: auto 113 | 114 | 115 | 116 | .triple 117 | max-width: 620px 118 | float: left 119 | 120 | img 121 | max-width: 620px 122 | display: block 123 | 124 | 125 | .fade 126 | display: none 127 | 128 | 129 | 130 | 131 | .page 132 | padding: 0 0 0 5px 133 | a 134 | color: lighten($color-font, 55%) 135 | 136 | 137 | .load-more-posts 138 | background: salmon 139 | height: 100px 140 | width: 200px 141 | position: fixed 142 | left: 50% 143 | top: 50% 144 | 145 | hr 146 | background-color: #c7c7c7 147 | height: 1px 148 | margin: 0 0 10px 0 149 | border: none 150 | -------------------------------------------------------------------------------- /style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["../_base.sass","../_variables.sass","../_mixins.sass","../_navigation.sass","../_text.sass","../_chat.sass","../_link.sass","../_quote.sass","../_photoset.sass","../_video.sass","../_notes.sass","../_transitions.sass"], 5 | "names": [], 6 | "file": "style.css" 7 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /*! Yuki 2 | * by Cory Gibbons 3 | * @corygibbons 4 | */html{-webkit-font-smoothing:antialiased}body{background-color:#fbfbfb;font-family:Helvetica,Arial,Sans-serif;font-size:13px;line-height:1.6em;color:#3f3f3f;padding:40px 20px;margin:0}a{color:#3f3f3f;text-decoration:none}a:hover{color:#3f3f3f;border-bottom:1px solid #7f7f7f;padding-bottom:2px}h1{font-size:1em;font-weight:normal;margin:0 auto;padding:0 5px 0 0;display:inline}#container{margin:0 auto;padding:0}header.main{margin:60px auto 100px auto;padding:0 20px;text-align:center}footer.primary-footer{text-align:center;margin:0 auto 40px auto;clear:both;float:left;width:100%;padding:30px 0}footer.primary-footer .load-more-entries{padding:12px 22px;background:#f2f2f2;font-size:1.4em}footer.primary-footer .load-more-entries:hover{background:#ebebeb}#posts{margin:0 auto;clear:both}.post{margin:0 20px 40px 20px;float:left;min-width:260px;-webkit-transition:opacity .25s linear;transition:opacity .25s linear}.post:hover{opacity:.3}.post iframe{width:100%;display:block}.post header{color:#b4b4b4;display:block;margin:0;padding:0;width:100%}.caption{margin-top:20px}.single{width:260px;float:left}.single img{width:260px;line-height:0px;display:block}.double{width:560px;float:left}@media (max-width: 640px){.double{width:260px}}.double img{width:560px;display:block}@media (max-width: 640px){.double img{width:260px;height:auto}}.triple{max-width:620px;float:left}.triple img{max-width:620px;display:block}.fade{display:none}.page{padding:0 0 0 5px}.page a{color:#cbcbcb}.load-more-posts{background:salmon;height:100px;width:200px;position:fixed;left:50%;top:50%}hr{background-color:#c7c7c7;height:1px;margin:0 0 10px 0;border:none}.navigation{margin:0 20px 40px 20px;border-top:1px solid #c7c7c7;padding:10px 0 0 0;width:260px;float:left;display:none}.text h2{font-size:1.2em;margin:0 0 .5em 0}.text h2 a:hover{border:none;color:#a5a5a5}.text .text-body a{text-decoration:underline;color:#3f3f3f}.text .text-body a:hover{border:none;color:#a5a5a5}.text .text-body p{margin:0 0 1em 0}.text .text-body p:last-of-type{margin-bottom:0}.chat{background-color:#f2f2f2;padding:10px}.chat ul{margin:0;padding:0}.chat li{list-style:none}.link .link-title{font-size:1.2em;font-weight:bold}.link .link-title:hover{border:none;color:#a5a5a5}.link .description{margin-top:.5em}.link p{margin:0}.quote{background-color:#f2f2f2;padding:10px}.photoset img{height:auto}.video-play-button{position:absolute;z-index:99;left:50%;top:50%;max-width:80px;width:80px;margin-left:-40px;height:54px;margin-top:-27px;background-repeat:no-repeat;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA2CAYAAABQvB7qAAACT0lEQVR4Ae3cz0oCURQGcM0IColw1Z9dLSSwWkU+QdtaBNKyBwgkWrdxn0JbHyCohS17gKCopRAKBW7CWriSFmHS9zFes1qIc8A5l86B04yXOeT8PNNMw1zjsb+xjKFdZBY5j5xB/ud4x843kbfIK+QTsh/x/losNon1I+QecmJg3Fa/BbpYvUSeIjscdoDEO0NuctBiqMA9tjhEdhK9TY+x3O6t22K4wBI2mUXesAP5N+8caYctEEYIHs777MAD5PoIhbZpIMDm67DreLa1CCewRUBeqliEE5gn4H+/zgtHF1TN2IlDwodaAzRAoYCw3DrQAIUCwnLrQAMUCgjLrQMNUCggLI+0A7PZ7HQqlXK31IS7Ek15pIC5XG6u0WisFYvFBV8hIwVkzySTyUQ+n1/0FTJyQHfg+QqpBtBXSHWAvkGqBfQFUj2gdkhvALVCegf4G7Jara6m0+kpNz7upbeA7Xb7s1QqvWQymcdarfYxbjj3+/hIh1dBuHK5/FooFN5ardZn1G/eG0BtcO6DUw+oFU49oHY4tYC+wKkD9A1ODaCvcA6Qj2g9uBfjXvKOdL1e/9BwORJ23yMFDPumNdV5+5+IFkQDFH4SBmiAQgFhuXWgAQoFhOXWgQYoFBCWswM5G9EinMA7ATmV0yKcQJOAd+FqrQoCtwSsIDlxzmI0AZpVCMgZ2JxEbDGaAM2e3cONPIw3kJwHazFcgBOuT5BdB8h2vEZyEvEqkre5LP4K0OkCSbwfU/4HN13Bix2kfelEoDL4pRM8XzwHw8HPL6t/0mA73vMvAAAAAElFTkSuQmCC)}.notes-container{margin:0 20px 40px 20px;border-top:1px solid #c7c7c7;padding:10px 0 0 0;width:560px;float:left;display:none}@media (max-width: 640px){.notes-container{width:260px}}.notes-container ol.notes{padding:0;margin:0 0 40px 0;list-style-type:none}.notes-container img.avatar{display:none}.notes-container blockquote{padding:4px 10px;margin:10px 0px 10px 25px}.masonry,.masonry .masonry-brick{-webkit-transition-duration:.6s;transition-duration:.6s}.masonry{-webkit-transition-property:height,width;transition-property:height,width}.masonry .masonry-brick{-webkit-transition-property:left,right,top;transition-property:left,right,top}#infscr-loading{width:16px;height:16px;position:fixed;top:14px;left:14px;border:solid 2px transparent;border-top-color:gray;border-left-color:gray;-webkit-border-radius:10px;border-radius:10px;-webkit-animation:yuki-spinner 550ms linear infinite;-ms-animation:yuki-spinner 550ms linear infinite;animation:yuki-spinner 550ms linear infinite}@-webkit-keyframes yuki-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes yuki-spinner{0%{-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes yuki-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}} 5 | -------------------------------------------------------------------------------- /yuki.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 24 | 25 | 26 | 27 | {Title} 28 | 29 | 30 | 31 | {block:Description} 32 | 33 | {/block:Description} 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 63 | 64 | 65 | 66 | 67 | 68 |
69 | 70 |
71 | 72 |
73 |

{Title}

74 | {block:HasPages} 75 | / 76 | {block:Pages} 77 | {Label} 78 | {/block:Pages} 79 | {/block:HasPages} 80 |
81 | 82 | 83 | {block:TagPage} 84 |
85 | Viewing all entries marked "{Tag}" 86 |
87 | {/block:TagPage} 88 | 89 |
90 | 91 | 92 | 93 | 94 | 95 | 96 |
97 | 98 | {block:Posts} 99 | 100 | {block:Post1} 101 | {block:IndexPage} 102 |
103 | {/block:IndexPage} 104 | 105 | {block:PermalinkPage} 106 |
107 | {/block:PermalinkPage} 108 | {/block:Post1} 109 | 110 | 111 | 112 | {block:Post2}
{/block:Post2} 113 | {block:Post3}
{/block:Post3} 114 | {block:Post4}
{/block:Post4} 115 | {block:Post5}
{/block:Post5} 116 | {block:Post6}
{/block:Post6} 117 | {block:Post7}
{/block:Post7} 118 | {block:Post8}
{/block:Post8} 119 | {block:Post9}
{/block:Post9} 120 | {block:Post10}
{/block:Post10} 121 | {block:Post11}
{/block:Post11} 122 | {block:Post12}
{/block:Post12} 123 | {block:Post13}
{/block:Post13} 124 | {block:Post14}
{/block:Post14} 125 | {block:Post15}
{/block:Post15} 126 | 127 | 128 | 129 | 130 | 131 | {block:Text} 132 | 133 |
134 | 135 | {Block:PermalinkPage} 136 |
137 | {/Block:PermalinkPage} 138 | 139 | {block:Title} 140 |

{Title}

141 | {/block:Title} 142 | 143 |
144 | {Body} 145 |
146 | 147 |
148 | {/block:Text} 149 | 150 | 151 | 152 | 153 | 154 | {block:Photo} 155 | 156 | 157 | {block:IndexPage} 158 |
159 | {PhotoAlt} 160 |
161 | {/block:IndexPage} 162 | 163 | {block:PermalinkPage} 164 |
165 | {PhotoAlt} 166 |
167 | {block:Caption} 168 |
{Caption}
169 | {/block:Caption} 170 | {/block:PermalinkPage} 171 | 172 | {/block:Photo} 173 | 174 | 175 | 176 | 177 | 178 | {block:Photoset} 179 | 180 | 181 | {block:Photos} 182 | 183 | {Block:IndexPage} 184 |
185 | 186 |
187 | {/Block:IndexPage} 188 | 189 | {Block:PermalinkPage} 190 |
191 | 192 |
193 | {/Block:PermalinkPage} 194 | 195 | {/block:Photos} 196 | 197 | {Block:PermalinkPage} 198 | {block:Caption} 199 |
{Caption}
200 | {/block:Caption} 201 | {/Block:PermalinkPage} 202 | 203 | {/block:Photoset} 204 | 205 | 206 | 207 | 208 | 209 | {block:Video} 210 | 211 | 212 | {Block:IndexPage} 213 |
214 | {block:VideoThumbnail} 215 | 216 | 217 |
218 | 219 | {/block:VideoThumbnail} 220 |
221 | {/Block:IndexPage} 222 | 223 | {Block:PermalinkPage} 224 |
225 | {Video-700} 226 |
227 | 228 | {block:Caption} 229 |
{Caption}
230 | {/block:Caption} 231 | {/Block:PermalinkPage} 232 | 233 | {/block:Video} 234 | 235 | 236 | 237 | {block:Audio} 238 | 239 |
240 | 241 | {Block:IndexPage} 242 | {block:AudioEmbed} 243 | {AudioEmbed-640} 244 | {/block:AudioEmbed} 245 | {/Block:IndexPage} 246 | 247 |
248 | {/block:Audio} 249 | 250 | 251 | 252 | 253 | 254 | {block:Quote} 255 | 256 | 257 |
258 | "{Quote}" 259 | 260 | {block:Source} 261 |
{Source}
262 | {/block:Source} 263 |
264 | 265 | {/block:Quote} 266 | 267 | 268 | 269 | 270 | 271 | {block:Chat} 272 | 273 | 274 |
275 | 276 | {block:Title} 277 |

{Title}

278 | {/block:Title} 279 | 280 |
    281 | {block:Lines} 282 |
  • 283 | {block:Label} 284 | {Label} 285 | 286 | {/block:Label} 287 | 288 | {Line} 289 |
    • 290 | {/block:Lines} 291 |
292 | 293 |
294 | 295 | {/block:Chat} 296 | 297 | 298 | 299 | 300 | 301 | {block:Link} 302 | 303 | 304 |
305 | {Name} 306 | 307 | {block:Description} 308 |
{Description}
309 | {/block:Description} 310 |
311 | 312 | {/block:Link} 313 | 314 | 315 | 316 | 317 | 318 | {block:PermalinkPage} 319 |
320 | 321 | {block:Date} 322 |
323 |
Posted
324 | {Month} {DayOfMonth}, {Year} 325 |
326 | {/block:Date} 327 | 328 | 329 | {block:HasTags} 330 |
331 |
{lang:Tagged}
332 | {block:Tags} 333 | {Tag}  334 | {/block:Tags} 335 |
336 | {/block:HasTags} 337 | 338 | 339 | {block:ContentSource} 340 |
341 |
{lang:Source}
342 | {SourceTitle} 343 |
344 | {/block:ContentSource} 345 | 346 | 347 | {block:RebloggedFrom} 348 |
349 |
{lang:Reblogged from}
350 | {ReblogParentTitle} 351 |
352 | {/block:RebloggedFrom} 353 | 354 | 355 | {block:IfNotes} 356 | {block:PostNotes} 357 |
358 | {block:NoteCount} 359 |
{NoteCountWithLabel}
360 | {/block:NoteCount} 361 | {PostNotes} 362 |
363 | {/block:PostNotes} 364 | {/block:IfNotes} 365 | 366 | 367 | 368 | {/block:PermalinkPage} 369 | 370 | 371 | 372 | {/block:Posts} 373 | 374 | {block:IndexPage}
{/block:IndexPage} 375 | 376 |
377 | 378 | 379 | 380 | {block:Pagination} 381 | 382 | {block:PreviousPage} 383 |
384 | {lang:Previous page} 385 |
386 | {/block:PreviousPage} 387 | 388 | {block:NextPage} 389 |
390 | {lang:Next page} 391 |
392 | {/block:NextPage} 393 | 394 | {/block:Pagination} 395 | 396 | 397 |
398 | 399 | {block:IndexPage} 400 | 403 | {/block:IndexPage} 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 532 | 533 | 534 | 535 | --------------------------------------------------------------------------------