API tools faq
paste
silbrigthemes

Hanami (Theme #16)

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