API tools faq
paste
Advertisement
silbrigthemes

Spark Joy | Freude (Theme #20)

silbrigthemes
Nov 23rd, 2019 (edited)
5,628
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 101.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. SPARK JOY | FREUDE
  7. Theme #20 by silbrigthemes
  8.  
  9. This theme is a responsive single column sidebar theme with a muted, simplistic and big aesthetic. It aims to make your blogging experience spark joy.
  10.  
  11. ----------
  12.  
  13. Rules:
  14.  
  15. 1) Do not use as base code.
  16. 2) Do not customize beyond recognition.
  17. 3) Do not steal (parts of) the code.
  18. 4) Do not claim as your own.
  19. 5) Do not delete or alter the credit.
  20.  
  21. ----------
  22.  
  23. Useful comments to this code have been made. There is a customization guide which is linked on the official post.
  24.  
  25. If you need any help for a problem that is not listed in the customization guide or when you cannot find a solution, feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  26.  
  27. May this theme spark joy for you!
  28.  
  29. Love,
  30. Julia <3
  31.  
  32. ----------
  33.  
  34. Note:
  35.  
  36. This work is protected by a creative commons
  37. Attribution-NonCommercial-NoDerivatives 4.0 International
  38. (CC BY-NC-ND 4.0)
  39. license.
  40.  
  41. -->
  42.  
  43. <head>
  44.  
  45. <meta charset="utf-16">
  46. <title>{Title} {block:TagPage}| {Tag}{/block:TagPage} {block:SearchPage}| {SearchQuery}{/block:SearchPage}</title>
  47. {block:Description}
  48. <meta name="description" content="{MetaDescription}" />
  49. {/block:Description}
  50. <link rel="shortcut icon" href="{Favicon}"/>
  51. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  52. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  53.  
  54. <!-- Necessary for the theme to be responsive. -->
  55. <meta name="viewport" content="width=device-width, initial-scale=1">
  56.  
  57. <!-- Icon font, by fontawesome -->
  58. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  59.  
  60. <!-- Necessary for the scripts to work. -->
  61. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  62.  
  63. <!-- Video Resizing Scripts by @shythemes -->
  64. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  65.  
  66. <!-- Responsive videos, by @nouvae. -->
  67. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  68.  
  69. <!-- CSS Photosets, by annasthms and espoirthemes -->
  70. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  71. <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  72. <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  73. <script>initPhotosets();</script>
  74.  
  75. <!-- Changes the toolbar color on mobile. -->
  76. <meta name="theme-color" content="{color:Sidebar}"/>
  77.  
  78. <!-- Change Audio iframe color script, by @roxiesthemes. -->
  79. <script>
  80. $(document).ready(function() {
  81. $('iframe.tumblr_audio_player').load( function() {
  82. $('iframe.tumblr_audio_player').contents().find("head")
  83. .append($("<style type='text/css'> .audio-player{background:{color:Sidebar} !important} </style>"));
  84. $('iframe.tumblr_audio_player').contents().find("head")
  85. .append($("<style type='text/css'> .track-name{color:{color:Text} !important} </style>"));
  86. $('iframe.tumblr_audio_player').contents().find("head")
  87. .append($("<style type='text/css'> .track-artist{color:{color:Text} !important} </style>"));
  88. $('iframe.tumblr_audio_player').contents().find("head")
  89. .append($("<style type='text/css'> .play-pause{color:{color:Text} !important} </style>"));
  90. });
  91. });
  92. </script>
  93.  
  94. <!-- TITLE FONTS -->
  95. <!-- Merriweather -->
  96. <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  97. <!-- Noto Serif JP -->
  98. <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,400,700&display=swap&subset=japanese" rel="stylesheet">
  99. <!-- Roboto Slab -->
  100. <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  101.  
  102. <!-- BODY FONTS -->
  103. <!-- Noto Sans JP -->
  104. <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700&display=swap&subset=japanese" rel="stylesheet">
  105. <!-- Open Sans -->
  106. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  107. <!-- Roboto -->
  108. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  109.  
  110. <!-- SELECTORS -->
  111. <!-- Body Font -->
  112. <meta name="select:Font" content="Noto Sans JP" title="Noto Sans JP"/>
  113. <meta name="select:Font" content="Open Sans" title="Open Sans"/>
  114. <meta name="select:Font" content="Roboto" title="Roboto"/>
  115. <!-- Title Font -->
  116. <meta name="select:Title Font" content="Merriweather" title="Merriweather"/>
  117. <meta name="select:Title Font" content="Noto Serif JP" title="Noto Serif JP"/>
  118. <meta name="select:Title Font" content="Roboto Slab" title="Roboto Slab"/>
  119. <!-- Font Size -->
  120. <meta name="select:Font Size" content="1em" title="16px"/>
  121. <meta name="select:Font Size" content="18px" title="+2px"/>
  122. <meta name="select:Font Size" content="14px" title="-2px"/>
  123. <!-- Title Alignment -->
  124. <meta name="select:Title Align" content="center" title="center"/>
  125. <meta name="select:Title Align" content="left" title="left"/>
  126. <!-- Text Alignment -->
  127. <meta name="select:Text Align" content="justify" title="justify"/>
  128. <meta name="select:Text Align" content="left" title="left"/>
  129. <!-- Ordered Lists -->
  130. <meta name="select:Ordered List" content="decimal" title="decimal"/>
  131. <meta name="select:Ordered List" content="lower-alpha" title="lower alpha"/>
  132. <meta name="select:Ordered List" content="lower-roman" title="lower roman"/>
  133. <meta name="select:Ordered List" content="upper-alpha" title="upper alpha"/>
  134. <meta name="select:Ordered List" content="upper-roman" title="upper roman"/>
  135. <!-- Unordered Lists -->
  136. <meta name="select:Unordered List" content="circle" title="circle"/>
  137. <meta name="select:Unordered List" content="disc" title="disc"/>
  138. <meta name="select:Unordered List" content="square" title="square"/>
  139.  
  140. <!-- IF VARIABLES -->
  141. <!-- Tags and Captions -->
  142. <meta name="if:Show Captions" content="0"/>
  143. <meta name="if:Show Tags" content="1"/>
  144. <!-- Accessibility -->
  145. <meta name="if:Special Fonts" content="1"/>
  146. <meta name="if:Italics" content="1"/>
  147. <meta name="if:Grayscale Hover" content="1"/>
  148. <!-- Custom Links -->
  149. <meta name="if:Custom Link 1" content="1"/>
  150. <meta name="if:Custom Link 2" content="1"/>
  151. <meta name="if:Custom Link 3" content="1"/>
  152. <meta name="if:Custom Link 4" content="1"/>
  153. <meta name="if:Custom Link 5" content="1"/>
  154.  
  155. <!-- TEXT VARIABLES -->
  156. <!-- Custom Links -->
  157. <meta name="text:Custom Icon 1" content="fas fa-link"/>
  158. <meta name="text:Custom Link 1" content="First Link"/>
  159. <meta name="text:Custom URL 1" content="/"/>
  160. <meta name="text:Custom Icon 2" content="fas fa-link"/>
  161. <meta name="text:Custom Link 2" content="Second Link"/>
  162. <meta name="text:Custom URL 2" content="/"/>
  163. <meta name="text:Custom Icon 3" content="fas fa-link"/>
  164. <meta name="text:Custom Link 3" content="Third Link"/>
  165. <meta name="text:Custom URL 3" content="/"/>
  166. <meta name="text:Custom Icon 4" content="fas fa-link"/>
  167. <meta name="text:Custom Link 4" content="Fourth Link"/>
  168. <meta name="text:Custom URL 4" content="/"/>
  169. <meta name="text:Custom Icon 5" content="fas fa-link"/>
  170. <meta name="text:Custom Link 5" content="Fifth Link"/>
  171. <meta name="text:Custom URL 5" content="/"/>
  172. <!-- Not Found Page -->
  173. <meta name="text:Not Found Title" content="Not Found"/>
  174. <meta name="text:Not Found Text" content="The emptiness of this page does not spark joy."/>
  175. <!-- Deactivated Users -->
  176. <meta name="text:Deactivated User Text" content="did no longer spark joy"/>
  177.  
  178. <!-- COLORS -->
  179. <!-- General -->
  180. <meta name="color:Accent 1" content="#dbc1a2"/>
  181. <meta name="color:Accent 2" content="#ddbf9b"/>
  182. <meta name="color:Accent 3" content="#38353a"/>
  183. <meta name="color:Background" content="#fcfcfb"/>
  184. <meta name="color:Bold Text" content="#616569"/>
  185. <meta name="color:Borders" content="#616569"/>
  186. <meta name="color:Italic Text" content="#121314"/>
  187. <meta name="color:Links" content="#e0cfba"/>
  188. <meta name="color:Sidebar" content="#e8e4e0"/>
  189. <meta name="color:Sidebar Accent" content="#cc9960"/>
  190. <meta name="color:Text" content="#35383a"/>
  191. <!-- Colored Text -->
  192. <meta name="color:Pink Text" content="#d611ab"/>
  193. <meta name="color:Red Text" content="#d10808"/>
  194. <meta name="color:Orange Text" content="#ed8209"/>
  195. <meta name="color:Yellow Text" content="#dba608"/>
  196. <meta name="color:Green Text" content="#1d891b"/>
  197. <meta name="color:Blue Text" content="#0f35bf"/>
  198. <meta name="color:Purple Text" content="#6d0fbf"/>
  199.  
  200. <style>
  201.  
  202. body{
  203. margin:0;
  204. top:0;
  205. left:0;
  206. background-color:{color:Background};
  207. font-family:"{select:Font}", Verdana;
  208. font-size:{select:Font Size};
  209. color:{color:Text};
  210. text-align:{select:Text Align};
  211. overflow-x:hidden;
  212. }
  213.  
  214. /* Custom Scrollbar */
  215. ::-webkit-scrollbar{
  216. width:10px;
  217. background-color:{color:Sidebar};
  218. }
  219.  
  220. ::-webkit-scrollbar-thumb{
  221. width:10px;
  222. background-color:{color:Accent 1};
  223. }
  224.  
  225. /* Custom Text Selection */
  226. ::selection{
  227. background-color:{color:Sidebar};
  228. }
  229.  
  230. ::-moz-selection{
  231. background-color:{color:Sidebar};
  232. }
  233.  
  234. ::-o-selection{
  235. background-color:{color:Sidebar};
  236. }
  237.  
  238. ::-webkit-selection{
  239. background-color:{color:Sidebar};
  240. }
  241.  
  242. /* Custom Tooltips */
  243. .tippy-tooltip.sparkjoy-theme {
  244. background-color:{color:Background};
  245. color:{color:Bold Text};
  246. border:1px solid {color:Accent 1};
  247. text-align:left;
  248. }
  249.  
  250. .tippy-tooltip.sparkjoy-theme .tippy-svg-arrow {
  251. fill:{color:Accent 1};
  252. }
  253.  
  254. /* --- END GENERAL | START TEXT STYLES --- */
  255.  
  256. /* Bold Text */
  257. b, strong{
  258. font-weight:bold;
  259. font-weight:700;
  260. color:{color:Bold Text};
  261. }
  262.  
  263. /* Italic Text */
  264. i, em{
  265. font-weight:300;
  266. {block:IfItalics}
  267. font-style:italic;
  268. {/block:IfItalics}
  269. {block:IfNotItalics}
  270. font-style:normal;
  271. {/block:IfNotItalics}
  272. color:{color:Italic Text};
  273. }
  274.  
  275. /* Marked Text */
  276. mark{
  277. background-color:{color:Links};
  278. padding:0 4px;
  279. }
  280.  
  281. /* Underlined Text */
  282. u{
  283. border-bottom:2px solid {color:Text};
  284. text-decoration:none;
  285. }
  286.  
  287. /* Small Text */
  288. small{
  289. font-size:calc(1em - 4px);
  290. }
  291.  
  292. /* Preformatted Text */
  293. pre{
  294. font-family:"Roboto Mono", Courier;
  295. word-wrap:break-all;
  296. white-space:pre-wrap;
  297. background-color:{color:Accent 1};
  298. padding:0.75em 1em;
  299. }
  300.  
  301. /* Line Break */
  302. hr{
  303. width:80%;
  304. height:4px;
  305. border:none;
  306. background-color:{color:Links};
  307. box-shadow:6px 6px 0 {color:Sidebar Accent};
  308. }
  309.  
  310. /* Empty Paragraphs */
  311. p:empty{
  312. display:none;
  313. }
  314.  
  315. /* Blockquote */
  316. blockquote{
  317. padding:0.25em 1.5em;
  318. background-color:{color:Sidebar};
  319. box-shadow:4px 4px 0 {color:Sidebar Accent};
  320. }
  321.  
  322. /* LISTS */
  323. /* Ordered List */
  324. ol{
  325. list-style-type:{select:Ordered List};
  326. }
  327.  
  328. /* Unordered List */
  329. ul{
  330. list-style-type:{select:Unordered List};
  331. }
  332.  
  333. /* READ MORE */
  334. a.read_more{
  335. margin-left:calc(50% - (16px + 2px + 32px + 8px));
  336. text-transform:lowercase;
  337. }
  338.  
  339. /* GIF ATTRIBUTION */
  340. p.tmblr-attribution{
  341. text-align:{select:Title Align};
  342. margin-top:8px;
  343. }
  344.  
  345. /* READ MORE + GIF ATTRIBUTION */
  346. a.read_more, p.tmblr-attribution a{
  347. box-shadow:none;
  348. background-color:{color:Sidebar};
  349. border:none;
  350. color:{color:Bold Text};
  351. padding:4px 8px;
  352. font-size:calc(1em - 2px);
  353. }
  354.  
  355. a.read_more:hover, p.tmblr-attribution a:hover{
  356. box-shadow:none;
  357. border:none;
  358. color:{color:Text};
  359. background-color:{color:Links};
  360. }
  361.  
  362. a.read_more, a.read_more:hover, p.tmblr-attribution a, p.tmblr-attribution a:hover{
  363. transition:0.5s;
  364. -moz-transition:0.5s;
  365. -o-transition:0.5s;
  366. -webkit-transition:0.5s;
  367. }
  368.  
  369. /* LINKS */
  370. /* Link */
  371. a{
  372. color:{color:Text};
  373. text-decoration:none;
  374. border-bottom:2px solid {color:Links};
  375. box-shadow:inset 0 -2px {color:Links};
  376. }
  377.  
  378. /* Link on Hover */
  379. a:hover{
  380. box-shadow:inset 0 -8px {color:Links};
  381. }
  382.  
  383. /* Transitions */
  384. a, a:hover{
  385. transition:0.5s;
  386. -moz-transition:0.5s;
  387. -o-transition:0.5s;
  388. -webkit-transition:0.5s;
  389. }
  390.  
  391. /* HEADINGS */
  392. /* Post Title */
  393. .title{
  394. font-size:2.5em;
  395. font-family:"{select:Title Font}", Georgia;
  396. color:{color:Text};
  397. text-align:{select:Title Align};
  398. }
  399.  
  400. /* 1st Heading */
  401. h1{
  402. font-size:2em;
  403. }
  404.  
  405. /* 2nd Heading */
  406. h2{
  407. font-size:1.5em;
  408. }
  409.  
  410. /* 3rd Heading */
  411. h3{
  412. font-size:1.25em;
  413. }
  414.  
  415. /* 4th Heading */
  416. h4{
  417. font-size:calc(1em + 2px);
  418. }
  419.  
  420. /* 5th Heading */
  421. h5{
  422. font-size:1em;
  423. }
  424.  
  425. /* 6th Heading */
  426. h6{
  427. font-size:calc(1em - 2px);
  428. }
  429.  
  430. /* COLORED TEXT */
  431. /* Red Text */
  432. .npf_color_joey {
  433. color:{color:Red Text}!important;
  434. }
  435.  
  436. /* Orange Text */
  437. .npf_color_monica {
  438. color:{color:Orange Text}!important;
  439. }
  440.  
  441. /* Yellow Text */
  442. .npf_color_phoebe {
  443. color:{color:Yellow Text}!important;
  444. }
  445.  
  446. /* Green Text */
  447. .npf_color_ross {
  448. color:{color:Green Text}!important;
  449. }
  450.  
  451. /* Blue Text */
  452. .npf_color_rachel {
  453. color:{color:Blue Text}!important;
  454. }
  455.  
  456. /* Purple Text */
  457. .npf_color_chandler {
  458. color:{color:Purple Text}!important;
  459. }
  460.  
  461. /* Pink Text */
  462. .npf_color_niles {
  463. color:{color:Pink Text}!important;
  464. }
  465.  
  466. /* SPECIAL FONTS */
  467. {block:IfNotSpecialFonts}
  468. p.npf_quirky, p.npf_chat, p.npf_quote{
  469. font-family:"{select:Font}", Verdana!important;
  470. }
  471. {/block:IfNotSpecialFonts}
  472.  
  473. /* –– END TEXT STYLES | START LAYOUT –– */
  474.  
  475. /* SIDEBAR */
  476. #sidebar{
  477. width:calc(50vw - 4em - 10px);
  478. height:calc(100vh - 4em);
  479. padding:2em;
  480. position:fixed;
  481. top:0;
  482. right:0;
  483. background-color:{color:Sidebar};
  484. display:flex;
  485. align-items:flex-start;
  486. justify-content:center;
  487. flex-direction:column;
  488. }
  489.  
  490. #sb-blog-info{
  491. display:flex;
  492. }
  493.  
  494. /* Sidebar Icon */
  495. #sb-icon img{
  496. margin-right:1em;
  497. width:96px;
  498. height:96px;
  499. }
  500.  
  501. #sb-title, #sb-desc{
  502. text-align:left;
  503. }
  504.  
  505. /* Sidebar Title */
  506. #sb-title{
  507. font-size:2.5em;
  508. color:{color:Bold Text};
  509. font-family:"{select:Title Font}", Georgia;
  510. }
  511.  
  512. /* Sidebar Description */
  513. #sb-desc{
  514. margin-bottom:1em;
  515. }
  516.  
  517. /* Sidebar Navigation */
  518. #sb-nav{
  519. display:flex;
  520. flex-wrap:wrap;
  521. }
  522.  
  523. /* Sidebar Navigation Element */
  524. .sb-nav{
  525. padding:4px 8px;
  526. color:{color:Text};
  527. background-color:{color:Links};
  528. margin-right:4px;
  529. margin-bottom:4px;
  530. text-transform:capitalize;
  531. }
  532.  
  533. /* Sidebar Navigation Icon */
  534. .sb-nav span{
  535. font-size:calc(1em - 2px);
  536. color:{color:Sidebar Accent};
  537. }
  538.  
  539. /* Sidebar Navigation Element on Hover */
  540. .sb-nav:hover{
  541. background-color:{color:Sidebar Accent};
  542. color:{color:Background};
  543. }
  544.  
  545. /* Sidebar Navigation Icon on Hover */
  546. .sb-nav:hover span{
  547. color:{color:Links};
  548. }
  549.  
  550. /* Sidebar Navigation Transitions */
  551. .sb-nav, .sb-nav:hover{
  552. transition:0.5s;
  553. -moz-transition:0.5s;
  554. -o-transition:0.5s;
  555. -webkit-transition:0.5s;
  556. }
  557.  
  558. /* Sidebar Navigation Links */
  559. a.sbn-link{
  560. border:none;
  561. box-shadow:none;
  562. }
  563.  
  564. /* SEARCHBAR */
  565. .sb-search .query {
  566. border:0;
  567. outline:0;
  568. padding:4px 8px;
  569. width:auto;
  570. font-family:"{select:Font}", Verdana;
  571. font-size:1em;
  572. color:{color:Text};
  573. background-color:{color:Links};
  574. text-transform:capitalize;
  575. text-align:left;
  576. margin-bottom:4px;
  577. }
  578.  
  579. /* Sidebar Searchbar on Hover */
  580. .sb-search .query:hover{
  581. background-color:{color:Sidebar Accent};
  582. color:{color:Background};
  583. }
  584.  
  585. /* Sidebar Searchbar on Focus */
  586. .sb-search .query:focus{
  587. background-color:{color:Accent 2};
  588. }
  589.  
  590. .sb-search .query, .sb-search .query:hover, .sb-search .query:focus{
  591. transition:0.5s;
  592. -moz-transition:0.5s;
  593. -o-transition:0.5s;
  594. -webkit-transition:0.5s;
  595. }
  596.  
  597. /* Placeholder */
  598. ::-webkit-input-placeholder {
  599. color:inherit;
  600. }
  601.  
  602. ::-o-placeholder {
  603. color:inherit;
  604. opacity:1;
  605. }
  606.  
  607. ::-moz-placeholder {
  608. color:inherit;
  609. opacity:1;
  610. }
  611.  
  612. :-ms-input-placeholder {
  613. color:inherit;
  614. }
  615.  
  616. /* Placeholder on Focus */
  617. input:focus::-webkit-input-placeholder {
  618. color:transparent;
  619. }
  620.  
  621. input:focus::-o-placeholder {
  622. color:transparent;
  623. }
  624.  
  625. input:focus::-moz-placeholder {
  626. color:transparent;
  627. }
  628.  
  629. input:focus:-ms-input-placeholder {
  630. color:transparent;
  631. }
  632.  
  633. /* PAGINATION */
  634. /* Main Container */
  635. #sb-pagi{
  636. display:flex;
  637. }
  638.  
  639. /* Pagination Elements */
  640. .pagi, .current{
  641. padding:4px 12px;
  642. margin-right:4px;
  643. color:inherit;
  644. }
  645.  
  646. /* Jump Page */
  647. .pagi{
  648. background-color:{color:Links};
  649. }
  650.  
  651. /* Jump Page on Hover */
  652. .pagi:hover{
  653. background-color:{color:Sidebar Accent};
  654. color:{color:Background};
  655. }
  656.  
  657. /* Jump Page Transitions */
  658. .pagi, .pagi:hover{
  659. transition:0.5s;
  660. -moz-transition:0.5s;
  661. -o-transition:0.5s;
  662. -webkit-transition:0.5s;
  663. }
  664.  
  665. /* Current Page */
  666. .current{
  667. background-color:{color:Accent 2};
  668. }
  669.  
  670. /* Pagination Links */
  671. a.p-link{
  672. border:none;
  673. box-shadow:none;
  674. }
  675.  
  676. /* --- END SIDEBAR | START POST STYLING --- */
  677.  
  678. /* POSTS */
  679. /* Container */
  680. #posts{
  681. width:50vw;
  682. margin-top:0;
  683. margin-left:0;
  684. }
  685.  
  686. /* Post */
  687. article{
  688. width:40vw;
  689. padding-top:1em;
  690. margin-top:6em;
  691. margin-bottom:6em;
  692. margin-left:5vw;
  693. border-top:4px solid {color:Borders};
  694. border-bottom:4px solid {color:Borders};
  695. }
  696.  
  697. /* Embedded Media of Posts */
  698. article img, article iframe{
  699. max-width:100%;
  700. }
  701.  
  702. /* Text Posts */
  703. .text{
  704. padding:0 1em;
  705. }
  706.  
  707. /* PHOTOSETS */
  708. /* Photoset Grid */
  709. .photoset-grid{
  710. grid-gap:1em;
  711. }
  712.  
  713. /* Image Transitions */
  714. .photoset-image img,.photoset-image img:hover, .photo img, .photo img:hover, .panorama img, .panorama img:hover{
  715. transition:0.5s;
  716. -moz-transition:0.5s;
  717. -o-transition:0.5s;
  718. -webkit-transition:0.5s;
  719. }
  720.  
  721. /* Images on Hover */
  722. .photoset-image img:hover, .photo img:hover, .panorama img:hover{
  723. cursor:pointer;
  724. {block:IfGrayscaleHover}
  725. filter:grayscale(0.5);
  726. -webkit-filter:grayscale(0.5);
  727. -o-filter:grayscale(0.5);
  728. -moz-filter:grayscale(0.5);
  729. {/block:IfGrayscaleHover}
  730. }
  731.  
  732. /* QUOTE */
  733. /* Actual Quote */
  734. .quoted{
  735. font-size:2em;
  736. font-family:"{select:Title Font}", Georgia;
  737. text-align:{select:Title Align};
  738. color:{color:Bold Text};
  739. }
  740.  
  741. /* Source of Quote */
  742. .quote-source{
  743. margin-top:8px;
  744. }
  745.  
  746. /* AUDIO */
  747. .audio > iframe{
  748. max-width:100%;
  749. width:100%;
  750. }
  751.  
  752. /* Spotify Audio Player */
  753. iframe.spotify_audio_player {
  754. height:80px!important;
  755. }
  756.  
  757. /* Soundcloud Audio Player */
  758. iframe.soundcloud_audio_player{
  759. height:80px!important;
  760. }
  761.  
  762. /* VIDEO */
  763. .video > iframe{
  764. max-width:100%;
  765. width:100%;
  766. }
  767.  
  768. /* CHAT */
  769. /* Containers */
  770. .chat, .chatterbox{
  771. width:100%;
  772. max-width:40vw;
  773. }
  774.  
  775. .chat .clear{
  776. clear:both;
  777. }
  778.  
  779. /* Labels and Lines */
  780. .label_odd, .label_even, .line_odd, .line_even{
  781. width:auto;
  782. max-width:100%;
  783. }
  784.  
  785. /* Labels */
  786. .label_odd, .label_even{
  787. font-size:calc(1em + 2px);
  788. font-weight:bold;
  789. padding:4px 8px;
  790. }
  791.  
  792. /* Lines */
  793. .line_odd, .line_even{
  794. margin-top:12px;
  795. margin-bottom:16px;
  796. padding:4px 8px;
  797. }
  798.  
  799. /* Odd Label */
  800. .label_odd{
  801. color:{color:Bold Text};
  802. }
  803.  
  804. /* Odd Line */
  805. .line_odd{
  806. background-color:{color:Sidebar};
  807. }
  808.  
  809. /* Even Label */
  810. .label_even{
  811. color:{color:Sidebar Accent};
  812. }
  813.  
  814. /* Even Line */
  815. .line_even{
  816. background-color:{color:Links};
  817. }
  818.  
  819. /* LINKS */
  820. /* Link Title */
  821. .link-title{
  822. font-size:1.5em;
  823. font-weight:300;
  824. background-color:{color:Sidebar Accent};
  825. border:2px solid {color:Sidebar Accent};
  826. margin-bottom:4px;
  827. }
  828.  
  829. /* Link Title on Hover */
  830. .link-title:hover{
  831. color:{color:Sidebar Accent};
  832. }
  833.  
  834. /* Link Excerpt */
  835. .link-excerpt{
  836. font-size:1em;
  837. background-color:{color:Accent 2};
  838. border:2px solid {color:Accent 2};
  839. margin-bottom:4px;
  840. }
  841.  
  842. /* Link Excerpt on Hover */
  843. .link-excerpt:hover{
  844. color:{color:Accent 2};
  845. }
  846.  
  847. /* Link Author */
  848. .link-author{
  849. margin-bottom:8px;
  850. font-size:calc(1em - 2px);
  851. font-weight:bold;
  852. background-color:{color:Links};
  853. border:2px solid {color:Links};
  854. }
  855.  
  856. /* Link Author on Hover */
  857. .link-author:hover{
  858. color:{color:Links};
  859. }
  860.  
  861. /* Link Title, Excerpt and Author */
  862. .link-title, .link-excerpt, .link-author{
  863. color:{color:Background};
  864. padding:4px 8px;
  865. text-align:center;
  866. }
  867.  
  868. /* Link Title, Excerpt and Author on Hover */
  869. .link-title:hover, .link-excerpt:hover, .link-author:hover{
  870. background-color:{color:Background};
  871. }
  872.  
  873. /* Transitions */
  874. .link-title, .link-title:hover, .link-excerpt, .link-excerpt:hover, .link-author, .link-author:hover{
  875. transition:0.5s;
  876. -moz-transition:0.5s;
  877. -o-transition:0.5s;
  878. -webkit-transition:0.5s;
  879. }
  880.  
  881. /* QUESTIONS & ANSWERS */
  882. /* QUESTION */
  883. .question{
  884. background-color:{color:Links};
  885. }
  886.  
  887. /* ANSWER */
  888. .antwort{
  889. background-color:{color:Sidebar};
  890. }
  891.  
  892. /* Question + Answer */
  893. .question, .antwort{
  894. padding:8px 16px;
  895. margin-bottom:16px;
  896. }
  897.  
  898. /* Answer Link */
  899. .antwort a{
  900. border-bottom:2px solid {color:Sidebar Accent};
  901. box-shadow:inset 0 -2px {color:Sidebar Accent};
  902. }
  903.  
  904. /* Answer Link on Hover */
  905. .antwort a:hover{
  906. box-shadow:inset 0 -8px {color:Sidebar Accent};
  907. }
  908.  
  909. /* Usernames */
  910. /* Container */
  911. .question-username, .answer-username{
  912. display:flex;
  913. align-items:center;
  914. justify-content:flex-start;
  915. margin-bottom:8px;
  916. }
  917.  
  918. /* Icons */
  919. .question-username span{
  920. color:{color:Sidebar Accent};
  921. margin-right:8px;
  922. }
  923.  
  924. .answer-username span{
  925. color:{color:Bold Text};
  926. margin-right:8px;
  927. }
  928.  
  929. /* User Links */
  930. a.answerer, a.asker{
  931. border-bottom:none;
  932. text-decoration:none;
  933. box-shadow:none;
  934. padding:2px 8px;
  935. color:{color:Background};
  936. }
  937.  
  938. /* User Links on Hover */
  939. a.answerer:hover, a.asker:hover{
  940. box-shadow:none;
  941. background-color:{color:Background};
  942. }
  943.  
  944. /* Ask Username */
  945. a.asker{
  946. background-color:{color:Sidebar Accent};
  947. border:2px solid {color:Sidebar Accent};
  948. }
  949.  
  950. /* Ask Username on Hover */
  951. a.asker:hover{
  952. color:{color:Sidebar Accent};
  953. }
  954.  
  955. /* Answer Username */
  956. a.answerer{
  957. background-color:{color:Bold Text};
  958. border:2px solid {color:Borders};
  959. }
  960.  
  961. /* Answer Username on Hover */
  962. a.answerer:hover{
  963. color:{color:Bold Text};
  964. }
  965.  
  966. /* Transitions */
  967. a.asker, a.asker:hover, .antwort a, .antwort a:hover, a.answerer, a.answerer:hover{
  968. transition:0.5s;
  969. -moz-transition:0.5s;
  970. -o-transition:0.5s;
  971. -webkit-transition:0.5s;
  972. }
  973.  
  974. /* --- END POST STYLING | START POST SPECIFICS --- */
  975.  
  976. /* USERNAME */
  977. /* Container */
  978. .username, .t-username{
  979. display:flex;
  980. align-items:center;
  981. justify-content:flex-start;
  982. }
  983.  
  984. .username{
  985. margin-top:16px;
  986. }
  987.  
  988. .t-username{
  989. margin-bottom:8px;
  990. margin-top:16px;
  991. font-size:calc(1em - 2px);
  992. }
  993.  
  994. .t-username span{
  995. font-size:calc(1em - 4px);
  996. }
  997.  
  998. /* Username */
  999. a.user{
  1000. background-color:{color:Sidebar Accent};
  1001. color:{color:Background};
  1002. text-decoration:none;
  1003. box-shadow:none;
  1004. border:none;
  1005. padding:4px 8px;
  1006. }
  1007.  
  1008. /* Username on Hover */
  1009. a.user:hover{
  1010. color:{color:Sidebar Accent};
  1011. background-color:{color:Sidebar};
  1012. }
  1013.  
  1014. /* User Icon */
  1015. a.user span{
  1016. margin-right:4px;
  1017. }
  1018.  
  1019. /* Transitions */
  1020. a.user, a.user:hover{
  1021. transition:0.5s;
  1022. -moz-transition:0.5s;
  1023. -o-transition:0.5s;
  1024. -webkit-transition:0.5s;
  1025. }
  1026.  
  1027. /* Deactivated User */
  1028. .deactivated{
  1029. background-color:{color:Sidebar};
  1030. color:{color:Text};
  1031. border:none;
  1032. text-decoration:none;
  1033. box-shadow:none;
  1034. padding:4px 8px;
  1035. }
  1036.  
  1037. .deactivated:hover{
  1038. cursor:pointer;
  1039. }
  1040.  
  1041. .deactivated:after {
  1042. content:'{text:Deactivated User Text}';
  1043. position:absolute;
  1044. padding-left:16px;
  1045. color:{color:Bold Text};
  1046. font-weight:300;
  1047. opacity:0;
  1048. }
  1049.  
  1050. /* Deactivated User on Hover */
  1051. .deactivated:hover:after {
  1052. opacity:1;
  1053. }
  1054.  
  1055. /* Transitions */
  1056. .deactivated:after, .deactivated:hover:after{
  1057. transition:0.5s ease-in-out;
  1058. -moz-transition:0.5s ease-in-out;
  1059. -o-transition:0.5s ease-in-out;
  1060. -webkit-transition:0.5s ease-in-out;
  1061. }
  1062.  
  1063. .user span, .deactivated span{
  1064. font-size:calc(1em - 2px);
  1065. }
  1066.  
  1067. /* POST INFORMATION */
  1068. /* Information Container */
  1069. .post-information{
  1070. display:flex;
  1071. flex-wrap:wrap;
  1072. margin-top:8px;
  1073. margin-left:0;
  1074. width:100%;
  1075. }
  1076.  
  1077. /* Specification Links */
  1078. a.specs{
  1079. border:none;
  1080. box-shadow:none;
  1081. color:{color:Text};
  1082. background-color:{color:Sidebar};
  1083. padding:4px 8px;
  1084. margin-right:4px;
  1085. margin-bottom:4px;
  1086. font-size:calc(1em - 2px);
  1087. }
  1088.  
  1089. /* Specification Links on Hover */
  1090. a.specs:hover{
  1091. background-color:{color:Links};
  1092. }
  1093.  
  1094. /* Specification Links | Icons */
  1095. a.specs span{
  1096. font-size:calc(1em - 4px);
  1097. margin-right:4px;
  1098. color:{color:Bold Text};
  1099. }
  1100.  
  1101. /* Transitions */
  1102. a.specs, a.specs:hover{
  1103. transition:0.5s;
  1104. -moz-transition:0.5s;
  1105. -o-transition:0.5s;
  1106. -webkit-transition:0.5s;
  1107. }
  1108.  
  1109. /* LIKE BUTTON */
  1110. /* Like Button */
  1111. .like_button {
  1112. display:inline-block;
  1113. position:relative;
  1114. margin-top:-4px;
  1115. font-size:1em;
  1116. }
  1117.  
  1118. /* Like Button iFrame */
  1119. .like_button iframe {
  1120. height:100%;
  1121. left:0;
  1122. opacity:0;
  1123. position:absolute;
  1124. top:0;
  1125. width:100%;
  1126. z-index:1!important;
  1127. border-bottom:none;
  1128. }
  1129.  
  1130. /* Like Button Before Element */
  1131. .like_button:before{
  1132. content:"\f004";
  1133. font-family:"Font Awesome\ 5 Free";
  1134. font-weight:700;
  1135. position:relative;
  1136. font-size:calc(1em - 4px);
  1137. z-index:0!important;
  1138. margin-right:4px;
  1139. color:{color:Bold Text};
  1140. }
  1141.  
  1142. /* Like Button After Element */
  1143. .like_button:after {
  1144. content:'like';
  1145. z-index:0!important;
  1146. }
  1147.  
  1148. /* PERMALINK PAGE */
  1149. /* User Avatar */
  1150. img.avatar{
  1151. display:none;
  1152. }
  1153.  
  1154. /* Notes List */
  1155. ol.notes{
  1156. border-top:4px solid {color:Borders};
  1157. padding-top:8px;
  1158. margin-top:8px;
  1159. margin-left:-1em;
  1160. padding-left:1em;
  1161. padding-right:1em;
  1162. width:100%;
  1163. list-style-type:none;
  1164. text-align:left;
  1165. }
  1166.  
  1167. /* Notes List on Hover */
  1168. ol.notes:hover{
  1169. border-bottom:none;
  1170. }
  1171.  
  1172. /* Notes List Item */
  1173. li.note{
  1174. line-height:1.75em;
  1175. margin-left:0;
  1176. font-size:calc(1em - 2px);
  1177. }
  1178.  
  1179. /* Original Post */
  1180. li.reblog.original_post:before{
  1181. content:"\f276";
  1182. }
  1183.  
  1184. /* Liked by … */
  1185. li.like:before{
  1186. content:"\f004";
  1187. }
  1188.  
  1189. /* Reblogged by … */
  1190. li.reblog:before{
  1191. content:"\f021";
  1192. }
  1193.  
  1194. /* User Replied to … */
  1195. li.reply:before{
  1196. content:"\f086";
  1197. }
  1198.  
  1199. li.reblog.original_post:before, li.like:before, li.reblog:before, li.reply:before{
  1200. font-family:"Font Awesome\ 5 Free";
  1201. font-weight:700;
  1202. position:relative;
  1203. z-index:10!important;
  1204. margin-right:0.25em;
  1205. font-size:calc(1em - 4px);
  1206. padding:0.25em;
  1207. color:{color:Text};
  1208. }
  1209.  
  1210. /* User Reply */
  1211. .answer_content, ol.notes blockquote{
  1212. padding:0 0.25em;
  1213. }
  1214.  
  1215. ol.notes blockquote a{
  1216. border-bottom:none;
  1217. box-shadow:none;
  1218. }
  1219.  
  1220. /* Notes Link */
  1221. .notes a{
  1222. text-decoration:none;
  1223. color:inherit;
  1224. margin-bottom:0.25em;
  1225. }
  1226.  
  1227. .notes a, .notes a:hover{
  1228. transition:0.5s;
  1229. -moz-transition:0.5s;
  1230. -o-transition:0.5s;
  1231. -webkit-transition:0.5s;
  1232. }
  1233.  
  1234. /* More Notes Container */
  1235. li.more_notes_link_container{
  1236. margin-top:20px;
  1237. }
  1238.  
  1239. /* More Notes Link */
  1240. a.more_notes_link{
  1241. background-color:inherit;
  1242. border-bottom:none;
  1243. box-shadow:none;
  1244. border:2px solid {color:Borders};
  1245. color:{color:Bold Text};
  1246. padding:4px 8px;
  1247. text-transform:lowercase;
  1248. }
  1249.  
  1250. /* More Notes Link on Hover */
  1251. a.more_notes_link:hover{
  1252. border-bottom:none;
  1253. border:2px solid {color:Sidebar Accent};
  1254. color:{color:Text};
  1255. background-color:{color:Sidebar};
  1256. }
  1257.  
  1258. /* Transitions */
  1259. a.more_notes_link, a.more_notes_link:hover{
  1260. transition:0.5s;
  1261. -moz-transition:0.5s;
  1262. -o-transition:0.5s;
  1263. -webkit-transition:0.5s;
  1264. }
  1265.  
  1266. /* --- END POST SPECIFICS | START EXTRAS --- */
  1267.  
  1268. /* CUSTOM CONTROLS */
  1269. /* Container */
  1270. #custom-controls{
  1271. position:fixed;
  1272. top:1em;
  1273. right:calc(1em + 10px);
  1274. width:calc(2 * 36px + 4px);
  1275. height:calc(2 * 36px + 8px);
  1276. display:flex;
  1277. flex-wrap:wrap;
  1278. justify-content:space-between;
  1279. align-items:space-between;
  1280. }
  1281.  
  1282. /* Control Link */
  1283. a.conlink{
  1284. border-bottom:none;
  1285. box-shadow:none;
  1286. }
  1287.  
  1288. /* Control Element */
  1289. .cont{
  1290. background-color:{color:Background};
  1291. color:{color:Sidebar Accent};
  1292. width:36px;
  1293. height:36px;
  1294. display:flex;
  1295. align-items:center;
  1296. justify-content:center;
  1297. }
  1298.  
  1299. /* Control Element on Hover */
  1300. .cont:hover{
  1301. transform:scale(0.95);
  1302. }
  1303.  
  1304. /* Transitions */
  1305. .cont, .cont:hover{
  1306. transition:0.5s;
  1307. -moz-transition:0.5s;
  1308. -o-transition:0.5s;
  1309. -webkit-transition:0.5s;
  1310. }
  1311.  
  1312. /* Hides standard tumblr controls */
  1313. body > iframe:first-child {
  1314. display: none !important;
  1315. }
  1316.  
  1317. /* Credit – Don't touch! */
  1318. #cd{
  1319. position:fixed;
  1320. bottom:1em;
  1321. right:1em;
  1322. }
  1323.  
  1324. /* PAGE NOT FOUND */
  1325. /* – Tutorial by fukuo – */
  1326. /* Container */
  1327. .wrapper_notfound {
  1328. position:fixed;
  1329. visibility:hidden;
  1330. left:0px;
  1331. top:0px;
  1332. width:100%;
  1333. height:100%;
  1334. background-color:{color:Background};
  1335. z-index:999999999999;
  1336. }
  1337.  
  1338. /* Text */
  1339. .actual_notfound {
  1340. font-size:calc(22px + 0.25vw);
  1341. line-height:150%;
  1342. text-align:center;
  1343. font-family:"{select:Font}", Verdana;
  1344. color:{color:Text};
  1345. }
  1346.  
  1347. .wrapper_notfound, .actual_notfound{
  1348. display:flex;
  1349. align-items:center;
  1350. justify-content:center;
  1351. flex-direction:column;
  1352. }
  1353.  
  1354. /* Title */
  1355. .actual_notfound h1{
  1356. font-family:"{select:Title Font}", Georgia;
  1357. {block:IfNotSpecialFonts}
  1358. font-family:"{select:Font}", Verdana!important;
  1359. {/block:IfNotSpecialFonts}
  1360. font-size:4em;
  1361. font-weight:400;
  1362. text-align:center;
  1363. line-height:125%;
  1364. color:{color:Text};
  1365. }
  1366.  
  1367. /* Paragraph */
  1368. .actual_notfound p{
  1369. margin-top:-2em;
  1370. }
  1371.  
  1372. /* Link */
  1373. .actual_notfound a {
  1374. color:{color:Text};
  1375. text-decoration:none;
  1376. border-bottom:4px solid {color:Accent 1};
  1377. box-shadow:inset 0 -4px {color:Accent 1};
  1378. }
  1379.  
  1380. /* Link on Hover */
  1381. .actual_notfound a:hover{
  1382. box-shadow:inset 0 -14px {color:Accent 1};
  1383. }
  1384.  
  1385. /* Transitions */
  1386. .actual_notfound a, .actual_notfound a:hover{
  1387. transition:0.5s;
  1388. -moz-transition:0.5s;
  1389. -o-transition:0.5s;
  1390. -webkit-transition:0.5s;
  1391. }
  1392.  
  1393. /* CUSTOM LIGHTBOX */
  1394. /* Custom Lightbox */
  1395. .vignette, #vignette {
  1396. opacity:0;
  1397. }
  1398.  
  1399. /* Lightbox Image */
  1400. .lightbox-image, #tumblr_lightbox img {
  1401. box-shadow:none!important;
  1402. border-radius:0!important;
  1403. max-width:none;
  1404. }
  1405.  
  1406. /* Lightbox Background */
  1407. .tmblr-lightbox, #tumblr_lightbox {
  1408. background-color:{color:Background}!important;
  1409. }
  1410.  
  1411. /* Lightbox Link */
  1412. a.tumblr-box{
  1413. border-bottom:none;
  1414. }
  1415.  
  1416. /* --- END EXTRAS | START RESPONSIVE LAYOUT --- */
  1417.  
  1418. /* LARGE SCREENS */
  1419. @media only screen and (min-width:800px){
  1420. /* Mobile Footer + Mobile Header */
  1421. #mb-footer, #mb-header{
  1422. display:none;
  1423. }
  1424. }
  1425.  
  1426. /* SMALL SCREENS */
  1427. @media only screen and (max-width:800px){
  1428. /* MOBILE HEADER */
  1429. #mb-header{
  1430. height:10vh;
  1431. width:calc(100vw - 10px);
  1432. position:fixed;
  1433. z-index:300!important;
  1434. top:0;
  1435. left:0;
  1436. background-color:{color:Sidebar};
  1437. display:flex;
  1438. align-items:center;
  1439. justify-content:space-between;
  1440. }
  1441.  
  1442. /* Mobile Header Blog Icon */
  1443. #mbh-icon img{
  1444. margin-left:16px;
  1445. height:7vh;
  1446. border-radius:50%;
  1447. }
  1448.  
  1449. /* Mobile Header Title */
  1450. #mbh-title{
  1451. margin-right:16px;
  1452. font-size:1.5em;
  1453. }
  1454.  
  1455. /* SIDEBAR */
  1456. #sidebar{
  1457. display:none;
  1458. }
  1459.  
  1460. /* POSTS */
  1461. /* Container */
  1462. #posts{
  1463. width:100vw;
  1464. margin-bottom:calc(10vh + 2em);
  1465. margin-top:calc(10vh + 2em);
  1466. }
  1467.  
  1468. /* Post */
  1469. article{
  1470. width:80vw;
  1471. margin-left:10vw;
  1472. }
  1473.  
  1474. /* Chats */
  1475. .chat, .chatterbox{
  1476. width:100%;
  1477. max-width:80vw;
  1478. }
  1479.  
  1480. /* Credit, Custom Controls */
  1481. #credit, #cd, #custom-controls{
  1482. display:none;
  1483. }
  1484.  
  1485. /* MOBILE FOOTER */
  1486. #mb-footer{
  1487. position:fixed;
  1488. width:100vw;
  1489. height:10vh;
  1490. margin-left:0;
  1491. margin-bottom:0;
  1492. left:0;
  1493. bottom:0;
  1494. border-radius:0;
  1495. border:none;
  1496. background-color:{color:Sidebar};
  1497. display:flex;
  1498. align-items:center;
  1499. justify-content:space-between;
  1500. }
  1501.  
  1502. /* Mobile Footer Navigation */
  1503. .mbf-nav{
  1504. height:10vh;
  1505. width:20vw;
  1506. background-color:inherit;
  1507. color:{color:Accent 3};
  1508. display:flex;
  1509. align-items:center;
  1510. justify-content:center;
  1511. }
  1512.  
  1513. .mbfn2{
  1514. background-color:{color:Links};
  1515. color:{color:Accent 3};
  1516. }
  1517.  
  1518. /* Mobile Footer Navigation Icon */
  1519. .mbf-nav span{
  1520. font-size:1em;
  1521. }
  1522.  
  1523. /* Mobile Footer Navigation on Hover */
  1524. .mbf-nav:hover, .mbf-nav:focus{
  1525. background-color:{color:Bold Text};
  1526. color:{color:Background};
  1527. cursor:pointer;
  1528. }
  1529.  
  1530. .mbfn2:hover, .mbfn2:focus{
  1531. background-color:{color:Sidebar Accent};
  1532. color:{color:Background};
  1533. }
  1534.  
  1535. /* Transitions */
  1536. .mbf-nav, .mbf-nav:hover{
  1537. transition:0.5s;
  1538. -moz-transition:0.5s;
  1539. -o-transition:0.5s;
  1540. -webkit-transition:0.5s;
  1541. }
  1542.  
  1543. /* Mobile Footer Navigation Link */
  1544. a.mbf-link{
  1545. border-bottom:none;
  1546. box-shadow:none;
  1547. }
  1548.  
  1549. /* Drop Down Button */
  1550. .dropbtn {
  1551. font-size:1em;
  1552. cursor:pointer;
  1553. border:none;
  1554. }
  1555.  
  1556. .dropbtn:focus{
  1557. outline:none;
  1558. border:none;
  1559. }
  1560.  
  1561. /* Drop Down Menu */
  1562. .dropdown {
  1563. position:relative;
  1564. display:inline-block;
  1565. }
  1566.  
  1567. .dropdown-content {
  1568. display:none;
  1569. position:absolute;
  1570. background-color:{color:Background};
  1571. min-width:160px;
  1572. overflow:auto;
  1573. z-index:1;
  1574. bottom:100%;
  1575. right:100%;
  1576. font-family:"{select:Font}", Verdana;
  1577. font-weight:normal;
  1578. }
  1579.  
  1580. /* Drop Down Menu Link */
  1581. .dropdown-content a{
  1582. color:{color:Accent 3};
  1583. padding:12px 16px;
  1584. text-decoration:none;
  1585. display:block;
  1586. border:none;
  1587. box-shadow:none;
  1588. }
  1589.  
  1590. /* Drop Down Menu Link on Hover */
  1591. .dropdown-content a:hover{
  1592. background-color:{color:Links};
  1593. }
  1594.  
  1595. /* Transitions */
  1596. .dropdown-content a, .dropdown-content a:hover{
  1597. transition:0.5s;
  1598. -moz-transition:0.5s;
  1599. -o-transition:0.5s;
  1600. -webkit-transition:0.5s;
  1601. }
  1602.  
  1603. .show{
  1604. display:block;
  1605. }
  1606. }
  1607.  
  1608. </style>
  1609. </head>
  1610.  
  1611. <body>
  1612.  
  1613. <!-- MOBILE HEADER -->
  1614. <div id="mb-header">
  1615. <!-- Blog Icon -->
  1616. <div id="mbh-icon">
  1617. <img src="{PortraitURL-128}" alt="{Name}'s icon"/>
  1618. </div>
  1619.  
  1620. <!-- Blog Title -->
  1621. <div id="mbh-title">{Title}</div>
  1622. </div> <!-- // end mobile header -->
  1623.  
  1624. <!-- SIDEBAR -->
  1625. <div id="sidebar">
  1626. <div id="sb-blog-info">
  1627. <!-- Sidebar Icon -->
  1628. <div id="sb-icon">
  1629. <img src="{PortraitURL-128}" alt="{Name}'s icon"/>
  1630. </div>
  1631. <!-- Sidebar Info -->
  1632. <div id="sb-info">
  1633. <!-- Sidebar Title -->
  1634. <div id="sb-title">{Title}</div>
  1635. <!-- Sidebar Description -->
  1636. <div id="sb-desc">{Description}</div>
  1637. </div>
  1638. </div>
  1639.  
  1640. <!-- Sidebar Navigation -->
  1641. <div id="sb-nav">
  1642. <!-- Home Link -->
  1643. <a href="/" title="refresh blog" class="sbn-link">
  1644. <div class="sb-nav">
  1645. <span class="fas fa-home"></span>
  1646. Index
  1647. </div>
  1648. </a>
  1649.  
  1650. <!-- Ask Box -->
  1651. {block:AskEnabled}
  1652. <a href="/ask" title="{AskLabel}" class="sbn-link">
  1653. <div class="sb-nav">
  1654. <span class="fas fa-envelope"></span>
  1655. {AskLabel}
  1656. </div>
  1657. </a>
  1658. {/block:AskEnabled}
  1659.  
  1660. <!-- Submissions -->
  1661. {block:SubmissionsEnabled}
  1662. <a href="/ask" title="{SubmitLabel}" class="sbn-link">
  1663. <div class="sb-nav">
  1664. <span class="fas fa-paper-plane"></span>
  1665. {SubmitLabel}
  1666. </div>
  1667. </a>
  1668. {/block:SubmissionsEnabled}
  1669.  
  1670. <!-- Archive -->
  1671. <a href="/archive" title="browse archive" class="sbn-link">
  1672. <div class="sb-nav">
  1673. <span class="fas fa-archive"></span>
  1674. Archive
  1675. </div>
  1676. </a>
  1677.  
  1678. <!-- 1st Custom Link -->
  1679. {block:IfCustomLink1}
  1680. <a href="{text:Custom URL 1}" title="{text:Custom Link 1}" class="sbn-link">
  1681. <div class="sb-nav">
  1682. <span class="{text:Custom Icon 1}"></span>
  1683. {text:Custom Link 1}
  1684. </div>
  1685. </a>
  1686. {/block:IfCustomLink1}
  1687.  
  1688. <!-- 2nd Custom Link -->
  1689. {block:IfCustomLink2}
  1690. <a href="{text:Custom URL 2}" title="{text:Custom Link 2}" class="sbn-link">
  1691. <div class="sb-nav">
  1692. <span class="{text:Custom Icon 2}"></span>
  1693. {text:Custom Link 2}
  1694. </div>
  1695. </a>
  1696. {/block:IfCustomLink2}
  1697.  
  1698. <!-- 3rd Custom Link -->
  1699. {block:IfCustomLink3}
  1700. <a href="{text:Custom URL 3}" title="{text:Custom Link 3}" class="sbn-link">
  1701. <div class="sb-nav">
  1702. <span class="{text:Custom Icon 3}"></span>
  1703. {text:Custom Link 3}
  1704. </div>
  1705. </a>
  1706. {/block:IfCustomLink3}
  1707.  
  1708. <!-- 4th Custom Link -->
  1709. {block:IfCustomLink4}
  1710. <a href="{text:Custom URL 4}" title="{text:Custom Link 4}" class="sbn-link">
  1711. <div class="sb-nav">
  1712. <span class="{text:Custom Icon 4}"></span>
  1713. {text:Custom Link 4}
  1714. </div>
  1715. </a>
  1716. {/block:IfCustomLink4}
  1717.  
  1718. <!-- 5th Custom Link -->
  1719. {block:IfCustomLink5}
  1720. <a href="{text:Custom URL 5}" title="{text:Custom Link 5}" class="sbn-link">
  1721. <div class="sb-nav">
  1722. <span class="{text:Custom Icon 5}"></span>
  1723. {text:Custom Link 5}
  1724. </div>
  1725. </a>
  1726. {/block:IfCustomLink5}
  1727. </div> <!-- // end sidebar navigation -->
  1728.  
  1729. <!-- SEARCHBAR -->
  1730. <div id="sb-searchbar">
  1731. <form action="/search" method="get" class="sb-search">
  1732. <input type="text" name="q" value="{SearchQuery}" class="query" placeholder="Search Blog">
  1733. </form>
  1734. </div> <!-- // end searchbar -->
  1735.  
  1736. <!-- PAGINATION -->
  1737. {block:Pagination}
  1738. <div id="sb-pagi">
  1739. <!-- Previous Page -->
  1740. {block:PreviousPage}
  1741. <a href="{PreviousPage}" class="p-link" title="go to the previous page">
  1742. <div class="pagi">
  1743. <span class="fas fa-chevron-left"></span>
  1744. </div>
  1745. </a>
  1746. {/block:PreviousPage}
  1747.  
  1748. <!-- Jump Pages -->
  1749. {block:JumpPagination length="5"}
  1750. <!-- Current Page -->
  1751. {block:CurrentPage}
  1752. <div class="current" title="currently on page {PageNumber}">{PageNumber}</div>
  1753. {block:CurrentPage}
  1754.  
  1755. <!-- Jump Page -->
  1756. {block:JumpPage}
  1757. <a href="{URL}" class="p-link" title="jump to page {PageNumber}">
  1758. <div class="pagi">{PageNumber}</div>
  1759. </a>
  1760. {/block:JumpPage}
  1761. {/block:JumpPagination}
  1762.  
  1763. <!-- Next Page -->
  1764. {block:NextPage}
  1765. <a href="{NextPage}" class="p-link" title="go to the next page">
  1766. <div class="pagi">
  1767. <span class="fas fa-chevron-right"></span>
  1768. </div>
  1769. </a>
  1770. {/block:NextPage}
  1771. </div> <!-- // end pagination -->
  1772. {/block:Pagination}
  1773. </div> <!-- // end sidebar -->
  1774.  
  1775. <!-- POSTS -->
  1776. <div id="posts">
  1777. {block:Posts}
  1778. <article>
  1779.  
  1780. <!-- TEXT POSTS -->
  1781. {block:Text}
  1782. <!-- Post Title -->
  1783. {block:Title}
  1784. <div class="title">{Title}</div>
  1785. {/block:Title}
  1786. <!-- Post Body -->
  1787. {block:Body}
  1788. <!-- Original Post -->
  1789. {block:NotReblog}
  1790. <div class="text">{Body}</div>
  1791. {/block:NotReblog}
  1792. <!-- Reblogged Post -->
  1793. {block:RebloggedFrom}
  1794. {block:Reblogs}
  1795. <div class="t-username">
  1796. {block:HasPermalink}
  1797. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  1798. <a target="_blank" class="user" href="{Permalink}" title="written by {Username}">
  1799. <span class="fas fa-user"></span>
  1800. {Username}
  1801. </a>
  1802. </div>
  1803. {/block:HasPermalink}
  1804. {block:HasNoPermalink}
  1805. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  1806. <span class="fas fa-user"></span>
  1807. {Username}
  1808. </span>
  1809. {/block:HasNoPermalink}
  1810. </div>
  1811. <div class="text">{Body}</div>
  1812. {/block:Reblogs}
  1813. {/block:RebloggedFrom}
  1814. {/block:Body}
  1815. {/block:Text}
  1816.  
  1817. <!-- /*/*/*/ -->
  1818.  
  1819. <!-- QUESTION POSTS -->
  1820. {block:Answer}
  1821. <div class="question">
  1822. <div class="question-username">
  1823. <span class="fas fa-envelope"></span>
  1824. {Asker}
  1825. </div>
  1826. {Question}
  1827. </div>
  1828.  
  1829. {block:Answerer}
  1830. <div class="antwort">
  1831. <div class="answer-username">
  1832. <span class="fas fa-envelope-open-text"></span>
  1833. {Answerer}
  1834. </div>
  1835. {Answer}
  1836. </div>
  1837. {/block:Answerer}
  1838. {block:NotReblog}
  1839. <div>{Replies}</div>
  1840. {/block:NotReblog}
  1841. {block:RebloggedFrom}
  1842. {block:Reblogs}
  1843. <div class="username">
  1844. {block:HasPermalink}
  1845. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  1846. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  1847. {block:IsActive}
  1848. <span class="fas fa-user"></span>
  1849. {/block:IsActive}
  1850. {block:IsDeactivated}
  1851. <span class="fas fa-user-times"></span>
  1852. {/block:IsDeactivated}
  1853. {Username}
  1854. </a>
  1855. </div>
  1856. {/block:HasPermalink}
  1857. {block:HasNoPermalink}
  1858. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  1859. {block:IsActive}
  1860. <span class="fas fa-user"></span>
  1861. {/block:IsActive}
  1862. {block:IsDeactivated}
  1863. <span class="fas fa-user-times"></span>
  1864. {/block:IsDeactivated}
  1865. {Username}
  1866. </span>
  1867. {/block:HasNoPermalink}
  1868. </div>
  1869. <div class="text">{Body}</div>
  1870. {/block:Reblogs}
  1871. {/block:RebloggedFrom}
  1872. {/block:Answer}
  1873.  
  1874. <!-- /*/*/*/ -->
  1875.  
  1876. <!-- QUOTE POSTS -->
  1877. {block:Quote}
  1878. <div class="quoted">
  1879. {Quote}
  1880. </div>
  1881. {block:Source}
  1882. <div class="quote-source">
  1883. – {Source}
  1884. </div>
  1885. {/block:Source}
  1886. {/block:Quote}
  1887.  
  1888. <!-- /*/*/*/ -->
  1889.  
  1890. <!-- LINK POSTS -->
  1891. {block:Link}
  1892. {block:Thumbnail}
  1893. <img src="{Thumbnail-HighRes}" class="link-image">
  1894. {/block:Thumbnail}
  1895. <div class="link-posts">
  1896. <a href="{URL}">
  1897. <div class="link-cont">
  1898. <div class="link-title">
  1899. {Name}
  1900. </div>
  1901. {block:Excerpt}
  1902. <div class="link-excerpt">{Excerpt}</div>
  1903. {/block:Excerpt}
  1904. {block:Author}
  1905. <div class="link-author">{Author}</div>
  1906. {/block:Author}
  1907. </div>
  1908. </a>
  1909. </div>
  1910. {block:Description}
  1911. {block:IfShowCaptions}
  1912. {block:NotReblog}
  1913. {Description}
  1914. {/block:NotReblog}
  1915. {block:RebloggedFrom}
  1916. {block:Reblogs}
  1917. <div class="username">
  1918. {block:HasPermalink}
  1919. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  1920. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  1921. {block:IsActive}
  1922. <span class="fas fa-user"></span>
  1923. {/block:IsActive}
  1924. {block:IsDeactivated}
  1925. <span class="fas fa-user-times"></span>
  1926. {/block:IsDeactivated}
  1927. {Username}
  1928. </a>
  1929. </div>
  1930. {/block:HasPermalink}
  1931. {block:HasNoPermalink}
  1932. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  1933. {block:IsActive}
  1934. <span class="fas fa-user"></span>
  1935. {/block:IsActive}
  1936. {block:IsDeactivated}
  1937. <span class="fas fa-user-times"></span>
  1938. {/block:IsDeactivated}
  1939. {Username}
  1940. </span>
  1941. {/block:HasNoPermalink}
  1942. </div>
  1943. <div class="text">{Body}</div>
  1944. {/block:Reblogs}
  1945. {/block:RebloggedFrom}
  1946. {/block:IfShowCaptions}
  1947. {block:IfNotShowCaptions}
  1948. {block:PermalinkPage}
  1949. {block:NotReblog}
  1950. {Description}
  1951. {/block:NotReblog}
  1952. {block:RebloggedFrom}
  1953. {block:Reblogs}
  1954. <div class="username">
  1955. {block:HasPermalink}
  1956. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  1957. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  1958. {block:IsActive}
  1959. <span class="fas fa-user"></span>
  1960. {/block:IsActive}
  1961. {block:IsDeactivated}
  1962. <span class="fas fa-user-times"></span>
  1963. {/block:IsDeactivated}
  1964. {Username}
  1965. </a>
  1966. </div>
  1967. {/block:HasPermalink}
  1968. {block:HasNoPermalink}
  1969. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  1970. {block:IsActive}
  1971. <span class="fas fa-user"></span>
  1972. {/block:IsActive}
  1973. {block:IsDeactivated}
  1974. <span class="fas fa-user-times"></span>
  1975. {/block:IsDeactivated}
  1976. {Username}
  1977. </span>
  1978. {/block:HasNoPermalink}
  1979. </div>
  1980. <div class="text">{Body}</div>
  1981. {/block:Reblogs}
  1982. {/block:RebloggedFrom}
  1983. {/block:PermalinkPage}
  1984. {/block:IfNotShowCaptions}
  1985. {/block:Description}
  1986. {/block:Link}
  1987.  
  1988. <!-- /*/*/*/ -->
  1989.  
  1990. <!-- CHAT POSTS -->
  1991. <div class="chatterbox">
  1992. {block:Chat}
  1993. <div class="chat clear">
  1994. {block:Title}
  1995. <div class="title">{Title}</div>
  1996. {/block:Title}
  1997. {block:Lines}
  1998. {block:Label}
  1999. <span class="label_{alt}">
  2000. {Label}
  2001. </span>
  2002. {/block:Label}
  2003. <div class="line_{alt}">
  2004. {Line}<br>
  2005. </div>
  2006. {/block:Lines}
  2007. </div>
  2008. {/block:Chat}
  2009. </div>
  2010.  
  2011. <!-- /*/*/*/ -->
  2012.  
  2013. <!-- PHOTO POSTS -->
  2014. {block:Photo}
  2015. {LinkOpenTag}
  2016. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false" title="click to open lightbox">
  2017. <div class="photo">
  2018. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
  2019. </div>
  2020. </a>
  2021. {LinkCloseTag}
  2022. {block:Caption}
  2023. {block:IfShowCaptions}
  2024. {block:NotReblog}{Caption}{/block:NotReblog}
  2025. {block:RebloggedFrom}
  2026. {block:Reblogs}
  2027. <div class="username">
  2028. {block:HasPermalink}
  2029. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2030. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  2031. {block:IsActive}
  2032. <span class="fas fa-user"></span>
  2033. {/block:IsActive}
  2034. {block:IsDeactivated}
  2035. <span class="fas fa-user-times"></span>
  2036. {/block:IsDeactivated}
  2037. {Username}
  2038. </a>
  2039. </div>
  2040. {/block:HasPermalink}
  2041. {block:HasNoPermalink}
  2042. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2043. {block:IsActive}
  2044. <span class="fas fa-user"></span>
  2045. {/block:IsActive}
  2046. {block:IsDeactivated}
  2047. <span class="fas fa-user-times"></span>
  2048. {/block:IsDeactivated}
  2049. {Username}
  2050. </span>
  2051. {/block:HasNoPermalink}
  2052. </div>
  2053. <div class="text">{Body}</div>
  2054. {/block:Reblogs}
  2055. {/block:RebloggedFrom}
  2056. {/block:IfShowCaptions}
  2057. <!-- Captions Hidden on Index -->
  2058. {block:IfNotShowCaptions}
  2059. {block:PermalinkPage}
  2060. {block:NotReblog}{Caption}{/block:NotReblog}
  2061. {block:RebloggedFrom}
  2062. {block:Reblogs}
  2063. <div class="username">
  2064. {block:HasPermalink}
  2065. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2066. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  2067. {block:IsActive}
  2068. <span class="fas fa-user"></span>
  2069. {/block:IsActive}
  2070. {block:IsDeactivated}
  2071. <span class="fas fa-user-times"></span>
  2072. {/block:IsDeactivated}
  2073. {Username}
  2074. </a>
  2075. </div>
  2076. {/block:HasPermalink}
  2077. {block:HasNoPermalink}
  2078. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2079. {block:IsActive}
  2080. <span class="fas fa-user"></span>
  2081. {/block:IsActive}
  2082. {block:IsDeactivated}
  2083. <span class="fas fa-user-times"></span>
  2084. {/block:IsDeactivated}
  2085. {Username}
  2086. </span>
  2087. {/block:HasNoPermalink}
  2088. </div>
  2089. <div class="text">{Body}</div>
  2090. {/block:Reblogs}
  2091. {/block:RebloggedFrom}
  2092. {/block:PermalinkPage}
  2093. {/block:IfNotShowCaptions}
  2094. {/block:Caption}
  2095. {/block:Photo} <!-- / end photos -->
  2096.  
  2097. <!-- /*/*/*/ -->
  2098.  
  2099. <!-- PANORAMA POSTS -->
  2100. {block:Panorama}
  2101. {LinkOpenTag}
  2102. <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" title="click to open lightbox">
  2103. <div class="panorama">
  2104. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
  2105. </div>
  2106. </a>
  2107. {LinkCloseTag}
  2108. {block:Caption}
  2109. {block:IfShowCaptions}
  2110. {block:NotReblog}{Caption}{/block:NotReblog}
  2111. {block:RebloggedFrom}
  2112. {block:Reblogs}
  2113. <div class="username">
  2114. {block:HasPermalink}
  2115. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2116. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  2117. {block:IsActive}
  2118. <span class="fas fa-user"></span>
  2119. {/block:IsActive}
  2120. {block:IsDeactivated}
  2121. <span class="fas fa-user-times"></span>
  2122. {/block:IsDeactivated}
  2123. {Username}
  2124. </a>
  2125. </div>
  2126. {/block:HasPermalink}
  2127. {block:HasNoPermalink}
  2128. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2129. {block:IsActive}
  2130. <span class="fas fa-user"></span>
  2131. {/block:IsActive}
  2132. {block:IsDeactivated}
  2133. <span class="fas fa-user-times"></span>
  2134. {/block:IsDeactivated}
  2135. {Username}
  2136. </span>
  2137. {/block:HasNoPermalink}
  2138. </div>
  2139. <div class="text">{Body}</div>
  2140. {/block:Reblogs}
  2141. {/block:RebloggedFrom}
  2142. {/block:IfShowCaptions}
  2143. <!-- Captions Hidden on Index -->
  2144. {block:IfNotShowCaptions}
  2145. {block:PermalinkPage}
  2146. {block:NotReblog}{Caption}{/block:NotReblog}
  2147. {block:RebloggedFrom}
  2148. {block:Reblogs}
  2149. <div class="username">
  2150. {block:HasPermalink}
  2151. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2152. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  2153. {block:IsActive}
  2154. <span class="fas fa-user"></span>
  2155. {/block:IsActive}
  2156. {block:IsDeactivated}
  2157. <span class="fas fa-user-times"></span>
  2158. {/block:IsDeactivated}
  2159. {Username}
  2160. </a>
  2161. </div>
  2162. {/block:HasPermalink}
  2163. {block:HasNoPermalink}
  2164. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2165. {block:IsActive}
  2166. <span class="fas fa-user"></span>
  2167. {/block:IsActive}
  2168. {block:IsDeactivated}
  2169. <span class="fas fa-user-times"></span>
  2170. {/block:IsDeactivated}
  2171. {Username}
  2172. </span>
  2173. {/block:HasNoPermalink}
  2174. </div>
  2175. <div class="text">{Body}</div>
  2176. {/block:Reblogs}
  2177. {/block:RebloggedFrom}
  2178. {/block:PermalinkPage}
  2179. {/block:IfNotShowCaptions}
  2180. {/block:Caption}
  2181. {/block:Panorama} <!-- / end panorama -->
  2182.  
  2183. <!-- /*/*/*/ -->
  2184.  
  2185. <!-- PHOTOSETS -->
  2186. {block:Photoset}
  2187. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
  2188. {block:Photos}
  2189. <div class="photoset-image" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)" title="click to open lightbox">
  2190. <img src="{PhotoURL-HighRes}"/>
  2191. </div>
  2192. {/block:Photos}
  2193. </div>
  2194. {block:Caption}
  2195. {block:IfShowCaptions}
  2196. {block:NotReblog}{Caption}{/block:NotReblog}
  2197. {block:RebloggedFrom}
  2198. {block:Reblogs}
  2199. <div class="username">
  2200. {block:HasPermalink}
  2201. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2202. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  2203. {block:IsActive}
  2204. <span class="fas fa-user"></span>
  2205. {/block:IsActive}
  2206. {block:IsDeactivated}
  2207. <span class="fas fa-user-times"></span>
  2208. {/block:IsDeactivated}
  2209. {Username}
  2210. </a>
  2211. </div>
  2212. {/block:HasPermalink}
  2213. {block:HasNoPermalink}
  2214. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2215. {block:IsActive}
  2216. <span class="fas fa-user"></span>
  2217. {/block:IsActive}
  2218. {block:IsDeactivated}
  2219. <span class="fas fa-user-times"></span>
  2220. {/block:IsDeactivated}
  2221. {Username}
  2222. </span>
  2223. {/block:HasNoPermalink}
  2224. </div>
  2225. <div class="text">{Body}</div>
  2226. {/block:Reblogs}
  2227. {/block:RebloggedFrom}
  2228. {/block:IfShowCaptions}
  2229. <!-- Captions Hidden on Index -->
  2230. {block:IfNotShowCaptions}
  2231. {block:PermalinkPage}
  2232. {block:NotReblog}{Caption}{/block:NotReblog}
  2233. {block:RebloggedFrom}
  2234. {block:Reblogs}
  2235. <div class="username">
  2236. {block:HasPermalink}
  2237. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2238. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  2239. {block:IsActive}
  2240. <span class="fas fa-user"></span>
  2241. {/block:IsActive}
  2242. {block:IsDeactivated}
  2243. <span class="fas fa-user-times"></span>
  2244. {/block:IsDeactivated}
  2245. {Username}
  2246. </a>
  2247. </div>
  2248. {/block:HasPermalink}
  2249. {block:HasNoPermalink}
  2250. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2251. {block:IsActive}
  2252. <span class="fas fa-user"></span>
  2253. {/block:IsActive}
  2254. {block:IsDeactivated}
  2255. <span class="fas fa-user-times"></span>
  2256. {/block:IsDeactivated}
  2257. {Username}
  2258. </span>
  2259. {/block:HasNoPermalink}
  2260. </div>
  2261. <div class="text">{Body}</div>
  2262. {/block:Reblogs}
  2263. {/block:RebloggedFrom}
  2264. {/block:PermalinkPage}
  2265. {/block:IfNotShowCaptions}
  2266. {/block:Caption}
  2267. {/block:Photoset} <!-- / end photosets -->
  2268.  
  2269.  
  2270. <!-- /*/*/*/ -->
  2271.  
  2272. <!-- AUDIO POSTS -->
  2273. {block:Audio}
  2274. {block:AudioEmbed}
  2275. <div class="audio">
  2276. {AudioEmbed}
  2277. </div>
  2278. {/block:AudioEmbed}
  2279. {block:Caption}
  2280. {block:IfShowCaptions}
  2281. {block:NotReblog}
  2282. {Caption}
  2283. {/block:NotReblog}
  2284. {block:RebloggedFrom}
  2285. {block:Reblogs}
  2286. <div class="username">
  2287. {block:HasPermalink}
  2288. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2289. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  2290. {block:IsActive}
  2291. <span class="fas fa-user"></span>
  2292. {/block:IsActive}
  2293. {block:IsDeactivated}
  2294. <span class="fas fa-user-times"></span>
  2295. {/block:IsDeactivated}
  2296. {Username}
  2297. </a>
  2298. </div>
  2299. {/block:HasPermalink}
  2300. {block:HasNoPermalink}
  2301. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2302. {block:IsActive}
  2303. <span class="fas fa-user"></span>
  2304. {/block:IsActive}
  2305. {block:IsDeactivated}
  2306. <span class="fas fa-user-times"></span>
  2307. {/block:IsDeactivated}
  2308. {Username}
  2309. </span>
  2310. {/block:HasNoPermalink}
  2311. </div>
  2312. <div class="text">{Body}</div>
  2313. {/block:Reblogs}
  2314. {/block:RebloggedFrom}
  2315. {/block:IfShowCaptions}
  2316. <!-- Captions Hidden on Index -->
  2317. {block:IfNotShowCaptions}
  2318. {block:PermalinkPage}
  2319. {block:NotReblog}{Caption}{/block:NotReblog}
  2320. {block:RebloggedFrom}
  2321. {block:Reblogs}
  2322. <div class="username">
  2323. {block:HasPermalink}
  2324. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2325. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  2326. {block:IsActive}
  2327. <span class="fas fa-user"></span>
  2328. {/block:IsActive}
  2329. {block:IsDeactivated}
  2330. <span class="fas fa-user-times"></span>
  2331. {/block:IsDeactivated}
  2332. {Username}
  2333. </a>
  2334. </div>
  2335. {/block:HasPermalink}
  2336. {block:HasNoPermalink}
  2337. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2338. {block:IsActive}
  2339. <span class="fas fa-user"></span>
  2340. {/block:IsActive}
  2341. {block:IsDeactivated}
  2342. <span class="fas fa-user-times"></span>
  2343. {/block:IsDeactivated}
  2344. {Username}
  2345. </span>
  2346. {/block:HasNoPermalink}
  2347. </div>
  2348. <div class="text">{Body}</div>
  2349. {/block:Reblogs}
  2350. {/block:RebloggedFrom}
  2351. {/block:PermalinkPage}
  2352. {/block:IfNotShowCaptions} <!-- / end -->
  2353. {/block:Caption}
  2354. {/block:Audio}
  2355.  
  2356. <!-- /*/*/*/ -->
  2357.  
  2358. <!-- VIDEO POSTS -->
  2359. {block:Video}
  2360. <div class="video">
  2361. {Video-500}
  2362. </div>
  2363. {block:Caption}
  2364. {block:IfShowCaptions}
  2365. {block:NotReblog}
  2366. {Caption}
  2367. {/block:NotReblog}
  2368. {block:RebloggedFrom}
  2369. {block:Reblogs}
  2370. <div class="username">
  2371. {block:HasPermalink}
  2372. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2373. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  2374. {block:IsActive}
  2375. <span class="fas fa-user"></span>
  2376. {/block:IsActive}
  2377. {block:IsDeactivated}
  2378. <span class="fas fa-user-times"></span>
  2379. {/block:IsDeactivated}
  2380. {Username}
  2381. </a>
  2382. </div>
  2383. {/block:HasPermalink}
  2384. {block:HasNoPermalink}
  2385. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2386. {block:IsActive}
  2387. <span class="fas fa-user"></span>
  2388. {/block:IsActive}
  2389. {block:IsDeactivated}
  2390. <span class="fas fa-user-times"></span>
  2391. {/block:IsDeactivated}
  2392. {Username}
  2393. </span>
  2394. {/block:HasNoPermalink}
  2395. </div>
  2396. <div class="text">{Body}</div>
  2397. {/block:Reblogs}
  2398. {/block:RebloggedFrom}
  2399. {/block:IfShowCaptions}
  2400. <!-- Captions Hidden on Index -->
  2401. {block:IfNotShowCaptions}
  2402. {block:PermalinkPage}
  2403. {block:NotReblog}{Caption}{/block:NotReblog}
  2404. {block:RebloggedFrom}
  2405. {block:Reblogs}
  2406. <div class="username">
  2407. {block:HasPermalink}
  2408. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2409. <a target="_blank" class="user" href="{Permalink}" title="original post by {ReblogRootName}">
  2410. {block:IsActive}
  2411. <span class="fas fa-user"></span>
  2412. {/block:IsActive}
  2413. {block:IsDeactivated}
  2414. <span class="fas fa-user-times"></span>
  2415. {/block:IsDeactivated}
  2416. {Username}
  2417. </a>
  2418. </div>
  2419. {/block:HasPermalink}
  2420. {block:HasNoPermalink}
  2421. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2422. {block:IsActive}
  2423. <span class="fas fa-user"></span>
  2424. {/block:IsActive}
  2425. {block:IsDeactivated}
  2426. <span class="fas fa-user-times"></span>
  2427. {/block:IsDeactivated}
  2428. {Username}
  2429. </span>
  2430. {/block:HasNoPermalink}
  2431. </div>
  2432. <div class="text">{Body}</div>
  2433. {/block:Reblogs}
  2434. {/block:RebloggedFrom}
  2435. {/block:PermalinkPage}
  2436. {/block:IfNotShowCaptions} <!-- / end -->
  2437. {/block:Caption}
  2438. {/block:Video}
  2439.  
  2440. <div class="post-information">
  2441.  
  2442. <!-- TIME STAMP -->
  2443. {block:Date}
  2444. <a class="specs" href="{Permalink}" title="{Month} {DayOfMonth}, {Year}">
  2445. <span class="fas fa-clock" aria-hidden="true"></span> {TimeAgo}
  2446. </a>
  2447. {/block:Date}
  2448.  
  2449. <!-- NOTE COUNT -->
  2450. {block:NoteCount}
  2451. <a class="specs" href="{Permalink}" title="{NoteCountWithLabel}">
  2452. <span class="fas fa-info" aria-hidden="true"></span> {NoteCountWithLabel}
  2453. </a>
  2454. {/block:NoteCount}
  2455.  
  2456. <!-- VIA -->
  2457. {block:RebloggedFrom}
  2458. <a class="specs" href="{ReblogParentURL}" title="via">
  2459. <span class="fas fa-paper-plane" aria-hidden="true"></span> via
  2460. </a>
  2461. {/block:RebloggedFrom}
  2462.  
  2463. <!-- POST SOURCE -->
  2464. {block:ContentSource}
  2465. <a class="specs" href="{SourceURL}" title="source">
  2466. <span class="fas fa-map-marker-alt" aria-hidden="true"></span> source
  2467. </a>
  2468. {/block:ContentSource}
  2469.  
  2470. <!-- REBLOG BUTTON -->
  2471. <a class="specs" href="{ReblogURL}" title="reblog this post">
  2472. <span class="fas fa-sync-alt" aria-hidden="true"></span> reblog
  2473. </a>
  2474.  
  2475. <!-- LIKE BUTTON -->
  2476. <a class="liked specs" href="#" title="like this post">
  2477. {LikeButton}
  2478. </a>
  2479.  
  2480. <!-- TAGS -->
  2481. {block:HasTags}
  2482. {block:IfShowTags}
  2483. {block:Tags}
  2484. <a class="specs" href="{TagURL}" title="tagged as: {Tag}">
  2485. <span class="fas fa-tags"></span> {Tag}
  2486. </a>
  2487. {/block:Tags}
  2488. {block:IfShowTags}
  2489. {block:IfNotShowTags}
  2490. {block:PermalinkPage}
  2491. {block:Tags}
  2492. <a class="specs" href="{TagURL}" title="tagged as: {Tag}">
  2493. # {Tag}
  2494. </a>
  2495. {/block:Tags}
  2496. {/block:PermalinkPage}
  2497. {/block:IfNotShowTags}
  2498. {/block:HasTags}
  2499. </div>
  2500.  
  2501. {block:PermalinkPage}
  2502. {block:NoteCount}
  2503. {block:PostNotes}
  2504. {PostNotes}
  2505. {/block:PostNotes}
  2506. {/block:NoteCount}
  2507. {/block:PermalinkPage}
  2508.  
  2509. </article>
  2510. {/block:Posts}
  2511. </div> <!-- // end posts -->
  2512.  
  2513. <!-- MOBILE FOOTER -->
  2514. <div id="mb-footer">
  2515. <!-- Previous Page -->
  2516. {block:Pagination}
  2517. {block:PreviousPage}
  2518. <a href="{PreviousPage}" title="previous page" class="mbf-link">
  2519. <div class="mbf-nav mbfn1">
  2520. <span class="fas fa-chevron-left"></span>
  2521. </div>
  2522. </a>
  2523. {/block:PreviousPage}
  2524. {/block:Pagination}
  2525.  
  2526. <!-- Theme Credit -->
  2527. <!-- Don't touch! -->
  2528. <a href="https://silbrigthemes.tumblr.com/" title="theme credit" class="mbf-link">
  2529. <div class="mbf-nav mbfn2">
  2530. <span class="fas fa-code"></span>
  2531. </div>
  2532. </a>
  2533.  
  2534. <!-- Index -->
  2535. <a href="/" title="index" class="mbf-link">
  2536. <div class="mbf-nav mbfn1">
  2537. <span class="fas fa-home"></span>
  2538. </div>
  2539. </a>
  2540.  
  2541. <!-- Navigation -->
  2542. <div class="dropdown">
  2543. <button onclick="myFunction()" class="dropbtn mbf-nav mbfn2" title="click to show links">
  2544. <span class="fas fa-bars"
  2545. </button>
  2546. <div id="myDropdown" class="dropdown-content">
  2547. <!-- Ask Link -->
  2548. {block:AskEnabled}
  2549. <a href="/ask" title="{AskLabel}">{AskLabel}</a>
  2550. {/block:AskEnabled}
  2551.  
  2552. <!-- Submissions Link -->
  2553. {block:SubmissionsEnabled}
  2554. <a href="/submit" title="{SubmitLabel}">
  2555. {SubmitLabel}
  2556. </a>
  2557. {/block:SubmissionsEnabled}
  2558.  
  2559. <!-- Archive Link -->
  2560. <a href="/archive" title="browse archive">
  2561. Archive
  2562. </a>
  2563.  
  2564. <!-- 1st Custom Link -->
  2565. {block:IfCustomLink1}
  2566. <a href="{text:Custom URL 1}" title="{text:Custom Link 1}">
  2567. {text:Custom Link 1}
  2568. </a>
  2569. {/block:IfCustomLink1}
  2570.  
  2571. <!-- 2nd Custom Link -->
  2572. {block:IfCustomLink2}
  2573. <a href="{text:Custom URL 2}" title="{text:Custom Link 2}">
  2574. {text:Custom Link 2}
  2575. </a>
  2576. {/block:IfCustomLink2}
  2577.  
  2578. <!-- 3rd Custom Link -->
  2579. {block:IfCustomLink3}
  2580. <a href="{text:Custom URL 3}" title="{text:Custom Link 3}">
  2581. {text:Custom Link 3}
  2582. </a>
  2583. {/block:IfCustomLink3}
  2584.  
  2585. <!-- 4th Custom Link -->
  2586. {block:IfCustomLink4}
  2587. <a href="{text:Custom URL 4}" title="{text:Custom Link 4}">
  2588. {text:Custom Link 4}
  2589. </a>
  2590. {/block:IfCustomLink4}
  2591.  
  2592. <!-- 5th Custom Link -->
  2593. {block:IfCustomLink5}
  2594. <a href="{text:Custom URL 5}" title="{text:Custom Link 5}">
  2595. {text:Custom Link 5}
  2596. </a>
  2597. {/block:IfCustomLink5}
  2598.  
  2599. <!-- Dashboard Link -->
  2600. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="conlink">
  2601. Tumblr Dashboard
  2602. </a>
  2603.  
  2604. <!-- Customize -->
  2605. <!-- Takes you, the blog owner, to the customization. -->
  2606. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize theme" class="conlink">
  2607. Customize Theme
  2608. </a>
  2609.  
  2610. <!-- Follow -->
  2611. <!-- Takes people to a page so that they can follow you. -->
  2612. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="conlink">
  2613. Follow Me
  2614. </a>
  2615. </div>
  2616. </div> <!-- // end navigation panel -->
  2617.  
  2618. <!-- Next Page -->
  2619. {block:Pagination}
  2620. {block:NextPage}
  2621. <a href="{NextPage}" title="next page" class="mbf-link">
  2622. <div class="mbf-nav mbfn1">
  2623. <span class="fas fa-chevron-right"></span>
  2624. </div>
  2625. </a>
  2626. {/block:NextPage}
  2627. {/block:Pagination}
  2628. </div> <!-- // end mobile footer -->
  2629.  
  2630. <!-- CUSTOM CONTROLS -->
  2631. <div id="custom-controls">
  2632. <!-- Dashboard Link -->
  2633. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="conlink">
  2634. <div class="cont">
  2635. <span class="fab fa-tumblr" aria-hidden="true"></span>
  2636. </div>
  2637. </a>
  2638.  
  2639. <!-- Message -->
  2640. <!-- Takes people to dashboard to send you a message. -->
  2641. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="conlink">
  2642. <div class="cont">
  2643. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  2644. </div>
  2645. </a>
  2646.  
  2647. <!-- Customize -->
  2648. <!-- Takes you, the blog owner, to the customization. -->
  2649. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize theme" class="conlink">
  2650. <div class="cont">
  2651. <span class="fas fa-palette" aria-hidden="true"></span>
  2652. </div>
  2653. </a>
  2654.  
  2655. <!-- Follow -->
  2656. <!-- Takes people to a page so that they can follow you. -->
  2657. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="conlink">
  2658. <div class="cont">
  2659. <span class="fas fa-plus" aria-hidden="true"></span>
  2660. </div>
  2661. </a>
  2662. </div> <!-- // end custom controls -->
  2663.  
  2664. <!-- CREDIT -->
  2665. <!-- Do not touch! -->
  2666. <div id="cd">
  2667. <a href="https://silbrigthemes.tumblr.com/" title="theme by silbrigthemes" class="conlink">
  2668. <div class="cont">
  2669. <span class="fas fa-code" aria-hidden="true"></span>
  2670. </div>
  2671. </a>
  2672. </div>
  2673.  
  2674. <!-- PAGE NOT FOUND -->
  2675. <!-- Tutorial by fukuo. -->
  2676. <div class="wrapper_notfound">
  2677. <div class="actual_notfound">
  2678. <h1>{text:Not Found Title}</h1>
  2679. <p>{text:Not Found Text}</br>
  2680. Please go <a href="/" title="back to blog">here</a> to return to the blog.</p>
  2681. </div>
  2682. </div>
  2683.  
  2684. <!-- SCRIPTS -->
  2685. <!-- CSS PHOTOSETS SCRIPT -->
  2686. <!-- by annasthms and espoirthemes -->
  2687. <script>
  2688. function gatherData(images, arr) {
  2689. for (let i = 0; i < images.length; i++) {
  2690. let currentData = {
  2691. "width": images[i].getAttribute('data-width'),
  2692. "height": images[i].getAttribute('data-height'),
  2693. "low_res": images[i].getAttribute('data-lowres'),
  2694. "high_res": images[i].getAttribute('data-highres')
  2695. };
  2696. arr.push(currentData);
  2697. }
  2698. }
  2699. function getIndex(elem) {
  2700. let i = 0;
  2701. while( (elem = elem.previousElementSibling) != null ) i++;
  2702. return i;
  2703. }
  2704. function lightbox(elem) {
  2705. let currentPhotoset = elem.parentNode;
  2706. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  2707. let data = [];
  2708. gatherData(photosetPhotos, data);
  2709. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  2710. }
  2711. </script>
  2712.  
  2713. <!-- RESPONSIVE VIDEOS -->
  2714. <!-- Responsive videos script, by @nouvae. -->
  2715. <script>
  2716. $(document).ready(function() {
  2717. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  2718. });
  2719. </script>
  2720.  
  2721. <script>
  2722. function flexFrame() {
  2723. $(".caption").each(function() {
  2724. $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  2725. flexibleFrames($(".capframe"));
  2726. });
  2727. flexibleFrames($(".video"));
  2728. }
  2729.  
  2730. $(document).ready(flexFrame);
  2731. </script>
  2732.  
  2733. <!-- PAGE NOT FOUND -->
  2734. <!-- Tutorial by fukuo. -->
  2735. <script>
  2736. $(document).ready(function() {
  2737. if ($('p:contains("The URL you requested could not be found.")').html()) {
  2738. $(".wrapper_notfound").css( "visibility", "visible" );
  2739. $(".article_position").remove();
  2740. $('title').prepend( "Not Found | " ); }
  2741. });
  2742. </script>
  2743.  
  2744. <!-- Clickable dropdown, tutorial by w3schools. -->
  2745. <script>
  2746. /* When the user clicks on the button,
  2747. toggle between hiding and showing the dropdown content */
  2748. function myFunction() {
  2749. document.getElementById("myDropdown").classList.toggle("show");
  2750. }
  2751.  
  2752. // Close the dropdown if the user clicks outside of it
  2753. window.onclick = function(event) {
  2754. if (!event.target.matches('.dropbtn')) {
  2755. var dropdowns = document.getElementsByClassName("dropdown-content");
  2756. var i;
  2757. for (i = 0; i < dropdowns.length; i++) {
  2758. var openDropdown = dropdowns[i];
  2759. if (openDropdown.classList.contains('show')) {
  2760. openDropdown.classList.remove('show');
  2761. }
  2762. }
  2763. }
  2764. }
  2765. </script>
  2766.  
  2767. <!-- Tooltips, TippyJs -->
  2768. <script src="https://unpkg.com/popper.js@1"></script>
  2769. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  2770. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  2771.  
  2772. <!-- Thanks to the members of coding cabin who helped me fix a
  2773. bug in the script! You guys are the best! <3 -->
  2774. <script>
  2775. tippy('a[title], .photoset-image, .current, button', {
  2776. theme: 'sparkjoy',
  2777. arrow: tippy.roundArrow,
  2778. zIndex: 9999999999,
  2779. maxWidth: 300,
  2780.  
  2781. content(reference) {
  2782. const title = reference.getAttribute('title');
  2783. reference.removeAttribute('title');
  2784. return title;
  2785. },
  2786. });
  2787. </script>
  2788.  
  2789. </body>
  2790. </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!