API tools faq
paste
Advertisement
silbrigthemes

Feuer und Flamme (Theme #6)

silbrigthemes
Jul 14th, 2018 (edited)
507
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 79.64 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. FEUER UND FLAMME
  7. Theme #6 by @silbrigthemes
  8.  
  9. "Feuer und Flamme sein" (ger., lit.: being fire and flame):
  10. a figure of speech used to express being passionate about something
  11.  
  12. One column sidebar theme, with gradients.
  13.  
  14. RULES:
  15.  
  16. 1) Do not claim as your own.
  17. 2) Do not steal (parts of) the code.
  18. 3) Do not edit beyond recognition.
  19. 4) Do not use as a base code.
  20. 5) Do not delete or alter the credit.
  21. 6) Please like / reblog if you’re using this theme.
  22.  
  23. If you have any questions or need help, feel free to contact me via
  24. -> silbrigthemes.tumblr.com/ask
  25. -> silbrigsupport.tumblr.com
  26.  
  27. You can find the customization guide by going to:
  28. https://feuerundflammetheme.tumblr.com/customization-guide
  29.  
  30. Have fun!
  31.  
  32. -->
  33.  
  34. <head>
  35.  
  36. <meta charset="utf-16">
  37. <title>{Title}</title>
  38. {block:Description}
  39. <meta name="description" content="{MetaDescription}" />
  40. {/block:Description}
  41. <link rel="shortcut icon" href="{Favicon}"/>
  42. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  43. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  44.  
  45. <!-- Necessary for the theme to be responsive. -->
  46. <meta name="viewport" content="width=device-width, initial-scale=1">
  47.  
  48. <!-- Necessary for the icon font to work. -->
  49. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  50.  
  51. <!-- Necessary for the scripts to work. -->
  52. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  53.  
  54. <!-- Video Resizing Scripts by @shythemes -->
  55. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  56.  
  57. <!-- Changes the toolbar color on mobile. -->
  58. <meta name="theme-color" content="{color:Accent 2}"/>
  59.  
  60. <!-- Necessary for PXU photosets. -->
  61. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  62. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  63.  
  64. <!-- Tooltip Script -->
  65. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  66. <script>
  67. (function($){
  68. $(document).ready(function(){
  69. $("[title]").style_my_tooltips({
  70. tip_follows_cursor:true,
  71. tip_delay_time:200,
  72. tip_fade_speed:300
  73. }
  74. );
  75. });
  76. })(jQuery);
  77. </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:Posts} !important} </style>"));
  85. });
  86. });
  87. </script>
  88.  
  89. <!-- No tumblr redirected links, by @magnusthemes. -->
  90. <script>
  91. $(document).ready(function(){
  92. //remove tumblr redirects script by magnusthemes@tumblr
  93. $('a[href*="t.umblr.com/redirect"]').each(function(){
  94. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  95. var replaceURL = decodeURIComponent(originalURL);
  96. $(this).attr("href", replaceURL);
  97. });
  98. });
  99. </script>
  100.  
  101. <!-- Other fonts. -->
  102. <!-- Roboto Mono -->
  103. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  104. <!-- Cormorant Garamond -->
  105. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
  106. <!-- Dancing Script -->
  107. <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
  108.  
  109. <!-- Custom Fonts. -->
  110. <!-- Open Sans -->
  111. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  112. <!-- Quicksand -->
  113. <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,700&amp;subset=latin-ext,vietnamese" rel="stylesheet">
  114. <!-- Raleway -->
  115. <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700&amp;subset=latin-ext" rel="stylesheet">
  116. <!-- Roboto -->
  117. <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">
  118. <!-- Ubuntu -->
  119. <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext" rel="stylesheet">
  120.  
  121. <!-- Custom Fonts -->
  122. <meta name="select:Font" content="Open Sans" title="Open Sans"/>
  123. <meta name="select:Font" content="Quicksand" title="Quicksand"/>
  124. <meta name="select:Font" content="Raleway" title="Raleway"/>
  125. <meta name="select:Font" content="Roboto" title="Roboto"/>
  126. <meta name="select:Font" content="Ubuntu" title="Ubuntu"/>
  127.  
  128. <!-- Font Sizes -->
  129. <meta name="select:Font Size" content="1em" title="16px"/>
  130. <meta name="select:Font Size" content="14px" title="14px"/>
  131. <meta name="select:Font Size" content="12px" title="12px"/>
  132.  
  133. <!-- Background Repeat -->
  134. <meta name="select:Background Repeat" content="no-repeat" title="no repeat"/>
  135. <meta name="select:Background Repeat" content="repeat" title="repeat"/>
  136.  
  137. <!-- Ordered Lists -->
  138. <meta name="select:Ordered List" content="decimal" title="decimal"/>
  139. <meta name="select:Ordered List" content="lower-greek" title="lower greek"/>
  140. <meta name="select:Ordered List" content="lower-latin" title="lower latin"/>
  141. <meta name="select:Ordered List" content="upper-roman" title="upper roman"/>
  142.  
  143. <!-- Text Align -->
  144. <meta name="select:Text Align" content="left" title="left"/>
  145. <meta name="select:Text Align" content="justify" title="justify"/>
  146.  
  147. <!-- Title Align -->
  148. <meta name="select:Title Align" content="center" title="center"/>
  149. <meta name="select:Title Align" content="left" title="left"/>
  150. <meta name="select:Title Align" content="justify" title="justify"/>
  151.  
  152. <meta name="if:ShowCaptions" content="1"/>
  153.  
  154. <meta name="if:SideImage" content="0"/>
  155.  
  156. <meta name="text:Background Size" content="cover"/>
  157.  
  158. <meta name="text:Custom Link 1" content="Custom 1"/>
  159. <meta name="text:URL Custom Link 1" content="/"/>
  160. <meta name="text:Custom Link 2" content="Custom Link 2"/>
  161. <meta name="text:URL Custom Link 2" content="/"/>
  162. <meta name="text:Custom Link 3" content="Custom Link 3"/>
  163. <meta name="text:URL Custom Link 3" content="/"/>
  164.  
  165. <meta name="text:Photoset Gutter" content="4"/>
  166.  
  167. <meta name="text:Unordered List" content="e302"/>
  168.  
  169. <meta name="image:Side Background" content=""/>
  170.  
  171. <!-- Color Options -->
  172. <meta name="color:Accent 1" content="#ff0000"/>
  173. <meta name="color:Accent 2" content="#ff4a00"/>
  174. <meta name="color:Accent 3" content="#ffa500"/>
  175. <meta name="color:Background" content="#f5f6f7"/>
  176. <meta name="color:Other Text" content="#000"/>
  177. <meta name="color:Posts" content="#fff"/>
  178. <meta name="color:Preformatted" content="#f1f2f3"/>
  179. <meta name="color:Sidebar Text" content="#fff"/>
  180. <meta name="color:Text" content="#28292a"/>
  181. <meta name="color:Text Selection" content="#f0f1f2"/>
  182.  
  183. <style>
  184.  
  185. body{
  186. margin:0;
  187. top:0;
  188. left:0;
  189. overflow-x:hiddden;
  190. font-size:{select:Font Size};
  191. color:{color:Text};
  192. background-color:{color:Background};
  193. font-family:{select:Font}, Verdana;
  194. text-align:{select:Text Align};
  195. }
  196.  
  197. /* Custom Scrollbar */
  198. ::-webkit-scrollbar{
  199. width:10px;
  200. border-radius:5px;
  201. background-color: {color:Accent 2};
  202. background: linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  203. border:4px solid {color:Background};
  204. }
  205.  
  206. ::-webkit-scrollbar-thumb{
  207. width:10px;
  208. border-radius:5px;
  209. background-color: {color:Accent 2};
  210. background: linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  211. border:2px solid {color:Background};
  212. }
  213.  
  214. /* Custom Text Selection */
  215. ::selection{
  216. background-color:{color:Text Selection};
  217. color:{color:Text};
  218. }
  219.  
  220. ::-moz-selection{
  221. background-color:{color:Text Selection};
  222. color:{color:Text};
  223. }
  224.  
  225. ::-o-selection{
  226. background-color:{color:Text Selection};
  227. color:{color:Text};
  228. }
  229.  
  230. ::-webkit-selection{
  231. background-color:{color:Text Selection};
  232. color:{color:Text};
  233. }
  234.  
  235. /* Custom Tooltips */
  236. #s-m-t-tooltip{
  237. max-width:300px;
  238. margin:15px;
  239. padding:0.5em;
  240. background-color: {color:Accent 2};
  241. background: linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  242. color:{color:Posts};
  243. z-index:999999;
  244. font-size:calc({select:Font Size} - 4px);
  245. text-transform:uppercase;
  246. font-weight:300;
  247. }
  248.  
  249. /** TEXT STYLES **/
  250. /* Marked Text */
  251. mark{
  252. background-color: {color:Accent 2};
  253. background: linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  254. color:{color:Posts};
  255. padding:0 0.25em;
  256. }
  257.  
  258. /* Bold Text */
  259. b, strong{
  260. font-weight:700;
  261. color:{color:Other Text};
  262. }
  263.  
  264. /* Italic Text */
  265. i, em{
  266. font-weight:300;
  267. font-style:italic;
  268. color:{color:Other Text};
  269. }
  270.  
  271. /* Underlined Text */
  272. u{
  273. text-decoration:none;
  274. border-bottom:2px solid {color:Text};
  275. }
  276.  
  277. /* Links */
  278. a{
  279. text-decoration:none;
  280. color:{color:Text};
  281. border-bottom:2px solid {color:Accent 1};
  282. transition:0.5s;
  283. -moz-transition:0.5s;
  284. -o-transition:0.5s;
  285. -webkit-transition:0.5s;
  286. }
  287.  
  288. /* Links on Hover */
  289. a:hover{
  290. border-bottom:2px solid {color:Accent 3};
  291. transition:0.5s;
  292. -moz-transition:0.5s;
  293. -o-transition:0.5s;
  294. -webkit-transition:0.5s;
  295. }
  296.  
  297. /* Empty Paragraphs */
  298. p:empty{
  299. display:none;
  300. }
  301.  
  302. /* Text Line */
  303. hr{
  304. height:4px;
  305. border:none;
  306. border-radius:2px;
  307. width:80%;
  308. background-color: {color:Accent 2};
  309. background: linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  310. }
  311.  
  312. /* Headings */
  313. /* Title */
  314. .title{
  315. font-size:calc(1.75 * {select:Font Size});
  316. text-align:{select:Title Align};
  317. }
  318.  
  319. /* Primary Heading */
  320. h1{
  321. font-size:calc(1.5 * {select:Font Size});
  322. color:{color:Other Text};
  323. font-weight:400;
  324. }
  325.  
  326. /* Secondary Heading */
  327. h2{
  328. font-size:calc(1.25 * {select:Font Size});
  329. color:{color:Other Text};
  330. font-weight:300;
  331. }
  332.  
  333. /* Preformatted Text */
  334. pre{
  335. font-family:"Roboto Mono", "Times New Roman";
  336. word-wrap:break-all;
  337. white-space:pre-wrap;
  338. font-size:calc({select:Font Size} - 2px);
  339. background-color:{color:Preformatted};
  340. padding-left:0.25em;
  341. padding-top:0.125em;
  342. padding-right:0.25em;
  343. padding-bottom:0.125em;
  344. }
  345.  
  346. /* Lists */
  347. /* Unordered List */
  348. ul{
  349. list-style-type:none;
  350. }
  351.  
  352. ul li:before{
  353. content:"\{text:Unordered List}";
  354. font-family:"saturnicons";
  355. font-weight:700;
  356. position:relative;
  357. font-size:{select:Font Size};
  358. z-index:10!important;
  359. margin-right:0.25em;
  360. margin-left:-1.5em;
  361. color:{color:Accent 2};
  362. }
  363.  
  364. /* Ordered List */
  365. ol{
  366. list-style-type:{select:Ordered List};
  367. }
  368.  
  369. /** SPECIAL FONTS **/
  370. /* Quirky Font */
  371. p.npf_quirky{
  372. font-family: 'Dancing Script', cursive;
  373. font-size:calc(1.5 * {select:Font Size});
  374.  
  375. }
  376.  
  377. /* Chat Font */
  378. p.npf_chat{
  379. font-family:Courier;
  380.  
  381. }
  382.  
  383. /* Quote Font */
  384. p.npf_quote{
  385. font-family:"Cormorant Garamond", "Palatino";
  386. font-size:calc(1.5 * {select:Font Size});
  387.  
  388. }
  389.  
  390. /*** LEFT SIDE **/
  391. /** LEFT SIDE */
  392. #left{
  393. width:50vw;
  394. height:100vh;
  395. background-color: {color:Accent 2};
  396. background: linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  397. {block:IfSideImage}
  398. background:url("{image:Side Background}");
  399. background-size:{text:Background Size};
  400. background-attachment:fixed;
  401. background-repeat:{select:Background Repeat};
  402. {/block:IfSideImage}
  403. display:flex;
  404. align-items:center;
  405. justify-content: center;
  406. flex-direction: column;
  407. }
  408.  
  409. /* Blog Icon */
  410. #l-icon img{
  411. width:96px;
  412. height:96px;
  413. border-radius:50%;
  414. border:8px solid {color:Posts};
  415. }
  416.  
  417. /* Blog Title */
  418. #l-title{
  419. font-size: calc(2 * {select:Font Size});
  420. color: {color:Sidebar Text};
  421. text-align: center;
  422. width:30vw;
  423. }
  424.  
  425. /* Blog Description */
  426. #l-desc{
  427. color: {color:Sidebar Text};
  428. text-align: center;
  429. width:25vw;
  430. }
  431.  
  432. /* NAVIGATION */
  433. #l-nav{
  434. width:25vw;
  435. height:auto;
  436. margin-top:0.5em;
  437. display:flex;
  438. align-items:space-evenly;
  439. justify-content:space-evenly;
  440. flex-wrap:wrap;
  441. }
  442.  
  443. /* Navigation Links */
  444. a.l-links{
  445. text-decoration:none;
  446. border-bottom:none;
  447. }
  448.  
  449. .l-link{
  450. background-color:{color:Posts};
  451. padding:0.25em 0.25em;
  452. color:{color:Accent 1};
  453. width:10vw;
  454. margin-bottom:0.25em;
  455. border-radius:1em;
  456. text-align:center;
  457. border:1px solid {color:Accent 1};
  458. transition:0.5s;
  459. -moz-transition:0.5s;
  460. -o-transition:0.5s;
  461. -webkit-transition:0.5s;
  462. }
  463.  
  464. /* Navigation Links on Hover */
  465. .l-link:hover{
  466. color:{color:Accent 2};
  467. border:1px solid {color:Accent 2};
  468. transform:scale(1.05);
  469. transition:0.5s;
  470. -moz-transition:0.5s;
  471. -o-transition:0.5s;
  472. -webkit-transition:0.5s;
  473. }
  474.  
  475. /* SEARCHBAR */
  476. /* Button */
  477. .openBtn {
  478. background: {color:Posts};
  479. font-family:{select:Font};
  480. color:{color:Accent 1};
  481. border:1px solid {color:Accent 1};
  482. text-align:center;
  483. width:10vw;
  484. padding:-0.25em 0.5em;
  485. border-radius:1em;
  486. cursor: pointer;
  487. font-size:{select:Font Size};
  488. font-weight:400;
  489. transition:0.5s;
  490. -moz-transition:0.5s;
  491. -o-transition:0.5s;
  492. -webkit-transition:0.5s;
  493. }
  494.  
  495. /* Button on Hover */
  496. .openBtn:hover {
  497. border:1px solid {color:Accent 2};
  498. color:{color:Accent 2};
  499. transform:scale(1.05);
  500. transition:0.5s;
  501. -moz-transition:0.5s;
  502. -o-transition:0.5s;
  503. -webkit-transition:0.5s;
  504. }
  505.  
  506. /* Searchbar Overlay */
  507. .overlay {
  508. height: 100%;
  509. width: 100%;
  510. display: none;
  511. position: fixed;
  512. z-index: 1000!important;
  513. top: 0;
  514. left: 0;
  515. background-color: {color:Accent 2};
  516. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  517. }
  518.  
  519. /* Overlay Content */
  520. .overlay-content {
  521. position: relative;
  522. top: 46%;
  523. width: 80%;
  524. text-align: center;
  525. margin-top: 30px;
  526. margin: auto;
  527. }
  528.  
  529. /* Close Button */
  530. .overlay .closebtn {
  531. position: absolute;
  532. top: 20px;
  533. right: 45px;
  534. font-size: calc(3.75 * {select:Font Size});
  535. cursor: pointer;
  536. color:{color:Posts};
  537. transition:0.5s;
  538. -moz-transition:0.5s;
  539. -o-transition:0.5s;
  540. -webkit-transition:0.5s;
  541. }
  542.  
  543. /* Close Button on Hover */
  544. .overlay .closebtn:hover {
  545. color: {color:Other Text};
  546. transition:0.5s;
  547. -moz-transition:0.5s;
  548. -o-transition:0.5s;
  549. -webkit-transition:0.5s;
  550. }
  551.  
  552. /* Searchbar */
  553. .overlay input[type=text] {
  554. padding: {select:Font Size};
  555. font-size: {select:Font Size};
  556. border: none;
  557. float: left;
  558. width: 80%;
  559. color:{color:Other Text};
  560. font-family:{select:Font};
  561. }
  562.  
  563. /* Searchbar on Hover */
  564. .overlay input[type=text]:hover {
  565. color:{color:Accent 2};
  566. }
  567.  
  568. /* Search Button */
  569. .overlay button {
  570. float: left;
  571. width: calc(20% - (2 * {select:Font Size}));
  572. padding: {select:Font Size};
  573. background: {color:Posts};
  574. color:{color:Other Text};
  575. font-size: {select:Font Size};
  576. border: none;
  577. cursor: pointer;
  578. display:flex;
  579. align-items:center;
  580. justify-content:center;
  581. transition:0.5s;
  582. -moz-transition:0.5s;
  583. -o-transition:0.5s;
  584. -webkit-transition:0.5s;
  585. }
  586.  
  587. /* Search Button on Hover */
  588. .overlay button:hover {
  589. background: {color:Other Text};
  590. color:{color:Posts};
  591. transition:0.5s;
  592. -moz-transition:0.5s;
  593. -o-transition:0.5s;
  594. -webkit-transition:0.5s;
  595. }
  596.  
  597. /* PAGINATION */
  598. /* Container */
  599. #pagi-box{
  600. width:240px;
  601. height:40px;
  602. position:fixed;
  603. bottom:1.5em;
  604. display:flex;
  605. align-items:center;
  606. justify-content:space-evenly;
  607. }
  608.  
  609. /* Pagination Links */
  610. a.pagi-link{
  611. text-decoration:none;
  612. border-bottom:none;
  613. }
  614.  
  615. /*** RIGHT SIDE ***/
  616. /** RIGHT SIDE **/
  617. #right{
  618. width:50vw;
  619. height:100vh;
  620. max-height:100vh;
  621. overflow-y:scroll;
  622. margin-left:50vw;
  623. margin-top:-100vh;
  624. background-color: inherit;
  625. overflow-x:hidden;
  626. }
  627.  
  628. /** POSTS **/
  629. article{
  630. width:40vw;
  631. height:auto;
  632. background-color:{color:Posts};
  633. padding:1em;
  634. margin-top:3em;
  635. margin-bottom:3em;
  636. margin-left:calc(5vw - 1em);
  637. }
  638.  
  639. article img{
  640. width:100%;
  641. max-width:100%;
  642. }
  643.  
  644. article .photoset{
  645. width:100%;
  646. max-width:100%;
  647. }
  648.  
  649. figure.tmblr-full{
  650. width:100%;
  651. max-width:100%;
  652. height:auto;
  653. }
  654.  
  655. /** IMAGE POSTS **/
  656. /* Custom Lightbox */
  657. .vignette, #vignette {
  658. opacity:0;
  659. }
  660. .lightbox-image, #tumblr_lightbox img {
  661. box-shadow:none!important;
  662. border-radius:0!important;
  663. max-width:none;
  664. }
  665.  
  666. .tmblr-lightbox, #tumblr_lightbox {
  667. background-color:{color:Accent 2}!important;
  668. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  669. }
  670.  
  671. a.tumblr-box{
  672. border-bottom:none;
  673. }
  674.  
  675. /** QUOTES **/
  676. /* Quote */
  677. .quoted{
  678. font-size:calc(2 * {select:Font Size});
  679. font-style:italic;
  680. font-weight:300;
  681. }
  682.  
  683. /* Quote Caption */
  684. .quote-source{
  685. margin-top:0.5em;
  686. }
  687.  
  688. /** AUDIO **/
  689. .audio > iframe{
  690. width:100%;
  691. max-width:100%;
  692. }
  693.  
  694. /* Tumblr Audio Player */
  695. iframe.tumblr_audio_player{
  696. border:2px solid {color:Accent 2};
  697. border-radius:10em;
  698. }
  699.  
  700. /* Spotify Audio Player */
  701. iframe.spotify_audio_player{
  702. border:none;
  703. border-radius:0;
  704. }
  705.  
  706. /* Soundcloud Audio Player */
  707. iframe.soundcloud_audio_player{
  708. border:none;
  709. border-radius:0;
  710. }
  711.  
  712. /** VIDEOS **/
  713. .video > iframe{
  714. width:100%;
  715. max-width:100%;
  716. }
  717.  
  718. /** CHATS **/
  719. /* Containers */
  720. .chatterbox{
  721. width:100%;
  722. overflow:hidden;
  723. }
  724.  
  725. .chat{
  726. width:100%;
  727. }
  728.  
  729. .chat .clear{
  730. clear:both;
  731. }
  732.  
  733. /* Odd Chat Elements (1,3,5,…) */
  734. .chat .label_odd, .line_odd{
  735. height:auto;
  736. width:60%;
  737. margin-left:calc(10% );
  738. float:left;
  739. padding:0.25 0.5em;
  740. }
  741.  
  742. /* Odd Chat Lines (1,3,5,…) */
  743. .chat .line_odd{
  744. margin-bottom:0.5em;
  745. border:1px solid {color:Accent 1};
  746. padding:0.25em 0.5em;
  747. border-radius:1em;
  748. color:{color:Accent 1};
  749. }
  750.  
  751. /* Odd Chat Labels (1,3,5,…) */
  752. .chat .label_odd{
  753. font-weight:bold;
  754. background-color:{color:Accent 1};
  755. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 2});
  756. color:{color:Posts};
  757. padding:0.25em 0.5em;
  758. border-radius:1em;
  759. margin-bottom:0.25em;
  760. }
  761.  
  762. /* Even Chat Elements (2,4,6,…) */
  763. .chat .label_even, .line_even{
  764. width:60%;
  765. height:auto;
  766. float:right;
  767. text-align:right;
  768. padding:0.25 0.5em;
  769. margin-right:calc(10%);
  770. }
  771.  
  772. /* Even Chat Lines (2,4,6,…) */
  773. .chat .line_even{
  774. border:1px solid {color:Accent 3};
  775. padding:0.25em 0.5em;
  776. border-radius:1em;
  777. margin-bottom:0.5em;
  778. color:{color:Accent 3};
  779. }
  780.  
  781. /* Even Chat Labels (2,4,6,…) */
  782. .chat .label_even{
  783. font-weight:bold;
  784. background-color:{color:Accent 3};
  785. background:linear-gradient(to bottom right, {color:Accent 2}, {color:Accent 3});
  786. color:{color:Posts};
  787. padding:0.25em 0.5em;
  788. border-radius:1em;
  789. margin-bottom:0.25em;
  790. }
  791.  
  792. /** LINK POSTS **/
  793. /* Link */
  794. .link-posts a{
  795. text-decoration:none;
  796. border-bottom:none;
  797. }
  798.  
  799. /* Container */
  800. .link-posts{
  801. text-align:center;
  802. font-size:calc({select:Font Size} * 1.5);
  803. margin-top:0.5em;
  804. width:100%;
  805. }
  806.  
  807. /* Link Mark */
  808. .link-title{
  809. border:2px solid {color:Accent 2};
  810. padding:0.25em 0.5em;
  811. color:{color:Accent 2};
  812. background-color:{color:Posts};
  813. font-style:italic;
  814. letter-spacing:1.5px;
  815. border-radius:0.5em;
  816. transition:0.5s;
  817. -moz-transition:0.5s;
  818. -o-transition:0.5s;
  819. -webkit-transition:0.5s;
  820. }
  821.  
  822. .link-title:hover{
  823. color:{color:Posts};
  824. background-color:{color:Accent 2};
  825. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  826. transition:0.5s;
  827. -moz-transition:0.5s;
  828. -o-transition:0.5s;
  829. -webkit-transition:0.5s;
  830. }
  831.  
  832. /* Link Container */
  833. .link-cont{
  834. display:flex;
  835. align-items:center;
  836. justify-content:center;
  837. width:100%;
  838. height:auto;
  839. }
  840.  
  841. /* Link Thumbnail Image */
  842. .link-image img{
  843. width:40%;
  844. border-radius:5px;
  845. border:2px solid {color:Accent 2};
  846. margin-left:-60%;
  847. margin-top:-0.5em;
  848. margin-bottom:-0.5em;
  849. }
  850.  
  851. /* Link Title for Links with Thumbnail Images */
  852. .thumbtitle{
  853. width:60%;
  854. margin-left:calc(-60%);
  855. }
  856.  
  857. /** QUESTION POSTS **/
  858. /* QUESTION */
  859. .question{
  860. width:80%;
  861. margin-left:10%;
  862. margin-top:2em;
  863. margin-bottom:0.5em;
  864. padding:0.5em;
  865. display:flex;
  866. align-items:center;
  867. justify-content:flex-start;
  868. flex-direction:column;
  869. background-color:{color:Accent 2};
  870. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  871. border:2px solid {color:Accent 2};
  872. border-radius:0.5em;
  873. color:{color:Posts};
  874. }
  875.  
  876. /* Question Username */
  877. .question-username{
  878. margin-bottom:0.5em;
  879. margin-top:0.5em;
  880. }
  881.  
  882. /* Question User Icon */
  883. .question-username img{
  884. display:none;
  885. }
  886.  
  887. /* Question Username Link */
  888. .question-username a{
  889. text-decoration:none;
  890. border-bottom:none;
  891. }
  892.  
  893. a.asker{
  894. text-decoration:none;
  895. border-bottom:none;
  896. color:{color:Accent 1};
  897. background-color:{color:Posts};
  898. padding:0.25em 0.5em;
  899. border:1px solid {color:Accent 1};
  900. border-radius:1em;
  901. transition:0.5s;
  902. -moz-transition:0.5s;
  903. -o-transition:0.5s;
  904. -webkit-transition:0.5s;
  905. }
  906.  
  907. a.asker:hover{
  908. color:{color:Accent 2};
  909. border:1px solid {color:Accent 2};
  910. transition:0.5s;
  911. -moz-transition:0.5s;
  912. -o-transition:0.5s;
  913. -webkit-transition:0.5s;
  914. }
  915.  
  916. /* ANSWER */
  917. .answer{
  918. width:80%;
  919. margin-left:10%;
  920. margin-top:1em;
  921. margin-bottom:0.5em;
  922. padding:0.5em;
  923. display:flex;
  924. align-items:center;
  925. justify-content:flex-start;
  926. flex-direction:column;
  927. border:2px solid {color:Accent 2};
  928. border-radius:0.5em;
  929. }
  930.  
  931. /* Answer Username */
  932. .answer-username{
  933. margin-bottom:0.5em;
  934. margin-top:0.5em;
  935. }
  936.  
  937. /* Answer User Icon */
  938. .answer-username img{
  939. display:none;
  940. }
  941.  
  942. /* Answer Username Link */
  943. .answer-username a{
  944. text-decoration:none;
  945. border:1px solid {color:Accent 2};
  946. color:{color:Accent 2};
  947. padding:0.25em 0.5em;
  948. border-radius:1em;
  949. transition:0.5s;
  950. -moz-transition:0.5s;
  951. -o-transition:0.5s;
  952. -webkit-transition:0.5s;
  953. }
  954.  
  955. /* Answer Username Link on Hover */
  956. .answer-username a:hover{
  957. background-color:{color:Accent 2};
  958. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  959. color:{color:Posts};
  960. transition:0.5s;
  961. -moz-transition:0.5s;
  962. -o-transition:0.5s;
  963. -webkit-transition:0.5s;
  964. }
  965.  
  966. /*** USER SPECIFICATIONS ***/
  967. /* User Icon */
  968. .cimg{
  969. display:none;
  970. }
  971.  
  972. /* Username */
  973. .user{
  974. margin-top:1em;
  975. }
  976.  
  977. /* User Name Link */
  978. .user a{
  979. text-decoration:none;
  980. border-bottom:none;
  981. }
  982.  
  983. /* Username Mark */
  984. .user mark{
  985. padding:0.25em;
  986. border:1px solid {color:Accent 2};
  987. border-radius:1em;
  988. background-color:{color:Posts};
  989. background:{color:Posts};
  990. color:{color:Accent 2};
  991. margin-right:0.5em;
  992. transition:0.5s;
  993. -moz-transition:0.5s;
  994. -o-transition:0.5s;
  995. -webkit-transition:0.5s;
  996. }
  997.  
  998. /* Username Mark on Hover */
  999. .user mark:hover{
  1000. background-color:{color:Accent 2};
  1001. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  1002. color:{color:Posts};
  1003. transition:0.5s;
  1004. -moz-transition:0.5s;
  1005. -o-transition:0.5s;
  1006. -webkit-transition:0.5s;
  1007. }
  1008.  
  1009. /*** PERMALINK PAGE ***/
  1010. /* User Avatar */
  1011. img.avatar{
  1012. display:none;
  1013. }
  1014.  
  1015. /* Notes List */
  1016. ol.notes{
  1017. list-style-type:none;
  1018. margin-left:0px;
  1019. border-bottom:none;
  1020. }
  1021.  
  1022. /* Notes List on Hover */
  1023. ol.notes:hover{
  1024. border-bottom:none;
  1025. }
  1026.  
  1027. /* Notes List Item */
  1028. li.note{
  1029. line-height:1.5em;
  1030. margin-left:-2em;
  1031. }
  1032.  
  1033. /* Liked by … */
  1034. li.like:before{
  1035. content:"\e12b";
  1036. font-family:"saturnicons";
  1037. font-weight:400;
  1038. position:relative;
  1039. font-size:{select:Font Size};
  1040. padding:0.25em;
  1041. z-index:10!important;
  1042. }
  1043.  
  1044. /* Reblogged by … */
  1045. li.reblog:before{
  1046. content:"\e1f5";
  1047. font-family:"saturnicons";
  1048. font-weight:900;
  1049. position:relative;
  1050. font-size:{select:Font Size};
  1051. padding:0.25em;
  1052. z-index:10!important;
  1053. }
  1054.  
  1055. /* User Replied to … */
  1056. li.reply:before{
  1057. content:"\e082";
  1058. font-family:"saturnicons";
  1059. font-weight:400;
  1060. position:relative;
  1061. font-size:{select:Font Size};
  1062. padding:0.25em;
  1063. z-index:10!important;
  1064. }
  1065.  
  1066. /* User Reply */
  1067. .answer_content{
  1068. color:{color:Accent 2};
  1069. }
  1070.  
  1071. /* Notes Link */
  1072. .notes a{
  1073. text-decoration:none;
  1074. color:{color:Other Text};
  1075. border-bottom:4px solid {color:Accent 2};
  1076. transition:0.5s;
  1077. -moz-transition:0.5s;
  1078. -o-transition:0.5s;
  1079. -webkit-transition:0.5s;
  1080. margin-bottom:0.25em;
  1081. }
  1082.  
  1083. /* Notes Link on Hover */
  1084. .notes a:hover{
  1085. border-bottom:4px solid {color:Accent 3};
  1086. transition:0.5s;
  1087. -moz-transition:0.5s;
  1088. -o-transition:0.5s;
  1089. -webkit-transition:0.5s;
  1090. }
  1091.  
  1092. /*** POST FOOTER ***/
  1093. /* Complete Container */
  1094. .post-footer{
  1095. margin-top:1em;
  1096. padding-top:0.5em;
  1097. border-top:2px solid {color:Accent 2};
  1098. }
  1099.  
  1100. .post-footer .clear{
  1101. clear:both;
  1102. }
  1103.  
  1104. /* Info Container */
  1105. .info{
  1106. display:flex;
  1107. justify-content:flex-start;
  1108. flex-direction:row;
  1109. flex-wrap:wrap;
  1110. margin-bottom:0.5em;
  1111. line-height:2em;
  1112.  
  1113. }
  1114.  
  1115. .info .clear{
  1116. clear:both;
  1117. }
  1118.  
  1119. /* Links */
  1120. a.specs{
  1121. text-decoration:none;
  1122. border-bottom:none;
  1123. }
  1124.  
  1125. /** TIME STAMP **/
  1126. /* Time Mark */
  1127. .time mark{
  1128. padding:0.25em;
  1129. border:1px solid {color:Accent 2};
  1130. border-radius:1em;
  1131. background-color:{color:Posts};
  1132. background:{color:Posts};
  1133. color:{color:Accent 2};
  1134. margin-right:0.5em;
  1135. transition:0.5s;
  1136. -moz-transition:0.5s;
  1137. -o-transition:0.5s;
  1138. -webkit-transition:0.5s;
  1139. }
  1140.  
  1141. /* Time Mark on Hover */
  1142. .time mark:hover{
  1143. background-color:{color:Accent 2};
  1144. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  1145. color:{color:Posts};
  1146. transition:0.5s;
  1147. -moz-transition:0.5s;
  1148. -o-transition:0.5s;
  1149. -webkit-transition:0.5s;
  1150. }
  1151.  
  1152. /** NOTE COUNT **/
  1153. /* Notes Mark */
  1154. .notecount mark{
  1155. padding:0.25em;
  1156. border:1px solid {color:Accent 2};
  1157. border-radius:1em;
  1158. background-color:{color:Posts};
  1159. background:{color:Posts};
  1160. color:{color:Accent 2};
  1161. margin-right:0.5em;
  1162. transition:0.5s;
  1163. -moz-transition:0.5s;
  1164. -o-transition:0.5s;
  1165. -webkit-transition:0.5s;
  1166. }
  1167.  
  1168. /* Notes Mark on Hover */
  1169. .notecount mark:hover{
  1170. background-color:{color:Accent 2};
  1171. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  1172. color:{color:Posts};
  1173. transition:0.5s;
  1174. -moz-transition:0.5s;
  1175. -o-transition:0.5s;
  1176. -webkit-transition:0.5s;
  1177. }
  1178.  
  1179. /** VIA **/
  1180. /* Via Mark */
  1181. .via mark{
  1182. padding:0.25em;
  1183. border:1px solid {color:Accent 2};
  1184. border-radius:1em;
  1185. background-color:{color:Posts};
  1186. background:{color:Posts};
  1187. color:{color:Accent 2};
  1188. margin-right:0.5em;
  1189. transition:0.5s;
  1190. -moz-transition:0.5s;
  1191. -o-transition:0.5s;
  1192. -webkit-transition:0.5s;
  1193. }
  1194.  
  1195. /* Via Mark on Hover */
  1196. .via mark:hover{
  1197. background-color:{color:Accent 2};
  1198. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  1199. color:{color:Posts};
  1200. transition:0.5s;
  1201. -moz-transition:0.5s;
  1202. -o-transition:0.5s;
  1203. -webkit-transition:0.5s;
  1204. }
  1205.  
  1206. /** POST SOURCE **/
  1207. /* Source Mark */
  1208. .source mark{
  1209. padding:0.25em;
  1210. border:1px solid {color:Accent 2};
  1211. border-radius:1em;
  1212. background-color:{color:Posts};
  1213. background:{color:Posts};
  1214. color:{color:Accent 2};
  1215. margin-right:0.5em;
  1216. transition:0.5s;
  1217. -moz-transition:0.5s;
  1218. -o-transition:0.5s;
  1219. -webkit-transition:0.5s;
  1220. }
  1221.  
  1222. /* Source Mark on Hover */
  1223. .source mark:hover{
  1224. background-color:{color:Accent 2};
  1225. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  1226. color:{color:Posts};
  1227. transition:0.5s;
  1228. -moz-transition:0.5s;
  1229. -o-transition:0.5s;
  1230. -webkit-transition:0.5s;
  1231. }
  1232.  
  1233. /** REBLOG BUTTON **/
  1234. /* Reblog Button Mark */
  1235. .reblogged mark{
  1236. padding:0.25em;
  1237. border:1px solid {color:Accent 2};
  1238. border-radius:1em;
  1239. background-color:{color:Posts};
  1240. background:{color:Posts};
  1241. color:{color:Accent 2};
  1242. margin-right:0.5em;
  1243. transition:0.5s;
  1244. -moz-transition:0.5s;
  1245. -o-transition:0.5s;
  1246. -webkit-transition:0.5s;
  1247. }
  1248.  
  1249. /* Reblog Button Mark on Hover */
  1250. .reblogged mark:hover{
  1251. background-color:{color:Accent 2};
  1252. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  1253. color:{color:Posts};
  1254. transition:0.5s;
  1255. -moz-transition:0.5s;
  1256. -o-transition:0.5s;
  1257. -webkit-transition:0.5s;
  1258. }
  1259.  
  1260. /** LIKE BUTTON **/
  1261. /* Like Button */
  1262. .like_button {
  1263. display:inline-block;
  1264. position:relative;
  1265. padding-right:3px;
  1266. margin-top:-0.25em;
  1267. }
  1268.  
  1269. /* Like Button iFrame */
  1270. .like_button iframe {
  1271. height:100%;
  1272. left:0;
  1273. opacity:0;
  1274. position:absolute;
  1275. top:0;
  1276. width:100%;
  1277. z-index:10!important;
  1278. border-bottom:none;
  1279. }
  1280.  
  1281. /* Like Button Before Element */
  1282. .like_button::before{
  1283. content:"\e12b";
  1284. font-family:"saturnicons";
  1285. font-weight:700;
  1286. position:relative;
  1287. font-size:{select:Font Size};
  1288. z-index:10!important;
  1289. margin-right:0.25em;
  1290. }
  1291.  
  1292. /* Like Button After Element */
  1293. .like_button::after {
  1294. content:'like';
  1295. z-index:10!important;
  1296. }
  1297.  
  1298. /* Like Link */
  1299. a.liked{
  1300. border-bottom:none;
  1301. }
  1302.  
  1303. /* Like Mark */
  1304. a.liked mark{
  1305. padding:0.25em;
  1306. border:1px solid {color:Accent 2};
  1307. border-radius:1em;
  1308. background-color:{color:Posts};
  1309. background:{color:Posts};
  1310. color:{color:Accent 2};
  1311. margin-right:0.5em;
  1312. transition:0.5s;
  1313. -moz-transition:0.5s;
  1314. -o-transition:0.5s;
  1315. -webkit-transition:0.5s;
  1316. }
  1317.  
  1318. /* Like Mark on Hover */
  1319. a.liked mark:hover{
  1320. background-color:{color:Accent 2};
  1321. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  1322. color:{color:Posts};
  1323. transition:0.5s;
  1324. -moz-transition:0.5s;
  1325. -o-transition:0.5s;
  1326. -webkit-transition:0.5s;
  1327. }
  1328.  
  1329. /** TAGS **/
  1330. /* Tag Container */
  1331. .tag-c{
  1332. display:flex;
  1333. justify-content:flex-start;
  1334. flex-direction:row;
  1335. flex-wrap:wrap;
  1336. width:100%;
  1337. height:auto;
  1338. }
  1339.  
  1340. /* Tags Mark */
  1341. .tags mark{
  1342. padding:0.25em;
  1343. border:1px solid {color:Accent 2};
  1344. border-radius:1em;
  1345. background-color:{color:Posts};
  1346. background:{color:Posts};
  1347. color:{color:Accent 2};
  1348. margin-right:0.5em;
  1349. transition:0.5s;
  1350. -moz-transition:0.5s;
  1351. -o-transition:0.5s;
  1352. -webkit-transition:0.5s;
  1353. }
  1354.  
  1355. /* Tags Mark on Hover */
  1356. .tags mark:hover{
  1357. background-color:{color:Accent 2};
  1358. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  1359. color:{color:Posts};
  1360. transition:0.5s;
  1361. -moz-transition:0.5s;
  1362. -o-transition:0.5s;
  1363. -webkit-transition:0.5s;
  1364. }
  1365.  
  1366. /* Hides the tumblr app button, by @yeoli-thm */
  1367. .tmblr-iframe--app-cta-button {
  1368. display: none!important;
  1369. }
  1370.  
  1371. /* CUSTOM TUMBLR CONTROLS */
  1372. /* Hides standard tumblr controls */
  1373. body > iframe:first-child {
  1374. display: none !important;
  1375. }
  1376.  
  1377. /* Replacement for tumblr controls */
  1378. /* Container */
  1379. #big-box{
  1380. width:240px;
  1381. margin-left:calc(25% - 120px);
  1382. height:40px;
  1383. position:fixed;
  1384. top:0.5em;
  1385. display:flex;
  1386. align-items:center;
  1387. justify-content:space-evenly;
  1388. }
  1389.  
  1390. /* Links */
  1391. a.tb{
  1392. text-decoration:none;
  1393. border-bottom:none;
  1394. }
  1395.  
  1396. .box{
  1397. width:32px;
  1398. height:32px;
  1399. border-radius:50%;
  1400. background-color:{color:Accent 2};
  1401. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  1402. color:{color:Posts};
  1403. border:1px solid {color:Posts};
  1404. display:flex;
  1405. align-items:center;
  1406. justify-content:center;
  1407. margin-right:0.25em;
  1408. margin-left:0.25em;
  1409. transition:0.5s;
  1410. -moz-transition:0.5s;
  1411. -o-transition:0.5s;
  1412. -webkit-transition:0.5s;
  1413. }
  1414.  
  1415. .box:hover{
  1416. background:{color:Posts};
  1417. color:{color:Accent 1};
  1418. transform:scale(1.1);
  1419. transition:0.5s;
  1420. -moz-transition:0.5s;
  1421. -o-transition:0.5s;
  1422. -webkit-transition:0.5s;
  1423. }
  1424.  
  1425. /** RESPONSIVE DESIGN **/
  1426. @media only screen and (min-width:801px){
  1427. /* Responsive Header */
  1428. #heading{
  1429. display:none;
  1430. }
  1431.  
  1432. /* Responsive Footer */
  1433. #footing{
  1434. display:none;
  1435. }
  1436. }
  1437.  
  1438. /* Tablets and Smartphones */
  1439. @media only screen and (max-width:800px){
  1440. /* Left Side */
  1441. #left{
  1442. display:none;
  1443. }
  1444.  
  1445. /* Responsive Header */
  1446. #heading{
  1447. width:80vw;
  1448. margin-left:calc(10vw - 1em);
  1449. padding:1em;
  1450. margin-top:3em;
  1451. margin-bottom:3em;
  1452. background-color:{color:Accent 2};
  1453. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  1454. color:{color:Posts};
  1455. }
  1456.  
  1457. /* Header Title */
  1458. #h-title{
  1459. font-size:calc(2 * {select:Font Size});
  1460. text-align:center;
  1461. }
  1462.  
  1463. /* Header Description */
  1464. #h-desc{
  1465. text-align:center;
  1466. }
  1467.  
  1468. /* Header Navigation */
  1469. #h-nav{
  1470. width:100%;
  1471. height:auto;
  1472. display:flex;
  1473. align-items:center;
  1474. justify-content:space-evenly;
  1475. flex-wrap:wrap;
  1476. margin-top:0.5em;
  1477. }
  1478.  
  1479. /* Header Navigation Links */
  1480. a.h-links{
  1481. text-decoration:none;
  1482. border-bottom:none;
  1483. }
  1484.  
  1485. .h-link{
  1486. background-color:{color:Posts};
  1487. padding:0.25em 0.5em;
  1488. border:2px solid {color:Accent 1};
  1489. color:{color:Accent 1};
  1490. border-radius:1em;
  1491. margin-right:0.25em;
  1492. margin-left:0.25em;
  1493. transition:0.5s;
  1494. -moz-transition:0.5s;
  1495. -o-transition:0.5s;
  1496. -webkit-transition:0.5s;
  1497. }
  1498.  
  1499. .h-link:hover{
  1500. border:2px solid {color:Accent 2};
  1501. color:{color:Accent 2};
  1502. transform:scale(1.05);
  1503. transition:0.5s;
  1504. -moz-transition:0.5s;
  1505. -o-transition:0.5s;
  1506. -webkit-transition:0.5s;
  1507. }
  1508.  
  1509. /* Right Side */
  1510. #right{
  1511. width:100vw;
  1512. margin-left:0;
  1513. margin-top:0;
  1514. }
  1515.  
  1516. /* Posts */
  1517. article{
  1518. width:80vw;
  1519. margin-left:calc(10vw - 1em);
  1520. }
  1521.  
  1522. /* Audio iframes */
  1523. .audio > iframe{
  1524. width:100%;
  1525. max-width:100%;
  1526. }
  1527.  
  1528. /* Video iframes */
  1529. .video > iframe{
  1530. width:100%;
  1531. max-width:100%;
  1532. }
  1533.  
  1534. /* Responsive Footer */
  1535. #footing{
  1536. width:80vw;
  1537. margin-left:calc(10vw - 1em);
  1538. padding:1em;
  1539. margin-top:3em;
  1540. margin-bottom:3em;
  1541. background-color:{color:Accent 2};
  1542. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  1543. color:{color:Posts};
  1544. display:flex;
  1545. align-items:center;
  1546. justify-content:center;
  1547. flex-direction:column;
  1548. }
  1549.  
  1550. /* Searchbar */
  1551. .sfm input {
  1552. background-color: {color:Posts};
  1553. width:60vw;
  1554. text-align:center;
  1555. font-size: {select:Font Size};
  1556. border: 2px solid {color:Accent 1};
  1557. border-radius:1em;
  1558. text-transform: uppercase;
  1559. margin-top: 0px;
  1560. color: {color:Accent 1};
  1561. letter-spacing: 1px;
  1562. padding: 0.25em 0.5em;
  1563. font-family: {select:Font}, Verdana;
  1564. }
  1565.  
  1566. /* Pagination */
  1567. #f-pagination{
  1568. width:60vw;
  1569. height:auto;
  1570. display:flex;
  1571. align-items:center;
  1572. justify-content:space-evenly;
  1573. margin-top:1em;
  1574. }
  1575.  
  1576. /* Pagination Links */
  1577. a.f-pagi-link{
  1578. text-decoration:none;
  1579. border-bottom:none;
  1580. }
  1581.  
  1582. .f-box{
  1583. width:36px;
  1584. height:36px;
  1585. border-radius:50%;
  1586. background-color:{color:Posts};
  1587. color:{color:Accent 1};
  1588. border:2px solid {color:Accent 1};
  1589. display:flex;
  1590. align-items:center;
  1591. justify-content:center;
  1592. transition:0.5s;
  1593. -moz-transition:0.5s;
  1594. -o-transition:0.5s;
  1595. -webkit-transition:0.5s;
  1596. }
  1597.  
  1598. .f-box:hover{
  1599. color:{color:Accent 2};
  1600. border:2px solid {color:Accent 2};
  1601. transform:scale(1.05);
  1602. transition:0.5s;
  1603. -moz-transition:0.5s;
  1604. -o-transition:0.5s;
  1605. -webkit-transition:0.5s;
  1606. }
  1607.  
  1608. /* Custom Tumblr Controls */
  1609. #big-box{
  1610. display:flex;
  1611. flex-direction:column;
  1612. margin-top:0.5em;
  1613. right:0.5em;
  1614. width:auto;
  1615. height:auto;
  1616. }
  1617.  
  1618. .box{
  1619. margin-bottom:0.25em;
  1620. margin-top:0.25em;
  1621. }
  1622. }
  1623.  
  1624. </style>
  1625. </head>
  1626.  
  1627. <body>
  1628.  
  1629. <!-- LEFT SIDE -->
  1630. <div id="left">
  1631. <!-- Blog Icon -->
  1632. <div id="l-icon">
  1633. <img src="{PortraitURL-128}">
  1634. </div>
  1635. <!-- Blog Title -->
  1636. <div id="l-title">{Title}</div>
  1637. <!-- Blog Description -->
  1638. <div id="l-desc">{Description}</div>
  1639. <!-- Navigation -->
  1640. <div id="l-nav">
  1641. <a class="l-links" href="/" title="index">
  1642. <div class="l-link">Index</div>
  1643. </a>
  1644.  
  1645. <a class="l-links" href="/ask" title="message">
  1646. <div class="l-link">Message</div>
  1647. </a>
  1648.  
  1649. <a class="l-links" href="/archive" title="archive">
  1650. <div class="l-link">Archive</div>
  1651. </a>
  1652.  
  1653. <a class="l-links" href="{text:URL Custom Link 1}" title="{text:Custom Link 1}">
  1654. <div class="l-link">{text:Custom Link 1}</div>
  1655. </a>
  1656.  
  1657. <a class="l-links" href="{text:URL Custom Link 2}" title="{text:Custom Link 2}">
  1658. <div class="l-link">{text:Custom Link 2}</div>
  1659. </a>
  1660.  
  1661. <a class="l-links" href="{text:URL Custom Link 3}" title="{text:Custom Link 3}">
  1662. <div class="l-link">{text:Custom Link 3}</div>
  1663. </a>
  1664.  
  1665. <a class="l-links" href="https://silbrigthemes.tumblr.com/" title="theme by @silbrigthemes">
  1666. <div class="l-link">Credit</div>
  1667. </a>
  1668.  
  1669. <!-- SEARCHBAR -->
  1670. <!-- Searchbar Overlay -->
  1671. <div id="myOverlay" class="overlay">
  1672. <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  1673. <div class="overlay-content">
  1674. <form action="/search" method="get">
  1675. <!--<input type="text" placeholder="Search.." name="search">-->
  1676. <input type="text" placeholder="Search …" name="q" value="{SearchQuery}"/>
  1677. <button type="submit">
  1678. <span class="sf sf-search-o"></span>
  1679. </button>
  1680. </form>
  1681. </div>
  1682. </div>
  1683.  
  1684. <!-- Searchbar Button -->
  1685. <button class="openBtn" onclick="openSearch()">
  1686. Open Search
  1687. </button>
  1688.  
  1689. </div>
  1690.  
  1691. <!-- PAGINATION -->
  1692. <div id="pagi-box">
  1693. {block:Pagination}
  1694. <!-- Previous Page -->
  1695. {block:PreviousPage}
  1696. <a class="pagi-link" href="{PreviousPage}" title="previous">
  1697. <div class="box">
  1698. <span class="sf sf-chevron-left"></span>
  1699. </div>
  1700. </a>
  1701. {/block:PreviousPage}
  1702.  
  1703. <!-- Jump Pagination -->
  1704. {block:JumpPagination length="3"}
  1705. {block:CurrentPage}
  1706. <span class="current_page">
  1707. <div class="box">{PageNumber}</div>
  1708. </span>
  1709. {/block:CurrentPage}
  1710. {block:JumpPage}
  1711. <a class="jump_page pagi-link" href="{URL}" title="Page {PageNumber}">
  1712. <div class="box">{PageNumber}</div>
  1713. </a>
  1714. {/block:JumpPage}
  1715. {/block:JumpPagination}
  1716.  
  1717. <!-- Next Page -->
  1718. {block:NextPage}
  1719. <a class="pagi-link" href="{NextPage}" title="next">
  1720. <div class="box">
  1721. <span class="sf sf-chevron-right"></span>
  1722. </div>
  1723. </a>
  1724. {/block:NextPage}
  1725. {/block:Pagination}
  1726. </div>
  1727. </div>
  1728.  
  1729. <!-- RIGHT SIDE -->
  1730. <div id="right">
  1731.  
  1732. <!-- RESPONSIVE HEADER -->
  1733. <div id="heading">
  1734. <!-- Blog Title -->
  1735. <div id="h-title">{Title}</div>
  1736. <!-- Blog Description -->
  1737. <div id="h-desc">{Description}</div>
  1738. <!-- Navigation -->
  1739. <div id="h-nav">
  1740. <a class="l-links" href="/" title="index">
  1741. <div class="h-link">Index</div>
  1742. </a>
  1743.  
  1744. <a class="h-links" href="/ask" title="message">
  1745. <div class="h-link">Message</div>
  1746. </a>
  1747.  
  1748. <a class="h-links" href="/archive" title="archive">
  1749. <div class="h-link">Archive</div>
  1750. </a>
  1751.  
  1752. <a class="h-links" href="{text:URL Custom Link 1}" title="{text:Custom Link 1}">
  1753. <div class="h-link">{text:Custom Link 1}</div>
  1754. </a>
  1755.  
  1756. <a class="h-links" href="{text:URL Custom Link 2}" title="{text:Custom Link 2}">
  1757. <div class="h-link">{text:Custom Link 2}</div>
  1758. </a>
  1759.  
  1760. <a class="h-links" href="{text:URL Custom Link 3}" title="{text:Custom Link 3}">
  1761. <div class="h-link">{text:Custom Link 3}</div>
  1762. </a>
  1763.  
  1764. <a class="h-links" href="https://silbrigthemes.tumblr.com/" title="theme by @silbrigthemes">
  1765. <div class="h-link">Credit</div>
  1766. </a>
  1767. </div>
  1768. </div>
  1769.  
  1770. <!-- POSTS -->
  1771. {block:Posts}
  1772. <article>
  1773.  
  1774. <!-- TEXT POSTS -->
  1775. {block:Text}
  1776. {block:Title}
  1777. <div class="title"><h2><mark>{Title}</mark></h2></div>
  1778. {/block:Title}
  1779. {block:Body}
  1780. {block:NotReblog}
  1781. <div class="text">{Body}</div>
  1782. {/block:NotReblog}
  1783. {block:RebloggedFrom}
  1784. {block:Reblogs}
  1785. <div class="username">
  1786. {block:HasAvatar}
  1787. {block:HasPermalink}
  1788. <a href="{Permalink}" target="_blank">
  1789. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1790. {/block:HasPermalink}
  1791. {block:HasNoPermalink}
  1792. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1793. {/block:HasNoPermalink}
  1794. {/block:HasAvatar}
  1795. {block:HasPermalink}
  1796. <div class="user">
  1797. <a target="_blank" class="user" href="{Permalink}">
  1798. <mark><span class="sf sf-user-o"></span> {Username}</mark>
  1799. </a>
  1800. </div>
  1801. {/block:HasPermalink}
  1802. {block:HasNoPermalink}
  1803. <span class="user"><mark><span class="sf sf-user-o"></span> {Username}</mark></span>
  1804. {/block:HasNoPermalink}
  1805. </div>
  1806. <div class="text">{Body}</div>
  1807. {/block:Reblogs}
  1808. {/block:RebloggedFrom}
  1809.  
  1810.  
  1811. {/block:Body}
  1812. {/block:Text}
  1813.  
  1814. <!-- QUESTION POSTS -->
  1815. {block:Answer}
  1816. <div class="question">
  1817. <div class="question-username">
  1818. <img src="{AskerPortraitURL-96}" alt="user icon">
  1819. {Asker}
  1820. </div>
  1821. {Question}
  1822. </div>
  1823.  
  1824. {block:Answerer}
  1825. <div class="answer">
  1826. <div class="answer-username">
  1827. <img src="{AnswererPortraitURL-96}" alt="user icon">
  1828. {Answerer}
  1829. </div>
  1830. {Answer}
  1831. </div>
  1832. {/block:Answerer}
  1833. {block:NotReblog}
  1834. <div>{Replies}</div>
  1835. {/block:NotReblog}
  1836. {block:RebloggedFrom}
  1837. {block:Reblogs}
  1838. <div class="username">
  1839. {block:HasAvatar}
  1840. {block:HasPermalink}
  1841. <a href="{Permalink}" target="_blank">
  1842. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1843. {/block:HasPermalink}
  1844. {block:HasNoPermalink}
  1845. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1846. {/block:HasNoPermalink}
  1847. {/block:HasAvatar}
  1848. {block:HasPermalink}
  1849. <div class="user">
  1850. <a target="_blank" class="user" href="{Permalink}">
  1851. <mark><span class="sf sf-user-o"></span> {Username}</mark>
  1852. </a>
  1853. </div>
  1854. {/block:HasPermalink}
  1855. {block:HasNoPermalink}
  1856. <span class="user"><mark><span class="sf sf-user-o"></span> {Username}</mark></span>
  1857. {/block:HasNoPermalink}
  1858. </div>
  1859. <div class="text">{Body}</div>
  1860. {/block:Reblogs}
  1861. {/block:RebloggedFrom}
  1862. {/block:Answer}
  1863.  
  1864.  
  1865. <!-- QUOTE POSTS -->
  1866. {block:Quote}
  1867. <div class="quoted">
  1868. {Quote}
  1869. </div>
  1870. {block:Source}
  1871. <div class="quote-source">
  1872. – {Source}
  1873. </div>
  1874. {/block:Source}
  1875. {/block:Quote}
  1876.  
  1877. <!-- LINK POSTS -->
  1878. {block:Link}
  1879. <div class="link-posts">
  1880. <a href="{URL}">
  1881. <div class="link-cont">
  1882. {block:Thumbnail}
  1883. <div class="link-image">
  1884. <img src="{Thumbnail-HighRes}">
  1885. </div>
  1886. {/block:Thumbnail}
  1887. <div class="link-title {block:Thumbnail}thumbtitle{/block:Thumbnail}">
  1888. {Name}
  1889. </div>
  1890. </div>
  1891. {block:Description}
  1892. <div class="link-desc">
  1893. {Description}
  1894. </div>
  1895. {/block:Description}
  1896. </a>
  1897. </div>
  1898. {block:Description}
  1899. {block:NotReblog}
  1900. {Description}
  1901. {/block:NotReblog}
  1902. {block:RebloggedFrom}
  1903. {block:Reblogs}
  1904. {block:HasAvatar}
  1905. {block:HasPermalink}
  1906. <a href="{Permalink}" target="_blank">
  1907. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1908. {/block:HasPermalink}
  1909. {block:HasNoPermalink}
  1910. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1911. {/block:HasNoPermalink}
  1912. {/block:HasAvatar}
  1913. {block:HasPermalink}
  1914. <div class="user">
  1915. <a target="_blank" class="user" href="{Permalink}">
  1916. <mark><span class="sf sf-user-o"></span> {Username}</mark>
  1917. </a>
  1918. </div>
  1919. {/block:HasPermalink}
  1920. {block:HasNoPermalink}
  1921. <span class="user"> <mark><span class="sf sf-user-o"></span> {Username}</mark> </span>
  1922. {/block:HasNoPermalink}
  1923. <div class="text">{Body}</div>
  1924. {/block:Reblogs}
  1925. {/block:RebloggedFrom}
  1926. {/block:Description}
  1927. {/block:Link}
  1928.  
  1929. <!-- CHAT POSTS -->
  1930. <div class="chatterbox">
  1931. {block:Chat}
  1932. <div class="chat clear">
  1933. {block:Title}
  1934. <div class="title"><h2><mark>{Title}</mark></h2></div>
  1935. {/block:Title}
  1936. {block:Lines}
  1937. {block:Label}
  1938. <span class="label_{alt}">
  1939. {Label}
  1940. </span>
  1941. {/block:Label}
  1942. <div class="line_{alt}">
  1943. {Line}<br>
  1944. </div>
  1945. {/block:Lines}
  1946. </div>
  1947. {/block:Chat}
  1948. </div>
  1949.  
  1950. <!-- PHOTO POSTS -->
  1951. {block:Photo}
  1952. {LinkOpenTag}
  1953. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1954. <div class="photo">
  1955. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
  1956. </div>
  1957. </a>
  1958. {LinkCloseTag}
  1959. {block:IfShowCaptions}
  1960. {block:Caption}
  1961. {block:NotReblog}{Caption}{/block:NotReblog}
  1962. {block:RebloggedFrom}
  1963. {block:Reblogs}
  1964. <div class="username">
  1965. {block:HasAvatar}
  1966. {block:HasPermalink}
  1967. <a href="{Permalink}" target="_blank">
  1968. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1969. {/block:HasPermalink}
  1970. {block:HasNoPermalink}
  1971. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1972. {/block:HasNoPermalink}
  1973. {/block:HasAvatar}
  1974. {block:HasPermalink}
  1975. <div class="user">
  1976. <a target="_blank" class="user" href="{Permalink}">
  1977. <mark><span class="sf sf-user-o"></span> {Username}</mark>
  1978. </a>
  1979. </div>
  1980. {/block:HasPermalink}
  1981. {block:HasNoPermalink}
  1982. <span class="user"><mark><span class="sf sf-user-o"></span> {Username}</mark></span>
  1983. {/block:HasNoPermalink}
  1984. </div>
  1985. <div class="text">{Body}</div>
  1986. {/block:Reblogs}
  1987. {/block:RebloggedFrom}
  1988. {/block:Caption}
  1989. {/block:IfShowCaptions}
  1990. {/block:Photo}
  1991.  
  1992.  
  1993. <!-- PANORAMA POSTS -->
  1994. {block:Panorama}
  1995. {LinkOpenTag}
  1996. <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">
  1997. <div class="panorama">
  1998. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
  1999. </div>
  2000. </a>
  2001. {LinkCloseTag}
  2002. {block:IfShowCaptions}
  2003. {block:Caption}
  2004. {block:NotReblog}
  2005. {Caption}
  2006. {/block:NotReblog}
  2007. {block:RebloggedFrom}
  2008. {block:Reblogs}
  2009. <div class="username">
  2010. {block:HasAvatar}
  2011. {block:HasPermalink}
  2012. <a href="{Permalink}" target="_blank" title="permalink page">
  2013. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  2014. {/block:HasPermalink}
  2015. {block:HasNoPermalink}
  2016. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  2017. {/block:HasNoPermalink}
  2018. {/block:HasAvatar}
  2019. {block:HasPermalink}
  2020. <div class="user">
  2021. <a target="_blank" class="user" href="{Permalink}" title="permalink page">
  2022. <mark><span class="sf sf-user-o"></span> {Username}</mark>
  2023. </a>
  2024. </div>
  2025. {/block:HasPermalink}
  2026. {block:HasNoPermalink}
  2027. <span class="user"><mark><span class="sf sf-user-o"></span> {Username}</mark></span>
  2028. {/block:HasNoPermalink}
  2029. </div>
  2030. <div class="text">{Body}</div>
  2031. {/block:Reblogs}
  2032. {/block:RebloggedFrom}
  2033. {/block:Caption}
  2034. {/block:IfShowCaptions}
  2035. {/block:Panorama}
  2036.  
  2037.  
  2038.  
  2039. <!-- PHOTOSETS -->
  2040. {block:Photoset}
  2041. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  2042. {block:Photos}
  2043. <div class="photo-data">
  2044. <div class="pxu-photo">
  2045. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  2046. </div>
  2047. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}">
  2048. </a>
  2049. </div>
  2050. {/block:Photos}
  2051. </div>
  2052. {block:Caption}
  2053. {block:NotReblog}
  2054. {Caption}
  2055. {/block:NotReblog}
  2056. {block:RebloggedFrom}
  2057. {block:Reblogs}
  2058. <div class="username">
  2059. {block:HasAvatar}
  2060. {block:HasPermalink}
  2061. <a href="{Permalink}" target="_blank">
  2062. <img class="cimg" src="{PortraitURL-64}"></a>
  2063. {/block:HasPermalink}
  2064. {block:HasNoPermalink}
  2065. <img class="cimg" src="{PortraitURL-64}">
  2066. {/block:HasNoPermalink}
  2067. {/block:HasAvatar}
  2068. {block:HasPermalink}
  2069. <div class="user">
  2070. <a target="_blank" class="user" href="{Permalink}">
  2071. <mark><span class="sf sf-user-o"></span> {Username}</mark>
  2072. </a>
  2073. </div>
  2074. {/block:HasPermalink}
  2075. {block:HasNoPermalink}
  2076. <span class="user"><mark><span class="sf sf-user-o"></span> {Username}</mark></span>
  2077. {/block:HasNoPermalink}
  2078. </div>
  2079. <div class="text">{Body}</div>
  2080. {/block:Reblogs}
  2081. {/block:RebloggedFrom}
  2082. {/block:Caption}
  2083. {/block:Photoset}
  2084.  
  2085. <!-- AUDIO POSTS -->
  2086. {block:Audio}
  2087. {block:AudioEmbed}
  2088. <div class="audio">
  2089. {AudioEmbed}
  2090. </div>
  2091. {/block:AudioEmbed}
  2092. {block:Caption}
  2093. {block:NotReblog}
  2094. {Caption}
  2095. {/block:NotReblog}
  2096. {block:RebloggedFrom}
  2097. {block:Reblogs}
  2098. <div class="username">
  2099. {block:HasAvatar}
  2100. {block:HasPermalink}
  2101. <a href="{Permalink}" target="_blank">
  2102. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  2103. {/block:HasPermalink}
  2104. {block:HasNoPermalink}
  2105. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  2106. {/block:HasNoPermalink}
  2107. {/block:HasAvatar}
  2108. {block:HasPermalink}
  2109. <div class="user">
  2110. <a target="_blank" class="user" href="{Permalink}">
  2111. <mark><span class="sf sf-user-o"></span> {Username}</mark>
  2112. </a>
  2113. </div>
  2114. {/block:HasPermalink}
  2115. {block:HasNoPermalink}
  2116. <span class="user"><mark><span class="sf sf-user-o"></span> {Username}</mark></span>
  2117. {/block:HasNoPermalink}
  2118. </div>
  2119. <div class="text">{Body}</div>
  2120. {/block:Reblogs}
  2121. {/block:RebloggedFrom}
  2122. {/block:Caption}
  2123. {/block:Audio}
  2124.  
  2125. <!-- VIDEO POSTS -->
  2126. {block:Video}
  2127. <div class="video">
  2128. {Video-500}
  2129. </div>
  2130. {block:Caption}
  2131. {block:NotReblog}
  2132. {Caption}
  2133. {/block:NotReblog}
  2134. {block:RebloggedFrom}
  2135. {block:Reblogs}
  2136. <div class="username">
  2137. {block:HasAvatar}
  2138. {block:HasPermalink}
  2139. <a href="{Permalink}" target="_blank">
  2140. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  2141. {/block:HasPermalink}
  2142. {block:HasNoPermalink}
  2143. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  2144. {/block:HasNoPermalink}
  2145. {/block:HasAvatar}
  2146. {block:HasPermalink}
  2147. <div class="user">
  2148. <a target="_blank" class="user" href="{Permalink}">
  2149. <mark><span class="sf sf-user-o"></span> {Username}</mark>
  2150. </a>
  2151. </div>
  2152. {/block:HasPermalink}
  2153. {block:HasNoPermalink}
  2154. <span class="user"><mark><span class="sf sf-user-o"></span> {Username}</mark></span>
  2155. {/block:HasNoPermalink}
  2156. </div>
  2157. <div class="text">{Body}</div>
  2158. {/block:Reblogs}
  2159. {/block:RebloggedFrom}
  2160. {/block:Caption}
  2161. {/block:Video}
  2162.  
  2163. <!-- POST FOOTER -->
  2164. <div class="post-footer clear">
  2165. <div class="info clear">
  2166.  
  2167. <!-- TIME STAMP -->
  2168. {block:Date}
  2169. <div class="time">
  2170. <a class="specs" href="{Permalink}" title="{Month} {DayOfMonth}, {Year}">
  2171. <mark><span class="sf sf-clock-3-o" aria-hidden="true"></span> {TimeAgo}</mark></a>
  2172. </div>
  2173. {/block:Date}
  2174.  
  2175. <!-- NOTE COUNT -->
  2176. {block:NoteCount}
  2177. <div class="notecount">
  2178. <a class="specs" href="{Permalink}" title="{NoteCountWithLabel}">
  2179. <mark><span class="sf sf-more-o" aria-hidden="true"> {NoteCountWithLabel}</mark></a>
  2180. </div>
  2181.  
  2182. {/block:NoteCount}
  2183.  
  2184. <!-- VIA -->
  2185. {block:RebloggedFrom}
  2186. <div class="via">
  2187. <a class="specs" href="{ReblogParentURL}" title="via">
  2188. <mark><span class="sf sf-refresh-o" aria-hidden="true"> via</mark>
  2189. </a>
  2190. </div>
  2191.  
  2192. {/block:RebloggedFrom}
  2193.  
  2194. <!-- POST SOURCE -->
  2195. {block:ContentSource}
  2196. <div class="source">
  2197. <a class="specs" href="{SourceURL}" title="source">
  2198. <mark><span class="sf sf-creative-commons-o" aria-hidden="true"> source</mark>
  2199. </a>
  2200. </div>
  2201.  
  2202. {/block:ContentSource}
  2203.  
  2204. <!-- REBLOG BUTTON -->
  2205. <div class="reblogged">
  2206. <a class="specs" href="{ReblogURL}" title="reblog this post">
  2207. <mark><span class="sf sf-reblog" aria-hidden="true"> reblog</mark>
  2208. </a>
  2209. </div>
  2210.  
  2211. <!-- LIKE BUTTON -->
  2212. <a class="liked" href="#" title="like this post">
  2213. <mark>{LikeButton}</mark>
  2214. </a>
  2215.  
  2216. </div><!-- /info -->
  2217.  
  2218. <!-- TAGS -->
  2219. {block:HasTags}
  2220. <div class="tags">
  2221. {block:Tags}
  2222. <a class="specs" href="{TagURL}" title="tagged as: {Tag}">
  2223. <mark>
  2224. <span class="sf sf-tags-o" aria-hidden="true"> {Tag}
  2225. </mark>
  2226. </a>
  2227. {/block:Tags}
  2228. </div><!-- /tags -->
  2229. {/block:HasTags}
  2230. </div><!-- /post footer -->
  2231.  
  2232. {block:PermalinkPage}
  2233. {block:NoteCount}
  2234. {block:PostNotes}
  2235. {PostNotes}
  2236. {/block:PostNotes}
  2237. {/block:NoteCount}
  2238. {/block:PermalinkPage}
  2239. </article>
  2240. {/block:Posts}
  2241.  
  2242. <!-- RESPONSIVE FOOTER -->
  2243. <div id="footing">
  2244. <!-- Searchbar -->
  2245. <form action="/search" method="get" class="sfm" name="theform">
  2246. <input type="text" name="q" value="SEARCH"/>
  2247. </form>
  2248.  
  2249. <div id="f-pagination">
  2250. {block:Pagination}
  2251. <!-- Previous Page -->
  2252. {block:PreviousPage}
  2253. <a class="f-pagi-link" href="{PreviousPage}" title="previous">
  2254. <div class="f-box">
  2255. <span class="sf sf-chevron-left"></span>
  2256. </div>
  2257. </a>
  2258. {/block:PreviousPage}
  2259.  
  2260. <!-- Jump Pagination -->
  2261. {block:JumpPagination length="3"}
  2262. {block:CurrentPage}
  2263. <span class="current_page">
  2264. <div class="f-box">{PageNumber}</div>
  2265. </span>
  2266. {/block:CurrentPage}
  2267. {block:JumpPage}
  2268. <a class="jump_page f-pagi-link" href="{URL}" title="Page {PageNumber}">
  2269. <div class="f-box">{PageNumber}</div>
  2270. </a>
  2271. {/block:JumpPage}
  2272. {/block:JumpPagination}
  2273.  
  2274. <!-- Next Page -->
  2275. {block:NextPage}
  2276. <a class="f-pagi-link" href="{NextPage}" title="next">
  2277. <div class="f-box">
  2278. <span class="sf sf-chevron-right"></span>
  2279. </div>
  2280. </a>
  2281. {/block:NextPage}
  2282. {/block:Pagination}
  2283. </div>
  2284. </div>
  2285. </div>
  2286.  
  2287. <!-- CUSTOM TUMBLR CONTROLS -->
  2288. <div id="big-box">
  2289. <a class="tb" href="https://www.tumblr.com/dashboard" title="dashboard">
  2290. <div class="box"><span class="sf sf-home-o"></span></div>
  2291. </a>
  2292.  
  2293. <a class="tb" href="https://www.tumblr.com/message/{Name}" title="message">
  2294. <div class="box"><span class="sf sf-chat-o"></span></div>
  2295. </a>
  2296.  
  2297. <a class="tb" href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize">
  2298. <div class="box"><span class="sf sf-palette-o"></span></div>
  2299. </a>
  2300.  
  2301. <a class="tb" href="https://www.tumblr.com/settings/blog/{Name}" title="settings">
  2302. <div class="box"><span class="sf sf-cog-o"></span></div>
  2303. </a>
  2304.  
  2305. <a class="tb" href="https://www.tumblr.com/follow/{Name}" title="follow">
  2306. <div class="box"><span class="sf sf-plus-2-o"></span></div>
  2307. </a>
  2308. </div>
  2309.  
  2310. <!-- SCRIPTS -->
  2311. <!-- PXU photosets script. -->
  2312. <script>
  2313. $(document).ready(function(){
  2314. $('.photo-slideshow').pxuPhotoset({
  2315. lightbox: true,
  2316. rounded: false,
  2317. gutter: '{text:Photoset Gutter}px',
  2318. borderRadius: '0px',
  2319. photoset: '.photo-slideshow',
  2320. photoWrap: '.photo-data',
  2321. photo: '.pxu-photo'
  2322. });
  2323. });
  2324. </script>
  2325.  
  2326. <!-- Full page searchbox script. -->
  2327. <script>
  2328. function openSearch() {
  2329. document.getElementById("myOverlay").style.display = "block";
  2330. }
  2331.  
  2332. function closeSearch() {
  2333. document.getElementById("myOverlay").style.display = "none";
  2334. }
  2335. </script>
  2336.  
  2337. </body>
  2338. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!