API tools faq
paste
silbrigthemes

Übersicht | Dashboard (Theme #15)

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