nonspace

THEME #02 :: HYPERREAL

Jan 26th, 2019
1,136
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 37.66 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3.   <!--HYPERREAL (Theme #02) by @nonspace.      
  4.    Find more of my work at https://nonspace.tumblr.com  
  5.  
  6.    Don't steal.  
  7.    Don't claim as your own.
  8.    Don't use as base code.
  9.    Editing for personal use is fine!
  10.  
  11.    Need help? Have a look at this themes FAQ:
  12.    https://nonspace.tumblr.com/tagged/theme-help:+hyperreal
  13.    Or my general FAQ: https://nonspace.tumblr.com/help/support
  14.  
  15.    If you find any bugs please report them to me.
  16.    -->
  17.  
  18. <html>
  19. <head>
  20.   <meta charset="utf-8">
  21.   <meta name="viewport" content="width=device-width">
  22.   <link rel="icon" type="image/png" href="{Favicon}">
  23.   <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.   <title>{Title}{block:SearchPage} :: ({lang:Search results for SearchQuery}){/block:SearchPage}{block:TagPage} :: #{Tag}{/block:TagPage}{block:PermalinkPage}{block:PostSummary} :: {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
  25.   {block:Description}
  26.   <meta name="description" content="{MetaDescription}" />
  27.   {/block:Description}
  28.  
  29.   {block:Hidden}
  30.   <meta name="theme-color" content="">
  31.  
  32.   <meta name="image:Background" content="" />
  33.  
  34.   <meta name="image:Sidebar" content="" />
  35.  
  36.   <meta name="if:Post Shadow" content="0" />
  37.   <meta name="if:Scroll Top" content="0" />
  38.  
  39.   <meta name="color:Text" content="#181818" />
  40.   <meta name="color:Background" content="#f7f7f7" />
  41.   <meta name="color:Accent" content="#a51e4b" />
  42.   <meta name="color:Accent Two" content="#ce2558" />
  43.   <meta name="color:Accent Text" content="#fff" />
  44.   <meta name="color:Links" content="#8c8c8c" />
  45.   <meta name="color:Link Hover" content="#444444" />
  46.   <meta name="color:Blockquote" content="#eaeaea" />
  47.   <meta name="color:Title Background" content="#181818" />
  48.   <meta name="color:Title Color" content="#fff" />
  49.   <meta name="color:Sidebar Background" content="#181818" />
  50.   <meta name="color:Sidebar Text" content="#fff" />
  51.   <meta name="color:Post Background" content="#fff" />
  52.   <meta name="color:Reblog Header" content="#181818" />
  53.   <meta name="color:Reblog Header Text" content="#fff" />
  54.   <meta name="color:Post Info" content="#181818" />
  55.   <meta name="color:Post Info Text" content="#fff" />
  56.   <meta name="color:Footer Background" content="#181818" />
  57.   <meta name="color:Footer Text" content="#fff" />
  58.  
  59.   <meta name="select:Post Width" title="700" content="700" />
  60.   <meta name="select:Post Width" title="540" content="540" />
  61.   <meta name="select:Post Width" title="500" content="500" />
  62.   <meta name="select:Post Width" title="450" content="450" />
  63.   <meta name="select:Post Width" title="400" content="400" />
  64.   <meta name="select:Post Width" title="300" content="300" />
  65.  
  66.   <meta name="text:Font" content="Open Sans" />
  67.   <meta name="text:Font Two" content="Roboto" />
  68.  
  69.   <meta name="text:Font Size" content="16"/>
  70.  
  71.   <meta name="text:Link One Title" content=""/>
  72.   <meta name="text:Link One URL" content=""/>
  73.  
  74.   <meta name="text:Link Two Title" content=""/>
  75.   <meta name="text:Link Two URL" content=""/>
  76.  
  77.   <meta name="text:Link Three Title" content=""/>
  78.   <meta name="text:Link Three URL" content=""/>
  79.  
  80.   <meta name="text:Link Four Title" content=""/>
  81.   <meta name="text:Link Four URL" content=""/>
  82.  
  83.   <meta name="text:Link Five Title" content=""/>
  84.   <meta name="text:Link Five URL" content=""/>
  85.   {/block:Hidden}
  86.  
  87.   <!--FONTS-->
  88.   <link href="https://fonts.googleapis.com/css?family={text:font}|{text:font two}:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  89.  
  90.   <!--FONT AWESOME-->
  91.   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" crossorigin="anonymous">
  92.  
  93.   <!--jQUERY-->
  94.   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  95.   <script src="https://www.dl.dropboxusercontent.com/s/2ob91mnz4zil9lq/scrollTop.js"></script>
  96.  
  97.   <noscript>
  98.     <style type="text/css">
  99.         #copyright {display: block;}
  100.     </style>
  101.   </noscript>
  102.  
  103. <style>
  104.  
  105. /*GENERAL*/
  106. *{
  107.   box-sizing: border-box;
  108.   padding: 0;
  109.   margin: 0;
  110.   -webkit-font-smoothing: antialiased;
  111.   -moz-osx-font-smoothing: grayscale;
  112. }
  113.  
  114. body, html {
  115.   font: {text:font size}px '{text:font}';
  116.   background: {color:background};
  117.   {block:IfBackgroundImage}
  118.     background: url('{image:Background}');
  119.     background-size: cover;
  120.     background-repeat: no-repeat;
  121.   {/block:IfBackgroundImage}
  122.   position: relative;
  123. }
  124.  
  125. ::selection {
  126.   background: {color:accent};
  127.   color: {color:accent text};
  128. }
  129.  
  130. ::-moz-selection {
  131.   background: {color:accent};
  132.   color: {color:accent text};
  133. }
  134.  
  135. b, strong {}
  136.  
  137. a {
  138.   text-decoration: none;
  139.   color: {color:links};
  140. }
  141.  
  142. a:hover {
  143.   color: {color:link hover};
  144. }
  145.  
  146. i {}
  147. strike {}
  148.  
  149. pre {
  150.   margin 20px 10px;
  151.   background: {color:blockquote};
  152.   padding: 10px 10px;
  153.   font: {text:font size}px monospace;
  154.   letter-spacing: 0px;
  155.   text-align: left;
  156.   width: 100%;
  157.   line-height: 160%;
  158.   overflow: wrap;
  159.   white-space: pre-wrap;       /* css-3 */
  160.   white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  161.   white-space: -pre-wrap;      /* Opera 4-6 */
  162.   white-space: -o-pre-wrap;    /* Opera 7 */
  163.   word-wrap: break-word;
  164. }
  165.  
  166. code {
  167.   font-family: monospace;
  168. }
  169.  
  170. small, sub {
  171.   font-size: calc({text:font size}px - 1px);
  172. }
  173.  
  174. blockquote {
  175.   border-left: 5px solid {color:blockquote};
  176.   margin: 0 0 0 15px;
  177.   padding: 0 20px 0 20px;
  178. }
  179.  
  180. .npf_color_joey {
  181. color:#ff492f;
  182. }
  183.  
  184. .npf_color_monica {
  185. color:#ff8a00;
  186. }
  187.  
  188. .npf_color_chandler {
  189. color:#973ff4;
  190. }
  191.  
  192. .npf_color_phoebe {
  193. color:#fcf01d;
  194. }
  195.  
  196. .npf_color_rachel {
  197. color:#00b8ff;
  198. }
  199.  
  200. .npf_color_ross {
  201. color:#00cf35;
  202. }
  203.  
  204. .npf_color_niles {
  205. color:#ff62ce;
  206. }
  207.  
  208. .npf_color_frasier {
  209. color:#001935;
  210. }
  211.  
  212. .npf_color_mr_big {
  213. color:#000c1a;
  214. }
  215.  
  216. .permalink blockquote {
  217.   margin: 10px 0;
  218. }
  219.  
  220. .caption ul {
  221.   margin: 20px 0 20px 35px;
  222.   text-align: justify;
  223. }
  224.  
  225. .caption li {
  226.   margin: 5px 0;
  227. }
  228.  
  229. /*headlines*/
  230. h1, h2, h3, h4, h5 {
  231.   font-family: {text:Font Two};
  232. }
  233.  
  234. h1 {
  235.   font-size: calc({text:font size}px + 10px);
  236.   padding: 25px 40px;
  237.   line-height: 100%;
  238. }
  239.  
  240. h3 { /*quote*/
  241.   font-size: calc({text:font size}px + 5px);
  242. }
  243.  
  244. input#mobile_button {
  245.   display: none;
  246. }
  247.  
  248. #mobile_menu {
  249.   display: none;
  250. }
  251.  
  252. /*transitions*/
  253. a, body > iframe:first-child,
  254. #tumblr_controls,
  255. .custom_like_button {
  256.   -ms-transition: 0.5s;
  257.   -moz-transition: 0.5s;
  258.   -webkit-transition: 0.5s;
  259.   transition: 0.5s;
  260. }
  261.  
  262. /*animations*/
  263. main {
  264. -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  265.   -moz-animation: fadein 2s; /* Firefox < 16 */
  266.  -ms-animation: fadein 2s; /* Internet Explorer */
  267.  -o-animation: fadein 2s; /* Opera < 12.1 */
  268.  animation: fadein 2s;
  269. }
  270.  
  271. aside{
  272.  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
  273.   -moz-animation: fadein 1s; /* Firefox < 16 */
  274.  -ms-animation: fadein 1s; /* Internet Explorer */
  275.  -o-animation: fadein 1s; /* Opera < 12.1 */
  276.  animation: fadein 1s;
  277. }
  278.  
  279. @keyframes fadein {
  280.    from { opacity: 0; }
  281.    to   { opacity: 1; }
  282. }
  283.  
  284.  
  285.  
  286. /*LAYOUT*/
  287.  
  288. #tumblr_controls {display: none; z-index: 9;}
  289.  
  290. #wrapper {
  291.  display: flex;
  292.  flex-direction: row;
  293.  width: 100%;
  294.  height: auto;
  295.  margin: 0 auto;
  296. }
  297.  
  298. /*post container*/
  299. main {
  300.  position: relative;
  301.  height: auto;
  302.  width: calc(100vw - 350px);
  303.  margin-left: 350px;
  304. }
  305.  
  306. /*sidebar*/
  307. aside {
  308.  position: fixed;
  309.  display: flex;
  310.  flex-direction: column;
  311.  height: 100%;
  312.  width: 350px;
  313.  background: {color:sidebar background};
  314. }
  315.  
  316. /*footer*/
  317. footer {
  318.  height: 80px;
  319.  width: calc(100% - 350px);
  320.  margin-left: 350px;
  321.  background: {color:footer background};
  322.  color: {color:Sidebar Text};
  323.  text-align: center;
  324. }
  325.  
  326. #copyright {
  327.  display: none;
  328. }
  329.  
  330.  
  331. /*SIDEBAR*/
  332. #page_title {
  333.  display: flex;
  334.  align-items: center;
  335.  background: {color:Title Background};
  336.  text-transform: uppercase;
  337.  height: 80px;
  338. }
  339.  
  340. #page_title h1 {
  341.  color: {color:accent text};
  342.  padding: 0 20px;
  343. }
  344.  
  345. #page_title img {
  346.  height: 80px;
  347. }
  348.  
  349. #desc, nav {
  350.  padding: 40px 25px;
  351.  color: {color:Sidebar Text};
  352. }
  353.  
  354. #desc span:empty {
  355.  padding: 0;
  356. }
  357.  
  358. #side_img {
  359.  display: none;
  360.  width: 100%;
  361.  height: 250px;
  362.  object-fit: cover;
  363. }
  364.  
  365. {block:ifSidebarImage}
  366. #side_img {
  367.  display: block;
  368. }
  369. {/block:ifSidebarImage}
  370.  
  371. nav {
  372.  padding: 0px 0px;
  373.  background: rgba(127,127,127,0.03);
  374.  flex: 1;
  375.  overflow-y: auto;
  376.  margin-bottom: 50px;
  377. }
  378.  
  379. nav li {
  380.  display: flex;
  381.  align-items: center;
  382.  flex-direction: row-reverse;
  383. }
  384.  
  385. nav li i {
  386.  width: 70px;
  387.  height: 50px;
  388.  background: linear-gradient(to right bottom, {color:accent} 0%, {color:accent two} 100%);;  
  389. }
  390.  
  391. nav li .fas, nav li .far, nav li .fa {
  392.  display: flex;
  393.  align-items: center;
  394.  justify-content: center;
  395.  font-size: 20px;
  396. }
  397.  
  398. nav ul {
  399.  list-style-type: none;
  400. }
  401.  
  402. nav::-webkit-scrollbar {
  403.  width: 5px;
  404.  height: 8px;
  405.  background-color: {color:sidebar background};
  406. }
  407.  
  408. nav::-webkit-scrollbar-thumb {
  409.  background: rgba(127,127,127,0.5);  
  410. }
  411.  
  412. nav ul li {
  413.  margin: 3px 0;    
  414. }
  415. nav li:first-child {
  416.  margin-top: 0;
  417. }
  418. nav li:last-child {
  419.  margin: bottom: 0;
  420. }
  421.  
  422. nav a {
  423.  display: block;
  424.  height: 50px;
  425.  padding: 16px;
  426.  width: 100%;
  427.  background: rgba(127,127,127,0.05);
  428.  color: {color:accent text};
  429.  font-family: {text:font two};
  430.  font-weight: bold;
  431.  text-transform: uppercase;
  432. }
  433.  
  434. nav a:hover {
  435.  background: rgba(127,127,127,0.25);
  436.  color: {color:sidebar text};  
  437. }
  438.  
  439. #search_bar {
  440.  position: absolute;
  441.  bottom: 0;
  442.  width: 100%;
  443.  display: flex;
  444.  flex-direction: row-reverse;
  445. }
  446.  
  447. #search_bar form {
  448.  flex: 1;
  449. }
  450.  
  451. #search_bar input, #search_bar select, #search_bar textarea{
  452.  height: 50px;
  453.  width: 100%;
  454.  border: 0;
  455.  padding: 20px;
  456.  font-size: {text:font size}px;
  457. }
  458.  
  459. #search_bar input:focus {
  460.  border: 0;
  461.  box-shadow: none;
  462.  outline: 0;
  463. }
  464.  
  465. #search_bar i {
  466.  height: 50px;
  467.  width: 50px;
  468.  color: {color:sidebar text};
  469.  background: rgba(127,127,127,0.05);
  470.  font-size: 20px;
  471.  padding: 15px;
  472. }
  473.  
  474. /*POSTS*/
  475. .article_wrapper {
  476.  padding: 80px 20px;
  477. }
  478.  
  479. {block:PermalinkPage}
  480. .article_wrapper {
  481.  padding-bottom: 0;
  482. }
  483. {/block:PermalinkPage}
  484.  
  485. .article_wrapper:nth-of-type(2n) {
  486.  background: rgba(127,127,127,.05);
  487. }
  488.  
  489. article {
  490.  max-width: {select:post width}px;
  491. }
  492.  
  493. .post {
  494.  display: flex;
  495.  flex-direction: column;
  496.  position: relative;
  497.  height: auto;
  498.  margin: auto;
  499.  max-width: {select:post width};
  500.  color: {color:text};
  501. }
  502.  
  503. .post_header {
  504.  display: flex;
  505.  flex-direction: row;
  506.  text-align: center;
  507.  font-family: {text:font two};
  508.  align-items: center;
  509.  height: 50px;
  510. }
  511.  
  512. .post_header > * {
  513.   min-width: 50px;
  514.   height: 100%;
  515.   background: {color:post info};
  516. }
  517.  
  518. .pinfo > img {
  519.   width: 50px;
  520. }
  521.  
  522. .post_body {
  523.   max-width: {select:post width};
  524. }
  525.  
  526. .cpt {
  527.   max-width: {select:post width}px;
  528. }
  529.  
  530. {block:IfPostShadow}
  531. .cpt {
  532.   -webkit-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
  533.   -moz-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
  534.   box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
  535. }
  536. {/block:IfPostShadow}
  537.  
  538. .post_footer {
  539.   display: flex;
  540.   justify-content: space-between;
  541.   margin: 10px 0 0 0;
  542.   width: 100%;
  543. }
  544.  
  545. .post_title {
  546.   text-align: justify;
  547. }
  548.  
  549. .post_title h1 {
  550.   background: linear-gradient(to right, {color:accent} 0%, {color:accent two} 100%);
  551.   line-height: 150%;
  552.   color: {color:title color};
  553. }
  554.  
  555. /*CAPTIONS & UNNEST*/
  556. .caption {
  557.  background: {color:post background};
  558.   padding: 40px;
  559.   margin-top: 0px;
  560.   line-height: 150%;
  561.   text-align: justify;
  562. }
  563.  
  564. .reblog_list {
  565.   background: {color:post background};
  566. }
  567. .caption h2 {
  568.   margin-bottom: 10px; width: 100%; text-align: left;
  569. }
  570.  
  571. .caption p a,
  572. .caption ul a {
  573.   padding: 0 0px;
  574.   box-shadow: inset 0 -2px {color:accent};
  575. }
  576.  
  577. .caption a:hover {
  578.   box-shadow: inset 0 -50px {color:accent};
  579.   color: {color:accent text};
  580. }
  581.  
  582. .caption p {}
  583.  
  584. .caption *, #desc p {
  585.   margin: 15px 0;
  586. }
  587.  
  588. .caption p:empty {
  589.   margin: 0;
  590. }
  591.  
  592. .caption p:only-child {
  593.   margin: 0;
  594. }
  595.  
  596. .caption :first-child {
  597.   margin-top: 0;
  598. }
  599.  
  600. .caption :last-child {
  601.   margin-bottom: 0;
  602. }
  603.  
  604. .caption > :only-child {
  605.   margin: 0 auto;
  606. }
  607.  
  608. .caption :first-child:not(:empty) {
  609.   margin-top: 0;
  610. }
  611.  
  612. .caption blockquote p {
  613.   margin: 0 auto;
  614. }
  615.  
  616. .caption img {
  617.   max-width: 100%;
  618. }
  619.  
  620. .caption hr {
  621.   border-style: solid;
  622.   color: {color:accent};
  623. }
  624.  
  625. .reblog_parent {
  626.   padding: 0px 0px 0px 0px;
  627.   margin: 0px 0px;
  628.   background: {color:post background};
  629. }
  630.  
  631. .reblog_parent:first-child {
  632.   margin-top: 0;
  633. }
  634.  
  635. .reblog_parent:last-child {
  636.   margin-bottom: 0;
  637. }
  638.  
  639. .reblog_header,
  640. .asker,
  641. .answerer {
  642.   display: flex;
  643.   align-items: center;
  644.   font-family: {text:Font Two};
  645.   text-transform: uppercase;
  646.   background: {color:Reblog Header};
  647.   height: 50px;
  648.   color: {color:reblog header text};
  649. }
  650.  
  651. .reblog_header img,
  652. .reblog_header i,
  653. .asker img,
  654. .answerer img {
  655.   height: 50px;
  656.   margin-right: 10px;
  657. }
  658.  
  659. /*deactivated user*/
  660. .reblog_header i {
  661.   padding: 17px 0 17px 17px
  662. }
  663.  
  664. .answerer {
  665.   flex-direction: row-reverse;
  666. }
  667.  
  668. .answerer img {
  669.   margin: 0 0 0 10px;
  670. }
  671.  
  672. .reblog_body {
  673.   margin-top: 0px;
  674. }
  675.  
  676. .reblog_header a,
  677. .asker,
  678. .answerer {
  679.   text-decoration: none;
  680.   color: {color:reblog header text};
  681.   font-weight: bold;
  682. }
  683.  
  684. .reblog .qh,
  685. .reblog .lh,
  686. .reblog .audio_post,
  687. .reblog .spotify_audio_player,
  688. .reblog .soundcloud_audio_player  {
  689.   margin-bottom: 20px;
  690. }
  691.  
  692. .reblog.chat .reblog-list  {
  693.   display: none;
  694. }
  695.  
  696. /*POST TYPES*/
  697.  
  698. /*photo*/
  699. .post_photo img {
  700.   max-width: 100%;
  701.   line-height: 100%;
  702. }
  703.  
  704. /*photoset*/
  705. iframe.photoset {
  706.   max-width: {select:post width}px;
  707. }
  708.  
  709. /*link*/
  710. .lh a {
  711.   padding: 0 5px;
  712.   color: {color:accent text};
  713. }
  714. .lh.caption {
  715.   background: {color:accent};
  716. }
  717.  
  718. /*chat*/
  719. .chat_lines {
  720.   padding: 10px;
  721. }
  722.  
  723. .chat_lines.odd {
  724.   background: {color:accent};
  725.   color: {color:accent text};
  726. }
  727.  
  728. /*video*/
  729. .tumblr_video_container {
  730.   position: relative;
  731.   overflow: hidden;
  732.   padding-top: 56.25%;
  733.   width: 100%!important;
  734.   height: 100%!important;
  735. }
  736.  
  737. .tumblr_video_iframe {
  738.   position: absolute;
  739.   top: 0;
  740.   left: 0;
  741.   width: 100%!important;
  742.   height: 100%!important;
  743.   border: 0;
  744. }
  745.  
  746. .tumblr_video_container {
  747.   max-height: 540px!important;
  748.   overflow: hidden;
  749.   margin-bottom: 5px;
  750. }
  751.  
  752. #youtube_iframe {
  753.   width: 100%!important;
  754. }
  755.  
  756. /*ask*/
  757. .asker a,
  758. .answerer a {
  759.   padding: 5px;
  760.   color: {color:accent text};
  761. }
  762.  
  763. .question {
  764.   margin-bottom: 15px;
  765.   background: {color:post background};
  766. }
  767.  
  768. .answerer .caption {
  769.   border-top: 5px solid {color:accent};
  770.   margin-top: 5px;
  771. }
  772.  
  773. .answerer ~ .caption {
  774.   margin-bottom: 25px;
  775. }
  776.  
  777. .answerer {
  778.   text-align: right;
  779.   margin-bottom: 0px;
  780. }
  781.  
  782. /*audio*/
  783. .spotify_audio_player,
  784. .soundcloud_audio_player  {
  785.   width: 100%; height: 80px;
  786. }
  787.  
  788. .audio_post {
  789.   background: {color:post background};
  790.   width: 100%; display: flex;
  791.   flex-wrap: wrap;
  792.   align-items: center;
  793. }
  794.  
  795. .audio_player {
  796.   position: relative;
  797. }
  798.  
  799. .audio_player img {
  800.   width: 150px;
  801. }
  802.  
  803. .play_button {
  804.   position: absolute;
  805.   height: 50px;
  806.   width: 50px;
  807.   top: 40px;
  808.   left: 45px;
  809.   border-radius: 50%;
  810.   overflow: hidden;
  811. }
  812.  
  813. .tumblr_audio_player {
  814.   width: 150px;
  815.   height: 150px;
  816.   transform: scale(2.1);
  817.   padding: 37px 33.5px;
  818. }
  819.  
  820. .audio_info {
  821.   padding: 0 40px;
  822. }
  823.  
  824. .audio_info ul {
  825.   flex-grow: 1;
  826.   overflow-y: auto;
  827. }
  828.  
  829. .audio_info ul span {
  830.   background: {color:accent};
  831.   color: {color:accent text};
  832.   font-weight: normal;
  833.   text-transform: capitalize;
  834.   margin: 0px 20px 0 0;
  835.   padding: 0 10px;
  836. }
  837.  
  838. .audio_info ul li {
  839.   display: flex;
  840.   justify-content: space-between;
  841.   align-items: center;
  842.   text-align: right;
  843.   padding: 5px 0;
  844.   line-height: 200%;
  845. }
  846.  
  847. .audio_info ul li:first-of-type {padding-top: 0;}
  848. .audio_info ul li:last-of-type {padding-bottom: 0;}
  849. .audio_info ul li:only-of-type {padding: 0;}
  850.  
  851. /*POST INFO*/
  852. .post_info {
  853.   display: flex;
  854.   flex-direction: row-reverse;
  855.   justify-content: space-between;
  856. }
  857.  
  858. .post_header a,
  859. .post_header i,
  860. .post_footer a,
  861. .post_footer i,
  862. .custom_like_button {
  863.   color: {color:post info text};
  864. }
  865.  
  866. .post_header i,
  867. .pdate a,
  868. .pnotes a {
  869.   display: flex;
  870.   align-items: center;
  871.   justify-content: center;
  872.   font-weight: bold;
  873. }
  874.  
  875. .post_header i {
  876.   font-size: 25px;
  877. }
  878.  
  879. .pinfo img {
  880.   height: 50px;
  881.   width: 50px;
  882. }
  883.  
  884. .ptags {
  885.   max-width: {select:post width}px;
  886.   margin: 5px 0;
  887.   line-height: 250%;
  888.   word-wrap: keep-all;
  889. }
  890.  
  891. .ptags a {
  892.   font-size: calc({text:font size}px - 1px);
  893.   font-family: {text:font two};
  894.   margin: 0 10px 0 0;
  895.   color: {color:accent text};
  896.   padding: 10px 10px;
  897.   background: linear-gradient(to right bottom, {color:accent} 0%, {color:accent two} 100%);
  898.   font-weight: bold;
  899. }
  900.  
  901. .pdate {
  902.   padding: 0px;
  903.   text-transform: uppercase;
  904.   width: auto;
  905. }
  906.  
  907. .pdate a {
  908.   background: rgba(255,255,255,0.05);
  909. }
  910.  
  911. .pnotes {
  912.   text-align: right;
  913. }
  914.  
  915. .pnotes a {
  916.   background: rgba(255,255,255,0.1);
  917. }
  918.  
  919. .pdate a,
  920. .pnotes a {
  921.   padding: 0 10px; height: 100%;
  922. }
  923.  
  924. .answer .rblg {
  925.   display: none;
  926. }
  927.  
  928. /*BUTTONS & CONTROLS*/
  929. .buttons {
  930.  display: flex;
  931.   justify-self:
  932.   flex-end;
  933.   margin-left: auto;
  934. }
  935.  
  936. .buttons a,
  937. .buttons i,
  938. .custom_like_button {
  939.   font-size: 25px;
  940.   color: {color:text};
  941. }
  942.  
  943. .custom_like_button {
  944.   position: relative;
  945.   margin-left: 10px;
  946. }
  947.  
  948. .custom_like_button:hover {cursor: pointer;}
  949. .like_button {
  950.   position: absolute;
  951.   top: 0;
  952.   left: 0;
  953.   width: 100%;
  954.   height: 100%;
  955.   z-index: 9;
  956.   opacity: 0.0001;
  957. }
  958.  
  959. .like_button.liked + i {
  960.   color: {color:accent};
  961. }
  962.  
  963.  
  964. /*PAGINATION*/
  965. #pagination {
  966.  position: relative;
  967.  height: 100%;
  968.  display: flex;
  969.   justify-content: center;
  970.   align-items: center;
  971. }
  972.  
  973. #pagination a, #pagination b {
  974.   color: {color:footer text};
  975.   padding: 27px 10px;
  976.   width: 80px;
  977.   height: 100%;
  978.   background: rgba(172,172,172,0.15);
  979.   font-family: {text:font two};
  980. }
  981.  
  982. #pagination a:nth-of-type(2n) {
  983.   background: rgba(172,172,172,0.1);
  984. }
  985.  
  986. #pagination b {
  987.   color: {color:accent text};
  988.   background: {color:accent};
  989. }
  990.  
  991. #pagination b,
  992. #pagination a,
  993. #pagination i {
  994.   font-size: 25px;
  995. }
  996.  
  997.  
  998. /*tags, search, etc headlines*/
  999. .tag_info {
  1000.   position: relative;
  1001.   max-width: {select:post width}px;
  1002.   margin: 80px auto;
  1003. }
  1004.  
  1005. .tag_info:after {
  1006.   position: absolute;
  1007.   content: "";
  1008.   width: 15%;
  1009.   height: 5px;
  1010.   background: {color:accent};
  1011.   background-image: -webkit-linear-gradient(left, transparent 0%, {color:accent} 50%, transparent 100%);
  1012.   background-image: -moz-linear-gradient(left,  transparent 0%, {color:accent} 50%, transparent 100%);
  1013.   background-image: -o-linear-gradient(left,  transparent 0%, {color:accent} 50%, transparent 100%);
  1014.   background-image: linear-gradient(to right, {color:accent} 80%, transparent 100%);
  1015. }
  1016.  
  1017. .tag_info h2 {
  1018.   text-align: left;
  1019. }
  1020.  
  1021. .no_post h2 {
  1022.   background: none;
  1023. }
  1024.  
  1025.  
  1026. /*PERMALINK*/
  1027. .permalink {
  1028.   position: relative;
  1029.   max-width: {select:post width}px;
  1030.   margin: 25px auto 100px auto;
  1031.   padding: 0 20px;
  1032. }
  1033.  
  1034. .pl i,
  1035. .pl a {
  1036.   margin: 0 5px 5px 0;
  1037. }
  1038.  
  1039. .plnotes {
  1040.   margin: 25px 0;
  1041.   max-width: {select:post width}px;
  1042. }
  1043.  
  1044. .plnotes ol {
  1045.   margin: 50px 0;
  1046.   padding: 0;
  1047.   list-style-type: none;
  1048. }
  1049.  
  1050. .plnotes ol li {
  1051.   margin: 5px 0;
  1052.   padding: 0;
  1053.   font-size: calc({text:font size}px - 1px);
  1054.   color: #999;
  1055. }
  1056.  
  1057. .plnotes ol li a {
  1058.   text-transform: uppercase;
  1059.   font-style: italic;
  1060.   font-weight: bold;
  1061.   margin: 0 5px;
  1062.   color: #999;
  1063. }
  1064.  
  1065. .plnotes ol li blockquote a {
  1066.   text-transform: none;
  1067.   font-weight: normal;
  1068. }
  1069.  
  1070. .plnotes img {
  1071.   display: none;
  1072.   vertical-align: middle;
  1073. }
  1074.  
  1075. .plnotes img,
  1076. .plnotes a {
  1077.   margin: 0 5px 0 0;
  1078. }
  1079.  
  1080. .avatar_frame {
  1081.   display: none;
  1082. }
  1083.  
  1084. .more_notes_link_container {
  1085.   margin-top: 50px!important;
  1086. }
  1087.  
  1088. .more_notes_link_container a {
  1089.   font-style: normal!important;
  1090. }
  1091.  
  1092. .note.like::before,
  1093. .note.reblog::before,
  1094. .note.reply::before {
  1095.   font-family: 'Font Awesome 5 Free','Font Awesome 5 Brands';
  1096.   font-weight: 900;
  1097.   display: inline-block;
  1098. }
  1099.  
  1100. .note.reblog::before {
  1101.   content: "\f079";
  1102.   display: inline;
  1103.   width: 1.25em;
  1104. }
  1105.  
  1106. .note.like::before {
  1107.   content: "\f004";
  1108.   display: inline;
  1109.   width: 1.25em;
  1110. }
  1111.  
  1112. .note.reply::before {
  1113.   width: 1.25em;
  1114.   display: inline-block;
  1115.   text-align:center;
  1116.   content: "\f075";
  1117. }
  1118.  
  1119. #scrolltop {
  1120.   position: fixed;
  1121.   bottom: 45px;
  1122.   right: 30px;
  1123.   font-size: 25px;
  1124.   padding: 15px 20px;
  1125.   filter: opacity(0.3);
  1126.   cursor: pointer;
  1127.   display: none;
  1128.   z-index: 8;
  1129.   background: #1e1e1e;
  1130.   -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
  1131.   -moz-animation: fadein 1s; /* Firefox < 16 */
  1132.  -ms-animation: fadein 1s; /* Internet Explorer */
  1133.  -o-animation: fadein 1s; /* Opera < 12.1 */
  1134.  animation: fadein 1s;
  1135. }
  1136.  
  1137. #scrolltop i {
  1138.  color: #fff;
  1139. }
  1140.  
  1141. #scrolltop:hover {
  1142.  filter: opacity(1);
  1143. }
  1144.  
  1145. #scrolltop:focus {
  1146.  outline:0;
  1147. }
  1148.  
  1149. /*OTHER PAGES*/
  1150. {block:AskPage}
  1151. .caption {
  1152.  line-height: 100%;
  1153.  background: none;
  1154.  padding: 0;}
  1155. {/block:AskPage}
  1156.  
  1157. {block:SubmitPage}
  1158. .caption {
  1159.  line-height: 100%;
  1160.  background: none;
  1161.  padding: 0;
  1162. }
  1163. {/block:SubmitPage}
  1164.  
  1165. /*MEDIA QUERIES*/
  1166. @media only screen and (max-width: 999px) {
  1167.  aside {
  1168.    position: fixed;
  1169.    flex-direction: row;
  1170.    height: 50px;
  1171.    width: 100%;
  1172.    z-index: 8;
  1173.  }
  1174.  
  1175.  nav,
  1176.  #desc,
  1177.  #search_bar,
  1178.  #side_img {
  1179.    display: none;
  1180.  }
  1181.  
  1182.  #page_title,
  1183.  #page_title img {
  1184.    height: 50px;
  1185.  }
  1186.  
  1187.  main,
  1188.  footer {
  1189.    margin: 0 auto;
  1190.    width: 100vw;
  1191.  }
  1192.  
  1193.  #scrolltop {
  1194.    display: none;
  1195.  }
  1196.  
  1197.  #mobile_menu, #mobile_button {
  1198.    display: block;
  1199.  }
  1200.  
  1201.  #mobile_menu {
  1202.    height: 0px;
  1203.    display: block;
  1204.    overflow: hidden;
  1205.    padding: 0 0 0;
  1206.    list-style-type: none;
  1207.    transition: height 0.5s ease-out;
  1208.    position: fixed;
  1209.    min-width: 100%;
  1210.    top: 73px;
  1211.    background: {color:background};
  1212.    z-index: 99;
  1213.    text-align: center;
  1214.    overflow-y: auto;
  1215.  }
  1216.  
  1217.  #mobile_menu li {
  1218.    padding: 10px 20px;
  1219.  }
  1220.  
  1221.  #mobile_menu li a {
  1222.    color: {color:text};
  1223.    font-size: calc({text:font size}px + 10px);
  1224.    text-transform: capitalize;
  1225.  }
  1226.  
  1227.  #tumblr_controls {
  1228.    display: block;
  1229.    position: fixed;
  1230.    top: 0px;
  1231.    right: 0;
  1232.    padding: 10px 20px;
  1233.    font-size: 22px;
  1234.    background: {color:accent};
  1235.    color: {color:accent text};
  1236.    visibility: visible;
  1237.    height: 50px;
  1238.    z-index: 9;
  1239.  }
  1240.  
  1241.  label#tumblr_controls:hover,
  1242.  input#mobile_button:checked ~ label {
  1243.    cursor: pointer;
  1244.    background:{color:border two};
  1245.  }
  1246.  
  1247.  input#mobile_button:checked ~ ul#mobile_menu {
  1248.    height: calc(100% - 73px);
  1249.    transition: height 0.5s ease-in;
  1250.    padding: 35px 0 0 0;
  1251.  }
  1252. }
  1253.  
  1254. {CustomCss}
  1255.  
  1256. </style>
  1257.  
  1258. </head>
  1259.  
  1260. <body>
  1261.   {block:ifScrollTop}
  1262.   <div id="scrolltop" role="button" tabindex="0"><i class="fas fa-arrow-up"></i></div>
  1263.   {/block:ifScrollTop}
  1264. <!--CONTROLS & MOBILE--------------------------------------------------->
  1265.   <!--MOBILE NAVIGATION-->
  1266.   <input id="mobile_button" type="checkbox" name="mobile_menu" />
  1267.   <label id="tumblr_controls" for="mobile_button"><i class="fas fa-bars"></i></label>
  1268.   <ul id="mobile_menu">
  1269.     <li><a href="/" title="Home">Home</a></li>
  1270.     {block:AskEnabled}
  1271.     <li><a href="/ask" title="{AskLabel}">{AskLabel}</a></li>
  1272.     {/block:AskEnabled}
  1273.     {block:SubmissionsEnabled}
  1274.     <li><a href="/submit" title="{SubmitLabel}">{SubmitLabel}
  1275.       </a>
  1276.     </li>
  1277.     {/block:SubmissionsEnabled}
  1278.     <!--custom links-->
  1279.     {block:HasPages}
  1280.     {block:Pages}
  1281.     <li><a href="{URL}">{Label}
  1282.       </a>
  1283.     </li>
  1284.     {/block:Pages}
  1285.     {/block:HasPages}
  1286.     {block:Iflinkoneurl}
  1287.     <li><a href="{text:link one url}">{text:link one title}
  1288.       </a>
  1289.     </li>
  1290.     {/block:Iflinkoneurl}
  1291.     {block:Iflinktwourl}
  1292.     <li><a href="{text:link two url}">{text:link two title}
  1293.       </a>
  1294.     </li>
  1295.     {/block:Iflinktwourl}
  1296.     {block:Iflinkthreeurl}
  1297.     <li><a href="{text:link three url}">{text:link three title}
  1298.       </a>
  1299.     </li>
  1300.     {/block:Iflinkthreeurl}
  1301.     {block:Iflinkfoururl}
  1302.     <li><a href="{text:link four url}">{text:link four title}
  1303.       </a>
  1304.     </li>
  1305.     {/block:Iflinkfoururl}
  1306.     {block:Iflinkfiveurl}
  1307.     <li><a href="{text:link five url}"> {text:link five title}
  1308.       </a>
  1309.     </li>
  1310.     {/block:Iflinkfiveurl}
  1311.   </ul>
  1312. <!--CONTROLS END-------------------------------------------------------->
  1313.  
  1314. <!--CONTAINER----------------------------------------------------------->
  1315.   <div id="wrapper">
  1316.     <aside>
  1317.       <!--PAGE TITLE & ICON-->
  1318.       <div id="page_title">
  1319.         <img src="{PortraitURL-128}">
  1320.         <a href="/">
  1321.           <h1>{Title}</h1>
  1322.         </a>
  1323.       </div>
  1324.       {block:ifSidebarImage}
  1325.       <img id="side_img" src="{image:sidebar}">
  1326.       {/block:ifSidebarImage}
  1327.       {block:ShowDescription}
  1328.       {block:Description}
  1329.       <div id="desc">
  1330.         {Description}
  1331.       </div>
  1332.       {/block:Description}
  1333.       {/block:ShowDescription}
  1334.       <nav>
  1335.         <ul>
  1336.           <li><i class="far fa-star"></i><a href="/" title="Home">Home</a></li>
  1337.           {block:AskEnabled}
  1338.           <li><i class="far fa-envelope"></i><a href="/ask" title="{AskLabel}">{AskLabel}</a></li>
  1339.           {/block:AskEnabled}
  1340.           {block:SubmissionsEnabled}
  1341.           <li><i class="fas fa-edit"></i><a href="/submit" title="{SubmitLabel}">{SubmitLabel}
  1342.             </a>
  1343.           </li>
  1344.           {/block:SubmissionsEnabled}
  1345.           <!--custom links-->
  1346.           {block:HasPages}
  1347.           {block:Pages}
  1348.           <li><i class="fas fa-link"></i><a href="{URL}">{Label}
  1349.             </a>
  1350.           </li>
  1351.           {/block:Pages}
  1352.           {/block:HasPages}
  1353.           {block:Iflinkoneurl}
  1354.           <li><i class="fas fa-link"></i><a href="{text:link one url}">{text:link one title}
  1355.             </a>
  1356.           </li>
  1357.           {/block:Iflinkoneurl}
  1358.           {block:Iflinktwourl}
  1359.           <li><i class="fas fa-link"></i><a href="{text:link two url}">{text:link two title}
  1360.             </a>
  1361.           </li>
  1362.           {/block:Iflinktwourl}
  1363.           {block:Iflinkthreeurl}
  1364.           <li><i class="fas fa-link"></i><a href="{text:link three url}">{text:link three title}
  1365.             </a>
  1366.           </li>
  1367.           {/block:Iflinkthreeurl}
  1368.           {block:Iflinkfoururl}
  1369.           <li><i class="fas fa-link"></i><a href="{text:link four url}">{text:link four title}
  1370.             </a>
  1371.           </li>
  1372.           {/block:Iflinkfoururl}
  1373.           {block:Iflinkfiveurl}
  1374.           <li><i class="fas fa-link"></i><a href="{text:link five url}"> {text:link five title}
  1375.             </a>
  1376.           </li>
  1377.           {/block:Iflinkfiveurl}
  1378.           <li><i class="far fa-folder-open"></i><a href="/archive" title="{lang:Archive}">{lang:Archive}</a></li>
  1379.         </ul>
  1380.       </nav>
  1381.       <div id="search_bar">
  1382.         <form action="/search" method="get">
  1383.           <input id="search_input" type="text" name="q"
  1384.            value="{SearchQuery}" placeholder="{lang:Search}...">
  1385.         </form>
  1386.         <i class="fas fa-search"></i>
  1387.       </div>
  1388.     </aside>
  1389.    
  1390. <!--POST CONTAINER------------------------------------------------------>
  1391.     <main>
  1392.       <!--TAG & SEARCH RESULT INFO-->
  1393.       {block:TagPage}
  1394.       <div class="tag_info">
  1395.         <h1><span></span>
  1396.           Posts tagged "{Tag}"
  1397.         </h1>
  1398.       </div>
  1399.       {block:TagPage}
  1400.       {block:SearchPage}
  1401.       <div class="tag_info">
  1402.         <h1><span></span>
  1403.           {SearchResultCount} results for "{SearchQuery}"
  1404.         </h1>
  1405.       </div>
  1406.       {block:SearchPage}
  1407.       {block:NoPosts}
  1408.       <div class="tag_info no_post">
  1409.         <h1>No posts found.</h1>
  1410.       </div>
  1411.       {/block:NoPosts}
  1412.       <!--POSTS-->
  1413.       {block:Posts}
  1414.       <div class="article_wrapper">
  1415.         <article id="{PostID}" class="post {PostType} {TagsAsClasses}">
  1416.           {block:IndexPage}
  1417.           <div class="post_header">
  1418.             <!--<i class="fas fa-font"></i>
  1419.              <!--if reblog-->
  1420.             <!--{block:RebloggedFrom}
  1421.              <div class="via rblg pinfo">
  1422.                 <a href="{ReblogRootURL}">
  1423.                 <img src="{ReblogRootPortraitURL-128}">
  1424.                 </a>
  1425.              </div>
  1426.              {/block:RebloggedFrom}-->
  1427.             {block:Date}
  1428.             <div class="pdate pinfo">
  1429.               <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} {Year}</a>
  1430.             </div>
  1431.             {/block:Date}
  1432.             <div class="pnotes pinfo">
  1433.               <a href="{Permalink}">{NoteCount}</a>
  1434.             </div>
  1435.           </div>
  1436.           <!--post_header-->
  1437.           {/block:IndexPage}
  1438.           <!--POST BODY-->
  1439.           <div class="post_body">
  1440.             <div class="cpt">
  1441.               {block:Title}
  1442.               <div class="post_title">
  1443.                 <h1>{Title}</h1>
  1444.               </div>
  1445.               {/block:Title}
  1446.               <!--TEXT-->
  1447.               {block:Text}
  1448.               {block:NotReblog}
  1449.               <div class="caption">
  1450.                 {Body}
  1451.               </div>
  1452.               {block:NotReblog}
  1453.               {/block:Text}
  1454.               <!--PHOTO-->
  1455.               {block:Photo}
  1456.               <div class="post_photo">
  1457.                 <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  1458.               </div>
  1459.               {/block:Photo}
  1460.               <!--PHOTOSET-->
  1461.               {block:Photoset}
  1462.               {Photoset-700}
  1463.               {/block:Photoset}
  1464.               <!--QUOTE-->
  1465.               {block:Quote}
  1466.               <div class="qh caption">
  1467.                 <h3>{Quote}</h3>
  1468.               </div>
  1469.               {block:NotReblog}
  1470.               {block:Source}
  1471.               <div class="caption">
  1472.                 <span class="qsrc">{Source}</span>
  1473.               </div>
  1474.               {/block:Source}
  1475.               {/block:NotReblog}
  1476.               {/block:Quote}
  1477.               <!--LINK-->
  1478.               {block:Link}
  1479.               <div class="lh caption">
  1480.                 <h3><a title="{URL}" href="{URL}">
  1481.                   <i class="fas fa-link"></i>
  1482.                   {Name}</a>
  1483.                 </h3>
  1484.               </div>
  1485.               <!--
  1486.                {block:Thumbnail}
  1487.                  <img class="thumb" src="{Thumbnail-HighRes}"></img>
  1488.                {/block:Thumbnail}-->
  1489.               {block:NotReblog}
  1490.               {block:Description}
  1491.               <div class="caption">
  1492.                 {Description}
  1493.               </div>
  1494.               {/block:Description}
  1495.               {/block:NotReblog}
  1496.               {/block:Link}
  1497.               <!--CHAT-->
  1498.               {block:Chat}
  1499.               <div class="post_title">
  1500.                 {block:Title}
  1501.                 <h1>{Title}</h1>
  1502.                 {/block:Title}
  1503.               </div>
  1504.               <div class="caption">
  1505.                 {block:Lines}
  1506.                 <div class="chat_lines {Alt}">
  1507.                   {block:Label}<b>{Label}</b>{/block:Label} {Line}
  1508.                 </div>
  1509.                 {/block:Lines}
  1510.               </div>
  1511.               {/block:Chat}
  1512.               <!--AUDIO-->
  1513.               {block:Audio}
  1514.               <div class="audio_post">
  1515.                 {block:AudioPlayer}
  1516.                 <div class="audio_player">
  1517.                   {block:AlbumArt}
  1518.                   <img src="{AlbumArtURL}">
  1519.                   {/block:AlbumArt}
  1520.                   <div class="play_button">{AudioPlayer}</div>
  1521.                 </div>
  1522.                 {/block:AudioPlayer}
  1523.                 <div class="audio_info">
  1524.                   <ul>
  1525.                     <li><span>Name:</span>{block:TrackName}{TrackName}{/block:TrackName}</li>
  1526.                     <li><span>Artist:</span>{block:Artist}{Artist}{/block:Artist}</li>
  1527.                     <li><span>Plays:</span>{block:PlayCount}{FormattedPlayCount}{/block:PlayCount}</li>
  1528.                   </ul>
  1529.                 </div>
  1530.               </div>
  1531.               {/block:Audio}
  1532.               <!--VIDEO-->
  1533.               {block:Video}
  1534.               <div class="vid">{Video-700}</div>
  1535.               {/block:Video}
  1536.               <!--ASK-->
  1537.               {block:Answer}
  1538.               <div class="ask">
  1539.                 <div class="asker">
  1540.                   <img src="{AskerPortraitURL-64}">
  1541.                   {lang:Asker asked 2}:
  1542.                 </div>
  1543.                 <div class="question caption">"{Question}"</div>
  1544.               </div>
  1545.               <!--ask-->
  1546.               {block:Answerer}
  1547.               <div class="answerer">
  1548.                 <img src="{AnswererPortraitURL-64}">
  1549.                 {Answerer}
  1550.               </div>
  1551.               <div class="caption">{Answer}</div>
  1552.               {/block:Answerer}
  1553.               {block:NotReblog}
  1554.               <div class="caption">
  1555.                 {Replies}
  1556.               </div>
  1557.               {/block:NotReblog}
  1558.               {/block:Answer}
  1559.               <!--CAPTION-->
  1560.               {block:NotReblog}
  1561.               {block:Caption}
  1562.               <div class="caption">
  1563.                 {Caption}
  1564.               </div>
  1565.               {/block:Caption}
  1566.               {/block:NotReblog}
  1567.               <div class="reblog-list">
  1568.                 {block:Reblogs}
  1569.                 <div class="reblog_parent">
  1570.                   <div class="reblog_header">
  1571.                     {block:IsActive}
  1572.                     <img src="{PortraitURL-64}">
  1573.                     <a target="_blank" href="{Permalink}">{Username}</a>
  1574.                     {/block:IsActive}
  1575.                     {block:IsDeactivated}
  1576.                     <i class="fas fa-user-times"></i>
  1577.                     {Username}
  1578.                     {block:IsDeactivated}
  1579.                   </div>
  1580.                   <div class="reblog_body caption">
  1581.                     {Body}
  1582.                   </div>
  1583.                 </div>
  1584.                 {/block:Reblogs}
  1585.               </div>
  1586.             </div>
  1587.           </div>
  1588.           <!--post_body-->
  1589.           {block:IndexPage}
  1590.           <div class="post_footer">
  1591.             <!--tags-->
  1592.             {block:HasTags}
  1593.             <div class="ptags pinfo">
  1594.               {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  1595.             </div>
  1596.             {/block:HasTags}
  1597.             <!--post buttons-->
  1598.             <div class="buttons pinfo">
  1599.               <a href="{ReblogURL}" title="Reblog this post"><i class="fas fa-retweet"></i></a>
  1600.               <div class="custom_like_button" title="Like this post">
  1601.                 {LikeButton}
  1602.                 <i class="fas fa-heart"></i>
  1603.                 <span></span>
  1604.               </div>
  1605.             </div>
  1606.             <!--buttons-->
  1607.           </div>
  1608.           {/block:IndexPage}
  1609.         </article>
  1610.         <!--post-->
  1611.       </div>
  1612.       {block:PermalinkPage}
  1613.       <div class="permalink {TagsAsClasses}">
  1614.         <!--tags-->
  1615.         {block:HasTags}
  1616.         <div class="pl via ptags">
  1617.           <i class="fas fa-tags"></i>
  1618.           {block:Tags}<a href="{TagURL}">{text:tag}{Tag}</a>{/block:Tags}
  1619.         </div>
  1620.         {/block:HasTags}
  1621.         <!--date-->
  1622.         {block:Date}
  1623.         <div class="pl via">
  1624.           <i>posted</i> <a href="{Permalink}">{TimeAgo} on {DayofMonthWithSuffix} {Month} with {NoteCountWithLabel}</a>
  1625.         </div>
  1626.         {/block:Date}
  1627.         <!--source-->
  1628.         <!--if reblog-->
  1629.         {block:RebloggedFrom}
  1630.         <div class="pl via">
  1631.           <i>source:</i>
  1632.           <a href="{ReblogRootURL}">
  1633.           {ReblogRootName}
  1634.           </a>
  1635.         </div>
  1636.         {/block:RebloggedFrom}
  1637.         {block:NotReblog}
  1638.         {block:Source}
  1639.         <div class="pl via">
  1640.           <i>source</i>
  1641.           <a href="{Permalink}">
  1642.           {Name}
  1643.           </a>
  1644.         </div>
  1645.         {/block:Source}
  1646.         {/block:NotReblog}
  1647.         <!--post notes-->
  1648.         {block:PostNotes}
  1649.         <div class="plnotes">{PostNotes}</div>
  1650.         {/block:PostNotes}
  1651.       </div>
  1652.       <!--permalink-->
  1653.       {/block:PermalinkPage}
  1654.       <!--HIDE SOURCE & VIA-->
  1655.       {block:ContentSource}
  1656.       <!-- {SourceURL}
  1657.        {block:SourceLogo}
  1658.        <img src="{BlackLogoURL}" width="{LogoWidth}"
  1659.        height="{LogoHeight}" alt="{SourceTitle}" />
  1660.        {/block:SourceLogo}
  1661.        {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1662.       {/block:ContentSource}
  1663.       <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}
  1664.        {/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  1665.       {/block:Posts}
  1666.     </main>  
  1667. <!--POST CONTAINER END-------------------------------------------------->
  1668.    
  1669. <!--COPYRIGHT----------------------------------------------------------->
  1670.     <div id="copyright" style="position: fixed; bottom: 0; right: 0; padding: 10px; background: #181818;"><a style="font-family: helvetica;
  1671.      font-weight: bold;
  1672.      letter-spacing: -1px; color: #fff;" href="https://nonspace.tumblr.com">nonspace.</a></div>
  1673. <!--COPYRIGHT-- END----------------------------------------------------->
  1674.   </div>
  1675.   <!--container-->
  1676.  
  1677. <!--FOOTER-------------------------------------------------------------->
  1678.   {block:Pagination}
  1679.   <footer>
  1680.     <div id="pagination">
  1681.       {block:PreviousPage}<a href="{PreviousPage}"><i class="far fa-arrow-alt-circle-left"></i></a>
  1682.       {/block:PreviousPage}
  1683.       {block:JumpPagination length="5"}
  1684.       {block:CurrentPage}<b>{CurrentPage}</b>{/block:CurrentPage}
  1685.       {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>
  1686.       {/block:JumpPage}
  1687.       {/block:JumpPagination}
  1688.       {block:NextPage}<a href="{NextPage}"><i class="far fa-arrow-alt-circle-right"></i></a>{/block:NextPage}
  1689.     </div>
  1690.   </footer>
  1691.   {/block:Pagination}
  1692.  
  1693. <!--FOOTER END---------------------------------------------------------->
  1694.  
  1695. <!--CONTAINER END------------------------------------------------------->
  1696. </body>
  1697. </html>
Advertisement
Add Comment
Please, Sign In to add comment