API tools faq
paste
Advertisement
faluvtha

[#36] — Daylife - 時をかける少女

faluvtha
Jul 26th, 2013
3,171
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- Themes by Fukuo@tumblr.com
  4.  
  5. -------[ Daylife - 時をかける少女 Themes ]-------
  6.  
  7. ———————————————--- RULES! ---—————————————————————
  8.  
  9. - Do not remove credit!
  10. - Do not use this code as your base.
  11. - Do not claim as your own.
  12. - If you have any problems regarding customization , code or anything else. Feel free to send me a message at Fukuo@Tumblr
  13.  
  14. ———————————————--- THANK YOU! ---——————————————————
  15.  
  16. -->
  17.  
  18. <html>
  19. <head>
  20. <title>{block:TagPage}{Tag} - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
  21.  
  22. <!-- Google Webfonts -->
  23. <link href='http://fonts.googleapis.com/css?family=Offside' rel='stylesheet' type='text/css'>
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. <meta charset="UTF-8">
  27. {block:Description}
  28. <meta name="description" content="{MetaDescription}" />
  29. {/block:Description}
  30.  
  31. <meta name="if:Audio Player Gray" content="0"/>
  32. <meta name="if:Audio Player Black" content="1"/>
  33. <meta name="if:Selection Color" content="1"/>
  34. <meta name="if:Lazy Load Posts" content="1"/>
  35. <meta name="if:Show Title" content="1"/>
  36. <meta name="if:Top Bar Shadow" content="1"/>
  37. <meta name="if:Posts Shadow" content="1"/>
  38. <meta name="if:Music Player" content="1"/>
  39. <meta name="if:Show Caption" content="0"/>
  40. <meta name="if:Infinite Scrolling" content="0"/>
  41. <meta name="image:Background" content="http://25.media.tumblr.com/tumblr_ltqq73Kh5g1qhvdofo6_400.png"/>
  42. <meta name="image:Top Bar Background" content=""/>
  43. <meta name="color:Background" content="#eee" />
  44. <meta name="color:Post" content="#fff" />
  45. <meta name="color:Sidebar Background" content="#ffffff" />
  46. <meta name="color:Body" content="#777777" />
  47. <meta name="color:Permalink Background Time" content="#111111" />
  48. <meta name="color:Permalink Body Time" content="#FFFFFF" />
  49. <meta name="color:Permalink Background Short Day" content="#777777" />
  50. <meta name="color:Permalink Body Short Day" content="#111111" />
  51. <meta name="color:Permalink Background Notes" content="#419ecc" />
  52. <meta name="color:Permalink Body Notes" content="#FFFFFF" />
  53. <meta name="color:Square One Background" content="#419ecc" />
  54. <meta name="color:Square Two Background" content="#111111" />
  55. <meta name="color:Square Three Background" content="#555555" />
  56. <meta name="color:Square Four Background" content="#999999" />
  57. <meta name="color:Description Text" content="#777777" />
  58. <meta name="color:Description Triangle Symbol" content="#419ecc" />
  59. <meta name="color:Blockquote" content="#eeeeee" />
  60. <meta name="color:Border Blockquote" content="#3785ac" />
  61. <meta name="color:Top Bar Background" content="#111111"/>
  62. <meta name="color:Menu Text Background" content="#ffffff" />
  63. <meta name="color:Menu Text Background Hover" content="#ffffff" />
  64. <meta name="color:Menu Background" content="#419ecc" />
  65. <meta name="color:Menu Background Hover" content="#111111" />
  66. <meta name="color:Title" content="#777777"/>
  67. <meta name="color:Title First Letter" content="#3785ac"/>
  68. <meta name="color:Title Post" content="#FFFFFF"/>
  69. <meta name="color:Title Background Post" content="#111111"/>
  70. <meta name="color:Ask Background" content="#419ecc"/>
  71. <meta name="color:Ask Body" content="#FFFFFF"/>
  72. <meta name="color:Links" content="#111111" />
  73. <meta name="color:Links Hover" content="#aaa" />
  74. <meta name="color:Bold text" content="#3785ac" />
  75. <meta name="color:Italic text" content="#101010" />
  76. <meta name="color:Selection Color" content="#777777" />
  77. <meta name="color:Selection Background" content="#FFFCA3" />
  78. <meta name="color:Scrollbar" content="#000000" />
  79. <meta name="color:Scrollbar Background" content="#f7f7f7" />
  80. <meta name="text:Font" content="consolas"/>
  81. <meta name="text:Font Size" content="11"/>
  82. <meta name="text:Line height" content="15"/>
  83. <meta name="text:Description Font" content="consolas"/>
  84. <meta name="text:Description Font Size" content="11"/>
  85. <meta name="text:Description Line height" content="15"/>
  86. <meta name="text:Music Player Code" content="Music Player Code"/>
  87. <meta name="text:Title" content="DAYLIFE"/>
  88. <meta name="text:Custom Link One" content=""/>
  89. <meta name="text:Custom Link One URL" content=""/>
  90. <meta name="text:Custom Link Two" content=""/>
  91. <meta name="text:Custom Link Two URL" content=""/>
  92. <meta name="text:Custom Link Three" content=""/>
  93. <meta name="text:Custom Link Three URL" content=""/>
  94. <meta name="text:Custom Link Four" content=""/>
  95. <meta name="text:Custom Link Four URL" content=""/>
  96. <meta name="text:Custom Link Five" content=""/>
  97. <meta name="text:Custom Link Five URL" content=""/>
  98. <meta name="text:Custom Link Six" content=""/>
  99. <meta name="text:Custom Link Six URL" content=""/>
  100.  
  101. <!-- Style My-Tool-Tips by Malihu -->
  102.  
  103. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  104. <script src="http://static.tumblr.com/5ojoydj/p9wmmzopi/jquery.style-my-tooltips.js"></script>
  105. <script src="http://static.tumblr.com/5ojoydj/En2mmzorm/style-my-tooltips.css"></script>
  106. <script>
  107. (function($){
  108. $(document).ready(function(){
  109. $("[title]").style_my_tooltips({
  110. tip_follows_cursor:true,
  111. tip_delay_time:200,
  112. tip_fade_speed:300,
  113. attribute:"title"
  114. });
  115. });
  116. })(jQuery);
  117. </script>
  118.  
  119. <style type="text/css">
  120. {CustomCSS}
  121.  
  122. /* ---------- TUMBLR CONTROLS ----------*/
  123.  
  124. iframe#tumblr_controls {
  125. right:3px!important;
  126. position:fixed!important;
  127. -webkit-transition:
  128. opacity 0.4s linear;
  129. opacity:0.4;
  130. -webkit-transition: all 0.8s ease-out;
  131. -moz-transition: all 0.8s ease-out;
  132. transition: all 0.8s ease-out;}
  133.  
  134. iframe#tumblr_controls:hover {
  135. -webkit-transition:opacity 0.7s linear;
  136. opacity:1;
  137. -webkit-transition: all 0.5s ease-out;
  138. -moz-transition: all 0.5s ease-out;
  139. transition: all 0.5s ease-out;}
  140.  
  141. ::-webkit-scrollbar {width: 4px;}
  142.  
  143. ::-webkit-scrollbar-track-piece
  144. {background-color: {color:Scrollbar Background};}
  145.  
  146. ::-webkit-scrollbar-thumb:vertical
  147. {width:4px;
  148. background-color: {color:Scrollbar};}
  149.  
  150. ::selection {
  151. background:{color:Selection Background};
  152. color:{color:Selection Color};
  153. }
  154.  
  155. ::-moz-selection {
  156. background:{color:Selection Background};
  157. color:{color:Selection Color};
  158. }
  159.  
  160. ::-webkit-selection {
  161. background:{color:Selection Background};
  162. color:{color:Selection Color};
  163. }
  164.  
  165. /* ---------- BODY STRUCTURE ----------*/
  166.  
  167. body{
  168. font-family: {text:Font};
  169. font-size: {text:Font size}px;
  170. line-height:{text:Line height}px;
  171. background-color:{color:Background};
  172. background-image:url('{image:Background}');
  173. background-position: fixed;
  174. background-attachment:fixed;
  175. background-repeat:repeat;}
  176.  
  177. a {
  178. text-decoration:none;
  179. color:{color:Links};
  180. }
  181.  
  182. a:link, a:visited, a:active {
  183. text-decoration:none;
  184. -webkit-transition: all 0.5s ease;
  185. -moz-transition: all 0.5s ease;
  186. -o-transition: all 0.5s ease;
  187. }
  188.  
  189. a:hover {
  190. color:{color:Links hover};
  191. text-decoration:none;
  192. -webkit-transition: all 0.5s ease;
  193. -moz-transition: all 0.5s ease;
  194. -o-transition: all 0.5s ease;
  195. }
  196.  
  197.  
  198. /* ---------------- STYLE-MY-TOOLTIPS ----------------- */
  199.  
  200. #s-m-t-tooltip{
  201. width:auto;
  202. z-index:10;
  203. margin:24px 14px 7px 12px;
  204. padding:8px;
  205. background:#777;
  206. font-family: 'Offside', cursive;
  207. font-size:12px;
  208. line-height:16px;
  209. color:#fff;
  210. text-transform:uppercase;
  211. border:1px solid {color:Title};
  212. z-index:9999999;
  213. }
  214.  
  215. /* ---------------- LINKS OF THE POSTS ----------------- */
  216.  
  217. .post a {
  218. border-bottom:1px solid transparent;
  219. text-decoration:none;
  220. color:{color:Links};
  221. }
  222.  
  223. .post a:active {
  224. background-color:{color:Links};
  225. padding:2px;
  226. text-decoration:none;
  227. -webkit-transition: all 0.5s ease;
  228. -moz-transition: all 0.5s ease;
  229. -o-transition: all 0.5s ease;
  230. }
  231.  
  232. .post a:hover {
  233. border-bottom:1px solid {color:Border Blockquote};
  234. color:{color:Links hover};
  235. text-decoration:none;
  236. -webkit-transition: all 0.5s ease;
  237. -moz-transition: all 0.5s ease;
  238. -o-transition: all 0.5s ease;
  239. }
  240.  
  241. /* ---------- BLOCKQUOTE ----------*/
  242.  
  243. blockquote{
  244. padding:11px;
  245. font-style:italic;
  246. border-left:6px solid {color:border blockquote};
  247. background-color:{color:blockquote};
  248. }
  249.  
  250. blockquote pre {
  251. max-width:100%;
  252. overflow:hidden;
  253. }
  254.  
  255. /* ---------- TITLE OF THE POSTS ----------*/
  256.  
  257. .titles {
  258. position:relative;
  259. {block:IndexPage}
  260. width:446px;
  261. margin:-29px 0px 0px -29px;
  262. {/block:IndexPage}
  263. {block:PermalinkPage}
  264. width:559px;
  265. margin:-37px 0px 0px -36px;
  266. {/block:PermalinkPage}
  267. font-size:23px;
  268. font-style:normal;
  269. font-weight:lighter;
  270. font-family: 'Offside', cursive;
  271. text-align:left;
  272. line-height:100%;
  273. text-indent:10px;
  274. text-transform:none;
  275. color:{color:Title Post};
  276. background-color:{color:Title Background Post};
  277. padding:15px 6px 15px 6px;
  278. -moz-border-radius:6px 6px 0 0;
  279. border-radius:6px 6px 0 0;
  280. -webkit-border-radius:6px 6px 0 0;
  281. -o-border-radius:6px 6px 0 0;
  282. -ms-border-radius:6px 6px 0 0;
  283. -webkit-transition: all 0.5s ease;
  284. -moz-transition: all 0.5s ease;
  285. transition: all 0.5s ease;
  286. }
  287.  
  288. .titles:hover {
  289. text-indent:30px;
  290. -webkit-transition: all 0.5s ease;
  291. -moz-transition: all 0.5s ease;
  292. transition: all 0.5s ease;
  293. }
  294.  
  295. /* ---------- PERMALINK: Shortday, Notecount and Day ----------*/
  296.  
  297. #permalink_section {
  298. position:absolute!important;
  299. margin:-29px auto auto 440px;
  300. background-color:{color:Permalink Background Time};
  301. color:{color:Permalink Body Time};
  302. padding:5px 9px;
  303. width:65px;
  304. line-height:50px;
  305. font-size:25px;
  306. text-align:center;
  307. font-family: 'Offside', cursive;
  308. -webkit-transition: all 0.7s ease;
  309. -moz-transition: all 0.7s ease;
  310. -o-transition: all 0.7s ease;
  311. -ms-transition: all 0.7s ease;
  312. }
  313.  
  314. .short_day {
  315. display:block;
  316. position:absolute;
  317. margin:35px auto auto 440px;
  318. background-color:{color:Permalink Background Shortday};
  319. padding:5px 9px;
  320. color:{color:Permalink Body Shortday};
  321. width:65px;
  322. font-size:35px;
  323. text-align:center;
  324. line-height:50px;
  325. -webkit-transition: all 0.7s ease;
  326. -moz-transition: all 0.7s ease;
  327. -o-transition: all 0.7s ease;
  328. -ms-transition: all 0.7s ease;
  329. }
  330.  
  331. .short_day a {
  332. color:{color:Permalink Body Shortday};
  333. }
  334.  
  335. .note_count {
  336. display:block;
  337. position:absolute;
  338. margin:-29px auto auto 530px;
  339. background-color:{color:Permalink Background Notes};
  340. padding:5px 9px;
  341. color:{color:Permalink Body Notes};
  342. width:65px;
  343. font-size:25px;
  344. text-align:center;
  345. line-height:50px;
  346. opacity:0;
  347. filter:alpha(opacity=0);
  348. -moz-opacity: 0;
  349. -khtml-opacity: 0;
  350. -webkit-transition: all 0.7s ease;
  351. -moz-transition: all 0.7s ease;
  352. -o-transition: all 0.7s ease;
  353. -ms-transition: all 0.7s ease;
  354. }
  355.  
  356. .post:hover .note_count {
  357. opacity:1;
  358. filter:alpha(opacity=100);
  359. -moz-opacity:1;
  360. -khtml-opacity:1;
  361. }
  362.  
  363. .post:hover #permalink_section {
  364. margin:35px auto auto 440px;
  365. }
  366.  
  367. .post:hover .short_day {
  368. margin:-29px auto auto 440px;
  369. }
  370.  
  371. #credit {
  372. position:fixed;
  373. width:130px;
  374. padding:5px;
  375. background-color:black;
  376. bottom:0px;
  377. right:-120px;
  378. color:white;
  379. font-family:calibri;
  380. font-size:13px;
  381. font-weight:lighter;
  382. text-transform:uppercase;
  383. -webkit-transition: all 0.7s ease;
  384. -moz-transition: all 0.7s ease;
  385. -o-transition: all 0.7s ease;
  386. }
  387.  
  388.  
  389. #credit:hover {
  390. right:-15px;
  391. color:white;
  392. }
  393.  
  394. /* ---------- TOP BAR ----------*/
  395.  
  396. #top_bar {
  397. display:block;
  398. position:fixed;
  399. left:0;
  400. top:0;
  401. width:100%;
  402. line-height:60px;
  403. height:50px;
  404. overflow:hidden;
  405. background-color:{color:Top Bar Background};
  406. background-image:url('{image:Top Bar Background}');
  407. z-index:9999999!important;
  408. {block:IfTopBarShadow}
  409. box-shadow: 0 3px 25px rgba(0,0,0,0.3);
  410. {/block:IfTopBarShadow}
  411. }
  412.  
  413. /* ---------- MUSIC ----------*/
  414.  
  415. #music {
  416. position:fixed;
  417. width:50px;
  418. padding:20px;
  419. margin:-25px 0 0 50px;
  420. -webkit-transition: all 0.7s ease;
  421. -moz-transition: all 0.7s ease;
  422. -o-transition: all 0.7s ease;
  423. }
  424.  
  425. .music_player {
  426. position:absolute;
  427. width:200px;
  428. padding:0;
  429. margin:-3px 0 0 0;
  430. color:white;
  431. opacity:0;
  432. -webkit-transition: all 0.7s ease;
  433. -moz-transition: all 0.7s ease;
  434. -o-transition: all 0.7s ease;
  435. }
  436.  
  437. #music:hover {
  438. margin:-84px 0 0 50px;
  439. -webkit-transition: all 0.7s ease;
  440. -moz-transition: all 0.7s ease;
  441. -o-transition: all 0.7s ease;
  442. }
  443.  
  444. #music:hover .music_player {
  445. opacity:1;
  446. }
  447.  
  448. /* ---------- POP UP MENU ----------*/
  449.  
  450. #fade {
  451. display: none;
  452. background: #000;
  453. position: fixed;
  454. left: 0;
  455. top: 0;
  456. width: 100%;
  457. height: 100%;
  458. opacity: .50;
  459. z-index: 9999;
  460. }
  461.  
  462. .popup_block{
  463. display: none;
  464. background:{color:Post};
  465. padding: 20px;
  466. float: left;
  467. position: fixed;
  468. top: 50%;
  469. left: 50%;
  470. z-index: 99999;
  471. -moz-border-radius:8px;
  472. border-radius:8px;
  473. -o-border-radius:8px;
  474. }
  475.  
  476. img.btn_close {
  477. padding:8px;
  478. -moz-border-radius:8px;
  479. border-radius:8px;
  480. -o-border-radius:8px;
  481. background-color:{color:Post};
  482. float: right;
  483. margin: -65px -55px 0 10px;
  484. }
  485.  
  486. *html #fade {
  487. position: absolute;
  488. }
  489.  
  490. *html .popup_block {
  491. position: absolute;
  492. }
  493.  
  494. /* ---------- POSITION: The position of Sidebar Content ----------*/
  495.  
  496. #position-sidebar-holder {
  497. margin:-170px 0 0 0;
  498. }
  499.  
  500. /* ---------- MENU SQUARE ----------*/
  501.  
  502. #menu_square_position {
  503. width:auto;
  504. position:fixed!important;
  505. }
  506.  
  507. #square-1 {
  508. position:fixed!important;
  509. margin-left:70px;
  510. margin-top:478px;
  511. display:visible;
  512. width:75px;
  513. height:75px;
  514. background-color:{color:Square Two Background};
  515. overflow:hidden;
  516. -webkit-transition: all 0.7s ease;
  517. -moz-transition: all 0.7s ease;
  518. -o-transition: all 0.7s ease;
  519. }
  520.  
  521. .name-1 {
  522. font-size:25px;
  523. color:white;
  524. margin:29px 0 0 11px;
  525. -webkit-transition: all 0.7s ease;
  526. -moz-transition: all 0.7s ease;
  527. -o-transition: all 0.7s ease;
  528. }
  529.  
  530. #square-1:hover .name-1 {
  531. margin:29px 0 0 -50px;
  532. }
  533.  
  534. #square-2 {
  535. position:fixed!important;
  536. margin-left:160px;
  537. margin-top:565px;
  538. display:visible;
  539. width:75px;
  540. height:75px;
  541. background-color:{color:Square Three Background};
  542. overflow:hidden;
  543. -webkit-transition: all 0.7s ease;
  544. -moz-transition: all 0.7s ease;
  545. -o-transition: all 0.7s ease;
  546. }
  547.  
  548. .name-2 {
  549. font-size:25px;
  550. color:white;
  551. margin:29px 0 0 11px;
  552. -webkit-transition: all 0.7s ease;
  553. -moz-transition: all 0.7s ease;
  554. -o-transition: all 0.7s ease;
  555. }
  556.  
  557. #square-2:hover .name-2 {
  558. margin:29px 0 0 75px;
  559. }
  560.  
  561. #square-3 {
  562. position:fixed!important;
  563. margin-left:70px;
  564. margin-top:390px;
  565. display:visible;
  566. width:75px;
  567. height:75px;
  568. background-color:{color:Square One Background};
  569. overflow:hidden;
  570. -webkit-transition: all 0.7s ease;
  571. -moz-transition: all 0.7s ease;
  572. -o-transition: all 0.7s ease;
  573. }
  574.  
  575. .name-3 {
  576. font-size:25px;
  577. color:white;
  578. margin:29px 0 0 11px;
  579. -webkit-transition: all 0.7s ease;
  580. -moz-transition: all 0.7s ease;
  581. -o-transition: all 0.7s ease;
  582. }
  583.  
  584. #square-3:hover .name-3 {
  585. margin:-29px 0 0 11px;
  586. }
  587.  
  588. #square-4 {
  589. position:fixed!important;
  590. margin-left:70px;
  591. margin-top:565px;
  592. display:visible;
  593. width:75px;
  594. height:75px;
  595. background-color:{color:Square Four Background};
  596. overflow:hidden;
  597. -webkit-transition: all 0.7s ease;
  598. -moz-transition: all 0.7s ease;
  599. -o-transition: all 0.7s ease;
  600. }
  601.  
  602. .name-4 {
  603. font-size:25px;
  604. color:white;
  605. margin:29px 0 0 11px;
  606. -webkit-transition: all 0.7s ease;
  607. -moz-transition: all 0.7s ease;
  608. -o-transition: all 0.7s ease;
  609. }
  610.  
  611. #square-4:hover .name-4 {
  612. margin:89px 0 0 11px;
  613. }
  614.  
  615. /* ---------- LINKS: Additional ----------*/
  616.  
  617. .link {
  618. float:left;
  619. width:60px;
  620. height:10px;
  621. font-size:8px;
  622. letter-spacing:1px;
  623. display:inline-block;
  624. text-align:center;
  625. font-family:consolas;
  626. text-transform:uppercase;
  627. padding:8px;
  628. background-color:{color:Menu Background};
  629. color:{Menu Text Background};
  630. border-bottom:6px solid {color:Menu Background};
  631. margin-left:6px;
  632. margin-top:5px;
  633. -webkit-transition: all 0.5s ease-out;
  634. -moz-transition: all 0.5s ease-out;
  635. -o-transition: all 0.5s ease-out;
  636. }
  637.  
  638. .link:hover {
  639. height:14px;
  640. background-color:{color:Menu Background Hover};
  641. color:{color:Menu Text Background Hover};
  642. text-align:center;
  643. -webkit-transition: all 0.5s ease-in;
  644. -moz-transition: all 0.5s ease-in;
  645. -o-transition: all 0.5s ease-in;
  646. }
  647.  
  648. /* ---------- DESCRIPTION ----------*/
  649.  
  650. #description {
  651. width:220px;
  652. color:{color:description text};
  653. text-align:justify;
  654. font-family: {text:Description Font};
  655. font-size: {text:Description Font size}px;
  656. position:fixed;
  657. margin-left:160px;
  658. margin-top:297px;
  659. padding:15px;
  660. background-color:{color:Sidebar Background};
  661. color:{color:Description Text};
  662. }
  663.  
  664. #description h1 {
  665. position:absolute;
  666. margin:-50px 0 0 80px;
  667. color:{color:Title};
  668. font-family: 'Offside', cursive;
  669. font-size:33px;
  670. }
  671.  
  672. #description h1:first-letter {
  673. color:{color:Title First Letter};
  674. }
  675. /* ---------------- PERMALINK PAGE ----------------- */
  676.  
  677. #permalinks {
  678. width:500px;
  679. z-index:999;
  680. padding:28px;
  681. color:{color:Body};
  682. }
  683.  
  684. #permalinks li {list-style-type:none;}
  685.  
  686. #permalinks img {
  687. width:30px;
  688. height:30px;
  689. opacity:1;
  690. margin-top:5px;
  691. margin-right:7px;
  692. border:7px solid {color:Title};
  693. vertical-align:middle;
  694. }
  695.  
  696. /* ---------- ARTICLE ----------*/
  697.  
  698. #posts{
  699. padding:230px 20px 20px 20px;
  700. margin-left:480px;
  701. {block:IndexPage}
  702. width:430px;
  703. {/block:IndexPage}
  704. {block:PermalinkPage}
  705. width:530px;
  706. {/block:PermalinkPage}
  707. }
  708.  
  709. .post {
  710. {block:IndexPage}
  711. width:400px;
  712. {/block:IndexPage}
  713. {block:PermalinkPage}
  714. width:500px;
  715. {/block:PermalinkPage}
  716. margin-top:10px;
  717. margin-bottom:10%;
  718. padding:6.722222%; /* important */
  719. background-color:{color:Post};
  720. color:{color:Body};
  721. {block:IfPostsShadow}
  722. box-shadow:4px 5px 5px rgba(0,0,0,0.1);
  723. {/block:IfPostsShadow}
  724. }
  725.  
  726. /* ---------- ARTICLE'S IMAGE, BOLD AND ITALIC ----------*/
  727.  
  728. .post img { max-width:100%; }
  729.  
  730. b, em, strong{
  731. color: {color:Bold text};
  732. font-weight:bold;
  733. }
  734.  
  735. i, em {
  736. color: {color:Italic text};
  737. font-weight:lighter;
  738. font-style:italic;
  739. }
  740.  
  741. /* ---------- AUDIO----------*/
  742.  
  743. #audio {
  744. {block:IfAudioPlayerBlack}
  745. background-color:#000;
  746. {/block:IfAudioPlayerBlack}
  747. {block:IfAudioPlayerGray}
  748. background-color:#E7E7E7;
  749. {/block:IfAudioPlayerGray}
  750. margin-top:0px;
  751. max-width:100%;
  752. height:20px;
  753. padding:15px 21px 21px 15px;
  754. overflow:hidden;
  755. z-index:100000;
  756. margin-bottom:230px;
  757. }
  758.  
  759.  
  760. .album{
  761. width:170px;
  762. height:170px;
  763. position:absolute;
  764. margin-top:-200px;
  765. margin-left:0px;
  766. margin-bottom:18px;
  767. padding-bottom:5px;
  768. }
  769.  
  770. .album img{
  771. display:block;
  772. opacity:0.6;
  773. border:15px solid {color:Blockquote};
  774. -webkit-transition: all 1s ease;
  775. -moz-transition: all 1s ease;
  776. -o-transition: all 1s ease;
  777. }
  778.  
  779. .album img:hover {
  780. opacity:0;
  781. border-radius:0px;
  782. border:15px solid {color:Blockquote};
  783. -webkit-transition: all 0.4s ease-in;
  784. -moz-transition: all 0.4s ease-in;
  785. -o-transition: all 0.4s ease-in;
  786. }
  787.  
  788. .audioplayer {
  789. position:absolute;
  790. margin-left:130px;
  791. margin-top:-153px;
  792. padding-bottom:7px;
  793. }
  794.  
  795.  
  796. .artist , .play {
  797. width:160px;
  798. margin-top:-7px;
  799. margin-left:90px;
  800. padding:5px;
  801. background-color: {color:Blockquote};
  802. }
  803.  
  804. .track {
  805. width:160px;
  806. margin-top:-7px;
  807. margin-left:100px;
  808. padding:5px;
  809. background-color:#111;
  810. color:#FFFFFF;
  811. }
  812.  
  813. .track b {
  814. color:#999;
  815. }
  816.  
  817. #question {
  818. width:260px;
  819. background-color:{color:Ask Background};
  820. color:{color:Ask Body};
  821. padding:20px;
  822. text-align:justify;
  823. }
  824.  
  825. #question a {
  826. color:white;
  827. border-bottom:none;
  828. }
  829.  
  830. #question img {
  831. width:30px;
  832. height:30px;
  833. }
  834.  
  835. .asker a {
  836. color:white;
  837. }
  838.  
  839. /* ---------- QUOTE ----------*/
  840.  
  841. .source{
  842. font-style:normal;
  843. text-align:center;
  844. padding:10px;
  845. }
  846.  
  847. .quotation {
  848. position:absolute;
  849. font-family:Arial;
  850. margin:-5px 0px 0px -18px;
  851. padding-left:5px;
  852. padding-right:5px;
  853. font-size:125px;
  854. line-height:100px;
  855. width:37px;
  856. max-height:300px;
  857. color:black;
  858. }
  859.  
  860.  
  861. .links{
  862. background-color: {color:Ask background};
  863. position:relative;
  864. margin:auto auto auto 40px;
  865. font-family: 'Offside', cursive;
  866. padding:15px;
  867. font-size:20px;
  868. line-height:24px;
  869. width:330px;
  870. overflow:hidden;
  871. text-align:justify;
  872. border-left:5px solid {color:Border blockquote};
  873. }
  874.  
  875. /* ---------- PAGINATION ----------*/
  876.  
  877. .page {
  878. {block:IfNotInfiniteScrolling}
  879. position:fixed;
  880. padding:10px;
  881. right:70px;
  882. bottom:150px;
  883. width:50px;
  884. text-align:center;
  885. background-color:{color:Ask Background};
  886. {/block:IfNotInfiniteScrolling}
  887. }
  888.  
  889. .page a {
  890. color:white;
  891. }
  892.  
  893. /* ---------- TITLE'S LINKS OF THE POSTS ----------*/
  894.  
  895. .sa {
  896. position:relative;
  897. {block:IndexPage}
  898. width:446px;
  899. margin:-29px 0px 0px -29px;
  900. {/block:IndexPage}
  901. {block:PermalinkPage}
  902. width:559px;
  903. margin:-37px 0px 0px -36px;
  904. {/block:PermalinkPage}
  905. font-size:23px;
  906. font-style:normal;
  907. font-weight:lighter;
  908. font-family: 'Offside', cursive;
  909. text-align:left;
  910. line-height:100%;
  911. text-indent:10px;
  912. text-transform:none;
  913. color:{color:Title Post};
  914. background-color:{color:Title Background Post};
  915. padding:15px 6px 15px 6px;
  916. -moz-border-radius:6px 6px 0 0;
  917. border-radius:6px 6px 0 0;
  918. -webkit-border-radius:6px 6px 0 0;
  919. -o-border-radius:6px 6px 0 0;
  920. -ms-border-radius:6px 6px 0 0;
  921. -webkit-transition: all 0.5s ease;
  922. -moz-transition: all 0.5s ease;
  923. transition: all 0.5s ease;
  924. }
  925.  
  926. .sa a {color:white;}
  927.  
  928. .sa:hover {
  929. text-indent:30px;
  930. -webkit-transition: all 0.5s ease;
  931. -moz-transition: all 0.5s ease;
  932. transition: all 0.5s ease;
  933. }
  934.  
  935. .si {
  936. position:relative;
  937. {block:IndexPage}
  938. width:446px;
  939. margin:-29px 0px 0px -29px;
  940. {/block:IndexPage}
  941. {block:PermalinkPage}
  942. width:559px;
  943. margin:-37px 0px 0px -36px;
  944. {/block:PermalinkPage}
  945. font-size:23px;
  946. font-style:normal;
  947. font-weight:lighter;
  948. font-family: 'Offside', cursive;
  949. text-align:left;
  950. line-height:100%;
  951. text-indent:10px;
  952. text-transform:none;
  953. color:white;
  954. background-color:{color:Title Background Post};
  955. padding:15px 6px 15px 6px;
  956. -moz-border-radius:6px 6px 0 0;
  957. border-radius:6px 6px 0 0;
  958. -webkit-border-radius:6px 6px 0 0;
  959. -o-border-radius:6px 6px 0 0;
  960. -ms-border-radius:6px 6px 0 0;
  961. -webkit-transition: all 0.5s ease;
  962. -moz-transition: all 0.5s ease;
  963. transition: all 0.5s ease;
  964. }
  965.  
  966. .si:hover {
  967. text-indent:30px;
  968. -webkit-transition: all 0.5s ease;
  969. -moz-transition: all 0.5s ease;
  970. transition: all 0.5s ease;
  971. }
  972.  
  973. </style>
  974.  
  975. <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/sn/trunk/html5.js"></script><![endif]-->
  976.  
  977. <!-- Lazy Load Effects by Mika Tuupola -->
  978. {block:IfLazyLoadPosts}
  979. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  980. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  981. <script type="text/javascript" charset="utf-8">
  982. var $j = jQuery.noConflict();
  983. $j(function() {
  984. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  985. $j("img").lazyload({
  986. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  987. effect: "fadeIn",
  988. });
  989. });
  990. </script>
  991. {/block:IfLazyLoadPosts}
  992.  
  993. <!-- Infinite Scrolling by Codysherman -->
  994. {block:IfInfiniteScrolling}
  995. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  996. {/block:IfInfiniteScrolling}
  997.  
  998. <script type="text/javascript"
  999. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  1000.  
  1001. <script>
  1002.  
  1003. $(document).ready(function() {
  1004.  
  1005. //
  1006.  
  1007. //When you click on a link with class of poplight and the href starts with a #
  1008.  
  1009. $('a.poplight[href^=#]').click(function() {
  1010.  
  1011. var popID = $(this).attr('rel'); //Get Popup Name
  1012.  
  1013. var popURL = $(this).attr('href'); //Get Popup href to define size
  1014.  
  1015.  
  1016.  
  1017. //Pull Query & Variables from href URL
  1018.  
  1019. var query= popURL.split('?');
  1020.  
  1021. var dim= query[1].split('&');
  1022.  
  1023. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  1024.  
  1025.  
  1026.  
  1027. //Fade in the Popup and add close button
  1028.  
  1029. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="https://dl.dropboxusercontent.com/u/36901456/pixelated-light/x.gif" class="btn_close" title="Close Window" alt="Close" /></a>');
  1030.  
  1031.  
  1032. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  1033.  
  1034. var popMargTop = ($('#' + popID).height() + 80) / 2;
  1035.  
  1036. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  1037.  
  1038.  
  1039.  
  1040. //Apply Margin to Popup
  1041.  
  1042. $('#' + popID).css({
  1043.  
  1044. 'margin-top' : -popMargTop,
  1045.  
  1046. 'margin-left' : -popMargLeft
  1047.  
  1048. });
  1049.  
  1050.  
  1051.  
  1052. //Fade in Background
  1053.  
  1054. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  1055.  
  1056. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  1057.  
  1058.  
  1059.  
  1060. return false;
  1061.  
  1062. });
  1063.  
  1064.  
  1065.  
  1066. //Close Popups and Fade Layer
  1067.  
  1068. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  1069.  
  1070. $('#fade , .popup_block').fadeOut(function() {
  1071.  
  1072. $('#fade, a.close').remove(); //fade them both out
  1073.  
  1074. });
  1075.  
  1076. return false;
  1077.  
  1078. });
  1079.  
  1080. });
  1081.  
  1082. </script>
  1083.  
  1084. </head>
  1085. <body>
  1086.  
  1087. <div id="popup_name" class="popup_block">
  1088. {block:IfCustomLinkOne}<a href="{text:Custom Link One URL}" class="link">{text:Custom Link One}</a>{/block:IfCustomLinkOne}
  1089. {block:IfCustomLinkTwo}<a href="{text:Custom Link Two URL}" class="link">{text:Custom Link Two}</a>{/block:IfCustomLinkTwo}
  1090. {block:IfCustomLinkThree}<a href="{text:Custom Link Three URL}" class="link">{text:Custom Link Three}</a>{/block:IfCustomLinkThree}
  1091. {block:IfCustomLinkFour}<a href="{text:Custom Link Four URL}" class="link">{text:Custom Link Four}</a>{/block:IfCustomLinkFour}
  1092. {block:IfCustomLinkFive}<a href="{text:Custom Link Five URL}" class="link">{text:Custom Link Five}</a>{/block:IfCustomLinkFive}
  1093. {block:IfCustomLinkSix}<a href="{text:Custom Link Six URL}" class="link">{text:Custom Link Six}</a>{/block:IfCustomLinkSix}
  1094. </div>
  1095.  
  1096. <div id="top_bar">
  1097. {block:IfMusicPlayer}
  1098. <div id="music">
  1099. <img src="http://media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif"/>
  1100. <div class="music_player">{text:Music Player Code}</div>
  1101. </div>
  1102. {/block:IfMusicPlayer}
  1103. </div>
  1104.  
  1105. <div id="position-sidebar-holder">
  1106. <div id="menu_squre_position">
  1107. <!-- MENU SQUARE -->
  1108. <a title="Go back" href="/"><div id="square-1"><div class="name-1">.02</div></div></a>
  1109. <a title="Ask me anything!" href="/ask"><div id="square-2"><div class="name-2">.03</div></div></a>
  1110. <a title="History" href="/archive"><div id="square-3"><div class="name-3">.01</div></div></a>
  1111. <a title="Click!" href="#?w=500" rel="popup_name" class="poplight"><div id="square-4"><div class="name-4">.04</div></div></a>
  1112. </div>
  1113. <div id="description">
  1114. <h1>{text:Title}</h1>
  1115. <div style="position:absolute;font-weight:600;margin:-39px 0 0 -55px;color:{color:Description Triangle Symbol};font-size:50px;">┍ </div>
  1116. {Description}
  1117. <div style="position:absolute;font-weight:600;margin:25px 0 0 225px;color:{color:Description Triangle Symbol};font-size:50px;">┚</div>
  1118. </div>
  1119. </div>
  1120.  
  1121. <div id="posts">
  1122.  
  1123. {block:IfInfiniteScrolling}
  1124. <div class="autopagerize_page_element">
  1125. {/block:IfInfiniteScrolling}
  1126.  
  1127. {block:Posts}
  1128.  
  1129. <article class="post">
  1130.  
  1131. {block:IndexPage}
  1132. <div id="permalink_section">
  1133. {24Hour}:{Minutes}
  1134. </div>
  1135. <a href="{Permalink}" class="short_day">{ShortDayOfWeek}</a>
  1136. <div class="note_count">{NoteCount}</div>
  1137. {/block:IndexPage}
  1138.  
  1139. {block:Text}
  1140. {block:Title}
  1141. <div class="titles">{Title}</div>
  1142. {/block:Title}
  1143. <div style="max-padding:10px;height:2px;"></div>
  1144. {Body}
  1145. {/block:Text}
  1146.  
  1147. {block:Photo}
  1148. {block:PermalinkPage}
  1149. {LinkOpenTag}
  1150. <img src="{PhotoURL-500}">
  1151. {LinkCloseTag}
  1152. {/block:PermalinkPage}
  1153.  
  1154. {block:IndexPage}
  1155. {LinkOpenTag}
  1156. <meta name="{PhotoAlt}" content="{PhotoAlt}"/>
  1157. <img src="{PhotoURL-500}" width="400px" alt="{PhotoAlt}"/>{LinkCloseTag}
  1158. {/block:IndexPage}
  1159.  
  1160. {block:IfShowCaption}
  1161. {block:Caption}{Caption}{/block:Caption}
  1162. {/block:IfShowCaption}
  1163.  
  1164. {block:IfNotShowCaption}{block:PermalinkPage}
  1165. {block:Caption}{Caption}{/block:Caption}
  1166. {block:PermalinkPage}{/block:IfNotShowCaption}
  1167. {/block:Photo}
  1168.  
  1169. {block:Photoset}
  1170. {block:PermalinkPage}{Photoset-500} {/block:PermalinkPage}
  1171. {block:IndexPage} {Photoset-400}{/block:IndexPage}
  1172. {block:IfShowCaption}
  1173. {block:Caption}{Caption}{/block:Caption}
  1174. {/block:IfShowCaption}
  1175.  
  1176. {block:IfNotShowCaption}{block:PermalinkPage}
  1177. {block:Caption}{Caption}{/block:Caption}
  1178. {block:PermalinkPage}{/block:IfNotShowCaption}
  1179. {/block:Photoset}
  1180.  
  1181. {block:Quote}
  1182. <div class="quotation">“</div>
  1183. <div class="links">
  1184. {Quote}
  1185. </div>
  1186. {block:Source}
  1187. <div class="source"> — {Source} </div>
  1188. {/block:Source}
  1189. {/block:Quote}
  1190.  
  1191. {block:Link}
  1192. <div class="sa">
  1193. <a href="{URL}" {Target}>{Name}</a>
  1194. </div>
  1195. {block:Description}
  1196. <div style="padding:10px;height:2px;"></div>
  1197. {Description}
  1198. {/block:Description}
  1199. {/block:Link}
  1200.  
  1201. {block:Chat}
  1202. {block:Title}
  1203. <div class="si">{Title}</div>
  1204. {/block:Title}
  1205. {block:Lines}
  1206. {block:Label}<b>{Label}</b>{/block:Label}
  1207. {Line}
  1208. <br>
  1209. {/block:Lines}
  1210. {/block:Chat}
  1211.  
  1212. {block:Audio}
  1213. <div id="audio">
  1214. {block:IfAudioPlayerBlack}
  1215. {AudioPlayerBlack}
  1216. {/block:IfAudioPlayerBlack}
  1217. {block:IfAudioPlayerGray}
  1218. {AudioPlayerGrey}
  1219. {/block:IfAudioPlayerGray}
  1220. </div>
  1221. <div class="album"><img src="http://media.tumblr.com/tumblr_md46tfaw9F1rfymxfo1_400.jpg"/></div>
  1222. <div class="album">
  1223. {block:AlbumArt}
  1224. <img src="{AlbumArtURL}">
  1225. {/block:AlbumArt}
  1226. </div>
  1227. <div class="audioplayer">
  1228. <div class="artist"> {block:Artist} <b>Artist:</b> {Artist}{/block:Artist}</div> <br /> <div class="track"><b>Track:</b> {block:TrackName} "{TrackName}" {/block:TrackName}</div> <br /> <b> <div class="play">Plays: </b> {PlayCountWithLabel} </div> </div>
  1229. {/block:Audio}
  1230.  
  1231. {block:Video}
  1232. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  1233. {block:IndexPage}{Video-400}{/block:IndexPage}
  1234. {block:IfShowCaption}
  1235. {block:Caption}{Caption}{/block:Caption}
  1236. {/block:IfShowCaption}
  1237.  
  1238. {block:IfNotShowCaption}{block:PermalinkPage}
  1239. {block:Caption}{Caption}{/block:Caption}
  1240. {block:PermalinkPage}{/block:IfNotShowCaption}
  1241. {/block:Video}
  1242.  
  1243. {block:Answer}
  1244. <p>
  1245. <div id="question">
  1246. <div style="position:absolute;background-color:{color:Top Bar Background};color:white;margin:-40px 0 0 10px;padding:9px;">{Asker}:</div>
  1247. <div style="position:absolute;font-size:40px;margin:0 0 0 274px;color:{color:Ask Background};">◤</div>
  1248. <img style="position:absolute;border:10px solid #eee;margin:-10px 0 0 320px;" src="{AskerPortraitURL-30}">
  1249. {Question}
  1250. </div>
  1251. <p>
  1252. {Answer}
  1253. {/block:Answer}
  1254. </article>
  1255.  
  1256. {block:PermalinkPage}
  1257. <div id="permalinks">
  1258. {block:Date}
  1259. <center><span style="text-transform:uppercase; font-size:15px;margin-top:5px;margin-bottom:5px;">{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</span></center><br/>{/block:Date}
  1260. <div style="border-bottom:1px dotted {color:border blockquote};"></div>
  1261. <br>
  1262. {block:RebloggedFrom}<b>original:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a> <br> <b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a><br />{/block:RebloggedFrom}
  1263. {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}<br>
  1264. {block:HasTags} {block:Tags} <a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  1265. <div style="border-bottom:1px solid {color:border blockquote};margin-bottom:5px;"></div>
  1266. {block:PostNotes}
  1267. {PostNotes}
  1268. {/block:PostNotes}
  1269. </div>
  1270. {/block:PermalinkPage}
  1271. {/block:Posts}
  1272. </div>
  1273.  
  1274.  
  1275. <!-- DO NOT REMOVE!!! -->
  1276. <a title="Created by Fukuo" href="http://fukuo.tumblr.com/" id="credit">
  1277. ✂ Theme by Fukuo
  1278. </a>
  1279.  
  1280.  
  1281. {block:IfNotInfiniteScrolling}
  1282. <div class="page">
  1283. {block:PreviousPage}<a href="{PreviousPage}" title="newer">PREV</a>{/block:PreviousPage}{block:NextPage}<a href="{NextPage}" title="older">NEXT</a>{/block:NextPage}
  1284. </div>
  1285. {/block:IfNotInfiniteScrolling}
  1286.  
  1287. </body>
  1288. </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!