Advertisement
Tsunland

bianca

Sep 1st, 2017
483
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.12 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6.  
  7. <!--
  8.  
  9. Theme «chamomile» by felinum
  10.  
  11. Last update: 25.08.2016
  12.  
  13. Rules:
  14. 1. Don't claim any part of the code as your own.
  15. 2. Don't redistribute it on other sites.
  16. 3. Don't implement parts of my code into your themes w/o permission.
  17. 4. Leave the credit intact and visible (don't move it to secondary pages).
  18. 5. You may edit the theme, but not beyond recognition.
  19.  
  20.  
  21. Notes:
  22.  
  23. 1) If you enable the Right Sidebar, make sure to disable the Left Sidebar and vice versa.
  24. 2) If you insert a number higher than 1 in the "Number of Columns" text field, don't forget to type in a value bigger than 0 in the "Post Side Margin" text field as well, otherwise the posts will have no spacing.
  25.  
  26.  
  27.  
  28. Credits:
  29. - Infinite Scroll: Paul Irish (https://github.com/infinite-scroll/infinite-scroll)
  30. - Masonry with Infinite Scroll and PXU Photosets: @ shythemes (http://shythemes.tumblr.com/post/148791415248/)
  31. - Video Resizing: @ shythemes (http://shythemes.tumblr.com/post/134536748863/)
  32. - Photo Lightbox: @ shythemes (http://shythemes.tumblr.com/post/140444996328/)
  33. - Masonry: David DeSandro (http://masonry.desandro.com/)
  34. - Like Button with Infinite Scroll: @ magnusthemes (http://magnusthemes.tumblr.com/post/132530444620)
  35. - Styled Tooltips: Manos Malihutsakis (http://manos.malihu.gr/tuts/style-my-tooltips.html)
  36.  
  37.  
  38. -->
  39.  
  40.  
  41. <title>{Title}</title>
  42. <link rel="shortcut icon" href="{Favicon}">
  43. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  44. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  45. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  46. <style> body, a, a:hover{cursor:url({select:Tiny Cursor}), auto} </style>
  47. <link href='https://fonts.googleapis.com/css?family=Karla|Muli:400,400italic|Roboto:400,400italic,500,500italic|Hind|Lato|Source+Sans+Script|Lily+Script+One' rel='stylesheet' type='text/css'>
  48. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  49. <link rel="stylesheet" href="http://static.tumblr.com/0cdn90j/3lyocfhe5/felinum.css">
  50.  
  51. <meta name="image:Background" content=""/>
  52. <meta name="image:Sidebar Icon" content="http://static.tumblr.com/0cdn90j/GkRo6o3dp/untitled-1.png"/>
  53. <meta name="color:Background" content="#fff"/>
  54. <meta name="color:Text" content="#b6b6b6"/>
  55. <meta name="color:Link" content="#000"/>
  56. <meta name="color:Link Hover" content="#000"/>
  57. <meta name="color:Posts BG" content="#fff"/>
  58. <meta name="color:Italic" content="#a0acc9"/>
  59. <meta name="color:Bold" content="#56585b"/>
  60.  
  61. <meta name="color:Sidebar Title" content="#000"/>
  62. <meta name="color:Sidebar BG" content="#fff"/>
  63. <meta name="color:Navigation Links" content="#a2b1c9"/>
  64. <meta name="color:Navigation Links Hover" content="#cecece"/>
  65.  
  66. <meta name="color:Post Info" content="#000"/>
  67. <meta name="color:Post Info Hover" content="#ccc"/>
  68. <meta name="color:Like Reblog Buttons" content="#4f4f4f"/>
  69. <meta name="color:Like Reblog Buttons Hover" content="#b3b3b3"/>
  70. <meta name="color:Like Button Liked" content="#c9d1dc"/>
  71. <meta name="color:Tags" content="#a5a5a5"/>
  72. <meta name="color:Tags Hover" content="#c9d1dc"/>
  73.  
  74. <meta name="color:Text Post Title" content="#000"/>
  75. <meta name="color:Text Post Title Hover" content="#dcdcdc"/>
  76. <meta name="color:Blockquote Border" content="#ededed"/>
  77. <meta name="color:Quote" content="#333"/>
  78. <meta name="color:Chat Label" content="#a3aeb6"/>
  79. <meta name="color:Question" content="#474747"/>
  80. <meta name="color:Audio Caption" content="#f5f6f7"/>
  81. <meta name="color:Track Title" content="#000"/>
  82. <meta name="color:Track Artist" content="#ccc"/>
  83.  
  84. <meta name="color:Back to Top Text" color="#000"/>
  85. <meta name="color:Back to Top BG" content="#fbfbfb"/>
  86. <meta name="color:Selection BG" content="#e2eff5"/>
  87. <meta name="color:Selection Text" content="#000"/>
  88. <meta name="color:Tooltip Text" content="#363636"/>
  89. <meta name="color:Tooltip BG" content="#fff"/>
  90. <meta name="color:Tooltip Border" content="#dfdfdf"/>
  91.  
  92. <meta name="select:Body Font Size" content="10" title="10px"/>
  93. <meta name="select:Body Font Size" content="11" title="11px"/>
  94. <meta name="select:Body Font Size" content="12" title="12px"/>
  95.  
  96. <meta name="select:Body Font Family" content="Karla" title="Karla">
  97. <meta name="select:Body Font Family" content="Roboto" title="Roboto"/>
  98. <meta name="select:Body Font Family" content="Hind" title="Hind"/>
  99. <meta name="select:Body Font Family" content="Inconsolata" title="Inconsolata"/>
  100. <meta name="select:Body Font Family" content="Muli" title="Muli"/>
  101. <meta name="select:Body Font Family" content="Source Code Pro" title="Source Code Pro"/>
  102. <meta name="select:Body Font Family" content="Lato" title="Lato"/>
  103.  
  104. <meta name="select:Photoset Gutter" content="2" title="2px"/>
  105. <meta name="select:Photoset Gutter" content="1" title="1px"/>
  106. <meta name="select:Photoset Gutter" content="3" title="3px"/>
  107. <meta name="select:Photoset Gutter" content="4" title="4px"/>
  108.  
  109. <meta name="select:Sidebar Icon Shape" content="32" title="round"/>
  110. <meta name="select:Sidebar Icon Shape" content="4" title="rounded corners"/>
  111. <meta name="select:Sidebar Icon Shape" content="0" title="square"/>
  112.  
  113. <meta name="select:Asker Avatar Shape" content="4" title="rounded corners"/>
  114. <meta name="select:Asker Avatar Shape" content="15" title="round"/>
  115. <meta name="select:Asker Avatar Shape" content="0" title="square"/>
  116.  
  117. <meta name="select:Audio Image Shape" content="4" title="rounded corners"/>
  118. <meta name="select:Audio Image Shape" content="25" title="round"/>
  119. <meta name="select:Audio Image Shape" content="0" title="square"/>
  120.  
  121. <meta name="select:Controls" content=".3" title="gray"/>
  122. <meta name="select:Controls" content="1" title="black"/>
  123.  
  124. <meta name="select:Tiny Cursor" content="http://cur.cursors-4u.net/cursors/cur-9/cur817.cur" title="white"/>
  125. <meta name="select:Tiny Cursor" content="http://media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png" title="black"/>
  126.  
  127. <meta name="if:Fade In On Refresh" content="1"/>
  128. <meta name="if:Left Sidebar" content="1"/>
  129. <meta name="if:Right Sidebar" content="0"/>
  130. <meta name="if:Infinite Scroll" content="0"/>
  131. <meta name="if:Show Caption" content="1"/>
  132. <meta name="if:Second Description" content="1"/>
  133.  
  134. <meta name="text:Post Size" content="300"/>
  135. <meta name="text:Permalink Post Size" content="540"/>
  136. <meta name="text:Number of Columns" content="1"/>
  137. <meta name="text:Post Side Padding" content="0"/>
  138. <meta name="text:Post Side Margin" content="0"/>
  139. <meta name="text:Sidebar Top Margin" content="0"/>
  140. <meta name="text:Sub Title" content="sub title"/>
  141. <meta name="text:Second Description" content="second description: scroll down your Theme Options panel to edit or disable this section (via the toggle button)"/>
  142.  
  143. <meta name="text:Link 1 URL" content="/"/>
  144. <meta name="text:Link 1" content="home"/>
  145. <meta name="text:Link 2 URL" content="/ask"/>
  146. <meta name="text:Link 2" content="mssg"/>
  147. <meta name="text:Link 3 URL" content="/archive"/>
  148. <meta name="text:Link 3" content="map"/>
  149. <meta name="text:Link 4 URL" content="/"/>
  150. <meta name="text:Link 4" content="link 4"/>
  151. <meta name="text:Link 5 URL" content="/"/>
  152. <meta name="text:Link 5" content="link 5"/>
  153. <meta name="text:Link 6 URL" content="/"/>
  154. <meta name="text:Link 6" content="link 6"/>
  155. <meta name="text:Link 7 URL" content="/"/>
  156. <meta name="text:Link 7" content="link 7"/>
  157.  
  158. <link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
  159. <link href='https://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>
  160. <link href='https://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
  161. <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
  162. <link href='https://fonts.googleapis.com/css?family=Neuton' rel='stylesheet' type='text/css'>
  163. <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>
  164. <link href='https://fonts.googleapis.com/css?family=Oswald:700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  165. <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  166.  
  167. <link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>
  168.  
  169. <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
  170.  
  171. <link href='https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic' rel='stylesheet' type='text/css'>
  172. <link href='https://fonts.googleapis.com/css?family=Work+Sans:300' rel='stylesheet' type='text/css'>
  173. <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
  174. <link href='http://fonts.googleapis.com/css?family=Adamina' rel='stylesheet' type='text/css'>
  175. <link href="https://fonts.googleapis.com/css?family=Norican" rel="stylesheet">
  176. <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  177.  
  178. <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  179.  
  180. <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  181.  
  182.  
  183. <link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">
  184.  
  185. <link href="https://fonts.googleapis.com/css?family=EB+Garamond|Play" rel="stylesheet">
  186.  
  187. <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  188.  
  189. <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  190.  
  191.  
  192. <link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">
  193.  
  194.  
  195.  
  196.  
  197. <style type="text/css">
  198.  
  199. /* general */
  200.  
  201. *:not(#s-m-t-tooltip):not(a):not(.tmblr-iframe), *:not(#s-m-t-tooltip):not(a):not(.tmblr-iframe):hover {transition-duration:.5s;}
  202. a, a:hover, .tmblr-iframe, .tmblr-iframe:hover, #audio_player_container, #audio_player_bg_container, #audio_player_container:hover #audio_player_bg_container, .posts:hover #like_reblog, #post_source, .posts:hover #post_source {transition-duration:.5s;}
  203.  
  204. ::-webkit-scrollbar {width:11px; height:11px;}
  205.  
  206. ::-webkit-scrollbar-thumb {
  207. border:5px solid rgba(0, 0, 0, 0);
  208. background-clip:padding-box;
  209. background-color:rgba(0, 0, 0, 1);
  210. }
  211.  
  212. ::-webkit-scrollbar-track {border:5px solid {color:Background}; background-color:#eee;}
  213.  
  214. #s-m-t-tooltip {
  215. margin:15px 14px 7px 12px;
  216. padding:5px;
  217. max-width:300px;
  218. z-index:9999999;
  219. text-shadow:none;
  220. font-style:italic;
  221. border:1px solid {color:Tooltip Border};
  222. background:{color:Tooltip BG};
  223. color:{color:Tooltip Text};
  224. }
  225.  
  226. #scrolltotop {
  227. position:fixed;
  228. top:50%;
  229. right:-70px;
  230. padding:10px 6px 10px 10px;
  231. width:50px;
  232. height:auto;
  233. z-index:99999;
  234. cursor:pointer;
  235. text-transform:lowercase;
  236. font:italic 10px roboto;
  237. border:1px solid #f5f5f5;
  238. background-color:{color:Back to Top BG};
  239. color:{color:Back to Top Text};
  240. }
  241.  
  242. .tmblr-iframe {
  243. position:fixed;
  244. top:10px !important;
  245. right:5px !important;
  246. z-index:900000000000000000000000000000;
  247. opacity:{select:Controls};
  248. -webkit-filter: invert(100%);
  249. -moz-filter:invert(100%);
  250. -ms-filter:invert(100%);
  251. -o-filter:invert(100%);
  252. filter:invert(100%);
  253. }
  254.  
  255. .tmblr-iframe:hover {opacity:.7;}
  256.  
  257. ::selection {background:{color:Selection BG}; color:{color:Selection Text};}
  258. ::-moz-selection {background:{color:Selection BG}; color:{color:Selection Text};}
  259.  
  260. body {
  261. opacity:1;
  262. transition:.5s opacity;
  263. font:{select:Body Font Size}px {select:Body Font Family}, calibri, sans-serif;
  264. background:{color:Background} url('{image:Background}') repeat fixed center;
  265. color:{color:Text};
  266. overflow-wrap:break-word;
  267. word-wrap:break-word;
  268. }
  269.  
  270. body.fade-out {opacity:0; transition:none;}
  271.  
  272. a {text-decoration:none; text-decoration: underline;}
  273. a:link, a:visited {color:{color:Link};}
  274. a:hover {color:{color:Link Hover};}
  275. a:active {color:{color:Link};}
  276.  
  277. b, bold {
  278. font-size:10px;
  279. text-transform:uppercase;
  280. letter-spacing:1px;
  281. font-family: 'Josefin Sans', sans-serif;
  282. color: #6f0000;
  283. }
  284.  
  285.  
  286.  
  287. i, italic {
  288. font-size:13px;
  289. color: #f4e097;
  290. font-family: 'Bad Script', cursive;
  291. letter-spacing:1px;
  292. text-transform:lowercase;
  293. }
  294.  
  295.  
  296.  
  297.  
  298.  
  299. pre {
  300. font-family:inherit !important;
  301. white-space:pre-wrap;
  302. white-space:-moz-pre-wrap;
  303. white-space:-o-pre-wrap;
  304. white-space:-pre-wrap;
  305. word-wrap:break-word;
  306. }
  307.  
  308. h6, small, big, sup, sub {font-size:1em;}
  309. h4, h5, h6 {margin:6px 0;}
  310. h5 {font-size:1.1em;}
  311. h4 {font-size:1.2em;}
  312. h3, h4 {
  313. background-image: url('http://static.tumblr.com/1dr6x0r/HKComb5i9/int.png');
  314. background-repeat:repeat;
  315. background-attachment:fixed;
  316. padding:2px;
  317. color:#fff; /*text color of sidebar titles*/
  318. text-shadow:1px 1px #191919,
  319. 1px -1px #191919,
  320. 1px 0px #191919,
  321. 0px 1px #191919,
  322. 0px -1px #191919,
  323. -1px 1px #191919,
  324. -1px 0px #191919,
  325. -1px -1px #191919;
  326. /*change all the hex of the text shadow to the same code
  327. to change the outline of the text*/
  328. font-size:8px;
  329. line-height:120%;
  330. font-family:'arial';
  331. text-transform:uppercase;
  332. border: double 3px #7c7c7c;
  333. text-align:center;}
  334.  
  335. h2 {
  336. padding:2px;
  337. color:#fff; /*text color of sidebar titles*/
  338. text-shadow:1px 1px #191919,
  339. 1px -1px #191919,
  340. 1px 0px #191919,
  341. 0px 1px #191919,
  342. 0px -1px #191919,
  343. -1px 1px #191919,
  344. -1px 0px #191919,
  345. -1px -1px #191919;
  346. /*change all the hex of the text shadow to the same code
  347. to change the outline of the text*/
  348. font-size:8px;
  349. line-height:120%;
  350. font-family:'arial';
  351. text-transform:uppercase;
  352. border: double 3px #7c7c7c;
  353. text-align:center;}
  354. h2 {font-size:1.4em;}
  355. h1 {font-size:1.5em;}
  356.  
  357. blockquote {
  358. margin:0;
  359. padding:0 10px;
  360. border-left:1px solid {color:Blockquote Border};
  361. }
  362.  
  363. ul {margin:0 0 0 -35px; list-style-type:none;}
  364. ol {margin-left:-25px;}
  365. ul li:not(.like):not(.reblog):before {
  366. content:'—';
  367. display:inline-block;
  368. margin-right:5px;
  369. }
  370.  
  371. img {max-width:100%; height:auto;}
  372.  
  373. /* posts */
  374.  
  375. #posts_container {
  376. {block:IndexPage}width:calc(({text:Post Size}px - 4px + 2 * ({text:Post Side Padding}px + {text:Post Side Margin}px)) * {text:Number of Columns});{/block:IndexPage}
  377. {block:Permalink}width:calc({text:Permalink Post Size}px + {text:Post Side Padding}px * 2 - 4px);{/block:Permalink}
  378. margin:0 auto;
  379. left:auto;
  380. right:auto;
  381. margin-top:70px;
  382. margin-bottom:70px;
  383. }
  384.  
  385. .posts {
  386. {block:IndexPage}
  387. margin-left:{text:Post Side Margin}px;
  388. margin-right:{text:Post Side Margin}px;
  389. opacity:0;
  390. z-index:-1;
  391. {/block:IndexPage}
  392. color:#8f8f8f;
  393. font-family: calibri;
  394. text-align:justify;
  395. font-size: 10px;
  396. letter-spacing:1px;
  397. line-height:135%;
  398.  
  399. }
  400.  
  401. .vertebrae {
  402. margin:auto;
  403. overflow:hidden;
  404. {block:Permalink}width:calc({text:Permalink Post Size}px - 4px);{/block:Permalink}
  405. {block:IndexPage}width:calc({text:Post Size}px - 4px);{/block:IndexPage}
  406. }
  407.  
  408. .photo-slideshow .count-1, .pancake {
  409. {block:Permalink}width:{text:Permalink Post Size}px;{/block:Permalink}
  410. {block:IndexPage}width:{text:Post Size}px;{/block:IndexPage}
  411. }
  412.  
  413. .photo-slideshow {position:relative;}
  414. .photo-slideshow .count-3 {max-width:177px; margin-bottom:calc({select:Photoset Gutter}px + 2px);}
  415. .photo-slideshow .row:last-of-type .count-3 {margin-bottom:0 !important;}
  416. .photo-slideshow .count-3:last-child {float:right;}
  417. .photo-slideshow .count-3:nth-child(2) {
  418. max-width:178px;
  419. position:absolute;
  420. left:50%;
  421. transform: translateX(-50%);
  422. -webkit-transform: translateX(-50%)
  423. }
  424.  
  425. /* photoset lightbox */
  426.  
  427. .vignette, #vignette {opacity:0;}
  428.  
  429. .lightbox-image, #tumblr_lightbox img {
  430. box-shadow:none !important;
  431. max-width:none;
  432. -moz-box-sizing:border-box;
  433. box-sizing:border-box;
  434. }
  435.  
  436. .tmblr-lightbox, #tumblr_lightbox {
  437. position:absolute;
  438. z-index:99999999999999999999999999999 !important;
  439. background-color:rgba(255,255,255,.9) !important;
  440. }
  441.  
  442. /* text / caption */
  443.  
  444. .text {padding:10px;}
  445.  
  446. .audio {padding:1px 10px 12px 10px; background:{color:Audio Caption};}
  447.  
  448. .appel a {display:inline-block;}
  449. .appel a:after {
  450. content:'';
  451. display:block;
  452. width:0;
  453. height:1px;
  454. margin-top:1px;
  455. background:transparent;
  456. transition:width 1s ease, background-color 1s ease;
  457. }
  458.  
  459. .appel a:hover:after {width:100%; background:{color:Link Hover};}
  460.  
  461. .text_post_title {
  462. padding:10px 10px 0 10px;
  463. text-transform:lowercase;
  464. font-weight:bold;
  465. font-size:14px;
  466. }
  467.  
  468. .text_post_title a:link, .text_post_title a:visited {color:{color:Text Post Title};}
  469. .text_post_title a:hover {color:{color:Text Post Title Hover};}
  470.  
  471. /* question */
  472.  
  473. #ask_post {padding:7px 7px 0 7px;}
  474.  
  475. #asker_avatar {
  476. display:inline-block;
  477. padding-right:5px;
  478. height:30px;
  479. width:30px;
  480. vertical-align:middle;
  481. }
  482.  
  483. #asker_avatar img {border-radius:{select:Asker Avatar Shape}px;}
  484. #asker_avatar img:hover {opacity:.6;}
  485.  
  486. #a {font-weight:bold;}
  487.  
  488. #asker {
  489. display:inline-block;
  490. letter-spacing:1px;
  491. text-transform:uppercase;
  492. font-size:8px;
  493. }
  494.  
  495. #question {padding-top:5px; color:{color:Question};}
  496.  
  497. /* quote */
  498.  
  499. #quote_post {
  500. margin-top:30px;
  501. padding:7px;
  502. color:{color:Quote};
  503. }
  504.  
  505. #quote_header {position:absolute; margin-top:-37px;}
  506.  
  507. #quo_marks {font:40px 'Lily Script One';}
  508.  
  509. #dash {
  510. position:relative;
  511. vertical-align:top;
  512. top:6px;
  513. text-transform:lowercase;
  514. font:bold 14px muli;
  515. }
  516.  
  517. #source {
  518. padding:8px 10px 0 10px;
  519. text-align:right;
  520. text-transform:uppercase;
  521. font-weight:bold;
  522. font-size:8px;
  523. }
  524.  
  525. /* chat */
  526.  
  527. #chat {padding:7px 7px 7px 5px;}
  528. #chat li {padding:5px 0;}
  529. #line #label {color:{color:Chat Label};}
  530.  
  531. /* audio */
  532.  
  533. #audio_player_container {padding:7px;}
  534.  
  535. #album_art {
  536. position:absolute;
  537. width:50px;
  538. height:50px;
  539. z-index:1;
  540. background-color:{color:Background};
  541. }
  542.  
  543. #album_art img {max-width:100%;}
  544. #album_art, #album_art img {border-radius:{select:Audio Image Shape}px;}
  545.  
  546. #audio_player_bg_container {
  547. position:absolute;
  548. width:48px;
  549. height:48px;
  550. margin-top:1px;
  551. margin-left:1px;
  552. z-index:9;
  553. overflow:hidden;
  554. opacity:0;
  555. background:white;
  556. border-radius:calc({select:Audio Image Shape}px - 1px);
  557. }
  558.  
  559. #audio_player_container:hover #audio_player_bg_container {opacity:1;}
  560.  
  561. #audio_player_bg {
  562. margin-top:14px;
  563. margin-left:-4px;
  564. }
  565.  
  566. #track_details_container {
  567. display:table;
  568. height:50px;
  569. max-height:50px;
  570. margin-left:60px;
  571. overflow:hidden;
  572. }
  573.  
  574. #track_details {display:table-cell; vertical-align:middle;}
  575.  
  576. #track_name {
  577. text-transform:lowercase;
  578. font-weight:bold;
  579. font-size:14px;
  580. color:{color:Track Title};
  581. }
  582.  
  583. #artist_name {text-transform:uppercase; color:{color:Track Artist};}
  584.  
  585. .tumblr_audio_player {
  586. height:130px;
  587. width:1000px;
  588. -moz-transform:scale(0.70, 0.70);
  589. -webkit-transform:scale(0.70, 0.70);
  590. -o-transform:scale(0.70, 0.70);
  591. -ms-transform:scale(0.70, 0.70);
  592. transform:scale(0.70, 0.70);
  593. -moz-transform-origin:top left;
  594. -webkit-transform-origin:top left;
  595. -o-transform-origin:top left;
  596. -ms-transform-origin:top left;
  597. transform-origin:top left;
  598. }
  599.  
  600. /* post notes */
  601.  
  602. #notecontainer {width:calc({text:Permalink Post Size}px - 5px); background-color:{color:Posts BG};}
  603.  
  604. #notecontainer ol.notes {
  605. list-style-type:none;
  606. margin:0;
  607. padding:0;
  608. word-break:break-all;
  609. }
  610.  
  611. #notecontainer li {padding:10px;}
  612.  
  613. #notecontainer img.avatar {
  614. margin-right:10px;
  615. width:16px;
  616. height:16px;
  617. vertical-align:-4px;
  618. border-radius:8px;
  619. }
  620.  
  621. #notecontainer .retags {
  622. margin-left:25px;
  623. text-transform:uppercase;
  624. letter-spacing:2px;
  625. font-weight:bold;
  626. font-size:7px;
  627. }
  628.  
  629. #notecontainer .retags.error {color:{color:Italic} !important;}
  630.  
  631. #notecontainer .retags a:hover {color:{color:Link Hover} !important;}
  632.  
  633. #notecontainer .answer_content {font-style:italic; color:{color:Italic};}
  634.  
  635. #notecontainer blockquote {margin:10px 0px 10px 25px;}
  636. #notecontainer blockquote a:after, #notecontainer .retags a:after, #notecontainer .avatar_frame.smt-current-element a:after {height:0;}
  637.  
  638. /* post info */
  639.  
  640. #info{
  641. width:100px;
  642. font-size:16px;
  643. padding:4px 0px 1px 0px;
  644. color:#fff;
  645.  
  646. }
  647.  
  648. #info a{
  649. text-transform:uppercase;
  650. font-family: 'Adamina', serif;
  651. color:#f4e097;
  652. text-shadow:1px 1px 5px #fff;
  653.  
  654. text-decoration:none;
  655. -moz-transition-duration:0.5s;
  656. -webkit-transition-duration:0.5s;
  657. -o-transition-duration:0.5s;
  658.  
  659.  
  660.  
  661. }
  662.  
  663. #info a:hover{
  664. color: #fff;
  665. }
  666.  
  667. #inforite{
  668. text-align: left;
  669. margin-left: 10px;
  670. margin-top: 15px;
  671. }
  672.  
  673. #inforite a{
  674. color: {color:links};
  675. text-shadow: 0px 0px 11px {color:links};
  676. text-decoration: none;
  677. }
  678.  
  679. #inforite a:hover{
  680. color: rgba(0,0,0,.0);
  681. text-shadow: 0px 0px 2px {color:links};
  682. }
  683.  
  684. #tags a {
  685. font-weight:bold;
  686. color:#8f8f8f;
  687. padding:2px;
  688. font-family: 'EB Garamond', serif;
  689. text-shadow:none;
  690. text-transform:lowercase;
  691. }
  692.  
  693. #tags a:hover {
  694. color:#eee;}
  695.  
  696.  
  697. #c {
  698. position:fixed;
  699. z-index:9999999999999999;
  700. bottom:5px;
  701. right:5px;
  702. }
  703.  
  704. /* sidebar */
  705.  
  706. #sidebar {
  707. position:fixed;
  708. {block:Permalink}
  709. {block:ifLeftSidebar}left:calc(50% - ({text:Permalink Post Size}px + {text:Post Side Padding}px * 2 - 4px) / 2 - 180px - 70px);{/block:ifLeftSidebar}
  710. {block:ifRightSidebar}left:calc(50% + ({text:Permalink Post Size}px + {text:Post Side Padding}px * 2 - 4px) / 2 + 60px);{/block:ifRightSidebar}
  711. {/block:Permalink}
  712. {block:IndexPage}
  713. {block:ifLeftSidebar}left:calc(50% - (({text:Post Size}px - 4px + 2 * ({text:Post Side Padding}px + {text:Post Side Margin}px)) * {text:Number of Columns}) / 2 - 180px - 70px + {text:Post Side Margin}px);{/block:ifLeftSidebar}
  714. {block:ifRightSidebar}left:calc(50% + (({text:Post Size}px - 4px + 2 * ({text:Post Side Padding}px + {text:Post Side Margin}px)) * {text:Number of Columns}) / 2 + 60px - {text:Post Side Margin}px);{/block:ifRightSidebar}
  715. {/block:IndexPage}
  716. margin-top:{text:Sidebar Top Margin}px;
  717. padding:10px;
  718. width:180px;
  719. z-index:9999;
  720. text-align:center;
  721. background:{color:Sidebar BG};
  722. }
  723.  
  724. #imgtitle {display:table; padding-bottom:5px;}
  725.  
  726. #sidebar a {color:{color:Navigation Links};}
  727. #sidebar a:hover {color:{color:Navigation Links Hover};}
  728.  
  729. #sidebar_image {width:64px; height:64px;}
  730. #sidebar_image img {max-width:75%; border-radius:{select:Sidebar Icon Shape}px;}
  731. #sidebar_image img:hover {opacity:.5;}
  732.  
  733. #sidebar_image, #title_container {display:table-cell; vertical-align:middle;}
  734.  
  735. #title_container {padding-left:10px; text-align:left;}
  736.  
  737. #title {
  738. text-transform:lowercase;
  739. font-weight:bold;
  740. font-size:14px;
  741. color:{color:Sidebar Title};
  742. }
  743.  
  744. #subtitle {
  745. text-transform:uppercase;
  746. margin-left:-4px;
  747. font-size:9px;
  748. }
  749.  
  750. #descr {padding:7px 0; font-style:italic; width:190px;}
  751.  
  752. #subdescr {padding:7px 0; border-top:1px solid #eee;}
  753.  
  754. #nav {padding-bottom:5px; font-style:italic;}
  755.  
  756. #nav a {display:inline-block; margin:4px 6px; text-decoration:none; color:#000;}
  757.  
  758. #navigation {padding:5px 0; font-style:italic;}
  759.  
  760. #prev, #next {display:inline-block;}
  761.  
  762. #like_reblog {
  763. position:absolute;
  764. right:20px;
  765. top:0;
  766. opacity:0;
  767. -webkit-transition-duration: .9s;
  768. -moz-transition-duration: .9s;
  769. -o-transition-duration: .9s;
  770. transition-duration: .9s;
  771. -webkit-transition-delay: 1s;
  772. -moz-transition-delay: 1s;
  773. -o-transition-delay: 1s;
  774. transition-delay: 1s;
  775. }
  776.  
  777. .posts:hover #like_reblog {
  778. right:-18px;
  779. opacity:1;
  780. -webkit-transition-delay: 0ms;
  781. -moz-transition-delay: 0ms;
  782. -o-transition-delay: 0ms;
  783. transition-delay: 0ms;
  784. }
  785.  
  786. .control {
  787. display:block;
  788. position:relative;
  789. color:{color:Like Reblog Buttons};
  790. }
  791.  
  792. .control a {color:{color:Like Reblog Buttons};}
  793. .control .like_button {font-size:12px; padding-bottom:3px;}
  794. .control .reblog_button {font-size:10px;}
  795. .control .like_button:hover,
  796. .control .reblog_button:hover {color:{color:Like Reblog Buttons Hover};}
  797. .control .like_button::before,
  798. .control .reblog_button::before {display:block; line-height:1;}
  799. .like_button.liked {color:{color:Like Button Liked};}
  800. .like_button.liked:hover {color:{color:Like Button Liked};}
  801. .like_button iframe {
  802. display:block;
  803. position:absolute;
  804. top:0;
  805. right:0;
  806. bottom:0;
  807. left:0;
  808. margin:0;
  809. opacity:0;
  810. }
  811.  
  812. #c img {height:100%; opacity:1;}
  813. #c img:hover {opacity:.6;}
  814. #c {
  815. position:fixed;
  816. z-index:9999999999999999999999999999;
  817. bottom:7px;
  818. right:7px;
  819. height:24px;
  820. }
  821.  
  822. .navi_linksu h3 {
  823. font-size:22px;
  824. margin-bottom:-5px;
  825. border:none;
  826. color: #fff; /*color of header*/
  827. font-family: 'selima';
  828. font-weight:normal;
  829. letter-spacing:1px;
  830. text-transform:lowercase;
  831. background:transparent;
  832. }
  833.  
  834. .navi_linksu {
  835. text-align:center;
  836. }
  837.  
  838. .navi_linksu a {
  839. display: inline-block;
  840. width: 120px;
  841. padding: 5px;
  842. margin:5px;
  843. font-size:11px;
  844. background-image: url('');
  845. background:#fff; /*color of navigation links background*/
  846. background-repeat:repeat;
  847. background-attachment:fixed;
  848. border: solid 1px #7c7c7c;
  849. color:#7c7c7c;
  850. font-family:calibri;
  851. text-transform:uppercase;
  852.  
  853.  
  854. }
  855.  
  856. .navi_linksu a:hover {
  857. -webkit-transition: all .5s ease-in-out;
  858. -moz-transition: all .5s ease-in-out;
  859. -ms-transition: all .5s ease-in-out;
  860. -o-transition: all .5s ease-in-out;
  861. transition: all .5s ease-in-out;
  862. background:#7c7c7c; /*background color of navi links on hover*/
  863. border: solid 1px #ccc;
  864. color:#ccc; /*color of links on hover*/
  865. }
  866.  
  867.  
  868. </style>
  869.  
  870. </head>
  871.  
  872. <body>
  873.  
  874. {block:ifFadeInOnRefresh}<script>document.body.className += ' fade-out';</script>{/block:ifFadeInOnRefresh}
  875.  
  876. <div id="sidebar">
  877. <div id="imgtitle">
  878. <div id="sidebar_image"><a href="/"><img src="{image:Sidebar Icon}"></a></div>
  879. <div id="title_container">
  880. <div id="title">{Title}</div>
  881. <div id="subtitle"><span style="font-size:8px;">「&nbsp;</span>{text:Sub Title}<span style="font-size:8px;">&nbsp;」</span></div>
  882. </div>
  883. </div>
  884.  
  885. <div id="descr_container">
  886. <div id="descr">{Description}</div>
  887. <div id="subdescr">{block:ifSecondDescription}{text:Second Description}{/block:ifSecondDescription}</div>
  888. </div>
  889.  
  890. <div id="nav">
  891. <a href="{text:Link 1 URL}">&nbsp;{text:Link 1}</a>
  892. <a href="{text:Link 2 URL}">&nbsp;{text:Link 2}</a>
  893. <a href="{text:Link 3 URL}">&nbsp;{text:Link 3}</a>
  894. <a href="{text:Link 4 URL}">&nbsp;{text:Link 4}</a>
  895. <a href="{text:Link 5 URL}">&nbsp;{text:Link 5}</a>
  896. <a href="{text:Link 6 URL}">&nbsp;{text:Link 6}</a>
  897. <a href="{text:Link 7 URL}">&nbsp;{text:Link 7}</a>
  898. </div>
  899.  
  900. {block:IfNotInfiniteScroll}
  901. {block:Pagination}
  902. <div id="navigation">
  903. <div id="prev">{block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage}</div>&nbsp;&mdash;&nbsp;
  904. <div id="next">{block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}</div>
  905. </div>
  906. {/block:Pagination}
  907. {/block:IfNotInfiniteScroll}
  908. </div>
  909.  
  910. <!-- posts container -->
  911.  
  912. <div id="posts_container">
  913.  
  914. <!-- posts -->
  915.  
  916. {block:Posts}
  917. <div class="posts" id="{PostID}">
  918. {block:Text}
  919. <div class="vertebrae">
  920. {block:Title}<div class="text_post_title"><a href="{Permalink}">&mdash;&nbsp;{Title}</a></div>{/block:Title}
  921. <div class="text appel">{Body}</div>
  922. </div>
  923. {/block:Text}
  924. {block:Link}
  925. <div class="vertebrae">
  926. <div class="text_post_title"><a href="{URL}">&mdash;&nbsp;{Name}</a></div>
  927. {block:Description}<div class="text appel">{Description}</div>{/block:Description}
  928. </div>
  929. {/block:Link}
  930. {block:Quote}
  931. <div class="vertebrae">
  932. <div id="quote_post" class="appel">
  933. <div id="quote_header">
  934. <span id="dash">&mdash;&nbsp;</span>
  935. <span id="quo_marks">&rdquo;</span>
  936. </div>
  937. {Quote}
  938. {block:Source}<div id="source" class="appel">&mdash;&nbsp;{Source}</div>{/block:Source}
  939. </div>
  940. </div>
  941. {/block:Quote}
  942. {block:Chat}
  943. <div class="vertebrae">
  944. {block:Title}<div class="text_post_title"><a href="{Permalink}">&mdash;&nbsp;{Title}</a></div>{/block:Title}
  945. <div id="chat" class="appel"><ul>{block:Lines}<li id="line">{block:Label}<span id="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul></div>
  946. </div>
  947. {/block:Chat}
  948. {block:Answer}
  949. <div class="vertebrae">
  950. <div id="ask_post" class="appel">
  951. <div id="asker_avatar"><img src="{AskerPortraitURL-30}"></div>
  952. <div id="asker"><span id="a">{Asker}</span> asked:</div>
  953. <div id="question">&mdash;&nbsp;{Question}</div>
  954. <div>{Answer}</div>
  955. </div>
  956. </div>
  957. {/block:Answer}
  958. {block:AudioPlayer}
  959. <div class="vertebrae">
  960. <div id="audio_player_container">
  961. <div id="album_art">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  962. <div id="audio_player_bg_container"><div id="audio_player_bg">{AudioPlayer}</div></div>
  963. <div id="track_details_container"><div id="track_details">
  964. {block:TrackName}<span id="track_name">{TrackName}</span>{/block:TrackName}<br/>
  965. {block:Artist}<span id="artist_name">{Artist}</span>{/block:Artist}<br/>
  966. </div></div>
  967. </div>
  968. {block:IfShowCaption}{block:Caption}<div class="audio appel">{Caption}</div>{/block:Caption}{/block:IfShowCaption}
  969. </div>
  970. {/block:AudioPlayer}
  971. {block:Photo}
  972. <div class="vertebrae">
  973. <div class="pancake">
  974. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  975. {block:IfShowCaption}{block:Caption}<div class="text appel">{Caption}</div>{/block:Caption}{/block:IfShowCaption}
  976. </div>
  977. </div>
  978. {/block:Photo}
  979. {block:Photoset}
  980. <div class="vertebrae">
  981. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  982. {block:Photos}
  983. <div class="photo-data">
  984. <div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div>
  985. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  986. </div>
  987. {/block:Photos}
  988. </div>
  989. {block:IfShowCaption}{block:Caption}<div class="text appel">{Caption}</div> {/block:Caption}{/block:IfShowCaption}
  990. </div>
  991. {/block:Photoset}
  992. {block:Video}
  993. <div class="vertebrae">
  994. <div class="video">{Video-500}</div>
  995. {block:IfShowCaption}{block:Caption}<div class="text appel">{Caption}</div>{/block:Caption}{/block:IfShowCaption}
  996. </div>
  997. {/block:Video}
  998. {block:Date}
  999.  
  1000. <!--
  1001. ♛ INFO AND SYMBOLS
  1002. -->
  1003.  
  1004. {block:Date}
  1005. <div id="info">
  1006. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithZero} - {TimeAgo}"
  1007. style="position:absolute; margin-left:15px; margin-top:4px;-webkit-transform: rotate(-20deg);-ms-transform: rotate(-20deg);transform: rotate(-20deg);"> ★ </a>
  1008. <a href="{Permalink}" title="{NoteCountWithLabel} {DayOfMonthWithZero} - {TimeAgo}"
  1009. style=" position:absolute; margin-left:-5px; margin-top:5px;font-size:25px;-webkit-transform: rotate(-20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);"> ★ </a>
  1010. <a href="{ReblogURL}" target="_blank" class="details" title="Reblog"
  1011. style=" position:absolute; margin-left:10px; margin-top:20px;-webkit-transform: rotate(-50deg);-ms-transform: rotate(-50deg);transform:rotate(-50deg);"> ★ </a>
  1012. </div>
  1013. {/block:Date}
  1014.  
  1015.  
  1016.  
  1017.  
  1018.  
  1019. <br>
  1020.  
  1021.  
  1022. <!--
  1023. ♛ INFO AND SYMBOLS ENDS
  1024. -->
  1025.  
  1026.  
  1027. <div id="tags" style="margin-bottom:50px;margin-left:30px">{block:HasTags}{block:Tags} • <a href="{TagURL}" title="{Tag}">{Tag}</a>{/block:Tags}{/block:HasTags}</div>{/block:Posts}</div>
  1028.  
  1029. </div>
  1030. </div>
  1031. </div>
  1032.  
  1033.  
  1034. </div>
  1035.  
  1036. {block:IndexPage}
  1037. {block:ifInfiniteScroll}
  1038. <div class="navigation" id="navigation">
  1039. {block:Pagination}
  1040. {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  1041. {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}
  1042. {/block:Pagination}
  1043. </div>
  1044. {/block:IfInfiniteScroll}
  1045. {/block:IndexPage}
  1046.  
  1047. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  1048.  
  1049. <div id="notecontainer" class="appel">{PostNotes-16}</div>
  1050.  
  1051. {/block:Posts}
  1052. <!-- end posts -->
  1053.  
  1054. </div>
  1055. <!-- end posts container-->
  1056.  
  1057. <div id="scrolltotop">back to top</div>
  1058.  
  1059. <!-- scripts -->
  1060.  
  1061. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  1062. <script>
  1063. var p = $("#sidebar");
  1064. var offset = p.offset();
  1065. if (offset.left < 0) {
  1066. $('#sidebar').css({"left":"0"})
  1067. }
  1068. </script>
  1069. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script><script src="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>{block:IndexPage}<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>{block:ifInfiniteScroll}<script src="http://static.tumblr.com/0cdn90j/vsOo9wcfa/infinitescroll.js"></script>{/block:ifInfiniteScroll}{/block:IndexPage}
  1070. <script>
  1071. $(document).ready(function(){
  1072. $('.photo-slideshow').pxuPhotoset({
  1073. lightbox:true,
  1074. rounded:false,
  1075. gutter:'{select:Photoset Gutter}px',
  1076. photoset:'.photo-slideshow',
  1077. photoWrap:'.photo-data',
  1078. photo:'.pxu-photo'
  1079. });
  1080. {block:IndexPage}
  1081. var $container = $('#posts_container');
  1082. $container.masonry({itemSelector:'.posts'});
  1083. $container.imagesLoaded(function(){
  1084. $container.masonry();
  1085. $container.find('.posts').animate({opacity:1, zIndex:1});
  1086. });
  1087. {block:ifInfiniteScroll}
  1088. $container.infinitescroll({
  1089. itemSelector:'.posts',
  1090. navSelector:'#navigation',
  1091. nextSelector:'#navigation a#nextPage',
  1092. loadingImg:'',
  1093. loadingText:'<em></em>',
  1094. bufferPx:2000
  1095. },
  1096. function (newElements){
  1097. var $newElems = $(newElements);
  1098. resizeVideos();
  1099. var $newElemsIDs = $newElems.map(function(){
  1100. return this.id;
  1101. }).get();
  1102. console.log($newElems, $newElemsIDs);
  1103. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  1104. $newElems.find('.photo-slideshow').pxuPhotoset({
  1105. lightbox:true,
  1106. rounded:false,
  1107. gutter:'{select:Photoset Gutter}px',
  1108. photoset:'.photo-slideshow',
  1109. photoWrap:'.photo-data',
  1110. photo:'.pxu-photo'
  1111. },
  1112. function(){
  1113. $container.masonry();
  1114. });
  1115. $newElems.imagesLoaded(function(){
  1116. $container.masonry('appended', $newElems);
  1117. $newElems.animate({opacity:1, zIndex:1});
  1118. });
  1119. });
  1120. {/block:ifInfiniteScroll}
  1121. {/block:IndexPage}
  1122. });
  1123. </script>
  1124. <script type="text/javascript">
  1125. $(document).ready(function(){
  1126. $(window).scroll(function(){
  1127. if ($(this).scrollTop() > 400) {
  1128. $('#scrolltotop').stop().animate({right:'0px'});
  1129. }
  1130. else {
  1131. $('#scrolltotop').stop().animate({right:'-85px'});
  1132. }
  1133. });
  1134. $('#scrolltotop').click(function(){
  1135. $("html, body").animate({scrollTop:0}, 800);
  1136. return false;
  1137. });
  1138. });
  1139. </script>
  1140. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script><script src="http://static.tumblr.com/0cdn90j/glvnidntk/jquery.style-my-tooltips.js"></script><div id="c"><a href="http://felinum.tumblr.com" title="theme by felinum"><img src="http://static.tumblr.com/0cdn90j/ZjQobhv98/snowshoe-cat.png"></a></div>
  1141. <script>
  1142. (function($){
  1143. $(document).ready(function(){
  1144. $("[title]").style_my_tooltips({
  1145. tip_follows_cursor:true,
  1146. tip_delay_time:0,
  1147. tip_fade_speed:0,
  1148. attribute:"title"
  1149. });
  1150. });
  1151. })(jQuery);
  1152. </script>
  1153. <script>
  1154. $(function() {
  1155. $('body').removeClass('fade-out');
  1156. });
  1157. </script>
  1158.  
  1159. </body>
  1160.  
  1161. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement