Advertisement
destinatia

「 ✩ * º ╳ AWKWARD (contained) by becca. 」

Feb 21st, 2018
4,314
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.59 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-- ✧ * ☾ desveladas ™ * ✧
  6. aka bec -->
  7.  
  8. {block:Description}
  9. <meta name="description" content="{MetaDescription}" />
  10. {/block:Description}
  11. <meta charset="utf-8">
  12. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  13. <title>{Title}{block:TagPage} // {Tag} {/block:TagPage} {block:SearchPage} // {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary} // {PostSummary} {/block:PostSummary}</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16.  
  17. <!---------------------- ✕ color customization ✕ ----------------------->
  18.  
  19. <meta name="color:background" content="#e4e4e4" />
  20. <meta name="color:posts" content="#ffffff" />
  21. <meta name="color:text" content="#000000" />
  22. <meta name="color:links" content="#000000" />
  23. <meta name="color:links hover" content="#a0a0a0" />
  24. <meta name="color:sidebar background" content="#ffffff" />
  25. <meta name="color:sidebar borders" content="#ddd" />
  26. <meta name="color:desc text" content="#ddd" />
  27. <meta name="color:desc accent" content="#ffffff" />
  28. <meta name="color:accent" content="#ddd" />
  29. <meta name="color:accent text" content="#ffffff" />
  30. <meta name="color:container" content="#eee" />
  31.  
  32. <!--------------------------- ✕ texts ✕ ------------------------------->
  33.  
  34. <meta name="text:sidebar title" content="three lines max." />
  35. <meta name="text:link 1" content="/" />
  36. <meta name="text:link 2" content="/" />
  37. <meta name="text:link 3" content="/" />
  38. <meta name="text:link 4" content="/" />
  39. <meta name="text:link 5" content="/" />
  40.  
  41. <!---------------------------- ✕ images ✕ ----------------------------->
  42.  
  43. <meta name="image:sidebar icon" content="" />
  44.  
  45. <!-------------------------- ✕ options ✕ -------------------------->
  46.  
  47. <meta name="if:300px posts" content="0"/>
  48. <meta name="if:400px posts" content="1"/>
  49. <meta name="if:500px posts" content="0"/>
  50.  
  51. <meta name="if:general links" content="0"/>
  52. <meta name="if:astronomy links" content="1"/>
  53. <meta name="if:feminine links" content="0"/>
  54. <meta name="if:spooky links" content="0"/>
  55.  
  56. <!---------------------- ✕ tooltip script ! ✕ ----------------------->
  57.  
  58.  
  59. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  60. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  61. <script>
  62. (function($){
  63. $(document).ready(function(){
  64. $("a[title]").style_my_tooltips({
  65. tip_follows_cursor:true,
  66. tip_delay_time:90,
  67. tip_fade_speed:600,
  68. attribute:"title"
  69. });
  70. });
  71. })(jQuery);
  72. </script>
  73.  
  74. <!---------------------- ✕ imported scripts ✕ ----------------------->
  75.  
  76. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  77.  
  78. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  79.  
  80. <link href="https://file.myfontastic.com/DcfqceUudTWXik9Ue2LfGV/icons.css" rel="stylesheet">
  81.  
  82. <script src="https://file.myfontastic.com/DcfqceUudTWXik9Ue2LfGV/icons.js"></script>
  83.  
  84. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  85.  
  86. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  87.  
  88. <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  89.  
  90. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  91.  
  92. <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  93.  
  94. <script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script>
  95.  
  96. <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
  97.  
  98.  
  99. <style type="text/css">
  100.  
  101.  
  102. /* ---------------------- ✕ imported fonts ✕ ----------------------- */
  103.  
  104. @font-face { font-family: "beauty"; src: url('https://dl.dropboxusercontent.com/s/r63d95pmyc3txmz/TamoroScript_PersonalUseOnly.ttf?dl=0'); format("truetype");}
  105.  
  106. @font-face { font-family: "frontage"; src: url('https://dl.dropboxusercontent.com/s/dcmbfprx16qqp71/Frontage-Outline.otf?dl=0'); format("truetype");}
  107. /* ------------------------ ✕ selection tool ✕ ----------------------- */
  108.  
  109. ::-moz-selection {
  110. background: {color:accent};
  111. color: {color:accent text};
  112. }
  113.  
  114. ::selection {
  115. background: {color:accent};
  116. color: {color:accent text};
  117. }
  118.  
  119. /* ------------------------ ✕ scrollbar ✕ ----------------------- */
  120. ::-webkit-scrollbar {
  121. width: 0px;
  122. visibility:none;
  123. }
  124.  
  125. ::-webkit-scrollbar-track {
  126. border-radius:50%;
  127. visibility:none;
  128. }
  129.  
  130. ::-webkit-scrollbar-thumb {
  131. background:{color:accent};
  132. visibility:none;
  133. }
  134. ::-webkit-scrollbar-thumb:window-inactive {
  135. background: transparent;
  136. }
  137.  
  138. /* ------------------------ ✕ tooltip style ✕ ----------------------- */
  139.  
  140.  
  141. #s-m-t-tooltip {
  142. max-width:300px;
  143. padding:5px;
  144. margin:10px 0px 0px 10px;
  145. background: {color:accent};
  146. font-size:7px;
  147. color:{color:accent text};
  148. letter-spacing:1px;
  149. font-family:'inconsolata', sans-serif;
  150. border-radius:0px 7px 7px 7px;
  151. z-index:999999999999999999999999999999999999;
  152. }
  153.  
  154.  
  155. /* ---------------------------- ✕ basics ✕ -------------------------- */
  156.  
  157. .tmblr-iframe.iframe-controls--desktop {
  158. top:0%!important;
  159. right:0%!important;
  160. position:fixed!important;
  161. z-index:999999999!important;
  162. /*invert the colours: */ filter:invert(100%);
  163. /*scale the buttons: */ -webkit-filter:invert(100%);
  164. transform:scale(.8, .8);
  165. -webkit-transform:scale(.8, .8);
  166. -ms-transform:scale(.8, .8);
  167. margin-top:10px;
  168. }
  169.  
  170. .tmblr-iframe--desktop-logged-in-controls {
  171. -webkit-filter:invert(100%);
  172. -moz-filter:invert(100%);
  173. -o-filter:invert(100%);
  174. -ms-filter:invert(100%);
  175. filter:invert(100%);
  176. opacity:0.3;
  177. }
  178.  
  179. body {
  180. background-color:{color:background};
  181. color: {color:text};
  182. font-family:'inconsolata';
  183. font-size: 9px;
  184. text-transform:auto;
  185. margin: 0;
  186. letter-spacing:1px;
  187. padding: 0;
  188. word-wrap: break-word;
  189. line-height:160%;
  190. background-image:url('{image:background}');
  191. }
  192.  
  193. blockquote {
  194. background:transparent;
  195. margin: 10px;
  196. padding-left:20px;
  197. border-left: 2px solid {color:accent};
  198. }
  199.  
  200. blockquote a{
  201. color:{color:accent};
  202. }
  203.  
  204. blockquote b{
  205. color:{color:accent};
  206. }
  207.  
  208. blockquote i{
  209. color:{color:accent};
  210. }
  211.  
  212. blockquote s{
  213. color:{color:accent};
  214. }
  215.  
  216. blockquote u{
  217. color:{color:accent};
  218. }
  219.  
  220. iframe, img, embed, object, video {
  221. max-width: 100%;
  222. }
  223.  
  224. p{
  225. margin-bottom:10px;
  226. }
  227.  
  228.  
  229. ul{
  230. list-style-type:circle;
  231. }
  232.  
  233. ol{
  234. list-style-type:;
  235. }
  236.  
  237. /* ------------------------ ✕ text styles ! ✕ ----------------------- */
  238.  
  239. a {
  240. color: {color:links};
  241. text-decoration: none;
  242. }
  243.  
  244. b, strong {
  245. color: {color:accent};
  246. font-family:'inconsolata';
  247.  
  248. }
  249.  
  250. i, em,italic {
  251. color: {color:accent};
  252. font-family:'inconsolata';
  253.  
  254. }
  255.  
  256. s, strike {
  257. color: {color:accent};
  258. font-family:'inconsolata';
  259.  
  260. }
  261.  
  262. u,underline {
  263. color: {color:accent};
  264. font-family:'inconsolata';
  265.  
  266. }
  267.  
  268. sup, sub, small {
  269. font-size:9px;
  270. line-height:160%;
  271. }
  272.  
  273. h3 {
  274. text-align:center;
  275. font-size:12px;
  276. line-height:100%;
  277. text-transform:uppercase;
  278. font-family:'quicksand';
  279. margin-top:20px;
  280. margin-bottom:20px;
  281. font-weight:bold;
  282. padding:5px;
  283. letter-spacing:1px;
  284. border:1px solid{color:accent};
  285. width:auto;
  286. color:{color:accent};
  287. -ms-transform: rotate(-2deg); /* IE 9 */
  288. -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
  289. transform: rotate(-2deg);
  290. }
  291.  
  292. h2 {
  293. text-align:center;
  294. font-size:12px;
  295. line-height:100%;
  296. text-transform:uppercase;
  297. font-family:'quicksand';
  298. margin-top:20px;
  299. margin-bottom:20px;
  300. font-weight:bold;
  301. padding:5px;
  302. letter-spacing:1px;
  303. border:1px solid{color:accent};
  304. width:auto;
  305. color:{color:accent};
  306. -ms-transform: rotate(-2deg); /* IE 9 */
  307. -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
  308. transform: rotate(-2deg);
  309. }
  310.  
  311. h1{
  312. text-align:center;
  313. font-size:15px;
  314. line-height:100%;
  315. text-transform:uppercase;
  316. font-family:'quicksand';
  317. margin-top:20px;
  318. margin-bottom:20px;
  319. font-weight:bold;
  320. padding:5px;
  321. letter-spacing:1px;
  322. border:1px solid{color:accent};
  323. width:auto;
  324. color:{color:accent};
  325. -ms-transform: rotate(-2deg); /* IE 9 */
  326. -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
  327. transform: rotate(-2deg);
  328. }
  329.  
  330. /* ------------------------ ✕ posts bruh ! ✕ ----------------------- */
  331.  
  332.  
  333. article {
  334. float:left;
  335. background: {color:posts};
  336. border:1px solid {color:sidebar borders};
  337. padding: 10px;
  338. letter-spacing:1px;
  339. font-weight:400;
  340. font-family:'inconsolata';
  341. {block:if300pxposts}
  342. width:300px;
  343. {/block:if300pxposts}
  344. {block:if400pxposts}
  345. width:400px;
  346. {/block:if400pxposts}
  347. {block:if500pxposts}
  348. width:500px;
  349. {/block:if500pxposts}
  350. z-index:9;
  351. color:{color:text};
  352. text-align:justify;
  353. margin-top:50px;
  354. margin-bottom:10px;
  355. border-radius:/*-top-*/0px /*-right-*/0px /*-bottom-*/7px /*-left-*/7px;
  356. }
  357.  
  358. article img{
  359. border-radius:7px;
  360. }
  361.  
  362. .vignette, #vignette {
  363. opacity:0;
  364. }
  365. .lightbox-image, #tumblr_lightbox img {
  366. box-shadow:none !important;
  367. border-radius:0 !important;
  368. max-width:none;
  369. }
  370.  
  371. .tmblr-lightbox, #tumblr_lightbox {
  372. background-color:rgba({RGBcolor:background},.80) !important;
  373. }
  374.  
  375. .lightbox-caption, #tumblr_lightbox_caption {
  376. visibility:hidden;
  377. }
  378.  
  379. .postitle {
  380. text-align:right;
  381. font-size:18px;
  382. line-height:100%;
  383. text-transform:uppercase;
  384. font-family:'frontage';
  385. margin-top:20px;
  386. margin-bottom:20px;
  387. font-weight:bold;
  388. padding:5px;
  389. letter-spacing:1px;
  390. border:1px solid{color:accent};
  391. width:auto;
  392. color:{color:accent};
  393. -ms-transform: rotate(-2deg); /* IE 9 */
  394. -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
  395. transform: rotate(-2deg);
  396. }
  397.  
  398. .postitle a{
  399. text-transform:uppercase;
  400. color:{color:accent};
  401. }
  402.  
  403. /* --------------------- ✕ permaaccent i think ! ✕ -------------------- */
  404.  
  405. .perms {
  406. font-family:'inconsolata';
  407. color:{color:title text};
  408. font-size:9px;
  409. margin-left:10px;
  410. text-transform:lowercase;
  411. }
  412.  
  413. /* ------------------------ ✕ post info ! ✕ ----------------------- */
  414.  
  415. .gryffindor{
  416. {block:if300pxposts}
  417. width:310px;
  418. {/block:if300pxposts}
  419. {block:if400pxposts}
  420. width:410px;
  421. {/block:if400pxposts}
  422. {block:if500pxposts}
  423. width:510px;
  424. {/block:if500pxposts}
  425. margin-left:-11px;
  426. margin-top:-34px;
  427. border:1px solid {color:sidebar borders};
  428. border-radius:/*-top-*/7px /*-right-*/7px /*-bottom-*/0px /*-left-*/0px;
  429. font-family: 'inconsolata', sans-serif;
  430. letter-spacing:2px;
  431. padding:5px;
  432. margin-bottom:10px;
  433. background: {color:posts};
  434. }
  435.  
  436. .gryffindor a{
  437. color:{color:accent};
  438. }
  439.  
  440. .gryffindor i{
  441. color:{color:accent};
  442. }
  443.  
  444. .hufflepuff{
  445. {block:if300pxposts}
  446. width:310px;
  447. {/block:if300pxposts}
  448. {block:if400pxposts}
  449. width:410px;
  450. {/block:if400pxposts}
  451. {block:if500pxposts}
  452. width:510px;
  453. {/block:if500pxposts}
  454. margin-left:0px;
  455. margin-top:50px;
  456. background:transparent;
  457. font-family: 'inconsolata', sans-serif;
  458. letter-spacing:2px;
  459. padding:5px;
  460. }
  461.  
  462. .hufflepuff a{
  463. color:{color:accent};
  464. }
  465.  
  466. .hufflepuff i{
  467. color:{color:accent};
  468. }
  469.  
  470.  
  471. .slytherin{
  472. {block:if300pxposts}
  473. width:310px;
  474. {/block:if300pxposts}
  475. {block:if400pxposts}
  476. width:410px;
  477. {/block:if400pxposts}
  478. {block:if500pxposts}
  479. width:510px;
  480. {/block:if500pxposts}
  481. margin-left:-11px;
  482. text-align:right;
  483. margin-top:14px;
  484. border-top:1px solid {color:sidebar borders};
  485. font-family: 'inconsolata', sans-serif;
  486. letter-spacing:2px;
  487. padding:/*-top-*/8px /*-right-*/5px /*-bottom-*/3px /*-left-*/5px;
  488. height:10px;
  489. margin-bottom:0px;
  490. background: {color:post};
  491. }
  492.  
  493. .slytherin a{
  494. color:{color:accent};
  495. }
  496.  
  497. .slytherin i{
  498. color:{color:accent};
  499. }
  500.  
  501.  
  502. .btton{
  503. float:right;
  504. margin-right:5px;
  505. font-size:12px;
  506. margin-top:0px;
  507. letter-spacing:6px;
  508. display:table;
  509. }
  510.  
  511. .btton a{
  512. color:{color:hover title};
  513. }
  514.  
  515. .btton span {
  516. display:table-cell;
  517. vertical-align:middle;
  518. }
  519.  
  520. .postinfo{
  521. margin-top:-10px;
  522. text-align:right;
  523. font-weight:bold;
  524. padding-top:8px;
  525. }
  526.  
  527. .tags {
  528. margin-top:5px;
  529. padding:5px;
  530. font-size:9px;
  531. line-height:20px;
  532. letter-spacing:1px;
  533. font-weight:normal;
  534. -webkit-transition: all .7s;
  535. -moz-transition: all .7s;
  536. -o-transition: all .7s;
  537. -ms-transition: all .7s;
  538. transition: all .7s;
  539. }
  540.  
  541. .tags a{
  542. color:{color:accent};
  543. padding:/*-top-*/2px /*-right-*/5px /*-bottom-*/3px /*-left-*/5px;
  544. border-radius:100px;
  545. font-family: 'Inconsolata', monospace;
  546. }
  547.  
  548. .tags i{
  549. color:{color:accent};
  550. }
  551.  
  552.  
  553.  
  554. /* ---------------------- ✕ notes and shit ! ✕ ----------------------- */
  555.  
  556. ol.notes {
  557. display:block;
  558. text-align:left;
  559. list-style-type:none;
  560. margin-left:-40px;
  561. }
  562.  
  563. ol.notes li.note{
  564. margin-bottom:5px;
  565. }
  566.  
  567. .pagenotes {
  568. text-align:left;
  569. margin-top:15px;
  570. }
  571.  
  572. .pagenotes img{
  573. padding-right:5px;
  574. padding-top:5px;
  575. margin-bottom:-5px;
  576. }
  577.  
  578. /* ------------------------ ✕ post types ! ✕ ----------------------- */
  579.  
  580. /* ------------------------ ✕ chat posts ! ✕ ------------------------ */
  581.  
  582.  
  583. .odd, .even {
  584. padding:5px;
  585. height:auto;
  586. font-size:8px;
  587. letter-spacing:2px;
  588. font-family: 'Inconsolata', monospace;
  589. border-radius:10px;
  590. text-transform:uppercase;
  591. }
  592. .odd {
  593. color:{color:accent};
  594. border:1px solid {color:background};
  595. font-size:8px;
  596. padding:5px;
  597. text-align:left;
  598. width:220px;
  599. border-radius:10px 10px 10px 0px;
  600. margin-top:5px;
  601. }
  602.  
  603. .even {
  604. color:{color:accent};
  605. border:1px solid {color:background};
  606. font-size:8px;
  607. padding:5px;
  608. margin-top:5px;
  609. text-align:right;
  610. width:220px;
  611. border-radius:10px 10px 0px 10px;
  612. text-align:left;
  613. {block:if300pxposts}
  614. margin-left:70px;
  615. {/block:if300pxposts}
  616. {block:if400pxposts}
  617. margin-left:170px;
  618. {/block:if400pxposts}
  619. {block:if500pxposts}
  620. margin-left:270px;
  621. {/block:if500pxposts}
  622. }
  623.  
  624. ul.chat{
  625. list-style:none;
  626. margin-left:-40px;
  627. margin-bottom:-5px;
  628. }
  629.  
  630. .chat span {
  631. float: left;
  632. }
  633.  
  634. /* ------------------------ ✕ quotations ! ✕ ------------------------ */
  635.  
  636. .sourcepic {
  637. text-align:center;
  638. padding-right:10px;
  639. font-size:18px;
  640. padding-left:10px;
  641. display:table-cell;
  642. vertical-align:middle;
  643. color:{color:accent};
  644. }
  645.  
  646. .quotesource{
  647. text-align:center;
  648. font-size:8px;
  649. padding:5px;
  650. border-top:1px solid {color:accent};
  651. opacity:0.7;
  652. margin-bottom:10px;
  653. font-family:'inconsolata';
  654. text-transform:lowercase;
  655. }
  656.  
  657. #quoteq {
  658. vertical-align:middle;
  659. display:table;
  660. }
  661. /* ----------------------- ✕ questions ! ✕ ------------------------ */
  662.  
  663. #asker {
  664. padding-bottom:10px;
  665. letter-spacing:1px;
  666. text-align:right;
  667. margin-top:-3px;
  668. font-size:20px;
  669. margin-right:10px;
  670. margin-left:0px;
  671. z-index:999;
  672. font-weight:bold;
  673. color:{color:accent};
  674. float:right;
  675. text-shadow: 1px 0 0 {color:posts}, -1px 0 0 {color:posts}, 0 1px 0 {color:posts}, 0 -1px 0 {color:posts}, 1px 1px {color:posts}, -1px -1px 0 {color:posts}, 1px -1px 0 {color:posts}, -1px 1px 0 {color:posts};
  676. font-family: 'beauty';
  677. text-transform:lowercase;
  678. }
  679.  
  680. #asker a{
  681. color:{color:accent};
  682. }
  683.  
  684. .answer {
  685. font-size:9px;
  686. width:auto;
  687. }
  688.  
  689. .question{
  690. text-transform:none;
  691. color:{color:text};
  692. border:1px solid {color:sidebar borders};
  693. padding:10px;
  694. {block:if300pxposts}
  695. width:280px;
  696. {/block:if300pxposts}
  697. {block:if400pxposts}
  698. width:380px;
  699. {/block:if400pxposts}
  700. {block:if500pxposts}
  701. width:480px;
  702. {/block:if500pxposts}
  703. font-family: 'Inconsolata', monospace;
  704. border-radius:10px 10px 10px 0px;
  705. font-size:10px;
  706. background: transparent;
  707. margin-top:0px;
  708. }
  709.  
  710. .more-btn-wrap{
  711. position: relative;
  712. padding: 20px 0;
  713. width: 100%;
  714. }
  715.  
  716. .more-btn-wrap a:link{
  717. -webkit-transition: all 0.2s ease;
  718. -moz-transition: all 0.2s ease;
  719. -o-transition: all 0.2s ease;
  720. transition: all 0.2s ease;
  721. position: relative;
  722. left: calc(50% - 47px);
  723. padding: 7px 14px;
  724. border: 1px solid lightcoral;
  725. background: transparent;
  726. }
  727. .more-btn-wrap a:hover{
  728. background: lightcoral;
  729. color: white;
  730. }
  731.  
  732. /* ----------------------- ✕ audio bruh ! ✕ ----------------------- */
  733.  
  734. .playerbuttonbg {
  735. position: absolute;
  736. left: 20px;
  737. top: 20px;
  738. width: 19px;
  739. height: 19px;
  740. border: 1px solid {color:sidebar borders};
  741. padding: 10px;
  742. -webkit-border-radius: 40px;
  743. -moz-border-radius: 40px;
  744. border-radius: 40px;
  745. opacity: .4;
  746. filter: alpha(opacity=40);
  747. -moz-opacity: 0.4;
  748. -khtml-opacity: 0.4;
  749. transition: opacity .7s ease-in-out;
  750. -moz-transition: opacity .7s ease-in-out;
  751. -webkit-transition: opacity .7s ease-in-out;
  752. }
  753.  
  754. .playerbuttonbg:hover {
  755. opacity: 1;
  756. filter: alpha(opacity=100);
  757. -moz-opacity: 1;
  758. -khtml-opacity: 1;
  759. }
  760.  
  761. .newplayerbutton {
  762. position: relative;
  763. width: 19px;
  764. height: 19px;
  765. overflow: hidden;
  766. }
  767.  
  768. .playerbuttonhug {
  769. position: absolute;
  770. top: -18px;
  771. left: -7px;
  772. }
  773.  
  774. .tumblr_audio_player {
  775. height: 90px;
  776. width: 270px;
  777. -moz-transform: scale(0.60, 0.60);
  778. -webkit-transform: scale(0.60, 0.60);
  779. -o-transform: scale(0.60, 0.60);
  780. -ms-transform: scale(0.60, 0.60);
  781. transform: scale(0.60, 0.60);
  782. -moz-transform-origin: top left;
  783. -webkit-transform-origin: top left;
  784. -o-transform-origin: top left;
  785. -ms-transform-origin: top left;
  786. transform-origin: top left;
  787. }
  788.  
  789. .audioimgwrapper {
  790. position: absolute;
  791. left: 0px;
  792. top: 0px;
  793. -webkit-border-radius: 40px;
  794. -moz-border-radius: 40px;
  795. border-radius: 40px;
  796. overflow: hidden;
  797. width: 79px;
  798. height: 79px;
  799. }
  800.  
  801. .audioimgwrapper img {
  802. width: 100%;
  803. height: auto;
  804. -webkit-border-radius: 40px;
  805. -moz-border-radius: 40px;
  806. border-radius: 40px;
  807. }
  808.  
  809. .trackdetails {
  810. width: auto;
  811. display:inline-block;
  812. margin-left: 90px;
  813. min-height: 85px;
  814. }
  815.  
  816. .audiowrapper {
  817. position: relative;
  818. display:inline-block;
  819. }
  820.  
  821. /* ----------------------- ✕ container ✕ ----------------------- */
  822.  
  823. #awkward {
  824. background-color:{color:container};
  825. border:1px solid {color:sidebar borders};
  826. {block:if300pxposts}
  827. width:650px;
  828. {/block:if300pxposts}
  829. {block:if400pxposts}
  830. width:800px;
  831. {/block:if400pxposts}
  832. {block:if500pxposts}
  833. width:840px;
  834. {/block:if500pxposts}
  835. height:450px;
  836. z-index:-999;
  837. margin-left:20px;
  838. border-radius:5px;
  839. position:fixed;
  840. top:50%;
  841. left:50%;
  842. transform:translate(-50%,-50%);
  843.  
  844. }
  845.  
  846. /* ----------------------- ✕ post container ✕ ----------------------- */
  847.  
  848. #postcontainer {
  849. position:fixed;
  850. top:50%;
  851. left:50%;
  852. transform:translate(-50%,-50%);
  853. margin-right:auto;
  854. {block:if300pxposts}
  855. width:327px;
  856. {/block:if300pxposts}
  857. {block:if400pxposts}
  858. width:422px;
  859. {/block:if400pxposts}
  860. {block:if500pxposts}
  861. width:552px;
  862. {/block:if500pxposts}
  863. overflow-x:hidden;
  864. height:400px;
  865. overflow-y:auto;
  866. margin-left:150px;
  867. text-align:center;
  868. margin-bottom:20px;
  869. }
  870.  
  871. /* ------------------------- ✕ sbar ✕ ----------------------- */
  872.  
  873.  
  874. #scott {
  875. position:fixed;
  876. top:50%;
  877. left:50%;
  878. transform:translate(-50%,-50%);
  879. margin-top:00px;
  880. padding-right:20px;
  881. {block:if300pxposts}
  882. margin-left:-160px;
  883. {/block:if300pxposts}
  884. {block:if400pxposts}
  885. margin-left:-220px;
  886. {/block:if400pxposts}
  887. {block:if500pxposts}
  888. margin-left:-250px;
  889. {/block:if500pxposts}
  890. }
  891.  
  892. .narcissa {
  893. max-width:130px;
  894. max-height:60px;
  895. font-size:21px;
  896. font-weight:bold;
  897. font-family:'beauty';
  898. text-align:right;
  899. color:{color:accent};
  900. margin-top:5px;
  901. overflow:hidden;
  902. margin-left:60px;
  903. line-height:18px;
  904. z-index:9999;
  905. display:table-cell;
  906. vertical-align:middle;
  907. letter-spacing:0px;
  908. }
  909.  
  910. #sbar {
  911. width:200px;
  912. height:100px;
  913. background:{color:sidebar background};
  914. padding:/*-top-*/13px /*-right-*/2px /*-bottom-*/8px /*-left-*/3px;
  915. text-align:center;
  916. border:1px solid {color:sidebar borders};
  917. border-radius:7px;
  918. }
  919.  
  920. #sbar2 {
  921. width:200px;
  922. height:25px;
  923. background:{color:sidebar background};
  924. padding:/*-top-*/13px /*-right-*/6px /*-bottom-*/13px /*-left-*/0px;
  925. display:table-cell;
  926. vertical-align:middle;
  927. border:1px solid {color:sidebar borders};
  928. border-radius:7px;
  929. text-align:center;
  930. }
  931.  
  932. #sbaricon {
  933. margin-left:-10px;
  934. padding:10px;
  935. table-layout: fixed;
  936. display:table-cell;
  937. vertical-align:middle;
  938. }
  939.  
  940. #sbaricon img {
  941. width:60px;
  942. width:60px;
  943. border-radius:7px;
  944. }
  945.  
  946. .page {
  947. width:200px;
  948. height:25px;
  949. background:transparent;
  950. padding:/*-top-*/5px /*-right-*/0px /*-bottom-*/3px /*-left-*/0px;
  951. display:table-cell;
  952. font-family: 'Inconsolata', monospace;
  953. font-size:8px;
  954. border-top:1px solid {color:sidebar borders};
  955. vertical-align:middle;
  956. text-align:center;
  957. }
  958.  
  959. .descbox{
  960. text-transform:lowercase;
  961. z-index:9;
  962. font-size:9px;
  963. overflow-x:hidden;
  964. height:70px;
  965. overflow-y:auto;
  966. line-height:10px;
  967. text-align:center;
  968. letter-spacing:1px;
  969. font-family: 'Inconsolata', monospace;
  970. width:auto;
  971. color:{color:desc text};
  972. }
  973.  
  974. .descbox a{
  975. color:{color:desc accent};
  976. }
  977.  
  978. .descbox b{
  979. color:{color:desc accent};
  980. }
  981.  
  982. .descbox i{
  983. color:{color:desc accent};
  984. }
  985.  
  986. .descbox u{
  987. color:{color:desc accent};
  988. }
  989.  
  990. .descbox s{
  991. color:{color:desc accent};
  992. }
  993.  
  994. /* ----------------------- ✕ dropdown ✕ ----------------------- */
  995.  
  996. .lars {
  997. margin-top:0px;
  998. position:fixed;
  999. padding:0px;
  1000. width:200px;
  1001. margin-left:10px;
  1002. color:{color:accent};
  1003. background:transparent;
  1004. border:{color:accent} 1px solid;
  1005. text-align:left;
  1006. }
  1007.  
  1008. .lars a{
  1009. color:{color:accent text};
  1010. }
  1011.  
  1012. .nolars {
  1013. padding:10px;
  1014. text-align:left;
  1015. display:inline;
  1016. word-spacing:4px;
  1017. }
  1018.  
  1019. .nolars a {
  1020. color:{color:accent};
  1021. }
  1022.  
  1023.  
  1024. /* ----------------------- ✕ navigation links ✕ ---------------------- */
  1025.  
  1026. .linkoes{
  1027. margin-left:0px;
  1028. margin-top:0px;
  1029. font-size:15px;
  1030. width: 8px;
  1031. letter-spacing:1px;
  1032. height: 12px;
  1033. display:inline;
  1034. border-radius: 5px;
  1035. color:{color:sidebar borders};
  1036. background:transparent;
  1037. border:{color:sidebar borders} 1px solid;
  1038. padding:/*-top-*/5px /*-right-*/5px /*-bottom-*/2px /*-left-*/6px;
  1039. text-align:left;
  1040. -webkit-transition: all .7s;
  1041. -moz-transition: all .7s;
  1042. -o-transition: all .7s;
  1043. -ms-transition: all .7s;
  1044. transition: all .7s;
  1045. }
  1046.  
  1047. /* --------------------- ✕ don't do the do ✕ --------------------- */
  1048.  
  1049. #yo {
  1050. font-size:25px;
  1051. float:right;
  1052. right:0;
  1053. bottom:0;
  1054. margin-right:10px;
  1055. padding:/*-top-*/4px /*-right-*/5px /*-bottom-*/2px /*-left-*/5px;
  1056. overflow:hidden;
  1057. margin-bottom:10px;
  1058. border-radius:/*-top-*/10px /*-right-*/10px /*-bottom-*/0px /*-left-*/10px;
  1059. text-transform:uppercase;
  1060. position:fixed;
  1061. background-color:{color:posts};
  1062. border:1px solid{color:sidebar borders};
  1063. text-align:center;
  1064. -ms-transform: rotate(0deg); /* IE 9 */
  1065. -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  1066. transform: rotate(0deg);
  1067. -webkit-transition: all .7s;
  1068. -moz-transition: all .7s;
  1069. -o-transition: all .7s;
  1070. -ms-transition: all .7s;
  1071. transition: all .7s;
  1072.  
  1073. }
  1074.  
  1075. #yo:hover{
  1076. -ms-transform: rotate(-10deg); /* IE 9 */
  1077. -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
  1078. transform: rotate(-10deg);
  1079. -webkit-transition: all .7s;
  1080. -moz-transition: all .7s;
  1081. -o-transition: all .7s;
  1082. -ms-transition: all .7s;
  1083. transition: all .7s;
  1084. }
  1085.  
  1086. #yo a{
  1087. color:{color:accent};
  1088. }
  1089.  
  1090. /* ------------------------ ✕ custom css ! ✕ ----------------------- */
  1091. {CustomCSS}
  1092. </style>
  1093. </head>
  1094.  
  1095. <body>
  1096.  
  1097. <!------------------------------- posts -------------------------------->
  1098.  
  1099. <div id="postcontainer">
  1100.  
  1101.  
  1102. {block:Posts}
  1103.  
  1104. <article>
  1105.  
  1106. <div class="gryffindor">
  1107.  
  1108. <a href="{Permalink}" class="perms">
  1109. {block:Date}
  1110. {ShortMonth} {DayOfMonth}
  1111. {/block:Date}
  1112. </a>
  1113.  
  1114.  
  1115.  
  1116. <div class="btton">
  1117.  
  1118. <!-------------------------- via and source -------------------------->
  1119. {block:RebloggedFrom}
  1120. <span class="icon-ios-moon-outline" style="color:{color:accent}"></span> <a href="{ReblogParentURL}"class="perms" style="border-left:1px {color:background}solid;float:right;letter-spacing:1px">via {ReblogParentName}</span></a>
  1121. {/block:RebloggedFrom}
  1122.  
  1123. {block:RebloggedFrom} {/block:RebloggedFrom}
  1124. </div>
  1125. </div>
  1126.  
  1127.  
  1128. <!-------------------------- text posts -------------------------->
  1129. {block:Text}
  1130. {block:Title}
  1131. <div class="postitle">
  1132. <a href="{Permalink}">{Title}</a></div>
  1133. {/block:Title}
  1134. {Body}
  1135. {/block:Text}
  1136.  
  1137.  
  1138. <!-------------------------- photo posts -------------------------->
  1139. {block:Photo}
  1140. {block:IndexPage}
  1141. {LinkOpenTag}
  1142. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  1143. {LinkCloseTag}
  1144. {/block:IndexPage}
  1145. {block:PermalinkPage}
  1146. {LinkOpenTag}
  1147. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  1148. {LinkCloseTag}{/block:PermalinkPage}
  1149. {/block:Photo}
  1150.  
  1151.  
  1152. <!-------------------------- photosets -------------------------->
  1153. {block:Photoset}
  1154. <div class="pxu-photo">
  1155. <a href="#" onclick="Tumblr.Lightbox.init([/*{block:Photos}, /**/ { width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }{/block:Photos}]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1156. {block:IndexPage}{Photoset-500}{/block:IndexPage}
  1157. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  1158. </a>
  1159. </div>
  1160. {/block:Photoset}
  1161.  
  1162.  
  1163. <!-------------------------- quote posts -------------------------->
  1164.  
  1165.  
  1166.  
  1167. <div id="quoteq">
  1168. {block:Source}
  1169. <div class="sourcepic"><span style="font-size:20px"class="icon-ios-chatbubble-outline"></span></div>
  1170. {/block:Source}
  1171.  
  1172. {block:Quote}
  1173. <div style="float:right; height:auto;font-family: 'beauty';font-size:20px;padding:10px;border-radius:0px 7px 7px 7px; color:{color:accent};font-weight:bold;">
  1174. {Quote}</div>
  1175. </div>
  1176. {/block:Quote}
  1177.  
  1178. {block:Source}
  1179. <div class="quotesource">{Source}</div>
  1180. {/block:Source}
  1181.  
  1182. <!-------------------------- link posts -------------------------->
  1183.  
  1184. {block:Link}
  1185. <div class="postitle"><a href="{URL}">{Name}</a></div>
  1186. {block:Description}{Description}{/block:Description}
  1187. {/block:Link}
  1188.  
  1189.  
  1190. <!-------------------------- chats ! -------------------------->
  1191. {block:Chat}
  1192.  
  1193. {block:Title}
  1194. <div class="postitle">
  1195. <a href="{Permalink}">{Title}</a></div>
  1196. {/block:Title}
  1197.  
  1198. <ul class="chat">
  1199. {block:Lines}<li class="{Alt}">{block:Label}<span class="label" style="text-transform:uppercase; font-weight:bold; ">{Label}</span>{/block:Label}<div style="text-transform:uppercase;">&nbsp;{Line}</div></li>{/block:Lines}
  1200. </ul>
  1201. {/block:Chat}
  1202.  
  1203.  
  1204. <!-------------------------- audio -------------------------->
  1205.  
  1206. {block:Audio}
  1207. {block:AudioPlayer}
  1208. <div class="audiowrapper">
  1209. {block:AlbumArt}
  1210. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  1211. {/block:AlbumArt}
  1212.  
  1213. <div class="playerbuttonbg">
  1214. <div class="newplayerbutton">
  1215. <div class="playerbuttonhug">
  1216.  
  1217. {AudioPlayerWhite}
  1218.  
  1219. </div>
  1220. </div>
  1221. </div>
  1222.  
  1223. <div class="trackdetails">
  1224.  
  1225. <div style="border: 1px solid {color:sidebar borders}; border-radius:7px; padding:5px; font-size:7px; color:{color:title color};">{block:TrackName}{TrackName}{/block:TrackName}</div>
  1226.  
  1227.  
  1228. <div style="border: 1px solid {color:sidebar borders};margin-top:4px; border-radius:7px; padding:5px; font-size:7px; color:{color:title color};">{block:Artist}Artist: {Artist}{/block:Artist} {block:Album}Album: {Album}{/block:Album}<br/></div>
  1229.  
  1230. <div style="border: 1px solid {color:sidebar borders}; margin-top:3px;border-radius:7px; padding:5px; font-size:7px; color:{color:title color};">{PlayCountWithLabel}<br/></div>
  1231.  
  1232.  
  1233. </div>
  1234. </div>
  1235. {/block:AudioPlayer}
  1236. {/block:Audio}
  1237.  
  1238. <!-------------------------- videos -------------------------->
  1239.  
  1240. {block:Video}
  1241. <div class="video" style="text-align:center;">{Video-250}</div>
  1242. {block:Caption}{/block:Caption}
  1243. {/block:Video}
  1244.  
  1245.  
  1246. <!-------------------------- asks -------------------------->
  1247.  
  1248. {block:Answer}
  1249.  
  1250. <div class="question">{Question}</div>
  1251.  
  1252. <div id="asker">{Asker}</div><br>
  1253.  
  1254. <div class="answer"style="margin-top:5px;position:relative">{Answer}</div>
  1255.  
  1256.  
  1257. {/block:Answer}
  1258.  
  1259.  
  1260.  
  1261. <!-------------------------- captions -------------------------->
  1262.  
  1263. {block:Caption}
  1264. {Caption}
  1265.  
  1266.  
  1267. <!-------------------------- post essentials -------------------------->
  1268.  
  1269. {/block:Caption}
  1270.  
  1271. {block:PostNotes}
  1272. <div class="pagenotes">{PostNotes-16}</div>
  1273. {/block:PostNotes}
  1274.  
  1275.  
  1276. <div class="slytherin">
  1277.  
  1278.  
  1279.  
  1280. <div style="text-align:center;display:inline;">
  1281. <!--NOTES-->
  1282. {block:NoteCount}
  1283. <a href="{Permalink}"> <span class="icon-ios-bolt-outline"></span> <span style="font-size:10px;font-family: 'inconsolata', sans-serif; font-weight: lighter;">{NoteCount}</span> </a>
  1284. {/block:NoteCount}
  1285.  
  1286. {block:ContentSource}<a href="{SourceURL}"><span style="margin:5px" class="icon-bubble-comment-streamline-talk"></span></a>
  1287. {/block:ContentSource}
  1288.  
  1289. <a href="{ReblogURL}" target="_blank" class="details"><span class="icon-arrows-ccw"></i></a>
  1290. </div>
  1291. </div>
  1292.  
  1293. </article>
  1294.  
  1295. {block:HasTags}
  1296.  
  1297. <div class="hufflepuff">
  1298. <div class="tags">
  1299. {block:Tags}
  1300. <a href="{TagURL}"></span><span style="padding-left:5px">{Tag}</span> > </a>
  1301. {/block:Tags}
  1302. </div>
  1303.  
  1304.  
  1305. </div>{/block:HasTags}
  1306.  
  1307. {/block:Posts}
  1308.  
  1309.  
  1310.  
  1311.  
  1312.  
  1313. </div>
  1314.  
  1315. </div>
  1316.  
  1317. <!----------------------------- sidebar ------------------------------>
  1318. <div id="scott">
  1319.  
  1320. <div id="sbaricon"><img src="{image:sidebar icon}"></div>
  1321.  
  1322. <div class="narcissa">{text:sidebar title}</div>
  1323.  
  1324. <div id="sbar">
  1325.  
  1326. <div class="descbox">{description}</div>
  1327.  
  1328. <div class="page">
  1329.  
  1330. {block:PreviousPage}<a style="padding:0px;margin-top:0px;margin-left:0px;border:none;background:transparent;color:{color:accent}"href="{PreviousPage}"><</a>{/block:PreviousPage} PAGE {CurrentPage} OF {TotalPages}.{block:NextPage} <a href="{NextPage}"style="padding:0px;margin-top:0px;margin-left:3px;border:none;background:transparent;color:{color:accent}">></a> {/block:NextPage}
  1331.  
  1332. </div>
  1333.  
  1334. </div>
  1335.  
  1336. <br>
  1337.  
  1338. <!------------------------------- links -------------------------------->
  1339.  
  1340. <div id="sbar2">
  1341.  
  1342. {block:ifgenerallinks}
  1343. <div class="nolars">
  1344. <div class="linkoes"><a href="{text:link 1}"><span class="icon-home-house-streamline"></span></a></div>
  1345. <div class="linkoes"><a href="{text:link 2}"><span class="icon-bubble-comment-streamline-talk"></span></a></div>
  1346. <div class="linkoes"><a href="{text:link 3}"><span class="icon-map-pin-streamline"></span></a></div>
  1347. <div class="linkoes"><a href="{text:link 4}"><span class="icon-settings-streamline-1"></span></a></div>
  1348. <div class="linkoes"><a href="{text:link 5}"><span class="icon-locker-streamline-unlock"></span></a></div></div>
  1349. {/block:ifgenerallinks}
  1350.  
  1351. {block:ifnotgenerallinks}{/block:ifnotgenerallinks}
  1352.  
  1353. {block:ifastronomylinks}
  1354. <div class="nolars">
  1355. <div class="linkoes"><a href="{text:link 1}"><span class="icon-2-earth"></span></a></div>
  1356. <div class="linkoes"><a href="{text:link 2}"><span class="icon-8-saturn"></span></a></div>
  1357. <div class="linkoes"><a href="{text:link 3}"><span class="icon-7-sun"></span></a></div>
  1358. <div class="linkoes"><a href="{text:link 4}"><span class="icon-1-venus"></span></a></div>
  1359. <div class="linkoes"><a href="{text:link 5}"><span class="icon-47-rocket"></span></a></div></div>
  1360. {/block:ifastronomylinks}
  1361.  
  1362. {block:ifnotastronomylinks}{/block:ifnotastronomylinks}
  1363.  
  1364. {block:iffemininelinks}
  1365. <div class="nolars">
  1366. <div class="linkoes"><a href="{text:link 1}"><span class="icon-glasses"></span></a></div>
  1367. <div class="linkoes"><a href="{text:link 2}"><span class="icon-rose"></span></a></div>
  1368. <div class="linkoes"><a href="{text:link 3}"><span class="icon-cosmetics"></span></a></div>
  1369. <div class="linkoes"><a href="{text:link 4}"><span class="icon-royalty-crown"></span></a></div>
  1370. <div class="linkoes"><a href="{text:link 5}"><span class="icon-spa"></span></a></div></div>
  1371. {/block:iffemininelinks}
  1372.  
  1373. {block:ifnotfemininelinks}{/block:ifnotfemininelinks}
  1374.  
  1375. {block:ifspookylinks}
  1376. <div class="nolars">
  1377. <div class="linkoes"><a href="{text:link 1}"><span class="icon-zombie-2"></span></a></div>
  1378. <div class="linkoes"><a href="{text:link 2}"><span class="icon-boo"></span></a></div>
  1379. <div class="linkoes"><a href="{text:link 3}"><span class="icon-ghost-1"></span></a></div>
  1380. <div class="linkoes"><a href="{text:link 4}"><span class="icon-spiderweb"></span></a></div>
  1381. <div class="linkoes"><a href="{text:link 5}"><span class="icon-tombstone-1"></span></a></div></div>
  1382. {/block:ifspookylinks}
  1383.  
  1384. {block:ifnotspookylinks}{/block:ifnotspookylinks}
  1385.  
  1386. </div>
  1387.  
  1388. </div>
  1389.  
  1390. <div id="awkward"></div>
  1391.  
  1392.  
  1393. <!-------------------------- dont do the do !! ------------------------->
  1394.  
  1395. <span id="yo">
  1396.  
  1397. <a href="http://desveladas.tumblr.com/"target="_blank"><span class="icon-hand-1"></span></a>
  1398. </span>
  1399. </div></a>
  1400. </body>
  1401.  
  1402.  
  1403. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement