API tools faq
paste
Advertisement
silbrigthemes

Grundlagen (Theme #9 | without JS)

silbrigthemes
Aug 20th, 2018 (edited)
683
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 67.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. GRUNDLAGEN
  7. Theme #9 by silbrigthemes
  8.  
  9. Theme for the #NoJSChallenge
  10.  
  11. Rules:
  12.  
  13. 1) Do not claim as you own.
  14. 2) Do not delete or alter the credit.
  15. 3) Do not steal (parts of) the code.
  16. 4) Do not use as a base code.
  17. 5) Do not edit beyond recognition.
  18.  
  19. If you need any help with the customization or encounter a problem, feel free to send me a message.
  20.  
  21. Have fun!
  22.  
  23. -->
  24. <head>
  25.  
  26. <meta charset="utf-16">
  27. <title>{Title}</title>
  28. {block:Description}
  29. <meta name="description" content="{MetaDescription}" />
  30. {/block:Description}
  31. <link rel="shortcut icon" href="{Favicon}"/>
  32. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  33. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  34.  
  35. <!-- Necessary for the theme to be responsive. -->
  36. <meta name="viewport" content="width=device-width, initial-scale=1">
  37.  
  38. <!-- "Honeybee" icon font, by @themehive. -->
  39. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  40.  
  41. <!-- Changes the toolbar color on mobile. -->
  42. <meta name="theme-color" content="{color:Text}"/>
  43.  
  44. <!-- Other fonts. -->
  45. <!-- Roboto Mono -->
  46. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  47. <!-- Cormorant Garamond -->
  48. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
  49. <!-- Dancing Script -->
  50. <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
  51.  
  52. <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">
  53. <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">
  54. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  55.  
  56.  
  57. <meta name="text:Custom URL 1" content="/"/>
  58. <meta name="text:Custom Link 1" content="Custom 1"/>
  59. <meta name="text:Custom URL 2" content="/"/>
  60. <meta name="text:Custom Link 2" content="Custom 2"/>
  61. <meta name="text:Custom URL 3" content="/"/>
  62. <meta name="text:Custom Link 3" content="Custom 3"/>
  63. <meta name="text:Custom URL 4" content="/"/>
  64. <meta name="text:Custom Link 4" content="Custom 4"/>
  65. <meta name="text:Custom URL 5" content="/"/>
  66. <meta name="text:Custom Link 5" content="Custom 5"/>
  67.  
  68. <meta name="text:Tag 1" content="tag"/>
  69. <meta name="text:Tagged 1" content="Tag Title"/>
  70. <meta name="text:Tag 2" content="tag"/>
  71. <meta name="text:Tagged 2" content="Tag Title"/>
  72. <meta name="text:Tag 3" content="tag"/>
  73. <meta name="text:Tagged 3" content="Tag Title"/>
  74. <meta name="text:Tag 4" content="tag"/>
  75. <meta name="text:Tagged 4" content="Tag Title"/>
  76. <meta name="text:Tag 5" content="tag"/>
  77. <meta name="text:Tagged 5" content="Tag Title"/>
  78.  
  79. <meta name="if:Custom Link 1" content="1"/>
  80. <meta name="if:Custom Link 2" content="1"/>
  81. <meta name="if:Custom Link 3" content="1"/>
  82. <meta name="if:Custom Link 4" content="1"/>
  83. <meta name="if:Custom Link 5" content="1"/>
  84.  
  85. <meta name="if:Round Avatar" content="1"/>
  86.  
  87. <meta name="image:Background" content=""/>
  88.  
  89. <meta name="select:Font" content="Open Sans" title="Open Sans"/>
  90. <meta name="select:Font" content="Roboto" title="Roboto"/>
  91. <meta name="select:Font" content="Source Sans Pro" title="Source Sans Pro"/>
  92.  
  93. <meta name="select:Font Size" content="1em" title="16px"/>
  94. <meta name="select:Font Size" content="14px" title="14px"/>
  95. <meta name="select:Font Size" content="12px" title="12px"/>
  96.  
  97. <meta name="select:Post Width" content="500px" title="500px"/>
  98. <meta name="select:Post Width" content="450px" title="450px"/>
  99. <meta name="select:Post Width" content="400px" title="400px"/>
  100. <meta name="select:Post Width" content="350px" title="350px"/>
  101. <meta name="select:Post Width" content="300px" title="300px"/>
  102.  
  103. <meta name="select:Ordered List" content="decimal" title="decimal"/>
  104. <meta name="select:Ordered List" content="lower-greek" title="lower greek"/>
  105. <meta name="select:Ordered List" content="lower-latin" title="lower latin"/>
  106. <meta name="select:Ordered List" content="upper-roman" title="upper roman"/>
  107.  
  108. <meta name="text:Unordered List" content="e203"/>
  109.  
  110. <meta name="color:Background" content="#f0f0f1"/>
  111. <meta name="color:Bold" content="#55626e"/>
  112. <meta name="color:Chat" content="#e4e8f5"/>
  113. <meta name="color:Italic" content="#111316"/>
  114. <meta name="color:Links" content="#013e74"/>
  115. <meta name="color:Preformatted" content="#f7f7f8"/>
  116. <meta name="color:Posts" content="#fff"/>
  117. <meta name="color:Tags" content="#bec8e8"/>
  118. <meta name="color:Tags Hover" content="#cfd1d7"/>
  119. <meta name="color:Text" content="#333b42"/>
  120.  
  121.  
  122. <style>
  123.  
  124. body{
  125. margin:0;
  126. top:0;
  127. left:0;
  128. background-color:{color:Background};
  129. background-image:url("{image:Background}");
  130. background-size:cover;
  131. background-attachment:fixed;
  132. background-repeat:no-repeat;
  133. font-size:{select:Font Size};
  134. color:{color:Text};
  135. font-family:{select:Font}, Verdana;
  136. overflow-x:hidden;
  137. }
  138.  
  139. /* Custom Text Selection */
  140. ::selection{
  141. background-color:{color:Background};
  142. color:{color:Text};
  143. text-decoration:none;
  144. border-bottom:none;
  145. text-shadow:none;
  146. }
  147.  
  148. ::-moz-selection{
  149. background-color:{color:Background};
  150. color:{color:Text};
  151. text-decoration:none;
  152. border-bottom:none;
  153. text-shadow:none;
  154. }
  155.  
  156. ::-o-selection{
  157. background-color:{color:Background};
  158. color:{color:Text};
  159. text-decoration:none;
  160. border-bottom:none;
  161. text-shadow:none;
  162. }
  163.  
  164. ::-webkit-selection{
  165. background-color:{color:Background};
  166. color:{color:Text};
  167. text-decoration:none;
  168. border-bottom:none;
  169. text-shadow:none;
  170. }
  171.  
  172. /* Custom Scrollbar */
  173. ::-webkit-scrollbar{
  174. width:10px;
  175. background-color:{color:Background};
  176. border:4px solid {color:Posts};
  177. }
  178.  
  179. ::-webkit-scrollbar-thumb{
  180. width:10px;
  181. background-color:{color:Text};
  182. border:4px solid {color:Posts};
  183. }
  184.  
  185. /* Links */
  186. a{
  187. color:{color:Links};
  188. text-decoration:none;
  189. border-bottom:2px solid {color:Links};
  190. transition:0.5s;
  191. -moz-transition:0.5s;
  192. -o-transition:0.5s;
  193. -webkit-transition:0.5s;
  194. }
  195.  
  196. a:hover{
  197. cursor:pointer;
  198. border-bottom:2px solid {color:Text};
  199. transition:0.5s;
  200. -moz-transition:0.5s;
  201. -o-transition:0.5s;
  202. -webkit-transition:0.5s;
  203. }
  204.  
  205. /* Bold Text */
  206. b, strong{
  207. color:{color:Bold};
  208. font-weight:700;
  209. }
  210.  
  211. /* Italic Text */
  212. i, em{
  213. color:black;
  214. font-weight:{color:Italic};
  215. font-style:italic;
  216. }
  217.  
  218. /* Underlined Text */
  219. u{
  220. text-decoration:none;
  221. border-bottom:2px solid {color:Text};
  222. }
  223.  
  224. /* Line Break */
  225. hr{
  226. width:80%;
  227. height:4px;
  228. border:none;
  229. background-color:{color:Background};
  230. }
  231.  
  232. /* Marked Text */
  233. mark{
  234. background-color:{color:Tags Hover};
  235. padding:0 0.25em;
  236. }
  237.  
  238. /* Small Text */
  239. small{
  240. font-size:calc({select:Font Size} - 2px);
  241. }
  242.  
  243. /* Empty Paragraphs */
  244. p:empty{
  245. display:none;
  246. }
  247.  
  248. /* Preformatted Text */
  249. pre{
  250. font-size:calc({select:Font Size} - 2px);
  251. font-family:"Roboto Mono";
  252. padding-left:0.25em;
  253. padding-top:0.125em;
  254. padding-right:0.25em;
  255. padding-bottom:0.125em;
  256. background-color:{color:Preformatted};
  257. word-wrap:break-all;
  258. white-space:pre-wrap;
  259. }
  260.  
  261. /* Lists */
  262. /* Unordered List */
  263. ul{
  264. list-style-type:none;
  265. }
  266.  
  267. ul li:before{
  268. content:"\{text:Unordered List}";
  269. font-family:"honeybee";
  270. font-weight:300;
  271. color:{color:Bold};
  272. position:relative;
  273. font-size:{select:Font Size};
  274. z-index:10!important;
  275. margin-right:0.25em;
  276. margin-left:-1.5em;
  277. }
  278.  
  279. /* Ordered List */
  280. ol{
  281. list-style-type:{select:Ordered List};
  282. }
  283.  
  284. /* Headings */
  285. /* Post Title */
  286. .title{
  287. font-size:calc({select:Font Size} * 3);
  288. font-weight:300;
  289. padding-bottom:4px;
  290. width:80%;
  291. margin-left:10%;
  292. text-align:center;
  293. border-bottom:4px solid {color:Text};
  294. margin-bottom:0.25em;
  295. }
  296.  
  297. /* Primary Heading */
  298. h1{
  299. font-size:calc({select:Font Size} * 1.5);
  300. font-weight:300;
  301. }
  302.  
  303. /* Secondary Heading */
  304. h2{
  305. font-size:calc({select:Font Size} * 1.25);
  306. font-weight:300;
  307. }
  308.  
  309. /* COLORED TEXT */
  310. /* Red Text */
  311. .npf_color_joey {
  312. color:#f2031c;
  313. }
  314.  
  315. /* Orange Text */
  316. .npf_color_monica {
  317. color:#f27603;
  318. }
  319.  
  320. /* Yellow Text */
  321. .npf_color_phoebe {
  322. color:#f2c603;
  323. }
  324.  
  325. /* Green Text */
  326. .npf_color_ross {
  327. color:#03cb43;
  328. }
  329.  
  330. /* Blue Text */
  331. .npf_color_rachel {
  332. color:#0382f2;
  333. }
  334.  
  335. /* Purple Text */
  336. .npf_color_chandler {
  337. color:#8803f2;
  338. }
  339.  
  340. /* Pink Text */
  341. .npf_color_niles {
  342. color: #f203d0;
  343. }
  344.  
  345. /** SPECIAL FONTS **/
  346. /* Quirky Font */
  347. p.npf_quirky{
  348. font-family: 'Dancing Script', cursive;
  349. font-size:calc({select:Font Size} * 1.5);
  350. }
  351.  
  352. /* Chat Font */
  353. p.npf_chat{
  354. font-family:Courier;
  355. }
  356.  
  357. /* Quote Font */
  358. p.npf_quote{
  359. font-family:"Cormorant Garamond", "Palatino";
  360. font-size:calc({select:Font Size} * 1.5);
  361. }
  362.  
  363. header{
  364. width:100vw;
  365. height:10vh;
  366. top:0;
  367. left:0;
  368. position:fixed;
  369. background-color:{color:Posts};
  370. display:flex;
  371. align-items:center;
  372. justify-content:space-between;
  373. z-index:100!important;
  374. }
  375.  
  376. #h-title{
  377. font-size:calc({select:Font Size} * 2);
  378. font-weight:{TitleFontWeight};
  379. font-family:{TitleFont}, Verdana;
  380. }
  381.  
  382. #h-icon{
  383. width:240px;
  384. margin-left:3em;
  385. }
  386.  
  387. #h-icon img{
  388. width:48px;
  389. height:48px;
  390. {block:IfRoundAvatar}
  391. border-radius:50%;
  392. {/block:IfRoundAvatar}
  393. }
  394.  
  395. #content{
  396. width:100vw;
  397. margin-top:calc(10vh + 3em);
  398. height:auto;
  399. }
  400.  
  401. /*** SIDEBAR ***/
  402. #sidebar-left{
  403. height:90vh;
  404. width:20vw;
  405. position:fixed;
  406. top:10vh;
  407. left:0;
  408. display:flex;
  409. align-items:center;
  410. justify-content:center;
  411. flex-direction:column;
  412. }
  413.  
  414. #sidebar-right{
  415. height:90vh;
  416. width:20vw;
  417. position:fixed;
  418. top:10vh;
  419. right:0;
  420. display:flex;
  421. align-items:center;
  422. justify-content:center;
  423. flex-direction:column;
  424. }
  425.  
  426. .s-box{
  427. width:calc(17vw - 1em);
  428. padding:0.5em;
  429. height:auto;
  430. background-color:{color:Posts};
  431. display:flex;
  432. align-items:flex-start;
  433. justify-content:center;
  434. flex-direction:column;
  435. margin-top:1em;
  436. margin-bottom:1em;
  437. }
  438.  
  439. .s-box-title{
  440. font-size:calc({select:Font Size} * 1.5);
  441. font-weight:700;
  442. border-bottom:4px solid {color:Text};
  443. margin-bottom:0.5em;
  444. }
  445.  
  446. a.s-link{
  447. text-decoration:none;
  448. border-bottom:none;
  449. }
  450.  
  451. .s-box-cont{
  452. display:flex;
  453. align-items:flex-start;
  454. justify-content:flex-start;
  455. flex-wrap:wrap;
  456. }
  457.  
  458. .s-box-cont mark{
  459. padding:0.25em 0.5em;
  460. border-radius:1em;
  461. line-height:2.25em;
  462. margin-right:0.25em;
  463. background-color:{color:Tags};
  464. transition:0.5s;
  465. -moz-transition:0.5s;
  466. -o-transition:0.5s;
  467. -webkit-transition:0.5s;
  468. }
  469.  
  470. .s-box-cont mark:hover{
  471. background-color:{color:Tags Hover};
  472. transition:0.5s;
  473. -moz-transition:0.5s;
  474. -o-transition:0.5s;
  475. -webkit-transition:0.5s;
  476. }
  477.  
  478. #posts{
  479. width:60vw;
  480. margin-left:20vw;
  481. }
  482.  
  483. article{
  484. width:{select:Post Width};
  485. height:auto;
  486. padding:1em;
  487. margin-left:calc(50% - ({select:Post Width} / 2));
  488. background-color:{color:Posts};
  489. margin-top:3em;
  490. margin-bottom:3em;
  491. }
  492.  
  493. article img{
  494. width:100%;
  495. max-width:100%;
  496. }
  497.  
  498. article .photoset{
  499. max-width:{select:Post Width};
  500. }
  501.  
  502. /** AUDIO **/
  503. .audio > iframe{
  504. width:100%;
  505. max-width:100%;
  506. }
  507.  
  508. /** VIDEO **/
  509. .video > iframe{
  510. width:100%;
  511. max-width:100%;
  512. }
  513.  
  514. .video{
  515. display:flex;
  516. align-items:center;
  517. justify-content:center;
  518. }
  519.  
  520. /** QUOTE **/
  521. .quoted{
  522. font-size:calc({select:Font Size} * 1.5);
  523. font-family:{TitleFont}, Verdana;
  524. font-weight:{TitleFontWeight};
  525. font-style:italic;
  526. text-align:center;
  527. }
  528.  
  529. .quote-source{
  530. margin-top:0.5em;
  531. }
  532.  
  533. /** CHAT **/
  534. /* Containers */
  535. .chatterbox{
  536. width:100%;
  537. overflow:hidden;
  538. }
  539.  
  540. .chat{
  541. width:100%;
  542. }
  543.  
  544. .chat .clear{
  545. clear:both;
  546. }
  547.  
  548. /* Odd Chat Elements (1,3,5,…) */
  549. .chat .label_odd, .line_odd{
  550. height:auto;
  551. width:60%;
  552. margin-left:calc(10% );
  553. float:left;
  554. padding:0.25 1em;
  555. }
  556.  
  557. /* Odd Chat Lines (1,3,5,…) */
  558. .chat .line_odd{
  559. margin-bottom:0.5em;
  560. padding:0.3em 0.625em;
  561. background-color:{color:Background};
  562. }
  563.  
  564. /* Odd Chat Labels (1,3,5,…) */
  565. .chat .label_odd{
  566. font-weight:700;
  567. font-size:calc({select:Font Size} * 1.25);
  568. padding:0.25em 0.5em;
  569. margin-bottom:0.25em;
  570. border-bottom:4px solid {color:Text};
  571. }
  572.  
  573. /* Even Chat Elements (2,4,6,…) */
  574. .chat .label_even, .line_even{
  575. width:60%;
  576. height:auto;
  577. float:right;
  578. text-align:right;
  579. padding:0.25 0.5em;
  580. margin-right:calc(10%);
  581. }
  582.  
  583. /* Even Chat Lines (2,4,6,…) */
  584. .chat .line_even{
  585. padding:0.3em 0.625em;
  586. margin-bottom:0.5em;
  587. background-color:{color:Chat};
  588. }
  589.  
  590. /* Even Chat Labels (2,4,6,…) */
  591. .chat .label_even{
  592. font-weight:700;
  593. font-size:calc({select:Font Size} * 1.25);
  594. padding:0.25em 0.5em;
  595. margin-bottom:0.25em;
  596. border-bottom:4px solid {color:Text};
  597. }
  598.  
  599. /** LINK POSTS **/
  600. .link-posts{
  601. width:100%;
  602. padding-bottom:0.5em;
  603. transition:0.5s;
  604. -moz-transition:0.5s;
  605. -o-transition:0.5s;
  606. -webkit-transition:0.5s;
  607. display:flex;
  608. align-items:center;
  609. justify-content:center;
  610. }
  611.  
  612. .link-posts:hover{
  613. color:{color:Text};
  614. transition:0.5s;
  615. -moz-transition:0.5s;
  616. -o-transition:0.5s;
  617. -webkit-transition:0.5s;
  618. }
  619.  
  620. .link-posts a{
  621. text-decoration:none;
  622. border-bottom:none;
  623. font-size:calc({select:Font Size} * 1.5);
  624. letter-spacing:1px;
  625. line-height: 1.5em;
  626. width:100%;
  627. font-weight:300;
  628. }
  629.  
  630. .link-posts a:hover{
  631. color:{color:Text};
  632. }
  633.  
  634. .link-posts a img{
  635. width:100%;
  636. max-width:100%;
  637. }
  638.  
  639. /** QUESTIONS **/
  640. /* ANSWER */
  641. .answer{
  642. background-color:{color:Chat};
  643. padding:0.5em;
  644. }
  645.  
  646. .answer img{
  647. width:36px;
  648. height:35px;
  649. border-radius:50%;
  650. margin-left:0.5em;
  651. }
  652.  
  653. .answer-username{
  654. display:flex;
  655. justify-content:flex-start;
  656. align-items:center;
  657. flex-direction:row-reverse;
  658. }
  659.  
  660. .answer-username a{
  661. text-decoration:none;
  662. border-bottom:none;
  663. margin-right:0.5em;
  664. margin-top:2em;
  665. }
  666.  
  667. .answer-username mark{
  668. padding:0.25em 0.5em;
  669. background-color:{color:Tags Hover};
  670. border-radius:1em;
  671. transition:0.5s;
  672. -moz-transition:0.5s;
  673. -o-transition:0.5s;
  674. -webkit-transition:0.5s;
  675. }
  676.  
  677. .answer-username mark:hover{
  678. background-color:{color:Tags};
  679. cursor:pointer;
  680. transition:0.5s;
  681. -moz-transition:0.5s;
  682. -o-transition:0.5s;
  683. -webkit-transition:0.5s;
  684. }
  685.  
  686. /* QUESTION */
  687. .question{
  688. background-color:{color:Background};
  689. margin-bottom:0.5em;
  690. padding:0.5em;
  691. }
  692.  
  693. .question img{
  694. width:36px;
  695. height:36px;
  696. border-radius:50%;
  697. margin-right:0.5em;
  698. }
  699.  
  700. .question-username{
  701. display:flex;
  702. justify-content:flex-start;
  703. align-items:center;
  704. flex-direction:row;
  705. }
  706.  
  707. .question-username a{
  708. text-decoration:none;
  709. border-bottom:none;
  710. margin-right:0.5em;
  711. margin-top:2em;
  712. }
  713.  
  714. .question-username mark{
  715. padding:0.25em 0.5em;
  716. background-color:{color:Tags};
  717. border-radius:1em;
  718. transition:0.5s;
  719. -moz-transition:0.5s;
  720. -o-transition:0.5s;
  721. -webkit-transition:0.5s;
  722. }
  723.  
  724. .question-username mark:hover{
  725. background-color:{color:Tags Hover};
  726. cursor:pointer;
  727. transition:0.5s;
  728. -moz-transition:0.5s;
  729. -o-transition:0.5s;
  730. -webkit-transition:0.5s;
  731. }
  732.  
  733. /*** USER SPECIFICATIONS ***/
  734. .username{
  735. margin-top:1em;
  736. height:40px;
  737. width:auto;
  738. display:flex;
  739. align-items:center;
  740. justify-content:flex-start;
  741. }
  742.  
  743. .username a{
  744. text-decoration:none;
  745. border-bottom:none;
  746. }
  747.  
  748. img.cimg {
  749. width:36px;
  750. height:36px;
  751. border-radius:50%;
  752. margin-right:0.5em;
  753. }
  754.  
  755. /* User Name Link */
  756. .user a{
  757. text-decoration:none;
  758. border-bottom:none;
  759. }
  760.  
  761. /* Username Mark */
  762. .user mark{
  763. padding:0.25em 0.5em;
  764. background-color:{color:Tags};
  765. border-radius:1em;
  766. margin-right:0.5em;
  767. transition:0.5s;
  768. -moz-transition:0.5s;
  769. -o-transition:0.5s;
  770. -webkit-transition:0.5s;
  771. }
  772.  
  773. /* Username Mark on Hover */
  774. .user mark:hover{
  775. background-color:{color:Tags Hover};
  776. transition:0.5s;
  777. -moz-transition:0.5s;
  778. -o-transition:0.5s;
  779. -webkit-transition:0.5s;
  780. }
  781.  
  782. /*** PERMALINK PAGE ***/
  783. /* User Avatar */
  784. img.avatar{
  785. display:none;
  786. }
  787.  
  788. /* Notes List */
  789. ol.notes{
  790. list-style-type:none;
  791. margin-left:0px;
  792. border-bottom:none;
  793. }
  794.  
  795. /* Notes List on Hover */
  796. ol.notes:hover{
  797. border-bottom:none;
  798. }
  799.  
  800. /* Notes List Item */
  801. li.note{
  802. line-height:1.5em;
  803. margin-left:-2em;
  804. }
  805.  
  806. /* Liked by … */
  807. li.like:before{
  808. content:"\e155";
  809. font-family:"honeybee";
  810. font-weight:400;
  811. position:relative;
  812. font-size:{select:Font Size};
  813. padding:0.25em;
  814. z-index:10!important;
  815. }
  816.  
  817. /* Reblogged by … */
  818. li.reblog:before{
  819. content:"\e3f1";
  820. font-family:"honeybee";
  821. font-weight:400;
  822. position:relative;
  823. font-size:{select:Font Size};
  824. padding:0.25em;
  825. z-index:10!important;
  826. }
  827.  
  828. /* User Replied to … */
  829. li.reply:before{
  830. content:"\e418";
  831. font-family:"honeybee";
  832. font-weight:400;
  833. position:relative;
  834. font-size:{select:Font Size};
  835. padding:0.25em;
  836. z-index:10!important;
  837. }
  838.  
  839. /* User Reply */
  840. .answer_content{
  841. background-color:{color:Preformatted};
  842. padding:0 0.25em;
  843. }
  844.  
  845. /* Notes Link */
  846. .notes a{
  847. text-decoration:none;
  848. color:{color:Links};
  849. border-bottom:2px solid {color:Links};
  850. transition:0.5s;
  851. -moz-transition:0.5s;
  852. -o-transition:0.5s;
  853. -webkit-transition:0.5s;
  854. margin-bottom:0.25em;
  855. }
  856.  
  857. /* Notes Link on Hover */
  858. .notes a:hover{
  859. border-bottom:2px solid {color:Text};
  860. transition:0.5s;
  861. -moz-transition:0.5s;
  862. -o-transition:0.5s;
  863. -webkit-transition:0.5s;
  864. }
  865.  
  866. /*** POST FOOTER ***/
  867. /* Complete Container */
  868. .post-footer{
  869. margin-top:1em;
  870. padding-top:0.5em;
  871. border-top:4px solid {color:Tags Hover};
  872. }
  873.  
  874. .post-footer .clear{
  875. clear:both;
  876. }
  877.  
  878. /* Info Container */
  879. .info{
  880. display:flex;
  881. justify-content:flex-start;
  882. flex-direction:row;
  883. flex-wrap:wrap;
  884. margin-bottom:0.5em;
  885. line-height:2em;
  886.  
  887. }
  888.  
  889. .info .clear{
  890. clear:both;
  891. }
  892.  
  893. /* Links */
  894. a.specs{
  895. text-decoration:none;
  896. border-bottom:none;
  897. }
  898.  
  899. /** TIME STAMP **/
  900. /* Time Mark */
  901. .time mark{
  902. padding:0.25em 0.5em;
  903. background-color:{color:Tags};
  904. border-radius:1em;
  905. margin-right:0.5em;
  906. transition:0.5s;
  907. -moz-transition:0.5s;
  908. -o-transition:0.5s;
  909. -webkit-transition:0.5s;
  910. }
  911.  
  912. /* Time Mark on Hover */
  913. .time mark:hover{
  914. background-color:{color:Tags Hover};
  915. transition:0.5s;
  916. -moz-transition:0.5s;
  917. -o-transition:0.5s;
  918. -webkit-transition:0.5s;
  919. }
  920.  
  921. /** NOTE COUNT **/
  922. /* Notes Mark */
  923. .notecount mark{
  924. padding:0.25em 0.5em;
  925. background-color:{color:Tags};
  926. border-radius:1em;
  927. margin-right:0.5em;
  928. transition:0.5s;
  929. -moz-transition:0.5s;
  930. -o-transition:0.5s;
  931. -webkit-transition:0.5s;
  932. }
  933.  
  934. /* Notes Mark on Hover */
  935. .notecount mark:hover{
  936. background-color:{color:Tags Hover};
  937. transition:0.5s;
  938. -moz-transition:0.5s;
  939. -o-transition:0.5s;
  940. -webkit-transition:0.5s;
  941. }
  942.  
  943. /** VIA **/
  944. /* Via Mark */
  945. .via mark{
  946. padding:0.25em 0.5em;
  947. background-color:{color:Tags};
  948. border-radius:1em;
  949. margin-right:0.5em;
  950. transition:0.5s;
  951. -moz-transition:0.5s;
  952. -o-transition:0.5s;
  953. -webkit-transition:0.5s;
  954. }
  955.  
  956. /* Via Mark on Hover */
  957. .via mark:hover{
  958. background-color:{color:Tags Hover};
  959. transition:0.5s;
  960. -moz-transition:0.5s;
  961. -o-transition:0.5s;
  962. -webkit-transition:0.5s;
  963. }
  964.  
  965. /** POST SOURCE **/
  966. /* Source Mark */
  967. .source mark{
  968. padding:0.25em 0.5em;
  969. background-color:{color:Tags};
  970. border-radius:1em;
  971. margin-right:0.5em;
  972. transition:0.5s;
  973. -moz-transition:0.5s;
  974. -o-transition:0.5s;
  975. -webkit-transition:0.5s;
  976. }
  977.  
  978. /* Source Mark on Hover */
  979. .source mark:hover{
  980. background-color:{color:Tags Hover};
  981. transition:0.5s;
  982. -moz-transition:0.5s;
  983. -o-transition:0.5s;
  984. -webkit-transition:0.5s;
  985. }
  986.  
  987. /** REBLOG BUTTON **/
  988. /* Reblog Button Mark */
  989. .reblogged mark{
  990. padding:0.25em 0.5em;
  991. background-color:{color:Tags};
  992. border-radius:1em;
  993. margin-right:0.5em;
  994. transition:0.5s;
  995. -moz-transition:0.5s;
  996. -o-transition:0.5s;
  997. -webkit-transition:0.5s;
  998. }
  999.  
  1000. /* Reblog Button Mark on Hover */
  1001. .reblogged mark:hover{
  1002. background-color:{color:Tags Hover};
  1003. transition:0.5s;
  1004. -moz-transition:0.5s;
  1005. -o-transition:0.5s;
  1006. -webkit-transition:0.5s;
  1007. }
  1008.  
  1009. /** LIKE BUTTON **/
  1010. /* Like Button */
  1011. .like_button {
  1012. display:inline-block;
  1013. position:relative;
  1014. padding-right:3px;
  1015. margin-top:-0.25em;
  1016. }
  1017.  
  1018. /* Like Button iFrame */
  1019. .like_button iframe {
  1020. height:100%;
  1021. left:0;
  1022. opacity:0;
  1023. position:absolute;
  1024. top:0;
  1025. width:100%;
  1026. z-index:10!important;
  1027. border-bottom:none;
  1028. }
  1029.  
  1030. /* Like Button Before Element */
  1031. .like_button::before{
  1032. content:"\e155";
  1033. font-family:"honeybee";
  1034. font-weight:300;
  1035. position:relative;
  1036. font-size:{select:Font Size};
  1037. z-index:10!important;
  1038. margin-right:0.25em;
  1039. }
  1040.  
  1041. /* Like Button After Element */
  1042. .like_button::after {
  1043. content:'like';
  1044. z-index:10!important;
  1045. }
  1046.  
  1047. /* Like Link */
  1048. a.liked{
  1049. border-bottom:none;
  1050. }
  1051.  
  1052. /* Like Mark */
  1053. a.liked mark{
  1054. padding:0.25em 0.5em;
  1055. background-color:{color:Tags};
  1056. border-radius:1em;
  1057. margin-right:0.5em;
  1058. transition:0.5s;
  1059. -moz-transition:0.5s;
  1060. -o-transition:0.5s;
  1061. -webkit-transition:0.5s;
  1062. }
  1063.  
  1064. /* Like Mark on Hover */
  1065. a.liked mark:hover{
  1066. background-color:{color:Tags Hover};
  1067. transition:0.5s;
  1068. -moz-transition:0.5s;
  1069. -o-transition:0.5s;
  1070. -webkit-transition:0.5s;
  1071. }
  1072.  
  1073. /** TAGS **/
  1074. /* Tag Container */
  1075. .tag-c{
  1076. display:flex;
  1077. justify-content:flex-start;
  1078. align-items:flex-start;
  1079. flex-direction:row;
  1080. flex-wrap:wrap;
  1081. width:100%;
  1082. height:auto;
  1083. }
  1084.  
  1085. /* Tags Mark */
  1086. .tags mark{
  1087. padding:0.25em 0.5em;
  1088. background-color:{color:Tags};
  1089. line-height:2.25em;
  1090. border-radius:1em;
  1091. margin-right:0.5em;
  1092. transition:0.5s;
  1093. -moz-transition:0.5s;
  1094. -o-transition:0.5s;
  1095. -webkit-transition:0.5s;
  1096. }
  1097.  
  1098. /* Tags Mark on Hover */
  1099. .tags mark:hover{
  1100. background-color:{color:Tags Hover};
  1101. transition:0.5s;
  1102. -moz-transition:0.5s;
  1103. -o-transition:0.5s;
  1104. -webkit-transition:0.5s;
  1105. }
  1106.  
  1107. /*** MORE ***/
  1108. /* Hides the tumblr app button, by @yeoli-thm */
  1109. .tmblr-iframe--app-cta-button {
  1110. display: none!important;
  1111. }
  1112.  
  1113. /** CUSTOM LIGHTBOX **/
  1114. /* Custom Lightbox */
  1115. .vignette, #vignette {
  1116. opacity:0;
  1117. }
  1118. .lightbox-image, #tumblr_lightbox img {
  1119. box-shadow:none!important;
  1120. border-radius:0!important;
  1121. max-width:none;
  1122. }
  1123.  
  1124. .tmblr-lightbox, #tumblr_lightbox {
  1125. background-color:{color:Preformatted}!important;
  1126. }
  1127.  
  1128. a.tumblr-box{
  1129. border-bottom:none;
  1130. }
  1131.  
  1132. /** SEARCHBAR **/
  1133. .sfm input {
  1134. background-color: {color:Background};
  1135. font-size: 10px;
  1136. border: 0px;
  1137. text-transform: uppercase;
  1138. margin-top: 4px;
  1139. color: {color:Text};
  1140. letter-spacing: 1px;
  1141. padding: 4px 8px;
  1142. font-family: {select:Font}, Verdana;
  1143. width:calc(17vw - 3em);
  1144. }
  1145.  
  1146. /** PAGINATION **/
  1147. a.p-link{
  1148. text-decoration:none;
  1149. border-bottom:none;
  1150. }
  1151.  
  1152. .pagination mark{
  1153. padding:0.25em 0.5em;
  1154. background-color:{color:Tags};
  1155. border-radius:1em;
  1156. margin-right:0.5em;
  1157. transition:0.5s;
  1158. -moz-transition:0.5s;
  1159. -o-transition:0.5s;
  1160. -webkit-transition:0.5s;
  1161. }
  1162.  
  1163. .pagination mark:hover{
  1164. background-color:{color:Tags Hover};
  1165. transition:0.5s;
  1166. -moz-transition:0.5s;
  1167. -o-transition:0.5s;
  1168. -webkit-transition:0.5s;
  1169. }
  1170.  
  1171. .pagi{
  1172. {block:PermalinkPage}
  1173. display:none;
  1174. {/block:PermalinkPage}
  1175. {block:HasPages}
  1176. {block:Pages}
  1177. display:none;
  1178. {/block:Pages}
  1179. {/block:HasPages}
  1180. }
  1181.  
  1182. /** CUSTOM TUMBLR CONTROLS **/
  1183. /* Hides standard tumblr controls */
  1184. body > iframe:first-child {
  1185. display: none !important;
  1186. }
  1187.  
  1188. #big-box{
  1189. width:240px;
  1190. margin-right:3em;
  1191. display:flex;
  1192. align-items:center;
  1193. justify-content:space-evenly;
  1194. }
  1195.  
  1196. a.boxlink{
  1197. text-decoration:none;
  1198. border-bottom:none;
  1199. }
  1200.  
  1201. .box{
  1202. width:36px;
  1203. height:36px;
  1204. border-radius:50%;
  1205. background-color:{color:Background};
  1206. color:{color:Text};
  1207. display:flex;
  1208. align-items:center;
  1209. justify-content:center;
  1210. transition:0.5s;
  1211. -moz-transition:0.5s;
  1212. -o-transition:0.5s;
  1213. -webkit-transition:0.5s;
  1214. }
  1215.  
  1216. .box:hover{
  1217. background-color:{color:Tags Hover};
  1218. transition:0.5s;
  1219. -moz-transition:0.5s;
  1220. -o-transition:0.5s;
  1221. -webkit-transition:0.5s;
  1222. }
  1223.  
  1224. /*** RESPONSIVE LAYOUT ***/
  1225. @media only screen and (min-width:801px){
  1226. #heading, #footing{
  1227. display:none;
  1228. }
  1229. }
  1230.  
  1231. @media only screen and (max-width:800px){
  1232. #sidebar-left, #sidebar-right{
  1233. display:none;
  1234. }
  1235.  
  1236. #heading, #footing{
  1237. width:{select:Post Width};
  1238. padding:1em;
  1239. background-color:{color:Posts};
  1240. margin-left:calc(50% - ({select:Post Width} / 2));
  1241. margin-top:3em;
  1242. margin-bottom:3em;
  1243. }
  1244.  
  1245. #footing{
  1246. display:flex;
  1247. align-items:flex-start;
  1248. justify-content:space-between;
  1249. }
  1250.  
  1251. .sfm input{
  1252. width:calc(100% - 1.5em);
  1253. }
  1254.  
  1255. .h-title, .f-title{
  1256. font-size:calc({select:Font Size} * 1.5);
  1257. font-weight:700;
  1258. border-bottom:4px solid {color:Text};
  1259. width:auto;
  1260. margin-bottom:0.25em;
  1261. }
  1262.  
  1263. .h-box mark{
  1264. padding:0.25em 0.5em;
  1265. border-radius:1em;
  1266. background-color:{color:Tags};
  1267. line-height:2.25em;
  1268. margin-right:0.25em;
  1269. transition:0.5s;
  1270. -moz-transition:0.5s;
  1271. -o-transition:0.5s;
  1272. -webkit-transition:0.5s;
  1273. }
  1274.  
  1275. .h-box mark:hover{
  1276. background-color:{color:Tags Hover};
  1277. transition:0.5s;
  1278. -moz-transition:0.5s;
  1279. -o-transition:0.5s;
  1280. -webkit-transition:0.5s;
  1281. }
  1282.  
  1283. a.h-link{
  1284. text-decoration:none;
  1285. border-bottom:none;
  1286. }
  1287.  
  1288. .pagi{
  1289. {block:PermalinkPage}
  1290. display:none;
  1291. {/block:PermalinkPage}
  1292. {block:HasPages}
  1293. {block:Pages}
  1294. display:none;
  1295. {/block:Pages}
  1296. {/block:HasPages}
  1297. }
  1298. }
  1299.  
  1300. @media only screen and (max-width:400px){
  1301. #posts{
  1302. width:100vw;
  1303. margin-left:0;
  1304. }
  1305.  
  1306. #heading, #footing{
  1307. width:300px;
  1308. margin-left:calc(50vw - 168px);
  1309. }
  1310.  
  1311. #footing{
  1312. flex-direction:column;
  1313. }
  1314.  
  1315. .f-box{
  1316. margin-left:0.25em;
  1317. margin-right:0.25em;
  1318. }
  1319.  
  1320. article{
  1321. width:300px;
  1322. margin-left:calc(50vw - 168px);
  1323. }
  1324.  
  1325. article .photoset{
  1326. width:300px;
  1327. }
  1328.  
  1329. header{
  1330. display:flex;
  1331. align-items:center;
  1332. justify-content:center;
  1333. }
  1334.  
  1335. #h-icon{
  1336. display:none;
  1337. }
  1338.  
  1339. #big-box{
  1340. display:none;
  1341. }
  1342. }
  1343.  
  1344. </style>
  1345. </head>
  1346.  
  1347. <body>
  1348.  
  1349. <header>
  1350. <div id="h-icon">
  1351. <img src="{PortraitURL-128}" alt="{Name}'s icon"/>
  1352. </div>
  1353.  
  1354. <div id="h-title">{Title}</div>
  1355.  
  1356. <!-- CUSTOM TUMBLR CONTROLS -->
  1357. <div id="big-box">
  1358.  
  1359. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="boxlink">
  1360. <div class="box">
  1361. <span class="th th-house-2-o"></span>
  1362. </div>
  1363. </a>
  1364.  
  1365. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="boxlink">
  1366. <div class="box">
  1367. <span class="th th-chat-bubble-o"></span>
  1368. </div>
  1369. </a>
  1370.  
  1371. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize theme" class="boxlink">
  1372. <div class="box">
  1373. <span class="th th-pencil-1-o"></span>
  1374. </div>
  1375. </a>
  1376.  
  1377. <a href="https://www.tumblr.com/settings/blog/{Name}" title="change settings" class="boxlink">
  1378. <div class="box">
  1379. <span class="th th-settings-5-o"></span>
  1380. </div>
  1381. </a>
  1382.  
  1383. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="boxlink">
  1384. <div class="box">
  1385. <span class="th th-plus-2-o"></span>
  1386. </div>
  1387. </a>
  1388.  
  1389. </div>
  1390. </header>
  1391.  
  1392. <div id="content">
  1393.  
  1394. <div id="sidebar-left">
  1395.  
  1396. <div class="s-box">
  1397. <div class="s-box-title">Blog</div>
  1398. <div id="s-desc">{Description}</div>
  1399. <div id="s-cop"><b>est.:</b> {CopyrightYears}</div>
  1400. </div>
  1401.  
  1402. <div class="s-box">
  1403. <div class="s-box-title">Navigation</div>
  1404.  
  1405. <div class="s-box-cont">
  1406. <a href="/" title="index" class="s-link">
  1407. <mark>Index</mark>
  1408. </a>
  1409. <a href="/ask" title="ask" class="s-link">
  1410. <mark>Ask</mark>
  1411. </a>
  1412. <a href="/archive" title="archive" class="s-link">
  1413. <mark>Archive</mark>
  1414. </a>
  1415.  
  1416. {block:IfCustomLink1}
  1417. <a href="{text:Custom URL 1}" title="{text:Custom Link 1}" class="s-link"><mark>{text:Custom Link 1}</mark></a>
  1418. {/block:IfCustomLink1}
  1419.  
  1420. {block:IfCustomLink2}
  1421. <a href="{text:Custom URL 2}" title="{text:Custom Link 2}" class="s-link"><mark>{text:Custom Link 2}</mark></a>
  1422. {/block:IfCustomLink2}
  1423.  
  1424. {block:IfCustomLink3}
  1425. <a href="{text:Custom URL 3}" title="{text:Custom Link 3}" class="s-link"><mark>{text:Custom Link 3}</mark></a>
  1426. {/block:IfCustomLink3}
  1427.  
  1428. {block:IfCustomLink4}
  1429. <a href="{text:Custom URL 4}" title="{text:Custom Link 4}" class="s-link"><mark>{text:Custom Link 4}</mark></a>
  1430. {/block:IfCustomLink4}
  1431.  
  1432. {block:IfCustomLink5}
  1433. <a href="{text:Custom URL 5}" title="{text:Custom Link 5}" class="s-link"><mark>{text:Custom Link 5}</mark></a>
  1434. {/block:IfCustomLink5}
  1435.  
  1436. <a href="https://silbrigthemes.tumblr.com/" title="theme by silbrigthemes" class="s-link"><mark>Credit</mark></a>
  1437. </div>
  1438.  
  1439. </div>
  1440.  
  1441. </div>
  1442.  
  1443. <div id="posts">
  1444.  
  1445. <!-- Responsive heading. -->
  1446. <div id="heading">
  1447. <div class="h-title">Navigation</div>
  1448. <div class="h-box">
  1449. <a href="/" title="index" class="h-link">
  1450. <mark>Index</mark>
  1451. </a>
  1452. <a href="/ask" title="ask" class="h-link">
  1453. <mark>Ask</mark>
  1454. </a>
  1455. <a href="/archive" title="archive" class="h-link">
  1456. <mark>Archive</mark>
  1457. </a>
  1458.  
  1459. {block:IfCustomLink1}
  1460. <a href="{text:Custom URL 1}" title="{text:Custom Link 1}" class="h-link"><mark>{text:Custom Link 1}</mark></a>
  1461. {/block:IfCustomLink1}
  1462.  
  1463. {block:IfCustomLink2}
  1464. <a href="{text:Custom URL 2}" title="{text:Custom Link 2}" class="h-link"><mark>{text:Custom Link 2}</mark></a>
  1465. {/block:IfCustomLink2}
  1466.  
  1467. {block:IfCustomLink3}
  1468. <a href="{text:Custom URL 3}" title="{text:Custom Link 3}" class="h-link"><mark>{text:Custom Link 3}</mark></a>
  1469. {/block:IfCustomLink3}
  1470.  
  1471. {block:IfCustomLink4}
  1472. <a href="{text:Custom URL 4}" title="{text:Custom Link 4}" class="h-link"><mark>{text:Custom Link 4}</mark></a>
  1473. {/block:IfCustomLink4}
  1474.  
  1475. {block:IfCustomLink5}
  1476. <a href="{text:Custom URL 5}" title="{text:Custom Link 5}" class="h-link"><mark>{text:Custom Link 5}</mark></a>
  1477. {/block:IfCustomLink5}
  1478.  
  1479. <a href="https://silbrigthemes.tumblr.com/" title="theme by silbrigthemes" class="h-link"><mark>Credit</mark></a>
  1480.  
  1481. </div>
  1482. </div>
  1483.  
  1484. {block:Posts}
  1485. <article>
  1486.  
  1487. <!-- TEXT POSTS -->
  1488. {block:Text}
  1489. {block:Title}
  1490. <div class="title">{Title}</div>
  1491. {/block:Title}
  1492. {block:Body}
  1493. {block:NotReblog}
  1494. <div class="text">{Body}</div>
  1495. {/block:NotReblog}
  1496. {block:RebloggedFrom}
  1497. {block:Reblogs}
  1498. <div class="username">
  1499. {block:HasAvatar}
  1500. {block:HasPermalink}
  1501. <a href="{Permalink}" target="_blank">
  1502. <img class="cimg" src="{PortraitURL-64}"></a>
  1503. {/block:HasPermalink}
  1504. {block:HasNoPermalink}
  1505. <img class="cimg" src="{PortraitURL-64}">
  1506. {/block:HasNoPermalink}
  1507. {/block:HasAvatar}
  1508. {block:HasPermalink}
  1509. <div class="user">
  1510. <a target="_blank" class="user" href="{Permalink}">
  1511. <mark>{Username}</mark>
  1512. </a>
  1513. </div>
  1514. {/block:HasPermalink}
  1515. {block:HasNoPermalink}
  1516. <span class="user"><mark>{Username}</mark></span>
  1517. {/block:HasNoPermalink}
  1518. </div>
  1519. <div class="text">{Body}</div>
  1520. {/block:Reblogs}
  1521. {/block:RebloggedFrom}
  1522.  
  1523.  
  1524. {/block:Body}
  1525. {/block:Text}
  1526.  
  1527. <!-- QUESTION POSTS -->
  1528. {block:Answer}
  1529. <div class="question">
  1530. <div class="question-username">
  1531. <img src="{AskerPortraitURL-96}" alt="user icon">
  1532. <mark>{Asker}</mark>
  1533. </div>
  1534. {Question}
  1535. </div>
  1536.  
  1537. {block:Answerer}
  1538. <div class="answer">
  1539. <div class="answer-username">
  1540. <img src="{AnswererPortraitURL-96}" alt="user icon">
  1541. <mark>{Answerer}</mark>
  1542. </div>
  1543. {Answer}
  1544. </div>
  1545. {/block:Answerer}
  1546. {block:NotReblog}
  1547. <div>{Replies}</div>
  1548. {/block:NotReblog}
  1549. {block:RebloggedFrom}
  1550. {block:Reblogs}
  1551. <div class="username">
  1552. {block:HasAvatar}
  1553. {block:HasPermalink}
  1554. <a href="{Permalink}" target="_blank">
  1555. <img class="cimg" src="{PortraitURL-64}"></a>
  1556. {/block:HasPermalink}
  1557. {block:HasNoPermalink}
  1558. <img class="cimg" src="{PortraitURL-64}">
  1559. {/block:HasNoPermalink}
  1560. {/block:HasAvatar}
  1561. {block:HasPermalink}
  1562. <div class="user">
  1563. <a target="_blank" class="user" href="{Permalink}">
  1564. <mark>{Username}</mark>
  1565. </a>
  1566. </div>
  1567. {/block:HasPermalink}
  1568. {block:HasNoPermalink}
  1569. <span class="user"><mark>{Username}</mark></span>
  1570. {/block:HasNoPermalink}
  1571. </div>
  1572. <div class="text">{Body}</div>
  1573. {/block:Reblogs}
  1574. {/block:RebloggedFrom}
  1575. {/block:Answer}
  1576.  
  1577.  
  1578. <!-- QUOTE POSTS -->
  1579. {block:Quote}
  1580. <div class="quoted">
  1581. {Quote}
  1582. </div>
  1583. {block:Source}
  1584. <div class="quote-source">
  1585. – {Source}
  1586. </div>
  1587. {/block:Source}
  1588. {/block:Quote}
  1589.  
  1590. <!-- LINK POSTS -->
  1591. {block:Link}
  1592. <div class="link-posts">
  1593. <a href="{URL}">
  1594. <img src="{Thumbnail-HighRes}">
  1595. {Name}
  1596. </a>
  1597. </div>
  1598. {block:Description}
  1599. {block:NotReblog}
  1600. {Description}
  1601. {/block:NotReblog}
  1602. {block:RebloggedFrom}
  1603. {block:Reblogs}
  1604. <div class="username">
  1605. {block:HasAvatar}
  1606. {block:HasPermalink}
  1607. <a href="{Permalink}" target="_blank">
  1608. <img class="cimg" src="{PortraitURL-64}"></a>
  1609. {/block:HasPermalink}
  1610. {block:HasNoPermalink}
  1611. <img class="cimg" src="{PortraitURL-64}">
  1612. {/block:HasNoPermalink}
  1613. {/block:HasAvatar}
  1614. {block:HasPermalink}
  1615. <div class="user">
  1616. <a target="_blank" class="user" href="{Permalink}">
  1617. <mark>{Username}</mark>
  1618. </a>
  1619. </div>
  1620. {/block:HasPermalink}
  1621. {block:HasNoPermalink}
  1622. <span class="user"><mark>{Username}</mark></span>
  1623. {/block:HasNoPermalink}
  1624. </div>
  1625. <div class="text">{Body}</div>
  1626. {/block:Reblogs}
  1627. {/block:RebloggedFrom}
  1628. {/block:Description}
  1629. {/block:Link}
  1630.  
  1631. <!-- CHAT POSTS -->
  1632. <div class="chatterbox">
  1633. {block:Chat}
  1634. <div class="chat clear">
  1635. {block:Title}
  1636. <div class="title">{Title}</div>
  1637. {/block:Title}
  1638. {block:Lines}
  1639. {block:Label}
  1640. <span class="label_{alt}">
  1641. {Label}
  1642. </span>
  1643. {/block:Label}
  1644. <div class="line_{alt}">
  1645. {Line}<br>
  1646. </div>
  1647. {/block:Lines}
  1648. </div>
  1649. {/block:Chat}
  1650. </div>
  1651.  
  1652. <!-- PHOTO POSTS -->
  1653. {block:Photo}
  1654. {LinkOpenTag}
  1655. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1656. <div class="photo">
  1657. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
  1658. </div>
  1659. </a>
  1660. {LinkCloseTag}
  1661. {block:Caption}
  1662. {block:NotReblog}{Caption}{/block:NotReblog}
  1663. {block:RebloggedFrom}
  1664. {block:Reblogs}
  1665. <div class="username">
  1666. {block:HasAvatar}
  1667. {block:HasPermalink}
  1668. <a href="{Permalink}" target="_blank">
  1669. <img class="cimg" src="{PortraitURL-64}"></a>
  1670. {/block:HasPermalink}
  1671. {block:HasNoPermalink}
  1672. <img class="cimg" src="{PortraitURL-64}">
  1673. {/block:HasNoPermalink}
  1674. {/block:HasAvatar}
  1675. {block:HasPermalink}
  1676. <div class="user">
  1677. <a target="_blank" class="user" href="{Permalink}">
  1678. <mark>{Username}</mark>
  1679. </a>
  1680. </div>
  1681. {/block:HasPermalink}
  1682. {block:HasNoPermalink}
  1683. <span class="user"><mark>{Username}</mark></span>
  1684. {/block:HasNoPermalink}
  1685. </div>
  1686. <div class="text">{Body}</div>
  1687. {/block:Reblogs}
  1688. {/block:RebloggedFrom}
  1689. {/block:Caption}
  1690. {/block:Photo}
  1691.  
  1692. <!-- PHOTOSETS -->
  1693. {block:Photoset}
  1694. {LinkOpenTag}
  1695. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1696. <div class="photoset">
  1697. {Photoset-500}
  1698. </div>
  1699. </a>
  1700. {LinkCloseTag}
  1701. {block:Caption}
  1702. {block:NotReblog}
  1703. {Caption}
  1704. {/block:NotReblog}
  1705. {block:RebloggedFrom}
  1706. {block:Reblogs}
  1707. <div class="username">
  1708. {block:HasAvatar}
  1709. {block:HasPermalink}
  1710. <a href="{Permalink}" target="_blank">
  1711. <img class="cimg" src="{PortraitURL-64}"></a>
  1712. {/block:HasPermalink}
  1713. {block:HasNoPermalink}
  1714. <img class="cimg" src="{PortraitURL-64}">
  1715. {/block:HasNoPermalink}
  1716. {/block:HasAvatar}
  1717. {block:HasPermalink}
  1718. <div class="user">
  1719. <a target="_blank" class="user" href="{Permalink}">
  1720. <mark>{Username}</mark>
  1721. </a>
  1722. </div>
  1723. {/block:HasPermalink}
  1724. {block:HasNoPermalink}
  1725. <span class="user"><mark>{Username}</mark></span>
  1726. {/block:HasNoPermalink}
  1727. </div>
  1728. <div class="text">{Body}</div>
  1729. {/block:Reblogs}
  1730. {/block:RebloggedFrom}
  1731. {/block:Caption}
  1732. {/block:Photoset}
  1733.  
  1734. <!-- AUDIO POSTS -->
  1735. {block:Audio}
  1736. {block:AudioEmbed}
  1737. <div class="audio">
  1738. {AudioEmbed}
  1739. </div>
  1740. {/block:AudioEmbed}
  1741. {block:Caption}
  1742. {block:NotReblog}
  1743. {Caption}
  1744. {/block:NotReblog}
  1745. {block:RebloggedFrom}
  1746. {block:Reblogs}
  1747. <div class="username">
  1748. {block:HasAvatar}
  1749. {block:HasPermalink}
  1750. <a href="{Permalink}" target="_blank">
  1751. <img class="cimg" src="{PortraitURL-64}"></a>
  1752. {/block:HasPermalink}
  1753. {block:HasNoPermalink}
  1754. <img class="cimg" src="{PortraitURL-64}">
  1755. {/block:HasNoPermalink}
  1756. {/block:HasAvatar}
  1757. {block:HasPermalink}
  1758. <div class="user">
  1759. <a target="_blank" class="user" href="{Permalink}">
  1760. <mark>{Username}</mark>
  1761. </a>
  1762. </div>
  1763. {/block:HasPermalink}
  1764. {block:HasNoPermalink}
  1765. <span class="user"><mark>{Username}</mark></span>
  1766. {/block:HasNoPermalink}
  1767. </div>
  1768. <div class="text">{Body}</div>
  1769. {/block:Reblogs}
  1770. {/block:RebloggedFrom}
  1771. {/block:Caption}
  1772. {/block:Audio}
  1773.  
  1774. <!-- VIDEO POSTS -->
  1775. {block:Video}
  1776. <div class="video">
  1777. {Video-500}
  1778. </div>
  1779. {block:Caption}
  1780. {block:NotReblog}
  1781. {Caption}
  1782. {/block:NotReblog}
  1783. {block:RebloggedFrom}
  1784. {block:Reblogs}
  1785. <div class="username">
  1786. {block:HasAvatar}
  1787. {block:HasPermalink}
  1788. <a href="{Permalink}" target="_blank">
  1789. <img class="cimg" src="{PortraitURL-64}"></a>
  1790. {/block:HasPermalink}
  1791. {block:HasNoPermalink}
  1792. <img class="cimg" src="{PortraitURL-64}">
  1793. {/block:HasNoPermalink}
  1794. {/block:HasAvatar}
  1795. {block:HasPermalink}
  1796. <div class="user">
  1797. <a target="_blank" class="user" href="{Permalink}">
  1798. <mark>{Username}</mark>
  1799. </a>
  1800. </div>
  1801. {/block:HasPermalink}
  1802. {block:HasNoPermalink}
  1803. <span class="user"><mark>{Username}</mark></span>
  1804. {/block:HasNoPermalink}
  1805. </div>
  1806. <div class="text">{Body}</div>
  1807. {/block:Reblogs}
  1808. {/block:RebloggedFrom}
  1809. {/block:Caption}
  1810. {/block:Video}
  1811.  
  1812. <!-- POST FOOTER -->
  1813. <div class="post-footer clear">
  1814. <div class="info clear">
  1815.  
  1816. <!-- TIME STAMP -->
  1817. {block:Date}
  1818. <div class="time">
  1819. <a class="specs" href="{Permalink}" title="{Month} {DayOfMonth}, {Year}">
  1820. <mark><span class="th th-clock-o" aria-hidden="true"></span> {TimeAgo}</mark></a>
  1821. </div>
  1822. {/block:Date}
  1823.  
  1824. <!-- NOTE COUNT -->
  1825. {block:NoteCount}
  1826. <div class="notecount">
  1827. <a class="specs" href="{Permalink}" title="{NoteCountWithLabel}">
  1828. <mark><span class="th th-information-o" aria-hidden="true"></span> {NoteCountWithLabel}</mark></a>
  1829. </div>
  1830.  
  1831. {/block:NoteCount}
  1832.  
  1833. <!-- VIA -->
  1834. {block:RebloggedFrom}
  1835. <div class="via">
  1836. <a class="specs" href="{ReblogParentURL}" title="via">
  1837. <mark><span class="th th-right-arrow-curved" aria-hidden="true"></span> via</mark>
  1838. </a>
  1839. </div>
  1840.  
  1841. {/block:RebloggedFrom}
  1842.  
  1843. <!-- POST SOURCE -->
  1844. {block:ContentSource}
  1845. <div class="source">
  1846. <a class="specs" href="{SourceURL}" title="source">
  1847. <mark><span class="th th-placeholder-4-o" aria-hidden="true"></span> source</mark>
  1848. </a>
  1849. </div>
  1850.  
  1851. {/block:ContentSource}
  1852.  
  1853. <!-- REBLOG BUTTON -->
  1854. <div class="reblogged">
  1855. <a class="specs" href="{ReblogURL}" title="reblog this post">
  1856. <mark><span class="th th-reload-arrow" aria-hidden="true"></span> reblog</mark>
  1857. </a>
  1858. </div>
  1859.  
  1860. <!-- LIKE BUTTON -->
  1861. <a class="liked" href="#" title="like this post">
  1862. <mark>{LikeButton}</mark>
  1863. </a>
  1864.  
  1865. </div><!-- /info -->
  1866.  
  1867. <!-- TAGS -->
  1868. {block:HasTags}
  1869. <div class="tags">
  1870. {block:Tags}
  1871. <a class="specs" href="{TagURL}" title="tagged as: {Tag}">
  1872. <mark>
  1873. <span class="th th-tag-o" aria-hidden="true"></span> {Tag}
  1874. </mark>
  1875. </a>
  1876. {/block:Tags}
  1877. </div><!-- /tags -->
  1878. {/block:HasTags}
  1879. </div><!-- /post footer -->
  1880.  
  1881. {block:PermalinkPage}
  1882. {block:NoteCount}
  1883. {block:PostNotes}
  1884. {PostNotes}
  1885. {/block:PostNotes}
  1886. {/block:NoteCount}
  1887. {/block:PermalinkPage}
  1888. </article>
  1889. {/block:Posts}
  1890.  
  1891. <div id="footing">
  1892. <div class="f-box">
  1893. <div class="f-title">Search</div>
  1894. Find what you were searching for.
  1895. <form action="/search" method="get" class="sfm" name="theform">
  1896. <input type="text" name="q" value="SEARCH"/>
  1897. </form>
  1898. </div>
  1899.  
  1900. <div class="f-box pagi">
  1901. <div class="f-title">Pagination</div>
  1902. <!-- PAGINATION -->
  1903. {block:Pagination}
  1904. <div class="pagination">
  1905. {block:PreviousPage}
  1906. <a href="{PreviousPage}" class="p-link" title="previous page"><mark>previous</mark></a>
  1907. {/block:PreviousPage}
  1908.  
  1909. {CurrentPage} out of {TotalPages} pages
  1910.  
  1911. {block:NextPage}
  1912. <a href="{NextPage}" class="p-link" title="next page"><mark>next</mark></a>
  1913. {/block:NextPage}
  1914. </div><!-- /pagination -->
  1915. {/block:Pagination}
  1916. </div>
  1917. </div>
  1918.  
  1919. </div>
  1920.  
  1921. <div id="sidebar-right">
  1922.  
  1923. <div class="s-box">
  1924. <div class="s-box-title">Tags</div>
  1925. <div class="s-box-cont">
  1926. <a href="/tagged/{text:Tag 1}" title="{text:Tagged 1}" class="s-link"><mark>{text:Tagged 1}</mark></a>
  1927. <a href="/tagged/{text:Tag 2}" title="{text:Tagged 2}" class="s-link"><mark>{text:Tagged 2}</mark></a>
  1928. <a href="/tagged/{text:Tag 3}" title="{text:Tagged 3}" class="s-link"><mark>{text:Tagged 3}</mark></a>
  1929. <a href="/tagged/{text:Tag 4}" title="{text:Tagged 4}" class="s-link"><mark>{text:Tagged 4}</mark></a>
  1930. <a href="/tagged/{text:Tag 5}" title="{text:Tagged 5}" class="s-link"><mark>{text:Tagged 5}</mark></a>
  1931. </div>
  1932. </div>
  1933.  
  1934. <div class="s-box">
  1935. <div class="s-box-title">Search</div>
  1936. Find what you were searching for.
  1937. <form action="/search" method="get" class="sfm" name="theform">
  1938. <input type="text" name="q" value="SEARCH"/>
  1939. </form>
  1940. </div>
  1941.  
  1942. <div class="s-box pagi">
  1943. <div class="s-box-title">Pagination</div>
  1944. <!-- PAGINATION -->
  1945. {block:Pagination}
  1946. <div class="pagination">
  1947. {block:PreviousPage}
  1948. <a href="{PreviousPage}" class="p-link" title="previous page"><mark>previous</mark></a>
  1949. {/block:PreviousPage}
  1950.  
  1951. {CurrentPage} out of {TotalPages} pages
  1952.  
  1953. {block:NextPage}
  1954. <a href="{NextPage}" class="p-link" title="next page"><mark>next</mark></a>
  1955. {/block:NextPage}
  1956. </div><!-- /pagination -->
  1957. {/block:Pagination}
  1958. </div>
  1959.  
  1960. </div>
  1961.  
  1962. </div>
  1963.  
  1964.  
  1965. </body>
  1966. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!