mistletoe

03 - across the sea (snow)

Dec 26th, 2018 (edited)
1,752
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.59 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6. <!--------------------------------------------------------------------------
  7. ============================================================================
  8. ============================================================================
  9.  
  10.  
  11. ╭━╮╭━┳━━┳━━━┳━━━━┳╮╱╱╭━━━┳━━━━┳━━━┳━━━╮
  12. ┃┃╰╯┃┣┫┣┫╭━╮┃╭╮╭╮┃┃╱╱┃╭━━┫╭╮╭╮┃╭━╮┃╭━━╯
  13. ┃╭╮╭╮┃┃┃┃╰━━╋╯┃┃╰┫┃╱╱┃╰━━╋╯┃┃╰┫┃╱┃┃╰━━╮
  14. ┃┃┃┃┃┃┃┃╰━━╮┃╱┃┃╱┃┃╱╭┫╭━━╯╱┃┃╱┃┃╱┃┃╭━━╯
  15. ┃┃┃┃┃┣┫┣┫╰━╯┃╱┃┃╱┃╰━╯┃╰━━╮╱┃┃╱┃╰━╯┃╰━━╮
  16. ╰╯╰╯╰┻━━┻━━━╯╱╰╯╱╰━━━┻━━━╯╱╰╯╱╰━━━┻━━━╯
  17.  
  18.  
  19. ============================================================================
  20.  
  21. theme by merc
  22. mistletoe / badwolf
  23.  
  24. ============================================================================
  25. ============================================================================
  26.  
  27. - poppins by india type foundry
  28. - open sans by steve matteson
  29. - honeybee icon font by sol (suiomi)
  30. - http://suiomi.com
  31. - tumblr controls by cyntists
  32. - http://cyantists.tumblr.com
  33.  
  34. ============================================================================
  35.  
  36. REGARDING THIS THEME:
  37.  
  38. - please do not:
  39.  
  40. - replicate / reproduce
  41. - use as "inspiration"
  42. - frankenstein
  43. i.e. pick apart and use on your theme
  44. - steal the code
  45.  
  46. ============================================================================
  47.  
  48. basically, don't be /that/ asshole, alright? thanks.
  49.  
  50. ============================================================================
  51. ============================================================================
  52. --------------------------------------------------------------------------->
  53.  
  54.  
  55.  
  56. <link rel="shortcut icon" href="{favicon}">
  57. <title>{block:PostTitle}{PostTitle} : {/block:PostTitle}{Title}</title>
  58. <link rel="shortcut icon" href="{Favicon}">
  59. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  60. {block:Description}
  61. <meta name="description" content="{MetaDescription}" />
  62. {/block:Description}
  63.  
  64. <!-- META TAGS -->
  65.  
  66. <meta name="color:Background" content="#f6f6f6"/>
  67. <meta name="color:Text" content="#909090"/>
  68. <meta name="color:Link" content="#a7a7a7"/>
  69. <meta name="color:Blog Title"content="#616161"/>
  70. <meta name="color:Title"content="#909090"/>
  71. <meta name="color:Accent" content="#a6c9ca">
  72. <meta name="color:Sidebar" content="#fff">
  73.  
  74. <meta name="image:Background" content=""/>
  75. <meta name="image:Icon" content="https://i.postimg.cc/rshg2p6y/2.png"/>
  76.  
  77. <meta name="select:Font Size" content="9px">
  78. <meta name="select:Font Size" content="10px">
  79. <meta name="select:Font Size" content="11px">
  80. <meta name="select:Font Size" content="12px">
  81. <meta name="select:Font Size" content="13px">
  82. <meta name="select:Font Size" content="14px">
  83.  
  84.  
  85. <meta name="select:Text Align" content="justify"/>
  86. <meta name="select:Text Align" content="left"/>
  87. <meta name="select:Text Align" content="right"/>
  88. <meta name="select:Text Align" content="center"/>
  89.  
  90. <meta name="select:Sidebar Position" content="fixed"/>
  91. <meta name="select:Sidebar Position" content="static"/>
  92.  
  93. <meta name="select:Post" content="300px">
  94. <meta name="select:Post" content="350px">
  95. <meta name="select:Post" content="400px">
  96. <meta name="select:Post" content="450px">
  97. <meta name="select:Post" content="500px">
  98.  
  99. <meta name="text:Link 1" content="">
  100. <meta name="text:Link 1 Title" content="link 1">
  101.  
  102. <meta name="text:Link 2" content="/ask">
  103. <meta name="text:Link 2 Title" content="message">
  104.  
  105. <meta name="text:Link 3" content="">
  106. <meta name="text:Link 3 Title" content="navigation">
  107.  
  108. <meta name="text:Link 4" content="http://mistletoe.tumblr.com">
  109. <meta name="text:Link 4 Title" content="mistletoe themes">
  110.  
  111. <!-- SCRIPTS -->
  112.  
  113. <!-- SNOW FALL / DELETE THIS IF YOU DON'T WANT IT -->
  114.  
  115. <!--Simply copy and paste into <BODY>
  116. Just above the </BODY> tag. -->
  117.  
  118. <SCRIPT type="text/javascript">
  119. /*
  120. Snow Fall 1 - no images - Java Script
  121. Visit http://rainbow.arch.scriptmania.com/scripts/
  122. for this script and many more
  123. */
  124.  
  125. // Set the number of snowflakes (more than 30 - 40 not recommended)
  126. var snowmax=35
  127.  
  128. // Set the colors for the snow. Add as many colors as you like
  129. var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")
  130.  
  131. // Set the fonts, that create the snowflakes. Add as many fonts as you like
  132. var snowtype=new Array("Times","Arial","Times","Verdana")
  133.  
  134. // Set the letter that creates your snowflake (recommended: * )
  135. var snowletter="*"
  136.  
  137. // Set the speed of sinking (recommended values range from 0.3 to 2)
  138. var sinkspeed=0.6
  139.  
  140. // Set the maximum-size of your snowflakes
  141. var snowmaxsize=30
  142.  
  143. // Set the minimal-size of your snowflakes
  144. var snowminsize=8
  145.  
  146. // Set the snowing-zone
  147. // Set 1 for all-over-snowing, set 2 for left-side-snowing
  148. // Set 3 for center-snowing, set 4 for right-side-snowing
  149. var snowingzone=1
  150.  
  151. ///////////////////////////////////////////////////////////////////////////
  152. // CONFIGURATION ENDS HERE
  153. ///////////////////////////////////////////////////////////////////////////
  154.  
  155.  
  156. // Do not edit below this line
  157. var snow=new Array()
  158. var marginbottom
  159. var marginright
  160. var timer
  161. var i_snow=0
  162. var x_mv=new Array();
  163. var crds=new Array();
  164. var lftrght=new Array();
  165. var browserinfos=navigator.userAgent
  166. var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
  167. var ns6=document.getElementById&&!document.all
  168. var opera=browserinfos.match(/Opera/)
  169. var browserok=ie5||ns6||opera
  170.  
  171. function randommaker(range) {
  172. rand=Math.floor(range*Math.random())
  173. return rand
  174. }
  175.  
  176. function initsnow() {
  177. if (ie5 || opera) {
  178. marginbottom = document.body.scrollHeight
  179. marginright = document.body.clientWidth-15
  180. }
  181. else if (ns6) {
  182. marginbottom = document.body.scrollHeight
  183. marginright = window.innerWidth-15
  184. }
  185. var snowsizerange=snowmaxsize-snowminsize
  186. for (i=0;i<=snowmax;i++) {
  187. crds[i] = 0;
  188. lftrght[i] = Math.random()*15;
  189. x_mv[i] = 0.03 + Math.random()/10;
  190. snow[i]=document.getElementById("s"+i)
  191. snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
  192. snow[i].size=randommaker(snowsizerange)+snowminsize
  193. snow[i].style.fontSize=snow[i].size+'px';
  194. snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
  195. snow[i].style.zIndex=1000
  196. snow[i].sink=sinkspeed*snow[i].size/5
  197. if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
  198. if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
  199. if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
  200. if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
  201. snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
  202. snow[i].style.left=snow[i].posx+'px';
  203. snow[i].style.top=snow[i].posy+'px';
  204. }
  205. movesnow()
  206. }
  207.  
  208. function movesnow() {
  209. for (i=0;i<=snowmax;i++) {
  210. crds[i] += x_mv[i];
  211. snow[i].posy+=snow[i].sink
  212. snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
  213. snow[i].style.top=snow[i].posy+'px';
  214.  
  215. if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
  216. if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
  217. if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
  218. if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
  219. if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
  220. snow[i].posy=0
  221. }
  222. }
  223. var timer=setTimeout("movesnow()",50)
  224. }
  225.  
  226. for (i=0;i<=snowmax;i++) {
  227. document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
  228. }
  229. if (browserok) {
  230. window.onload=initsnow
  231. }
  232.  
  233. </script>
  234.  
  235.  
  236. <!-- END SNOW FALL -->
  237.  
  238. <script type='text/javascript' src='//files.jcink.net/html/jquery-1.7.2.min.js'></script>
  239.  
  240. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  241.  
  242. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Poppins:400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
  243. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  244. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  245.  
  246. <!--- TOOLTIPS --->
  247. <script src="//dl.dropbox.com/s/4jdfup6iccopmej/smt.js"></script>
  248.  
  249. <script>
  250. (function($){
  251. $(document).ready(function(){
  252. $("[title]").style_my_tooltips({
  253. tip_follows_cursor:true,
  254. tip_delay_time:130,
  255. tip_fade_speed:130,
  256. attribute:"title"
  257. });
  258. });
  259. })(jQuery);
  260. </script>
  261.  
  262.  
  263. </head>
  264.  
  265.  
  266. <style type="text/css">
  267.  
  268. /* SCROLLBAR */
  269.  
  270. ::-webkit-scrollbar {
  271. width: 11px;
  272. height: 11px;
  273. background-color: #e6e6e6;
  274. }
  275.  
  276. ::-webkit-scrollbar-thumb {
  277. background-color: {color:Accent};
  278. }
  279.  
  280. ::-webkit-scrollbar,
  281. ::-webkit-scrollbar-thumb {
  282. border: 5px solid #ffffff;
  283. }
  284.  
  285.  
  286. ::selection {
  287. background: {color:Accent};
  288. color: #fff;
  289. }
  290. ::-moz-selection {
  291. background: {color:Accent};
  292. color: #fff;
  293. }
  294.  
  295. #s-m-t-tooltip{
  296. max-width:300px;
  297. z-index:10000000000000000000000000000000000;
  298. margin: 15px;
  299. padding: 5px;
  300. background: {color:Accent};
  301. font-family: poppins;
  302. font-size: 11px;
  303. text-transform: lowercase;
  304. font-weight: 500;
  305. color: {color:Sidebar};
  306. border: 1px solid {color:Sidebar};
  307. letter-spacing: 2px;
  308. }
  309.  
  310. #credit {
  311. position: fixed;
  312. right: 10px;
  313. bottom: 10px;
  314. font-size: 16px;
  315. background-color: #fff;
  316. width: 16px;
  317. height: 16px;
  318. line-height: 16px;
  319. text-align: center;
  320. padding: 10px;
  321. border-radius: 10px;
  322. transition-duration: 0.5s;
  323. }
  324. #credit:hover {
  325. border-radius: 1px;
  326. }
  327. #credit a {
  328. display: block;
  329. color: {color:Accent};
  330. }
  331. #credit a:hover {
  332. -webkit-animation: tada 0.8s infinite;
  333. }
  334.  
  335. body {
  336. background-image: url('{image:Background}');
  337. background-color: {color:Background};
  338. font: {select:Font Size} 'poppins';
  339. color: {color:Text};
  340. text-align: left;
  341. }
  342.  
  343. a {
  344. color: {color:Link};
  345. text-decoration: none;
  346. transition-duration: 0.5s;
  347. }
  348.  
  349. a:hover {
  350. color:{color:Link Hover};
  351. }
  352. *, body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto !important;}
  353.  
  354. #sidebar {
  355. width: 230px;
  356. background-color: {color:sidebar};
  357. float: left;
  358. position: {select:Sidebar Position};
  359. z-index: 999;
  360. margin-right: 50px;
  361. }
  362. #sidebar .links {
  363. font: 9pt 'poppins';
  364. font-weight: bold;
  365. text-align: center;
  366. display: flex;
  367. align-items: stretch;
  368. justify-content: space-around;
  369. padding-top: 15px;
  370. padding-bottom: 15px;
  371. border-bottom: 1px solid {color:Background};
  372. }
  373. #sidebar .links a {
  374. color: {color:Accent};
  375. display: block;
  376. flex: 1 auto;
  377. }
  378. #sidebar .links a:hover {
  379.  
  380. -webkit-animation: tada 0.8s infinite;
  381. }
  382. #sidebar .sbtitle {
  383. font: 9px 'poppins';
  384. font-weight: bold;
  385. text-transform: uppercase;
  386. text-align: center;
  387. letter-spacing: 1.5px;
  388. color: {color:Blog Title};
  389. padding: 0px 3px;
  390. }
  391. #sidebar .sbbar {
  392. height: 1px;
  393. width: 100px;
  394. margin: 10px auto;
  395. background-color: {color:Accent};
  396. }
  397. #sidebar .icon {
  398. overflow: hidden;
  399. border-radius: 100px;
  400. margin: auto;
  401. width: 50px;
  402. height: 50px;
  403. border: 5px solid {color:Background};
  404. margin: 40px auto 15px;
  405. background-size: cover;
  406. background-image:url({image:Icon});
  407. }
  408. #sidebar .desc {
  409. font-family: open sans;
  410. padding: 20px 50px 40px;
  411. text-align: {select:Text Align};
  412. line-height: 150%;
  413. font-size: {select:Font Size};
  414. letter-spacing: 1px;
  415. }
  416. #sidebar i {
  417. color: {color:Accent};
  418. }
  419. b {
  420. color: {color:Accent};
  421. font-family: poppins;
  422. text-transform: uppercase;
  423. font-size: 7px;
  424. letter-spacing: 2px;
  425. }
  426. u {
  427. text-decoration: none;
  428. border-bottom: 2px solid {color:Accent};
  429. }
  430. #wrapper {
  431. width: calc(300px + {select:Post});
  432. margin: 100px auto;
  433. }
  434. .nav {
  435. display:block;
  436. margin-top:10px;
  437. text-align:center;
  438. }
  439.  
  440. .nav a {
  441. display:inline-block;
  442. }
  443.  
  444. .nav a:hover {
  445. font-style:italic;
  446. text-decoration:underline;
  447. }
  448.  
  449. blockquote {
  450. display: block;
  451. margin-block-start: 20px;
  452. margin-block-end: 20px;
  453. margin-inline-start: 20px;
  454. margin-inline-end: 20px;
  455. }
  456.  
  457.  
  458. #pagination {
  459. color: {color:link};
  460. display:block;
  461. {block:ifInfiniteScroll}
  462. display:none;
  463. {/block:ifInfiniteScroll}
  464. text-align: center;
  465. padding: 10px;
  466. font: 9px 'poppins';
  467. letter-spacing: 1px;
  468. border-top: 1px solid {color:Background};
  469. }
  470.  
  471. #pagination a {
  472. color: {color:Text};
  473. }
  474. .current_page {
  475. font-weight:bold;
  476. color:{color:title};
  477. }
  478.  
  479. #infscr-loading {
  480. display:none!important;
  481. }
  482.  
  483. /* POSTS */
  484.  
  485. section {
  486. width: 500px;
  487. margin: 0px auto 100px auto;
  488. }
  489.  
  490. #posts {
  491. width: {select:Post}!important;
  492. margin-left: 300px;
  493. {PermalinkPage}
  494. width: 500px;
  495. {/PermalinkPage}
  496. }
  497.  
  498. article {
  499. margin-bottom:100px;
  500. }
  501.  
  502. .caption {
  503. background-color: {color:Sidebar};
  504. padding: 25px;
  505. font-family: open sans;
  506. font-size: 11px;
  507. line-height: 125%;
  508. }
  509. .text, .quote {
  510. background-color: {color:Sidebar};
  511. padding: 15px;
  512. font-family: open sans;
  513. font-size: 11px;
  514. line-height: 125%;
  515. justify-content: space-between;
  516. }
  517. .quote {
  518. display: flex;
  519. align-items: center;
  520. flex-wrap: wrap;
  521. }
  522. .quote .qq {
  523. display: block;
  524. flex: 1 80%;
  525. text-align: center;
  526. }
  527. .quote .th {
  528. font-size: 25px;
  529. color: {color:Accent};
  530. padding: 10px;
  531. display: block;
  532. flex: 1;
  533. }
  534. .quote .qs {
  535. flex: 1 100%;
  536. display: block;
  537. padding: 10px 20px;
  538. font-style: italic;
  539. }
  540. .quote .th:first-child {
  541. align-self: flex-start;
  542. }
  543. .quote .th:nth-child(2) {
  544. align-self: flex-end;
  545. }
  546. /* PHOTO */
  547.  
  548. .photo {
  549. position: relative;
  550. overflow: hidden;
  551. }
  552.  
  553. .photo img {
  554. width: 100%;
  555. display: block;
  556. }
  557.  
  558. /* TITLES */
  559.  
  560. .title {
  561. font-size: 14px;
  562. }
  563.  
  564. .title a {
  565. color: {color:Title};
  566. }
  567.  
  568. .title a:hover {
  569. color: {color:Link};
  570. }
  571.  
  572. .question {
  573. background-color: {color:Sidebar};
  574. padding: 15px;
  575. font: 14px 'poppins';
  576. text-align: justify;
  577. }
  578. .question .inner {
  579. padding: 25px;
  580. border-radius: 5px;
  581. overflow: hidden;
  582. background-color: {color:Background};
  583. color: {color:text};
  584. display: flex;
  585. justify-content: space-between;
  586. align-items: center;
  587. }
  588. .question img {
  589. float: left;
  590. border-radius: 100px;
  591. width: 25px;
  592. height: 25px;
  593. overflow: hidden;
  594. border: 5px solid {color:Sidebar};
  595. margin-right: 15px;
  596. max-width: 25px;
  597. max-height: 25px;
  598. flex: 1;
  599. }
  600. .question .qtext {
  601. flex: 1 auto;
  602. }
  603. .question .qtext a {
  604. font-weight: bold;
  605. letter-spacing: 1px;
  606. border-bottom: 3px solid {color:Accent};
  607. text-transform: uppercase;
  608. font: 10px 'poppins';
  609. color: {color:Blog Title};
  610. }
  611. .answer {
  612. padding: 5px 45px 25px;
  613. background-color: {color:Sidebar};
  614. padding-top: 5px;
  615. margin-top: 0px;
  616. }
  617. .ask {
  618. text-transform:lowercase;
  619. }
  620.  
  621. .ask a {
  622. color:{color:text};
  623. }
  624.  
  625. .ask a:hover {
  626. color:{color:link hover};
  627. }
  628.  
  629.  
  630. .postbot {
  631. margin-top:15px;
  632. text-align:center;
  633. }
  634. .post {
  635. background-color: {color:Sidebar};
  636. }
  637. .postbot span {
  638. display:block;
  639. }
  640. .postbot .postdate {
  641. text-transform: uppercase;
  642. letter-spacing: 3px;
  643. font-size: 8px;
  644. font-family: poppins;
  645. color: {color:Accent};
  646. font-weight: 600;
  647. }
  648. .postbot .postdate a {
  649. color: {color:Accent};
  650. }
  651.  
  652. .pagenotes {
  653. margin-top:-50px;
  654. text-align:center;
  655. }
  656.  
  657. ol.notes {
  658. text-align:left;
  659. list-style-type:none;
  660. padding:0px;
  661. margin:0px;
  662. font-size: 11px;
  663. }
  664. ol.notes a {
  665. color: {color:Accent};
  666. }
  667. ol.notes li.note {
  668. display:block;
  669. padding:0;
  670. margin:5px 0;
  671. }
  672.  
  673. ol.notes li.note img.avatar {
  674. display:none!important;
  675. }
  676.  
  677. a.more_notes_link {
  678. display:block;
  679. text-align:center;
  680. color:{color:title};
  681. }
  682.  
  683. .tags {
  684. margin-top:.5em;
  685. }
  686.  
  687. .tags a {
  688. font-style:italic;
  689. color:{color:text};
  690. display:inline;
  691. margin:0 2.5px;
  692. overflow-wrap: break-word;
  693. }
  694. #audio {
  695. width:100%;
  696. height:auto;
  697. min-height:60px;
  698. padding-bottom:0px;
  699. }
  700.  
  701. .cover {
  702. position:absolute;
  703. z-index:1;
  704. width:60px;
  705. height:60px;
  706. }
  707.  
  708. .cover img {
  709. float:left;
  710. width:60px;
  711. height:60px;
  712. }
  713.  
  714. .playbox {
  715. opacity:0.6;
  716. width:32px;
  717. height:34px;
  718. overflow:hidden;
  719. position:absolute;
  720. z-index:1000;
  721. margin-left:15px;
  722. margin-top:15px;
  723. text-align:center;
  724. }
  725.  
  726. .info {
  727. margin-left:73px;
  728. margin-top:6px;
  729. line-height:14px;
  730. }
  731.  
  732. .chat, .chat ol{
  733. margin-left:-20px;
  734. list-style:none;
  735. }
  736. .line{
  737. padding:6px;
  738. }
  739. .odd{
  740. background:#f9f9f9;
  741. color:{color:Link};
  742. }
  743. span.label{
  744. font-weight:bold;
  745. text-transform:uppercase;
  746. }
  747.  
  748. .photoset {
  749. width:{select:Post}!important;
  750. }
  751.  
  752. .photoset img {
  753. width:100%;
  754. }
  755. .post.link {
  756. background-color: {color:Sidebar};
  757. padding: 10px;
  758. }
  759. .post.link a {
  760. color: {color:Sidebar Title};
  761. font: 20px 'poppins';
  762. text-align: center;
  763. display: block;
  764. font-weight: 600;
  765. }
  766. .postTop {
  767. padding: 15px 15px 11px;
  768. display: flex;
  769. background-color: {color:Sidebar};
  770. border-bottom: 1px solid {color:Background};
  771. align-items: center;
  772. justify-content: space-between;
  773. }
  774. .postTop .postLeft {
  775. font: 11px 'poppins';
  776. text-transform: lowercase;
  777. color: {color:Text};
  778. text-align: left;
  779. flex: 1 auto;
  780. }
  781. .postTop .postRight {
  782. text-align: right;
  783. line-height: 11px;
  784. flex: 1;
  785. }
  786. .reblog_button, .like_button {
  787. float: right;
  788. }
  789. #like_wrapper {
  790. display: inline-block !important;
  791. width: 10px;
  792. height: 20px;
  793. }
  794. .like_button {
  795. margin-top: -2px;
  796. margin-left: 10px;
  797. }
  798.  
  799. iframe.tmblr-iframe {
  800. opacity:0;
  801. display:none!important;}
  802.  
  803. .ccontrols {
  804. position:fixed;
  805. top:0;
  806. right:0;
  807. z-index:9999999999999;
  808. margin:4px;}
  809.  
  810. .ccontrols a {
  811. display:block;
  812. float:left;
  813. margin:4px!important;
  814. width:13px;
  815. height:13px;
  816. background:#f8f8f8;/* change this to change the background of the links */
  817. padding:5px;
  818. line-height:1!important;}
  819.  
  820. .ccontrols a svg {
  821. width:13px;
  822. height:13px;}
  823.  
  824. .ccontrols a svg path {
  825. fill:#888888;/* change this to change the color of the links */
  826. transition:all 0.6s ease-in-out;
  827. -webkit-transition:all 0.6s ease-in-out;
  828. -o-transition:all 0.6s ease-in-out;
  829. -moz-transition:all 0.6s ease-in-out;
  830. -ms-transition:all 0.6s ease-in-out;}
  831.  
  832. .ccontrols a:hover svg path {
  833. fill:#cccccc;/* change this to change the color of the links on hover*/
  834. transition:all 0.6s ease-in-out;
  835. -webkit-transition:all 0.6s ease-in-out;
  836. -o-transition:all 0.6s ease-in-out;
  837. -moz-transition:all 0.6s ease-in-out;
  838. -ms-transition:all 0.6s ease-in-out;}
  839.  
  840. {block:PermalinkPage}a.clike {
  841. position:relative;
  842. display:inline-block;}
  843.  
  844. a.clike .like_button {
  845. position:relative!important;}
  846.  
  847. a.clike .like_button iframe {
  848. position:absolute!important;
  849. top:0!important;
  850. left:0!important;
  851. z-index:2!important;
  852. opacity:0.0000001!important;
  853. width:100%!important;
  854. height:100%!important;}
  855.  
  856. a.clike .liked + svg path {
  857. fill:red!important;}{/block:PermalinkPage}
  858. {CustomCSS}
  859.  
  860. </style>
  861.  
  862.  
  863. <body>
  864.  
  865. <div id="credit">
  866. <a href="http://mistletoe.tumblr.com" title="mistletoe themes"><span class="th th-shooting-star-o"></span></a>
  867. </div>
  868.  
  869. <div id="wrapper">
  870. <div id="sidebar">
  871.  
  872. <div class="links">
  873. <a href="{text:Link 1}" title="{text:Link 1 Title}">.01</a>
  874. <a href="{text:Link 2}" title="{text:Link 2 Title}">.02</a>
  875. <a href="{text:Link 3}" title="{text:Link 3 Title}">.03</a>
  876. <a href="{text:Link 4}" title="{text:Link 4 Title}">.04</a>
  877. </div>
  878.  
  879. <div class="icon"></div>
  880.  
  881. <div class="sbtitle">{Title}</div><div class="sbbar"></div>
  882.  
  883. {block:Description}
  884. <div class="desc">{Description}</div>
  885. {/block:Description}
  886.  
  887. <div id="pagination">
  888. {block:Pagination}
  889. {block:PreviousPage}
  890. <a href="{PreviousPage}">previous</a> •
  891. {/block:PreviousPage}
  892.  
  893.  
  894. {block:NextPage}
  895. <a href="{NextPage}">next</a>
  896. {/block:NextPage}
  897. {/block:Pagination}
  898. </div>
  899.  
  900. </div>
  901.  
  902. <section id="posts">{block:posts}
  903. <article>
  904. <div class="postTop">
  905. <div class="postLeft">
  906. {block:NoteCount}<a href="{permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  907. </div>
  908. <div class="postRight">
  909. {LikeButton size="13" color="grey"}
  910. {ReblogButton size="13" color="grey"}
  911. </div>
  912. </div>
  913.  
  914. {block:Text}
  915.  
  916. <div class="post text">
  917. {block:Title}
  918. <div class="title">
  919. <a href="{Permalink}">{Title}</a>
  920. </div>
  921. {/block:Title}{Body}
  922. </div>
  923.  
  924. {/block:Text}
  925.  
  926. {block:Photo}
  927. <div class="post photo">
  928. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  929.  
  930. {block:Caption}
  931. <div class="caption">{Caption}</div>
  932. {/block:Caption}
  933. </div>
  934. {/block:Photo}
  935.  
  936. {block:Panorama}
  937. <div class="post panorama">
  938. {LinkOpenTag}
  939. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  940. {LinkCloseTag}
  941. {block:Caption}
  942. <div class="caption">{Caption}</div>
  943. {/block:Caption}
  944. </div>
  945. {/block:Panorama}
  946.  
  947. {block:Photoset}
  948. <div class="post photoset">
  949. {Photoset-500}
  950. {block:Caption}
  951. <div class="caption">{Caption}</div>
  952. {/block:Caption}
  953. </div>
  954. {/block:Photoset}
  955.  
  956. {block:Quote}
  957. <div class="post quote">
  958. <span class="th th-quote-up-o"></span><span class="qq">{Quote}</span><span class="th th-quote-down-o"></span>
  959.  
  960. {block:Source}
  961. <div class="qs"> &mdash; {Source}</div>
  962. {/block:Source}
  963. </div>
  964. {/block:Quote}
  965.  
  966. {block:Link}
  967. <div class="post link">
  968. <a href="{URL}" class="title" {Target}>{Name}</a>
  969.  
  970. {block:Description}
  971. <div class="description">{Description}</div>
  972. {/block:Description}
  973. </div>
  974. {/block:Link}
  975.  
  976. {block:Chat}
  977. <div class="post chat">
  978. {block:Title}
  979. <h3><a href="{Permalink}">{Title}</a></h3>
  980. {/block:Title}
  981.  
  982. <ul class="chat">
  983. {block:Lines}
  984. <div class="{Alt} user_{UserNumber}">
  985. {block:Label}
  986. <span class="label">{Label}</span>
  987. {/block:Label}{Line}
  988. </div>
  989. {/block:Lines}
  990. </ul>
  991. </div>
  992. {/block:Chat}
  993.  
  994. {block:Video}
  995. <div class="post video">
  996. {Video-500}{block:Caption}
  997. <div class="caption">{Caption}</div>
  998. {/block:Caption}
  999. </div>
  1000. {/block:Video}
  1001.  
  1002. {block:Audio}
  1003. <div id="audio">
  1004. <div class="cover">
  1005. <img src="http://static.tumblr.com/k9utpfa/tcom8wpif/default_cover_m.jpg">
  1006. </div>
  1007. {block:AlbumArt}
  1008. <div class="cover">
  1009. <img src="{AlbumArtURL}">
  1010. </div>
  1011. {/block:AlbumArt}
  1012. <div class="playbox">
  1013. {block:AudioPlayer}
  1014. {AudioPlayerWhite}
  1015. {/block:AudioPlayer}
  1016. </div>
  1017. <div class="info">
  1018. <b>Title :</b> <span{block:TrackName} style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
  1019. <b>Artist :</b>
  1020. <span{block:Artist} style="display:none;"
  1021. {/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
  1022. <b>Album :</b> <span{block:Album} style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}
  1023. {block:PlayCount}<br><b>Playcount :</b> {FormattedPlayCount}{/block:PlayCount}
  1024. </div></div>
  1025. {/block:Audio}
  1026.  
  1027. {block:Answer}
  1028. <div class="question"><div class="inner">
  1029. <img src="{AskerPortraitURL-128}"/>
  1030. <div class="qtext">{Asker}: {question}</div>
  1031. </div></div>
  1032. {block:Answerer}
  1033. <div class="answer">
  1034. <div class="user">{answerer} replied:</div>
  1035. {answer}
  1036. </div>
  1037. {/block:Answerer}
  1038. {block:NotReblog}
  1039. <div class="answer">
  1040. {replies}
  1041. </div>
  1042. {/block:NotReblog}
  1043. {block:RebloggedFrom}
  1044. {block:Reblogs}
  1045. <li class="answer">
  1046. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  1047. {body}
  1048. </li>
  1049. {/block:Reblogs}
  1050. {/block:RebloggedFrom}
  1051. {/block:Answer}
  1052.  
  1053. {block:Date}
  1054. <div class="postbot">
  1055. <span class="postdate"><a href="{permalink}">{dayofmonth} {month} {Year}</a></span>
  1056. {block:hastags}
  1057. <span class="tags">{block:Tags}<a href="{TagUrl}"># {Tag}</a>{/block:Tags}</span>
  1058. {/block:hasTags}
  1059. </div>
  1060. {/block:Date}
  1061.  
  1062. </article>
  1063.  
  1064. {block:PostNotes}
  1065. <article class="posts pagenotes">
  1066. <div class="title">{NoteCountWithLabel}</div>
  1067. {block:RebloggedFrom}
  1068. <span style="margin-top:5px">via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1069. {block:ContentSource} &mdash; source: <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}
  1070. </span>
  1071. {/block:RebloggedFrom}
  1072.  
  1073. {PostNotes}
  1074. </article>
  1075. {/block:PostNotes}
  1076.  
  1077. {/block:Posts}
  1078. </div>
  1079. </section>
  1080.  
  1081.  
  1082. </section>
  1083. </div> <!-- end wrapper -->
  1084.  
  1085. <div class="ccontrols">
  1086. {block:PermalinkPage}{block:Posts}{block:Date}<a href="#" class="clike" title="like">{LikeButton}<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M148,37.8c-3.9,0-7.5,0.6-10.8,1.9c-15.1,5.7-24.6,17.8-29.8,26.7c-6-8.6-16.1-20.5-27.6-24.4c-3.8-1.3-8.1-2-12.3-2c-10.7,0-20.3,4.1-27,11.5c-5.7,6.2-12,18-10,38.8c4.1,42.6,71.5,87.1,74.3,88.9c1,0.7,2.1,1,3.3,1c1.1,0,2.3-0.3,3.3-1c2.7-1.8,66.5-43.6,73.7-86.1c3.7-21.8-2.7-34.9-8.8-42.1C169.2,42.7,158.6,37.8,148,37.8z M173.1,91c-2.6,15.2-15.1,33.4-36.1,52.7c-11.9,10.9-23.5,19.4-29,23.2c-5.7-4-17.9-12.9-30.3-24.3C56,122.5,43.8,104,42.3,89c-1.3-13,1.1-23.2,6.9-29.6c6-6.6,13.9-7.6,18.1-7.6c3,0,5.9,0.5,8.5,1.3c11.4,3.9,23.3,21.7,26.9,28.3c1.1,2.1,3.4,3.3,5.7,3.1c2.4-0.2,4.4-1.7,5.2-4c0.1-0.2,8.2-22.4,27.7-29.7c1.9-0.7,4.2-1.1,6.6-1.1c7.2,0,14.3,3.3,19,9C173.3,66.2,175.5,77.4,173.1,91z"/></svg></a>
  1087. <a href="{ReblogURL}" title="reblog"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M36.7,39.9c-0.4-3.3,1.9-6.3,5.2-6.7c3.3-0.4,6.3,1.9,6.7,5.2l3.6,27.9c13.6-20.2,36.6-32.7,61.4-32.7c31.6,0,59.7,20.1,70,49.9c1.1,3.1-0.6,6.5-3.7,7.6c-0.6,0.2-1.3,0.3-2,0.3c-2.5,0-4.8-1.6-5.7-4c-8.6-25-32.2-41.8-58.6-41.8c-21.6,0-41.7,11.4-52.9,29.6l30-3.4c3.3-0.4,6.3,2,6.6,5.3s-2,6.3-5.3,6.6l-43.2,4.9c-0.2,0-0.5,0-0.7,0c-3,0-5.6-2.2-5.9-5.2L36.7,39.9z M185.3,120.2l-43.2,4.9c-3.3,0.4-5.7,3.3-5.3,6.6s3.3,5.7,6.6,5.3l26.1-2.9c-10.2,21.5-31.9,35.4-56,35.4c-27.1,0-51.5-18.1-59.3-44c-1-3.2-4.3-5-7.5-4c-3.2,1-5,4.3-4,7.5c4.5,14.9,13.9,28.3,26.3,37.7c12.9,9.7,28.3,14.9,44.5,14.9c29.6,0,56.1-17.6,67.8-44.3l4.2,33.3c0.4,3,3,5.2,5.9,5.2c0.3,0,0.5,0,0.8,0c3.3-0.4,5.6-3.4,5.2-6.7l-5.6-43.5C191.5,122.2,188.6,119.9,185.3,120.2z"/></svg></a>
  1088. <a href="{EmbedUrl}" target="_blank" title="embed"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M140.7,27H72c-3.3,0-6,2.7-6,6v26H40c-3.3,0-6,2.7-6,6v122c0,3.3,2.7,6,6,6h101c3.3,0,6-2.7,6-6v-27h25c3.3,0,6-2.7,6-6V64.5c0-1.6-0.6-3.1-1.7-4.2L145,28.8C143.9,27.6,142.3,27,140.7,27z M135,181H46V71h20v83c0,3.3,2.7,6,6,6h63V181z M78,148V39h52v34c0,3.3,2.7,6,6,6h30v69H78z M166,67h-24V42.8L166,67L166,67z"/></svg></a>
  1089. {/block:Date}{/block:Posts}{/block:PermalinkPage}<a href="https://tumblr.com/follow/{Name}" title="follow"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M129.5,38h-43c-3.6,0-6.5,2.9-6.5,6.5V81H43.5c-3.6,0-6.5,2.9-6.5,6.5v42c0,3.6,2.9,6.5,6.5,6.5H80v36.5c0,3.6,2.9,6.5,6.5,6.5h43c3.6,0,6.5-2.9,6.5-6.5V136h35.5c3.6,0,6.5-2.9,6.5-6.5v-42c0-3.6-2.9-6.5-6.5-6.5H136V44.5C136,40.9,133.1,38,129.5,38z M165,94v29h-35.5c-3.6,0-6.5,2.9-6.5,6.5V166H93v-36.5c0-3.6-2.9-6.5-6.5-6.5H50V94h36.5c3.6,0,6.5-2.9,6.5-6.5V51h30v36.5c0,3.6,2.9,6.5,6.5,6.5H165z"/></svg></a>
  1090. <a href="https://www.tumblr.com/message/{Name}" target="_blank" title="message"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M190.3,118.1c0-22.4-19.7-41.9-47.2-47c-2.6-24.7-28.9-44.3-60.9-44.3c-33.7,0-61.1,21.6-61.1,48.2c0,13.5,7,26.1,19.3,35.2l-4.1,23c-0.4,2.3,0.5,4.6,2.4,5.9c1,0.8,2.3,1.1,3.5,1.1c1,0,2-0.2,2.8-0.7l24-12.9c5.2,22.5,30.2,39.6,60.1,39.6c2.1,0,4.2-0.1,6.3-0.3l30.9,16.6c0.9,0.5,1.9,0.7,2.8,0.7c1.2,0,2.5-0.4,3.5-1.1c1.9-1.3,2.8-3.6,2.4-5.9l-4.1-23C183.4,144.3,190.3,131.6,190.3,118.1zM50.2,102.5c-10.9-6.9-17.1-16.9-17.1-27.4c0-20,22-36.2,49.1-36.2s49.1,16.2,49.1,36.2s-22,36.2-49.1,36.2c-2.2,0-4.6-0.1-6.9-0.4c-1.2-0.1-2.4,0.1-3.5,0.7l-21.6,11.6l2.6-14.6C53.3,106.2,52.3,103.8,50.2,102.5zM161.2,145.5c-2,1.3-3.1,3.7-2.7,6.1l2.6,14.6l-21.6-11.6c-1.1-0.6-2.3-0.8-3.5-0.7c-2.3,0.2-4.7,0.4-6.9,0.4c-24.7,0-45.2-13.5-48.6-31c0.5,0,1.1,0,1.6,0c30.2,0,55.3-17.4,60.2-40.1c21,4.3,35.9,18.7,35.9,34.9C178.3,128.6,172.1,138.6,161.2,145.5z"/></svg></a>
  1091. <a href="https://tumblr.com/dashboard" target="_blank" title="dashboard"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M197.8,112.4l-86.2-82c-2.4-2.2-6.1-2.2-8.4,0.1l-82.5,82.3c-1.7,1.7-2.2,4.3-1.3,6.5c0.9,2.2,3.1,3.7,5.5,3.7h23v56c0,3.3,2.7,6,6,6h35c3.3,0,6-2.7,6-6v-44h25v44c0,3.3,2.7,6,6,6h36c3.3,0,6-2.7,6-6v-56h26c0,0,0,0,0,0c3.3,0,6-2.7,6-6C200,115.1,199.2,113.5,197.8,112.4zM162,111c-3.3,0-6,2.7-6,6v56h-24v-44c0-3.3-2.7-6-6-6H89c-3.3,0-6,2.7-6,6v44H60v-56c0-3.3-2.7-6-6-6H39.5l68.1-67.9L179,111H162z"/></svg></a></div>
  1092. </body>
  1093.  
  1094.  
  1095.  
  1096. </html>
Advertisement
Add Comment
Please, Sign In to add comment