API tools faq
paste
silbrigthemes

Lover (Theme #1 | Old Code)

silbrigthemes
Aug 13th, 2018
273
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 56.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5. LOVER (Theme #1) by @silbrigthemes
  6.  
  7. This is my first theme ever, made for Valentine's Day. Please handle this theme with care and leave the credits intact, as I have spend quite a long time to get everything working.
  8.  
  9. In the preview over at @loverthemebysilbrigthemes, you can also find a list of all features and a (hopefully) helpful customization guide.
  10.  
  11. The rules as always:
  12.  
  13. 1) Do not steal (parts of) the code.
  14. 2) Do not claim this code as yours.
  15. 3) Do not use this code as a base.
  16. 4) Do not edit beyond recognition.
  17. 5) Do not delete or alter the credits.
  18.  
  19. Have fun with this theme and send me a message if you're encountering problems.
  20.  
  21. -->
  22.  
  23. <head>
  24. <title>{Title}</title>
  25. <link rel="shortcut icon" href="{Favicon}">
  26. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  27. {block:Description}
  28. <meta name="description" content="{MetaDescription}" />
  29. {/block:Description}
  30.  
  31. <meta name="viewport" content="width=device-width, initial-scale=1">
  32.  
  33. <meta name="color:Accent" content="#ce1c25"/>
  34. <meta name="color:Background" content="#f3a5a9"/>
  35. <meta name="color:BodyFont" content="#43090c"/>
  36. <meta name="color:Container" content="#f6bcbf"/>
  37. <meta name="color:Posts" content="#fce9ea"/>
  38. <meta name="color:MarkText" content="#ffffff"/>
  39. <meta name="color:H2" content="#e74b53"/>
  40. <meta name="color:Bold" content="#e74b53"/>
  41. <meta name="color:Italic" content="#b41820"/>
  42. <meta name="color:Answer" content="#f9d2d4"/>
  43.  
  44. <meta name="select:FontSize" content="1em" name="1em"/>
  45. <meta name="select:FontSize" content="14px" name="14px"/>
  46. <meta name="select:FontSize" content="12px" name="12px"/>
  47.  
  48. <meta name="select:BodyFont" content="Lato" name="Lato"/>
  49. <meta name="select:BodyFont" content="Open Sans" name="Open Sans"/>
  50. <meta name="select:BodyFont" content="Roboto" name="Roboto"/>
  51. <meta name="select:BodyFont" content="Nanum Myeongjo" name="Nanum Myeongjo"/>
  52. <meta name="select:BodyFont" content="Nanum Gothic" name="Nanum Gothic"/>
  53.  
  54. <meta name="select:TitleFont" content="Playfair Display" name="Playfair Display"/>
  55. <meta name="select:TitleFont" content="Merriweather" name="Merriweather"/>
  56. <meta name="select:TitleFont" content="Nanum Myeongjo" name="Nanum Myeongjo"/>
  57.  
  58.  
  59. <!-- CUSTOM TITLE FONTS -->
  60. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900&amp;subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
  61. <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700,900&amp;subset=cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  62. <link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800&amp;subset=korean" rel="stylesheet">
  63.  
  64.  
  65. <!-- CUSTOM BODY FONTS -->
  66. <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&amp;subset=latin-ext" rel="stylesheet">
  67. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  68. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  69. <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean" rel="stylesheet">
  70.  
  71.  
  72. <!-- SPECIAL FONTS -->
  73. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
  74. <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
  75.  
  76. <!-- Necessary for the icon font to work. -->
  77. <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  78.  
  79. <!-- Necessary to eliminate the tumblr redirect and have direct links instead // by @magnusthemes -->
  80. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  81.  
  82. <!-- Video Resizing Scripts by @shythemes -->
  83. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  84. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  85.  
  86. <!-- TOOLTIP SCRIPTS -->
  87. <script type="text/javascript"
  88. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  89. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  90. <script>
  91. (function($){
  92. $(document).ready(function(){
  93. $("[title]").style_my_tooltips({
  94. tip_follows_cursor:true,
  95. tip_delay_time:200,
  96. tip_fade_speed:300
  97. }
  98. );
  99. });
  100. })(jQuery);
  101. </script>
  102.  
  103. <style type="text/css">
  104.  
  105. /** GENERAL STUFF **/
  106.  
  107. body{
  108. margin:0;
  109. font-size:1em;
  110. background-color:{color:Background};
  111. font-family:{select:BodyFont}, Verdana;
  112. font-weight:300;
  113. color:{color:BodyFont};
  114. display:flex;
  115. align-items:center;
  116. justify-content:space-around;
  117. text-align:justify;
  118. overflow:hidden;
  119.  
  120. }
  121.  
  122. /* Marked Text */
  123. mark{
  124. background-color:{color:Accent};
  125. color:{color:MarkText};
  126. font-weight:bold;
  127. }
  128.  
  129. /* Links */
  130. a{
  131. color:{color:Accent};
  132. text-decoration:none;
  133. transition:0.5s;
  134. -moz-transition:0.5s;
  135. -o-transition:0.5s;
  136. -webkit-transition:0.5s;
  137.  
  138. }
  139.  
  140. /* Links Hover */
  141. a:hover{
  142. cursor:pointer;
  143. text-decoration:line-through;
  144. transition:0.5s;
  145. -moz-transition:0.5s;
  146. -o-transition:0.5s;
  147. -webkit-transition:0.5s;
  148. }
  149.  
  150. /* Lists */
  151. ul, ol{
  152. list-style:none;
  153. }
  154.  
  155. li{
  156. margin-left:-24px;
  157. }
  158.  
  159. li:before{
  160. content:"❤";
  161. color:{color:Accent};
  162. padding-right:1em;
  163. }
  164.  
  165. /* More Text Styles */
  166. .text b, strong{
  167. color:{color:Bold};
  168. font-weight:bold;
  169. }
  170.  
  171. .text i, em{
  172. color:{color:Italic};
  173. font-style:italic;
  174. }
  175.  
  176. h2{
  177. font-size:1.5em;
  178. font-family:{select:TitleFont};
  179. font-weight:normal;
  180. color:{color:H2};
  181. }
  182.  
  183. hr{
  184. width:50%;
  185. border:3px solid {color:Container};
  186. height:1px;
  187. background-color:{color:Accent};
  188. }
  189.  
  190. /** TOOLTIPS **/
  191. #s-m-t-tooltip{
  192. max-width:300px;
  193. margin:15px;
  194. padding:0.25em;
  195. background:{color:Bold}; /** tooltip background color **/
  196. color:{color:MarkText}; /** toolip color **/
  197. z-index:999999;
  198. font-size:0.75em;
  199. text-transform:uppercase;
  200. font-weight:bold;
  201. }
  202.  
  203. /* Custom Scrollbar */
  204. ::-webkit-scrollbar{
  205. width:8px;
  206. background-color:{color:Posts};
  207. }
  208.  
  209. ::-webkit-scrollbar-thumb{
  210. background-color:{color:Posts};
  211. width:2px;
  212. border:3px solid {color:Accent};
  213. border-radius:2px;
  214. }
  215.  
  216. /* Custom Selection */
  217. ::selection{
  218. background-color:{color:Accent};
  219. color:{color:MarkText};
  220. }
  221.  
  222. ::-webkit-selection{
  223. background-color:{color:Accent};
  224. color:{color:MarkText};
  225. }
  226.  
  227. ::-o-selection{
  228. background-color:{color:Accent};
  229. color:{color:MarkText};
  230. }
  231.  
  232. ::-moz-selection{
  233. background-color:{color:Accent};
  234. color:{color:MarkText};
  235. }
  236.  
  237. /** CONTENT **/
  238.  
  239. /* SIDEBAR */
  240.  
  241. #side-title{
  242. font-family:{select:TitleFont}, "Times New Roman";
  243. font-size:2em;
  244. font-weight:bold;
  245. font-style:italic;
  246. color:#fff;
  247. text-shadow:2px 2px 2px {color:Accent};
  248. margin-top:1em;
  249. }
  250.  
  251. #sidebar p{
  252. text-align:center;
  253. width:150px;
  254. }
  255.  
  256. #sidebar{
  257. width:30vw;
  258. height:100vh;
  259. display:flex;
  260. align-items:center;
  261. justify-content:center;
  262. flex-direction:column;
  263. }
  264.  
  265. #side-icon{
  266. width:128px;
  267. height:128px;
  268. border-radius:50%;
  269. background-image:url("{PortraitURL-128}");
  270. border:5px solid {color:Accent};
  271. }
  272.  
  273. /* I have played with this by commenting out the .menu{}, and apparently it does not affect the styling on the customization page. */
  274. .menu {
  275. filter: url("#goo");
  276. }
  277.  
  278. /* These lines are very important as they are responsible for styling the whole menu. Without them, the icons just appear in one row. */
  279. .menu-item, .menu-open-button {
  280. background: {color:Accent}; /* pink background of the menu*/
  281. border-radius: 50%; /* minimum is 50% for a perfect circle */
  282. width: 80px; /* circle width */
  283. height: 80px; /* circle height */
  284. position: absolute;
  285. color: {color:Container}; /* color of the icons */
  286. text-align: center; /* horizontal centering of icons */
  287. line-height: 80px; /* vertical centering of icons */
  288. transform: translate3d(0, 0, 0);
  289. transition: transform ease-out 200ms;
  290. /* transformation and duration of the transformation */
  291. }
  292.  
  293. /* These lines seemingly only affect the margin to the left. */
  294. .menu-open {
  295. display: none;
  296. }
  297.  
  298. /* Hamburger menu (≡) within the pink circle. */
  299. .hamburger {
  300. width: 25px; /* line width */
  301. height: 3px; /* line height */
  302. background: {color:Container}; /* color of the lines (≡) */
  303. display: block;
  304. position: absolute;
  305. top: 50%; /* offset from top */
  306. left: 50%; /* offset from left */
  307. /* since the lines are 25px long and 3px high, the following lines are necessary to center-align the menu properly */
  308. margin-left: -12.5px;
  309. margin-top: -1.5px;
  310. /* transformation duration */
  311. transition: transform 200ms;
  312.  
  313. }
  314.  
  315. .hamburger-1 {
  316. transform: translate3d(0, -8px, 0);
  317. /* (-8px) is the offset to the second line*/
  318. }
  319.  
  320. .hamburger-2 {
  321. transform: translate3d(0, 0, 0);
  322. }
  323.  
  324. .hamburger-3 {
  325. transform: translate3d(0, 8px, 0);
  326. /* (8px) is the offset to the second line*/
  327. }
  328.  
  329. /* Upon clicking on the menu, the lines of the hamburger menu rotate and realign. The middle line is scaled down to 0, so that it disappeares. The top and bottom lines will be rotated so that they form an (x). */
  330. .menu-open:checked + .menu-open-button .hamburger-1 {
  331. transform: translate3d(0, 0, 0) rotate(45deg);
  332. }
  333. .menu-open:checked + .menu-open-button .hamburger-2 {
  334. transform: translate3d(0, 0, 0) scale(0, 1);
  335. }
  336. .menu-open:checked + .menu-open-button .hamburger-3 {
  337. transform: translate3d(0, 0, 0) rotate(-45deg);
  338. }
  339.  
  340. .menu {
  341. position: relative;
  342. width: 380px;
  343. height: 380px;
  344. font-size: 20px;
  345. text-align: left;
  346. left: -155px;
  347. top: -155px;
  348. padding: 180px;
  349. transition: 0.5s;
  350. -moz-transition: 0.5s;
  351. -o-transition: 0.5s;
  352. -webkit-transition: 0.5s;
  353.  
  354. }
  355.  
  356. .menu-item:hover {
  357. background: {color:Container};
  358. color: {color:Accent};
  359. border:2px solid rgba(255,255,255,0);
  360. transition:0.5s;
  361. -moz-transition:0.5s;
  362. -o-transition:0.5s;
  363. -webkit-transition:0.5s;
  364.  
  365. }
  366.  
  367. /*
  368. duration for the items to be displayed
  369. the items are displayed after one another
  370. */
  371. .menu-item:nth-child(3) {
  372. transition-duration: 180ms;
  373. }
  374. .menu-item:nth-child(4) {
  375. transition-duration: 180ms;
  376. }
  377. .menu-item:nth-child(5) {
  378. transition-duration: 180ms;
  379. }
  380. .menu-item:nth-child(6) {
  381. transition-duration: 180ms;
  382. }
  383. .menu-item:nth-child(7) {
  384. transition-duration: 180ms;
  385. }
  386. .menu-item:nth-child(8) {
  387. transition-duration: 180ms;
  388. }
  389. .menu-item:nth-child(9) {
  390. transition-duration: 180ms;
  391. }
  392.  
  393. .menu-open-button {
  394. z-index: 2;
  395. transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  396. transition-duration: 400ms;
  397. transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  398. cursor: pointer;
  399. }
  400.  
  401. .menu-open-button:hover {
  402. transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  403. }
  404.  
  405. .menu-open:checked + .menu-open-button {
  406. transition-timing-function: linear;
  407. transition-duration: 200ms;
  408. transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  409. }
  410.  
  411. .menu-open:checked ~ .menu-item {
  412. transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  413. }
  414. .menu-open:checked ~ .menu-item:nth-child(3) {
  415. transition-duration: 180ms;
  416. transform: translate3d(0.08361px, -104.99997px, 0);
  417. }
  418. .menu-open:checked ~ .menu-item:nth-child(4) {
  419. transition-duration: 280ms;
  420. transform: translate3d(90.9466px, -52.47586px, 0);
  421. }
  422. .menu-open:checked ~ .menu-item:nth-child(5) {
  423. transition-duration: 380ms;
  424. transform: translate3d(90.9466px, 52.47586px, 0);
  425. }
  426. .menu-open:checked ~ .menu-item:nth-child(6) {
  427. transition-duration: 480ms;
  428. transform: translate3d(0.08361px, 104.99997px, 0);
  429. }
  430. .menu-open:checked ~ .menu-item:nth-child(7) {
  431. transition-duration: 580ms;
  432. transform: translate3d(-90.86291px, 52.62064px, 0);
  433. }
  434. .menu-open:checked ~ .menu-item:nth-child(8) {
  435. transition-duration: 680ms;
  436. transform: translate3d(-91.03006px, -52.33095px, 0);
  437. }
  438. .menu-open:checked ~ .menu-item:nth-child(9) {
  439. transition-duration: 780ms;
  440. transform: translate3d(-0.25084px, -104.9997px, 0);
  441. }
  442.  
  443. /** END GOOEY MENU **/
  444. /** END SIDEBAR **/
  445.  
  446. /* HEART BACKGROUND */
  447. .heart {
  448. background-color: {color:Accent};
  449. display: inline-block;
  450. height: 400px;
  451. position: relative;
  452. top: 0;
  453. left:10px;
  454. transform: rotate(0deg);
  455. width: 400px;
  456. }
  457.  
  458. .heart:before,
  459. .heart:after {
  460. content: "";
  461. background-color: {color:Accent};
  462. border-radius: 50%;
  463. height: 400px;
  464. position: absolute;
  465. width: 400px;
  466. z-index:-25;
  467. }
  468.  
  469. .heart:before {
  470.  
  471. top: -200px;
  472. left: 0;
  473. }
  474.  
  475. .heart:after {
  476.  
  477. left: 200px;
  478. top: 0;
  479. }
  480.  
  481. /* 2nd HEART BACKGROUND */
  482. .heart2 {
  483. background-color: {color:Container};
  484. display: inline-block;
  485. height: 420px;
  486. position: relative;
  487. top: 0;
  488. margin-top:calc(50vh - 250px);
  489. margin-right:4em;
  490. margin-left:15em;
  491. transform: rotate(-45deg);
  492. width: 420px;
  493. display:flex;
  494. align-items:center;
  495. justify-content:center;
  496. }
  497.  
  498. .heart2:before,
  499. .heart2:after {
  500. content: "";
  501. background-color: {color:Container};
  502. border-radius: 50%;
  503. height: 420px;
  504. position: absolute;
  505. width: 420px;
  506. z-index:-25;
  507. }
  508.  
  509. .heart2:before {
  510.  
  511. top: -210px;
  512. left: 0;
  513. }
  514.  
  515. .heart2:after {
  516.  
  517. left: 210px;
  518. top: 0;
  519. }
  520.  
  521.  
  522. /* POSTS */
  523. /* General Container */
  524. #posts{
  525. width:400px;
  526. height:400px;
  527. background-color:{color:Container};
  528. border:5px solid {color:Accent};
  529. border-radius:2%;
  530. overflow-y:scroll;
  531. overflow-x:hidden;
  532. transform:rotate(45deg);
  533. margin-top:-50px;
  534. margin-left:25px;
  535. z-index:200;
  536. }
  537.  
  538. /* Posts */
  539. article{
  540. width:325px;
  541. margin-left:25px;
  542. margin-right:25px;
  543. margin-top:2em;
  544. margin-bottom:1em;
  545. background-color:{color:Posts};
  546. padding:0.5em;
  547. border-radius:5px;
  548. border-top:5px solid {color:Accent};
  549. border-bottom:5px solid {color:Accent};
  550. z-index:250;
  551. }
  552.  
  553. article img{
  554. max-width:100%;
  555. height:auto;
  556. }
  557.  
  558. figure.tmblr-full{
  559. width:100%;
  560. max-width:100%;
  561. height:auto;
  562. }
  563.  
  564. /* Post Title */
  565. .title{
  566. font-size:2em;
  567. font-family:{select:TitleFont};
  568. text-align:center;
  569. color:{color:Accent};
  570. font-weight:bold;
  571. text-shadow:2px 2px 2px {color:Container};
  572. }
  573.  
  574. .text{
  575. padding:0.5em;
  576. }
  577.  
  578.  
  579. /* SPECIAL FONTS */
  580. /* Quirky Font */
  581. p.npf_quirky{
  582. /*Tumblr uses Fairwater as a font for .npf_quirky, but since it's not a free font, I have used this alternative.*/
  583. font-family: 'Dancing Script', cursive;
  584. font-size:calc({select:FontSize} + 0.25em);
  585.  
  586. }
  587.  
  588. /* Chat Font */
  589. p.npf_chat{
  590. font-family:Courier;
  591.  
  592. }
  593.  
  594. /* Quote Font */
  595. p.npf_quote{
  596. /*Tumblr uses Calluna as a font for .npf_quote, but since it's not a free font, I have used these alternatives.*/
  597. font-family:"Cormorant Garamond", "Palatino";
  598. font-size:calc({select:FontSize} + 0.25em);
  599.  
  600. }
  601.  
  602. /** QUOTE POSTS **/
  603. .quote{
  604. font-size:{select:FontSize};
  605. margin-top:10px;
  606.  
  607. }
  608.  
  609. .quoted{
  610. font-size:calc({select:FontSize} + 0.5*{select:FontSize});
  611. font-style:italic;
  612. font-family:{select:TitleFont}, "Times New Roman";
  613. padding-top:10px;
  614. padding-left:10px;
  615. padding-right:10px;
  616. padding-bottom:10px;
  617. color:{color:MarkText};
  618. background-color:{color:Container};
  619. border-radius:5px;
  620. border-top:5px solid {color:Bold};
  621. border-bottom:5px solid {color:Bold};
  622. text-shadow:1px 1px 2px {color:Bold};
  623. }
  624.  
  625. .quote-source{
  626. font-size:1em;
  627. padding-top:0.5em;
  628. padding-left:5px;
  629. padding-right:5px;
  630. }
  631.  
  632. article .photoset {
  633. max-width:325px;
  634. }
  635.  
  636.  
  637. /** LINK POSTS **/
  638. .link-posts{
  639. width:100%;
  640. background-color:{color:Container};
  641. padding-bottom:0.5em;
  642. transition:0.5s;
  643. -moz-transition:0.5s;
  644. -o-transition:0.5s;
  645. -webkit-transition:0.5s;
  646. border-top:5px solid {color:Accent};
  647. border-bottom:5px solid {color:Accent};
  648. border-radius:5px;
  649. }
  650.  
  651. .link-posts:hover{
  652. color:{color:MarkText};
  653. background-color:{color:Accent};
  654. transition:0.5s;
  655. -moz-transition:0.5s;
  656. -o-transition:0.5s;
  657. -webkit-transition:0.5s;
  658. }
  659.  
  660. .link-posts a{
  661. text-decoration:none;
  662. line-height: 1.5em;
  663. width:100%;
  664. font-weight:bold;
  665. }
  666.  
  667. .link-posts a:hover{
  668. color:{color:MarkText};
  669. }
  670.  
  671. .link-posts a img{
  672. width:100%;
  673. }
  674.  
  675. /** CHAT POSTS **/
  676. .chatterbox{
  677. width:100%;
  678. overflow:hidden;
  679. }
  680.  
  681. .chat{
  682. width:100%;
  683. }
  684.  
  685. .chat .clear{
  686. clear:both;
  687. }
  688.  
  689. .chat .label_odd, .line_odd{
  690. background-color:{color:Container};
  691. color:{color:Accent};
  692. font-weight:bold;
  693. height:auto;
  694. width:80%;
  695. float:left;
  696. padding:0.25em;
  697.  
  698. }
  699.  
  700. .chat .line_odd{
  701. margin-bottom:0.25em;
  702. border-radius:0px 0px 5px 5px;
  703. }
  704.  
  705. .chat .label_odd{
  706. border-radius:5px 5px 0px 0px;
  707. }
  708.  
  709. .chat .label_even, .line_even{
  710. background-color:{color:Accent};
  711. color:{color:Posts};
  712. font-weight:bold;
  713. width:80%;
  714. height:auto;
  715. float:right;
  716. text-align:right;
  717. padding:0.25em;
  718. }
  719.  
  720. .chat .line_even{
  721. margin-bottom:0.25em;
  722. border-radius:0px 0px 5px 5px;
  723. }
  724.  
  725. .chat .label_even{
  726. border-radius:5px 5px 0px 0px;
  727. }
  728.  
  729. /** QUESTIONS **/
  730. /* ANSWER */
  731. .answer{
  732. background-color:{color:Answer};
  733. border-radius:5px;
  734. border-top:5px solid {color:Bold};
  735. padding:0.5em;
  736. }
  737.  
  738. .answer img{
  739. width:3em;
  740. border-radius:50%;
  741. margin-left:0.5em;
  742. border:5px solid {color:Bold};
  743. }
  744.  
  745. .answer-username{
  746. display:flex;
  747. justify-content:flex-start;
  748. align-items:center;
  749. flex-direction:row-reverse;
  750. }
  751.  
  752. .answer-username a{
  753. text-decoration:none;
  754. margin-right:0.5em;
  755. margin-top:2em;
  756. color:{color:MarkText};
  757. }
  758.  
  759. .answer-username mark{
  760. padding:0.25em;
  761. color:{color:MarkText};
  762. border-radius:2px;
  763. transition:0.5s;
  764. -moz-transition:0.5s;
  765. -o-transition:0.5s;
  766. -webkit-transition:0.5s;
  767. }
  768.  
  769. .answer-username mark:hover{
  770. background-color:{color:Bold};
  771. color:{color:MarkText};
  772. cursor:pointer;
  773. transition:0.5s;
  774. -moz-transition:0.5s;
  775. -o-transition:0.5s;
  776. -webkit-transition:0.5s;
  777. }
  778.  
  779. /* QUESTION */
  780. .question{
  781. background-color:{color:Container};
  782. border-radius:5px;
  783. border-bottom:5px solid {color:Bold};
  784. margin-bottom:0.5em;
  785. padding:0.5em;
  786. }
  787.  
  788. .question img{
  789. width:3em;
  790. border-radius:50%;
  791. border:5px solid {color:Bold};
  792. margin-right:0.5em;
  793. }
  794.  
  795. .question-username{
  796. display:flex;
  797. justify-content:flex-start;
  798. align-items:center;
  799. flex-direction:row;
  800. }
  801.  
  802. .question-username a{
  803. text-decoration:none;
  804. margin-right:0.5em;
  805. margin-top:2em;
  806. color:{color:MarkText};
  807. }
  808.  
  809. .question-username mark{
  810. padding:0.25em;
  811. border-radius:2px;
  812. color:{color:MarkText};
  813. transition:0.5s;
  814. -moz-transition:0.5s;
  815. -o-transition:0.5s;
  816. -webkit-transition:0.5s;
  817. }
  818.  
  819. .question-username mark:hover{
  820. background-color:{color:Bold};
  821. color:{color:MarkText};
  822. cursor:pointer;
  823. transition:0.5s;
  824. -moz-transition:0.5s;
  825. -o-transition:0.5s;
  826. -webkit-transition:0.5s;
  827. }
  828.  
  829. /** AUDIO POSTS **/
  830. .audio>iframe {
  831. max-width: 100%
  832.  
  833. }
  834.  
  835. .audio iframe{
  836. border-top:5px solid {color:Container};
  837. border-bottom:5px solid {color:Container};
  838. border-radius:5px;
  839. }
  840.  
  841.  
  842. /* VIDEO POSTS */
  843. .video>iframe{
  844. max-width:100%;
  845. }
  846.  
  847. .video iframe{
  848. border-radius:5px;
  849. border-top:5px solid {color:Container};
  850. border-bottom:5px solid {color:Container};
  851. }
  852.  
  853.  
  854. /** POST FOOTER **/
  855. .post-footer{
  856. margin-top:1em;
  857. padding-top:0.5em;
  858. border-top:2.5px solid {color:Accent};
  859. }
  860.  
  861. .post-footer .clear{
  862. clear:both;
  863. }
  864.  
  865. .info{
  866. display:flex;
  867. justify-content:flex-start;
  868. flex-direction:row;
  869. flex-wrap:wrap;
  870. margin-bottom:0.5em;
  871. line-height:2em;
  872.  
  873. }
  874.  
  875. .info .clear{
  876. clear:both;
  877. }
  878.  
  879.  
  880. /** TAGS **/
  881. .tags{
  882. display:flex;
  883. justify-content:flex-start;
  884. flex-direction:row;
  885. flex-wrap:wrap;
  886. margin-bottom:0.5em;
  887. line-height:2em;
  888. }
  889.  
  890. .tags a{
  891. text-decoration:none;
  892. margin-right:0.5em;
  893. }
  894.  
  895. .tags mark{
  896. padding:0.25em;
  897. border-radius:2px;
  898. transition:0.5s;
  899. -moz-transition:0.5s;
  900. -o-transition:0.5s;
  901. -webkit-transition:0.5s;
  902. }
  903.  
  904. .tags mark:hover{
  905. background-color:{color:Container};
  906. color:{color:Accent};
  907. cursor:pointer;
  908. transition:0.5s;
  909. -moz-transition:0.5s;
  910. -o-transition:0.5s;
  911. -webkit-transition:0.5s;
  912. }
  913.  
  914. .tags i{
  915. font-weight:bold;
  916. }
  917.  
  918.  
  919. /** TIME STAMP **/
  920. .time a{
  921. text-decoration:none;
  922. margin-right:0.5em;
  923. }
  924.  
  925. .time mark{
  926. padding:0.25em;
  927. border-radius:2px;
  928. transition:0.5s;
  929. -moz-transition:0.5s;
  930. -o-transition:0.5s;
  931. -webkit-transition:0.5s;
  932. }
  933.  
  934. .time mark:hover{
  935. background-color:{color:Container};
  936. color:{color:Accent};
  937. cursor:pointer;
  938. transition:0.5s;
  939. -moz-transition:0.5s;
  940. -o-transition:0.5s;
  941. -webkit-transition:0.5s;
  942. }
  943.  
  944.  
  945. /** NOTES COUNT **/
  946. .notes a{
  947. text-decoration:none;
  948. margin-right:0.5em;
  949. }
  950.  
  951. .notes mark{
  952. padding:0.25em;
  953. border-radius:2px;
  954. transition:0.5s;
  955. -moz-transition:0.5s;
  956. -o-transition:0.5s;
  957. -webkit-transition:0.5s;
  958. }
  959.  
  960. .notes mark:hover{
  961. background-color:{color:Container};
  962. color:{color:Accent};
  963. cursor:pointer;
  964. transition:0.5s;
  965. -moz-transition:0.5s;
  966. -o-transition:0.5s;
  967. -webkit-transition:0.5s;
  968. }
  969.  
  970.  
  971. /** REBLOGGED FROM **/
  972. .via a{
  973. text-decoration:none;
  974. margin-right:0.5em;
  975. }
  976.  
  977. .via mark{
  978. padding:0.25em;
  979. border-radius:2px;
  980. transition:0.5s;
  981. -moz-transition:0.5s;
  982. -o-transition:0.5s;
  983. -webkit-transition:0.5s;
  984. }
  985.  
  986. .via mark:hover{
  987. background-color:{color:Container};
  988. color:{color:Accent};
  989. cursor:pointer;
  990. transition:0.5s;
  991. -moz-transition:0.5s;
  992. -o-transition:0.5s;
  993. -webkit-transition:0.5s;
  994. }
  995.  
  996.  
  997. /** POST SOURCE **/
  998. .source a{
  999. text-decoration:none;
  1000. margin-right:0.5em;
  1001. }
  1002.  
  1003. .source mark{
  1004. padding:0.25em;
  1005. border-radius:2px;
  1006. transition:0.5s;
  1007. -moz-transition:0.5s;
  1008. -o-transition:0.5s;
  1009. -webkit-transition:0.5s;
  1010. }
  1011.  
  1012. .source mark:hover{
  1013. background-color:{color:Container};
  1014. color:{color:Accent};
  1015. cursor:pointer;
  1016. transition:0.5s;
  1017. -moz-transition:0.5s;
  1018. -o-transition:0.5s;
  1019. -webkit-transition:0.5s;
  1020. }
  1021.  
  1022.  
  1023. /** REBLOG BUTTON **/
  1024. .reblogged a{
  1025. text-decoration:none;
  1026. margin-right:0.5em;
  1027. }
  1028.  
  1029. .reblogged mark{
  1030. padding:0.25em;
  1031. border-radius:2px;
  1032. transition:0.5s;
  1033. -moz-transition:0.5s;
  1034. -o-transition:0.5s;
  1035. -webkit-transition:0.5s;
  1036. }
  1037.  
  1038. .reblogged mark:hover{
  1039. background-color:{color:Container};
  1040. color:{color:Accent};
  1041. cursor:pointer;
  1042. transition:0.5s;
  1043. -moz-transition:0.5s;
  1044. -o-transition:0.5s;
  1045. -webkit-transition:0.5s;
  1046. }
  1047.  
  1048.  
  1049. /** LIKE BUTTON **/
  1050. .like_button {
  1051. display:inline-block;
  1052. position:relative;
  1053. padding-right:3px;
  1054. }
  1055.  
  1056. a.liked mark{
  1057. padding:0.25em;
  1058. background-color:{color:Accent};
  1059. border-radius:2px;
  1060. transition:0.5s;
  1061. -moz-transition:0.5s;
  1062. -o-transition:0.5s;
  1063. -webkit-transition:0.5s;
  1064. }
  1065.  
  1066. a.liked mark:hover{
  1067. color:{color:Accent};
  1068. background-color:{color:Container};
  1069. transition:0.5s;
  1070. -moz-transition:0.5s;
  1071. -o-transition:0.5s;
  1072. -webkit-transition:0.5s;
  1073. }
  1074.  
  1075. .like_button iframe {
  1076. height:100%;
  1077. left:0;
  1078. opacity:0;
  1079. position:absolute;
  1080. top:0;
  1081. width:100%;
  1082. padding:0.25em;
  1083. }
  1084.  
  1085. .like_button::before{
  1086. content:"\f004";
  1087. font-family:"Font Awesome\ 5 Free";
  1088. font-weight:900;
  1089. position:relative;
  1090. font-size:{select:FontSize};
  1091. /*color:{color:MarkText};
  1092. background-color:{color:Accent};*/
  1093. padding:0.25em;
  1094. /*transition:all .5s ease-in-out;*/
  1095. }
  1096.  
  1097. .like_button:hover::before {
  1098. color:{color:Accent};
  1099. /*background-color:{color:Container};*/
  1100. }
  1101.  
  1102. .like_button::after {
  1103. content:'like';
  1104. }
  1105.  
  1106. .cimg{
  1107. width:32px;
  1108. height:32px;
  1109. border-radius:50%;
  1110. border:2px solid {color:Accent};
  1111. margin-right:0.5em;
  1112.  
  1113. }
  1114.  
  1115. .cimg iframe{
  1116. filter:grayscale(100%);
  1117. -moz-filter:grayscale(100%);
  1118. -o-filter:grayscale(100%)
  1119. -webkit-filter:grayscale(100%);
  1120. }
  1121.  
  1122. .cimg iframe:hover{
  1123. filter:grayscale(0%);
  1124. -moz-filter:grayscale(0%);
  1125. -o-filter:grayscale(0%)
  1126. -webkit-filter:grayscale(0%);
  1127. }
  1128.  
  1129. .user a{
  1130. text-decoration:none;
  1131. margin-right:0.5em;
  1132. margin-top:2em;
  1133. }
  1134.  
  1135. .user mark{
  1136. padding:0.25em;
  1137. border-radius:2px;
  1138. transition:0.5s;
  1139. -moz-transition:0.5s;
  1140. -o-transition:0.5s;
  1141. -webkit-transition:0.5s;
  1142. }
  1143.  
  1144. .user mark:hover{
  1145. background-color:{color:Container};
  1146. color:{color:Accent};
  1147. cursor:pointer;
  1148. transition:0.5s;
  1149. -moz-transition:0.5s;
  1150. -o-transition:0.5s;
  1151. -webkit-transition:0.5s;
  1152. }
  1153.  
  1154. .username{
  1155. display:flex;
  1156. align-items:center;
  1157. justify-content:flex-start;
  1158. flex-direction:row;
  1159. margin-top:0.5em;
  1160. }
  1161.  
  1162.  
  1163. /** PAGINATION **/
  1164. .pagination{
  1165. width:100%;
  1166. height:calc(2 * {select:FontSize});
  1167. background-color:{color:Posts};
  1168. border-bottom:5px solid {color:Accent};
  1169. border-top:5px solid {color:Accent};
  1170. margin-bottom:0px;
  1171. display:flex;
  1172. align-items:center;
  1173. justify-content:space-around;
  1174. flex-direction:row;
  1175. }
  1176.  
  1177. .pagination a{
  1178. text-decoration:none;
  1179. margin-left:1.5em;
  1180. margin-right:1.5em;
  1181.  
  1182. }
  1183.  
  1184. .pagination mark{
  1185. text-transform:lowercase;
  1186. width:5em;
  1187. padding:0.25em;
  1188. background-color:{color:Accent};
  1189. color:{color:MarkText};
  1190. border-radius:2px;
  1191. transition:0.5s;
  1192. -moz-transition:0.5s;
  1193. -o-transition:0.5s;
  1194. -webkit-transition:0.5s;
  1195.  
  1196. }
  1197.  
  1198. .pagination mark:hover{
  1199. background-color:{color:Container};
  1200. transition:0.5s;
  1201. -moz-transition:0.5s;
  1202. -o-transition:0.5s;
  1203. -webkit-transition:0.5s;
  1204. }
  1205.  
  1206. /*
  1207. Don't delete or alter the credit!
  1208. Taking the credit off free things is rude;
  1209. I have spent much time on this.
  1210. */
  1211. #credit img{
  1212. height:50px;
  1213. right:25px;
  1214. bottom:25px;
  1215. position:absolute;
  1216. }
  1217.  
  1218. </style>
  1219. </head>
  1220. <body>
  1221.  
  1222. <!-- CONTENT -->
  1223. <div id="sidebar">
  1224. <div id="side-icon">
  1225. <!-- HAMBURGER MENU -->
  1226. <!-- Hamburger menu within the pink circle. -->
  1227. <nav class="menu">
  1228. <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
  1229. <label class="menu-open-button" for="menu-open">
  1230. <span class="hamburger hamburger-1"></span>
  1231. <span class="hamburger hamburger-2"></span>
  1232. <span class="hamburger hamburger-3"></span>
  1233. </label>
  1234.  
  1235. <!-- GOOEY MENU -->
  1236. <!-- This is where the menu links start. -->
  1237. <!-- Replace the '#' with the link of your choice. -->
  1238. <!-- i.e.: <a href="#"></a> ==> <a href="/ask"></a> -->
  1239. <!-- If you want to change the displayed icons, just change i.e.
  1240. 'fa fa-heart' to 'fa fa-adjust' or any icon of your choice.
  1241. -->
  1242. <a href="/" class="menu-item"> <i class="fa fa-home"></i> </a>
  1243. <a href="/ask" class="menu-item"> <i class="fa fa-envelope"></i> </a>
  1244. <a href="/archive" class="menu-item"> <i class="fa fa-th-large"></i> </a>
  1245. <a href="/about" class="menu-item"> <i class="fa fa-user"></i> </a>
  1246. <a href="/navi" class="menu-item"> <i class="fa fa-compass"></i> </a>
  1247. <!-- Don't touch this link it's my credit and I expect from you to leave it this way! -->
  1248. <a href="https://silbrigthemes.tumblr.com/" class="menu-item"> <i class="fa fa-code"></i> </a>
  1249.  
  1250. </nav>
  1251. </div>
  1252. <div id="side-title">{Title}</div>
  1253. <p>{Description}</p>
  1254. </div>
  1255.  
  1256. <!-- POSTS -->
  1257. <div class="heart2">
  1258. <div class="heart">
  1259. <div id="posts">
  1260. {block:Posts}
  1261. <article>
  1262.  
  1263. <!-- TEXT POSTS -->
  1264. {block:Text}
  1265. {block:Title}
  1266. <div class="title">{Title}</div>
  1267. {/block:Title}
  1268. {block:Body}
  1269. {block:NotReblog}
  1270. <div class="text">{Body}</div>
  1271. {/block:NotReblog}
  1272. {block:RebloggedFrom}
  1273. {block:Reblogs}
  1274. <div class="username">
  1275. {block:HasAvatar}
  1276. {block:HasPermalink}
  1277. <a href="{Permalink}" target="_blank">
  1278. <img class="cimg" src="{PortraitURL-64}"></a>
  1279. {/block:HasPermalink}
  1280. {block:HasNoPermalink}
  1281. <img class="cimg" src="{PortraitURL-64}">
  1282. {/block:HasNoPermalink}
  1283. {/block:HasAvatar}
  1284. {block:HasPermalink}
  1285. <div class="user">
  1286. <a target="_blank" class="user" href="{Permalink}">
  1287. <mark>{Username}</mark>
  1288. </a>
  1289. </div>
  1290. {/block:HasPermalink}
  1291. {block:HasNoPermalink}
  1292. <span class="user"><mark>{Username}</mark></span>
  1293. {/block:HasNoPermalink}
  1294. </div>
  1295. <div class="text">{Body}</div>
  1296. {/block:Reblogs}
  1297. {/block:RebloggedFrom}
  1298.  
  1299.  
  1300. {/block:Body}
  1301. {/block:Text}
  1302.  
  1303. <!-- QUESTION POSTS -->
  1304. {block:Answer}
  1305. <div class="question">
  1306. <div class="question-username">
  1307. <img src="{AskerPortraitURL-96}" alt="user icon">
  1308. <mark>{Asker}</mark>
  1309. </div>
  1310. {Question}
  1311. </div>
  1312.  
  1313. {block:Answerer}
  1314. <div class="answer">
  1315. <div class="answer-username">
  1316. <img src="{AnswererPortraitURL-96}" alt="user icon">
  1317. <mark>{Answerer}</mark>
  1318. </div>
  1319. {Answer}
  1320. </div>
  1321. {/block:Answerer}
  1322. {block:NotReblog}
  1323. <div>{Replies}</div>
  1324. {/block:NotReblog}
  1325. {block:RebloggedFrom}
  1326. {block:Reblogs}
  1327. <div class="username">
  1328. {block:HasAvatar}
  1329. {block:HasPermalink}
  1330. <a href="{Permalink}" target="_blank">
  1331. <img class="cimg" src="{PortraitURL-64}"></a>
  1332. {/block:HasPermalink}
  1333. {block:HasNoPermalink}
  1334. <img class="cimg" src="{PortraitURL-64}">
  1335. {/block:HasNoPermalink}
  1336. {/block:HasAvatar}
  1337. {block:HasPermalink}
  1338. <div class="user">
  1339. <a target="_blank" class="user" href="{Permalink}">
  1340. <mark>{Username}</mark>
  1341. </a>
  1342. </div>
  1343. {/block:HasPermalink}
  1344. {block:HasNoPermalink}
  1345. <span class="user"><mark>{Username}</mark></span>
  1346. {/block:HasNoPermalink}
  1347. </div>
  1348. <div class="text">{Body}</div>
  1349. {/block:Reblogs}
  1350. {/block:RebloggedFrom}
  1351. {/block:Answer}
  1352.  
  1353.  
  1354. <!-- QUOTE POSTS -->
  1355. {block:Quote}
  1356. <div class="quoted">
  1357. {Quote}
  1358. </div>
  1359. {block:Source}
  1360. <div class="quote-source">
  1361. – {Source}
  1362. </div>
  1363. {/block:Source}
  1364. {/block:Quote}
  1365.  
  1366. <!-- LINK POSTS -->
  1367. {block:Link}
  1368. <div class="link-posts">
  1369. <a href="{URL}">
  1370. <img src="{Thumbnail-HighRes}">
  1371. {Name}
  1372. </a>
  1373. </div>
  1374. {block:Description}
  1375. {block:NotReblog}
  1376. {Description}
  1377. {/block:NotReblog}
  1378. {block:RebloggedFrom}
  1379. {block:Reblogs}
  1380. <div class="username">
  1381. {block:HasAvatar}
  1382. {block:HasPermalink}
  1383. <a href="{Permalink}" target="_blank">
  1384. <img class="cimg" src="{PortraitURL-64}"></a>
  1385. {/block:HasPermalink}
  1386. {block:HasNoPermalink}
  1387. <img class="cimg" src="{PortraitURL-64}">
  1388. {/block:HasNoPermalink}
  1389. {/block:HasAvatar}
  1390. {block:HasPermalink}
  1391. <div class="user">
  1392. <a target="_blank" class="user" href="{Permalink}">
  1393. <mark>{Username}</mark>
  1394. </a>
  1395. </div>
  1396. {/block:HasPermalink}
  1397. {block:HasNoPermalink}
  1398. <span class="user"><mark>{Username}</mark></span>
  1399. {/block:HasNoPermalink}
  1400. </div>
  1401. <div class="text">{Body}</div>
  1402. {/block:Reblogs}
  1403. {/block:RebloggedFrom}
  1404. {/block:Description}
  1405. {/block:Link}
  1406.  
  1407. <!-- CHAT POSTS -->
  1408. <div class="chatterbox">
  1409. {block:Chat}
  1410. <div class="chat clear">
  1411. {block:Title}
  1412. <div class="title">{Title}</div>
  1413. {/block:Title}
  1414. {block:Lines}
  1415. {block:Label}
  1416. <span class="label_{alt}">
  1417. {Label}
  1418. </span>
  1419. {/block:Label}
  1420. <div class="line_{alt}">
  1421. {Line}<br>
  1422. </div>
  1423. {/block:Lines}
  1424. </div>
  1425. {/block:Chat}
  1426. </div>
  1427.  
  1428. <!-- PHOTO POSTS -->
  1429. {block:Photo}
  1430. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  1431. {block:Caption}
  1432. {block:NotReblog}{Caption}{/block:NotReblog}
  1433. {block:RebloggedFrom}
  1434. {block:Reblogs}
  1435. <div class="username">
  1436. {block:HasAvatar}
  1437. {block:HasPermalink}
  1438. <a href="{Permalink}" target="_blank">
  1439. <img class="cimg" src="{PortraitURL-64}"></a>
  1440. {/block:HasPermalink}
  1441. {block:HasNoPermalink}
  1442. <img class="cimg" src="{PortraitURL-64}">
  1443. {/block:HasNoPermalink}
  1444. {/block:HasAvatar}
  1445. {block:HasPermalink}
  1446. <div class="user">
  1447. <a target="_blank" class="user" href="{Permalink}">
  1448. <mark>{Username}</mark>
  1449. </a>
  1450. </div>
  1451. {/block:HasPermalink}
  1452. {block:HasNoPermalink}
  1453. <span class="user"><mark>{Username}</mark></span>
  1454. {/block:HasNoPermalink}
  1455. </div>
  1456. <div class="text">{Body}</div>
  1457. {/block:Reblogs}
  1458. {/block:RebloggedFrom}
  1459. {/block:Caption}
  1460. {/block:Photo}
  1461.  
  1462. <!-- PHOTOSETS -->
  1463. {block:Photoset}
  1464. <div class="photoset">
  1465. {Photoset-500}
  1466. </div>
  1467. {block:Caption}
  1468. {block:NotReblog}
  1469. {Caption}
  1470. {/block:NotReblog}
  1471. {block:RebloggedFrom}
  1472. {block:Reblogs}
  1473. <div class="username">
  1474. {block:HasAvatar}
  1475. {block:HasPermalink}
  1476. <a href="{Permalink}" target="_blank">
  1477. <img class="cimg" src="{PortraitURL-64}"></a>
  1478. {/block:HasPermalink}
  1479. {block:HasNoPermalink}
  1480. <img class="cimg" src="{PortraitURL-64}">
  1481. {/block:HasNoPermalink}
  1482. {/block:HasAvatar}
  1483. {block:HasPermalink}
  1484. <div class="user">
  1485. <a target="_blank" class="user" href="{Permalink}">
  1486. <mark>{Username}</mark>
  1487. </a>
  1488. </div>
  1489. {/block:HasPermalink}
  1490. {block:HasNoPermalink}
  1491. <span class="user"><mark>{Username}</mark></span>
  1492. {/block:HasNoPermalink}
  1493. </div>
  1494. <div class="text">{Body}</div>
  1495. {/block:Reblogs}
  1496. {/block:RebloggedFrom}
  1497. {/block:Caption}
  1498. {/block:Photoset}
  1499.  
  1500. <!-- AUDIO POSTS -->
  1501. {block:Audio}
  1502. {block:AudioEmbed}
  1503. <div class="audio">
  1504. {AudioEmbed}
  1505. </div>
  1506. {/block:AudioEmbed}
  1507. {block:Caption}
  1508. {block:NotReblog}
  1509. {Caption}
  1510. {/block:NotReblog}
  1511. {block:RebloggedFrom}
  1512. {block:Reblogs}
  1513. <div class="username">
  1514. {block:HasAvatar}
  1515. {block:HasPermalink}
  1516. <a href="{Permalink}" target="_blank">
  1517. <img class="cimg" src="{PortraitURL-64}"></a>
  1518. {/block:HasPermalink}
  1519. {block:HasNoPermalink}
  1520. <img class="cimg" src="{PortraitURL-64}">
  1521. {/block:HasNoPermalink}
  1522. {/block:HasAvatar}
  1523. {block:HasPermalink}
  1524. <div class="user">
  1525. <a target="_blank" class="user" href="{Permalink}">
  1526. <mark>{Username}</mark>
  1527. </a>
  1528. </div>
  1529. {/block:HasPermalink}
  1530. {block:HasNoPermalink}
  1531. <span class="user"><mark>{Username}</mark></span>
  1532. {/block:HasNoPermalink}
  1533. </div>
  1534. <div class="text">{Body}</div>
  1535. {/block:Reblogs}
  1536. {/block:RebloggedFrom}
  1537. {/block:Caption}
  1538. {/block:Audio}
  1539.  
  1540. <!-- VIDEO POSTS -->
  1541. {block:Video}
  1542. <div class="video">
  1543. {Video-500}
  1544. </div>
  1545. {block:Caption}
  1546. {block:NotReblog}
  1547. {Caption}
  1548. {/block:NotReblog}
  1549. {block:RebloggedFrom}
  1550. {block:Reblogs}
  1551. <div class="username">
  1552. {block:HasAvatar}
  1553. {block:HasPermalink}
  1554. <a href="{Permalink}" target="_blank">
  1555. <img class="cimg" src="{PortraitURL-64}"></a>
  1556. {/block:HasPermalink}
  1557. {block:HasNoPermalink}
  1558. <img class="cimg" src="{PortraitURL-64}">
  1559. {/block:HasNoPermalink}
  1560. {/block:HasAvatar}
  1561. {block:HasPermalink}
  1562. <div class="user">
  1563. <a target="_blank" class="user" href="{Permalink}">
  1564. <mark>{Username}</mark>
  1565. </a>
  1566. </div>
  1567. {/block:HasPermalink}
  1568. {block:HasNoPermalink}
  1569. <span class="user"><mark>{Username}</mark></span>
  1570. {/block:HasNoPermalink}
  1571. </div>
  1572. <div class="text">{Body}</div>
  1573. {/block:Reblogs}
  1574. {/block:RebloggedFrom}
  1575. {/block:Caption}
  1576. {/block:Video}
  1577.  
  1578. <!-- POST FOOTER -->
  1579. <div class="post-footer clear">
  1580. <div class="info clear">
  1581.  
  1582. <!-- Time Ago -->
  1583. {block:Date}
  1584. <div class="time">
  1585. <a href="{Permalink}" title="{Month} {DayOfMonth}, {Year}">
  1586. <mark><i class="fa fa-clock"></i> {TimeAgo}</mark></a>
  1587. </div>
  1588. {/block:Date}
  1589.  
  1590. <!-- Note Count -->
  1591. {block:NoteCount}
  1592. <div class="notes">
  1593. <a href="{Permalink}">
  1594. <mark><i class="fas fa-link"></i> {NoteCountWithLabel}</mark></a>
  1595. </div>
  1596.  
  1597. {/block:NoteCount}
  1598.  
  1599. {block:RebloggedFrom}
  1600. <div class="via">
  1601. <a href="{ReblogParentURL}">
  1602. <mark><i class="fas fa-clone"></i> via</mark>
  1603. </a>
  1604. </div>
  1605.  
  1606. {/block:RebloggedFrom}
  1607.  
  1608. {block:ContentSource}
  1609. <div class="source">
  1610. <a href="{SourceURL}">
  1611. <mark><i class="fas fa-copyright"></i> source</mark>
  1612. </a>
  1613. </div>
  1614.  
  1615. {/block:ContentSource}
  1616.  
  1617. <div class="reblogged">
  1618. <a href="{ReblogURL}">
  1619. <mark><i class="fa fa-retweet"></i> reblog</mark>
  1620. </a>
  1621. </div>
  1622.  
  1623. <a class="liked" href="#">
  1624. <mark>{LikeButton}</mark>
  1625. </a>
  1626.  
  1627. </div><!-- /info -->
  1628.  
  1629. {block:HasTags}
  1630. <div class="tags">
  1631. {block:Tags}
  1632. <a href="{TagURL}">
  1633. <mark>
  1634. <i class="fa fa-tags"></i> {Tag}
  1635. </mark>
  1636. </a>
  1637. {/block:Tags}
  1638. </div><!-- /tags -->
  1639. {/block:HasTags}
  1640. </div>
  1641.  
  1642. {block:PermalinkPage}
  1643. {block:NoteCount}
  1644. {block:PostNotes}
  1645. {PostNotes}
  1646. {/block:PostNotes}
  1647. {/block:NoteCount}
  1648. {/block:PermalinkPage}
  1649. </article>
  1650. {/block:Posts}
  1651.  
  1652. <!-- PAGINATION -->
  1653. {block:Pagination}
  1654. <div class="pagination">
  1655. {block:PreviousPage}
  1656. <a href="{PreviousPage}"><mark>previous</mark></a>
  1657. {/block:PreviousPage}
  1658. {block:NextPage}
  1659. <a href="{NextPage}"><mark>next</mark></a>
  1660. {/block:NextPage}
  1661. </div><!-- /pagination -->
  1662. {/block:Pagination}
  1663. </div>
  1664. </div>
  1665. </div>
  1666.  
  1667. <!--
  1668. Don't delete or alter the credit!
  1669. Taking the credit off free things is rude;
  1670. I have spent much time on this.
  1671. -->
  1672. <div id="credit">
  1673. <a href="https://silbrigthemes.tumblr.com/">
  1674. <img src="https://78.media.tumblr.com/7854d98ef9b778a43fc9dd83b828ab02/tumblr_p3jmkwDy4c1wsskx3o1_1280.png" alt="credit: @silbrigthemes">
  1675. </a>
  1676.  
  1677. </div>
  1678.  
  1679.  
  1680. <!-- Necessary to eliminate the tumblr redirect and have direct links instead -->
  1681. <script>
  1682. $(document).ready(function(){
  1683. //remove tumblr redirects script by magnusthemes@tumblr
  1684. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1685. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1686. var replaceURL = decodeURIComponent(originalURL);
  1687. $(this).attr("href", replaceURL);
  1688. });
  1689. });
  1690. </script>
  1691.  
  1692.  
  1693.  
  1694. <!-- Filters -->
  1695. <!-- Keep those lines.-->
  1696. <!-- Only delete / change them if you know what you are doing. -->
  1697. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  1698. <defs>
  1699. <filter id="shadowed-goo">
  1700.  
  1701. <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
  1702. <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
  1703. <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
  1704. <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
  1705. <feOffset in="shadow" dx="1" dy="1" result="shadow" />
  1706. <feComposite in2="shadow" in="goo" result="goo" />
  1707. <feComposite in2="goo" in="SourceGraphic" result="mix" />
  1708. </filter>
  1709. <filter id="goo">
  1710. <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
  1711. <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
  1712. <feComposite in2="goo" in="SourceGraphic" result="mix" />
  1713. </filter>
  1714. </defs>
  1715. </svg>
  1716.  
  1717. </body>
  1718. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!