API tools faq
paste
silbrigthemes

Christkind (Theme 21)

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