silbrigthemes

Leben | Chai (Theme #18)

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