API tools faq
paste
silbrigthemes

Obstsalat (Theme #17)

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