API tools faq
paste
Advertisement
chaaostheory

THEME 01: MAYBE IT'S MAGIC

chaaostheory
Jul 19th, 2018
1,433
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5. <title>{Title}</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}
  9. <meta name="description" content="{MetaDescription}" />
  10. {/block:Description}
  11.  
  12. <!--google fonts-->
  13. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
  14. <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  15. <link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">
  16.  
  17. <link href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i" rel="stylesheet">
  18. <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
  19. <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
  20.  
  21. <!-- fontawesome-->
  22. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  23.  
  24. <link href="https://static.tumblr.com/ewjs2wm/ek2pau39z/hint.css" rel="stylesheet" type="text/css">
  25.  
  26.  
  27. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  28.  
  29. <!--tool tips-->
  30. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js" type="text/javascript"></script>
  31. <script>
  32. (function($){
  33. $(document).ready(function(){
  34. $("[title]").style_my_tooltips({tip_delay_time:20});
  35. });
  36. })(jQuery);
  37. </script>
  38.  
  39. /* unnest captions via @neothms and @magnusthemes */
  40.  
  41. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js" type="text/javascript"></script>
  42. <script> $(function(){
  43. $(document).ready(function(){
  44. $('.post').unnest({
  45. yourCaption: ".caption",
  46. wrapName: ".tumblr_parent",
  47. newCaptionUsername: false,
  48. originalPostCaptionUsername: false,
  49. tumblrAvatars: true,
  50. tumblrAvatarClass: ".tumblr_avatar",
  51. usernameColon: false
  52. });
  53. }); }); </script>
  54.  
  55. <!-- meta tags -->
  56.  
  57. <meta name="color:background" content="#f9f8f9"/>
  58. <meta name="color:notes" content="#f9f8f9"/>
  59.  
  60. <meta name="color:font" content="#000"/>
  61. <meta name="color:bold" content="#000"/>
  62. <meta name="color:italic" content="#000"/>
  63. <meta name="color:link" content="#000"/>
  64. <meta name="color:link hover" content="#fff"/>
  65.  
  66. <meta name="color:post bg" content="#fff"/>
  67. <meta name="color:about bg" content="#e5e5ea" />
  68. <meta name="color:tooltips bg" content="#fff"/>
  69. <meta name="color:note icon bg" content="#fff"/>
  70.  
  71. <meta name="color:title text" content="#000"/>
  72. <meta name="color:title bg" content="#e5e5ea" />
  73.  
  74. <meta name="color:subtitle text" content="#fff"/>
  75. <meta name="color:subtitle bg" content="#000"/>
  76.  
  77. <meta name="color:chat 1" content="#e5e5ea" />
  78. <meta name="color:chat 2" content="#e8f3f9" />
  79.  
  80. <meta name="image:background" content=""/>
  81. <meta name="image:note" content=""/>
  82.  
  83. <meta name="if:circle icons" content=""/>
  84. <meta name="if:rounded corners" content=""/>
  85.  
  86.  
  87. <meta name="text:subtitle" content="maybe it's luck">
  88. <meta name="text:font size" content="12">
  89.  
  90. <meta name="text:home link icon" content="fas fa-home">
  91. <meta name="text:ask link icon" content="fas fa-envelope">
  92. <meta name="text:link 1 icon" content="fas fa-users">
  93. <meta name="text:link 2 icon" content="fas fa-map-marked-alt ">
  94. <meta name="text:link 3 icon" content="fas fa-map-marked-alt ">
  95.  
  96. <meta name="text:home link title" content="refresh">
  97. <meta name="text:ask link title" content="message">
  98. <meta name="text:link 1 title" content="link 1">
  99. <meta name="text:link 2 title" content="link 2">
  100. <meta name="text:link 3 title" content="link 3">
  101.  
  102. <meta name="text:link 1 url" content="/">
  103. <meta name="text:link 2 url" content="/">
  104. <meta name="text:link 3 url" content="/">
  105.  
  106. <meta name="select:body font" title="open sans" content="open sans"/>
  107. <meta name="select:body font" title="roboto" content="roboto"/>
  108. <meta name="select:body font" title="karla" content="karla"/>
  109.  
  110. <meta name="select:italic font" title="old standard tt" content="Old Standard TT" />
  111. <meta name="select:italic font" title="playfair display" content="Playfair Display" />
  112. <meta name="select:italic font" title="roboto slab" content="Roboto Slab" />
  113.  
  114. <meta name="select:text align" title="left" content="left"/>
  115. <meta name="select:text align" title="right" content="right"/>
  116. <meta name="select:text align" title="center" content="center"/>
  117. <meta name="select:text align" title="justify" content="justify"/>
  118.  
  119. <style type="text/css">
  120.  
  121. /*scrollbar styling*/
  122.  
  123. ::-webkit-scrollbar {
  124. width:5px;
  125. border-radius: 5px;
  126. height: auto;
  127. padding:5px
  128.  
  129. }
  130. ::-webkit-scrollbar-thumb {
  131. background-color:{color:post bg};
  132. border-radius: 5px;
  133. padding:2px;
  134. }
  135.  
  136. ::-webkit-scrollbar-track {
  137. background-color:{color:font};
  138. padding:2px;
  139. }
  140.  
  141. /*hint styling*/
  142.  
  143. [class*="hint--"]:after{
  144. font-size:calc({text:font size}px - 3px);
  145. text-transform:uppercase;
  146. font-family:open sans, sans-serif;
  147. background:{color:tooltips bg};
  148. color:{color:font};
  149. line-height:7px;
  150. text-shadow: 0 0px 0px black;
  151. }
  152.  
  153. .hint--bottom:before {
  154. border-bottom-color: {color:tooltips bg}; }
  155.  
  156. .hint--top:before {
  157. border-top-color: {color:tooltips bg}; }
  158.  
  159. .hint--top-right:before {
  160. border-top-color: {color:tooltips bg};
  161. }
  162.  
  163. .hint--left:before {
  164. border-left-color: {color:tooltips bg};
  165. }
  166.  
  167. .hint--right:before {
  168. border-right-color: {color:tooltips bg};
  169. }
  170.  
  171. .hint--right:after {
  172. margin-bottom: -11px; }
  173.  
  174. .question_wrapper {
  175. height: 185px;
  176. }
  177.  
  178. /* general styling */
  179.  
  180. body {
  181. {block:ifbackgroundimage}background-image:url('{image:background}');{/block:ifbackgroundimage}
  182. font-family:'{select:body font}', sans-serif;
  183. font-size:{text:font size}px;
  184. background-color:{color:background};
  185. color:{color:font};
  186. background-size:cover;
  187. background-attachment: fixed;
  188. overflow:hidden;
  189. text-align:{select:text align};
  190. }
  191.  
  192. small {
  193. font-size:{text:font size}px;
  194. }
  195.  
  196. big {
  197. font-size:{text:font size}px;
  198. }
  199.  
  200. a {
  201. font-style:normal;
  202. text-decoration: none;
  203. color:{color:link};
  204. }
  205.  
  206. b, strong {
  207. font-weight:700;
  208. font-size:calc({text:font size}px + 2px);
  209. font-variant:small-caps;
  210. text-transform:lowercase;
  211. color:{color:bold};
  212. }
  213.  
  214. i, em {
  215. font-family:'{select:italic font}', serif;
  216. font-size:calc({text:font size}px + 2px);
  217. color:{color:italic};
  218. }
  219.  
  220. p {
  221. line-height:1.5;
  222. margin-top:0;
  223. }
  224.  
  225. h1, h4, h5, h6, h7, h8, h9 {
  226. font-family:'{select:body font}', sans-serif;
  227. font-size:calc({text:font size}px + 8px);
  228. text-align:center;
  229. letter-spacing:0.5px;
  230. text-transform:uppercase;
  231.  
  232. }
  233.  
  234. h2 {
  235. font-family:'{select:italic font}', serif;
  236. text-transform:lowercase;
  237. background-color:{color:about bg};
  238. padding:5px;
  239. font-weight:800;
  240. -webkit-transform: rotate(-3deg);
  241. transform: rotate(-3deg);
  242. text-align:center;
  243. font-size:calc({text:font size}px + 8px);
  244. position:relative;
  245. z-index:2;
  246. {block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}
  247.  
  248. }
  249.  
  250. h3 {
  251. font-family:'{select:italic font}', serif;
  252. color:{color:subtitle text};
  253. text-transform:lowercase;
  254. padding: 5px;
  255. background-color:{color:subtitle bg};
  256. font-size:15px;
  257. -webkit-transform: rotate(2deg);
  258. transform: rotate(2deg);
  259. position:relative;
  260. z-index:1;
  261. text-align:center;
  262. {block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}
  263. }
  264.  
  265. blockquote {
  266. margin-left:3px;
  267. border-left:1px solid {color:font};
  268. padding:0 10px;
  269. width:490px;
  270. text-align:left;
  271. }
  272.  
  273. blockquote blockquote {
  274. width:470px;
  275. }
  276.  
  277. blockquote img {
  278. width:480px;
  279. }
  280.  
  281. ul {
  282. text-align:left;
  283. list-style-type: square;
  284. }
  285.  
  286. ol {
  287. list-style-type: lower-roman;
  288. text-align:left;
  289. }
  290.  
  291. /*sidebar styling*/
  292.  
  293. #sidebar {
  294. position:fixed;
  295. width:305px;
  296. margin-left:675px;
  297. background:{color:post bg};
  298. height:110%;
  299. margin-top:-10px;
  300. }
  301.  
  302. #titlebox {
  303. margin-top:120%;
  304. width:285px;
  305. padding:10px;
  306. padding-bottom:20px;
  307. }
  308.  
  309. #titlebox img {
  310. float:right;
  311. width:65px;
  312. margin-top:-15px;
  313. {block:ifcircleicons}border-radius:50%;{/block:ifcircleicons}
  314. }
  315.  
  316. #aboutbox {
  317. margin-left:30px;
  318. margin-top:40px
  319. }
  320.  
  321. .link {
  322. float:left;
  323. }
  324.  
  325. .link a {
  326. margin-bottom:5px;
  327. }
  328.  
  329. .next {
  330. position:relative;
  331. right:-5px;
  332. }
  333.  
  334. .next a {
  335. float:right;
  336. margin-left: 5px;
  337. margin-top:10px;
  338. }
  339.  
  340. .link, .next {
  341. padding:5px;
  342. padding-left:0px;
  343. font-size:10px;
  344. }
  345.  
  346. .link i, .next i {
  347. font-size:10px;
  348. padding:4px 3px;
  349. -webkit-transition: 0.5s; /* Safari */
  350. transition: 0.5s;
  351. color:{color:font};
  352. background-color:{color:about bg};
  353. {block:ifcircleicons}border-radius:50%;{/block:ifcircleicons}
  354. }
  355.  
  356. .link i:hover, .next i:hover {
  357. background-color:{color:font};
  358. color:{color:about bg}!important;
  359. -webkit-transition: 0.5s; /* Safari */
  360. transition: 0.5s;
  361. }
  362.  
  363. #titles {
  364. width:200px;
  365. text-align:center;
  366. }
  367.  
  368. #title {
  369. background:{color:title bg};
  370. padding:5px;
  371. font-weight:800;
  372. margin-top:-20px;
  373. margin-bottom:10px;
  374. -webkit-transform: rotate(-7deg);
  375. transform: rotate(-7deg);
  376. position:relative;
  377. z-index:2;
  378. {block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}
  379. }
  380.  
  381. #title i {
  382. font-size:20px;
  383. color:{color:title text};
  384. }
  385.  
  386. #subtitle {
  387. background-color:{color:subtitle bg};
  388. font-size:15px;
  389. -webkit-transform: rotate(5deg);
  390. transform: rotate(5deg);
  391. position:absolute;
  392. padding:5px;
  393. z-index:1;
  394. {block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}
  395. margin-left:100px;
  396. margin-top:-14px;
  397. }
  398.  
  399. #subtitle b {
  400. color:{color:subtitle text};
  401. }
  402.  
  403. #about {
  404. background:{color:about bg};
  405. padding:5px;
  406. float:right;
  407. margin-top:5px;
  408. {block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}
  409. }
  410.  
  411. /* post styling */
  412.  
  413. #posts {
  414. width:583px;
  415. position:absolute;
  416. left:100px;
  417. height:calc(100% - 5px);
  418. overflow-y:scroll;
  419. padding-bottom:5px;
  420. margin-top:-5px;
  421. z-index:-1;
  422. }
  423.  
  424. #post {
  425. width:500px;
  426. margin-bottom:20px;
  427. background:{color:post bg};
  428. padding:10px;
  429. {block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}
  430. }
  431.  
  432. #post:first-child {
  433. margin-top:70px;
  434. }
  435.  
  436. .post a {
  437. -webkit-transition: 0.5s; /* Safari */
  438. transition: 0.5s;
  439. color:{color:link};
  440. }
  441.  
  442. .post a:hover {
  443. -webkit-transition: 0.5s; /* Safari */
  444. transition: 0.5s;
  445. color:{color:link hover};
  446. }
  447.  
  448. /* unnest captions styling */
  449.  
  450. .tumblr_parent {
  451. text-align: {select:text align};
  452. padding:5px;
  453. border-left:0px;
  454. border-bottom:1px solid {color:about bg};
  455.  
  456. }
  457.  
  458. .tumblr_parent:last-child {
  459. border-bottom:0px;
  460. }
  461.  
  462. .tumblr_avatar {
  463. margin-right: 10px;
  464. }
  465.  
  466. img.tumblr_avatar {
  467. max-width:21px;
  468. {block:ifcircleicons}border-radius:50%;{/block:ifcircleicons}
  469. margin-top: -10px;
  470. padding-bottom: 5px;
  471. padding-top: 5px;
  472. }
  473.  
  474. .tumblr_blog {
  475. background:{color:post bg}!important;
  476. bottom:11px;
  477. right: 6px;
  478. position: relative;
  479. padding:2px;
  480. text-align: right;
  481. text-transform:uppercase;
  482. font-weight:700;
  483. }
  484.  
  485. .caption p {
  486. margin-top:0px;
  487. }
  488.  
  489. /* photo post styling */
  490.  
  491. .photo img {
  492. width:500px;
  493. }
  494.  
  495.  
  496. /* quote post styling */
  497.  
  498. .quotebody {
  499. text-align:center;
  500. font-weight:600;
  501. border-bottom:1px solid {color:about bg};
  502. padding-bottom:5px;
  503. font-size:20px;
  504. font-family:'{select:italic font}', serif;
  505. }
  506.  
  507. .source {
  508. text-align:right;
  509. font-size:10px;
  510. line-height:2;
  511. margin-top:5px;
  512. text-transform:uppercase;
  513. }
  514.  
  515. .source a {
  516. background:transparent;
  517. position: initial;
  518. }
  519.  
  520. /* q&a styling */
  521.  
  522. .question {
  523. background: {color:about bg};
  524. min-height: 42px;
  525. padding-top: 15px;
  526. padding-bottom: 10px;
  527. padding-left: 5px;
  528. padding-right: 10px;
  529. text-align: justify;
  530. margin-bottom:10px;
  531. {block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}
  532. }
  533.  
  534. .question img {
  535. width:48px;
  536. float:left;
  537. {block:ifcircleicons}border-radius:50%;{/block:ifcircleicons}
  538. margin-top: -10px;
  539. padding: 5px;
  540. }
  541.  
  542. .asker {
  543. text-transform:uppercase;
  544. font-weight:700;
  545. color:{color:font};
  546. }
  547.  
  548. .querie {
  549. font-weight:700;
  550. }
  551.  
  552.  
  553. /* read more styling */
  554.  
  555. .read_more_container {
  556. text-align: center;
  557. text-transform: uppercase;
  558. padding-bottom: 15px;
  559. font-weight: 600;
  560. border-bottom: 2px dotted {color:about bg};
  561. margin-bottom: 20px;
  562. }
  563.  
  564. .read_more_container a {
  565. padding:5px;
  566. margin-top: 2px;
  567. float: right;
  568. margin-right: 196px;
  569. }
  570.  
  571. .read_more_container a:hover {
  572. background:{color:post bg};
  573. color:{color:link hover};
  574. }
  575.  
  576.  
  577. /* notes styling */
  578.  
  579. .notes {
  580. text-align: right;
  581. padding:5px;
  582. {block:ifnoteimage}background-image:url('{image:note}');{/block:ifnoteimage}
  583. background-size:cover;
  584. background-position:center;
  585. background-color:{color:notes};
  586. position:relative;
  587. {block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}
  588. margin-top:10px;
  589. }
  590.  
  591. .notes i {
  592. background:{color:note icon bg};
  593. padding:4.5px 3px;
  594. color:{color:font};
  595. {block:ifcircleicons}border-radius:50%;{/block:ifcircleicons}
  596. }
  597.  
  598. .notes a {
  599. padding:2px;
  600. }
  601.  
  602.  
  603. /* tag styling */
  604.  
  605. .tags {
  606. font-weight:200;
  607. text-align:center;
  608. padding:5px;
  609. font-size:calc({text:font size}px - 2px);
  610. }
  611.  
  612. .tags a {
  613. color:{color:font};
  614. padding:5px;
  615. -webkit-transition: 0.5s; /* Safari */
  616. transition: 0.5s;
  617. }
  618.  
  619. .tags a:hover, #conabout a:hover {
  620. letter-spacing:1px;
  621. -webkit-transition: 0.5s; /* Safari */
  622. transition: 0.5s;
  623. }
  624.  
  625. .tags i {
  626. color:{color:font};
  627. font-size:calc({text:font size}px - 1px)
  628. }
  629.  
  630. /* tumblr iframe fix via @cyantists */
  631.  
  632. iframe.tmblr-iframe {
  633. z-index:99999999999999!important;
  634. top:0!important;
  635. right:0!important;
  636. opacity:0.6;
  637. /* delete invert(1) from here
  638. filter:invert(1) contrast(150%);
  639. -webkit-filter:invert(1) contrast(150%);
  640. -o-filter:invert(1) contrast(150%);
  641. -moz-filter:invert(1) contrast(150%);
  642. -ms-filter:invert(1) contrast(150%);
  643. /* to here if your blog has a dark background */
  644. transform:scale(0.65);
  645. transform-origin:100% 0;
  646. -webkit-transform:scale(0.65);
  647. -webkit-transform-origin:100% 0;
  648. -o-transform:scale(0.65);
  649. -o-transform-origin:100% 0;
  650. -moz-transform:scale(0.65);
  651. -moz-transform-origin:100% 0;
  652. -ms-transform:scale(0.65);
  653. -ms-transform-origin:100% 0;}
  654.  
  655. iframe.tmblr-iframe:hover {
  656. opacity:0.6!important;}
  657.  
  658. /* imessage post via @animalites */
  659.  
  660. .answer span, .convo li {
  661. margin:0 0px 10px;
  662. {block:ifroundedcorners}border-radius:1em;{/block:ifroundedcorners}
  663. padding:.5em 10px;
  664. max-width:75%;
  665. clear:both;
  666. position:relative;
  667. }
  668.  
  669. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11 {
  670. float:left;
  671. background:{color:chat 1};
  672. color:{color:font};
  673. left:3px;
  674. }
  675.  
  676. .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after {
  677. content:"";
  678. position:absolute;
  679. left:-.5em;
  680. bottom:0;
  681. width:.5em;
  682. height:1em;
  683. border-right:.5em solid {color:chat 1};
  684. border-bottom-right-radius:1em .5em
  685. }
  686.  
  687. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12 {
  688. right:3px;
  689. float:right;
  690. background-color:{color:chat 2};
  691. color:{color:font};
  692. }
  693.  
  694. .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after {
  695. content:"";
  696. position:absolute;
  697. right:-.5em;
  698. bottom:0;
  699. width:.5em;
  700. height:1em;
  701. border-left:.5em solid {color:chat 2};
  702. border-bottom-left-radius:1em .5em;
  703. }
  704.  
  705. .me p,.answer,.asked span {
  706. padding:0;
  707. margin:0;
  708. }
  709.  
  710. .answer {
  711. overflow:hidden;
  712. }
  713.  
  714. .asked p {
  715. text-align: left;
  716. margin: 0 0px 10px 0px;
  717. padding: 0;
  718. color: #666666;
  719. font-family: '{select:body font}', sans-serif;
  720. font-size: 12px;
  721. line-height: 0px;
  722. }
  723.  
  724. .footerright .viasrc {
  725. float: left;
  726. }
  727.  
  728. .label strong {
  729. text-transform:uppercase;
  730. color:{color:font};
  731. }
  732.  
  733. .asked a {
  734. margin:0;
  735. padding:0;
  736. }
  737.  
  738. .user_4 {
  739. background-color:#55caff;
  740. color:#fff;
  741. }
  742.  
  743. .user_4::after {
  744. border-color:#55caff;
  745. }
  746.  
  747. .user_6 {
  748. background-color:#60f246;
  749. color:#fff;
  750. }
  751.  
  752. .user_6::after {
  753. border-color:#60f246;
  754. }
  755.  
  756. .user_5{background-color:#9ff3fc;color:#000}.user_5::after{border-color:#9ff3fc}.user_3{background-color:#25c413;color:#fff}.user_3::after{border-color:#25c413}.user_7{background-color:#9b9b9b;color:#fff}.user_7::after{border-color:#9b9b9b}.user_8{background-color:#0d9321;color:#fff}.user_8::after{border-color:#0d9321}.user_9{background-color:#606060;color:#fff}.user_9::after{border-color:#606060}
  757.  
  758. .convo {
  759. overflow: hidden;
  760. list-style-type: none;
  761. padding: 0;
  762. margin: 0;
  763. }
  764. /* credit */
  765.  
  766. .credit{
  767. position:fixed;
  768. margin-left:calc(100% - 50px);
  769. top:calc(100% - 40px);
  770. }
  771.  
  772. .credit a{
  773. color:#000;
  774. background:rgba(255,255,255, 0.5);
  775. border-radius:100%;
  776. padding:4px 3px;
  777. -webkit-transition: 1s; /* Safari */
  778. transition: 1s;
  779. box-shadow: 2px 1px 0px;
  780. }
  781.  
  782. .credit a:hover{
  783. color:#fff;
  784. background:rgba(0,0,0, 0.5);
  785. -webkit-transition: 1s; /* Safari */
  786. transition: 1s;
  787. }
  788.  
  789. .credit i {
  790. font-size:20px;
  791. color:#000;
  792. -webkit-transition: 1s; /* Safari */
  793. transition: 1s;
  794. }
  795.  
  796. .credit i:hover{
  797. color:#fff;
  798. -webkit-transition: 1s; /* Safari */
  799. transition: 1s;
  800. }
  801.  
  802. </style>
  803. </head>
  804.  
  805. <body>
  806.  
  807. <div id="sidebar">
  808. <!--about-->
  809. <div id="titlebox">
  810. <img src="{Favicon}">
  811. <div id="titles">
  812. <div id="title"><i>{Title}</i></div>
  813. <div id="subtitle"><b>{text:subtitle}</b></div>
  814. </div>
  815.  
  816. <div id="aboutbox">
  817. <div id="about">
  818. {Description}
  819. </div>
  820. </div>
  821.  
  822. <div class="link">
  823. <a href="/" class="hint--top-right" aria-label="{text:home link title}"><i class="{text:home link icon} fa-fw"></i></a>
  824. <br>
  825. <a href="/ask" class="hint--top-right" aria-label="{text:ask link title}"><i class="{text:ask link icon} fa-fw"></i></a>
  826. <br>
  827. <a href="{text:link 1 url}" class="hint--top-right" aria-label="{text:link 1 title}"><i class="{text:link 1 icon} fa-fw"></i></a>
  828. <br>
  829. <a href="{text:link 2 url}" class="hint--top-right" aria-label="{text:link 2 title}"><i class="{text:link 2 icon} fa-fw"></i></a>
  830. <br>
  831. <a href="{text:link 3 url}" class="hint--top-right" aria-label="{text:link 3 title}"><i class="{text:link 3 icon} fa-fw"></i></a>
  832. <br>
  833. </div>
  834.  
  835.  
  836. <div class="next">
  837. {block:NextPage}
  838. <a href="{NextPage}"><i class="fas fa-angle-double-right fa-fw"></i></a>
  839. {/block:NextPage}
  840. {block:PreviousPage}
  841. <a href="{PreviousPage}" class=""><i class="fas fa-angle-double-left fa-fw"></i></a>
  842. {/block:PreviousPage}
  843. </div>
  844. </div>
  845.  
  846. </div>
  847.  
  848. <div id="posts">
  849. {block:Posts}
  850. <div id="post">
  851.  
  852. {block:Text}
  853. <div class="post text">
  854. {block:Title}
  855. <h3>{Title}</h3>
  856. {/block:Title}
  857. <div class="caption">{Body}</div>
  858. </div>
  859. {/block:Text}
  860.  
  861. {block:Photo}
  862. <div class="post photo">
  863. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  864. {block:Caption}
  865. <div class="caption">{Caption}</div>
  866. {/block:Caption}
  867. </div>
  868. {/block:Photo}
  869.  
  870. {block:Panorama}
  871. <div class="post panorama">
  872. {LinkOpenTag}
  873. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  874. {LinkCloseTag}
  875. {block:Caption}
  876. <div class="caption">{Caption}</div>
  877. {/block:Caption}
  878. </div>
  879. {/block:Panorama}
  880.  
  881. {block:Photoset}
  882. <div class="post photoset">
  883. {Photoset-500}
  884. {block:Caption}
  885. <div class="caption">{Caption}</div>
  886. {/block:Caption}
  887. </div>
  888. {/block:Photoset}
  889.  
  890. {block:Quote}
  891. <div class="post quote">
  892. <div class="quotebody">
  893. "{Quote}"
  894. </div>
  895. {block:Source}
  896. <div class="source">{Source}</div>
  897. {/block:Source}
  898. </div>
  899. {/block:Quote}
  900.  
  901. {block:Link}
  902. <div class="post link">
  903. <a href="{URL}" class="link" {Target}>{Name}</a>
  904.  
  905. {block:Description}
  906. <div class="description">{Description}</div>
  907. {/block:Description}
  908. </div>
  909. {/block:Link}
  910.  
  911. {block:Chat}
  912. {block:Title}
  913. <h1>{Title}</h1>{/block:Title}<br>
  914. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  915. {Line}</li>{/block:Lines}</ul>
  916. {/block:Chat}
  917.  
  918. {block:Video}
  919. <div class="post video">
  920. {Video-500}
  921.  
  922. {block:Caption}
  923. <div class="caption">{Caption}</div>
  924. {/block:Caption}
  925. </div>
  926. {/block:Video}
  927.  
  928. {block:Audio}
  929. <div class="post audio">
  930. {AudioEmbed}
  931.  
  932. {block:Caption}
  933. <div class="caption">{Caption}</div>
  934. {/block:Caption}
  935. </div>
  936. {/block:Audio}
  937.  
  938. {block:Answer}
  939. <div class="question">
  940. <img src="{AskerPortraitURL-48}">
  941. <span class="asker">{Asker}</span>
  942. <span class="querie">queries:</span>
  943. <span>{Question}</span>
  944. </div>
  945. <div class="answer">{answer}</div>
  946. {/block:Answer}
  947.  
  948.  
  949. <!--notes-->
  950. {block:Date}
  951. <div class="notes">
  952. <a href="{Permalink}" class="hint--bottom" aria-label="{TimeAgo}"> <i class="far fa-calendar-alt fa-fw"></i></a>
  953.  
  954. <a href="{Permalink}" class="hint--bottom" aria-label="{NoteCountWithLabel}"><i class="far fa-sticky-note fa-fw"></i></a>
  955.  
  956. <a href="{ReblogParentURL}" class="hint--bottom" aria-label="via {ReblogParentName}"><i class="fas fa-location-arrow fa-fw"></i></a>
  957.  
  958. <a href="{ReblogURL}" class="hint--bottom" aria-label="reblog"><i class="fas fa-retweet fa-fw"></i></a>
  959. </div>
  960. {/block:Date}
  961. <!-- end notes-->
  962.  
  963. {block:HasTags}
  964. <div class="tags">
  965. {block:Tags}
  966. <a href="{TagURL}"><i class="fab fa-slack-hash"></i> {Tag}</a>
  967. {/block:Tags}
  968. </div>
  969. {/block:HasTags}
  970. </div>
  971. <!-- end post-->
  972.  
  973. <!-- {block:NoRebloggedFrom}
  974. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  975. {/block:NoRebloggedFrom} -->
  976.  
  977.  
  978. {/block:Posts}
  979. </div>
  980. <!--end posts-->
  981.  
  982. <!-- credit // would be nice if u left intact -->
  983. <div class="credit">
  984. <a href="http://chaaostheory.tumblr.com" class="hint--left" aria-label="@chaaostheory"><i class="fas fa-feather-alt fa-fw" aria-hidden="true"></i></a>
  985. </div>
  986. </body>
  987. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!