axiumthemes

theme 14 - beauty sleep

Feb 17th, 2018
413
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.10 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <!----------------------------------------------------------------------
  3.  
  4. THEME #14 /// BEAUTY SLEEP
  5. by WOLFTHEMES
  6.  
  7. rules:
  8. 1. do not claim as your own
  9. 2. if you want to use any part
  10. of the code in your own theme
  11. please ask
  12. 3. don't remove the credit
  13. 4. enjoy :)
  14.  
  15.  
  16. Credit:
  17. dashboard captions - neothm.com & magnusthemes.tumblr.com
  18. resize - shythemes.tumblr.com
  19. pop up - odeysseus.tumblr.com
  20.  
  21. -----------------------------------------------------------------------
  22.  
  23. NOTE: If your header image is not landscape it will affect how the
  24. theme looks. if you want to change the width so it is smaller or push
  25. the image upwards more hit ctrl + f and find 'edit header'
  26.  
  27. If your header changes and you want to move the icon title or thin line
  28. you cant hit ctrl + f and find the following sections to edit them:
  29. - edit title
  30. - edit icon
  31. - edit line under title
  32. - edit desc
  33.  
  34. -----------------------------------------------------------------------
  35.  
  36. NOTE: in order for the popup to show you must turn on "popup" and then
  37. you can turn off or on certain updates and events, etc.
  38.  
  39. ----------------------------------------------------------------------->
  40. <html>
  41.  
  42. <head>
  43. <title>{Title}</title>
  44. <link rel="shortcut icon" href="{Favicon}">
  45. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  46. {block:Description}
  47. <meta name="description" content="{MetaDescription}" />
  48. {/block:Description}
  49.  
  50. <meta name="image: icon" content=""/>
  51. <meta name="image: header" content=""/>
  52.  
  53. <meta name="if:minicursors" content="">
  54. <meta name="if:description" content="">
  55. <meta name="if:caption" content=""/>
  56. <meta name="if:popup" content=""/>
  57. <meta name="if:watching" content="">
  58. <meta name="if:reading" content="">
  59. <meta name="if:writing" content="">
  60. <meta name="if:editing" content="">
  61. <meta name="if:update 1" content="">
  62. <meta name="if:update 2" content="">
  63. <meta name="if:update 3" content="">
  64. <meta name="if:update 4" content="">
  65.  
  66. <meta name="color:background" content="#f9f9f9"/>
  67. <meta name="color:ask background" content="#efefef"/>
  68. <meta name="color:accent" content="#e4b7b9"/>
  69. <meta name="color:text" content="#b3b3b3"/>
  70. <meta name="color:link" content="#959595"/>
  71. <meta name="color:borders" content="#000000"/>
  72. <meta name="color:popup border" content="#aaaaaa"/>
  73.  
  74. <meta name="select:post width" content="200" title="200px"/>
  75. <meta name="select:post width" content="225" title="225px"/>
  76. <meta name="select:post width" content="250" title="250px"/>
  77. <meta name="select:post width" content="275" title="275px"/>
  78. <meta name="select:post width" content="300" title="300px"/>
  79. <meta name="select:post width" content="325" title="325px"/>
  80. <meta name="select:post width" content="350" title="350px"/>
  81. <meta name="select:post width" content="375" title="375px"/>
  82. <meta name="select:post width" content="400" title="400px"/>
  83. <meta name="select:post width" content="425" title="425px"/>
  84. <meta name="select:post width" content="450" title="450px"/>
  85. <meta name="select:post width" content="475" title="475px"/>
  86. <meta name="select:post width" content="500" title="500px"/>
  87. <meta name="select:post width" content="540" title="540px"/>
  88.  
  89. <meta name="text:photoset gutter" content="0"/>
  90. <meta name="text:font size" content="12px"/>
  91.  
  92. <meta name="text:title" content="beauty sleep"/>
  93.  
  94. <meta name="text:link 1" content="link"/>
  95. <meta name="text:link 1 url" content="/"/>
  96. <meta name="text:link 2" content="link"/>
  97. <meta name="text:link 2 url" content="/"/>
  98.  
  99. <meta name="text:map title" content="map"/>
  100.  
  101. <meta name="text:pop up text" content="put anything you want here"/>
  102.  
  103. <meta name="text:pop up link 1 url" content="/"/>
  104. <meta name="text:pop up link 1" content="link"/>
  105. <meta name="text:pop up link 2 url" content="/"/>
  106. <meta name="text:pop up link 2" content="link"/>
  107. <meta name="text:pop up link 3 url" content="/"/>
  108. <meta name="text:pop up link 3" content="link"/>
  109. <meta name="text:pop up link 4 url" content="/"/>
  110. <meta name="text:pop up link 4" content="link"/>
  111.  
  112. <meta name="text:update 1 date" content="feb 17"/>
  113. <meta name="text:update 1" content="beauty sleep released"/>
  114. <meta name="text:update 2 date" content="feb 14"/>
  115. <meta name="text:update 2" content="valentines day <3"/>
  116. <meta name="text:update 3 date" content="feb 10"/>
  117. <meta name="text:update 3" content="poli sci test"/>
  118. <meta name="text:update 4 date" content="feb 1"/>
  119. <meta name="text:update 4" content="first day of february"/>
  120.  
  121. <meta name="text:watching" content="black lightning (s1). supergirl (s3). legends of tomorrow (s3). the flash (s5)."/>
  122. <meta name="text:reading" content="red queen. between the blade and the heart. three dark crowns. six of crows."/>
  123. <meta name="text:writing" content="fan fiction"/>
  124. <meta name="text:editing" content="female awesome meme. editorials. misc."/>
  125.  
  126. <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Lato:100,300,400,700,900|Lora:400,700|Muli:200,300,400,600,700,800,900|Nanum+Myeongjo:400,700,800|Open+Sans:300,400,600,700,800|Oxygen:300,400,700|Playfair+Display:400,700,900|Roboto:100,300,400,500,700,900" rel="stylesheet">
  127. <link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
  128. <link rel="stylesheet" href="http://static.tumblr.com/i5s2zks/6kOohwlux/pe-icon-7-stroke.css">
  129.  
  130. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
  131. $(document).ready(function(){
  132. $('.click,.fade').click(function() {
  133. $('#pop').fadeToggle();
  134. });
  135. });
  136. </script>
  137.  
  138. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  139. <script src="https://static.tumblr.com/uopakca/GVcnvdwbq/jquery.style-my-tooltips.js"></script>
  140. <script>
  141. (function($){
  142. $(document).ready(function(){
  143. $('[title]').style_my_tooltips({
  144. tip_follows_cursor:true,
  145. tip_delay_time:90,
  146. tip_fade_speed:700,
  147. attribute:'title'
  148. });
  149. });
  150. })(jQuery);
  151. </script>
  152.  
  153. <script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  154. <script>
  155. !function(a){a.fn.unnest=function(b){var d,e,f,g,h,c=a.extend({yourCaption:".cap",wrapName:".rebloguser",newCaptionUsername:!1,originalPostCaptionUsername:!1,tumblrAvatarClass:".avtar",tumblrAvatars:!0,usernameColon:!0},b),i=c.wrapName.slice(1,c.wrapName.length),j=c.tumblrAvatarClass.slice(1,c.tumblrAvatarClass.length);a(c.yourCaption,this).each(function(){var b=!1,k=!1;a("a.tumblr_blog",this).length<=0&&(b=!0),a(this).find("blockquote").each(function(){a(this).prev().children(".tumblr_blog").length>0&&(a(this).addClass(i),d=a(this).parent().find("a.tumblr_blog").parent("p").html(),c.usernameColon||(d=d.slice(0,-1))),a(this).hasClass(i)&&(a(this).prepend(d),c.tumblrAvatars&&(g=a(this).prev().children("a.tumblr_blog").text(),a(this).prepend('<img src="http://api.tumblr.com/v2/blog/'+g+'.tumblr.com/avatar/30" class="'+j+'" />')))}),a(this).find("a.tumblr_blog:first-of-type").parent("p").remove(),a(c.wrapName,this).each(function(){a(this).parents(c.yourCaption).prepend(a(this))}),h=window.location.hostname;var l=a(this);a.getScript("http://"+h+"/api/read/json").complete(function(){e=l.contents(":not("+c.wrapName+")"),e.text().replace(/\s/g,"").length>0&&(k=l.clone().find(c.wrapName).remove().end().html(),e.remove(),c.newCaptionUsername||b?(f='<blockquote class="'+i+'">',c.tumblrAvatars&&(!b||b&&c.originalPostCaptionUsername)&&(f+='<img src="http://api.tumblr.com/v2/blog/'+h+'/avatar/30" class="'+j+'" />'),(!b||b&&c.originalPostCaptionUsername)&&(f+='<a class="tumblr_blog" href="/">'),(!b||b&&c.originalPostCaptionUsername)&&("undefined"!=typeof tumblr_api_read&&(h=tumblr_api_read.tumblelog.name),console.info(h),f+=h+"</a><p>"),f+=k+"</blockquote>",l.append(f)):l.append('<blockquote class="'+i+'">'+k+"</blockquote>"))})})}}(jQuery);
  156. $('.caption').unnest({
  157. yourCaption: ".cap", //your caption selector, the div wrapping
  158. wrapName: ".rebloguser", //the name of the captions’ new wrapper
  159. newCaptionUsername: true, //if the user adds a new caption, following a series of captions, show their username above the caption
  160. originalPostCaptionUsername: true, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  161. tumblrAvatars: false, //”dashboard style” caption, have the avatar of the blog next to the username
  162. tumblrAvatarClass: ".avatar", //class of the avatar next to the username
  163. usernameColon: false //if turned to false, removes the colon at the end of usernames bc :) seriously :) hwy :)
  164. });
  165. $('.caption').unnest({
  166. newCaptionUsername: true,
  167. tumblrAvatars: false,
  168. usernameColon: false
  169. });
  170. </script>
  171.  
  172. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  173. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  174. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  175. <script>
  176. $(document).ready(function(){
  177. $('.photo-slideshow').pxuPhotoset({
  178. lightbox: true,
  179. rounded: false,
  180. gutter: '{text:photoset gutter}px',
  181. borderRadius: '0px',
  182. photoset: '.photo-slideshow',
  183. photoWrap: '.photo-data',
  184. photo: '.pxu-photo'
  185. });
  186. });
  187. </script>
  188.  
  189. </head>
  190.  
  191. <style type="text/css">
  192.  
  193.  
  194. /*-------------- SCROLLBAR ----------------*/
  195. ::-webkit-scrollbar {
  196. width:17px;
  197. height:17px;
  198. }
  199. ::-webkit-scrollbar {
  200. background-color:{color:background}; /* background color */
  201. }
  202. ::-webkit-scrollbar-track {
  203. border:8px solid {color:background}; /* background color */
  204. background-color:rgb(230,230,230); /* light border color */
  205. }
  206. ::-webkit-scrollbar-thumb {
  207. border:8px solid {color:background}; /* background color */
  208. background-color:{color:accent}; /* dark border color */
  209. min-height:24px;
  210. min-width:24px;
  211. }
  212. /*-------------- TOOLTIP ----------------*/
  213.  
  214. #s-m-t-tooltip {
  215. max-width:300px;
  216. padding:3px 6px 3px 6px;
  217. margin:20px 20px 10px 6px;
  218. font-family: 'Lato', sans-serif;
  219. font-size:calc({text:font size} - 3px);
  220. background: {color:background};color:#888;
  221. border: 1px solid #eee;
  222. border-radius: 5px;
  223. z-index:9999999;}
  224.  
  225. ::selection {
  226. background: #eee; /* WebKit/Blink Browsers */
  227. color: #000;
  228. }
  229. ::-moz-selection {
  230. background: #eee; /* Gecko Browsers */
  231. color: #000;
  232. }
  233.  
  234.  
  235. /*-------------- BASIC HTML ----------------*/
  236.  
  237.  
  238. html {
  239. overflow-x:hidden;
  240. background: {color:background};
  241. {block:ifminicursor}cursor: url(http://www.rw-designer.com/cursor-extern.php?id=27887), progress !important;{/block:ifminicursor}
  242. }
  243.  
  244.  
  245. a:hover, img:hover {
  246. {block:ifminicursor}cursor: url(http://www.rw-designer.com/cursor-extern.php?id=77322), progress !important;{/block:ifminicursor}
  247. }
  248.  
  249. body {
  250. font-size:{text:font size};
  251. color: {color:text};
  252. font-family: 'Muli', sans-serif;
  253. }
  254.  
  255. hr {
  256. border: none;
  257. height: 1px;
  258. background: #eee;
  259. }
  260.  
  261. a {
  262. text-decoration: none;
  263. color: #ccc;
  264. -webkit-transition: all ease 0.8s;
  265. -moz-transition: all ease 0.8s;
  266. transition: all ease 0.8s;
  267. }
  268.  
  269. a:hover, a:active, .links span:hover {
  270. color:{color:accent};
  271. -webkit-transition: all ease 0.8s;
  272. -moz-transition: all ease 0.8s;
  273. transition: all ease 0.8s;
  274. }
  275.  
  276. b {
  277. color: #000000;
  278. }
  279.  
  280. blockquote {
  281. border-left: 1px solid #333;
  282. margin-right: 20px;
  283. padding-left: 10px;
  284. }
  285.  
  286. /*------------------------------------------*/
  287.  
  288. iframe.tmblr-iframe {
  289. z-index:2!important;
  290. top: 00px;
  291. right: 10px;
  292. opacity:0.2;
  293. /* delete invert(1) from here */
  294. filter:invert(1) contrast(150%);
  295. -webkit-filter:invert(1) contrast(150%);
  296. -o-filter:invert(1) contrast(150%);
  297. -moz-filter:invert(1) contrast(150%);
  298. -ms-filter:invert(1) contrast(150%);
  299. /* to here if your blog has a dark background */
  300. transform:scale(0.45);
  301. transform-origin:100% 0;
  302. -webkit-transform:scale(0.45);
  303. -webkit-transform-origin:100% 0;
  304. -o-transform:scale(0.45);
  305. -o-transform-origin:100% 0;
  306. -moz-transform:scale(0.45);
  307. -moz-transform-origin:100% 0;
  308. -ms-transform:scale(0.45);
  309. -ms-transform-origin:100% 0;}
  310.  
  311. iframe.tmblr-iframe:hover {
  312. opacity:0.2!important;
  313. -webkit-transition: all ease 0.8s;
  314. -moz-transition: all ease 0.8s;
  315. transition: all ease 0.8s;}
  316.  
  317. /*------------------------------------------*/
  318.  
  319. #frontpg {
  320. width: 100vw;
  321. height: 100vh;
  322. background:{color:background};
  323. z-index:9;
  324. }
  325.  
  326. #frontpg .header {
  327. position: absolute;
  328. left: calc(50vw - 350px); /* edit header left/right position */
  329. top: calc(25vh); /* edit header top/bottom position */
  330. }
  331.  
  332. #frontpg .header img {
  333. width: 700px; /* edit header width */
  334. height: auto; /* edit header height */
  335. }
  336.  
  337. #frontpg .icon {
  338. z-index: 2;
  339. position: absolute;
  340. bottom: calc(20vh); /* edit icon top/bottom position */
  341. left: calc(50vw - 30px);/* edit icon left/right position */
  342. }
  343.  
  344. #frontpg .icon img {
  345. width: 60px; /* edit icon width */
  346. height: 60px; /* edit icon height */
  347. border-radius: 100%;
  348. border: 3px solid {color:background};
  349. }
  350.  
  351. #frontpg .title {
  352. text-align: center;
  353. width: 500px;
  354. position: absolute;
  355. bottom: 17vh; /* edit title top/bottom position */
  356. left: calc(50vw - 250px); /* edit title left/right position */
  357. font-style: italic;
  358. font-family: 'Lora', serif;
  359. font-weight:400;
  360. font-size: calc({text:font size} + 1px);
  361. }
  362.  
  363. #frontpg .desc {
  364. text-align: center;
  365. width: 500px;
  366. position: absolute;
  367. bottom: 12vh; /* edit desc top/bottom position */
  368. left: calc(50vw - 250px); /* edit desc left/right position */
  369. font-family: 'Muli', sans-serif;
  370. font-weight:400;
  371. font-size: calc({text:font size} - 2px);
  372. }
  373.  
  374.  
  375. #frontpg .line {
  376. position: absolute;
  377. left: calc(50vw - 250px); /* edit line under title left/right position */
  378. bottom: 10vh; /* edit line under title top/bottom position */
  379. }
  380.  
  381. .line {
  382. width: 500px;
  383. height: 1px;
  384. background:{color:accent};
  385. }
  386.  
  387. #topbar {
  388. top: 0;
  389. left: calc(50vw - {select:post width}px);
  390. position: fixed;
  391. width:calc({select:post width}px*2);
  392. height: 36px;
  393. background:{color:background};
  394. z-index:8;
  395. }
  396.  
  397. #topbar .icon img {
  398. width: 30px;
  399. height: 30px;
  400. position: absolute;
  401. left: 5px;
  402. border-radius: 100%;
  403. z-index:2;
  404. border: 3px solid {color:background};
  405. }
  406.  
  407. #topbar .line {
  408. position: absolute;
  409. z-index:1;
  410. margin-top: 16px;
  411. left: 5px;
  412. width: calc(100% - 10px);
  413. }
  414.  
  415. #topbar .title {
  416. z-index:2;
  417. text-align: left;
  418. max-width: 500px;
  419. position: absolute;
  420. left: 39px;
  421. margin-top: 9px;
  422. font-style: italic;
  423. font-family: 'Lora', serif;
  424. font-weight:400;
  425. font-size: calc({text:font size} - 2px);
  426. padding: 2px 5px;
  427. background:{color:background};
  428. }
  429.  
  430. #topbar .links {
  431. position: absolute;
  432. z-index:2;
  433. right:5px;
  434. margin-top: 9px;
  435. }
  436.  
  437. #topbar .links a {
  438. margin-left: 20px;
  439. font-family: 'Lora', serif;
  440. font-weight:400;
  441. font-size: calc({text:font size} - 2px);
  442. padding: 2px 5px;
  443. background:{color:background};
  444. }
  445.  
  446. /*------------------------------------------*/
  447.  
  448. #pagination {
  449. font-family: 'Lato', sans-serif;
  450. width: {select:post width}px;
  451. text-align: center;
  452. margin-bottom: 100px;
  453. margin-top: 100px;
  454. left: 0;
  455. word-spacing:10px;
  456. font-size: calc({text:font size} - 2px);
  457. }
  458.  
  459. #pagination .current {
  460. color: {color:accent};
  461. }
  462. #pagination a {
  463. color:{color:link};
  464. }
  465.  
  466. #pagination a:hover {
  467. color:{color:accent};
  468. }
  469.  
  470.  
  471. /*------------------------------------------*/
  472.  
  473. #thecontainer {
  474. width:{select:post width}px;
  475. position:absolute;
  476. {block:IndexPage}top: 100vh;{/block:IndexPage}
  477. {block:PermalinkPage}top: 10vh;{/block:PermalinkPage}
  478. left: calc(50vw - ({select:post width}px/2));
  479. }
  480.  
  481. .posts {
  482. width: {select:post width}px!important;
  483. font-size:{text:font size};
  484. color: {color:text};
  485. margin-top: 80px;
  486. }
  487.  
  488. .posts .line {
  489. width:{select:post width}px;
  490. margin-top: 80px;
  491. }
  492.  
  493. .posts:first-child {
  494. margin-top: 0;
  495. }
  496.  
  497. .posts a {
  498. color: {color:accent};
  499. }
  500.  
  501. .posts a:hover {
  502. color: {color:text};
  503. }
  504.  
  505. /*------------------------------------------*/
  506.  
  507. #captions {
  508. width: 100%;font-size:{text:font size};
  509. }
  510.  
  511.  
  512. .caption {
  513. margin-bottom: 10px;
  514. {block:ifCaption}display: block;{/block:IfCaption}
  515. {block:ifNotCaption}display:none;{/block:IfNotCaption}
  516.  
  517. }
  518.  
  519. .caption img, .cap img, #askcaption img {
  520. margin: 0;
  521. padding: 0;
  522. max-width: calc({select:post width}px - 20px);
  523. }
  524.  
  525. .rebloguser {
  526. margin-bottom: 3px;
  527. margin-top: 15px;
  528. padding-top: 10px;
  529. }
  530.  
  531. .rebloguser:first-child {
  532. border-top: 0px;
  533. padding-top: 10px;
  534. }
  535.  
  536. .rebloguser a {
  537. font-family: 'Karla', sans-serif;
  538. font-weight: 400;
  539. font-size: 10px;
  540. padding: 3px 5px;
  541. background:{color:background};
  542. border: 1px solid {color:accent};
  543. color: {color:text};
  544. }
  545.  
  546. .rebloguser a:hover {
  547. color: {color:accent};
  548. }
  549.  
  550. img.avatar {
  551. display:none;
  552. height: 14px;
  553. width: 14px;
  554. border-radius: 100%;
  555. margin-left: 10px;
  556. margin-right: 3px;
  557. float: left;
  558. }
  559.  
  560. /*------------------------------------------*/
  561.  
  562. .date {
  563. position: absolute;
  564. text-transform:lowercase;
  565. left: 5px;
  566. padding: 3px 5px;
  567. font-size:calc({text:font size} - 2px);
  568. }
  569.  
  570. .reblog {
  571. position: absolute;
  572. text-transform:lowercase;
  573. right: 5px;
  574. padding: 3px 5px;
  575. font-size:calc({text:font size} - 2px);
  576. }
  577.  
  578. .tags {
  579. position: absolute;
  580. width: {select:post width}px;
  581. margin-top: 25px;
  582. font-size:calc({text:font size} - 2px);
  583. }
  584.  
  585. .tags a {
  586. margin-right: 10px;
  587. }
  588.  
  589. .postinfo {
  590. {block:PermalinkPage}
  591. font-size:calc({text:font size} - 2px);
  592. {/block:PermalinkPage}
  593. }
  594. /*------------------------------------------*/
  595.  
  596. .tmblr-lightbox, #tumblr_lightbox {
  597. background-color:rgba(245,245,245,.80) !important;
  598. }
  599. .vignette, #vignette {
  600. opacity:0;
  601. }
  602. .lightbox-image, #tumblr_lightbox img {
  603. box-shadow:none !important;
  604. border-radius:0 !important;
  605. max-width:none;
  606. }
  607.  
  608. /*------------------------------------------*/
  609.  
  610. .posttitle {
  611. border: 1px solid #eee;
  612. color: #737373;
  613. padding: 10px;
  614. margin-bottom: 10px;
  615. background: {color:background};
  616. text-align: center;
  617. font-size: 13px;
  618. text-transform: capitalize;
  619. font-family: 'Lato', sans-serif;
  620. }
  621. /*------------------------------------------*/
  622.  
  623. .question {
  624. padding: 10px 5px;
  625. color: {color:text};
  626. }
  627.  
  628. .question b {
  629. font-family: 'Lato', sans-serif;
  630. }
  631.  
  632. .question img {
  633. float:right;
  634. width: 24px;
  635. height: 24px;
  636. margin-top: 3px;
  637. margin-right: 15px;
  638. margin-left: 5px;
  639. border-radius: 10px;
  640. }
  641.  
  642. .askbox {
  643. z-index:7;
  644. background:{color:ask background};
  645. padding: 10px 10px 10px 10px;
  646. width: calc({select:post width}px - 100px);
  647. border-radius: 5px;
  648. margin-right: 60px;
  649. }
  650.  
  651. .ask, .quest {
  652. z-index:7;
  653. display:inline;
  654. }
  655.  
  656. .ask {
  657. font-family: 'Lora', serif;
  658. z-index:5;
  659. margin-right: 5px;
  660. text-transform: lowercase;
  661. }
  662.  
  663. .ask a {
  664. font-weight: 700px;
  665. color: {color:accent}!important;
  666. }
  667.  
  668. .ask a:hover {
  669. color:#333!important;
  670. }
  671.  
  672. #askcaption {
  673. margin-top: 10px;
  674. padding-top: 10px;
  675. }
  676.  
  677. .answerer {
  678. font-family: 'Lora', serif;
  679. margin-left: 20px;
  680. }
  681.  
  682. .answer img {
  683. width: 20px;
  684. float: left;
  685. height: 20px;
  686. position: absolute;
  687. left: 15px;
  688. border-radius: 5px;
  689. }
  690.  
  691. .answ {
  692. background: {color:ask background};
  693. padding: 10px;
  694. margin: 15px 10px 10px 10px;
  695. border-radius: 5px;
  696. }
  697.  
  698. /*------------------------------------------*/
  699.  
  700. .quote {
  701. padding: 20px 20px;
  702. width: calc({select:post width}px - 80px);
  703. font-family: 'Oxygen', sans-serif;
  704. font-style: italic;
  705. text-align: justify;
  706. font-size:calc({text:font size} + 1px);
  707. border: 1px solid {color:accent};
  708. margin: 10px 20px 10px 20px;
  709. }
  710.  
  711. /*------------------------------------------*/
  712.  
  713. .chats ul li, .chats ol li {
  714. list-style-type: none!important;
  715. padding: 10px;
  716. background:#ddd;
  717. font-family: 'Lato', sans-serif;
  718. }
  719.  
  720. .chats li:nth-of-type(2n) {
  721. background: transparent;
  722. }
  723.  
  724. li .line {
  725. line-height: 2em;
  726. }
  727.  
  728. /*------------------------------------------*/
  729.  
  730. .audio {
  731. width: {select:post width}px;
  732. }
  733.  
  734. .tumblr_audio_player {
  735. border-radius: 0 !important;
  736. width: {select:post width}px !important;
  737. }
  738.  
  739. .spotify_audio_player {
  740. width: {select:post width}px;
  741. height: 80px !important;
  742.  
  743. }
  744.  
  745. /*------------------------------------------*/
  746.  
  747.  
  748. .click { cursor:help; } /* for question mark cursor on hover */
  749.  
  750. #pop {
  751. width:100%;
  752. height:100%;
  753. top:0;left:0;
  754. position:fixed;
  755. z-index:999;
  756. background:rgba(255,255,255,.9); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.) */
  757. display:none;
  758. }
  759. .fade {
  760. top:0;
  761. left:0;
  762. position:fixed;
  763. z-index:1000;
  764. width:100%;
  765. height:100%;
  766. }
  767.  
  768. .popup {
  769. top:50%;
  770. left:50%;
  771. transform:translate(-50%,-50%);
  772. position:fixed;
  773. padding:20px; /* padding of popup box */
  774. z-index:10000;
  775. max-width:600px; /* width of popup */
  776. background:#f9f9f9;
  777. }
  778.  
  779. .maptitle {
  780. font-family: 'Lora', serif;
  781. font-weight: 400;
  782. font-size:calc({text:font size} + 4px);
  783. margin-bottom: 5px;
  784. }
  785.  
  786. .maplinks {
  787. font-family: 'Lora', serif;
  788. font-weight: 400;
  789. font-size:calc({text:font size} - 2px);
  790. }
  791.  
  792. .maplinks a{
  793. margin-right: 5px;
  794. }
  795.  
  796. .maplinks a::after {
  797. content:';';
  798. }
  799.  
  800. #pop .line {
  801. height: 1px;
  802. margin: 20px;
  803. width: 560px;
  804. }
  805.  
  806. .updates {
  807. margin: 10px 50px;
  808. }
  809.  
  810. .u1 {
  811. text-transform: lowercase;
  812. font-family: 'Lora', serif;
  813. font-weight: 700;
  814. text-align:right!important;
  815. }
  816.  
  817. td.u1 {vertical-align:top;
  818. padding-right: 15px;border-right: 1px solid #eee;
  819. }
  820.  
  821. td.u2 {vertical-align:top;
  822. padding-left: 15px;
  823. }
  824.  
  825. .u2 {
  826. text-align: left;
  827. font-family: 'Muli', sans-serif;
  828. font-weight: 300;
  829. }
  830.  
  831. .updates table {
  832. padding-bottom: 20px;
  833. margin-bottom: 20px;
  834. border-bottom: 1px solid #eee;
  835. }
  836.  
  837. .popuptext {
  838. text-align: center;
  839. font-style:italic;
  840. }
  841.  
  842. .currently {
  843. margin: 10px 50px;
  844. }
  845.  
  846. td.event {
  847. font-family: 'Lora', serif;
  848. vertical-align:top;
  849. text-align: right;
  850. font-weight: 700;
  851. padding-right: 5px;border-right: 1px solid #eee;
  852. }
  853.  
  854. td.currents {
  855. vertical-align:top;
  856. padding-left: 5px;
  857. font-family: 'Muli', sans-serif;
  858. font-weight: 300;
  859. }
  860.  
  861. .currently table td {
  862. padding-bottom: 10px;
  863. }
  864.  
  865.  
  866. .permalinks {
  867. color: #999999;
  868. width: {select:post width}px;
  869. max-height: 500px;
  870. overflow-y:scroll;
  871. overflow-x:hidden;
  872. margin-bottom: 100px;
  873. }
  874.  
  875. .permalinks ol li {
  876. list-style-type:none;
  877. margin:0;
  878. padding: 0;
  879. line-height: 3;
  880. }
  881.  
  882. .permalinks li {
  883. margin-bottom: 15px;
  884. }
  885.  
  886. .permalinks a {
  887. color: #333;
  888. }
  889.  
  890. .permalinks a:hover {
  891. color: {color:accent}!important;
  892. }
  893.  
  894. .permalinks img {
  895. height: 12px;
  896. width:12px;
  897. float:left;
  898. margin-top: 10px;
  899. margin-right: 10px;
  900. border-radius: 100%;
  901. }
  902.  
  903. </style>
  904. <body>
  905.  
  906. <div id="pop"> <div class="fade"></div>
  907. <div class="popup">
  908. <div class="maptitle">{text:map title}</div>
  909. <div class="maplinks">
  910. <a href="{text:pop up link 1 url}">{text:pop up link 1}</a>
  911. <a href="{text:pop up link 2 url}">{text:pop up link 2}</a>
  912. <a href="{text:pop up link 3 url}">{text:pop up link 3}</a>
  913. <a href="{text:pop up link 4 url}">{text:pop up link 4}</a>
  914. </div>
  915. <div class="line"></div>
  916. <div class="popuptext">{text:pop up text}</div>
  917. <div class="line"></div>
  918. <div class="updates"><table>
  919. {block:ifupdate1}<tr><td class="u1">{text:update 1 date}</td><td class="u2">{text:update 1}</td></tr>{/block:ifupdate1}
  920. {block:ifupdate2}<tr><td class="u1">{text:update 2 date}</td><td class="u2">{text:update 2}</td></tr>{/block:ifupdate1}
  921. {block:ifupdate3}<tr><td class="u1">{text:update 3 date}</td><td class="u2">{text:update 3}</td></tr>{/block:ifupdate1}
  922. {block:ifupdate4}<tr><td class="u1">{text:update 4 date}</td><td class="u2">{text:update 4}</td></tr>{/block:ifupdate1}
  923. </table></div>
  924. <div class="currently"><table>
  925. {block:ifwatching}<tr><td class="event">watching</td><td class="currents">{text:watching}</td></tr>{/block:ifwatching}
  926. {block:ifreading}<tr><td class="event">reading</td><td class="currents">{text:reading}</td></tr>{/block:ifreading}
  927. {block:ifwriting}<tr><td class="event">writing</td><td class="currents">{text:writing}</td></tr>{/block:ifwriting}
  928. {block:ifediting}<tr><td class="event">editing</td><td class="currents">{text:editing}</td></tr>{/block:ifediting}
  929. </table></div>
  930. </div>
  931. </div>
  932.  
  933.  
  934. {block:IndexPage}
  935. <div id="frontpg">
  936. <div class="header"><img src="{image: header}"></div>
  937. <div class="icon"><img src="{image: icon}"></div>
  938. <div class="title">{text:title}</div>
  939. {block:ifdescription}<div class="desc">{Description}</div>{/block:ifdescription}
  940. <div class="line"></div>
  941. </div>
  942. {/block:IndexPage}
  943. <div id="topbar">
  944. <div class="icon"><img src="{image: icon}"></div>
  945. <div class="title">{text:title}</div>
  946. <div class="line"></div>
  947. <div class="links">
  948. <a href="/">home</a>
  949. <a href="/ask">ask</a>
  950. {block:ifpopup}<a class="click">map</a>{/block:ifpopup}
  951. <a href="{text:link 1 url}">{text:link 1}</a>
  952. <a href="{text:link 2 url}">{text:link 2}</a>
  953. </div>
  954. </div>
  955.  
  956.  
  957. <div id="thecontainer">
  958.  
  959.  
  960. {block:Posts}
  961.  
  962. <div class="posts" id="{PostID}">
  963.  
  964.  
  965. {block:Text}{block:Title}<div class="posttitle">{Title}</div>{/block:Title}{/block:Text}
  966.  
  967. {block:Photo}<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">
  968. <img style="width:{select:post width}px;" src="{PhotoURL-HighRes}">
  969. </a>{block:Photo}
  970.  
  971. {block:Photoset}<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><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><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>{/block:Photoset}
  972.  
  973. {block:Chat}{block:Title}<div class="posttitle">{Title}</div></a>{/block:Title}{/block:Chat}
  974.  
  975. {block:Video}<div class="video">{Video-500}</div>{block:Video}
  976.  
  977. {block:Audio}<div class="audio spotify_audio_player">{AudioEmbed}</div>{/block:Audio}
  978.  
  979. {block:Link}<div class="posttitle"><a href="{URL}">{Name}</a></div>{/block:Link}
  980.  
  981. {block:Quote}
  982. <div class="quote">{Quote}</div>
  983. {/block:Quote}
  984.  
  985. <div id="captions">
  986.  
  987. {block:Answer}
  988. <div class="question"><img src="{AskerPortraitURL-24}"><div class="askbox"><div class="ask"> {Asker} asked:</div><div class="quest">{Question}</div></div>
  989. <div id="askcaption">
  990. <div class="answer"><img src="{AnswererPortraitURL-24}"> {block:Answerer}<div class="answerer">{Answerer} said:</div> {/block:Answerer}<div class="answ">{Answer}</div></div></div></div>
  991. {/block:Answer}
  992.  
  993. {block:Text}<div class="caption">
  994. {block:Reblogs}
  995. <div class="rebloguser">
  996. {block:IsNotOriginalEntry}
  997. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  998. {/block:IsNotOriginalEntry}
  999. {block:IsOriginalEntry}
  1000. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1001. {/block:IsOriginalEntry}
  1002. </div>
  1003. <div class="cap">
  1004. {Body}
  1005. </div>
  1006. {/block:Reblogs}
  1007. {block:NotReblog}
  1008. {block:Caption}
  1009. <div class="cap">
  1010. {Caption}
  1011. </div>
  1012. {/block:Caption}
  1013. {/block:NotReblog}</div>
  1014. {/block:Text}
  1015.  
  1016. {block:Photo}
  1017. <div class="caption">
  1018. {block:Reblogs}
  1019. <div class="rebloguser">
  1020. {block:IsNotOriginalEntry}
  1021. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1022. {/block:IsNotOriginalEntry}
  1023. {block:IsOriginalEntry}
  1024. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1025. {/block:IsOriginalEntry}
  1026. </div>
  1027. <div class="cap">
  1028. {Body}
  1029. </div>
  1030. {/block:Reblogs}
  1031. {block:NotReblog}
  1032. {block:Caption}
  1033. <div class="cap">
  1034. {Caption}
  1035. </div>
  1036. {/block:Caption}
  1037. {/block:NotReblog}</div>
  1038. {/block:Photo}
  1039.  
  1040. {block:Photoset}
  1041. <div class="caption">
  1042. {block:Reblogs}
  1043. <div class="rebloguser">
  1044. {block:IsNotOriginalEntry}
  1045. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1046. {/block:IsNotOriginalEntry}
  1047. {block:IsOriginalEntry}
  1048. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1049. {/block:IsOriginalEntry}
  1050. </div>
  1051. <div class="cap">
  1052. {Body}
  1053. </div>
  1054. {/block:Reblogs}
  1055. {block:NotReblog}
  1056. {block:Caption}
  1057. <div class="cap">
  1058. {Caption}
  1059. </div>
  1060. {/block:Caption}
  1061. {/block:NotReblog}</div>
  1062. {/block:Photoset}
  1063.  
  1064. {block:Video}
  1065. <div class="caption">
  1066. {block:Reblogs}
  1067. <div class="rebloguser">
  1068. {block:IsNotOriginalEntry}
  1069. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1070. {/block:IsNotOriginalEntry}
  1071. {block:IsOriginalEntry}
  1072. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1073. {/block:IsOriginalEntry}
  1074. </div>
  1075. <div class="cap">
  1076. {Body}
  1077. </div>
  1078. {/block:Reblogs}
  1079. {block:NotReblog}
  1080. {block:Caption}
  1081. <div class="cap">
  1082. {Caption}
  1083. </div>
  1084. {/block:Caption}
  1085. {/block:NotReblog}</div>
  1086. {/block:Video}
  1087.  
  1088. {block:Audio}
  1089. <div class="caption">
  1090. {block:Reblogs}
  1091. <div class="rebloguser">
  1092. {block:IsNotOriginalEntry}
  1093. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1094. {/block:IsNotOriginalEntry}
  1095. {block:IsOriginalEntry}
  1096. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1097. {/block:IsOriginalEntry}
  1098. </div>
  1099. <div class="cap">
  1100. {Body}
  1101. </div>
  1102. {/block:Reblogs}
  1103. {block:NotReblog}
  1104. {block:Caption}
  1105. <div class="cap">
  1106. {Caption}
  1107. </div>
  1108. {/block:Caption}
  1109. {/block:NotReblog}</div>
  1110. {/block:Audio}
  1111.  
  1112. {block:Quote}
  1113. <div class="caption">
  1114. {block:Reblogs}
  1115. <div class="sourceq">{Source}</div>
  1116. {/block:Reblogs}
  1117. {block:NotReblog}
  1118. <div class="sourceq">{Source}</div>
  1119. {/block:NotReblog}</div>
  1120. {/block:Quote}
  1121.  
  1122. {block:Link}{block:Description}<div class="caption">{Description}</div>{/block:Description}{/block:Link}
  1123.  
  1124. {block:Chat}<div class="chats">{block:Lines}<li class="lines">{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}</div>{/block:Chat}
  1125.  
  1126.  
  1127. </div>
  1128.  
  1129. <div class="postinfo">
  1130. {block:IndexPage}
  1131. {block:Date}<div class="date"><a href="{Permalink}" title="{NoteCountWithLabel}">{ShortMonth} {DayOfMonthWithZero}</a></div>{/block:Date}
  1132. <!----{block:ContentSource}<a href="{SourceURL}" title="{SourceTitle}"></a>{/block:ContentSource}
  1133. {block:RebloggedFrom}<div class="reblgfrm"><a href="{ReblogParentURL}" title="{ReblogParentName}">{ReblogParentName}</a></div>{/block:RebloggedFrom}---->
  1134.  
  1135.  
  1136. <div class="reblog"><a href="{ReblogURL}" title="reblog">reblog.</a>
  1137. </div>
  1138. {block:HasTags}
  1139. <div class="tags">
  1140. {block:Tags}<a href="{TagURL}" title="{Tag}">#{Tag}</a>{/block:Tags}
  1141. </div>{/block:HasTags}
  1142. {/block:IndexPage}
  1143. {block:PermalinkPage}
  1144. <div class="data">{block:Date}{Month} {DayOfMonthWithZero} {Year}.{/block:Date}</div>
  1145. {block:NoteCount}<div> {NoteCountWithLabel} </div>{/block:NoteCount}
  1146. {block:ContentSource}via <a href="{SourceURL}" title="">{SourceTitle}</a>{/block:ContentSource}
  1147. {block:RebloggedFrom}<div class="reblgfrm">from <a href="{ReblogParentURL}">{ReblogParentName}</a></div>{/block:RebloggedFrom}
  1148.  
  1149. {block:HasTags}
  1150. <div class="tags">
  1151. tagged; {block:Tags}<a href="{TagURL}" title="{Tag}">#{Tag}</a>{/block:Tags}
  1152. </div>{/block:HasTags}
  1153. {/block:PermalinkPage}
  1154. </div>
  1155.  
  1156. <div class="line"></div>
  1157.  
  1158. </div>
  1159.  
  1160. {/block:Posts}
  1161.  
  1162. <div id="pagination">
  1163. {block:IndexPage}
  1164. {block:Pagination}
  1165. {block:PreviousPage}
  1166. <a class="prev" href="{PreviousPage}" title="back">back</a>
  1167. {/block:PreviousPage}
  1168. {block:JumpPagination length="5"}
  1169. {block:CurrentPage}<span class="current">{PageNumber}</span>{/block:CurrentPage}
  1170. {block:JumpPage}<a class="jump" href="{URL}" title="page {PageNumber}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1171. {block:NextPage}
  1172. <a class="next" href="{NextPage}" title="next">next</a>
  1173. {/block:NextPage}
  1174. {/block:Pagination}{/block:IndexPage}
  1175. </div>
  1176.  
  1177.  
  1178. </div>
  1179.  
  1180.  
  1181. <!---------------DONT TOUCH PLS------------------->
  1182. <a href="http://wolfthemes.tumblr.com" style="position:fixed; bottom:10px; right:10px; font-size:10px;" title="wolfthemes">wolf</a>
  1183. <!------------------------------------------------>
  1184. </body>
  1185. </html>
Advertisement
Add Comment
Please, Sign In to add comment