API tools faq
paste
Advertisement
feiinho

Armanc - tumblr.com/themes/by/leentheme

feiinho
Nov 26th, 2015
543
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 68.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!--
  5. Theme Name: Armanc
  6. If you have any questions, please send me an email:
  7. leentheme@hotmail.com with the name of the theme and a link
  8. to your blog. Please note: support is not available for HTML
  9. & CSS customizations.
  10. Feel free to edit and customize this theme for personal use.
  11. more themes ? ===> https://www.tumblr.com/themes/by/leentheme
  12. http://www.leenthemes.com/
  13.  
  14. OOOO OOOOOOOO OOOOOOOO OOOOOOOO OOOOO
  15. OOOO OOO OOO OOOOOOOOO OOOOO
  16. OOOO OOOOOOOO OOOOOOOO OOOOO OOOO OOOOO
  17. OOOO OOOOOOO OOOOOOO OOOOO OOOOOOOOO
  18. OOOO OOO OOO OOOOO OOOOOOOO
  19. OOOOOOOOOO OOOOOOOO OOOOOOOO OOOOO OOOOOOO
  20. OOOOOOOOOOO OOOOOOOOO OOOOOOOOO OOOOO OOOOOO
  21.  
  22. Version: 5.0 (January 28, 2015)
  23. By: Mesut Barazani
  24. -->
  25. <title>{Title}{block:TagPage} &bull; Posts Tagged &lsquo;{Tag}&rsquo;{/block:TagPage}{block:PostSummary} &bull; {PostSummary}{/block:PostSummary}</title>
  26. <link rel="shortcut icon" href="{Favicon}"/>
  27. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  29. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  30. <meta charset="UTF-8"/>
  31. <meta name="viewport" content="width=device-width, initial-scale=1">
  32. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/zdvilra/LPvni0x0f/normalize.css" />
  33. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  34. <link rel="stylesheet" href="http://static.tumblr.com/cc2l8yc/gqTnirh7i/magnific.css">
  35. <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  36. <script src="http://static.tumblr.com/cc2l8yc/ko1nirgzy/velocity.min.js"></script>
  37. <script src="http://static.tumblr.com/cc2l8yc/KhRnirh0k/velocity.ui.js"></script>
  38. {block:Hidden}
  39. <meta name="if:Show People I follow" content="0"/>
  40. <meta name="if:Date Format TimeAgo" content="1"/>
  41. <meta name="select:Layout type" content="two-column" title="two column"/>
  42. <meta name="select:Layout type" content="one-column" title="one column"/>
  43. <meta name="select:Layout type" content="three-column" title="three column"/>
  44. <meta name="image:Background image" content=""/>
  45. <meta name="if:Repeat Backgruond" content="1"/>
  46. <meta name="if:Hide Caption" content="1"/>
  47. <meta name="if:Hide Caption" content="1"/>
  48. <meta name="color:Background" content="#000"/>
  49. <meta name="color:Zoom Icon Color" content="#529ecc"/>
  50. <meta name="color:Menu Icon Color" content="#BDB083"/>
  51. <meta name="color:Title Color" content="#fff"/>
  52. <meta name="color:Description Color" content="#777777"/>
  53. <meta name="color:SideBar Background Color" content="#000"/>
  54. <meta name="select:SideBar Background Opacity" content="0.6" title="Default"/>
  55. <meta name="select:SideBar Background Opacity" content="0.3" title="25%"/>
  56. <meta name="select:SideBar Background Opacity" content="1" title="100%"/>
  57. <meta name="color:Loading Line Color" content="#ea504e"/>
  58. <meta name="color:Twitter Links" content="#b5af47"/>
  59. <meta name="color:Twitter Text" content="#666666"/>
  60. <meta name="color:Loading Background Color" content="#252328"/>
  61. <meta name="text:Loading Line Height" content="1px"/>
  62. <meta name="text:Title Size" content="40px"/>
  63. <meta name="text:Twitter Limit" content="5"/>
  64. <meta name="text:Flickr ID" content=""/>
  65. <meta name="text:Flickr Limit" content="6"/>
  66. <meta name="text:Instagram photo count" content="6" />
  67. <meta name="text:Instagram userId" content="" />
  68. <meta name="text:Instagram access token" content="" />
  69. <meta name="color:Search Border" content="#cccccc"/>
  70. <meta name="color:Search Border On Focus" content="#f7c282"/>
  71. <meta name="color:Link Header" content="#54A7AE"/>
  72. <meta name="select:Body font" content="Montserrat" title="Montserrat">
  73. <meta name="select:Body font" content="Roboto" title="Roboto">
  74. <meta name="select:Body font" content="Source Sans Pro" title="Source Sans Pro">
  75. <meta name="select:Body font" content="Droid Serif" title="Droid Serif">
  76. <meta name="select:Body font" content="Lato" title="Lato">
  77. <meta name="select:Body font" content="Merriweather" title="Merriweather">
  78. <meta name="select:Body font" content="PT Sans" title="PT Sans">
  79. <meta name="select:Body font" content="Roboto Slab" title="Roboto Slab">
  80. <meta name="select:Body font" content="Raleway" title="Raleway">
  81. <meta name="select:Body font" content="Vollkorn" title="Volkorn">
  82. <meta name="select:Body font" content="Varela" title="Varela">
  83. <meta name="select:Body font" content="Varela Round" title="Varela Round">
  84. <meta name="select:Body font" content="Open Sans" title="Open Sans">
  85. <meta name="select:Body font" content="Arial" title="Arial">
  86. <meta name="select:Body font" content="Georgia" title="Georgia">
  87. <meta name="select:Body font" content="Cabin" title="Cabin">
  88. <meta name="select:Title font" content="Yanone Kaffeesatz" title="Yanone Kaffeesatz">
  89. <meta name="select:Title font" content="Roboto" title="Roboto">
  90. <meta name="select:Title font" content="Source Sans Pro" title="Source Sans Pro">
  91. <meta name="select:Title font" content="Droid Serif" title="Droid Serif">
  92. <meta name="select:Title font" content="Lato" title="Lato">
  93. <meta name="select:Title font" content="Merriweather" title="Merriweather">
  94. <meta name="select:Title font" content="PT Sans" title="PT Sans">
  95. <meta name="select:Title font" content="Roboto Slab" title="Roboto Slab">
  96. <meta name="select:Title font" content="Raleway" title="Raleway">
  97. <meta name="select:Title font" content="Vollkorn" title="Volkorn">
  98. <meta name="select:Title font" content="Varela" title="Varela">
  99. <meta name="select:Title font" content="Varela Round" title="Varela Round">
  100. <meta name="select:Title font" content="Open Sans" title="Open Sans">
  101. <meta name="select:Title font" content="Arial" title="Arial">
  102. <meta name="select:Title font" content="Georgia" title="Georgia">
  103. <meta name="select:Title font" content="Cabin" title="Cabin">
  104. <meta name="select:Description font" content="Roboto" title="Roboto">
  105. <meta name="select:Description font" content="Yanone Kaffeesatz" title="Yanone">
  106. <meta name="select:Description font" content="Source Sans Pro" title="Source Sans Pro">
  107. <meta name="select:Description font" content="Droid Serif" title="Droid Serif">
  108. <meta name="select:Description font" content="Lato" title="Lato">
  109. <meta name="select:Description font" content="Merriweather" title="Merriweather">
  110. <meta name="select:Description font" content="PT Sans" title="PT Sans">
  111. <meta name="select:Description font" content="Roboto Slab" title="Roboto Slab">
  112. <meta name="select:Description font" content="Raleway" title="Raleway">
  113. <meta name="select:Description font" content="Vollkorn" title="Volkorn">
  114. <meta name="select:Description font" content="Varela" title="Varela">
  115. <meta name="select:Description font" content="Varela Round" title="Varela Round">
  116. <meta name="select:Description font" content="Open Sans" title="Open Sans">
  117. <meta name="select:Description font" content="Arial" title="Arial">
  118. <meta name="select:Description font" content="Georgia" title="Georgia">
  119. <meta name="select:Description font" content="Cabin" title="Cabin">
  120. <meta name="text:Disqus Shortname" content=""/>
  121. <meta name="text:Google Analytics ID" content=""/>
  122. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/Bf7nirtey/leen.jpg" title="Leen"/>
  123. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/ysWnirtd5/inbit.jpg" title="Inbit"/>
  124. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/W6Ynirtg2/barg.jpg" title="Barg"/>
  125. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/yVHnhqmel/sea.jpg" title="sea"/>
  126. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/g16ngxz0v/12.jpg" title="Manana"/>
  127. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/wtgnhqmdw/riziz.jpg" title="Riziz"/>
  128. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/92Inhqmfi/travel.jpg" title="Travel"/>
  129. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/4hanhqmgc/telle.jpg" title="Telle"/>
  130. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/ZwZnhqmh6/rama.jpg" title="Rama"/>
  131. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/mtlnhqmht/rain.jpg" title="Rain"/>
  132. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/Xdinhqmio/sea_2.jpg" title="Sea 2"/>
  133. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/zkMngxy3r/8.jpg" title="Adam"/>
  134. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/ML6ngxyb2/9.jpg" title="Dapple dapple"/>
  135. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/EoSngxyms/10.jpg" title="California"/>
  136. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/5F8ngxyp0/11.jpg" title="Screaming"/>
  137. <meta name="select:Backgruond" content="http://static.tumblr.com/zdvilra/oZSngxz6h/13.jpg" title="Savara"/>
  138. <meta name="select:Backgruond" content="" title="None"/>
  139. <meta name="if:Infinite Scrolling" content="1"/>
  140. <meta name="if:Infinite Scrolling Trigger" content="1"/>
  141. <meta name="if:Show Random Post" content="1"/>
  142. <meta name="if:Show Intro" content="1"/>
  143. <meta name="if:Show Archive Page" content="1"/>
  144. <meta name="if:Show Feed Page" content="1"/>
  145. <meta name="text:WebSite URL" content=""/>
  146. <meta name="text:Facebook URL" content=""/>
  147. <meta name="text:Twitter URL" content=""/>
  148. <meta name="text:Google Plus URL" content=""/>
  149. <meta name="text:Dribbble URL" content=""/>
  150. <meta name="text:Instagram URL" content=""/>
  151. <meta name="text:Flickr URL" content=""/>
  152. <meta name="text:Youtube URL" content=""/>
  153. <meta name="text:Vimeo URL" content=""/>
  154. <meta name="text:DeviantArt URL" content=""/>
  155. <meta name="text:Pinterest URL" content=""/>
  156. <meta name="text:LinkedIn URL" content=""/>
  157. <meta name="text:Behance URL" content=""/>
  158. <meta name="text:GitHub URL" content=""/>
  159. <meta name="text:Spotify URL" content=""/>
  160. <meta name="text:SoundCloud URL" content=""/>
  161. <meta name="text:Wordpress URL" content=""/>
  162. <meta name="text:Tag 1" content=""/>
  163. <meta name="text:Tag 2" content=""/>
  164. <meta name="text:Tag 3" content=""/>
  165. <meta name="text:Tag 4" content=""/>
  166. <meta name="text:Tag 5" content=""/>
  167. <meta name="text:Tag 6" content=""/>
  168. <meta name="text:Tag 7" content=""/>
  169. <meta name="text:Tag 8" content=""/>
  170. <meta name="text:Tag 9" content=""/>
  171. <meta name="text:Tag 10" content=""/>
  172. <meta name="text:Tag 11" content=""/>
  173. <meta name="text:Tag 12" content=""/>
  174. <meta name="text:Tag 13" content=""/>
  175. <meta name="text:Tag 14" content=""/>
  176. <meta name="text:Tag 15" content=""/>
  177. {/block:Hidden}
  178. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/o4g7vaw/Ozonhqpnf/font-css.css">
  179. <link href='//fonts.googleapis.com/css?family={select:Body Font}:400,700,700italic,900,900italic,400italic,300' rel='stylesheet' type='text/css'>
  180. <link href='//fonts.googleapis.com/css?family={select:Title Font}:400,700,700italic,900,900italic,400italic,300' rel='stylesheet' type='text/css'>
  181. <link href='//fonts.googleapis.com/css?family={select:Description Font}:400,700,700italic,900,900italic,400italic,300' rel='stylesheet' type='text/css'>
  182. <style type="text/css">
  183. *, *::before, *::after {
  184. box-sizing: border-box;
  185. }
  186. *:focus {
  187. outline: none;
  188. border: none;
  189. }
  190. body{
  191. font-family: '{select:Body Font}', sans-serif;
  192. background: transparent;
  193. {block:IfShowIntro}
  194. {block:IndexPage}
  195. overflow: hidden;
  196. {/block:IndexPage}
  197. {/block:IfShowIntro}
  198. overflow-x: hidden !important;
  199. }
  200. a{
  201. text-decoration: none;
  202. outline: none;
  203. color: {AccentColor};
  204. }
  205.  
  206. a:focus , a:visited{
  207. outline: none;
  208. border: none;
  209. -moz-outline: none
  210. }
  211. .post iframe, embed, object, .post video ,video,.tumblr_video_container{
  212. width: 100% !important;
  213. display: block;
  214. }
  215.  
  216. #loading{
  217. width: 100%;
  218. height: 100%;
  219. position: absolute;
  220. top: 0;
  221. left: 0;
  222. z-index: 9999;
  223. background: {color:Loading Background Color};
  224. }
  225. #load-Span{
  226. position: absolute;
  227. top: 0;
  228. bottom: 0;
  229. margin: auto;
  230. width: 0%;
  231. height:{text:Loading Line Height};
  232. background: #fff;
  233. }
  234. #color{
  235. width: 100%;
  236. height: 2px;
  237. background: {color:Loading Line Color};
  238. }
  239. .container{
  240. {block:IfShowIntro}
  241. opacity: 0;
  242. {/block:IfShowIntro}
  243. position: relative;
  244. padding: 0;
  245. margin: 0;
  246. {block:PermalinkPage}
  247. opacity: 1;
  248. {/block:PermalinkPage}
  249. }
  250. .bg{
  251. position: fixed;
  252. width: 100%;
  253. height: 110%;
  254. {block:IfNotBackgroundImageImage}
  255. background: {color:Background} url('{select:Backgruond}') center center fixed;
  256. background-size: 100% 100% !important;
  257. {/block:IfNotBackgroundImageImage}
  258. {block:IfBackgroundImageImage}
  259. {block:IfNotRepeatBackgruond}
  260. background: {color:Background} url('{image:Background Image}') center center fixed;
  261. background-size: 100% 100% !important;
  262. {/block:IfNotRepeatBackgruond}
  263. {block:IfRepeatBackgruond}
  264. background: {color:Background} url({image:Background Image}) repeat fixed;
  265. {/block:IfRepeatBackgruond}
  266. {/block:IfBackgroundImageImage}
  267. {block:IfShowIntro}
  268. {block:IndexPage}
  269. opacity: 0;
  270. {/block:IndexPage}
  271. {/block:IfShowIntro}
  272. }
  273. .fl-right {
  274. float: right;
  275. }
  276. .fl-left {
  277. float: left;
  278. }
  279. .sideBar{
  280. width: 300px;
  281. height: 100% ;
  282. position: fixed;
  283. top: 0;
  284. -webkit-transition: all 0.3s ease;
  285. transition: all 0.3s ease;
  286. {block:IfShowIntro}
  287. {block:IndexPage}
  288. left: -100%;
  289. {/block:IndexPage}
  290. {/block:IfShowIntro}
  291. }
  292. .sideBar:before{
  293. position: absolute;
  294. width: 100%;
  295. height: 100%;
  296. content: '';
  297. opacity: {select:SideBar Background Opacity};
  298. background: {color:SideBar Background Color};
  299. }
  300. #main{
  301. position: relative;
  302. {block:IfNotShowIntro}
  303. {block:IndexPage}
  304. opacity: 0;
  305. transition: opacity 0.5s ease;
  306. -webkit-transition: opacity 0.5s ease;
  307. -moz-transition: opacity 0.5s ease;
  308. -ms-transition: opacity 0.5s ease;
  309. -o-transition: opacity 0.5s ease;
  310. {/block:IndexPage}
  311. {/block:IfNotShowIntro}
  312. }
  313. .main{
  314. width: 75%;
  315. min-height: 800px;
  316. margin-bottom: 150px;
  317. margin-left: 320px;
  318. margin-top: 10px;
  319. padding-bottom: 100px;
  320. position: relative;
  321. {block:PermalinkPage}
  322. margin-left: 320px;
  323. margin-bottom: 400px;
  324. {/block:PermalinkPage}
  325. }
  326. .post{
  327. width: 32%;
  328. margin-left: 8px;
  329. margin-top: 7px ;
  330. border-radius: 3px;
  331. background: #fff;
  332. border: 1px solid;
  333. border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  334. -webkit-border-radius: 3px;
  335. overflow: hidden;
  336. {block:PermalinkPage}
  337. width: 70%;
  338. right: 0;
  339. left: 0;
  340. margin: 50px auto;
  341. overflow: visible;
  342. {/block:PermalinkPage}
  343. }
  344. .photo-set{
  345. background: #fff;
  346. padding: 5px;
  347. min-height: 100%;
  348. }
  349. .two-column .post{
  350. width: 48%;
  351. {block:PermalinkPage}
  352. width: 70%;
  353. {/block:PermalinkPage}
  354. }
  355. .one-column .post{
  356. width: 60%;
  357. margin: auto;
  358. margin-top: 10px;
  359. left: 0;
  360. right: 0;
  361. }
  362. .post-img{
  363. display: block !important;
  364. width: 100%;
  365. }
  366. a h1.title{
  367. padding: 0px 30px;
  368. text-align: center;
  369. margin-left: 5px;
  370. font-size: {text:Title Size};
  371. font-weight: 300;
  372. opacity: 0.7 !important;
  373. color:{color:Title Color};
  374. font-family: '{select:Title Font}', sans-serif;
  375. letter-spacing: 1.5px;
  376. white-space: pre-wrap;
  377. white-space: -moz-pre-wrap;
  378. white-space: -pre-wrap;
  379. white-space: -o-pre-wrap;
  380. word-wrap: break-word;
  381. }
  382. .decs{
  383. padding: 0px 20px;
  384. font-size: 14px;
  385. font-weight: bold;
  386. color: {color:Description Color};
  387. line-height: 1.4;
  388. text-align: justify;
  389. font-family: '{select:Description Font}', sans-serif;
  390. }
  391. .square{
  392. border-radius: 0px;
  393. }
  394. .circle{
  395. border-radius: 50%;
  396. }
  397. .avatar-img{
  398. margin: 15px auto;
  399. width: 128px;
  400. height: 128px;
  401. background: url({Favicon});
  402. background-size: 100% 100%;
  403. display: block !important;
  404. transition: border-radius 0.2s ease;
  405. -webkit-transition: border-radius 0.2s ease;
  406. -moz-transition: border-radius 0.2s ease;
  407. -ms-transition: border-radius 0.2s ease;
  408. -o-transition: border-radius 0.2s ease;
  409. }
  410. .loading-content{
  411. margin: 70px auto;
  412. display: block !important;
  413. }
  414. img{
  415. max-width: 100%;
  416. height: auto;
  417. border: none;
  418. outline: none;
  419. }
  420. /* Instagram */
  421. #instafeed {
  422. margin:35px auto;
  423. width: 220px;
  424. }
  425. #instafeed img{
  426. width: 110px;
  427. overflow: hidden;
  428. padding: 4px;
  429. opacity: 0.8 !important;
  430. transition: all 0.3s ease;
  431. }
  432. #instafeed p , #basicuse p , p.follow , #twitter > p{
  433. color: {color:Menu Icon Color};
  434. text-align: center;
  435. margin-bottom: 10px;
  436. line-height: 1.3;
  437. font-size: 14px;
  438. opacity: 0.8 !important;
  439. font-weight: bold;
  440. }
  441. #instafeed img:hover{
  442. opacity: 1 !important;
  443. }
  444. #twitter > p > a{
  445. color: {color:Menu Icon Color}
  446. }
  447. /* followed */
  448. ul.followed{
  449. list-style: none;
  450. width: 246px;
  451. text-align: center;
  452. margin: 0 auto;
  453. padding: 0;
  454. }
  455. ul.followed li{
  456. display: inline-block;
  457. }
  458. /* zoom Icon */
  459. .zoom-con{
  460. position: relative;
  461. width: 100%;
  462. height: 100%;
  463. }
  464. .post:hover .zoom-lens{
  465. opacity: 1;
  466. }
  467. .zoom-lens{
  468. position: absolute;
  469. cursor: pointer;
  470. opacity: 0;
  471. background: transparent;
  472. top: 50%;
  473. left: 50%;
  474. height: 80px;
  475. width: 80px;
  476. transition :all 0.2s ease-out;
  477. transform: translate(-50%,-50%);
  478. -moz-transform: translate(-50%,-50%);
  479. -webkit-transform: translate(-50%,-50%);
  480. -ms-transform: translate(-50%,-50%);
  481. -o-transform: translate(-50%,-50%);
  482. }
  483. .zoom-one{
  484. position: absolute;
  485. cursor: pointer;
  486. left: 0;
  487. top: 0;
  488. width: 80px;
  489. height: 80px;
  490. border-radius: 48px;
  491. opacity: 0.4;
  492. background: {color:Zoom Icon Color};
  493. transition :all 0.2s ease-out;
  494. -moz-transition :all 0.2s ease-out;
  495. -webkit-transition :all 0.2s ease-out;
  496. -o-transition :all 0.2s ease-out;
  497. -ms-transition :all 0.2s ease-out;
  498. }
  499. .zoom-lens:hover .zoom-one{
  500. transform: scale(1.5,1.5);
  501. -moz-transform: scale(1.5,1.5);
  502. -ms-transform: scale(1.5,1.5);
  503. -o-transform: scale(1.5,1.5);
  504. -webkit-transform: scale(1.5,1.5);
  505. opacity: 0;
  506. }
  507. .zoom-icon{
  508. position: absolute;
  509. left: 12px;
  510. top: 12px;
  511. opacity: 0.8;
  512. background-color: {color:Zoom Icon Color};
  513. width: 56px;
  514. height: 56px;
  515. border-radius: 36px;
  516. transition :all 0.1s linear;
  517. -moz-transition :all 0.1s linear;
  518. -o-transition :all 0.1s linear;
  519. -ms-transition :all 0.1s linear;
  520. -webkit-transition :all 0.1s linear;
  521. }
  522. .zoom-lens:hover .zoom-icon{
  523. transform: scale(0.95,0.95);
  524. -moz-transform: scale(0.95,0.95);
  525. -ms-transform: scale(0.95,0.95);
  526. -o-transform: scale(0.95,0.95);
  527. -webkit-transform: scale(0.95,0.95);
  528. opacity: 0.7;
  529. }
  530. .preloader{
  531. position: absolute;
  532. top: 50%;
  533. left: 50%;
  534. transform: translate(-50%,-50%);
  535. -moz-transform: translate(-50%,-50%);
  536. -webkit-transform: translate(-50%,-50%);
  537. -ms-transform: translate(-50%,-50%);
  538. -o-transform: translate(-50%,-50%);
  539. }
  540.  
  541. /*twitter */
  542.  
  543. #twitter{
  544. margin: 30px auto;
  545. padding: 10px;
  546. text-align: center;
  547. }
  548. #tweets p{
  549. padding: 0px 20px;
  550. font-size: 14px;
  551. font-weight: bold;
  552. color: {color:Twitter Text};
  553. line-height: 1.4;
  554. }
  555. #tweets a{
  556. color: {color:Twitter Links};
  557. display: block;
  558. padding-left: 6px;
  559. line-height: 1.5;
  560. font-size: 12px;
  561. -webkit-transition: all 0.5s ease;
  562. transition: all 0.5s ease;
  563. }
  564. #tweets a:hover{
  565. opacity: 0.5;
  566. }
  567. #tweets a:first-of-type {
  568. margin-top: 10px;
  569. }
  570. #tweets p:hover .twitterS{
  571. color: #55acee;
  572. }
  573. .twitterS{
  574. margin-right: 5px;
  575. font-size: 16px;
  576. margin-left: -10px;
  577. -webkit-transition: all 0.5s ease;
  578. transition: all 0.5s ease;
  579. }
  580.  
  581. /* Flickr CSS */
  582.  
  583. #basicuse{
  584. margin: 0 auto;
  585. width: 232px;
  586. }
  587. .thumbs { margin: 0; padding: 0; overflow: hidden; }
  588. .thumbs li { list-style: none; float: left; margin: 5px; padding: 3px; background: #eee; -moz-box-shadow: 0 0 4px #444; -webkit-box-shadow: 0 0 2px #000; }
  589. .thumbs li a { }
  590. .thumbs li img {
  591. display: block;
  592. width: 100px;
  593. }
  594. .thumbs li a img { border: none;}
  595.  
  596. .mCustomScrollbar{-ms-touch-action:none;touch-action:none}.mCustomScrollbar.mCS_no_scrollbar{-ms-touch-action:auto;touch-action:auto}.mCustomScrollBox{position:relative;overflow:hidden;height:100%;max-width:100%;outline:none;direction:ltr}.mCSB_container{overflow:hidden;width:auto;height:auto}.mCSB_inside > .mCSB_container{margin-right:30px}.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0}.mCS-dir-rtl > .mCSB_inside > .mCSB_container{margin-right:0;margin-left:5px}.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-left:0}.mCSB_scrollTools{position:absolute;width:5px;height:auto;left:auto;top:0;right:0;bottom:0}.mCSB_outside + .mCSB_scrollTools{right:-26px}.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{right:auto;left:0}.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{left:-26px}.mCSB_scrollTools .mCSB_draggerContainer{position:absolute;top:0;left:0;bottom:0;right:10px;height:auto}.mCSB_scrollTools a + .mCSB_draggerContainer{margin:20px 0}.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCSB_scrollTools .mCSB_dragger{cursor:pointer;width:100%;height:30px;z-index:1}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{position:relative;width:4px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;text-align:center}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:12px}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:8px}.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_buttonDown{display:block;position:absolute;height:20px;width:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools .mCSB_buttonDown{bottom:0}.mCSB_scrollTools,.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight{-webkit-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{-webkit-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out}.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{right:0;margin:12px 0}.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:0;margin:0 12px}.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{left:0;right:auto}.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{height:50px}.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{width:50px}.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,0.2);filter:alpha(opacity=20);-ms-filter:alpha(opacity=20)}.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,0.5);filter:alpha(opacity=50);-ms-filter:alpha(opacity=50)}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,0.2);filter:alpha(opacity=20);-ms-filter:alpha(opacity=20)}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,0.5);filter:alpha(opacity=50);-ms-filter:alpha(opacity=50)}
  597.  
  598. /* like reblog share btn */
  599.  
  600.  
  601. .p-btn{
  602. width: 100%;
  603. height: 40px;
  604. background: #fff;
  605. border-top: 1px solid #ccc;
  606. position: relative;
  607. }
  608. .date{
  609. position: absolute;
  610. right: 10px;
  611. top: 12px;
  612. font-size: 12px;
  613. font-weight: bold;
  614. }
  615. .date a{
  616. color: #666;
  617. }
  618.  
  619. .permalink{
  620. height: 20px;
  621. width: 20px;
  622. position: absolute;
  623. top: 12px;
  624. left: 90px;
  625. }
  626. .permalink a{
  627. color: #666;
  628. }
  629. .post-reblog{
  630. height: 20px;
  631. width: 20px;
  632. position: absolute;
  633. top: 11px;
  634. left: 10px;
  635. }
  636. .post-reblog > a , .post-like > i{
  637. display: block;
  638. font-size: 20px;
  639. font-family: 'leen-theme';
  640. cursor: pointer;
  641. color: #666;
  642. }
  643. .icon-reblog:before {
  644. content: "\e61d";
  645. padding: 0;
  646. margin: 0;
  647. }
  648. .post-like{
  649. height: 20px;
  650. width: 20px;
  651. position: absolute;
  652. top: 11px;
  653. left: 35px;
  654. }
  655. .post-like > i {
  656. position: relative;
  657. color: #666;
  658. z-index: 1;
  659. }
  660. .like_button {
  661. position: absolute;
  662. top: 2px;
  663. margin-top: 2px;
  664. left: 1px;
  665. opacity: 0;
  666. z-index: 999999;
  667. cursor: pointer;
  668. }
  669. .like_button.liked {
  670. opacity: 0;
  671. }
  672. .like_button.liked + i {
  673. color: red;
  674. }
  675. .icon-heart:before {
  676. content: "\e603";
  677. }
  678. .icon-heart{
  679. cursor: pointer;
  680. }
  681. .share{
  682. width: 18px;
  683. height: 18px;
  684. position: absolute;
  685. top: 12px;
  686. left: 65px;
  687. }
  688. .fa-upload{
  689. cursor: pointer;
  690. color: #666;
  691. }
  692. .share input{
  693. display: none;
  694. }
  695. .social {
  696. transform-origin:50% 0%;
  697. -webkit-transform: scale(0) translateY(10px);
  698. -moz-transform:scale(0) translateY(10px);
  699. -o-transform:scale(0) translateY(10px);
  700. transform:scale(0) translateY(10px);
  701. opacity:1;
  702. transition: all 0.3s ease;
  703. position: absolute;
  704. left: -53px;
  705. z-index: 999;
  706. }
  707. .social ul {
  708. position:relative;
  709. left:0;
  710. right:0;
  711. margin:auto;
  712. color:#fff;
  713. height:38px;
  714. width:160px;
  715. padding:0;
  716. list-style:none;
  717. }
  718. .social ul a{
  719. color: #fff;
  720. }
  721. .social ul li {
  722. font-size:15px;
  723. cursor:pointer;
  724. width:40px;
  725. margin:0;
  726. padding:12px 0;
  727. text-align:center;
  728. float:left;
  729. display:block;
  730. height:38px;
  731. }
  732. .social ul a:nth-child(1) li{
  733. background: #3c5b9b;
  734. }
  735. .social ul a:nth-child(3) li{
  736. background: #2daae1;
  737. }
  738. .social ul a:nth-child(2) li{
  739. background: #f63e28;
  740. }
  741. .social ul a:nth-child(4) li{
  742. background: #cb2027;
  743. }
  744. .social ul:after {
  745. content:'';
  746. display:block;
  747. position:absolute;
  748. left:-40px;
  749. right:0;
  750. margin:35px auto;
  751. height:0;
  752. width:0;
  753. border-left: 10px solid transparent;
  754. border-right: 10px solid transparent;
  755. border-top: 10px solid #f63e28;
  756. }
  757. .share input:checked ~ .social {
  758. opacity:1;
  759. -webkit-transform: scale(1) translateY(-67px);
  760. -moz-transform:scale(1) translateY(-67px);
  761. -o-transform:scale(1) translateY(-67px);
  762. transform:scale(1) translateY(-67px);
  763. -webkit-transition:0.3s ease;
  764. -moz-transition:0.3s ease;
  765. -o-transition:0.3s ease;
  766. transition:0.3s ease;
  767. }
  768.  
  769. /* pagination */
  770.  
  771. .pagination{
  772. height: 50px;
  773. text-align: center;
  774. line-height: 50px;
  775. font-size: 30px;
  776. color: #666;
  777. background: transparent;
  778. width: 150px;
  779. position: absolute;
  780. bottom: 0;
  781. right: 0;
  782. left: 0;
  783. margin: auto;
  784. {block:PermalinkPage}
  785. bottom: -70px;
  786. {/block:PermalinkPage}
  787.  
  788. {block:IndexPage}
  789. {block:IfInfiniteScrolling}
  790. {block:IfInfiniteScrollingTrigger}
  791. width: 50px !important;
  792.  
  793.  
  794. {/block:IfInfiniteScrollingTrigger}
  795. {/block:IfInfiniteScrolling}
  796. {/block:IndexPage}
  797. }
  798. .prev a{
  799. float: left;
  800. height: 50px;
  801. width: 50px;
  802. display: block;
  803. background: rgba(255,255,255,0.8);
  804. }
  805. a#next{
  806. float: right;
  807. height: 50px;
  808. width: 50px;
  809. display: block;
  810. background: rgba(255,255,255,0.8);
  811. {block:IndexPage}
  812. {block:IfInfiniteScrolling}
  813. opacity: 0;
  814. {/block:IfInfiniteScrolling}
  815. {block:IfInfiniteScrolling}
  816. {block:IfInfiniteScrollingTrigger}
  817. opacity: 1;
  818. transform: rotate(90deg);
  819. -webkit-transform: rotate(90deg);
  820. -ms-transform: rotate(90deg);
  821. -o-transform: rotate(90deg);
  822. -moz-transform: rotate(90deg);
  823. {/block:IfInfiniteScrollingTrigger}
  824. {/block:IfInfiniteScrolling}
  825. {/block:IndexPage}
  826. }
  827. .prev a:hover , a#next:hover{
  828. background: #fff;
  829. -webkit-transition: all 0.5s ease;
  830. -moz-transition: all 0.5s ease;
  831. -o-transition: all 0.5s ease;
  832. transition: all 0.5s ease;
  833. }
  834. .mfp-title{
  835. display: none;
  836. }
  837. {block:IndexPage}
  838. {block:IfHideCaption}
  839. .hideCaption{display: none !important}
  840. {/block:IfHideCaption}
  841. {/block:IndexPage}
  842. .caption{
  843. padding: 0 20px;
  844. color: #666;
  845. width: 100%;
  846. background: #fff;
  847. word-wrap: break-word;
  848. }
  849. .caption em, .caption i {
  850. font-style: italic;
  851. }
  852. blockquote ul{
  853. margin-left: -15px;
  854. }
  855. .caption ul li{
  856. line-height: 1.5;
  857. }
  858. p{
  859. margin: 15px 0;
  860. font-size: 13px;
  861. line-height: 22px;
  862. }
  863. h2{
  864. font-size: 15px;
  865. color: #666;
  866. }
  867. blockquote{
  868. font-size: 13px;
  869. line-height: 22px;
  870. color: #222;
  871. margin: 10px;
  872. }
  873. .quote-wrap{
  874. padding: 0 25px;
  875. background: #fff;
  876. }
  877. .quote-wrap p{
  878. font-size: 13px;
  879. }
  880. .quote-m{
  881. font-size: 18px;
  882. position: relative;
  883. margin: 15px 0;
  884. font-family: '{select:Body Font}', sans-serif;
  885. }
  886. .quote-m:before{
  887. font-size: 25px;
  888. content: '"';
  889. position: absolute;
  890. top: 0;
  891. left: -5px;
  892. margin: -5px;
  893. }
  894. .quote-m:after {
  895. font-size: 25px;
  896. content: '"';
  897. position: absolute;
  898. }
  899. .scrollup{
  900. width:40px;
  901. height:40px;
  902. position:fixed;
  903. bottom:50px;
  904. right:20px;
  905. opacity: 0.7;
  906. background: #000;
  907. display:none;
  908. -webkit-transition: all 0.5s ease;
  909. -moz-transition: all 0.5s ease;
  910. -o-transition: all 0.5s ease;
  911. transition: all 0.5s ease;
  912. }
  913. .scrollup:hover{
  914. opacity: 1;
  915. }
  916. .caption li img{
  917. max-width: 95%;
  918. margin: 10px auto;
  919. }
  920. .texttitle{
  921. background: #fff;
  922. padding: 15px 15px;
  923. margin: 0;
  924. text-align: center;
  925. }
  926. .texttitle p , .texttitle h2{
  927. margin-bottom: 0;
  928. margin-top: 0;
  929. color: #000;
  930. }
  931. .texttitle a{
  932. color: #000;
  933. white-space: pre-wrap;
  934. white-space: -moz-pre-wrap;
  935. white-space: -pre-wrap;
  936. white-space: -o-pre-wrap;
  937. word-wrap: break-word;
  938. }
  939. .texttitle h2{
  940. font-size: 16px;
  941. }
  942. .pinterest{
  943. display: none;
  944. }
  945. .photo .pinterest{
  946. display: block;
  947. }
  948. .answer-post-wrap{
  949. width: 100%;
  950. background: #fff;
  951. }
  952. .asker-wrap img , .answer-wrap img{
  953. margin: 10px;
  954. }
  955. .asker-wrap .decsol ,.answer-wrap .decsol{
  956. min-height: 50px;
  957. padding-top: 10px;
  958. padding-bottom: 10px;
  959. }
  960. .decsol{
  961. padding: 0px 20px;
  962. font-size: 14px;
  963. color: #666;
  964. line-height: 1.4;
  965. }
  966. .menu ul{
  967. list-style: none;
  968. padding: 20px 30px 0 30px;
  969. text-align: center;
  970. width: 100%;
  971. font-size: 13px;
  972. font-weight: bold;
  973. }
  974. .menu ul li{
  975. margin-top: 7px;
  976. margin-left: 10px;
  977. display: inline-block;
  978. }
  979. .menu ul li span{
  980. margin-left: 5px;
  981. }
  982. .menu ul li a{
  983. opacity: 0.8;
  984. color: {color:Menu Icon Color};
  985. }
  986. .menu ul li a:hover{
  987. opacity: 1;
  988. }
  989.  
  990. .chatwrap div{
  991. text-align: left;
  992. padding: 8px 5px;
  993. font-size: 13px;
  994. font-weight: 400;
  995. color: #777;
  996. }
  997. .odd{
  998. background: none repeat scroll 0% 0% #F1F1F0;
  999. }
  1000. .odd , .even{
  1001. width: 95%;
  1002. margin: 0 auto;
  1003. }
  1004. .odd{
  1005. margin: 5px auto;
  1006. }
  1007. .chatwrap div:first-child{
  1008. margin-top: 10px;
  1009. }
  1010. .chatwrap div:last-child{
  1011. border: none;
  1012. margin-bottom: 20px;
  1013. }
  1014. .odd .label{
  1015. color: #56bc8a !important;
  1016. }
  1017. .even .label{
  1018. color: #A9BCF5 !important;
  1019. }
  1020. .chatwrap .line{
  1021. line-height: 1.5;
  1022. }
  1023.  
  1024. .linkwrap{
  1025. width: 100%;
  1026. min-height: 70px;
  1027. background-color:{color:Link Header};
  1028. padding: 7px 0px;
  1029. position: relative;
  1030. }
  1031. .link-img{
  1032. position: absolute;
  1033. top: 0;
  1034. left: 0;
  1035. width: 70px;
  1036. height: 70px;
  1037. margin: -1px;
  1038. }
  1039. .link-host{
  1040. position: relative;
  1041.  
  1042. }
  1043. .link-text{
  1044. padding: 0px 70px;
  1045. width: 100%;
  1046. font-size: 13px;
  1047.  
  1048. text-align: center;
  1049. }
  1050. .link-host a{
  1051. color: #fff;
  1052. vertical-align: middle;
  1053. line-height: 1.4;
  1054. display: block;
  1055. white-space: pre-wrap;
  1056. white-space: -moz-pre-wrap;
  1057. white-space: -pre-wrap;
  1058. white-space: -o-pre-wrap;
  1059. word-wrap: break-word;
  1060. }
  1061. .link-icon{
  1062. position: absolute;
  1063. top: 0;
  1064. right: 0;
  1065. width: 70px;
  1066. height: 70px;
  1067. }
  1068. .link-icon i{
  1069. margin: 25px;
  1070. font-size: 23px;
  1071. color: #fff;
  1072. }
  1073.  
  1074. .tags-border{
  1075. width: 50%;
  1076. margin: 0 auto;
  1077. height: 1px;
  1078. background: #999;
  1079. }
  1080.  
  1081. .tags-wrap{
  1082. padding: 10px 20px;
  1083. word-break: break-all;
  1084. }
  1085. .tags-wrap a{
  1086. font-weight: 400;
  1087. margin-right:8px;
  1088. display: inline-block;
  1089. line-height: 1.3;
  1090. font-size: 13px;
  1091. color: #666;
  1092.  
  1093. }
  1094. .post-notes{
  1095. text-align: left;
  1096. background: #fff;
  1097. position: relative;
  1098. width: 100%;
  1099. }
  1100. .notes{
  1101. padding: 10px 10px 10px 12px;
  1102. }
  1103. .notes li img{
  1104. height: 20px;
  1105. width: 20px;
  1106. border: 1px solid rgba(0, 0, 0, 0.8);
  1107. }
  1108. .notes li{
  1109. height: auto;
  1110. position: relative;
  1111. margin:3px;
  1112. display: inline-block;
  1113. }
  1114. .notes li span{
  1115. display: none;
  1116. }
  1117. .more_notes_link , .notes_loading{
  1118. font-size: 12px;
  1119. padding: 15px;
  1120.  
  1121. }
  1122. ol blockquote{
  1123. display: none;
  1124. }
  1125. #disqus_thread{
  1126. padding: 15px;
  1127. }
  1128.  
  1129. /* search */
  1130.  
  1131. .input {
  1132. position: relative;
  1133. z-index: 1;
  1134. display: inline-block;
  1135. margin: 1em;
  1136. max-width: 400px;
  1137. width: calc(100% - 2em);
  1138. vertical-align: top;
  1139. }
  1140.  
  1141. .input__field {
  1142. position: relative;
  1143. display: block;
  1144. float: right;
  1145. padding: 0.8em;
  1146. width: 60%;
  1147. border: none;
  1148. border-radius: 0;
  1149. background: #f0f0f0;
  1150. color: #aaa;
  1151. font-weight: bold;
  1152. -webkit-appearance: none; /* for box shadows to show on iOS */
  1153. }
  1154.  
  1155. .input__field:focus {
  1156. outline: none;
  1157. }
  1158.  
  1159. .input__label {
  1160. display: inline-block;
  1161. float: right;
  1162. padding: 0 1em;
  1163. width: 40%;
  1164. color: #666;
  1165. font-weight: bold;
  1166. font-size: 70.25%;
  1167. -webkit-touch-callout: none;
  1168. -webkit-user-select: none;
  1169. -khtml-user-select: none;
  1170. -moz-user-select: none;
  1171. -ms-user-select: none;
  1172. user-select: none;
  1173. }
  1174.  
  1175. .input__label-content {
  1176. position: relative;
  1177. display: block;
  1178. padding: 1.6em 0;
  1179. width: 100%;
  1180. }
  1181. .graphic {
  1182. position: absolute;
  1183. top: 0;
  1184. left: 0;
  1185. fill: none;
  1186. }
  1187.  
  1188. .icon {
  1189. color: #ddd;
  1190. font-size: 150%;
  1191. }
  1192. /* Hoshi */
  1193. .input--hoshi {
  1194. overflow: hidden;
  1195. }
  1196.  
  1197. .input__field--hoshi {
  1198. margin-top: 1em;
  1199. padding: 0.85em 0.15em;
  1200. width: 100%;
  1201. background: transparent;
  1202. color: #595F6E;
  1203. }
  1204.  
  1205. .input__label--hoshi {
  1206. position: absolute;
  1207. bottom: 0;
  1208. left: 0;
  1209. padding: 0 0.25em;
  1210. width: 100%;
  1211. height: calc(100% - 1em);
  1212. text-align: left;
  1213. pointer-events: none;
  1214. }
  1215.  
  1216. .input__label-content--hoshi {
  1217. position: absolute;
  1218. }
  1219.  
  1220. .input__label--hoshi::before,
  1221. .input__label--hoshi::after {
  1222. content: '';
  1223. position: absolute;
  1224. top: 0;
  1225. left: 0;
  1226. width: 100%;
  1227. height: calc(100% - 10px);
  1228. border-bottom: 1px solid {color:Search Border};
  1229. }
  1230.  
  1231. .input__label--hoshi::after {
  1232. margin-top: 0px;
  1233. border-bottom: 1px solid red;
  1234. -webkit-transform: translate3d(-100%, 0, 0);
  1235. transform: translate3d(-100%, 0, 0);
  1236. -webkit-transition: -webkit-transform 0.3s;
  1237. transition: transform 0.3s;
  1238. }
  1239.  
  1240. .input__label--hoshi-color-1::after {
  1241. border-color: {color:Search Border On Focus};
  1242. }
  1243.  
  1244. .input__field--hoshi:focus + .input__label--hoshi::after,
  1245. .input--filled .input__label--hoshi::after {
  1246. -webkit-transform: translate3d(0, 0, 0);
  1247. transform: translate3d(0, 0, 0);
  1248. }
  1249.  
  1250. .input__field--hoshi:focus + .input__label--hoshi .input__label-content--hoshi,
  1251. .input--filled .input__label-content--hoshi {
  1252. -webkit-animation: anim-1 0.3s forwards;
  1253. animation: anim-1 0.3s forwards;
  1254. }
  1255.  
  1256. @-webkit-keyframes anim-1 {
  1257. 50% {
  1258. opacity: 0;
  1259. -webkit-transform: translate3d(1em, 0, 0);
  1260. transform: translate3d(1em, 0, 0);
  1261. }
  1262. 51% {
  1263. opacity: 0;
  1264. -webkit-transform: translate3d(-1em, -40%, 0);
  1265. transform: translate3d(-1em, -40%, 0);
  1266. }
  1267. 100% {
  1268. opacity: 1;
  1269. -webkit-transform: translate3d(0, -40%, 0);
  1270. transform: translate3d(0, -40%, 0);
  1271. }
  1272. }
  1273.  
  1274. @keyframes anim-1 {
  1275. 50% {
  1276. opacity: 0;
  1277. -webkit-transform: translate3d(1em, 0, 0);
  1278. transform: translate3d(1em, 0, 0);
  1279. }
  1280. 51% {
  1281. opacity: 0;
  1282. -webkit-transform: translate3d(-1em, -40%, 0);
  1283. transform: translate3d(-1em, -40%, 0);
  1284. }
  1285. 100% {
  1286. opacity: 1;
  1287. -webkit-transform: translate3d(0, -40%, 0);
  1288. transform: translate3d(0, -40%, 0);
  1289. }
  1290. }
  1291.  
  1292. .clear-fix{
  1293. clear: both;
  1294. }
  1295. @media (max-width: 1250px) {
  1296. .main{
  1297. margin-left: 300px;
  1298. }
  1299. }
  1300. @media (max-width: 1150px) {
  1301. .post , .two-column .post{
  1302. width: 45%;
  1303. {block:PermalinkPage}
  1304. width: 70%;
  1305. {/block:PermalinkPage}
  1306. }
  1307. .main{
  1308. margin-left: 300px;
  1309. }
  1310. .one-column{
  1311. margin-left: 250px;
  1312. }
  1313. {block:PermalinkPage}
  1314. .main , .one-column ,.two-column{
  1315. margin-left: 250px;
  1316. }
  1317. {/block:PermalinkPage}
  1318.  
  1319. .one-column .post{
  1320. width: 80%;
  1321. }
  1322. #instafeed {
  1323. width: 220px;
  1324. }
  1325. .decs {
  1326. padding: 0px 15px;
  1327. font-size: 14px;
  1328. }
  1329. a h1.title{
  1330. padding: 0px 10px;
  1331. font-size: 35px;
  1332. }
  1333.  
  1334. }
  1335. @media (max-width: 950px) {
  1336. .post , .two-column .post{
  1337. width: 70% ;
  1338. }
  1339. .main{
  1340. width:70%;
  1341. margin-left: 350px;
  1342. {block:PermalinkPage}
  1343. margin-left: 300px;
  1344. {/block:PermalinkPage}
  1345. }
  1346. .tags-leen{
  1347. width: 70% !important;
  1348. }
  1349. }
  1350.  
  1351. @media (max-width: 50rem) {
  1352. .main{
  1353. width: 100%;
  1354. padding-left: 0px;
  1355. margin: 20px auto;
  1356. min-height: 200px;
  1357. {block:PermalinkPage}
  1358. margin-top: 15px;
  1359. min-height: 200px;
  1360. width: 90%;
  1361. position:absolute;
  1362. right:0;
  1363. left:0;
  1364. margin:20px auto;
  1365. {/block:PermalinkPage}
  1366. }
  1367. form {
  1368. width: 350px;
  1369. margin: 0 auto;
  1370. }
  1371. .decs {
  1372. width: 70%;
  1373. margin: 0 auto;
  1374. text-align: center;
  1375. }
  1376. .sideBar{
  1377. width: 100%;
  1378. position: relative;
  1379. padding-top: 20px;
  1380. margin-top: -20px;
  1381. }
  1382. .post , .two-column .post{
  1383. width: 49%;
  1384. margin-top: 7px;
  1385. margin-left: 5px;
  1386. {block:PermalinkPage}
  1387. width: 100%;
  1388. {/block:PermalinkPage}
  1389. }
  1390. .tags-leen{
  1391. width: 98% !important;
  1392. }
  1393. .one-column .post{
  1394. width: 70%;
  1395. }
  1396. #instafeed {
  1397. margin:0 auto;
  1398. width: 440px;
  1399. }
  1400. .fl-left,
  1401. .fl-right {
  1402. display: block;
  1403. float: none;
  1404. }
  1405. #basicuse{
  1406. padding-left: 0px;
  1407. width: 465px;
  1408. }
  1409. ul.followed {
  1410. width: 580px;
  1411. margin: 0 auto;
  1412. }
  1413.  
  1414. @media (max-width: 35rem) {
  1415. html{
  1416. font-size: 12px !important;
  1417. }
  1418. .main{
  1419. width: 90%;
  1420. padding-left: 0px;
  1421. margin: 20px auto;
  1422. {block:PermalinkPage}
  1423. margin-top: 15px;
  1424. {/block:PermalinkPage}
  1425. }
  1426. form {
  1427. width: 250px;
  1428. margin: 0 auto;
  1429. }
  1430. .decs {
  1431. width: 70%;
  1432. margin: 0 auto;
  1433. text-align: center;
  1434. }
  1435. .sideBar{
  1436. width: 100%;
  1437. position: relative;
  1438. padding-top: 20px;
  1439. margin-top: -20px;
  1440. }
  1441. .post , .two-column .post , .one-column .post{
  1442. width: 100%;
  1443. margin-top: 7px;
  1444. margin-left: 0px;
  1445. }
  1446. .tags-leen{
  1447. width: 100% !important;
  1448. }
  1449. #instafeed {
  1450. margin:0 auto;
  1451. width: 220px;
  1452. }
  1453. .fl-left,
  1454. .fl-right {
  1455. display: block;
  1456. float: none;
  1457. }
  1458. #basicuse{
  1459. padding-left: 0px;
  1460. width:232px;
  1461. }
  1462. ul.followed {
  1463. width: 290px;
  1464. margin: 0 auto;
  1465. }
  1466. }
  1467.  
  1468. {CustomCSS}
  1469. </style>
  1470. </head>
  1471. <body>
  1472. {block:IfShowIntro}
  1473. {block:IndexPage}
  1474. <div id="loading">
  1475. <div class="loading-content" id="loading-content">
  1476. {block:ShowAvatar} <div class="avatar-img {AvatarShape}"></div>{/block:ShowAvatar}
  1477. {block:ShowTitle}<a href="{BlogURL}"><h1 class="title">{Title}</h1></a>{/block:ShowTitle}
  1478. </div>
  1479. <div id="load-Span">
  1480. <div id="color"></div>
  1481. </div>
  1482. </div>
  1483. {/block:IndexPage}
  1484. {/block:IfShowIntro}
  1485. <div class="bg"></div>
  1486. <div class="sideBar fl-left">
  1487. {block:ShowAvatar}
  1488. <a href="{BlogURL}">
  1489. <div class="avatar-img {AvatarShape}"></div>
  1490. </a>
  1491. {/block:ShowAvatar}
  1492. {block:ShowTitle}<a href="{BlogURL}"><h1 class="title">{Title}</h1></a>{/block:ShowTitle}
  1493. {block:ShowDescription}<p class="decs">{Description}</p>{/block:ShowDescription}
  1494. <div class="menu">
  1495. <ul>
  1496. {block:AskEnabled}
  1497. <li><a href="/ask"><i class="fa fa-envelope-o"></i><span>{AskLabel}<span></a></li>
  1498. {/block:AskEnabled}
  1499. {block:SubmissionsEnabled}
  1500. <li><a href="/submit"><i class="fa fa-plug"></i><span>{SubmitLabel}<span></a></li>
  1501. {/block:SubmissionsEnabled}
  1502. {block:HasPages}
  1503. {block:Pages}
  1504. <li><a href="{URL}" {Target}><i class="fa fa-file-powerpoint-o"></i><span>{Label}<span></a></li>
  1505. {/block:Pages}
  1506. {/block:HasPages}
  1507. {block:IfShowFeedPage}
  1508. <li><a href="{RSS}"><i class="fa fa-rss"></i><span>{lang:Feed}<span></a></li>
  1509. {/block:IfShowFeedPage}
  1510. {block:IfShowRandomPost}
  1511. <li><a href="/random"><i class="fa fa-random"></i><span>{lang:Random}<span></a></li>
  1512. {/block:IfShowRandomPost}
  1513. {block:IfShowArchivePage}
  1514. <li><a href="/archive"><i class="fa fa-newspaper-o"></i><span>{lang:Archive}<span></a></li>
  1515. {/block:IfShowArchivePage}
  1516. {block:IfTag1}<li><a href="{BlogURL}tagged/{text:Tag 1}"><i class="fa fa-slack"></i><span>{text:Tag 1}</span></a></li>{/block:IfTag1}
  1517. {block:IfTag2}<li><a href="{BlogURL}tagged/{text:Tag 2}"><i class="fa fa-slack"></i><span>{text:Tag 2}</span></a></li>{/block:IfTag2}
  1518. {block:IfTag3}<li><a href="{BlogURL}tagged/{text:Tag 3}"><i class="fa fa-slack"></i><span>{text:Tag 3}</span></a></li>{/block:IfTag3}
  1519. {block:IfTag4}<li><a href="{BlogURL}tagged/{text:Tag 4}"><i class="fa fa-slack"></i><span>{text:Tag 4}</span></a></li>{/block:IfTag4}
  1520. {block:IfTag5}<li><a href="{BlogURL}tagged/{text:Tag 5}"><i class="fa fa-slack"></i><span>{text:Tag 5}</span></a></li>{/block:IfTag5}
  1521. {block:IfTag6}<li><a href="{BlogURL}tagged/{text:Tag 6}"><i class="fa fa-slack"></i><span>{text:Tag 6}</span></a></li>{/block:IfTag6}
  1522. {block:IfTag7}<li><a href="{BlogURL}tagged/{text:Tag 7}"><i class="fa fa-slack"></i><span>{text:Tag 7}</span></a></li>{/block:IfTag7}
  1523. {block:IfTag8}<li><a href="{BlogURL}tagged/{text:Tag 8}"><i class="fa fa-slack"></i><span>{text:Tag 8}</span></a></li>{/block:IfTag8}
  1524. {block:IfTag9}<li><a href="{BlogURL}tagged/{text:Tag 9}"><i class="fa fa-slack"></i><span>{text:Tag 9}</span></a></li>{/block:IfTag9}
  1525. {block:IfTag10}<li><a href="{BlogURL}tagged/{text:Tag 10}"><i class="fa fa-slack"></i><span>{text:Tag 10}</span></a></li>{/block:IfTag10}
  1526. {block:IfTag11}<li><a href="{BlogURL}tagged/{text:Tag 11}"><i class="fa fa-slack"></i><span>{text:Tag 11}</span></a></li>{/block:IfTag11}
  1527. {block:IfTag12}<li><a href="{BlogURL}tagged/{text:Tag 12}"><i class="fa fa-slack"></i><span>{text:Tag 12}</span></a></li>{/block:IfTag12}
  1528. {block:IfTag13}<li><a href="{BlogURL}tagged/{text:Tag 13}"><i class="fa fa-slack"></i><span>{text:Tag 13}</span></a></li>{/block:IfTag13}
  1529. {block:IfTag14}<li><a href="{BlogURL}tagged/{text:Tag 14}"><i class="fa fa-slack"></i><span>{text:Tag 14}</span></a></li>{/block:IfTag14}
  1530. {block:IfTag15}<li><a href="{BlogURL}tagged/{text:Tag 15}"><i class="fa fa-slack"></i><span>{text:Tag 15}</span></a></li>{/block:IfTag15}
  1531. {block:IfWebSiteURL}<li><a href="{text:WebSite URL}" target="_blank"><i class="fa fa-link"></i><span>My WebSite</span></a></li>{/block:IfWebSiteURL}
  1532. {block:IfFacebookURL}<li><a href="{text:Facebook URL}" target="_blank"><i class="fa fa-facebook"></i><span>Facebook</span></a></li>{/block:IfFacebookURL}
  1533. {block:IfTwitterURL}<li><a href="{text:Twitter URL}" target="_blank"><i class="fa fa-twitter"></i><span>Twitter</span></a></li>{/block:IfTwitterURL}
  1534. {block:IfGooglePlusURL}<li><a href="{text:Google Plus URL}" target="_blank"><i class="fa fa-google-plus"></i><span>Google Plus</span></a></li>{/block:IfGooglePlusURL}
  1535. {block:IfDribbbleURL}<li><a href="{text:Dribbble URL}" target="_blank"><i class="fa fa-dribbble"></i><span>Dribbble</span></a></li>{/block:IfDribbbleURL}
  1536. {block:IfInstagramURL}<li><a href="{text:Instagram URL}" target="_blank"><i class="fa fa-instagram"></i><span>Instagram</span></a></li>{/block:IfInstagramURL}
  1537. {block:IfFlickrURL}<li><a href="{text:Flickr URL}" target="_blank"><i class="fa fa-flickr"></i><span>Flickr</span></a></li>{/block:IfFlickrURL}
  1538. {block:IfYoutubeURL}<li><a href="{text:Youtube URL}" target="_blank"><i class="fa fa-youtube-play"></i><span>Youtube</span></a></li>{/block:IfYoutubeURL}
  1539. {block:IfVimeoURL}<li><a href="{text:Vimeo URL}" target="_blank"><i class="fa fa-vimeo-square"></i><span>Vimeo</span></a></li>{/block:IfVimeoURL}
  1540. {block:IfDeviantArtURL}<li><a href="{text:DeviantArt URL}" target="_blank"><i class="fa fa-deviantart"></i><span>DeviantArt</span></a></li>{/block:IfDeviantArtURL}
  1541. {block:IfPinterestURL}<li><a href="{text:Pinterest URL}" target="_blank"><i class="fa fa-pinterest"></i><span>Pinterest</span></a></li>{/block:IfPinterestURL}
  1542. {block:IfLinkedInURL}<li><a href="{text:LinkedIn URL}" target="_blank"><i class="fa fa-linkedin-square"></i><span>LinkedIn</span></a></li>{/block:IfLinkedInURL}
  1543. {block:IfBehanceURL}<li><a href="{text:Behance URL}" target="_blank"><i class="fa fa-behance"></i><span>Behance</span></a></li>{/block:IfBehanceURL}
  1544. {block:IfGitHubURL}<li><a href="{text:GitHub URL}" target="_blank"><i class="fa fa-github-alt"></i><span>GitHub</span></a></li>{/block:IfGitHubURL}
  1545. {block:IfSpotifyURL}<li><a href="{text:Spotify URL}" target="_blank"><i class="fa fa-spotify"></i><span>Spotify</span></a></li>{/block:IfSpotifyURL}
  1546. {block:IfSoundCloudURL}<li><a href="{text:SoundCloud URL}" target="_blank"><i class="fa fa-soundcloud"></i><span>SoundCloud</span></a></li>{/block:IfSoundCloudURL}
  1547. {block:IfWordpressURL}<li><a href="{text:Wordpress URL}" target="_blank"><i class="fa fa-wordpress"></i><span>Wordpress</span></a></li>{/block:IfWordpressURL}
  1548. <li><a href="http://www.leenthemes.com/" target="_blank"><i class="fa fa-paint-brush"></i><span>Leen Themes<span></a></li>
  1549. </ul>
  1550. </div>
  1551. <form action="/search" method="get">
  1552. <span class="input input--hoshi">
  1553. <input class="input__field input__field--hoshi" name="q" id="input-4" />
  1554. <label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
  1555. <span class="input__label-content input__label-content--hoshi">Search By Tag</span>
  1556. </label>
  1557. </span>
  1558. </form>
  1559. {block:IfInstagramaccesstoken}
  1560. <div id="instafeed">
  1561. <p>Instagram {lang:Feed}</p>
  1562. </div>
  1563. {/block:IfInstagramaccesstoken}
  1564. {block:IfFlickrID}
  1565. <ul id="basicuse" class="thumbs">
  1566. <p>Flickr {lang:Feed}</p>
  1567. </ul>
  1568. {/block:IfFlickrID}
  1569. {block:Twitter}
  1570. <div id="twitter" style="display:none;">
  1571. <p><a href="http://twitter.com/{TwitterUsername}" target="_blank">{lang:Latest Tweets}</a></p>
  1572. <div id="tweets"></div>
  1573. </div>
  1574. {/block:Twitter}
  1575. {block:IfShowPeopleIfollow}
  1576. {block:Following}
  1577. <p class="follow">{lang:People I follow}:</p>
  1578. <ul class="followed">
  1579. {block:Followed}
  1580. <li><a href="{FollowedURL}" target="_blank"><img src="{FollowedPortraitURL-48}"/></a></li>
  1581. {/block:Followed}
  1582. </ul>
  1583. {/block:Following}
  1584. {/block:IfShowPeopleIfollow}
  1585. <br>
  1586. </div> <!-- End SideBar -->
  1587. <div class="container">
  1588. <div class="main fl-left {select:Layout type}" id="main">
  1589. {block:Posts}
  1590. <div class="post {block:Photo}photo{/block:Photo}" id="{PostID}">
  1591. {block:Photo}
  1592. <div class="zoom-con">
  1593. {LinkOpenTag}<img class="post-img" src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}
  1594. <a class="zoom-lens" href="{PhotoURL-HighRes}" title="{lang:High-res}">
  1595. <div class="zoom-one" ></div>
  1596. <div class="zoom-icon">
  1597. <img src="http://static.tumblr.com/zdvilra/Mfiniw0uu/magnify_icon_beacon.png">
  1598. </div>
  1599. </a>
  1600. </div>
  1601. {/block:Photo}
  1602. {block:Photoset}
  1603. <div class="photoset-grid photoset{PostID}" data-layout="{PhotosetLayout}" data-id="photoset{PostID}" data-popup="{PostID}">
  1604. {block:Photos}
  1605. <img src="{PhotoURL-400}" width="{PhotoWidth-400}" height="{PhotoHeight-400}" {block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}
  1606. {block:Caption}alt="{Caption}"{/block:caption} />
  1607. {/block:Photos}
  1608. </div>
  1609. {/block:Photoset}
  1610. {block:Video}
  1611. <div class="video">{VideoEmbed-700}</div>
  1612. {/block:Video}
  1613. {block:Audio}
  1614. <div>
  1615. {block:AudioEmbed}
  1616. {AudioEmbed}
  1617. {/block:AudioEmbed}
  1618. </div>
  1619. {/block:Audio}
  1620. {block:Text}
  1621. <div class="caption">
  1622. {block:Title}
  1623. <div class="texttitle">
  1624. <a href="{Permalink}" {Target}><h2>{Title}</h2></a>
  1625. </div>
  1626. {/block:Title}
  1627. {Body}
  1628. </div>
  1629. {/block:Text}
  1630. {block:Link}
  1631. <div class="linkwrap">
  1632. {block:Thumbnail}
  1633. <div class="link-img">
  1634. <a href="{URL}" {Target} ><img class="thumbnail" src="{Thumbnail}"></a>
  1635. </div>
  1636. {/block:Thumbnail}
  1637. <div class="link-icon"><i class="fa fa-link"></i></div>
  1638. {block:Host}
  1639. <div class="link-host">
  1640. <div class="link-text">
  1641. <a href="{URL}" {Target}>{Name}<br>{Host}</a>
  1642. </div>
  1643. </div>
  1644. {/block:Host}
  1645. </div>
  1646. {block:Description}
  1647. <div class="caption">
  1648. {Description}
  1649. </div>
  1650. {/block:Description}
  1651. {/block:Link}
  1652. {block:Answer}
  1653. <div class="answer-post-wrap">
  1654. <div class="asker-wrap">
  1655. <img class="fl-left" src="{AskerPortraitURL-48}">
  1656. <div class="decsol">{Asker} asked: {Question}</div>
  1657. </div>
  1658. <br />
  1659. {block:Answerer}
  1660. <div class="answer-wrap">
  1661. <img class="fl-left" src="{AnswererPortraitURL-48}" alt="{Title}"/>
  1662. <div class="decsol">{Answerer} answered: {Answer}</div>
  1663. </div>
  1664. {/block:Answerer}
  1665. <div class="caption">
  1666. <section class="link-scaleupbounce">
  1667. <p>{Replies}</p>
  1668. </section>
  1669. </div>
  1670. </div>
  1671. {/block:Answer}
  1672. {block:Quote}
  1673. <div class="quote-wrap"><div class="quote-m">{Quote}</div>
  1674. {block:Source}
  1675. <p>- {Source}</p>
  1676. {/block:Source}
  1677. </div>
  1678. {/block:Quote}
  1679. {block:Chat}
  1680. {block:Title}
  1681. <div class="texttitle">
  1682. <p>{Title}</p>
  1683. </div>
  1684. {/block:Title}
  1685. <div class="chatwrap">
  1686. {block:Lines}
  1687. <div class="{Alt} user_{UserNumber}">
  1688. {block:Label}
  1689. <span class="label">{Label}</span>
  1690. {/block:Label}
  1691. <span class="line">{Line}</span>
  1692. </div>
  1693. {/block:Lines}
  1694. </div>
  1695. {/block:Chat}
  1696. {block:Caption}<div class="caption hideCaption">{Caption}</div>{/block:Caption}
  1697. {block:HasTags}{block:Caption}<div class="tags-border"></div>{/block:Caption}<div class="tags-wrap">{block:Tags}<a href="{TagURL}" {Target}>#{Tag}</a>{/block:Tags}</div>{block:HasTags}
  1698. {block:Date}
  1699. <div class="p-btn">
  1700. <div class="permalink">
  1701. <a href="{Permalink}" {Target} title="Permalink"><i class="fa fa-link"></i></a>
  1702. </div>
  1703. <div class="post-reblog">
  1704. <a class="icon-reblog" href="{ReblogURL}" target="_blank" title="Reblog"></a>
  1705. </div>
  1706. <div class="post-like">{LikeButton size="14"}<i class="icon-heart"></i></div>
  1707. <div class="share">
  1708. <input type="checkbox" id="btn-{PostID}">
  1709. <label for="btn-{PostID}" class="label"><i class="fa fa-upload"></i></label>
  1710. <div class="social">
  1711. <ul>
  1712. <a href="https://www.facebook.com/sharer/sharer.php?u={Permalink}" onclick="javascript:void window.open('https://www.facebook.com/sharer/sharer.php?u={Permalink}','1407949634885','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;"><li><i class="fa fa-facebook"></i></li></a>
  1713. <a href="https://plus.google.com/share?url={Permalink}" onclick="javascript:void window.open('https://plus.google.com/share?url={Permalink}','1407949574551','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;"><li><i class="fa fa-google-plus"></i></li></a>
  1714. <a href="https://twitter.com/intent/tweet?url={Permalink}" onclick="javascript:void window.open('https://twitter.com/intent/tweet?url={Permalink}','1407949672085','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;"><li><i class="fa fa-twitter"></i></li></a>
  1715. <a class="pinterest" href="https://pinterest.com/pin/create/button/?url={ShortURL}&media={PhotoURL-HighRes}&description={PostTitle}" onclick="javascript:void window.open('https://pinterest.com/pin/create/button/?url={ShortURL}&media={PhotoURL-HighRes}&description={PostTitle}','1422084482054','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;"><li><i class="fa fa-pinterest"></i></li></a>
  1716. </ul>
  1717. </div>
  1718. </div>
  1719. <div class="date">
  1720. {block:IndexPage}
  1721. {block:ifDateFormatTimeAgo}
  1722. <a href="{Permalink}">{TimeAgo}</a>
  1723. {/block:ifDateFormatTimeAgo}
  1724. {block:ifNotDateFormatTimeAgo}
  1725. <a href="{Permalink}">{ShortMonth} {DayOfMonthWithZero} {Year}</a>
  1726. {/block:ifNotDateFormatTimeAgo}
  1727. {/block:IndexPage}
  1728. {block:PermalinkPage}
  1729. <a href="{Permalink}">{NoteCountWithLabel}</a>
  1730. {/block:PermalinkPage}
  1731. </div>
  1732. </div>
  1733. {/block:Date}
  1734. {block:PermalinkPage}
  1735. {block:PostNotes}
  1736. <div class="post-notes">
  1737. {PostNotes-64}
  1738. </div>
  1739. {/block:PostNotes}
  1740. {block:Date}
  1741. {block:IfDisqusShortname}
  1742. <div class="post-notes">
  1743. <div id="disqus_thread"></div>
  1744. <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
  1745. <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
  1746. </div>
  1747. {/block:IfDisqusShortname}
  1748. {/block:Date}
  1749. {/block:PermalinkPage}
  1750. {block:PermalinkPagination}
  1751. <div class="pagination">
  1752. {block:NextPost}
  1753. <div class="prev">
  1754. <a href="{NextPost}">
  1755. <i class="fa fa-angle-left"></i>
  1756. </a>
  1757. </div>
  1758. {/block:NextPost}
  1759. {block:PreviousPost}
  1760. <div>
  1761. <a id="next" href="{PreviousPost}">
  1762. <i class="fa fa-angle-right"></i>
  1763. </a>
  1764. </div>
  1765. {/block:PreviousPost}
  1766. </div>
  1767. {/block:PermalinkPagination}
  1768.  
  1769. </div> <!-- End Post -->
  1770. {/block:Posts}
  1771.  
  1772. {block:Pagination}
  1773. <div class="pagination">
  1774. {block:PreviousPage}
  1775. <div class="prev">
  1776. <a href="{PreviousPage}">
  1777. <i class="fa fa-angle-left"></i>
  1778. </a>
  1779. </div>
  1780. {/block:PreviousPage}
  1781. {block:NextPage}
  1782. <a id="next" href="{NextPage}">
  1783. <i class="fa fa-angle-right"></i>
  1784. </a>
  1785. {/block:NextPage}
  1786. </div>
  1787. {/block:Pagination}
  1788. </div> <!-- End Main -->
  1789.  
  1790. {block:IndexPage}<div class="scrollup"><a href="/"><img src="http://static.tumblr.com/j1tjexd/uSOm6ujd1/totop-grey.png" width="40" height="40"></a></div>{/block:IndexPage}
  1791. </div> <!-- End Container -->
  1792.  
  1793.  
  1794. <script src="http://static.tumblr.com/zdvilra/AoRnituow/fitvid.js"></script>
  1795. <script src="http://static.tumblr.com/zdvilra/BY3niuf32/imagesloaded.pkgd.min.js"></script>
  1796. <script src="http://static.tumblr.com/zdvilra/gdKniuf2h/masonry.pkgd.min.js"></script>
  1797.  
  1798. <script src="http://static.tumblr.com/6znvctm/dTsnnqrcw/jquery.photoset-grid.js"></script>
  1799.  
  1800. {block:IfInfiniteScrolling}
  1801. <script src="http://static.tumblr.com/anzluor/98Ymoinyd/jquery.infinitescroll.min.js"></script>
  1802. {block:IfInfiniteScrollingTrigger}
  1803. <script src="http://static.tumblr.com/zdvilra/btsniu93y/manual-trigger.js"></script>
  1804. {/block:IfInfiniteScrollingTrigger}
  1805. {/block:IfInfiniteScrolling}
  1806. <script type="text/javascript">
  1807. $(document).ready(function(){
  1808. var container = $('#main');
  1809. container.imagesLoaded( function(){
  1810. container.masonry({
  1811. itemSelector : '#main .post'
  1812. });
  1813. });
  1814. container.masonry({itemSelector : '#main .post'});
  1815. photoset();
  1816.  
  1817. {block:IfNotShowIntro}
  1818. {block:IndexPage}
  1819. setTimeout(function (){container.css({ opacity: 1 });}, 1000);
  1820. {/block:IndexPage}
  1821. {/block:IfNotShowIntro}
  1822.  
  1823. $('.video').fitVids({customSelector: "iframe"});
  1824.  
  1825. {block:IndexPage}
  1826.  
  1827. {/block:IndexPage}
  1828. {block:IfShowIntro}
  1829. $("body").click(function(){$("body").css("overflow","auto")});
  1830. {/block:IfShowIntro}
  1831.  
  1832. {block:IndexPage}
  1833. {block:IfInfiniteScrolling}
  1834. $(function(){
  1835. container.infinitescroll({
  1836. navSelector : 'div.pagination',
  1837. nextSelector : 'div.pagination a#next',
  1838. itemSelector : '#main .post',
  1839. {block:IfInfiniteScrollingTrigger}behavior: "twitter"{/block:IfInfiniteScrollingTrigger}
  1840. },
  1841. function( newElements ) {
  1842. var $newElems = $( newElements ).css({ opacity: 0 });
  1843. var $newElemsIDs = $newElems.map(function () {
  1844. return this.id;
  1845. }).get();
  1846. photoset();
  1847. container.masonry( 'appended', $newElems, true );
  1848. mansory();
  1849. $('.video').fitVids({customSelector: "iframe"});
  1850. setTimeout(function (){$newElems.css({ opacity: 1 })}, 1000);
  1851. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  1852. }
  1853. );
  1854. });
  1855. {/block:IfInfiniteScrolling}
  1856. {/block:IndexPage}
  1857.  
  1858. });
  1859. var photoset = function(){
  1860. var $allPhotoSets = $('.photoset-grid');
  1861. $allPhotoSets.photosetGrid({
  1862. highresLinks: true,
  1863. gutter: '5px',
  1864. onComplete: function(){
  1865. $allPhotoSets.each(function(){
  1866. var postClass = ".photoset" + $(this).data("popup");
  1867. $(postClass).magnificPopup({
  1868. delegate:"a.highres-link",
  1869. type:"image",
  1870. gallery:{enabled:!0}
  1871. });
  1872. })
  1873. }
  1874. });
  1875. }
  1876. var container = $('#main');
  1877. var mansory = function(){
  1878. setTimeout(function(){ container.masonry({itemSelector : '.post'}) }, 100);
  1879. setTimeout(function(){ container.masonry({itemSelector : '.post'}) }, 200);
  1880. setTimeout(function(){ container.masonry({itemSelector : '.post'}) }, 300);
  1881. setTimeout(function(){ container.masonry({itemSelector : '.post'}) }, 500);
  1882. setTimeout(function(){ container.masonry({itemSelector : '.post'}) }, 1000);
  1883. setTimeout(function(){ container.masonry({itemSelector : '.post'}) }, 2000);
  1884. setTimeout(function(){ container.masonry({itemSelector : '.post'}) }, 4000);
  1885. setTimeout(function(){ container.masonry({itemSelector : '.post'}) }, 6000);
  1886. $( window ).load(function() {container.masonry({itemSelector : '.post'})});
  1887. container.imagesLoaded()
  1888. .progress( function( instance, image ) {
  1889. var result = image.isLoaded ? 'loaded' : 'broken';
  1890. if (result == 'loaded'){
  1891. container.masonry()
  1892. }
  1893. });
  1894. }
  1895.  
  1896. </script>
  1897.  
  1898. {block:IndexPage}
  1899. {block:IfShowIntro}
  1900. <script type="text/javascript">
  1901. var $line = document.getElementById('load-Span');
  1902. var $color = document.getElementById('color');
  1903. var $content = document.getElementById('loading-content');
  1904.  
  1905. var loading = [
  1906. { elements: $line, properties: { width: '20%' } },
  1907. { elements: $line, properties: { width: '30%' } },
  1908. { elements: $line, properties: { width: '50%' } },
  1909. { elements: $line, properties: { width: '100%' } },
  1910. { elements: $color, properties: { opacity: '0' } },
  1911. { elements: $content, properties: { margin: '-1000px' }},
  1912. { elements: $line, properties: { height: '100%' }, options: {
  1913. complete: function () {
  1914. $("body").css("overflow","auto");
  1915. $("#load-Span").empty();
  1916. setTimeout(function(){ $("#loading").remove(); }, 50);
  1917. $(".container").css("opacity","1");
  1918. $(".bg").css("opacity","1");
  1919. $(".sideBar").css("left","0");
  1920. $('.main').velocity( 'transition.slideUpIn' );
  1921. $('img').velocity( 'transition.flipYIn' );
  1922. setTimeout(function (){$('#main').masonry({itemSelector : '.post'});}, 50);
  1923. }
  1924. }
  1925. }
  1926. ];
  1927. $('img').velocity( 'transition.flipXIn' );
  1928. $('.title').velocity( 'transition.slideUpIn' );
  1929. $.Velocity.RunSequence(loading);
  1930.  
  1931. </script>
  1932. {/block:IfShowIntro}
  1933. {/block:IndexPage}
  1934. {block:IfInstagramaccesstoken}
  1935. <script type="text/javascript" src="http://static.tumblr.com/zdvilra/s2nnieqvk/instafeed.min.js"></script>
  1936. <script type="text/javascript">
  1937. var userFeed = new Instafeed({
  1938. get: 'user',
  1939. userId: {text:Instagram userId} ,
  1940. limit: {text:Instagram Photo Count} ,
  1941. accessToken: '{text:Instagram access token}',
  1942. error: function(){
  1943. $('#instafeed').html('<p><small><b>Dont know your user id or access token?</b><a href="https://instagram.com/oauth/authorize/?client_id=f74707967a0e46edb45ffefe2edc8a44&amp;redirect_uri=http://leenthemes.com/Instagram-access-token&amp;response_type=token" target="_blank">Click here</a> to get them.</small></p>');
  1944. }
  1945. });
  1946. userFeed.run();
  1947. </script>
  1948. {/block:IfInstagramaccesstoken}
  1949. <script src="http://static.tumblr.com/zdvilra/wtXnia5oy/jquery.mcustomscrollbar.concat.min.js"></script>
  1950. <script>
  1951. (function($){
  1952. $(".sideBar").mCustomScrollbar({
  1953. theme:"minimal-dark",
  1954. scrollButtons:{ enable: true },
  1955. scrollInertia: 200,
  1956. });
  1957. })(jQuery);
  1958. </script>
  1959. {block:IfFlickrID}
  1960. <script src="http://static.tumblr.com/zdvilra/HUanii72l/jflickrfeed.js"></script>
  1961. <script type="text/javascript">
  1962. $(document).ready(function(){
  1963. $('#basicuse').jflickrfeed({
  1964. limit: {text:Flickr Limit},
  1965. qstrings: {
  1966. id: '{text:Flickr ID}'
  1967. },
  1968. itemTemplate: '<li><a href="https://www.flickr.com/photos/{text:Flickr ID}" target="_blank"><img src="{{image_q}}" alt="{}" /></a></li>'
  1969. });
  1970. });
  1971. </script>
  1972. {/block:IfFlickrID}
  1973. <script src="http://static.tumblr.com/zdvilra/p6Inis01a/classie.js"></script>
  1974. <script src="http://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.min.js?v=1.0.0"></script>
  1975. <script type="text/javascript">
  1976. $('#main').magnificPopup({
  1977. delegate: '.zoom-lens',
  1978. type: 'image',
  1979. gallery: {
  1980. enabled: true
  1981. }
  1982. });
  1983. </script>
  1984.  
  1985. <script type="text/javascript">
  1986. $(document).ready(function(){
  1987. $("body").click(function(){
  1988. $(".photoset_photo").addClass("zoom-lens");
  1989. });
  1990. });
  1991. </script>
  1992.  
  1993. <script type="text/javascript">
  1994. $(document).ready(function(){
  1995. $(window).scroll(function(){
  1996. if ($(this).scrollTop() > 400) {
  1997. $('.scrollup').fadeIn();
  1998. } else {
  1999. $('.scrollup').fadeOut();
  2000. }
  2001. });
  2002. $('.scrollup').click(function(){
  2003. $("html, body").animate({ scrollTop: 0 }, 600);
  2004. return false;
  2005. });
  2006. });
  2007. </script>
  2008.  
  2009. <script type="text/javascript">
  2010. $(window).load(function(){$("head").append('<style type="text/css">a#install-btn{width: 22px;height: 20px;font: 600 12px/18px "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;padding: 2px 4px;background: url("http://static.tumblr.com/tpqedpr/cQ1mbwb60/de.png") rgba(0,0,0,.4) no-repeat;border: 1px solid rgba(0,0,0,0.18);-webkit-border-radius: 1px;-moz-border-radius: 1px;-o-border-radius: 1px;-ms-border-radius: 1px;border-radius: 1px;-moz-box-sizing: border-box;color: #fff;-webkit-box-sizing: border-box;box-sizing: border-box;z-index: 99999;top: 25px;right: 3px;position: fixed;opacity: 0;}#install-btn-txt{padding-left:15px;margin: -1px;}</style>');var e=document.createElement("div");e.innerHTML='<a id="install-btn" class="hidden-xs" href="http://www.leenthemes.com/" title="Install Leen Themes" target="_blank" style="opacity: 1;"></a>',document.body.appendChild(e),e.classList.add("installtheme")});
  2011. </script>
  2012.  
  2013. {block:Twitter}
  2014. <script type="text/javascript">
  2015. function recent_tweets(data) {
  2016. String.prototype.parseURL = function() {
  2017. return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g, function(url) {
  2018. return url.link(url);
  2019. });
  2020. };
  2021. String.prototype.parseUsername = function() {
  2022. return this.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) {
  2023. var username = u.replace("@","")
  2024. return u.link("http://twitter.com/"+username);
  2025. });
  2026. };
  2027. String.prototype.parseHashtag = function() {
  2028. return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(t) {
  2029. var tag = t.replace("#","%23")
  2030. return t.link("http://search.twitter.com/search?q="+tag);
  2031. });
  2032. };
  2033. for (i=0; i<{text:Twitter Limit}; i++) {
  2034. document.getElementById("tweets").innerHTML =
  2035. document.getElementById("tweets").innerHTML +
  2036. '<p><i class="fa fa-twitter twitterS"></i>' + data[i].text.parseURL().parseUsername().parseHashtag() + '</p>'
  2037. }
  2038. }
  2039. document.getElementById("twitter").style.display = 'block';
  2040. </script>
  2041. {/block:Twitter}
  2042. {block:IfGoogleAnalyticsID}
  2043. <script>
  2044. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  2045. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  2046. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  2047. })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  2048.  
  2049. ga('create', '{text:Google Analytics ID}', 'tumblr.com');
  2050. ga('send', 'pageview');
  2051.  
  2052. </script>
  2053. {/block:IfGoogleAnalyticsID}
  2054. {block:Twitter}
  2055. <script type="text/javascript" src="/tweets.js"></script>
  2056. {/block:Twitter}
  2057. </body>
  2058. </html><!-- THANKS TO LEEN HASSO -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!