API tools faq
paste
Advertisement
kathisneckdeep

[OLD] theme 10: awkward

kathisneckdeep
Apr 16th, 2016
511
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. *.。.☆ awkward theme (theme 10) by distance-themes or fleaur ☆.。.*
  8. don't repost as your own + pls pls keep the credit
  9. hope you like this! enjoy x
  10. -->
  11.  
  12. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  13.  
  14. <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  15.  
  16. <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
  17.  
  18. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery); </script>
  19.  
  20.  
  21. <meta name="color:background" content="#ffffff"/>
  22. <meta name="color:text" content="#4d4d4d"/>
  23. <meta name="color:link" content="#4d4d4d"/>
  24. <meta name="color:post bg" content="#f8f5ed"/>
  25. <meta name="color:border" content="#eeeeee"/>
  26. <meta name="color:bar" content="#f8f5ed"/>
  27. <meta name="color:bar2" content="#f2eadb"/>
  28. <meta name="color:barh" content="#f2eadb"/>
  29.  
  30. <meta name="select:title font" content="bromello" title="Bromello"/>
  31. <meta name="select:title font" content="helloscript" title="Hello"/>
  32. <meta name="select:title font" content="'Satisfy', cursive;" title="Hello"/>
  33.  
  34. <meta name="image:background" content=""/>
  35. <meta name="image:sidepic" content=""/>
  36.  
  37. <meta name="if:left sidebar" content="0"/>
  38. <meta name="if:right sidebar" content="1"/>
  39. <meta name="if:infinite scroll" content="0"/>
  40.  
  41. <meta name="text:updates 1 title" content="updates"/>
  42. <meta name="text:updates 1 text" content="hello this is where you put your updates"/>
  43.  
  44. <meta name="text:updates 2 title" content="updates"/>
  45. <meta name="text:updates 2 text" content="hello this is where you put your updates"/>
  46.  
  47. <meta name="text:updates 3 title" content="updates"/>
  48. <meta name="text:updates 3 text" content="hello this is where you put your updates"/>
  49.  
  50. <meta name="text:updates 4 title" content="updates"/>
  51. <meta name="text:updates 4 text" content="hello this is where you put your updates"/>
  52.  
  53. <meta name="text:link 1 url" content="/"/>
  54. <meta name="text:link 1 name" content="home"/>
  55. <meta name="text:link 2 url" content="/ask"/>
  56. <meta name="text:link 2 name" content="mssg me"/>
  57. <meta name="text:link 3 url" content="/submit"/>
  58. <meta name="text:link 3 name" content="submit"/>
  59. <meta name="text:link 4 url" content="/archive"/>
  60. <meta name="text:link 4 name" content="past"/>
  61.  
  62. <link rel="shortcut icon" href="{Favicon}">
  63. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  64. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  65.  
  66.  
  67. <style type="text/css">
  68.  
  69. @font-face {
  70. font-family: 'Montserrat', sans-serif;: 'bromello';
  71. src: url('http://static.tumblr.com/ind94nd/RzUo5mfa0/bromello.otf') format('truetype');
  72. font-weight: normal;
  73. font-style: normal;
  74.  
  75. }
  76.  
  77. @font-face {
  78. font-family: 'Montserrat', sans-serif;: 'sunbreath';
  79. src: url('http://static.tumblr.com/ind94nd/PcRo5mfb6/sunbreath.otf') format('truetype');
  80. font-weight: normal;
  81. font-style: normal;
  82. letter-spacing:2px;
  83. }
  84.  
  85. @font-face {
  86. font-family: 'Montserrat', sans-serif;: 'helloscript';
  87. src: url('http://static.tumblr.com/ind94nd/VOzo5mfds/helloscript_trial.ttf') format('truetype');
  88. font-weight: normal;
  89. font-style: normal;
  90.  
  91. }
  92.  
  93. ::-webkit-scrollbar {
  94. width: 9px;
  95. height: 4px;
  96. background: {color:background};
  97. }
  98.  
  99. ::-webkit-scrollbar-thumb {
  100. border:3px solid {color:background};
  101. background-color: {color:bar};
  102. }
  103.  
  104. #s-m-t-tooltip {
  105. max-width:300px;
  106. margin:10px 0px 0px 10px;
  107. padding:3px 3px 3px 3px;
  108. background: #fff;
  109. border:0px solid {color:borderr};
  110. font-family: 'Montserrat', sans-serif;:courier new;
  111. font-size:10px;
  112. letter-spacing:0px;
  113. text-transform:lowercase;
  114. color:#000;
  115. z-index:999999999999999999999999999999999999;
  116. }
  117.  
  118. #bpicyo{
  119. width:280px;
  120. opacity:.8;
  121. bottom:15px;
  122. left:0px;
  123. position:fixed;
  124. margin-right:0px;
  125. z-index:100;
  126. }
  127.  
  128. #updates{
  129. -webkit-transition: all .7s ease-in-out;
  130. -moz-transition: all .7s ease-in-out;
  131. -ms-transition: all .7s ease-in-out;
  132. -o-transition: all .7s ease-in-out;
  133. transition: all .7s ease-in-out;
  134. width:200px;
  135. height:10px;
  136. overflow:hidden;
  137. padding:5px;
  138. top:100px;
  139. {block:ifleftsidebar}right:40px;float:right;{/block:ifleftsidebar}
  140. {block:ifrightsidebar}left:50px;{/block:ifrightsidebar}
  141. position:fixed;
  142. z-index:200000;
  143. text-align:center;
  144. font-size:12px;
  145. letter-spacing:1px;
  146. }
  147.  
  148. #updates:hover{
  149. -webkit-transition: all .7s ease-in-out;
  150. -moz-transition: all .7s ease-in-out;
  151. -ms-transition: all .7s ease-in-out;
  152. -o-transition: all .7s ease-in-out;
  153. transition: all .7s ease-in-out;
  154. height:auto;
  155. }
  156.  
  157. #updates:hover .upd{
  158. -webkit-transition: all .7s ease-in-out;
  159. -moz-transition: all .7s ease-in-out;
  160. -ms-transition: all .7s ease-in-out;
  161. -o-transition: all .7s ease-in-out;
  162. transition: all .7s ease-in-out;
  163. margin-left:25px;
  164. }
  165.  
  166. .upd{
  167. -webkit-transition: all .7s ease-in-out;
  168. -moz-transition: all .7s ease-in-out;
  169. -ms-transition: all .7s ease-in-out;
  170. -o-transition: all .7s ease-in-out;
  171. transition: all .7s ease-in-out;
  172. width:150px;
  173. height:calc(100%-50px);
  174. padding:5px;
  175. text-align:left;
  176. font-size:10px;
  177. padding-bottom:5px;
  178. margin-left:-5px;
  179. }
  180.  
  181. .uline {
  182. position:absolute;
  183. top:0;
  184. left:5px;
  185. width:100%;
  186. height:calc(100% + 1px);
  187. opacity:0;
  188. visibility:hidden;
  189. z-index:1;
  190. -webkit-transition: all .7s ease-in-out;
  191. -moz-transition: all .7s ease-in-out;
  192. -ms-transition: all .7s ease-in-out;
  193. -o-transition: all .7s ease-in-out;
  194. transition: all .7s ease-in-out;
  195. }
  196. .uline:before {
  197. content:'';
  198. position:absolute;
  199. width:calc(100% - 30px);
  200. height:calc(100% - 30px);
  201. top: 20px;
  202. right: 30px;
  203. bottom: 10px;
  204. left: 15px;
  205. border-top: 2px solid {color:bar};
  206. -webkit-transform: scale(0,1);
  207. transform: scale(0,1);
  208. -webkit-transform-origin: 0 0;
  209. transform-origin: 0 0;
  210. -webkit-transition: all .7s ease-in-out;
  211. -moz-transition: all .7s ease-in-out;
  212. -ms-transition: all .7s ease-in-out;
  213. -o-transition: all .7s ease-in-out;
  214. transition: all .7s ease-in-out;
  215. }
  216.  
  217. .uline:after {
  218. content:'';
  219. position:absolute;
  220. width:calc(100% - 45px);
  221. height:calc(100% + 20px);
  222. top:15px;
  223. right: 30px;
  224. bottom: -10px;
  225. left: 20px;
  226. border-left: 2px solid {color:bar};
  227. border-right: 2px solid {color:bar};
  228. -webkit-transform: scale(1,0);
  229. transform: scale(1,0);
  230. -webkit-transform-origin: 100% 0;
  231. transform-origin: 100% 0;
  232. -webkit-transition: all .7s ease-in-out;
  233. -moz-transition: all .7s ease-in-out;
  234. -ms-transition: all .7s ease-in-out;
  235. -o-transition: all .7s ease-in-out;
  236. transition: all .7s ease-in-out;
  237. }
  238.  
  239. #updates:hover .uline {
  240. opacity:1;
  241. visibility:visible;
  242. -webkit-transform: scale(1);
  243. transform: scale(1);
  244. transform: scale(1);
  245. }
  246.  
  247. #updates:hover .uline:before, #updates:hover .uline:after {
  248. opacity: 1;
  249. -webkit-transform: scale(1);
  250. -moz-transition: scale(1);
  251. -o-transition: scale(1);
  252. transform: scale(1);
  253. }
  254.  
  255. #topbar{
  256. top:0;
  257. right:0;
  258. left:0;
  259. width:100%;
  260. z-index:20000;
  261. height:20px;
  262. background-color:{color:bar};
  263. position:fixed;
  264. }
  265.  
  266. #bottombar{
  267. bottom:0;
  268. right:0;
  269. left:0;
  270. width:100%;
  271. z-index:10000;
  272. height:20px;
  273. background-color:{color:bar};
  274. position:fixed;
  275. }
  276.  
  277.  
  278. .tbtitle{
  279. width:auto;
  280. font-family:{select:title font};
  281. font-size:45px;
  282. margin-top:-48px;
  283. margin-right:10px;
  284. float:right;
  285. }
  286.  
  287. .tbtitle a{
  288. padding-right:5px;
  289. padding-left:5px;
  290. }
  291.  
  292. .tbborder{
  293. -webkit-transition: all .7s ease-in-out;
  294. -moz-transition: all .7s ease-in-out;
  295. -ms-transition: all .7s ease-in-out;
  296. -o-transition: all .7s ease-in-out;
  297. transition: all .7s ease-in-out;
  298. background:#{color:background};
  299. width:20px;
  300. height:20px;
  301. margin-left:-22px;
  302. margin-top:-22px;
  303. border-top:2px solid {color:bar2};
  304. border-left:2px solid {color:bar2};
  305. }
  306.  
  307. .tbborder2{
  308. -webkit-transition: all .7s ease-in-out;
  309. -moz-transition: all .7s ease-in-out;
  310. -ms-transition: all .7s ease-in-out;
  311. -o-transition: all .7s ease-in-out;
  312. transition: all .7s ease-in-out;
  313. width:20px;
  314. height:20px;
  315. position:absolute;
  316. float:right;
  317. margin-bottom:-20px;
  318. margin-left:200px;
  319. border-bottom:2px solid {color:bar2};
  320. border-right:2px solid {color:bar2};
  321. }
  322.  
  323. .tbborder3{
  324. -webkit-transition: all .7s ease-in-out;
  325. -moz-transition: all .7s ease-in-out;
  326. -ms-transition: all .7s ease-in-out;
  327. -o-transition: all .7s ease-in-out;
  328. transition: all .7s ease-in-out;
  329. opacity:0;
  330. background:#{color:background};
  331. width:10px;
  332. height:10px;
  333. float:right;
  334. margin-right:-10px;
  335. margin-top:0px;
  336. border-right:2px solid {color:bar2};
  337. border-top:2px solid {color:bar2};
  338. }
  339.  
  340. .tbborder4{
  341. -webkit-transition: all .7s ease-in-out;
  342. -moz-transition: all .7s ease-in-out;
  343. -ms-transition: all .7s ease-in-out;
  344. -o-transition: all .7s ease-in-out;
  345. transition: all .7s ease-in-out;
  346. opacity:0;
  347. width:10px;
  348. height:10px;
  349. position:absolute;
  350. margin-bottom:-10px;
  351. margin-left:-10;
  352. border-left:2px solid {color:bar2};
  353. border-bottom:2px solid {color:bar2};
  354. }
  355.  
  356. #bsbaryo:hover .tbborder{
  357. -webkit-transition: all .7s ease-in-out;
  358. -moz-transition: all .7s ease-in-out;
  359. -ms-transition: all .7s ease-in-out;
  360. -o-transition: all .7s ease-in-out;
  361. transition: all .7s ease-in-out;
  362. opacity:0;
  363. width:10px;
  364. height:10px;
  365. }
  366.  
  367. #bsbaryo:hover .tbborder2{
  368. -webkit-transition: all .7s ease-in-out;
  369. -moz-transition: all .7s ease-in-out;
  370. -ms-transition: all .7s ease-in-out;
  371. -o-transition: all .7s ease-in-out;
  372. transition: all .7s ease-in-out;
  373. opacity:0;
  374. width:10px;
  375. height:10px;
  376. }
  377.  
  378. #bsbaryo:hover .tbborder3{
  379. -webkit-transition: all .7s ease-in-out;
  380. -moz-transition: all .7s ease-in-out;
  381. -ms-transition: all .7s ease-in-out;
  382. -o-transition: all .7s ease-in-out;
  383. transition: all .7s ease-in-out;
  384. opacity:1;
  385. width:20px;
  386. height:20px;
  387. margin-right:-20px;
  388. margin-top:-10px;
  389. }
  390.  
  391. #bsbaryo:hover .tbborder4{
  392. -webkit-transition: all .7s ease-in-out;
  393. -moz-transition: all .7s ease-in-out;
  394. -ms-transition: all .7s ease-in-out;
  395. -o-transition: all .7s ease-in-out;
  396. transition: all .7s ease-in-out;
  397. opacity:1;
  398. width:20px;
  399. height:20px;
  400. margin-left:-20px;
  401. margin-bottom:-20px;
  402. }
  403.  
  404. #bsbaryo{
  405. -webkit-transition: all .7s ease-in-out;
  406. -moz-transition: all .7s ease-in-out;
  407. -ms-transition: all .7s ease-in-out;
  408. -o-transition: all .7s ease-in-out;
  409. transition: all .7s ease-in-out;
  410. width:200px;
  411. height:auto;
  412. padding:6px;
  413. font-style:bold;
  414. border:1px solid {color:bar};
  415. background:{color:bar};
  416. top:150px;
  417. {block:ifleftsidebar}left:50px;{/block:ifleftsidebar}
  418. {block:ifrightsidebar}right:40px;float:right;{/block:ifrightsidebar}
  419. font-family: 'Montserrat', sans-serif;:courier new;
  420. text-align:left;
  421. position:fixed;
  422. }
  423.  
  424. .desc{
  425. margin-top:5px;
  426. }
  427.  
  428. .linkiees{
  429. z-index:200;
  430. -webkit-transition: all .7s ease-in-out;
  431. -moz-transition: all .7s ease-in-out;
  432. -ms-transition: all .7s ease-in-out;
  433. -o-transition: all .7s ease-in-out;
  434. transition: all .7s ease-in-out;
  435. opacity:1;
  436. position:absolute;
  437. margin-top:-20px;
  438. padding:3px;
  439. max-width:200px;
  440. margin-left:5px;
  441. opacity:0;
  442. text-align:center;
  443. }
  444.  
  445. #bsbaryo:hover .linkiees{
  446. opacity:1;
  447. margin-top:10px;
  448. }
  449.  
  450. .linkiees a{
  451. font-size:10px;
  452. line-height:20px;
  453. padding:1px;
  454. }
  455.  
  456. .linkiees a:hover{
  457. -webkit-transition: all 1s ease-in-out;
  458. -moz-transition: all 1s ease-in-out;
  459. -ms-transition: all 1s ease-in-out;
  460. -o-transition: all 1s ease-in-out;
  461. transition: all 1s ease-in-out;
  462. background:{color:barh};
  463. }
  464.  
  465. .navlinks{
  466. -webkit-transition: all 1s ease-in-out;
  467. -moz-transition: all 1s ease-in-out;
  468. -ms-transition: all 1s ease-in-out;
  469. -o-transition: all 1s ease-in-out;
  470. transition: all 1s ease-in-out;
  471. background:transparent;
  472. border-radius:50% 50% 50% 50%;
  473. color:{color:bar2};
  474. height:20px;
  475. width:20px;
  476. font-family: 'Montserrat', sans-serif;:courier new;
  477. padding:5px;
  478. position:fixed;
  479. bottom:30px;
  480. right:5px;
  481. font-size:18px;
  482. }
  483.  
  484. .navlinks a{
  485. color:{color:bar2};
  486. }
  487.  
  488. .navlinks:hover{
  489. -webkit-transition: all 1s ease-in-out;
  490. -moz-transition: all 1s ease-in-out;
  491. -ms-transition: all 1s ease-in-out;
  492. -o-transition: all 1s ease-in-out;
  493. transition: all 1s ease-in-out;
  494. font-size:20px;
  495. transform: rotate(180deg);
  496. -ms-transform: rotate(180deg);
  497. -webkit-transform: rotate(180deg);
  498. -o-transform: rotate(180deg);
  499. -moz-transform: rotate(180deg);
  500. }
  501.  
  502. #content {
  503. margin-top:60px;
  504. margin-left:300px;
  505. width: 700px;
  506. float: left;
  507. {block:PermalinkPage}
  508. margin-right:20px;{/block:PermalinkPage}
  509. }
  510.  
  511.  
  512. body {
  513. background-color: {color:background};
  514. background-image: url({image:background});
  515. background-attachment:fixed;background-repeat:repeat;
  516. background-position:center;
  517. font-family: 'Montserrat', sans-serif;: courier new;
  518. font-size: 10px;
  519. color: {color:text};
  520. }
  521.  
  522. a {
  523. color: {color:link};
  524. text-decoration:none;
  525. }
  526.  
  527. blockquote {
  528. padding-left:5px;
  529. border-left:2px solid;
  530. color: {color:text};
  531. margin-left:3px;
  532. margin-bottom:5px;
  533. }
  534.  
  535. img, iframe, embed, object, video {
  536. max-width: 100%;
  537. }
  538.  
  539. #tumblr_controls, .tmblr-iframe{
  540. z-index:999999999999999999!important;
  541. -webkit-filter:invert(100%);
  542. -moz-filter:invert(100%);
  543. -o-filter:invert(100%);
  544. -ms-filter:invert(100%);
  545. filter:invert(100%);
  546. position:fixed!important;
  547. top:16px!important;
  548. right:5px!important;
  549. opacity:.4;
  550. }
  551.  
  552. /*post stuff*/
  553.  
  554. article {
  555. -webkit-transition: all .7s ease-in-out;
  556. -moz-transition: all .7s ease-in-out;
  557. -ms-transition: all .7s ease-in-out;
  558. -o-transition: all .7s ease-in-out;
  559. transition: all .7s ease-in-out;
  560. background: {color:post bg};
  561. margin: 20px;
  562. margin-left:55px;
  563. margin-bottom:60px;
  564. padding: 10px;
  565. width: 250px;
  566. position: relative;
  567. -moz-box-shadow: 4px 4px 0px 0px {color:bar2};
  568. -webkit-box-shadow: 4px 4px 0px 0px {color:bar2};
  569. box-shadow: 4px 4px 0px 0px {color:bar2};
  570. {block:PermalinkPage}width:400px;{/block:PermalinkPage}
  571. border: 1px solid {color:bar};
  572. }
  573.  
  574. article img{
  575. -webkit-transition: all .7s ease-in-out;
  576. -moz-transition: all .7s ease-in-out;
  577. -ms-transition: all .7s ease-in-out;
  578. -o-transition: all .7s ease-in-out;
  579. transition: all .7s ease-in-out;
  580. }
  581.  
  582. article:hover img{
  583. opacity:.6;
  584. }
  585.  
  586. .line {
  587. position:absolute;
  588. top:0;
  589. left:0;
  590. width:100%;
  591. height:calc(100% + 1px);
  592. opacity:0;
  593. visibility:hidden;
  594. z-index:1;
  595. -webkit-transition: all .7s ease-in-out;
  596. -moz-transition: all .7s ease-in-out;
  597. -ms-transition: all .7s ease-in-out;
  598. -o-transition: all .7s ease-in-out;
  599. transition: all .7s ease-in-out;
  600. }
  601. .line:before {
  602. content:'';
  603. position:absolute;
  604. width:calc(100% - 20px);
  605. height:calc(100% - 50px);
  606. top: 20px;
  607. right: 30px;
  608. bottom: 10px;
  609. left: 10px;
  610. border-top: 2px solid {color:bar};
  611. border-bottom: 2px solid {color:bar};
  612. -webkit-transform: scale(0,1);
  613. transform: scale(0,1);
  614. -webkit-transform-origin: 0 0;
  615. transform-origin: 0 0;
  616. -webkit-transition: all .7s ease-in-out;
  617. -moz-transition: all .7s ease-in-out;
  618. -ms-transition: all .7s ease-in-out;
  619. -o-transition: all .7s ease-in-out;
  620. transition: all .7s ease-in-out;
  621. }
  622.  
  623. .line:after {
  624. content:'';
  625. position:absolute;
  626. width:calc(100% - 45px);
  627. height:calc(100% - 25px);
  628. top: 10px;
  629. right: 30px;
  630. bottom: 10px;
  631. left: 20px;
  632. border-left: 2px solid {color:bar};
  633. border-right: 2px solid {color:bar};
  634. -webkit-transform: scale(1,0);
  635. transform: scale(1,0);
  636. -webkit-transform-origin: 100% 0;
  637. transform-origin: 100% 0;
  638. -webkit-transition: all .7s ease-in-out;
  639. -moz-transition: all .7s ease-in-out;
  640. -ms-transition: all .7s ease-in-out;
  641. -o-transition: all .7s ease-in-out;
  642. transition: all .7s ease-in-out;
  643. }
  644.  
  645. article:hover .line {
  646. opacity:1;
  647. visibility:visible;
  648. -webkit-transform: scale(1);
  649. transform: scale(1);
  650. transform: scale(1);
  651. -webkit-transition-delay: 0.15s;
  652. -moz-transition-delay: 0.15s;
  653. -o-transition-delay: 0.15s;
  654. transition-delay: 0.15s;
  655. }
  656.  
  657. article:hover .line:before, article:hover .line:after {
  658. opacity: 1;
  659. -webkit-transform: scale(1);
  660. -moz-transition: scale(1);
  661. -o-transition: scale(1);
  662. transform: scale(1);
  663. -webkit-transition-delay: 0.15s;
  664. -moz-transition-delay: 0.15s;
  665. -o-transition-delay: 0.15s;
  666. transition-delay: 0.15s;
  667. }
  668.  
  669. #note{
  670. max-height:250px;
  671. overflow:auto;
  672. }
  673.  
  674. article:hover #perma1{
  675. z-index:20000;
  676. -webkit-transition: all .7s ease-in-out;
  677. -moz-transition: all .7s ease-in-out;
  678. -ms-transition: all .7s ease-in-out;
  679. -o-transition: all .7s ease-in-out;
  680. transition: all .7s ease-in-out;
  681. opacity:1;
  682. width:10px;
  683. }
  684.  
  685. article:hover #perma3{
  686. z-index:20000;
  687. -webkit-transition: all 1s ease-in-out;
  688. -moz-transition: all 1s ease-in-out;
  689. -ms-transition: all 1s ease-in-out;
  690. -o-transition: all 1s ease-in-out;
  691. transition: all 1s ease-in-out;
  692. opacity:1;
  693. width:10px;
  694. }
  695.  
  696. article:hover #permah{
  697. z-index:20000;
  698. -webkit-transition: all 1.3s ease-in-out;
  699. -moz-transition: all 1.3s ease-in-out;
  700. -ms-transition: all 1.3s ease-in-out;
  701. -o-transition: all 1.3s ease-in-out;
  702. transition: all 1.3s ease-in-out;
  703. opacity:1;
  704. width:10px;
  705. }
  706.  
  707. article:hover #permal{
  708. z-index:20000;
  709. -webkit-transition: all .7s ease-in-out;
  710. -moz-transition: all .7s ease-in-out;
  711. -ms-transition: all .7s ease-in-out;
  712. -o-transition: all .7s ease-in-out;
  713. transition: all .7s ease-in-out;
  714. opacity:1;
  715. width:90px;
  716. }
  717.  
  718. .title{
  719. font-family: 'Montserrat', sans-serif;:courier new;
  720. font-size:20px;
  721. margin-bottom:1px;
  722. }
  723.  
  724. .ans{
  725. font-family: 'Montserrat', sans-serif;:courier new;
  726. }
  727. .qtext{
  728. font-family: 'Montserrat', sans-serif;:courier new;
  729. }
  730.  
  731. .wteveridk{
  732. font-family: 'Montserrat', sans-serif;:courier new;
  733. margin-left:5px;
  734. margin-bottom:-3px;
  735. }
  736.  
  737. .chat span {
  738. float: left;
  739. margin-right: 10px;
  740. }
  741.  
  742. #perma1{
  743. -webkit-transition: all .7s ease-in-out;
  744. -moz-transition: all .7s ease-in-out;
  745. -ms-transition: all .7s ease-in-out;
  746. -o-transition: all .7s ease-in-out;
  747. transition: all .7s ease-in-out;
  748. opacity:0;
  749. background:{color:bar};
  750. text-align: center;
  751. position: absolute;
  752. height:10px;
  753. width:5px;
  754. top:60px;
  755. left:80px;
  756. font-family: 'Montserrat', sans-serif;: courier new;
  757. padding:10px;
  758. font-size: 10px;
  759. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  760. }
  761.  
  762. #perma3{
  763. -webkit-transition: all .7s ease-in-out;
  764. -moz-transition: all .7s ease-in-out;
  765. -ms-transition: all .7s ease-in-out;
  766. -o-transition: all .7s ease-in-out;
  767. transition: all .7s ease-in-out;
  768. opacity:0;
  769. background:{color:bar};
  770. text-align: center;
  771. position: absolute;
  772. height:10px;
  773. width:5px;
  774. top:60px;
  775. left:115px;
  776. font-family: 'Montserrat', sans-serif;: courier new;
  777. padding:10px;
  778. font-size: 10px;
  779. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  780. }
  781.  
  782. #permal{
  783. -webkit-transition: all 1s ease-in-out;
  784. -moz-transition: all 1s ease-in-out;
  785. -ms-transition: all 1s ease-in-out;
  786. -o-transition: all 1s ease-in-out;
  787. transition: all 1s ease-in-out;
  788. opacity:0;
  789. background:transparent;
  790. text-align: center;
  791. position: absolute;
  792. height:auto;
  793. width:10px;
  794. border-bottom:2px solid {color:bar};
  795. top:76px;
  796. left:75px;
  797. font-family: 'Montserrat', sans-serif;: courier new;
  798. padding:10px;
  799. font-size: 10px;
  800. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  801. }
  802.  
  803. #permah{
  804. -webkit-transition: all 1s ease-in-out;
  805. -moz-transition: all 1s ease-in-out;
  806. -ms-transition: all 1s ease-in-out;
  807. -o-transition: all 1s ease-in-out;
  808. transition: all 1s ease-in-out;
  809. opacity:0;
  810. background:{color:bar};
  811. text-align: center;
  812. position: absolute;
  813. height:10px;
  814. width:5px;
  815. top:60px;
  816. left:150px;
  817. font-family: 'Montserrat', sans-serif;: courier new;
  818. padding:10px;
  819. font-size: 10px;
  820. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  821. }
  822.  
  823. #perma2{
  824. border-top:1px solid{color:bar};
  825. text-align:right;
  826. padding:3px;
  827. padding-bottom:0px;
  828. }
  829.  
  830. .tumblr_audio_player {
  831. width: 400px;
  832. height: 100px;
  833. overflow: hidden;
  834. position: relative;
  835. z-index: 1000;
  836. }
  837.  
  838. {block:ifnotinfinitescroll}
  839. .pagi { /*pagi stuff*/
  840. font-size:15px;
  841. font: {select:font};
  842. color: {color:link};
  843. text-align:center;
  844. padding:2px;
  845. padding-top:5px;
  846. }
  847. {/block:ifnotinfinitescroll}
  848.  
  849. {block:ifinfinitescroll}
  850. .pagi {
  851. display:none;
  852. }
  853. {/block:ifinfinitescroll}
  854.  
  855. </style>
  856. </head>
  857. <body>
  858.  
  859. <div id="bpicyo">
  860. <img src="{image:sidepic}"/>
  861. </div>
  862.  
  863. <div id="updates">UPDATES<br>
  864. <div class="upd">
  865. <div style="border-bottom:2px solid {color:bar}; margin-top:5px; padding-bottom:3px; text-transform:uppercase;"> {text:updates 1 title}</div>
  866. <div style="padding-top:3px;">{text:updates 1 text}</div>
  867.  
  868. <div style="border-bottom:2px solid {color:bar}; margin-top:5px; padding-bottom:3px; text-transform:uppercase;"> {text:updates 2 title}</div>
  869. <div style="padding-top:3px;">{text:updates 2 text}</div>
  870.  
  871. <div style="border-bottom:2px solid {color:bar}; margin-top:5px; padding-bottom:3px; text-transform:uppercase;"> {text:updates 3 title}</div>
  872. <div style="padding-top:3px;">{text:updates 3 text}</div>
  873.  
  874. <div style="border-bottom:2px solid {color:bar}; margin-top:5px; padding-bottom:3px; text-transform:uppercase;"> {text:updates 4 title}</div>
  875. <div style="padding-top:3px;">{text:updates 4 text}</div>
  876. <div class="uline">
  877. </div></div> </div>
  878.  
  879. <title>{Title}</title>
  880. <div id="topbar"></div>
  881. <div id="bottombar"></div>
  882. <div id="leftbar"></div>
  883. <div id="rightbar"></div>
  884.  
  885. <div id="bsbaryo">
  886. <div class="tbborder"></div>
  887. <div class="tbborder3"></div>
  888. <div class="tbtitle">
  889. <em><a href="/">{Title}</a></em> </div>
  890. <div class="desc">
  891. {Description}</div>
  892. <div class="linkiees">
  893. <a href="{text:link 1 url}" >{text:link 1 name}</a>
  894. <a href="{text:link 2 url}" >{text:link 2 name}</a>
  895. <a href="{text:link 3 url}" >{text:link 3 name}</a>
  896. <a href="{text:link 4 url}" >{text:link 4 name}</a>
  897. <a href="maoli.co.vu" title="credits">theme</a></div>
  898. <div class="tbborder2"></div><div class="tbborder4"></div>
  899. </div>
  900.  
  901. {block:Pagination}
  902. <div class="pagination">
  903. <div class="pagi">
  904. {block:PreviousPage}<a href="{PreviousPage}"><</a>{/block:PreviousPage}
  905. {block:NextPage}<a href="{NextPage}">></a>{/block:NextPage}
  906. </div></div>
  907. {/block:Pagination}
  908. </div>
  909. <nav>
  910. <ul>
  911. {block:HasPages}
  912. {block:Pages}
  913. <li> <a href="{URL}">{Label}</a></li>
  914. {/block:Pages}
  915. {/block:HasPages}
  916. </ul>
  917. </nav>
  918.  
  919. <div id="content">
  920. {block:Posts}
  921. <article>
  922. {block:Text}
  923. <div class="text">
  924. {block:Title}<h1 class="title">
  925. <a href="{Permalink}">{Title}</a>
  926. </h1>{/block:Title}
  927. {Body}
  928. <div id="perma2">
  929. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  930. </div>
  931. {/block:Text}
  932.  
  933. {block:Photo}
  934. <div class="photo">
  935. {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}" />{LinkCloseTag}
  936. <div class="line"></div>
  937. <div id="perma1">
  938. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"><i class="fa fa-refresh"></i></a>
  939. </div>
  940. <div id="perma3">
  941. <a href="{permalink}" title="{notecount} notes" target="_blank"><i class="fa fa-copy"></i></a></div>
  942. <div id="permah">
  943. <a href="{Permalink}" title="{ReblogRootName}"><i class="fa fa-commenting-o"></i></a></div>
  944. <div class="line"></div>
  945. <div id="permal"></div>
  946. {/block:Photo}
  947.  
  948. {block:Photoset}
  949. <div class="photoset">
  950. {block:IndexPage}
  951. {Photoset-400}
  952. {/block:IndexPage}
  953. {block:PermalinkPage}
  954. {Photoset-400}
  955. {/block:PermalinkPage}
  956. <div id="perma2">
  957. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  958. </div>
  959. {/block:Photoset}
  960.  
  961. {block:Quote}
  962. <div class="quote">
  963. {Quote}
  964. {block:Source}<cite>{Source}</cite>{/block:Source}
  965. <div id="perma2">
  966. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  967. </div>
  968. {/block:Quote}
  969.  
  970. {block:Link}
  971. <div class="link">
  972. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  973. {block:Description}{Description}{/block:Description}
  974. <div id="perma2">
  975. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  976. </div>
  977. {/block:Link}
  978.  
  979. {block:Chat}
  980. <div class="chat">
  981. <ul>
  982. {block:Lines}
  983. {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  984. {/block:Lines}
  985. </ul>
  986. <div id="perma2">
  987. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  988. </div>
  989. {/block:Chat}
  990.  
  991. {block:Audio}
  992. <div class="audio">
  993. {block:AlbumArt}
  994. <img src="{AlbumArtURL}" width="100px" height="100px"/>
  995. {/block:AlbumArt}
  996. {AudioPlayerWhite}
  997. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  998. {block:TrackName}<b>track:</b> {TrackName}{/block:TrackName}</span><br>
  999. {block:Artist}<b>artist:</b> {Artist}{/block:Artist}
  1000. <div id="perma2">
  1001. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  1002. </div>
  1003. {/block:Audio}
  1004.  
  1005. {block:Video}
  1006. <div class="video">
  1007. <div class="video-player">{Video-400}</div>
  1008. <div id="perma2">
  1009. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  1010. </div>
  1011. {/block:Video}
  1012.  
  1013. {block:Answer}
  1014. <div class="answer">
  1015. <div class="ans">
  1016. <img src="{AskerPortraitURL-30}" align="left" style="margin-top:-3px;margin-right:4px;border-radius:10px;background:#fff;padding:2px;">
  1017. {Asker}:<em>{Question}</em>
  1018. {Answer}
  1019. <div id="perma2">
  1020. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  1021. </div>
  1022. {/block:Answer}
  1023. </div>
  1024.  
  1025. <div id="perma">
  1026. {block:PermalinkPage}
  1027. {block:HasTags}</br>{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}
  1028. {block:RebloggedFrom}</br>source: <a href="{ReblogRootURL}">{ReblogRootName}</a> / via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>{/block:RebloggedFrom}
  1029. <div id="note">
  1030. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1031. </div></div>
  1032. {/block:PermalinkPage}
  1033. </footer>
  1034. </article>
  1035. {/block:Posts}
  1036. </div>
  1037.  
  1038. <!-- don't touch it lol -->
  1039.  
  1040. <div style="display:none">
  1041. <script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5263526";
  1042. var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;
  1043. fhs.src = "//s1.freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
  1044. document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");
  1045. </script>
  1046. </div>
  1047.  
  1048. <div class="navlinks"><a href="http://j.gs/12878167/theme-credit" title="distance themes" target="_blank">✿</a></div>
  1049.  
  1050. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  1051. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  1052. {block:IfInfiniteScroll}
  1053. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1054. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  1055. {/block:IfInfiniteScroll}
  1056.  
  1057. <script>
  1058. (function() {
  1059. var $tumblelog = $('#content');
  1060. {block:IfInfiniteScroll}
  1061. $tumblelog.infinitescroll({
  1062. navSelector : ".pagination",
  1063. nextSelector : ".pagination a:first",
  1064. itemSelector : "article",
  1065. bufferPx : 50,
  1066. done : "",
  1067. loading: {
  1068. img : "",
  1069. msgText: ""
  1070. },
  1071. },
  1072. function( newElements ) {
  1073. var $newElems = $( newElements ).css({ opacity: 0 });
  1074. $newElems.imagesLoaded(function(){
  1075. $newElems.animate({ opacity: 1 });
  1076. $tumblelog.masonry( 'appended', $newElems);
  1077. });
  1078. }
  1079. );
  1080. {/block:IfInfiniteScroll}
  1081. $tumblelog.imagesLoaded( function(){
  1082. $tumblelog.masonry({
  1083. columnWidth: function( containerWidth ) {
  1084. return containerWidth / 100;
  1085. }
  1086. });
  1087. });
  1088. })();
  1089. </script>
  1090. </body>
  1091. </html>
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!