silbrigthemes

Romantisch (Theme #14)

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