API tools faq
paste
Advertisement
feiinho

Baltaji Tumblr theme Hakuna Matat http://www.leenthemes

feiinho
Jun 24th, 2016
190
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 65.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" class="no-js">
  3. <head>
  4. <!--===================================================================
  5.  
  6. Baltaji Tumblr theme, v1.0.0
  7. Created by Hakuna Matata
  8. Published on May 6, 2015
  9. All rights reserved
  10.  
  11. If you have any questions, please send me an email:
  12. leentheme@hotmail.com with the name of the theme and a link
  13. to your blog.
  14.  
  15. Feel free to edit and customize this theme for personal use.
  16. more themes ? ===> http://www.leenthemes.com/
  17.  
  18. http://www.leenthemes.com/
  19. Published on May 3, 2015
  20. All rights reserved
  21.  
  22. ==================================================================
  23.  
  24. External resources used in this theme:
  25.  
  26. # SCRIPT: jQuery v1.11.2
  27. + http://jquery.com
  28. + jQuery Foundation, Inc. and other contributors
  29. + Licensed under the MIT license
  30.  
  31. # SCRIPT: Infinite Scroll
  32. + https://github.com/paulirish/infinite-scroll
  33. + version 2.0b2.120519
  34. + Copyright 2011/12 Paul Irish & Luke Shumard
  35. + Licensed under the MIT license
  36.  
  37. # SCRIPT: Modernizr 2.8.3 (Custom Build) | MIT & BSD
  38. + http://modernizr.com
  39.  
  40. # FONT: FONT AWESOME (v4.3.0)
  41. + http://fontawesome.io
  42. + Dave Gandy
  43. + Font licensed under the SIL Open Font License 1.1
  44. + CSS licensed under the MIT license
  45.  
  46. ============================================================== -->
  47.  
  48. <title>{Title}{block:TagPage} &bull; Posts Tagged &lsquo;{Tag}&rsquo;{/block:TagPage}{block:PostSummary} &bull; {PostSummary}{/block:PostSummary}</title>
  49. <link rel="shortcut icon" href="{Favicon}"/>
  50. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  51. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  52. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  53. <meta charset="UTF-8"/>
  54. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  55. <script src="http://static.tumblr.com/6znvctm/BiVnnze9x/baltaji.js"></script>
  56. <link href='//fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  57. <link href='//fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'>
  58. <link href="//fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Serif:400,400italic" rel="stylesheet" type="text/css">
  59. <link href='http://fonts.googleapis.com/css?family=Khula:300,600,400,700' rel='stylesheet' type='text/css'>
  60. {block:Hidden}
  61. <meta name="image:Background image" content=""/>
  62. <meta name="if:Repeat Backgruond" content="1"/>
  63. <meta name="if:Infinite Scrolling" content="1"/>
  64. <meta name="if:Show Tag Cloud" content="0"/>
  65. <meta name="if:People I follow" content="1"/>
  66. <meta name="if:Show Exif and camera info" content="1"/>
  67. <meta name="color:Gradient top" content="#97c5e0">
  68. <meta name="color:Gradient bottom" content="#f7c282">
  69. <meta name="color:Title Color" content="#94C2C2"/>
  70. <meta name="color:Link Header" content="#A67EC2"/>
  71. <meta name="color:Text Header" content="#94C2C2"/>
  72. <meta name="color:Quote Header" content="#D98C40"/>
  73. <meta name="color:Tags Color" content="#9991C2"/>
  74. <meta name="color:Menu Icons" content="#94C2C2"/>
  75. <meta name="color:Search Color" content="#94C2C2"/>
  76. <meta name="color:Footer Color" content="#ffffff">
  77. <meta name="if:Show Tag Cloud" content="1"/>
  78. <meta name="if:Show search widget" content="1"/>
  79. <meta name="if:Show Caption" content="1"/>
  80. <meta name="if:Show Tags" content="1"/>
  81. <meta name="if:Show Archive Page" content="1"/>
  82. <meta name="if:Show Feed Page" content="0"/>
  83. <meta name="if:Show Reblogged From Avatar" content="1"/>
  84. <meta name="text:Instagram photo count" content="6" />
  85. <meta name="text:Instagram userId" content="" />
  86. <meta name="text:Instagram access token" content="" />
  87. <meta name="text:Dribbble User Name" content="" />
  88. <meta name="text:We Heart It User Name" content="" />
  89. <meta name="text:Disqus Shortname" content=""/>
  90. <meta name="text:WebSite URL" content=""/>
  91. <meta name="text:Facebook URL" content=""/>
  92. <meta name="text:Google URL" content=""/>
  93. <meta name="text:Vine URL" content=""/>
  94. <meta name="text:Twitter URL" content=""/>
  95. <meta name="text:Google Plus URL" content=""/>
  96. <meta name="text:Dribbble URL" content=""/>
  97. <meta name="text:Instagram URL" content=""/>
  98. <meta name="text:Flickr URL" content=""/>
  99. <meta name="text:Youtube URL" content=""/>
  100. <meta name="text:Vimeo URL" content=""/>
  101. <meta name="text:DeviantArt URL" content=""/>
  102. <meta name="text:Pinterest URL" content=""/>
  103. <meta name="text:LinkedIn URL" content=""/>
  104. <meta name="text:Behance URL" content=""/>
  105. <meta name="text:GitHub URL" content=""/>
  106. <meta name="text:Spotify URL" content=""/>
  107. <meta name="text:SoundCloud URL" content=""/>
  108. <meta name="text:Wordpress URL" content=""/>
  109.  
  110. <meta name="text:Extra head scripts" content=""/>
  111. <meta name="text:Extra body scripts" content=""/>
  112. {/block:Hidden}
  113. <!--[if IE]>
  114. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  115. <![endif]-->
  116. <!-- Stylesheets -->
  117. {block:IfExtraheadscripts}{text:Extra head scripts}{/block:IfExtraheadscripts}
  118. <link rel="stylesheet" href="http://static.tumblr.com/zdvilra/GZGnmptcq/bootstrap.min.css">
  119. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  120. <link rel="stylesheet" type="text/css" href="//static.tumblr.com/cah6mnn/7Ztnlplyd/colorbox.css">
  121. <style type="text/css">
  122. body{
  123. font-family: 'Sofia Pro', sans-serif;
  124. font: normal 14px/22px 'Droid Sans', sans-serif;
  125. color: rgb(94, 102, 97);
  126. font-size: 15px;
  127. overflow-x: hidden;
  128. line-height: 1.5;
  129. background: linear-gradient(to bottom, {color:Gradient top} 0%, {color:Gradient bottom} 100%) repeat fixed 0% 0% transparent;
  130. {block:IfBackgroundImageImage}
  131. {block:IfNotRepeatBackgruond}
  132. background: url('{image:Background Image}') center center fixed;
  133. background-size: 100% 100% !important;
  134. {/block:IfNotRepeatBackgruond}
  135. {block:IfRepeatBackgruond}
  136. background: url({image:Background Image}) repeat fixed;
  137. {/block:IfRepeatBackgruond}
  138. {/block:IfBackgroundImageImage}
  139. }
  140. .container{margin-top: 50px;}
  141. ::selection {background: #ddf2e8;color:#000;}
  142. ::-moz-selection { background: #ddf2e8;color:#000;}
  143. .item{
  144. background: #fff;
  145. margin-bottom: 50px;
  146. border-radius: 5px;
  147. padding: 15px;
  148. box-shadow: 0 0 1px rgba(34, 25, 25, 0.4);
  149. }
  150. .item .closePanel , .item .DragPanel , .item .Draggable-note{
  151. display: none !important;
  152. }
  153. .info{
  154. width: 60px;
  155. height: 60px;
  156. font-family: 'Pacifico', cursive;
  157. position: absolute;
  158. top: 20px;
  159. right: -50px;
  160. background: #fff;
  161. cursor: pointer;
  162. border-radius: 10%;
  163. -webkit-filter: url("#goo");
  164. filter: url("#goo");
  165. }
  166. .data{opacity: 0;}
  167. img{max-width: 100%;height: auto;}
  168. .logo{
  169. width: 40px;
  170. height: 40px;
  171. position: absolute;
  172. top: 0px;
  173. bottom: 0;
  174. left: 0;
  175. right: 0;
  176. margin: auto;
  177. border-radius: 50%;
  178. }
  179. .open .logo{top: -20px;left: -225px;background: #fff;width: 70px;height: 70px;}
  180. .logo img{border-radius: 50%;}
  181. .open .logo img{width: 50px;height: 50px;position: absolute;top: 0px;bottom: 0;left: 0;right: 0;margin: auto;}
  182. .nots{width: 100%;height: 60px;width: 230px;opacity: 0;visibility: hidden;text-align: center;padding: 15px;}
  183. .open .nots{opacity: 1;visibility: visible;}
  184. .text{opacity: 0;}
  185. time{font-size: 14px;padding-left: 25px;color: #7E7E7E;}
  186. .postdate{ margin-right: 4px;}
  187. .fa-calendar{margin-right: 4px;}
  188. .fa-heart{margin-left: 4px;margin-right: 4px;}
  189. .actions{width: 100%;position: relative;}
  190. .actions a{color: #919191;}
  191. .actions a:hover{color: #444;}
  192. .actiond{width: 50px;height: 50px;opacity: 0;border-radius: 50%;background: #fff;line-height: 50px;text-align: center;position: absolute;z-index: 9;}
  193. .permalink_btn{top: 1px;left: 50px;}
  194. .reblog_btn{top: 0;left: 100px;}
  195. .like_btn{top: 0;left: 150px;}
  196. .like_button {position: absolute;top: 3px;opacity: 0;left: 16px;z-index: 999999;cursor: pointer;}
  197. .like_btn .like_button.liked {opacity: 0;}
  198. .like_btn .like_button.liked + i {color: #b04b40;}
  199. .share_btn{top: 0;left: 0px;}
  200. .shortUrl{
  201. width: 210px;
  202. height: 50px;
  203. background: #fff;
  204. font-size: 12px;
  205. opacity: 0;
  206. color: #7E7E7E
  207. }
  208. .share-icon{
  209. margin: 0 auto;
  210. text-align: center;
  211. position: absolute;
  212. top: 120px;
  213. }
  214. .s_icon{
  215. width: 50px;
  216. height: 50px;
  217. border-radius: 50%;
  218. background: #fff;
  219. line-height:50px;
  220. position: absolute;
  221. opacity: 0;
  222. top: -15px;
  223. }
  224. .share-icon .facebook{
  225. left: 0;
  226. color: #3a5795;
  227. }
  228. .share-icon .twitter{
  229. left: 50px;
  230. color: #55acee;
  231. }
  232. .share-icon .google{
  233. left: 100px;
  234. color: #DD4B39;
  235. }
  236. .share-icon .pinterest{
  237. left: 150px;
  238. color: #CA1F27;
  239. }
  240. .i_Frame{
  241. position: relative;
  242. background: #fff;
  243. }
  244. .responsive-video-wrapper{
  245. width:100%;position:relative;padding:0;
  246. -webkit-transition: all 1.9s ease;
  247. -ms-transition: all 1.9s ease;
  248. -o-transition: all 1.9s ease;
  249. transition: all 1.9s ease;
  250. }
  251. .responsive-video-wrapper iframe,.responsive-video-wrapper object,.responsive-video-wrapper embed{
  252. position:absolute;top:0;left:0;width:100%;height:100%;opacity: 0;
  253. }
  254.  
  255. /* Pages */
  256. .pagination {
  257. display: block;
  258. margin: 40px 0px;
  259. -webkit-border-radius: 0;
  260. border-radius: 0;
  261. text-align: center;
  262. padding: 0px;
  263. -webkit-filter: url("#goo");
  264. filter: url("#goo");
  265. }
  266. .pagination ul {
  267. -webkit-box-shadow: none;
  268. -moz-box-shadow: none;
  269. box-shadow: none;
  270. list-style: none;
  271. padding: 0;
  272. margin: 0;
  273. }
  274. .pagination ul > li {
  275. display: inline-block;
  276. margin-bottom: 10px;
  277. margin-top: 10px;
  278. margin-right: 15px;
  279. }
  280. .pagination ul > li > a, .pagination ul > li > span {
  281. float: none;
  282. margin: 0;
  283. }
  284. .btn {
  285. color: #000 !important;
  286. background: #fff;
  287. border: 2px solid rgba(255,255,255,0.4);
  288. margin-bottom: 10px;
  289. margin-right: 4px;
  290. font-size: 12px;
  291. padding: 9px 17px;
  292. font-weight: 800;
  293. text-shadow: none;
  294. text-transform: uppercase;
  295. -webkit-border-radius: 0;
  296. border-radius: 0;
  297. -webkit-transition: all 200ms ease-in;
  298. -o-transition: all 200ms ease-in;
  299. -moz-transition: all 200ms ease-in;
  300. -webkit-box-shadow: none;
  301. -moz-box-shadow: none;
  302. box-shadow: none;
  303. display: inline-block;
  304. }
  305. .btn:hover , .current_page{
  306. color: {AccentColor} !important;
  307. }
  308. {block:IfInfiniteScrolling}
  309. .pagination{
  310. opacity: 0;
  311. visibility: hidden;
  312. }
  313. #footer{
  314. display: none !important;
  315. }
  316. {/block:IfInfiniteScrolling}
  317. .menu-icon {
  318. padding: 1.6rem;
  319. display: block;
  320. position: absolute;
  321. cursor: pointer;
  322. margin-top: 5px;
  323. z-index: 9;
  324. opacity: 1;
  325. }
  326. .menu-icon.toggle:before, .menu-icon.toggle:after {
  327. opacity: 0;
  328. }
  329. .menu-icon.toggle .line {
  330. -webkit-transform: rotate(45deg);
  331. -moz-transform: rotate(45deg);
  332. -ms-transform: rotate(45deg);
  333. -o-transform: rotate(45deg);
  334. transform: rotate(45deg);
  335. display: block;
  336. }
  337. .menu-icon.toggle .line:before {
  338. -webkit-transform: rotate(-90deg);
  339. -moz-transform: rotate(-90deg);
  340. -ms-transform: rotate(-90deg);
  341. -o-transform: rotate(-90deg);
  342. transform: rotate(-90deg);
  343. display: block;
  344. }
  345. .menu-icon .line {
  346. width: 1.5rem;
  347. height: 2px;
  348. display: block;
  349. background: #919191;
  350. -webkit-transition: all 0.3s ease;
  351. -moz-transition: all 0.3s ease;
  352. transition: all 0.3s ease;
  353. }
  354. .menu-icon .line:before {
  355. content: "";
  356. width: 1.5rem;
  357. height: 2px;
  358. background: #919191;
  359. display: block;
  360. -webkit-transition: all 0.3s ease;
  361. -moz-transition: all 0.3s ease;
  362. transition: all 0.3s ease;
  363. }
  364. .menu-icon:before, .menu-icon:after {
  365. content: "";
  366. width: 1.5rem;
  367. height: 2px;
  368. background: #919191;
  369. display: block;
  370. margin-bottom: 0.3rem;
  371. -webkit-transition: all 0.3s ease;
  372. -moz-transition: all 0.3s ease;
  373. transition: all 0.3s ease;
  374. }
  375. .menu-icon:after {margin-top: 0.3rem;}
  376. .menu-icon:hover .line , .menu-icon:hover:after , .menu-icon:hover:before , .menu-icon:hover .line:before{
  377. background: #000;
  378. }
  379. /* Infinity Spinner */
  380.  
  381. .spinner{
  382. width: 70px;
  383. height: 18px;
  384. position: absolute;
  385. top: 0;
  386. bottom: 0;
  387. right: 0;
  388. left: 0;
  389. margin: auto;
  390. text-align: center;
  391. }
  392. .spinnertags{
  393. text-align: center;
  394. margin: 15px auto;
  395. }
  396. .spinner > div , .spinnertags > div{
  397. width: 18px;
  398. height: 18px;
  399. background-color: #fff;
  400. border-radius: 100%;
  401. display: inline-block;
  402. -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  403. animation: bouncedelay 1.4s infinite ease-in-out;
  404. /* Prevent first frame from flickering when animation starts */
  405. -webkit-animation-fill-mode: both;
  406. animation-fill-mode: both;
  407. }
  408. .spinnertags > div{
  409. background-color: rgba(229, 170, 18, 0.5);
  410. }
  411. .spinner .bounce1 , .spinnertags .bounce1{
  412. -webkit-animation-delay: -0.32s;
  413. animation-delay: -0.32s;
  414. }
  415.  
  416. .spinner .bounce2 , .spinnertags .bounce2{
  417. -webkit-animation-delay: -0.16s;
  418. animation-delay: -0.16s;
  419. }
  420.  
  421. @-webkit-keyframes bouncedelay {
  422. 0%, 80%, 100% { -webkit-transform: scale(0.0) }
  423. 40% { -webkit-transform: scale(1.0) }
  424. }
  425.  
  426. @keyframes bouncedelay {
  427. 0%, 80%, 100% {
  428. transform: scale(0.0);
  429. -webkit-transform: scale(0.0);
  430. } 40% {
  431. transform: scale(1.0);
  432. -webkit-transform: scale(1.0);
  433. }
  434. }
  435. /* Typography */
  436.  
  437. .caption{
  438. padding: 15px 10px 10px;
  439. }
  440. .caption a , .decsol a , .note a {
  441. background-color: rgba(68,68,68,0);
  442. background-image: -webkit-linear-gradient(top,rgba(68,68,68,0)50%,rgba(68,68,68,.25)50%);
  443. background-image: linear-gradient(to bottom,rgba(68,68,68,0)50%,rgba(68,68,68,.25)50%);
  444. color: #919191;
  445. text-decoration: none;
  446. background-repeat: repeat-x;
  447. background-size: 1em 2px;
  448. background-position: 0 1.15em;
  449. padding-bottom: .15em;
  450. margin-right: 3px;
  451. }
  452. .caption a:hover , .note a:hover , .decsol a:hover{
  453. background: #fff;
  454. color: #444;
  455. }
  456. p{
  457. margin: 15px 0;
  458. padding: 0;
  459. }
  460. p.description{
  461. margin: 15px 0;
  462. }
  463. .caption p:last-child , .caption blockquote:last-child{
  464. margin-bottom: 0;
  465. }
  466. .caption p:first-child{
  467. margin-top: 0;
  468. }
  469. b{
  470. font-weight: 700;
  471. line-height: 1.3;
  472. }
  473. blockquote {
  474. border-left: 2px solid #e6e6e6;
  475. padding: 0 0 0 18px;
  476. margin: 15px 0px;
  477. font-size: 15px;
  478. }
  479.  
  480. .caption > blockquote{
  481. margin: 15px 0px;
  482. }
  483. /* Link Posts */
  484.  
  485. .link_container{
  486. color: #FFF;
  487. min-height: 130px;
  488. border: 1px solid {color:Link Header};
  489. background-color: {color:Link Header};
  490. opacity: 1;
  491. transition: opacity 0.25s linear 0s;
  492. }
  493. .source_q{
  494. padding: 10px 10px 10px 0px;
  495. }
  496.  
  497. .link_thumbnail_container{
  498. position: relative;
  499. float: right;
  500. width: 130px;
  501. height: 130px;
  502. margin: -1px;
  503. pointer-events: none;
  504. }
  505. .link_button .link_thumbnail_container::before {
  506. content: "";
  507. position: absolute;
  508. top: 0px;
  509. right: 0px;
  510. bottom: 0px;
  511. left: 0px;
  512. background-color: #FFF;
  513. border: 1px solid {color:Link Header};
  514. }
  515. .link_thumbnail_click{
  516. display: block;
  517. overflow: hidden;
  518. max-height: 100%;
  519. max-width: 100%;
  520. }
  521. .link_thumbnail{
  522. display: block;
  523. width: 100%;
  524. height: 100%;
  525. }
  526. .link_button .link_thumbnail_container img {
  527. display: block;
  528. position: relative;
  529. }
  530. .link_text_container{
  531. height: 100%;
  532. padding: 10px 20px;
  533. overflow: hidden;
  534. }
  535. .link_text_outer{
  536. display: table;
  537. width: 100%;
  538. min-height: 100%;
  539. height: 108px;
  540. }
  541. .link_text{
  542. display: table-cell;
  543. width: 100%;
  544. vertical-align: middle;
  545. text-align: center;
  546. }
  547. .link_title{
  548. color: rgba(255, 255, 255, 0.95);
  549. text-decoration: none;
  550. font-weight: 700;
  551. display: block;
  552. font-size: 19px;
  553. line-height: 24px;
  554. margin-bottom: 8px;
  555. margin-left: auto;
  556. margin-right: auto;
  557. max-width: 460px;
  558. overflow: visible;
  559. text-decoration: none;
  560. text-overflow: ellipsis;
  561. letter-spacing: 0.5;
  562. }
  563. .link_footer{
  564.  
  565. }
  566. .link_source {
  567. display: block;
  568. text-decoration: none;
  569. font-size: 12px;
  570. color: rgba(255, 255, 255, 0.7);
  571. overflow: hidden;
  572. margin-left: auto;
  573. margin-right: auto;
  574. max-width: 460px;
  575. overflow: visible;
  576. text-decoration: none;
  577. text-overflow: ellipsis;
  578. font-weight: 400;
  579. text-transform: uppercase;
  580. }
  581. .fa-chevron-right{
  582. font-weight: normal;
  583. margin-left: 10px;
  584. font-size: 14px;
  585. }
  586.  
  587. /* Text Posts */
  588.  
  589. .text_container{
  590. border: 1px solid #fff;
  591. border-radius: 3px;
  592. color: #FFF;
  593. min-height: 130px;
  594. border: 1px solid #fff;
  595. transition: opacity 0.25s linear 0s;
  596. margin-bottom: 10px;
  597. background-color: {color:Text Header};
  598. }
  599. .text_title{
  600. color: #FFF;
  601. margin-left: auto;
  602. display: block;
  603. font-size: 19px;
  604. line-height: 24px;
  605. margin-bottom: 8px;
  606. margin-right: auto;
  607. max-width: 460px;
  608. overflow: visible;
  609. text-decoration: none;
  610. text-overflow: ellipsis;
  611. letter-spacing: 0.5px;
  612. position: relative;
  613. }
  614.  
  615. /* quote posts */
  616.  
  617.  
  618. .fa-quote-left{
  619. font-size: 50px;
  620. margin-right: 10px;
  621. opacity: 0.3;
  622. color: {color:Gradient top};
  623. }
  624. .quote_title{
  625. font-size: 28px;
  626. text-align: left;
  627. color: #666;
  628. text-decoration: none;
  629. display: block;
  630. line-height: 1.5;
  631. margin-bottom: 8px;
  632. margin-left: auto;
  633. margin-right: auto;
  634. max-width: 460px;
  635. overflow: visible;
  636. text-decoration: none;
  637. text-overflow: ellipsis;
  638. }
  639. .quote_title p{
  640. line-height: 1.6;
  641. }
  642.  
  643.  
  644.  
  645. /* SideBar */
  646. .blog-avatar img{
  647. margin-bottom: 20px;
  648.  
  649. }
  650. @media (min-width: 1150px) {
  651. .LeftSideBar{
  652. position: absolute;
  653. left: -300px;
  654. width: 310px;
  655. }
  656. }
  657. @media (min-width: 1200px) {
  658. .LeftSideBar{
  659. position: absolute;
  660. top: 120px;
  661. left: -330px;
  662. width: 310px;
  663. }
  664. .blog-avatar{
  665. width: 106px;
  666. height: 106px;
  667. position: absolute;
  668. border: 10px solid rgba(255,255,255,0.3);
  669. top: -130px;
  670. right: 0;
  671. left: 0px;
  672. margin: auto;
  673. }
  674. }
  675.  
  676. .LeftSideBar{
  677. margin-bottom: 50px;
  678. }
  679.  
  680. .sideBarSection{
  681. -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  682. -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  683. box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  684. overflow: hidden;
  685. position: relative;
  686. background: #fff;
  687. }
  688. .LeftSideBar section{
  689. margin-top: 30px;
  690. }
  691.  
  692. .col-header{
  693. background: #fff;
  694. color: #919191;
  695. position: relative;
  696. margin-bottom: 30px;
  697. -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  698. -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  699. box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  700. padding: 30px 25px 15px;
  701. font-size: 15px;
  702. }
  703. .blogTitle{
  704. color: {color:Title Color};
  705. }
  706. .blogTitle h1{
  707. font-size: 22px;
  708. font-weight: bold;
  709. margin: 5px 0 15px 0;
  710. line-height: 1.5;
  711. }
  712.  
  713. /* TWITTER */
  714. .col-twitter , .col-instagram , .col-dribbble , .col-heart ,
  715. .col-follow{
  716. background: #fff;
  717. position: relative;
  718. padding: 20px;
  719. display: none;
  720. }
  721. .col-dribbble{
  722. padding-top: 10px;
  723. }
  724.  
  725. #tweets{
  726. position: relative;
  727. list-style: none;
  728. overflow: hidden;
  729. width: 100%;
  730. padding: 0;
  731. margin: 0;
  732. }
  733. #tweets li{
  734. -webkit-backface-visibility: hidden;
  735. position: absolute;
  736. display: none;
  737. width: 100%;
  738. left: 0;
  739. top: 0;
  740. }
  741. #tweets li a{
  742. color: #919191;
  743. font-size: 15px;
  744. line-height: 1.5;
  745. }
  746. .content .fa-twitter{
  747. color: #4AA8D8;
  748. opacity: 0.7;
  749. }
  750. #tweets li:first-child{
  751. position: relative;
  752. display: block;
  753. float: left;
  754. }
  755.  
  756. .T-header{
  757. width: 100%;
  758. background: #fff;
  759. padding: 20px;
  760. font-size: 16px;
  761. font-weight: bold;
  762. border-bottom: 1px solid;
  763. border-color: #EDEDED;
  764. overflow: hidden;
  765. }
  766. .T-header a{
  767. color: #919191;
  768. }
  769. .sideBarSection .menu-icon{
  770. position: absolute;
  771. top: 3px;
  772. right: 0px;
  773. }
  774. .T-header .fa-twitter , .T-header .fa-instagram ,
  775. .T-header .fa-dribbble , .T-header .fa-heart ,
  776. .T-header .fa-user , .T-header .fa-tags{
  777. position: absolute;
  778. font-size: 50px;
  779. opacity: 0.2;
  780. top: 5px;
  781. left: -10px;
  782. color: #DFDFDF;
  783. }
  784. .T-header .fa-twitter{
  785. color: rgba(75,211,235,0.7);
  786. }
  787. .T-header .fa-dribbble{
  788. color: #EA4C89;
  789. }
  790. .T-header .fa-instagram {
  791. color: rgba(214, 201, 184, 1);
  792. }
  793. .T-header .fa-tags{
  794. color: rgba(229, 170, 18, 0.7);
  795. left: -20px;
  796. }
  797. .T-header .fa-user{
  798. color: rgba(240, 206, 206, 1);
  799. }
  800. .T-header .fa-heart{
  801. color: #FF689C;
  802. left: -20px;
  803. }
  804. .lgtagcloud{
  805. margin-left: 25px;
  806. color: rgba(229, 170, 18, 0.5);
  807. }
  808. .lgainstagram{
  809. margin-left: 25px;
  810. color: rgba(214, 201, 184, 1);
  811. }
  812. .lgatwitter{
  813. margin-left: 25px;
  814. color: rgba(28, 172, 190, 0.7);
  815. }
  816. .lgadribbble{
  817. margin-left: 25px;
  818. color: rgba(234,76,137,0.7);
  819. }
  820. .lgafollow{
  821. margin-left: 25px;
  822. color: rgba(240, 206, 206, 1);
  823. }
  824.  
  825.  
  826. /* tags Cloud */
  827.  
  828. .col-tagCloud{
  829. text-align: center;
  830. display: none;
  831. }
  832.  
  833. #tagcloud a{
  834. display: inline-block !important;
  835. display: none;
  836. margin: 5px;
  837. }
  838.  
  839. /* Instagram */
  840. .insta_wrap{
  841. position: absolute;
  842. width: 100%;
  843. height: 45px;
  844. bottom: 0;
  845. background: transparent;
  846. line-height: 45px;
  847. text-align: center;
  848. font-size: 11px;
  849. color: #CBCBC4;
  850. }
  851. .insta_wrap i{
  852. margin-right: 3px;
  853. }
  854. .insta_like{
  855. margin-right: 30px;
  856. }
  857. .slider_wrap{
  858. margin: 4px auto;
  859. }
  860. .rslides {
  861. position: relative;
  862. list-style: none;
  863. overflow: hidden;
  864. width: 100%;
  865. padding: 0;
  866. margin: 0;
  867. background: transparent;
  868. }
  869. .rslides li {
  870. -webkit-backface-visibility: hidden;
  871. position: absolute;
  872. display: none;
  873. padding-bottom: 45px;
  874. width: 100%;
  875. left: 0;
  876. top: 0;
  877. border: 1px solid #eee;
  878. border-radius: 3px;
  879. }
  880. .rslides li:first-child {
  881. position: relative;
  882. display: block;
  883. float: left;
  884. }
  885. .rslides img {
  886. display: block;
  887. height: auto;
  888. float: left;
  889. width: 100%;
  890. border: 0;
  891. }
  892.  
  893. .col-instagram .next , .col-dribbble .next{
  894. position: absolute;
  895. top: 40%;
  896. right: 30px;
  897. z-index: 999;
  898. width: 30px;
  899. opacity: 0;
  900. height: 30px;
  901. text-indent: 200px;
  902. cursor: pointer;
  903. background: url(http://static.tumblr.com/zdvilra/wFlnm4elo/slider_nav.png) no-repeat right center;
  904. -webkit-filter: invert(100%);
  905. -webkit-transform: translateY(-50%);
  906. -ms-transform: translateY(-50%);
  907. transform: translateY(-50%);
  908. -webkit-transition: opacity 0.5s; /* Safari */
  909. -ms-transition: opacity 0.5s; /* Safari */
  910. transition: opacity 0.5s;
  911. }
  912.  
  913. .col-instagram .prev , .col-dribbble .prev{
  914. position: absolute;
  915. top: 40%;
  916. z-index: 999;
  917. opacity: 0;
  918. width: 30px;
  919. text-indent: 200000px;
  920. height: 30px;
  921. cursor: pointer;
  922. left: 30px;
  923. background: url(http://static.tumblr.com/zdvilra/wFlnm4elo/slider_nav.png) no-repeat right center;
  924. -webkit-filter: invert(100%);
  925. background-position: left center;
  926. -webkit-transform: translateY(-50%);
  927. -ms-transform: translateY(-50%);
  928. transform: translateY(-50%);
  929. -webkit-transition: opacity 0.5s; /* Safari */
  930. -ms-transition: opacity 0.5s; /* Safari */
  931. transition: opacity 0.5s;
  932. }
  933. .col-dribbble .next , .col-dribbble .prev{
  934. top: 50%;
  935. }
  936. .col-instagram:hover .next, .col-dribbble:hover .next,
  937. .col-instagram:hover .prev, .col-dribbble:hover .prev{
  938. opacity: 1;
  939. }
  940. /* dribbble */
  941. #dribbbles ul{
  942. position: relative;
  943. list-style: none;
  944. overflow: hidden;
  945. width: 100%;
  946. padding: 0;
  947. margin: 0;
  948. }
  949. #dribbbles ul li{
  950. -webkit-backface-visibility: hidden;
  951. position: absolute;
  952. display: none;
  953. width: 100%;
  954. left: 0;
  955. top: 0;
  956. }
  957.  
  958. #dribbbles ul li:first-child {
  959. position: relative;
  960. display: block;
  961. float: left;
  962. }
  963. #dribbbles img {
  964. display: block;
  965. height: auto;
  966. float: left;
  967. width: 100%;
  968. border: 0;
  969. border: 1px solid #eee;
  970. border-bottom: none;
  971. }
  972. #dribbbles h4{
  973. color: #919191;
  974. font-size: 15px;
  975. line-height: 1.5;
  976. }
  977. #dribbbles:hover h4{
  978. color: #000;
  979. }
  980. .playerwarp{
  981. font-size: 12px;
  982. color: #919191;
  983. line-height: 5;
  984. text-align: center;
  985. border: 1px solid #eee;
  986. border-radius: 3px;
  987. }
  988. .playerwarp > div {
  989. padding: 0;
  990. display: inline-block;
  991. margin-left: 20px;
  992. }
  993. .playerwarp > div:first-child{
  994. margin-left: 0px;
  995. }
  996. .playerwarp i{
  997. margin-right: 5px;
  998. }
  999.  
  1000. /* People I follow */
  1001.  
  1002. .col-follow ul{
  1003. padding: 0;
  1004. margin: 0;
  1005. list-style: none;
  1006. text-align: center;
  1007. overflow: hidden;
  1008. }
  1009.  
  1010. .col-follow ul li{
  1011. display: inline-block;
  1012. margin: 3px;
  1013. }
  1014.  
  1015. /* Answer */
  1016. .answer-post-wrap{
  1017. width: 100%;
  1018. padding:20px;
  1019. }
  1020. .asker-wrap , .answer-wrap{
  1021. text-align: center;
  1022. }
  1023. .asker-wrap .decsol ,.answer-wrap .decsol{
  1024. min-height: 80px;
  1025. padding-top: 20px;
  1026. padding-bottom: 5px;
  1027. }
  1028. .fl-right{
  1029. float: right;
  1030. margin: 15px;
  1031. border-radius: 10%;
  1032. }
  1033. .decsol{
  1034. padding: 0px 20px;
  1035. text-align: left;
  1036. line-height: 1.4;
  1037. }
  1038. .decsol img{
  1039. margin: 10px 0px;
  1040. }
  1041. .border_middle_post{
  1042. border-bottom: 1px solid transparent;
  1043. -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  1044. box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  1045. border-color: #EDECEC;
  1046. margin: 10px auto;
  1047. }
  1048. .border_middle_tags{
  1049. border-bottom: 1px solid transparent;
  1050. -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  1051. box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  1052. border-color: #EDECEC;
  1053. width: 50%;
  1054. margin: 0 auto;
  1055. }
  1056.  
  1057. .replies p{
  1058. margin: 30px 20px 5px;
  1059. }
  1060.  
  1061. iframe#tumblr_controls {
  1062. position: fixed!important;
  1063. -webkit-filter: invert(100%);
  1064. }
  1065.  
  1066. /* Chat Posts */
  1067.  
  1068. .chattitle{
  1069. width: 100%;
  1070. padding: 10px 10px 25px;
  1071. font-size: 18px;
  1072. text-align: center;
  1073. color: #9E6A8C;
  1074. line-height: 1.5;
  1075. }
  1076. .chatwrap{
  1077. padding: 20px 25px 0px;
  1078. }
  1079. .chatwrap .line{
  1080. line-height: 1.8;
  1081. }
  1082. div[class^='user']{
  1083. border-bottom: 1px solid transparent;
  1084. -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  1085. box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  1086. border-color: #D5D0D0;
  1087. padding-bottom: 10px;
  1088. padding-top: 12px;
  1089. }
  1090. div[class^='user']:first-child{
  1091. box-shadow: none;
  1092. -webkit-box-shadow:none;
  1093. }
  1094. .labe_l{
  1095. color: #56bc8a;
  1096. }
  1097. div[class^='user']:last-child{
  1098. border-bottom: none;
  1099. }
  1100. .user_1 .labe_l{
  1101. color: #56bc8a !important;
  1102. }
  1103. .user_2 .labe_l{
  1104. color: #A9BCF5 !important;
  1105. }
  1106. .user_3 .labe_l{
  1107. color: #FA9038 !important;
  1108. }
  1109. .user_4 .labe_l{
  1110. color: #D5599C !important
  1111. }
  1112. .user_5 .labe_l{
  1113. color: #D95E40 !important
  1114. }
  1115. .user_6 .labe_l{
  1116. color: #BC56BB !important
  1117. }
  1118. .user_7 .labe_l{
  1119. color: #33BB05 !important
  1120. }
  1121. .user_8 .labe_l{
  1122. color: #70C2E9 !important
  1123. }
  1124. .user_9 .labe_l{
  1125. color: #F04565 !important
  1126. }
  1127. .user_10 .labe_l{
  1128. color: #E299C2 !important
  1129. }
  1130. .user_11 .labe_l{
  1131. color: #6CBC56 !important
  1132. }
  1133. .user_12 .labe_l{
  1134. color: #A9BCF5 !important;
  1135. }
  1136. .user_13 .labe_l{
  1137. color: #FA9D38 !important
  1138. }
  1139. .user_14 .labe_l{
  1140. color: #FF3BA4 !important
  1141. }
  1142. .user_15 .labe_l{
  1143. color: #A58F74 !important
  1144. }
  1145.  
  1146. .border_wrap{
  1147. width: 100%;
  1148. height: 1px;
  1149. margin-bottom: 1px;
  1150. position: absolute;
  1151. top: -1px;
  1152. left: 0;
  1153. background: #83E1F2;
  1154. -webkit-transform: translate3d(-100%, 0, 0);
  1155. transform: translate3d(-100%, 0, 0);
  1156. }
  1157. .col-instagram .border_wrap{
  1158. background: rgba(214, 201, 184, 1);
  1159. }
  1160. .col-dribbble .border_wrap , .col-heart .border_wrap{
  1161. background: rgba(234,76,137,0.7);
  1162. }
  1163. .move{
  1164. -webkit-animation: anim 8s ;
  1165. animation: anim 8s ;
  1166. }
  1167.  
  1168. @-webkit-keyframes anim {
  1169. 0% {
  1170. -webkit-transform: translate3d(-100%, 0, 0);
  1171. transform: translate3d(-100%, 0, 0);
  1172. }
  1173. 100% {
  1174. -webkit-transform: translate3d(0, 0, 0);
  1175. transform: translate3d(0, 0, 0);
  1176. }
  1177. }
  1178. @keyframes anim {
  1179. 0% {
  1180. -webkit-transform: translate3d(-100%, 0, 0);
  1181. transform: translate3d(-100%, 0, 0);
  1182. }
  1183. 100% {
  1184. -webkit-transform: translate3d(0, 0, 0);
  1185. transform: translate3d(0, 0, 0);
  1186. }
  1187. }
  1188.  
  1189. figure{
  1190. text-align: center;
  1191. margin: 0;
  1192. }
  1193.  
  1194. small{
  1195. margin: 15px 0;
  1196. }
  1197.  
  1198. .caption figure {
  1199. text-align: left;
  1200. }
  1201. .caption img{
  1202. margin: 5px 0;
  1203. display: block;
  1204. }
  1205.  
  1206.  
  1207. /* Camera Information */
  1208.  
  1209. .img-info-container{
  1210. position: absolute;
  1211. font-size: 14px;
  1212. padding: 35px 30px 30px;
  1213. border-radius: 3px;
  1214. line-height: 2 ;
  1215. text-align: center;
  1216. background: #fff;
  1217. left: 0px;
  1218. top: 0px;
  1219. min-width: 260px;
  1220. height: auto;
  1221. display: none;
  1222. border-bottom: 0 none;
  1223. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
  1224. }
  1225. .img-info-container span{
  1226. font-weight: bold;
  1227. }
  1228. .Exif_logo , .img-info-container .fa-info{
  1229. cursor: pointer;
  1230. border-radius: 3px;
  1231. position: absolute;
  1232. width: 40px;
  1233. height: 40px;
  1234. line-height: 40px ;
  1235. text-align: center;
  1236. background: #fff;
  1237. left: 20px;
  1238. top: 20px;
  1239. }
  1240. .img-info-container .fa-info{
  1241. left: 0;
  1242. top: 0;
  1243. }
  1244.  
  1245. .zoom{
  1246. cursor: pointer;
  1247. position: absolute;
  1248. width: 40px;
  1249. height: 40px;
  1250. line-height: 40px ;
  1251. border-radius: 3px;
  1252. text-align: center;
  1253. background: #fff;
  1254. right: 20px;
  1255. top: 20px;
  1256. opacity: 0;
  1257. color: #919191;
  1258. border-bottom: 0 none;
  1259. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
  1260. -webkit-transition: all 0.3s ease;
  1261. -ms-transition: all 0.3s ease;
  1262. -o-transition: all 0.3s ease;
  1263. transition: all 0.3s ease;
  1264. }
  1265. figure:hover .zoom{
  1266. opacity: 1;
  1267. }
  1268.  
  1269.  
  1270. .fixme{
  1271. position: absolute;
  1272. cursor: pointer;
  1273. width: 30px;
  1274. height: 30px;
  1275. background: #fff;
  1276. color: #bbb;
  1277. line-height: 30px;
  1278. text-align: center;
  1279. right: -40px;
  1280. bottom: 0;
  1281. -webkit-filter: url("#goo");
  1282. filter: url("#goo");
  1283. }
  1284. .fixme:before{
  1285. position: absolute;
  1286. content: 'Pin it';
  1287. padding: 0 1em;
  1288. margin: 0 .7em 0 0;
  1289. height: 2.0em;
  1290. color: #fff;
  1291. cursor: pointer;
  1292. display: block;
  1293. top: 0;
  1294. left: 10px;
  1295. width: 70px;
  1296. background: #fff;
  1297. color: #777;
  1298. opacity: 0;
  1299. -webkit-transition: opacity 250ms ease-out,
  1300. -webkit-transform 350ms ease-out;
  1301. transition: opacity 250ms ease-out,transform 350ms ease-out;
  1302. }
  1303. .fixme:hover::before{
  1304. opacity: 1;
  1305.  
  1306. -webkit-transform: translateX(0px);
  1307. transform: translateX(0px);
  1308. }
  1309. .Draggable-note{
  1310. position: absolute;
  1311. padding: 20px;
  1312. background: #038974;
  1313. color: #fff;
  1314. top: 0px;
  1315. left: 0;
  1316. width: 100%;
  1317. text-align: center;
  1318. opacity: 0;
  1319. }
  1320. .Draggable-note:after {
  1321. content: '';
  1322. display: block;
  1323. position: absolute;
  1324. left: 5px;
  1325. right: 0;
  1326. top: 60px;
  1327. height: 0;
  1328. width: 0;
  1329. border-left: 10px solid transparent;
  1330. border-right: 10px solid transparent;
  1331. border-top: 10px solid #038974;
  1332. }
  1333.  
  1334. .fixme .fa{
  1335. -ms-transform: rotate(-45deg); /* IE 9 */
  1336. -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
  1337. transform: rotate(-45deg);
  1338. }
  1339.  
  1340. .behere{
  1341. position: fixed;
  1342. width: 250px;
  1343. right: 50px;
  1344. bottom: 50px;
  1345. background: rgba(255,255,255,0.1);
  1346. border-radius: 5px;
  1347. }
  1348.  
  1349. .closePanel , .DragPanel{
  1350. position: absolute;
  1351. top: 0px;
  1352. right: 0;
  1353. margin: -10px;
  1354. border-radius: 50%;
  1355. width: 20px;
  1356. height: 20px;
  1357. line-height: 20px;
  1358. text-align: center;
  1359. color: #fff;
  1360. background: #038974;
  1361. font-size: 12px;
  1362. cursor: pointer;
  1363. }
  1364. .DragPanel{
  1365. right: 25px;
  1366. cursor: move;
  1367. }
  1368.  
  1369.  
  1370. .pinitback{
  1371. border: 2px #ddd dashed;
  1372. cursor: pointer;
  1373. }
  1374. .bringItBack{
  1375. position: absolute;
  1376. top: 0;
  1377. left: 0;
  1378. right: 0;
  1379. bottom: 0;
  1380. margin: auto;
  1381. width: 100%;
  1382. height: 150px;
  1383. line-height: 150px;
  1384. text-align: center;
  1385. color: #bbb;
  1386. }
  1387.  
  1388. .bringItBack .fa{
  1389. font-size: 18px;
  1390. margin-right: 10px;
  1391. -ms-transform: rotate(-45deg); /* IE 9 */
  1392. -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
  1393. transform: rotate(-45deg);
  1394. }
  1395.  
  1396.  
  1397. .page{
  1398. margin: 0;
  1399. padding: 0;
  1400. text-align: center;
  1401. list-style: none;
  1402. }
  1403. .page li{
  1404. display: block;
  1405. width: 100%;
  1406. padding: 7px 15px;
  1407. line-height: 1.5;
  1408. margin-top: 15px;
  1409. border-radius: 3px;
  1410. background: {color:Menu Icons};
  1411. color: #fff;
  1412. }
  1413. .page a{
  1414. color: #fff;
  1415. }
  1416. .pages{
  1417. width: 100%;
  1418. text-align: center;
  1419. }
  1420.  
  1421. .pages ul{
  1422. margin: 0;
  1423. padding: 0;
  1424. list-style: none;
  1425. }
  1426. .pages ul li{
  1427. display: inline-block;
  1428. width: 30px;
  1429. height: 30px;
  1430. line-height: 25px;
  1431. background: #fff;
  1432. margin: 7px;
  1433. border: 2px solid {color:Menu Icons};
  1434. color: {color:Menu Icons};
  1435. }
  1436.  
  1437. .pages ul a{
  1438. color: #919191;
  1439. }
  1440. .pages ul li:hover{
  1441. color: #fff ;
  1442. background: {color:Menu Icons};
  1443. }
  1444.  
  1445. .tags{
  1446. line-height: 45px;
  1447. padding-top: 15px;
  1448. }
  1449. .hasCaption .tags{
  1450. padding-top: 15px;
  1451. }
  1452. .tags a{
  1453. padding: 7px 10px;
  1454. opacity: 0.5;
  1455. -webkit-transition: all 0.3s ease;
  1456. -ms-transition: all 0.3s ease;
  1457. -o-transition: all 0.3s ease;
  1458. transition: all 0.3s ease;
  1459. border: 1px solid {color:Tags Color};
  1460. color: {color:Tags Color};
  1461. margin-right: 10px;
  1462. }
  1463. .tags a:hover{
  1464. opacity: 1;
  1465. background: {color:Tags Color};
  1466. color: #fff;
  1467. }
  1468.  
  1469. /* post-info-perma */
  1470. ol.notes{
  1471. list-style: none;
  1472. padding: 25px 10px;
  1473. font-size: 14px;
  1474. }
  1475. .note{
  1476. margin-bottom: 7px;
  1477. }
  1478. .action{
  1479. margin-left: 10px;
  1480. line-height: 1.8;
  1481. }
  1482. .disqus{
  1483. background: #fff;
  1484. padding: 20px 40px;
  1485. position: relative;
  1486. }
  1487. /* Search */
  1488. .col-search{
  1489. padding: 15px;
  1490. }
  1491. .input {
  1492. position: relative;
  1493. z-index: 1;
  1494. display: inline-block;
  1495. vertical-align: top;
  1496. line-height: 12px;
  1497. width: 100%;
  1498. }
  1499. .input__field {
  1500. position: relative;
  1501. display: block;
  1502. float: right;
  1503. padding: 0.8em;
  1504. width: 60%;
  1505. border: none;
  1506. border-radius: 0;
  1507. background: #f0f0f0;
  1508. color: #aaa;
  1509. letter-spacing: 0.5px;
  1510. font-weight: bold;
  1511. -webkit-appearance: none;
  1512. }
  1513. .input__field:focus {
  1514. outline: none;
  1515. }
  1516. .input__label {
  1517. display: inline-block;
  1518. float: right;
  1519. width: 40%;
  1520. color: #6a7989;
  1521. font-weight: bold;
  1522. font-size: 70.25%;
  1523. -webkit-touch-callout: none;
  1524. -webkit-user-select: none;
  1525. -khtml-user-select: none;
  1526. -moz-user-select: none;
  1527. -ms-user-select: none;
  1528. user-select: none;
  1529. }
  1530. .input__label-content {
  1531. position: relative;
  1532. display: block;
  1533. padding: 1.6em 0;
  1534. width: 100%;
  1535. }
  1536. .input__field--yoko {
  1537. z-index: 10;
  1538. width: 100%;
  1539. background: transparent;
  1540. color: #f5f5f5;
  1541. opacity: 0;
  1542. -webkit-transition: opacity 0.3s;
  1543. transition: opacity 0.3s;
  1544. }
  1545. .input__label--yoko {
  1546. position: relative;
  1547. width: 100%;
  1548. color: {color:Search Color};
  1549. text-align: left;
  1550. }
  1551. .input__label--yoko::before {
  1552. content: '';
  1553. position: absolute;
  1554. bottom: 100%;
  1555. left: 0;
  1556. width: 100%;
  1557. height: 4em;
  1558. background: {color:Search Color};
  1559. -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
  1560. transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
  1561. -webkit-transform-origin: 50% 100%;
  1562. transform-origin: 50% 100%;
  1563. -webkit-transition: -webkit-transform 0.3s;
  1564. transition: transform 0.3s;
  1565. }
  1566. .input__label--yoko::after {
  1567. content: '';
  1568. position: absolute;
  1569. top: 0;
  1570. left: 0;
  1571. width: 100%;
  1572. height: 0.1em;
  1573. background: {color:Search Color};
  1574. -webkit-transform-origin: 50% 0%;
  1575. transform-origin: 50% 0%;
  1576. -webkit-transition: -webkit-transform 0.3s;
  1577. transition: transform 0.3s;
  1578. }
  1579. .input__label-content--yoko {
  1580. padding: 0.75em 0;
  1581. text-transform: uppercase;
  1582. opacity: 0.5;
  1583. font-style: italic;
  1584. }
  1585. .input__field--yoko:focus,
  1586. .input--filled .input__field--yoko {
  1587. opacity: 1;
  1588. -webkit-transition-delay: 0.3s;
  1589. transition-delay: 0.3s;
  1590. }
  1591. .input__field--yoko:focus + .input__label--yoko::before,
  1592. .input--filled .input__label--yoko::before {
  1593. -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
  1594. transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
  1595. }
  1596. .input__field--yoko:focus + .input__label--yoko,
  1597. .input--filled .input__label--yoko {
  1598. pointer-events: none;
  1599. }
  1600. .input__field--yoko:focus + .input__label--yoko::after,
  1601. .input--filled .input__label--yoko::after {
  1602. -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
  1603. transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
  1604. }
  1605. .scrollup{
  1606. position: fixed;
  1607. bottom: 10px;
  1608. right: 10px;
  1609. width: 35px;
  1610. height: 35px;
  1611. line-height: 35px;
  1612. cursor: pointer;
  1613. color: #000;
  1614. display: none;
  1615. text-align: center;
  1616. z-index: 9;
  1617. background: rgba(255,255,255,0.1);
  1618. }
  1619. /* HINT */
  1620. .hint, [data-hint] {
  1621. position: relative;
  1622. display: inline-block;
  1623. }
  1624. .hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
  1625. position: absolute;
  1626. -webkit-transform: translate3d(0, 0, 0);
  1627. -moz-transform: translate3d(0, 0, 0);
  1628. transform: translate3d(0, 0, 0);
  1629. visibility: hidden;
  1630. opacity: 0;
  1631. top: -30px;
  1632. left: 0;
  1633. z-index: 1000000;
  1634. pointer-events: none;
  1635. -webkit-transition: 0.3s ease;
  1636. -moz-transition: 0.3s ease;
  1637. transition: 0.3s ease;
  1638. -webkit-transition-delay: 0ms;
  1639. -moz-transition-delay: 0ms;
  1640. transition-delay: 0ms; }
  1641. .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
  1642. visibility: visible;
  1643. opacity: 1;
  1644. border-top-color: {color:Menu Icons};
  1645. }
  1646. .hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after {
  1647. -webkit-transition-delay: 100ms;
  1648. -moz-transition-delay: 100ms;
  1649. transition-delay: 100ms; }
  1650. .hint:before, [data-hint]:before {
  1651. content: '';
  1652. position: absolute;
  1653. background: transparent;
  1654. border: 6px solid transparent;
  1655. z-index: 1000001;
  1656. margin-top: 26px;
  1657. margin-left: -15px;
  1658. }
  1659. .hint:after, [data-hint]:after {
  1660. content: attr(data-hint);
  1661. background: {color:Menu Icons};
  1662. color: white;
  1663. padding: 8px 10px;
  1664. font-size: 12px;
  1665. font-weight: bold;
  1666. line-height: 12px;
  1667. white-space: nowrap; }
  1668.  
  1669. .hint--top:before {
  1670. margin-bottom: -12px; }
  1671. .hint--top:after {
  1672. margin-left: -18px; }
  1673. .hint--top:before, .hint--top:after {
  1674. left: 50%; }
  1675. .hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
  1676. -webkit-transform: translateY(-1px);
  1677. -moz-transform: translateY(-1px);
  1678. transform: translateY(-1px); }
  1679. #svgb{
  1680. visibility: hidden;
  1681. display: none;
  1682. }
  1683. /* Footer */
  1684. #footer{
  1685. color: {color:Footer Color};
  1686. opacity: 0.8;
  1687. text-align: center;
  1688. float: left;
  1689. font-size: 14px;
  1690. letter-spacing: 1px;
  1691. margin: 0px;
  1692. width: 100%;
  1693. }
  1694. .footer{
  1695. color: rgb(255,255,255,0.8);
  1696. font-family: 'Ubuntu',sans-serif;
  1697. text-decoration: none;
  1698. }
  1699. .footer p{
  1700. font-size: 12px;
  1701. letter-spacing: 1px;
  1702. padding-left: 15px;
  1703. padding-right: 15px;
  1704. }
  1705. .footer a{
  1706. color: {color:Footer Color};
  1707. text-decoration: none;
  1708. text-transform: uppercase;
  1709. }
  1710. .footer a:hover{
  1711. text-decoration: underline;
  1712. }
  1713. .ThemeSection{
  1714. padding: 20px;
  1715. background: #fff;
  1716. margin: 20px auto;
  1717. text-align: center;
  1718. color: #919191;
  1719. font-size: 13px;
  1720. }
  1721. .ThemeSection a{
  1722. color: #909090;
  1723. }
  1724. .ThemeSection a:hover{
  1725. text-decoration: underline;
  1726. }
  1727. {CustomCSS}
  1728. </style>
  1729. </head>
  1730. <body>
  1731. <div class="container">
  1732.  
  1733. <div class="row">
  1734. <div class="col-md-8 col-md-offset-2" id="grid">
  1735.  
  1736. <div class="LeftSideBar col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
  1737. <div class="col-header">
  1738. <a class="blog-avatar" href="/"><img src="{PortraitURL-96}"></a>
  1739. <a class="blogTitle" href="/"><h1>{Title}</h1></a>
  1740. {block:ShowDescription}<p class="description">{Description}</p>{/block:ShowDescription}
  1741. <div class="pages">
  1742. <ul>
  1743. <a href="/" data-hint="Home" class="hint--top" {Target}><li class="home_item"><i class="fa fa-home"></i></li></a>
  1744. {block:AskEnabled}
  1745. <a href="/ask" data-hint="{AskLabel}" class="hint--top" {Target}><li class="ask_item"><i class="fa fa-envelope-o"></i></li></a>
  1746. {/block:AskEnabled}
  1747. {block:SubmissionsEnabled}
  1748. <a href="/submit" data-hint="{SubmitLabel}" class="hint--top" {Target}><li class="submit_item"><i class="fa fa-inbox"></i></li></a>
  1749. {/block:SubmissionsEnabled}
  1750. {block:IfShowFeedPage}
  1751. <a href="{RSS}" data-hint="{lang:Feed}" class="hint--top" {Target}><li class="rss_item"><i class="fa fa-rss"></i></li></a>
  1752. {/block:IfShowFeedPage}
  1753. {block:IfShowArchivePage}
  1754. <a href="/archive" data-hint="{lang:Archive}" class="hint--top" {Target}><li class="archive_item"><i class="fa fa-newspaper-o"></i></li></a>
  1755. {/block:IfShowArchivePage}
  1756. {block:IfInstagramURL}<a href="{text:Instagram URL}" data-hint="Instagram" class="hint--top" {Target}><li><i class="fa fa-instagram"></i></li></a>{/block:IfInstagramURL}
  1757. {block:IfFacebookURL}<a href="{text:Facebook URL}" data-hint="Facebook" class="hint--top" {Target}><li><i class="fa fa-facebook"></i></li></a>{/block:IfFacebookURL}
  1758. {block:IfGoogleURL}<a href="{text:Google URL}" data-hint="Google +" class="hint--top" {Target}><li><i class="fa fa-google-plus"></i></li></a>{/block:IfGoogleURL}
  1759. {block:IfVineURL}<a href="{text:Vine URL}" data-hint="Vine" class="hint--top" {Target}><li><i class="fa fa-vine"></i></li></a>{/block:IfVineURL}
  1760. {block:IfTwitterURL}<a href="{text:Twitter URL}" data-hint="Twitter" class="hint--top" {Target}><li><i class="fa fa-twitter"></i></li></a>{/block:IfTwitterURL}
  1761. {block:IfPinterestURL}<a href="{text:Pinterest URL}" data-hint="Pinterest" class="hint--top" {Target}><li><i class="fa fa-pinterest-p"></i></li></a>{/block:IfPinterestURL}
  1762. {block:IfLinkedInURL}<a href="{text:LinkedIn URL}" data-hint="LinkedIn" class="hint--top" {Target}><li><i class="fa fa-linkedin"></i></li></a>{/block:IfLinkedInURL}
  1763. {block:IfDribbbleURL}<a href="{text:Dribbble URL}" data-hint="Dribbble" class="hint--top" {Target}><li><i class="fa fa-dribbble"></i></li></a>{block:IfDribbbleURL}
  1764. {block:IfFlickrURL}<a href="{text:Flickr URL}" data-hint="Flickr" class="hint--top" {Target}><li><i class="fa fa-flickr"></i></li></a>{/block:IfFlickrURL}
  1765. {block:IfWebSiteURL}<a href="{text:WebSite URL}" data-hint="WebSite" class="hint--top" {Target}><li><i class="fa fa-file-word-o"></i></li></a>{/block:IfWebSiteURL}
  1766. {block:IfYoutubeURL}<a href="{text:Youtube URL}" data-hint="Youtube" class="hint--top" {Target}><li><i class="fa fa-youtube-play"></i></li></a>{/block:IfYoutubeURL}
  1767. {block:IfVimeoURL}<a href="{text:Vimeo URL}" data-hint="Vimeo" class="hint--top" {Target}><li><i class="fa fa-vimeo-square"></i></li></a>{/block:IfVimeoURL}
  1768. {block:IfDeviantArtURL}<a href="{text:DeviantArt URL}" data-hint="DeviantArt" class="hint--top" {Target}><li><i class="fa fa-deviantart"></i></li></a>{/block:IfDeviantArtURL}
  1769. {block:IfBehanceURL}<a href="{text:Behance URL}" data-hint="Behance" class="hint--top" {Target}><li><i class="fa fa-behance"></i></li></a>{/block:IfBehanceURL}
  1770. {block:IfGitHubURL}<a href="{text:GitHub URL}" data-hint="Github" class="hint--top" {Target}><li><i class="fa fa-github-alt"></i></li></a>{/block:IfGitHubURL}
  1771. {block:IfSpotifyURL}<a href="{text:Spotify URL}" data-hint="Spotify" class="hint--top" {Target}><li><i class="fa fa-spotify"></i></li></a>{/block:IfSpotifyURL}
  1772. {block:IfSoundCloudURL}<a href="{text:SoundCloud URL}" data-hint="SoundCloud" class="hint--top" {Target}><li><i class="fa fa-soundcloud"></i></li></a>{/block:IfSoundCloudURL}
  1773. {block:IfWordpressURL}<a href="{text:Wordpress URL}" data-hint="Wordpress" class="hint--top" {Target}><li><i class="fa fa-wordpress"></i></li></a>{/block:IfWordpressURL}
  1774. </ul>
  1775. </div>
  1776. <div class="col-hp">
  1777. {block:HasPages}
  1778. <ul class="page">
  1779. {block:Pages}
  1780. <a href="{URL}" {Target}><li>{Label}</li></a>
  1781. {/block:Pages}
  1782. </ul>
  1783. {/block:HasPages}
  1784. </div>
  1785. </div>
  1786. {block:IfShowsearchwidget}
  1787. <section class="sideBarSection col-search">
  1788. <form action="/search" method="get">
  1789. <span class="input input--minoru">
  1790. <input class="input__field input__field--yoko" name="q" type="text" id="input-16" />
  1791. <label class="input__label input__label--yoko" for="input-16">
  1792. <span class="input__label-content input__label-content--yoko">Search by tag</span>
  1793. </label>
  1794. </span>
  1795. </form>
  1796. </section><!-- Search -->
  1797. {/block:IfShowsearchwidget}
  1798. {block:Twitter}
  1799. <section class="sideBarSection">
  1800. <div class="T-header">
  1801. <a href="http://twitter.com/{TwitterUsername}" target="_blank">
  1802. <i class="fa fa-twitter"></i>
  1803. <span class="lgatwitter">Latest Tweets</span>
  1804. </a>
  1805. </div>
  1806. <span class="menu-icon" data-cookie="twitter"><div class="line"></div></span>
  1807. <div class="col-twitter col-toggle">
  1808. <div class="border_wrap move"></div>
  1809. <div id="twitter" style="display:none;">
  1810. <ul id="tweets" class="maha">
  1811.  
  1812. </ul>
  1813. </div>
  1814. </div>
  1815. </section>
  1816. {/block:Twitter}
  1817. {block:IfInstagramaccesstoken}
  1818. <section class="sideBarSection">
  1819. <div class="T-header">
  1820. <i class="fa fa-instagram"></i>
  1821. <span class="lgainstagram">Instagram Feed</span>
  1822. </div>
  1823. <span class="menu-icon" data-cookie="instagram"><div class="line"></div></span>
  1824. <div class="col-instagram col-toggle" style="display:none;">
  1825. <div class="border_wrap move"></div>
  1826. <div id="instagram">
  1827. <div class="slider_wrap">
  1828. <ul class="rslides" id="instafeed"></ul>
  1829. </div>
  1830. </div>
  1831. </div>
  1832. </section>
  1833. {/block:IfInstagramaccesstoken}
  1834. {block:IfDribbbleUserName}
  1835. <section class="sideBarSection">
  1836. <div class="T-header">
  1837. <a href="https://dribbble.com/{text:Dribbble User Name}" target="_blank">
  1838. <i class="fa fa-dribbble"></i>
  1839. <span class="lgadribbble">Dribbble Shots</span>
  1840. </a>
  1841. </div>
  1842. <span class="menu-icon" data-cookie="dribbble"><div class="line"></div></span>
  1843. <div class="col-dribbble col-toggle">
  1844. <div class="border_wrap move"></div>
  1845. <div id="dribbbles"><ul id="here"></ul></div>
  1846. </div>
  1847. </section>
  1848. {/block:IfDribbbleUserName}
  1849. {block:IfShowTagCloud}
  1850. <section class="sideBarSection">
  1851. <div class="T-header">
  1852. <i class="fa fa-tags"></i>
  1853. <span class="lgtagcloud">Tag Cloud</span>
  1854. </div>
  1855. <span class="menu-icon" data-cookie="tagcloud"><div class="line"></div></span>
  1856. <div class="col-tagCloud col-toggle">
  1857. <div class="border_wrap move"></div>
  1858. <div id="tagcloud"></div>
  1859. </div>
  1860. </section>
  1861. {/block:IfShowTagCloud}
  1862. {block:IfWeHeartItUserName}
  1863. <section class="sideBarSection">
  1864. <div class="T-header">
  1865. <a href="http://weheartit.com/{text:We Heart It User Name}" target="_blank">
  1866. <i class="fa fa-heart"></i>
  1867. <span class="lgadribbble">We Heart It</span>
  1868. </a>
  1869. </div>
  1870. <span class="menu-icon" data-cookie="heartit"><div class="line"></div></span>
  1871. <div class="col-heart col-toggle">
  1872. <iframe src="//weheartit.com/widget/hearts/{text:We Heart It User Name}?=0&avatar=1&title=1&subtitle=1&center=0&type=slideshow" width="240" height="251" scrolling="no" frameborder="0"></iframe>
  1873. </div>
  1874. </section>
  1875. {/block:IfWeHeartItUserName}
  1876. {block:IfPeopleIfollow}
  1877. {block:Following}
  1878. <section class="sideBarSection" >
  1879. <div class="T-header">
  1880. <i class="fa fa-user"></i>
  1881. <span class="lgafollow">{lang:People I follow}</span>
  1882. </div>
  1883. <span class="menu-icon" data-cookie="follow"><div class="line"></div></span>
  1884. <div class="col-follow col-toggle">
  1885. <ul>
  1886. {block:Followed}
  1887. <li><a href="{FollowedURL}" target="_blank" title="{FollowedTitle}"><img src="{FollowedPortraitURL-64}" alt=""></a></li>
  1888. {/block:Followed}
  1889. </ul>
  1890. </div>
  1891. </section>
  1892. {/block:Following}
  1893. {/block:IfPeopleIfollow}
  1894. <section class="ThemeSection" >
  1895. Theme By <a href="http://www.leenthemes.com/" target="_blank"> Hakuna Matata</a>
  1896. </section>
  1897. </div><!-- END .LeftSideBar -->
  1898. {block:Posts}
  1899. <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 item {block:Caption}hasCaption{/block:Caption}" id="{PostID}">
  1900. {block:Photo}
  1901. {block:IndexPage}
  1902. <a href="{Permalink}">
  1903. <figure>
  1904. <img class="mainimg" src="{PhotoURL-500}" alt="{PhotoAlt}">
  1905. <div class="zoom" href="{PhotoURL-1280}"><i class="fa fa-search"></i></div>
  1906. </figure>
  1907. </a>
  1908. {/block:IndexPage}
  1909. {block:PermalinkPage}
  1910. {LinkOpenTag}
  1911. <figure>
  1912. <img class="mainimg" src="{PhotoURL-500}" alt="{PhotoAlt}">
  1913. <div class="zoom" href="{PhotoURL-1280}"><i class="fa fa-search"></i></div>
  1914. </figure>
  1915. {LinkCloseTag}
  1916. {/block:PermalinkPage}
  1917. {/block:Photo}
  1918. {block:Photoset}
  1919. <div class="posts_bg">
  1920. <div class="img-png"></div>
  1921. <div class="photoset-grid photoset{PostID}" data-layout="{PhotosetLayout}" data-id="photoset{PostID}" data-popup="{PostID}">
  1922. {block:Photos}
  1923. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" {block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}
  1924. {block:Caption}alt="{Caption}"{/block:caption} />
  1925. {/block:Photos}
  1926. </div>
  1927. </div>
  1928. {/block:Photoset}
  1929. {block:Video}
  1930. <div class="fixme hidden-xs"><i class="fa fa-arrow-down"></i></div>
  1931. <div class="i_Frame">
  1932. {VideoEmbed-500}
  1933. </div>
  1934. {/block:Video}
  1935. {block:Audio}
  1936. <div class="i_Frame">
  1937. {block:AudioEmbed}
  1938. {AudioEmbed}
  1939. {/block:AudioEmbed}
  1940. </div>
  1941. {/block:Audio}
  1942. {block:Link}
  1943. <div class="post_media">
  1944. <div class="link_container">
  1945. {block:Thumbnail}
  1946. <div class="link_thumbnail_container hidden-xs">
  1947. <a href="{URL}" target="_blank" class="link_thumbnail_click">
  1948. <img class="link_thumbnail" src="{Thumbnail}" alt="">
  1949. </a>
  1950. </div>
  1951. {/block:Thumbnail}
  1952. <div class="link_text_container">
  1953. <div class="link_text_outer">
  1954. <div class="link_text">
  1955. <a href="{URL}" target="_blank" class="link_title">{Name}<i class="fa fa-chevron-right"></i></a>
  1956. <div class="link_footer">
  1957. <a href="{URL}" target="_blank" class="link_source">{Host}</a>
  1958. </div>
  1959. </div>
  1960. </div>
  1961. </div>
  1962. </div>
  1963. </div>
  1964. {block:IfShowCaption}
  1965. {block:Description}
  1966. <div class="caption">
  1967. {Description}
  1968. </div>
  1969. {/block:Description}
  1970. {/block:IfShowCaption}
  1971. {/block:Link}
  1972. {block:Text}
  1973. <div class="post_media">
  1974. {block:Title}
  1975. <div class="text_container">
  1976. <div class="link_text_container">
  1977. <div class="link_text_outer">
  1978. <div class="link_text">
  1979. <a class="text_title" href="{Permalink}" {Target}>{Title}</a>
  1980. </div>
  1981. </div>
  1982. </div>
  1983. </div>
  1984. {/block:Title}
  1985. </div>
  1986. <div class="caption">
  1987. {Body}
  1988. </div>
  1989. {/block:Text}
  1990. {block:Quote}
  1991. <div class="post_media">
  1992. <div class="quote_container">
  1993. <div class="link_text_container">
  1994. <div class="link_text_outer">
  1995. <div class="link_text">
  1996. <a class="quote_title" href="{Permalink}" {Target}>
  1997. <i class="fa fa-quote-left"></i>{Quote}</a>
  1998. </div>
  1999. </div>
  2000. </div>
  2001. </div>
  2002. {block:IfShowCaption}
  2003. {block:Source}
  2004. <div class="caption source_q">
  2005. {Source}
  2006. </div>
  2007. {/block:Source}
  2008. {/block:IfShowCaption}
  2009. </div>
  2010. {/block:Quote}
  2011. {block:Chat}
  2012. <div class="post_media">
  2013. <div class="chatwrap">
  2014. {block:Title}
  2015. <div class="chattitle">
  2016. {Title}
  2017. </div>
  2018. {/block:Title}
  2019. {block:Lines}
  2020. <div class="user_{UserNumber}">
  2021. {block:Label}
  2022. <span class="labe_l">{Label}</span>
  2023. {/block:Label}
  2024. <span class="line">{Line}</span>
  2025. </div>
  2026. {/block:Lines}
  2027. </div>
  2028. </div>
  2029. {/block:Chat}
  2030. {block:Answer}
  2031. <div class="post_media">
  2032. <div class="answer-post-wrap">
  2033. <div class="asker-wrap">
  2034. <img class="fl-right" src="{AskerPortraitURL-48}">
  2035. <div class="decsol">{Asker} asked: {Question}</div>
  2036. </div>
  2037. <div class="border_middle_post"></div>
  2038. {block:Answerer}
  2039. <div class="answer-wrap">
  2040. <img class="fl-right" src="{AnswererPortraitURL-48}" alt="{Title}"/>
  2041. <div class="decsol">{Answerer} answered: {Answer}</div>
  2042. </div>
  2043. {/block:Answerer}
  2044. <div class="replies">
  2045. {Replies}
  2046. </div>
  2047. </div>
  2048. </div>
  2049. {/block:Answer}
  2050. {block:IfShowCaption}
  2051. {block:Caption}
  2052. <figcaption class="caption">
  2053. {Caption}
  2054. </figcaption>
  2055. {/block:Caption}
  2056. {/block:IfShowCaption}
  2057. {block:PermalinkPage}
  2058. {block:IfShowTags}
  2059. {block:HasTags}
  2060. <div class="tags">
  2061. {block:Tags}
  2062. <a href="{TagURL}" {Target}>#{Tag}</a>
  2063. {/block:Tags}
  2064. </div>
  2065. {/block:HasTags}
  2066. {/block:IfShowTags}
  2067. {/block:PermalinkPage}
  2068. {block:Photo}
  2069. {block:IfShowExifandcamerainfo}
  2070. {block:Exif}
  2071. <div class="Exif_logo">
  2072. <i class="fa fa-camera-retro"></i>
  2073. <div class="img-info-container">
  2074. <i class="fa fa-info"></i>
  2075. {block:Camera}<span>Camera : </span>{Camera}<br>{/block:Camera}
  2076. {block:Aperture}<span>Aperture : </span>{Aperture}<br>{/block:Aperture}
  2077. {block:Exposure}<span>Exposure : </span>{Exposure}<br>{/block:Exposure}
  2078. {block:FocalLength}<span>Focal Length : </span>{FocalLength}<br>{/block:FocalLength}
  2079. </div>
  2080. </div>
  2081. {/block:Exif}
  2082. {/block:IfShowExifandcamerainfo}
  2083. {/block:Photo}
  2084. {block:Date}
  2085. <div class="info visible-lg visible-md">
  2086. <div class="nots">
  2087. <time><span class="postdate"><i class="fa fa-calendar"></i> {DayOfMonthWithZero} {ShortMonth} {Year}</span>
  2088. {block:NoteCount}<span class="postnote"> | <i class="fa fa-heart"></i> {NoteCount}</span>{/block:NoteCount}
  2089. </time>
  2090. <div class="actions">
  2091. <div class="actiond share_btn">
  2092. <span class="menu-icon"><div class="line"></div></span>
  2093. <div class="shortUrl">{ShortURL}</div>
  2094. <div class="share-icon">
  2095. <a href="https://www.facebook.com/sharer/sharer.php?u={Permalink}" target="_blank">
  2096. <div class="s_icon facebook"><i class="fa fa-facebook"></i></div>
  2097. </a>
  2098. <a href="https://twitter.com/intent/tweet?url={Permalink}" target="_blank">
  2099. <div class="s_icon twitter"><i class="fa fa-twitter"></i></div>
  2100. </a>
  2101. <a href="https://plus.google.com/share?url={Permalink}" target="_blank">
  2102. <div class="s_icon google"><i class="fa fa-google-plus"></i></div>
  2103. </a>
  2104. {block:Photo}
  2105. <a href="https://pinterest.com/pin/create/button/?url={ShortURL}&media={PhotoURL-HighRes}&description={PostTitle}" target="_blank">
  2106. <div class="s_icon pinterest"><i class="fa fa-pinterest"></i></div>
  2107. </a>
  2108. {/block:Photo}
  2109. </div>
  2110. </div>
  2111. <a href="{Permalink}" {Target}>
  2112. <div class="actiond permalink_btn"><i class="fa fa-link"></i></div>
  2113. </a>
  2114. <a href="{ReblogURL}" {Target}>
  2115. <div class="actiond reblog_btn">
  2116. <i class="fa fa-retweet"></i>
  2117. </div>
  2118. </a>
  2119. <div class="actiond like_btn">
  2120. {LikeButton size="16"}
  2121. <i class="fa fa-heart"></i>
  2122. </div>
  2123. </div>
  2124. </div>
  2125. <div class="logo">
  2126. {block:IfShowRebloggedFromAvatar}
  2127. {block:RebloggedFrom}
  2128. <img src="{ReblogParentPortraitURL-48}">
  2129. {/block:RebloggedFrom}
  2130. {block:NotReblog}
  2131. <img src="{PortraitURL-48}">
  2132. {/block:NotReblog}
  2133. {/block:IfShowRebloggedFromAvatar}
  2134. {block:IfNotShowRebloggedFromAvatar}
  2135. <img src="{PortraitURL-48}">
  2136. {/block:IfNotShowRebloggedFromAvatar}
  2137. </div>
  2138. </div><!-- End .Info -->
  2139. {/block:Date}
  2140. {block:PermalinkPage}
  2141. {block:PostNotes}
  2142. <div class="post-notes">
  2143. {PostNotes-16}
  2144. </div>
  2145. {/block:PostNotes}
  2146. {block:Date}
  2147. {block:IfDisqusShortname}
  2148. <div class="disqus">
  2149. <div id="disqus_thread"></div>
  2150. <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
  2151. <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
  2152. </div>
  2153. {/block:IfDisqusShortname}
  2154. {/block:Date}
  2155. {/block:PermalinkPage}
  2156. </div><!-- End .Post -->
  2157. {/block:Posts}
  2158. </div><!-- End .Posts -->
  2159. </div><!-- End .Row -->
  2160. {block:Pagination}
  2161. <div class="col-md-12 col-xs-12 pagination">
  2162. <ul>
  2163. {block:PreviousPage}
  2164. <li><a href="{PreviousPage}" class="btn">{lang:Prev}</a></li>
  2165. {/block:PreviousPage}
  2166. {block:JumpPagination length="7"}
  2167. {block:CurrentPage}
  2168. <li><span class="current_page btn hidden-xs" >{PageNumber}</span></li>
  2169. {/block:CurrentPage}
  2170. {block:JumpPage}
  2171. <li class="jq"><a class="jump_page btn hidden-xs" href="{URL}">{PageNumber}</a></li>
  2172. {/block:JumpPage}
  2173. {/block:JumpPagination}
  2174. {block:NextPage}
  2175. <li><a id="n-Page" href="{NextPage}" class="btn">{lang:Next}</a></li>
  2176. {/block:NextPage}
  2177. </ul>
  2178. </div><!-- End Pagination -->
  2179. {/block:Pagination}
  2180. <div class="behere visible-lg visible-md" id="drag"></div>
  2181. <div class="scrollup"><i class="fa fa-arrow-up"></i></div>
  2182. </div><!-- End .Container -->
  2183. <div id="footer">
  2184. <div class="footer">
  2185. <p>Copyright © {CopyrightYears} <span class="style1">{title}</span>.All rights reserved. Theme by <a href="http://dejavu-themes.tumblr.com/" target="_blank">Hakuna Matata</a>
  2186. </p>
  2187. </div>
  2188. </div>
  2189. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" id="svgb">
  2190. <defs>
  2191. <filter id="goo">
  2192. <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
  2193. <feColorMatrix in="blur" mode="matrix" values="1 10 4 2 20 5 1 0 0 0 6 0 1 0 0 0 0 0 19 -9" result="goo" />
  2194. <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
  2195. </filter>
  2196. <filter id="goo-no-comp">
  2197. <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
  2198. <feColorMatrix in="blur" mode="matrix" values="1 10 4 2 20 5 1 0 0 0 6 0 1 0 0 0 0 0 19 -9" result="goo" />
  2199. </filter>
  2200. </defs>
  2201. </svg>
  2202. <script src="http://static.tumblr.com/zdvilra/9gRnm6lbw/jquery.cookie.js"></script>
  2203. <script src="http://static.tumblr.com/zdvilra/JMcnnwofo/baltaji.js"></script>
  2204.  
  2205. <script type="text/javascript">
  2206. $(document).ready(function(){
  2207.  
  2208. /* Instagram */
  2209. {block:IfInstagramaccesstoken}
  2210. var userFeed = new Instafeed({get: 'user',userId: {text:Instagram userId},limit: {text:Instagram Photo Count},accessToken: '{text:Instagram access token}',resolution: "standard_resolution"});
  2211. userFeed.run();
  2212. {/block:IfInstagramaccesstoken}
  2213.  
  2214. /* tagCloud */
  2215. {block:IfShowTagCloud}
  2216. $('#tagcloud').tumblrTagCloud({url: '{BlogURL}',sortBy: 'bycount',maxPosts: 2000,numPosts: 2000});
  2217. {/block:IfShowTagCloud}
  2218.  
  2219. /* Dribbble */
  2220. var callback = function (playerShots) {var html = '';$.each(playerShots.shots, function (i, shot) {html += '<li><h4>' + shot.title + '</h4>';html += '<a href="' + shot.url + '" target="_blank">';html += '<img src="' + shot.image_url + '" ';html += 'alt="' + shot.title + '"></a>';html += '<div class="playerwarp"><div><i class="fa fa-eye"></i>' + shot.views_count + '</div>';html += '<div><i class="fa fa-comments"></i>' + shot.comments_count + '</div>';html += '<div><i class="fa fa-heart"></i>' + shot.likes_count + '</div></div></li>';});$('#here').html(html);};
  2221. $.jribbble.getShotsByPlayerId('{text:Dribbble User Name}', callback, {page: 1, per_page: 8});
  2222. {block:IfInfiniteScrolling}infinite();{/block:IfInfiniteScrolling}
  2223. });
  2224.  
  2225. /* Twitter */
  2226. {block:Twitter}
  2227. function recent_tweets(data) {for (i=0; i<4; i++) {document.getElementById("tweets").innerHTML =document.getElementById("tweets").innerHTML +'<li><a href="http://twitter.com/{TwitterUsername}/status/' +(data[i].id_str ? data[i].id_str : data[i].id) +'" target="_blank"><div class="content"><i class="fa fa-twitter"></i> ' + data[i].text +'</div></a></li>';}document.getElementById("twitter").style.display = 'block';}
  2228. {/block:Twitter}
  2229. </script>
  2230. {block:IfExtrabodyscripts}{text:Extra body scripts}{/block:IfExtrabodyscripts}
  2231. {block:IfGoogleAnalyticsID}
  2232. <script>
  2233. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  2234. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  2235. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  2236. })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  2237. ga('create', '{text:Google Analytics ID}', 'tumblr.com');
  2238. ga('send', 'pageview');
  2239. </script>
  2240. {/block:IfGoogleAnalyticsID}
  2241. {block:Twitter}
  2242. <script type="text/javascript" src="/tweets.js"></script>
  2243. {/block:Twitter}
  2244. </body>
  2245. </html><!-- Thanks To sandy Baltaji -->
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!