API tools faq
paste
ninchuser

Theme 11 - Prism - cactusthemes

ninchuser
Jul 29th, 2018
2,901
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 53.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.  
  5. <!--                         THEME 11 - PRISM
  6.                              by cactusthemes
  7. -->
  8.  
  9. <!-- CREDITS:
  10.            - Menu Inspiration by https://codepen.io/Rabrennie/pen/WogNvV
  11.            - Icons by fontawesome/honeybee
  12.            - Photoset Styling by annasthms and espoirthemes/eggdesigns
  13.            - Captions by bychloethemes
  14.            - Fade in on refresh/Custom Tumblr controls by cyantists
  15. -->
  16.  
  17. <title>{Title}</title>
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <meta name="description" content="{MetaDescription}">
  21. <meta name="viewport" content="width=device-width, initial-scale=1">
  22.  
  23. <meta name="if:Dark Tumblr Controls" content="1">
  24.  
  25. <meta name="color:Background" content="#fff">
  26. <meta name="color:Text" content="#999">
  27. <meta name="color:Gradient Text" content="#fff">
  28. <meta name="color:Color 1" content="#c55555">
  29. <meta name="color:Color 2" content="#c5c555">
  30. <meta name="color:Color 3" content="#55c555">
  31. <meta name="color:Color 4" content="#55c5c5">
  32. <meta name="color:Color 5" content="#5555c5">
  33. <meta name="color:Color 6" content="#c555c5">
  34.  
  35. <meta name="select:Columns" content="1" title="1">
  36. <meta name="select:Columns" content="2" title="2">
  37. <meta name="select:Columns" content="3" title="3">
  38.  
  39. <meta name="select:Post Width" content="500" title="500px">
  40. <meta name="select:Post Width" content="540" title="540px">
  41. <meta name="select:Post Width" content="450" title="450px">
  42. <meta name="select:Post Width" content="400" title="400px">
  43.  
  44. <meta name="select:Font Family" content="Oxygen" title="Oxygen">
  45. <meta name="select:Font Family" content="Rubik" title="Rubik">
  46. <meta name="select:Font Family" content="Muli" title="Muli">
  47. <meta name="select:Font Family" content="Nunito" title="Nunito">
  48. <meta name="select:Font Family" content="PT Sans" title="PT Sans">
  49.  
  50. <meta name="select:Font Size" content="12" title="12px">
  51. <meta name="select:Font Size" content="11" title="11px">
  52. <meta name="select:Font Size" content="13" title="13px">
  53. <meta name="select:Font Size" content="14" title="14px">
  54.  
  55. <meta name="text:Optional Box Title" content="Other">
  56. <meta name="text:Optional Box Text" content="This box is optional. If you leave this text field blank, it'll disappear.">
  57.  
  58. <meta name="text:Link 1 Title" content="Link 1">
  59. <meta name="text:Link 1 URL" content="">
  60. <meta name="text:Link 2 Title" content="Link 2">
  61. <meta name="text:Link 2 URL" content="">
  62. <meta name="text:Link 3 Title" content="Link 3">
  63. <meta name="text:Link 3 URL" content="">
  64. <meta name="text:Link 4 Title" content="Link 4">
  65. <meta name="text:Link 4 URL" content="">
  66. <meta name="text:Link 5 Title" content="Link 5">
  67. <meta name="text:Link 5 URL" content="">
  68. <meta name="text:Link 6 Title" content="Link 6">
  69. <meta name="text:Link 6 URL" content="">
  70.  
  71. <link href="https://fonts.googleapis.com/css?family=Rubik|Oxygen|PT+Sans|Muli|Nunito" rel="stylesheet">
  72.  
  73. <link href="https://annasthms.github.io/photosets/photosets.css" rel="stylesheet">
  74.  
  75. <link href="https://static.tumblr.com/uxq3xua/Ci6ph2baf/funtumblrfont.css" rel="stylesheet">
  76.  
  77. <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  78.  
  79. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  80.  
  81. <style type="text/css">
  82.  
  83. /* GENERAL STYLING */
  84.  
  85. body {
  86.     font-family:'{select:Font Family}';
  87.     overflow-x:hidden;
  88.     font-size:{select:Font Size}px;
  89.     background:{color:Background};
  90.     line-height:18px;
  91. }
  92.  
  93. iframe.iframe-controls--desktop {
  94.     white-space:nowrap!important;
  95.     z-index:99999999999999!important;
  96.     top:4px!important;
  97.     right:15px!important;
  98.     {block:ifDarkTumblrControls}
  99.     filter:invert(1) contrast(150%);
  100.     -webkit-filter:invert(1) contrast(150%);
  101.     -o-filter:invert(1) contrast(150%);
  102.     -moz-filter:invert(1) contrast(150%);
  103.     -ms-filter:invert(1) contrast(150%);
  104.     opacity:.6!important;
  105.     {/block:ifDarkTumblrControls}
  106.     {block:ifNotDarkTumblrControls}
  107.     opacity:.8!important;
  108.     {/block:ifNotDarkTumblrControls}
  109.     transition:all .5s ease-in-out;
  110.     -moz-transition:all .5s ease-in-out;
  111.     -o-transition:all .5s ease-in-out;
  112.     -webkit-transition:all .5s ease-in-out;
  113.     transform:scale(0.65);
  114.     transform-origin:100% 0;
  115.     -webkit-transform:scale(0.75);
  116.     -webkit-transform-origin:100% 0;
  117.     -o-transform:scale(0.75);
  118.     -o-transform-origin:100% 0;
  119.     -moz-transform:scale(0.75);
  120.     -moz-transform-origin:100% 0;
  121.     -ms-transform:scale(0.75);
  122.     -ms-transform-origin:100% 0;}
  123. iframe.iframe-controls--desktop:hover {
  124.     {block:ifDarkTumblrControls}
  125.     opacity:.8!important;
  126.     {/block:ifDarkTumblrControls}
  127.     {block:ifNotDarkTumblrControls}
  128.     opacity:1!important;
  129.     {/block:ifNotDarkTumblrControls}
  130. }
  131.  
  132. {block:ifDarkTumblrControls}
  133. div.status-indicator {
  134.     filter:invert(1)!important;
  135. }
  136. {/block:ifDarkTumblrControls}
  137.  
  138. iframe.tmblr-iframe--app-cta-button, iframe.iframe-controls--phone-mobile {
  139.     display:none!important;
  140. }
  141.  
  142. .tmblr-iframe-pushdown {
  143.     padding:0px!important;
  144. }
  145.  
  146. ::-webkit-scrollbar {
  147.     width:12px;
  148.     height:12px;
  149.     background:#e5e5e5;
  150.     border:5px solid #fff;
  151. }
  152.  
  153. ::-webkit-scrollbar-thumb:vertical {
  154.     background:linear-gradient(to bottom, rgba({RGBColor:Color 1},.5), rgba({RGBColor:Color 2},.5), rgba({RGBColor:Color 3},.5), rgba({RGBColor:Color 4},.5), rgba({RGBColor:Color 5},.5), rgba({RGBColor:Color 6},.5));
  155.     border:2px solid #fff;
  156.     border-radius:10px;
  157. }
  158.  
  159. ::selection {
  160.     color:{color:Gradient Text};
  161.     background:{color:Color 1};
  162. }
  163.  
  164. ::-moz-selection {
  165.     color:{color:Gradient Text};
  166.     background:{color:Color 1};
  167. }
  168.  
  169.  
  170. a {
  171.     text-decoration:none;
  172.     transition:all .5s ease-in-out;
  173. }
  174.  
  175. blockquote {
  176.     padding-left:10px;
  177.     border-left:2px solid;
  178. }
  179.  
  180. article.post.text blockquote {
  181.     border-color:rgba({RGBColor:Color 1}, .7);
  182. }
  183.  
  184. article.post.photo blockquote {
  185.     border-color:rgba({RGBColor:Color 2}, .7);
  186. }
  187.  
  188. article.post.quote blockquote {
  189.     border-color:rgba({RGBColor:Color 3}, .7);
  190. }
  191.  
  192. article.post.chat blockquote {
  193.     border-color:rgba({RGBColor:Color 4}, .7);
  194. }
  195.  
  196. article.post.audio blockquote {
  197.     border-color:rgba({RGBColor:Color 5}, .7);
  198. }
  199.  
  200. article.post.answer blockquote{
  201.     border-color:rgba({RGBColor:Color 6}, .7);
  202. }
  203.  
  204. blockquote p {
  205.     margin-top:0;
  206. }
  207.  
  208. /* MENU STYLING */
  209.  
  210. #hamburger {
  211.     opacity:0;
  212.     position:fixed;
  213. }
  214.  
  215. label {
  216.     position:fixed;
  217.     top:23px;
  218.     left:19px;
  219.     z-index:20;
  220.     cursor:pointer;
  221. }
  222.  
  223. label span {
  224.     display:block;
  225.     width:30px;
  226.     height:4px;
  227.     margin-bottom:5px;
  228.     position:relative;
  229.     background:{color:Text};
  230.     border-radius:3px;
  231.     z-index:1;
  232.     opacity:1;
  233.     transform-origin:4px 0px;
  234.     transition:all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  235. }
  236.  
  237. label span:first-of-type {
  238.     transform-origin:0% 0%;
  239. }
  240.  
  241. label span:nth-of-type(3) {
  242.     transform-origin:0% 100%;
  243. }
  244.  
  245. input#hamburger:checked ~ label span:first-of-type {
  246.     transform:rotate(45deg) translate(-2px, -1px);
  247. }
  248.  
  249. input#hamburger:checked ~ label span:nth-of-type(2) {
  250.     opacity:0;
  251.     transform:rotate(0deg) scale(0.2, 0.2);
  252. }
  253. input#hamburger:checked ~ label span:nth-of-type(3) {
  254.     transform:rotate(-45deg) translate(0, -1px);
  255. }
  256.  
  257. aside {
  258.     width:51vw;
  259.     height:0;
  260.     position:fixed;
  261.     left:0;
  262.     top:0;
  263.     overflow:hidden;
  264.     z-index:10;
  265.     transition-delay:.5s;
  266. }
  267.  
  268. aside a {
  269.     position:relative;
  270.     color:#444;
  271. }
  272.  
  273. aside a:before, aside a:after {
  274.     content:'';
  275.     position:absolute;
  276.     width:0%;
  277.     height:3px;
  278.     top:50%;
  279.     margin-top:-0.5px;
  280.     background:rgba(0,0,0,.5);
  281. }
  282.  
  283. aside a:before {
  284.     left:0px;
  285. }
  286.  
  287. aside a:after {
  288.     right:.5px;
  289.     transition:width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  290. }
  291.  
  292. aside a:hover:before {
  293.     width:100%;
  294.     transition:width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  295. }
  296.  
  297. aside a:hover:after {
  298.     background:transparent;
  299.     width:100%;
  300.     transition:0s;
  301. }
  302.  
  303. .menu {
  304.     position:fixed;
  305.     top:0;
  306.     transition:all .5s ease-in-out;
  307.     height:160px;
  308.     width:160px;
  309.     border-radius:100%;
  310.     transform: translate(-50%, -50%);
  311.     background:linear-gradient(to bottom, #fff 40%, rgba({RGBColor:Color 1},.23), rgba({RGBColor:Color 2},.23), rgba({RGBColor:Color 3},.23), rgba({RGBColor:Color 4},.23), rgba({RGBColor:Color 5},.23), rgba({RGBColor:Color 6},.23));
  312.     z-index:1;
  313. }
  314.  
  315. aside h3 {
  316.     margin-top:0px;
  317. }
  318.  
  319. aside .text {
  320.     position:absolute;
  321.     left:54px;
  322.     top:23px;
  323.     color:{color:Text};
  324.     height:0;
  325.     opacity:0;
  326.     transition:opacity .3s ease-in-out;
  327. }
  328.  
  329. aside .cont {
  330.     display:inline-block;
  331.     width:24vw;
  332.     vertical-align:top;
  333. }
  334.  
  335. aside nav {
  336.     z-index:3;
  337.     vertical-align:top;
  338.     display:inline-block;
  339.     width:11vw;
  340.     margin-left:5vw;
  341. }
  342.  
  343. aside nav a {
  344.     display:inline-block;
  345.     margin:5px 0px;
  346.     text-transform:lowercase;
  347. }
  348.  
  349. aside .other {
  350.     margin-top:5vh;
  351. }
  352.  
  353. #hamburger:checked ~ aside {
  354.     height:75vh;
  355.     transition-delay:0s;
  356. }
  357.  
  358. #hamburger:checked ~ .menu {
  359.     width:100vw;
  360.     height:150vh;
  361. }
  362.  
  363. #hamburger:checked ~ #container {
  364.   margin-left:52vw;
  365. }
  366.  
  367. #hamburger:checked ~ aside .text {
  368.     height:auto;
  369.     opacity:1;
  370. }
  371.  
  372. /* POSTS STYLING */
  373.  
  374. #container {
  375.     transition:all .5s ease-in-out;
  376.     {block:Permalink}
  377.     width:{select:Post Width}px;
  378.     margin-left:calc(50vw - ({select:Post Width}px / 2));
  379.     {/block:Permalink}
  380. }
  381.  
  382. {block:IndexPage}
  383.  
  384. #container.col-1 {
  385.     margin-left:calc(50vw - ({select:Post Width}px / 2));
  386.     width:{select:Post Width}px;
  387. }
  388.  
  389. #container.col-2 {
  390.     margin-left:calc(50vw - (({select:Post Width}px * 2 + 51px) / 2));
  391.     width:calc({select:Post Width}px * 2 + 51px);
  392. }
  393.  
  394. #container.col-3 {
  395.     margin-left:calc(50vw - (({select:Post Width}px * 3 + 111px) / 2));
  396.     width:calc({select:Post Width}px * 3 + 111px);
  397. }
  398.  
  399. {/block:IndexPage}
  400.  
  401. section#posts {
  402.     {block:IndexPage}column-count:{select:Columns};{/block:IndexPage}
  403.     {block:PermalinkPage}
  404.     column-count:1;
  405.     width:{select:Post Width}px;
  406.     {/block:PermalinkPage}
  407.     margin-top:50px;
  408. }
  409.  
  410. {block:IndexPage}
  411.  
  412. section#posts.col-1 {
  413.     width:{select:Post Width}px;
  414. }
  415.  
  416. section#posts.col-2 {
  417.     width:calc({select:Post Width}px * 2 + 51px);
  418. }
  419.  
  420. section#posts.col-3 {
  421.     width:calc({select:Post Width}px * 3 + 111px);
  422. }
  423.  
  424. section#posts:not(.col-1) {
  425.     column-gap:50px;
  426. }
  427.  
  428. section#posts:not(.col-1) article.post {
  429.     break-inside:avoid;
  430.     display:inline-block;
  431. }
  432.  
  433. {/block:IndexPage}
  434.  
  435. article.post {
  436.     width:{select:Post Width}px;
  437.     color:{color:Text};
  438.     margin-bottom:50px;
  439. }
  440.  
  441. /* POST TITLES + LINKS */
  442.  
  443. article.post h2.title {
  444.     margin-top:0;
  445. }
  446.  
  447. article.post.chat h2 a {
  448.     color:{color:Color 4};
  449. }
  450.  
  451. article.post.text h2 a {
  452.     color:{color:Color 1};
  453. }
  454.  
  455. article.post.text a h2.title {
  456.     background:{color:Color 1};
  457.     color:{color:Gradient Text};
  458.     padding:7px 10px;
  459.     border-radius:50px;
  460. }
  461.  
  462. article.post.text a h2.title .th {
  463.     float:right;
  464.     margin-top:1px;
  465. }
  466.  
  467. article.post.text .caption .reblog-header span.blog {
  468.     background:{color:Color 1};
  469.     border:1px solid {color:Color 1};
  470. }
  471.  
  472. article.post.text .postinfo a, article.post.text + ol.notes li.note .action a:hover, article.post.text + ol.notes a.more_notes_link:hover, article.post.text + ol.notes .notes_loading {
  473.     color:rgba({RGBColor:Color 1},.7);
  474. }
  475.  
  476. article.post.text .postinfo a:hover, article.post.text + ol.notes li.note .action a, article.post.text + ol.notes a.more_notes_link {
  477.     color:rgba({RGBColor:Color 1},1);
  478. }
  479.  
  480. article.post.text + ol.notes li.note blockquote {
  481.     background:{color:Color 1};
  482. }
  483.  
  484. article.post.text .caption .reblog-header a.active:hover span.blog, article.post.text .caption .reblog-header span.inactive:hover span.blog, article.post.text .caption .reblog-header span.inactive span.de, article.post.text .tags a:hover {
  485.     color:{color:Color 1};
  486. }
  487.  
  488. article.post.photo .caption .reblog-header span.blog {
  489.     background:{color:Color 2};
  490.     border:1px solid {color:Color 2};
  491. }
  492.  
  493. article.post.photo .postinfo a, article.post.photo + ol.notes li.note .action a:hover, article.post.photo + ol.notes a.more_notes_link:hover, article.post.photo + ol.notes .notes_loading {
  494.     color:rgba({RGBColor:Color 2},.75);
  495. }
  496.  
  497. article.post.photo .postinfo a:hover, article.post.photo + ol.notes li.note .action a, article.post.photo + ol.notes a.more_notes_link {
  498.     color:rgba({RGBColor:Color 2},1);
  499. }
  500.  
  501. article.post.photo + ol.notes li.note blockquote {
  502.     background:{color:Color 2};
  503. }
  504.  
  505. article.post.photo .caption .reblog-header a.active:hover span.blog, article.post.photo .caption .reblog-header span.inactive:hover span.blog, article.post.photo .caption .reblog-header span.inactive span.de, article.post.photo .tags a:hover {
  506.     color:{color:Color 2};
  507. }
  508.  
  509. article.post.quote .caption .reblog-header span.blog {
  510.     background:{color:Color 3};
  511.     border:1px solid {color:Color 3};
  512. }
  513.  
  514. article.post.quote .postinfo a, article.post.quote + ol.notes li.note .action a:hover, article.post.quote + ol.notes a.more_notes_link:hover, article.post.quote + ol.notes .notes_loading {
  515.     color:rgba({RGBColor:Color 3},.7);
  516. }
  517.  
  518. article.post.quote .postinfo a:hover, article.post.quote + ol.notes li.note .action a, article.post.quote + ol.notes a.more_notes_link {
  519.     color:rgba({RGBColor:Color 3},1);
  520. }
  521.  
  522. article.post.quote + ol.notes li.note blockquote {
  523.     background:{color:Color 3};
  524. }
  525.  
  526. article.post.quote .caption .reblog-header a.active:hover span.blog, article.post.quote .caption .reblog-header span.inactive:hover span.blog, article.post.quote .caption .reblog-header span.inactive span.de, article.post.quote .tags a:hover {
  527.     color:{color:Color 3};
  528. }
  529.  
  530. article.post.chat .caption .reblog-header span.blog {
  531.     background:{color:Color 4};
  532.     border:1px solid {color:Color 4};
  533. }
  534.  
  535. article.post.chat .postinfo a, article.post.chat + ol.notes li.note .action a:hover, article.post.chat + ol.notes a.more_notes_link:hover, article.post.chat + ol.notes .notes_loading {
  536.     color:rgba({RGBColor:Color 4},.7);
  537. }
  538.  
  539. article.post.chat .postinfo a:hover, article.post.chat + ol.notes li.note .action a, article.post.chat + ol.notes a.more_notes_link {
  540.     color:rgba({RGBColor:Color 4},1);
  541. }
  542.  
  543. article.post.chat + ol.notes li.note blockquote {
  544.     background:{color:Color 4};
  545. }
  546.  
  547. article.post.chat .caption .reblog-header a.active:hover span.blog, article.post.chat .caption .reblog-header span.inactive:hover span.blog, article.post.chat .caption .reblog-header span.inactive span.de, article.post.chat .tags a:hover {
  548.     color:{color:Color 4};
  549. }
  550.  
  551. article.post.audio .caption .reblog-header span.blog {
  552.     background:{color:Color 5};
  553.     border:1px solid {color:Color 5};
  554. }
  555.  
  556. article.post.audio .postinfo a, article.post.audio + ol.notes li.note .action a:hover, article.post.audio + ol.notes a.more_notes_link:hover, article.post.audio + ol.notes .notes_loading {
  557.     color:rgba({RGBColor:Color 5},.7);
  558. }
  559.  
  560. article.post.audio .postinfo a:hover, article.post.audio + ol.notes li.note .action a, article.post.audio + ol.notes a.more_notes_link {
  561.     color:rgba({RGBColor:Color 5},1);
  562. }
  563.  
  564. article.post.audio + ol.notes li.note blockquote {
  565.     background:{color:Color 5};
  566. }
  567.  
  568. article.post.audio .caption .reblog-header a.active:hover span.blog, article.post.audio .caption .reblog-header span.inactive:hover span.blog, article.post.audio .caption .reblog-header span.inactive span.de, article.post.audio .tags a:hover {
  569.     color:{color:Color 5};
  570. }
  571.  
  572. article.post.answer .caption .reblog-header span.blog {
  573.     background:{color:Color 6};
  574.     border:1px solid {color:Color 6};
  575. }
  576.  
  577. article.post.answer .postinfo a, article.post.answer + ol.notes li.note .action a:hover, article.post.answer + ol.notes a.more_notes_link:hover, article.post.answer + ol.notes .notes_loading {
  578.     color:rgba({RGBColor:Color 6},.7);
  579. }
  580.  
  581. article.post.answer .postinfo a:hover, article.post.answer + ol.notes li.note .action a, article.post.answer + ol.notes a.more_notes_link {
  582.     color:rgba({RGBColor:Color 6},1);
  583. }
  584.  
  585. article.post.answer + ol.notes li.note blockquote {
  586.     background:{color:Color 6};
  587. }
  588.  
  589. article.post.answer .caption .reblog-header a.active:hover span.blog, article.post.answer .caption .reblog-header span.inactive:hover span.blog, article.post.answer .caption .reblog-header span.inactive span.de, article.post.answer .tags a:hover {
  590.     color:{color:Color 6};
  591. }
  592.  
  593. article.post .reblog-header:first-of-type {
  594.     margin:0px 0px 10px 0px;
  595. }
  596.  
  597. article.post .reblog-header {
  598.     margin:10px 0px;
  599. }
  600.  
  601. article.post .caption .reblog-header span.blog {
  602.     vertical-align:middle;
  603.     color:{color:Gradient Text};
  604.     border-radius:100px;
  605.     padding:4px 5px;
  606.     margin-left:5px;
  607.     transition:all .5s ease-in-out;
  608. }
  609.  
  610. article.post .caption .reblog-header img.blog {
  611.     width:24px;
  612.     vertical-align:middle;
  613.     border-radius:100px;
  614. }
  615.  
  616. article.post .caption .reblog-header a.active:hover span.blog, article.post .caption .reblog-header span.inactive:hover span.blog {
  617.     background:transparent;
  618. }
  619.  
  620. article.post .caption .reblog-header span.inactive span.de {
  621.     opacity:0;
  622.     margin-left:3px;
  623.     transition:all .5s ease-in-out;
  624. }
  625.  
  626. article.post .caption .reblog-header span.inactive:hover span.de {
  627.     opacity:1;
  628. }
  629.  
  630. article.post .caption figcaption p:last-of-type, article.post .caption figcaption ul:last-of-type, article.post .caption .reblog-content:last-of-type p:last-of-type, article.post .caption .reblog-content:last-of-type ul:last-of-type {
  631.     margin-bottom:0px;
  632. }
  633.  
  634. article.post .caption figcaption a, article.post .caption .reblog-content a {
  635.     color:#444;
  636.     position:relative;
  637. }
  638.  
  639. article.post .caption figcaption a:before, article.post .caption .reblog-content a:after, article.post .caption figcaption a:after, article.post .caption .reblog-content a:before {
  640.     content:'';
  641.     position:absolute;
  642.     width:0%;
  643.     height:3px;
  644.     top:50%;
  645.     margin-top:-0.5px;
  646.     border-radius:5px;
  647.     background:linear-gradient(to right, rgba({RGBColor:Color 1},.5), rgba({RGBColor:Color 2},.5), rgba({RGBColor:Color 3},.5), rgba({RGBColor:Color 4},.5), rgba({RGBColor:Color 5},.5), rgba({RGBColor:Color 6},.5));
  648. }
  649.  
  650. article.post .caption figcaption a:before, article.post .caption .reblog-content a:before {
  651.     left:0px;
  652. }
  653.  
  654. article.post .caption figcaption a:after, article.post .caption .reblog-content a:after {
  655.     right:.5px;
  656.     transition:width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  657. }
  658.  
  659. article.post .caption figcaption a:hover:before, article.post .caption .reblog-content a:hover:before {
  660.     width:100%;
  661.     transition:width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  662. }
  663.  
  664. article.post .caption figcaption a:hover:after, article.post .caption .reblog-content a:hover:after {
  665.     background:transparent;
  666.     width:100%;
  667.     transition:0s;
  668. }
  669.  
  670. article.post p.read_more_container {
  671.     text-align:center;
  672.     margin-bottom:17px!important;
  673. }
  674.  
  675. article.post a.read_more {
  676.     color:{color:Gradient Text}!important;
  677.     background-size:200% auto;
  678.     padding:10px;
  679.     border-radius:30px;
  680.     background-image:linear-gradient(to right, rgba({RGBColor:Color 1},.5), rgba({RGBColor:Color 2},.5), rgba({RGBColor:Color 3},.5), rgba({RGBColor:Color 4},.5), rgba({RGBColor:Color 5},.5), rgba({RGBColor:Color 6},.5), rgba({RGBColor:Color 6},.5), rgba({RGBColor:Color 5},.5), rgba({RGBColor:Color 4},.5), rgba({RGBColor:Color 3},.5), rgba({RGBColor:Color 2},.5), rgba({RGBColor:Color 1},.5));
  681. }
  682.  
  683. article.post a.read_more:hover {
  684.     background-position:right center;  
  685. }
  686.  
  687. article.post a.read_more:before, article.post a.read_more:after {
  688.     display:none;
  689. }
  690.  
  691. /* PHOTO POSTS */
  692.  
  693. article.post figure img, article.post figure.tmblr-full img {
  694.     max-width:100%;
  695.     height:auto;
  696.     margin:5px 0px;
  697. }
  698.  
  699. article.post figure img {
  700.     border-radius:50px;
  701. }
  702.  
  703. article.post figure.tmblr-full img {
  704.     border-radius:50px 50px 0px 0px;
  705.     width:100%;
  706. }
  707.  
  708. article.post p.tmblr-attribution {
  709.     font-size:calc({select:Font Size}px - 1px);
  710.     margin-top:-8px;
  711.     padding:5px 10px;
  712.     border-radius:0px 0px 50px 50px;
  713.     background:linear-gradient(to right, rgba({RGBColor:Color 1},.5), rgba({RGBColor:Color 2},.5), rgba({RGBColor:Color 3},.5), rgba({RGBColor:Color 4},.5), rgba({RGBColor:Color 5},.5), rgba({RGBColor:Color 6},.5));
  714. }
  715.  
  716. article.post p.tmblr-attribution a {
  717.     color:{color:Gradient Text}!important;
  718. }
  719.  
  720. article.post p.tmblr-attribution a:before, article.post p.tmblr-attribution a:after {
  721.     display:none;
  722. }
  723.  
  724. article.post .pic img {
  725.     width:100%;
  726.     height:auto;
  727.     border-radius:50px;
  728.     margin-bottom:10px;
  729. }
  730.  
  731. [photoset-layout] {
  732.     grid-gap:10px;
  733. }
  734.  
  735. [photoset-layout] img {
  736.   border-radius:50px;
  737. }
  738.  
  739. .photoset-grid {
  740.     margin-bottom:15px;
  741. }
  742.  
  743. /* QUOTE POSTS */
  744.  
  745. .quote {
  746.     text-align:center;
  747.     margin-bottom:5px;
  748. }
  749.  
  750. .divide {
  751.     position:relative;
  752.     border-bottom:1px solid {color:Color 3};
  753. }
  754.  
  755. .divide::after {
  756.     position:absolute;
  757.     content:'';
  758.     top:1px;
  759.     left:50%;
  760.     margin-left:-10px;
  761.     width:0;
  762.     height:0;
  763.     border-top:solid 10px {color:Color 3};
  764.     border-left:solid 10px transparent;
  765.     border-right:solid 10px transparent;
  766. }
  767.  
  768. .qsource {
  769.     text-align:center;
  770.     margin:15px 0px;
  771.     color:{color:Color 3};
  772. }
  773.  
  774. .qsource a {
  775.     color:{color:Color 3};
  776.     opacity:.75;
  777. }
  778.  
  779. .qsource a:hover {
  780.     opacity:1;
  781. }
  782.  
  783. /* CHAT POSTS */
  784.  
  785. article.post ol.chat {
  786.     list-style:none;
  787.     margin:0;
  788.     padding:0;
  789. }
  790.  
  791. article.post ol.chat li.line {
  792.     line-height:20px;
  793.     margin:10px 0px;
  794.     border-radius:50px;
  795.     padding:10px;
  796.     background:rgba({RGBColor:Color 4},.5);
  797. }
  798.  
  799. article.post ol.chat li.line:first-of-type {
  800.     margin-top:0px;
  801. }
  802.  
  803. article.post ol.chat li.line:last-of-type {
  804.     margin-bottom:0px;
  805. }
  806.  
  807. article.post ol.chat span.label {
  808.     padding:5px;
  809.     text-align:center;
  810.     display:inline-block;
  811.     background:{color:Color 4};
  812.     color:{color:Gradient Text};
  813.     border-radius:50px;
  814. }
  815.  
  816. /* VIDEO POSTS */
  817.  
  818. article.post .video {
  819.     display:flex;
  820.     display:-webkit-box;
  821.     display:-moz-box;
  822.     display:-ms-flexbox;
  823.     display:-webkit-flex;
  824.     align-items:center;
  825.     -webkit-box-align:center;
  826.     -moz-box-align:center;
  827.     -ms-flex-align:center;
  828.     -webkit-align-items:center;
  829.     justify-content:center;
  830.     -webkit-justify:center;
  831.     -moz-box-justify:center;
  832.     -ms-flex-justify:center;
  833.     border-radius:30px!important;
  834.     width:100%!important;
  835.     margin-bottom:10px;
  836. }
  837.  
  838. article.post .video .tumblr_video_container {
  839.     width:100%!important;
  840.     border-radius:30px!important;
  841. }
  842.  
  843. article.post .video iframe.instagram-media {
  844.     margin-bottom:0px!important;
  845. }
  846.  
  847. article.post .video iframe.instagram-media, article.post iframe.tumblr_video_iframe {
  848.     width:100%!important;
  849.     max-width:100%!important;
  850. }
  851.  
  852. /* AUDIO POSTS */
  853.  
  854. iframe.soundcloud_audio_player {
  855.     max-height:75px!important;
  856.     width:100%;
  857. }
  858.  
  859. iframe.spotify_audio_player {
  860.     max-height:80px;
  861.     width:100%;
  862.     border-radius:20px!important;
  863. }
  864.  
  865. article.post .audio {
  866.     width:100%;
  867.     margin-bottom:10px;
  868. }
  869.  
  870. article.post .audio .art {
  871.     position:absolute;
  872.     background:{color:Color 5};
  873.     width:120px;
  874.     height:120px;
  875.     border-radius:100px;
  876.     display:inline-block;
  877. }
  878.  
  879. article.post .audio .art img {
  880.     width:120px;
  881.     height:120px;
  882.     border-radius:100px;
  883. }
  884.  
  885. article.post .audio .player {
  886.     position:absolute;
  887.     overflow:hidden;
  888.     width:30px;
  889.     height:30px;
  890.     border-radius:50px;
  891.     transform:scale(1.5);
  892.     margin-top:45px;
  893.     margin-left:45px;
  894. }
  895.  
  896. article.post .audio .player iframe {
  897.     border-radius:50px!important;
  898.     width:30px!important;
  899. }
  900.  
  901. article.post .audio .auinfo {
  902.     width:calc(100% - 130px);
  903.     margin-left:130px;
  904.     padding-left:20px;
  905.     box-sizing:border-box;
  906.     background:{color:Color 5};
  907.     border-radius:100px;
  908.     display:inline-flex;
  909.     display:-webkit-inline-box;
  910.     display:-moz-inline-box;
  911.     display:-ms-inline-flexbox;
  912.     display:-webkit-inline-flex;
  913.     align-items:center;
  914.     -webkit-box-align:center;
  915.     -moz-box-align:center;
  916.     -ms-flex-align:center;
  917.     -webkit-align-items:center;
  918.     color:{color:Gradient Text};
  919.     height:120px;
  920. }
  921.  
  922. article.post .audio .auinfo span {
  923.     display:block;
  924.     font-size:calc({select:Font Size}px + 1px);
  925. }
  926.  
  927. article.post .audio .auinfo .track {
  928.     font-weight:bold;
  929. }
  930.  
  931. /* ANSWER POSTS */
  932.  
  933. article.post .ask {
  934.     display:inline-block;
  935. }
  936.  
  937. article.post .ask .askinf {
  938.     display:inline-block;
  939.     text-align:center;
  940.     max-width:76px;
  941. }
  942.  
  943. article.post .ask .askinf img {
  944.     border-radius:100px;
  945.     padding:5px;
  946.     background:{color:Color 6};
  947. }
  948.  
  949. article.post .ask .askinf span {
  950.     text-transform:lowercase;
  951.     display:block;
  952.     word-wrap:break-word;
  953. }
  954.  
  955. article.post .ask .askinf span a {
  956.     color:#444;
  957.     display:inline-block;
  958.     position:relative;
  959. }
  960.  
  961. article.post .ask .askinf span a::after {
  962.     content:'';
  963.     display:block;
  964.     position:absolute;
  965.     width:100%;
  966.     bottom:0;
  967.     height:2px;
  968.     border-radius:5px;
  969.     z-index:-1;
  970.     padding:0px 2px;
  971.     margin-left:-1px;
  972.     background:linear-gradient(to right, rgba({RGBColor:Color 1},.3), rgba({RGBColor:Color 2},.3), rgba({RGBColor:Color 3},.3), rgba({RGBColor:Color 4},.3), rgba({RGBColor:Color 5},.3), rgba({RGBColor:Color 6},.3));
  973.     transition:all .5s ease-in-out;
  974. }
  975.  
  976. article.post .ask .askinf span a:hover::after {
  977.     height:100%;
  978. }
  979.  
  980. article.post .queanswer {
  981.     display:inline-block;
  982.     margin-left:15px;
  983.     vertical-align:top;
  984.     width:calc(100% - 94px);
  985. }
  986.  
  987. article.post .que {
  988.     display:block;
  989.     width:100%;
  990.     background:{color:Color 6};
  991.     color:{color:Gradient Text};
  992.     min-height:50px;
  993.     margin-top:5px;
  994.     border-radius:50px;
  995.     box-sizing:border-box;
  996.     padding:10px 15px;
  997. }
  998.  
  999. article.post.answer .caption {
  1000.     width:100%;
  1001. }
  1002.  
  1003. /* POSTINFO STYLING */
  1004.  
  1005. article.post .postinfo {
  1006.     text-transform:lowercase;
  1007.     text-align:center;
  1008.     margin-top:7px;
  1009. }
  1010.  
  1011. article.post .postinfo a {
  1012.     margin:0px 5px;
  1013. }
  1014.  
  1015. article.post .postinfo a:first-of-type {
  1016.     margin-left:0px;
  1017. }
  1018.  
  1019. article.post .postinfo a:last-of-type {
  1020.     margin-right:0px;
  1021. }
  1022.  
  1023. article.post .like_button {
  1024.     display:inline-block;
  1025.     position:relative;
  1026. }
  1027.  
  1028. article.post .like_button iframe {
  1029.     height:100%;
  1030.     left:0;
  1031.     opacity:0;
  1032.     position:absolute;
  1033.     top:0;
  1034.     width:100%;
  1035. }
  1036.  
  1037. article.post .like_button::after{
  1038.     content:'like';
  1039. }
  1040.  
  1041. /* TAGS STYLING */
  1042.  
  1043. article.post .tags {
  1044.     text-align:center;
  1045.     font-style:italic;
  1046.     margin-top:5px;
  1047. }
  1048.  
  1049. article.post .tags a {
  1050.     margin-right:5px;
  1051.     color:{color:Text};
  1052. }
  1053.  
  1054. article.post .tags a:last-of-type {
  1055.     margin-right:0px;
  1056. }
  1057.  
  1058. /* POST NOTES STYLING */
  1059.  
  1060. ol.notes {
  1061.     list-style:none;
  1062.     width:{select:Post Width}px;
  1063.     max-height:300px;
  1064.     overflow-y:auto;
  1065.     margin:0;
  1066.     text-align:left!important;
  1067.     box-sizing:border-box;
  1068.     padding:0;
  1069.     color:{color:Text};
  1070.     margin-bottom:50px;
  1071. }
  1072.  
  1073. ol.notes li.note {
  1074.     margin:8px 0px;
  1075. }
  1076.  
  1077. ol.notes li.note:first-of-type {
  1078.     margin-top:0px;
  1079. }
  1080.  
  1081. ol.notes li.note:last-of-type {
  1082.     margin-bottom:0px;
  1083. }
  1084.  
  1085. ol.notes li.note img.avatar {
  1086.     width:24px;
  1087.     border-radius:50px;
  1088.     vertical-align:middle;
  1089.     margin-right:5px;
  1090. }
  1091.  
  1092. ol.notes li.note .action {
  1093.     vertical-align:middle;
  1094. }
  1095.  
  1096. ol.notes li.note blockquote {
  1097.     padding:10px;
  1098.     border-radius:50px;
  1099.     border:0;
  1100. }
  1101.  
  1102. ol.notes li.note blockquote a {
  1103.     color:{color:Gradient Text};
  1104. }
  1105.  
  1106. /* PAGINATION STYLING */
  1107.  
  1108. #pagination {
  1109.     width:100%;
  1110.     text-align:center;
  1111.     font-size:calc({select:Font Size}px + 1px);
  1112.     margin:10px 0px 60px 0px;
  1113. }
  1114.  
  1115. #pagination, #pagination a {
  1116.     color:{color:Gradient Text};
  1117. }
  1118.  
  1119. #pagination .pg {
  1120.     margin-right:10px;
  1121. }
  1122.  
  1123. #pagination .pg .sq {
  1124.     width:25px;
  1125.     height:25px;
  1126.     padding:10px;
  1127.     border-radius:50px;
  1128.     display:inline-flex;
  1129.     display:-webkit-inline-box;
  1130.     display:-moz-inline-box;
  1131.     display:-ms-inline-flexbox;
  1132.     display:-webkit-inline-flex;
  1133.     align-items:center;
  1134.     -webkit-box-align:center;
  1135.     -moz-box-align:center;
  1136.     -ms-flex-align:center;
  1137.     -webkit-align-items:center;
  1138.     justify-content:center;
  1139.     -webkit-justify:center;
  1140.     -moz-box-justify:center;
  1141.     -ms-flex-justify:center;
  1142. }
  1143.  
  1144. #pagination .pg:last-of-type {
  1145.     margin-right:0px;
  1146. }
  1147.  
  1148. #pagination .pg:first-of-type .sq {
  1149.     background:rgba({RGBcolor:Color 1},.7);
  1150. }
  1151.  
  1152. #pagination .pg:nth-of-type(2) .sq {
  1153.     background:rgba({RGBcolor:Color 2},.7);
  1154. }
  1155.  
  1156. #pagination .pg:nth-of-type(3) .sq {
  1157.     background:rgba({RGBcolor:Color 3},.7);
  1158. }
  1159.  
  1160. #pagination .pg:nth-of-type(4) .sq {
  1161.     background:rgba({RGBcolor:Color 4},.7);
  1162. }
  1163.  
  1164. #pagination .pg:nth-of-type(5) .sq {
  1165.     background:rgba({RGBcolor:Color 5},.7);
  1166. }
  1167.  
  1168. #pagination .pg:nth-of-type(6) .sq {
  1169.     background:rgba({RGBcolor:Color 6},.7);
  1170. }
  1171.  
  1172. /* FADE IN */
  1173.  
  1174. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1175. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1176. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1177. .fade-in {
  1178.    opacity:0;
  1179.    -webkit-animation:fadeIn ease-in 1;
  1180.    -moz-animation:fadeIn ease-in 1;
  1181.    animation:fadeIn ease-in 1;
  1182.    -webkit-animation-fill-mode:forwards;
  1183.    -moz-animation-fill-mode:forwards;
  1184.    animation-fill-mode:forwards;
  1185.    -webkit-animation-duration:1s;
  1186.    -moz-animation-duration:1s;
  1187.    animation-duration:1s;}
  1188. .fade-in.one {
  1189.    -webkit-animation-delay:0s;
  1190.    -moz-animation-delay:0s;
  1191.    animation-delay:0s;}
  1192. .fade-in.two {
  1193.    -webkit-animation-delay:0.8s;
  1194.    -moz-animation-delay:0.8s;
  1195.    animation-delay:0.8s;}
  1196.    
  1197. /* RESPONSIVE DESIGN */
  1198.  
  1199. @media only screen and (max-width:1900px) and (min-width:1750px) {
  1200.     {block:IndexPage}
  1201.     section#posts.col-3.width-540 article.post {
  1202.         width:500px;
  1203.     }
  1204.    
  1205.     #container.col-3.width-540 {
  1206.         width:calc(500px * 3 + 111px);
  1207.         margin-left:calc(50vw - ((500px * 3 + 51px) / 2));
  1208.     }
  1209.    
  1210.     section#posts.col-3.width-540 {
  1211.         width:calc(500px * 3 + 111px);  
  1212.     }
  1213.     {/block:IndexPage}
  1214.    
  1215.     aside nav {
  1216.         width:13vw;
  1217.     }
  1218. }
  1219.  
  1220. @media only screen and (max-width:1749px) and (min-width:1600px) {
  1221.     {block:IndexPage}
  1222.     section#posts.col-3:not(.width-400) article.post {
  1223.         width:450px;
  1224.     }
  1225.    
  1226.     section#posts.col-3:not(.width-400) {
  1227.         width:calc(450px * 3 + 111px);
  1228.     }
  1229.    
  1230.     #container.col-3:not(.width-400) {
  1231.         margin-left:calc(50vw - ((450px * 3 + 51px) / 2));
  1232.         width:calc(450px * 3 + 111px);
  1233.     }
  1234.     {/block:IndexPage}
  1235.    
  1236.     aside nav {
  1237.         width:13vw;
  1238.     }
  1239. }
  1240.  
  1241. @media only screen and (max-width:1599px) and (min-width:1425px) {
  1242.     {block:IndexPage}
  1243.     section#posts.col-3 article.post {
  1244.         max-width:400px;
  1245.     }
  1246.    
  1247.     section#posts.col-3 {
  1248.         width:calc(400px * 3 + 111px);
  1249.     }
  1250.    
  1251.     #container.col-3 {
  1252.         margin-left:calc(50vw - ((400px * 3 + 51px) / 2));
  1253.         width:calc(400px * 3 + 111px);
  1254.     }
  1255.     {/block:IndexPage}
  1256.    
  1257.     aside nav {
  1258.         width:12vw;
  1259.     }
  1260. }
  1261.  
  1262. @media only screen and (max-width:1424px) and (min-width:1280px) {
  1263.     {block:IndexPage}
  1264.     #container.col-3 {
  1265.         margin-left:calc(50vw - (({select:Post Width}px * 2 + 51px) / 2));
  1266.         width:calc({select:Post Width}px * 2 + 51px);
  1267.     }
  1268.    
  1269.     section#posts.col-3 {
  1270.         column-count:2;
  1271.         width:calc({select:Post Width}px * 2 + 51px);
  1272.     }
  1273.     {/block:IndexPage}
  1274.    
  1275.     aside .cont {
  1276.         width:25vw;
  1277.     }
  1278. }
  1279.  
  1280. @media only screen and (max-width:1279px) and (min-width:1165px) {
  1281.     {block:IndexPage}
  1282.     section#posts.col-3.width-540 article.post, section#posts.col-2.width-540 article.post {
  1283.         width:500px;
  1284.     }
  1285.    
  1286.     #container.col-3:not(.width-540) {
  1287.         margin-left:calc(50vw - (({select:Post Width}px * 2 + 51px) / 2));
  1288.         width:calc({select:Post Width}px * 2 + 51px);
  1289.     }
  1290.    
  1291.     #container.col-3.width-540, #container.col-2.width-540 {
  1292.         margin-left:calc(50vw - ((500px * 2 + 51px) / 2));
  1293.         width:calc(500px * 2 + 51px);
  1294.     }
  1295.    
  1296.     section#posts.col-3:not(.width-540) {
  1297.         column-count:2;
  1298.         width:calc({select:Post Width}px * 2 + 51px);
  1299.     }
  1300.    
  1301.     section#posts.col-3.width-540, section#posts.col-2.width-540 {
  1302.         column-count:2;
  1303.         width:calc(500px * 2 + 51px);
  1304.     }
  1305.     {/block:IndexPage}
  1306. }
  1307.  
  1308. @media only screen and (max-width:1164px) and (min-width:1025px) {
  1309.     {block:IndexPage}
  1310.     section#posts.col-3:not(.width-400) article.post, section#posts.col-2:not(.width-400) article.post {
  1311.         width:450px;
  1312.     }
  1313.    
  1314.     #container.col-3:not(.width-400), #container.col-2:not(.width-400) {
  1315.         margin-left:calc(50vw - ((450px * 2 + 51px) / 2));
  1316.         width:calc(450px * 2 + 51px);
  1317.     }
  1318.    
  1319.     #container.col-3.width-400 {
  1320.         margin-left:calc(50vw - ((400px * 2 + 51px) / 2));
  1321.         width:calc(400px * 2 + 51px);
  1322.     }
  1323.    
  1324.     section#posts.col-3 {
  1325.         column-count:2;
  1326.     }
  1327.    
  1328.     section#posts.col-3:not(.width-400), section#posts.col-2:not(.width-400) {
  1329.         width:calc(450px * 2 + 51px);
  1330.     }
  1331.    
  1332.     section#posts.col-3.width-400 {
  1333.         width:calc(400px * 2 + 51px);
  1334.     }
  1335.     {/block:IndexPage}
  1336. }
  1337.  
  1338. @media only screen and (max-width:1024px) and (min-width:991px) {
  1339.     {block:IndexPage}
  1340.     section#posts.col-3:not(.width-400) article.post, section#posts.col-2:not(.width-400) article.post {
  1341.         width:400px;
  1342.     }
  1343.    
  1344.     #container.col-3:not(.width-400), #container.col-2:not(.width-400) {
  1345.         margin-left:calc(50vw - ((400px * 2 + 51px) / 2));
  1346.         width:calc(400px * 2 + 51px);
  1347.     }
  1348.    
  1349.     #container.col-3.width-400 {
  1350.         margin-left:calc(50vw - ((400px * 2 + 51px) / 2));
  1351.         width:calc(400px * 2 + 51px);
  1352.     }
  1353.    
  1354.     section#posts.col-3 {
  1355.         column-count:2;
  1356.     }
  1357.    
  1358.     section#posts.col-3.width-400 {
  1359.         width:calc(400px * 2 + 51px);
  1360.     }
  1361.    
  1362.     section#posts.col-3:not(.width-400), section#posts.col-2:not(.width-400) {
  1363.         width:calc(400px * 2 + 51px);
  1364.     }
  1365.     {/block:IndexPage}
  1366. }
  1367.  
  1368. @media only screen and (max-width:990px) and (min-width:701px) {
  1369.    
  1370.     section#posts:not(.col-1) {
  1371.         column-count:1;
  1372.     }
  1373.    
  1374.     section#posts:not(.col-1) article.post {
  1375.         display:block;
  1376.     }
  1377.    
  1378.     #container:not(.col-1) {
  1379.         margin-left:calc(50vw - ({select:Post Width}px / 2));
  1380.         width:{select:Post Width}px;
  1381.     }
  1382.    
  1383.     section#posts:not(.col-1) {
  1384.         width:{select:Post Width}px;
  1385.     }
  1386.    
  1387.     aside {
  1388.         width:54vw;
  1389.     }
  1390.    
  1391.     aside nav {
  1392.         width:12vw;
  1393.     }
  1394.    
  1395.     #hamburger:checked ~ .menu {
  1396.         width:105vw;
  1397.     }
  1398.    
  1399.     #hamburger:checked ~ #container {
  1400.         margin-left:60vw;
  1401.     }
  1402. }
  1403.  
  1404. @media only screen and (max-width:700px) and (min-width:651px) {
  1405.    
  1406.     section#posts:not(.col-1) {
  1407.         column-count:1;
  1408.     }
  1409.    
  1410.     section#posts:not(.col-1) article.post {
  1411.         display:block;
  1412.     }
  1413.    
  1414.     section#posts.width-540 article.post {
  1415.         width:500px;  
  1416.     }
  1417.    
  1418.     #container:not(.col-1):not(.width-540), #container:not(.width-540) {
  1419.         margin-left:calc(50vw - ({select:Post Width}px / 2));
  1420.         width:{select:Post Width}px;
  1421.     }
  1422.    
  1423.     #container.width-540 {
  1424.         margin-left:calc(50vw - (500px / 2));
  1425.         width:500px;
  1426.     }
  1427.    
  1428.     section#posts:not(.col-1):not(.width-540), section#posts:not(.width-540) {
  1429.         width:{select:Post Width}px;
  1430.     }
  1431.    
  1432.     section#posts.width-540 {
  1433.         width:500px;
  1434.     }
  1435.    
  1436.     #container.width-540 ol.notes {
  1437.         width:500px;
  1438.     }
  1439.    
  1440.     aside {
  1441.         width:61vw;
  1442.     }
  1443.    
  1444.     aside .cont {
  1445.         width:30vw;
  1446.     }
  1447.    
  1448.     aside nav {
  1449.         width:12vw;
  1450.     }
  1451.    
  1452.     #hamburger:checked ~ .menu {
  1453.         width:120vw;
  1454.     }
  1455.    
  1456.     #hamburger:checked ~ #container {
  1457.         margin-left:63vw;
  1458.     }
  1459. }
  1460.  
  1461. @media only screen and (max-width:650px) and (min-width:601px) {
  1462.    
  1463.     section#posts:not(.col-1) {
  1464.         column-count:1;
  1465.     }
  1466.    
  1467.     section#posts:not(.col-1) article.post {
  1468.         display:block;
  1469.     }
  1470.    
  1471.     section#posts:not(.width-400) article.post {
  1472.         width:450px;  
  1473.     }
  1474.    
  1475.     #container:not(.col-1):not(.width-400), #container:not(.width-400) {
  1476.         margin-left:calc(50vw - (450px / 2));
  1477.         width:450px;
  1478.     }
  1479.    
  1480.     section#posts:not(.col-1):not(.width-400), section#posts:not(.width-400) {
  1481.         width:450px;
  1482.     }
  1483.    
  1484.     #container:not(.width-400) ol.notes {
  1485.         width:450px;
  1486.     }
  1487.    
  1488.     aside {
  1489.         width:100%;
  1490.         height:100vh;
  1491.     }
  1492.    
  1493.     aside .cont {
  1494.         width:50vw;
  1495.     }
  1496.    
  1497.     aside nav {
  1498.         width:33vw;
  1499.     }
  1500.    
  1501.     #hamburger:checked ~ .menu {
  1502.         width:214vw;
  1503.         height:200vh;
  1504.     }
  1505.    
  1506.     #hamburger:checked ~ #container {
  1507.         margin-left:108vw;
  1508.     }
  1509. }
  1510.  
  1511. @media only screen and (max-width:600px) and (min-width:551px) {
  1512.    
  1513.     section#posts:not(.col-1) {
  1514.         column-count:1;
  1515.     }
  1516.    
  1517.     section#posts:not(.col-1) article.post {
  1518.         display:block;
  1519.     }
  1520.    
  1521.     section#posts article.post {
  1522.         width:400px;  
  1523.     }
  1524.    
  1525.     #container.col-1, #container.col-2, #container.col-3 {
  1526.         margin-left:calc(50vw - (400px / 2));
  1527.         width:400px;
  1528.     }
  1529.    
  1530.     section#posts.col-1, section#posts.col-2, section#posts.col-3 {
  1531.         width:400px;
  1532.     }
  1533.    
  1534.     ol.notes {
  1535.         width:400px;
  1536.     }
  1537.    
  1538.     aside {
  1539.         width:100%;
  1540.         height:100vh;
  1541.     }
  1542.    
  1543.     aside .cont {
  1544.         width:50vw;
  1545.     }
  1546.    
  1547.     aside nav {
  1548.         width:31vw;
  1549.     }
  1550.    
  1551.     #hamburger:checked ~ .menu {
  1552.         width:200vw;
  1553.         height:200vh;
  1554.     }
  1555.    
  1556.     #hamburger:checked ~ #container {
  1557.         margin-left:100vw;
  1558.     }
  1559. }
  1560.  
  1561. @media only screen and (max-width:550px) {
  1562.     section#posts:not(.col-1) {
  1563.         column-count:1;
  1564.     }
  1565.    
  1566.     section#posts:not(.col-1) article.post {
  1567.         display:block;
  1568.     }
  1569.    
  1570.     section#posts article.post {
  1571.         width:90%;
  1572.         margin:0px auto 50px auto;
  1573.     }
  1574.    
  1575.     #container.col-1, #container.col-2, #container.col-3 {
  1576.         width:100%;
  1577.         margin-left:0;
  1578.     }
  1579.    
  1580.     section#posts.col-1, section#posts.col-2, section#posts.col-3 {
  1581.         width:100%;
  1582.         margin-left:0;
  1583.     }
  1584.    
  1585.     #hamburger:checked ~ .menu {
  1586.         width:200vw;
  1587.         height:200vh;
  1588.     }
  1589.    
  1590.     #hamburger:checked ~ aside {
  1591.         width:100vw;
  1592.         height:100vh;
  1593.     }
  1594.    
  1595.     #hamburger:checked ~ #container {
  1596.         margin-left:102vw;
  1597.     }
  1598.    
  1599.     #hambuger:checked ~ body {
  1600.         overflow:hidden;
  1601.     }
  1602.    
  1603.     aside .cont {
  1604.         width:50vw;
  1605.     }
  1606.    
  1607.     aside nav {
  1608.         width:18vw;
  1609.     }
  1610.    
  1611.     ol.notes {
  1612.         width:90%;
  1613.         margin:0px auto 50px auto;
  1614.     }
  1615. }
  1616.  
  1617. /* CREDIT. DO NOT TOUCH */
  1618.  
  1619. #credz {
  1620.     position:fixed;
  1621.     bottom:15px;
  1622.     right:20px;
  1623.     width:33px;
  1624.     height:33px;
  1625.     border-radius:50px;
  1626.     border:1px solid rgba(0,0,0,.1);
  1627.     background-image:url('https://78.media.tumblr.com/avatar_09d2b1f05d49_128.pnj');
  1628.     background-repeat:no-repeat;
  1629.     background-position:center center;
  1630.     background-size:28px;
  1631.     transition:all .5s ease-in-out;
  1632. }
  1633.  
  1634. a[href="https://cactusthemes.tumblr.com"]:hover > #credz {
  1635.     -webkit-transform:scale(1.15);
  1636.     -ms-transform:scale(1.15);
  1637.     transform:scale(1.15);
  1638. }
  1639.  
  1640. </style>
  1641.  
  1642. </head>
  1643.  
  1644. <body>
  1645.  
  1646. <!-- START MENU -->
  1647.  
  1648. <input type="checkbox" id="hamburger" name="hamburger">
  1649.  
  1650. <label for="hamburger" class="fade-in one">
  1651. <span></span>
  1652. <span></span>
  1653. <span></span>
  1654. </label>
  1655.  
  1656. <div class="menu fade-in one"></div>
  1657.  
  1658. <aside class="fade-in one">
  1659.  
  1660. <div class="text">
  1661.  
  1662. <div class="cont">
  1663.  
  1664. <div class="desc"><h3>About</h3>{Description}</div>
  1665.  
  1666. {block:ifOptionalBoxText}
  1667. <div class="other">
  1668. <h3>{text:Optional Box Title}</h3>
  1669. <p>{text:Optional Box Text}</p>
  1670. </div>
  1671. {/block:ifOptionalBoxText}
  1672.  
  1673. </div>
  1674.  
  1675. <nav>
  1676. <h3>Navigation</h3>
  1677. <a href="/">home</a>
  1678. <br>
  1679. <a href="/ask">ask</a>
  1680.  
  1681. {block:ifLink1Title}
  1682. <br>
  1683. <a href="{text:Link 1 URL}">{text:Link 1 Title}</a>
  1684. {/block:ifLink1Title}
  1685.  
  1686. {block:ifLink2Title}
  1687. <br>
  1688. <a href="{text:Link 2 URL}">{text:Link 2 Title}</a>
  1689. {/block:ifLink2Title}
  1690.  
  1691. {block:ifLink3Title}
  1692. <br>
  1693. <a href="{text:Link 3 URL}">{text:Link 3 Title}</a>
  1694. {/block:ifLink3Title}
  1695.  
  1696. {block:ifLink4Title}
  1697. <br>
  1698. <a href="{text:Link 4 URL}">{text:Link 4 Title}</a>
  1699. {/block:ifLink4Title}
  1700.  
  1701. {block:ifLink5Title}
  1702. <br>
  1703. <a href="{text:Link 5 URL}">{text:Link 5 Title}</a>
  1704. {/block:ifLink5Title}
  1705.  
  1706. {block:ifLink6Title}
  1707. <br>
  1708. <a href="{text:Link 6 URL}">{text:Link 6 Title}</a>
  1709. {/block:ifLink6Title}
  1710. </nav>
  1711.  
  1712. </div>
  1713.  
  1714. </aside>
  1715.  
  1716. <!-- END MENU -->
  1717.  
  1718. <!-- START POSTS CONTAINER -->
  1719.  
  1720. <div id="container" class="col-{select:Columns} width-{select:Post Width}">
  1721.  
  1722. <!-- START POSTS -->
  1723.  
  1724. <section id="posts" class="fade-in two col-{select:Columns} width-{select:Post Width}">
  1725.  
  1726. {block:Posts}
  1727.  
  1728. <!-- START POST -->
  1729.  
  1730. <article class="post {block:Text}text{/block:Text}{block:Photo}photo{/block:Photo}{block:Photoset}photo{/block:Photoset}{block:Video}photo{/block:Video}{block:Quote}quote{/block:Quote}{block:Link}text{/block:Link}{block:Chat}chat{/block:Chat}{block:Audio}audio{/block:Audio}{block:Answer}answer{/block:Answer}" id="{PostId}">
  1731.  
  1732. {block:Text}
  1733.  
  1734. <!-- START TEXT POST -->
  1735.  
  1736. {block:Title}
  1737. <h2 class="title"><a href="{Permalink}">{Title}</a></h2>
  1738. {/block:Title}
  1739.  
  1740. <div class="caption">
  1741. {block:NotReblog}
  1742.     <figcaption>
  1743.         {Body}
  1744.     </figcaption>
  1745. {/block:NotReblog}
  1746.  
  1747. {block:RebloggedFrom}
  1748. <div class="reblog-list">
  1749.     {block:Reblogs}
  1750.             <div class="reblog-header">
  1751.  
  1752.                 {block:IsActive}
  1753.                 <a href="{Permalink}" target="_blank" class="active">
  1754.                     <img src="{PortraitURL-64}" class="blog">
  1755.                     <span class="blog">{Username}</span>
  1756.                 </a>
  1757.                 {/block:IsActive}
  1758.  
  1759.                 {block:IsDeactivated}
  1760.                 <span class="inactive">
  1761.                     <img src="{PortraitURL-64}" class="blog">
  1762.                     <span class="blog">{Username}</span><span class="de">deactivated</span>
  1763.                 </span>
  1764.                 {/block:IsDeactivated}
  1765.  
  1766.             </div>
  1767.             <div class="reblog-content">
  1768.                 {Body}
  1769.             </div>
  1770.     {/block:Reblogs}
  1771. </div>
  1772. {/block:RebloggedFrom}
  1773. </div>
  1774.  
  1775. <!-- END TEXT POST -->
  1776.  
  1777. {/block:Text}
  1778.  
  1779. {block:Photo}
  1780.  
  1781. <!-- START PHOTO POST -->
  1782.  
  1783. <div class="pic">
  1784. <img src="{PhotoURL-HighRes}">
  1785. </div>
  1786.  
  1787. {block:Caption}
  1788. <div class="caption">
  1789. {block:NotReblog}
  1790.     <figcaption>
  1791.         {Caption}
  1792.     </figcaption>
  1793. {/block:NotReblog}
  1794.  
  1795. {block:RebloggedFrom}
  1796. <div class="reblog-list">
  1797.     {block:Reblogs}
  1798.             <div class="reblog-header">
  1799.  
  1800.                 {block:IsActive}
  1801.                 <a href="{Permalink}" target="_blank" class="active">
  1802.                     <img src="{PortraitURL-64}" class="blog">
  1803.                     <span class="blog">{Username}</span>
  1804.                 </a>
  1805.                 {/block:IsActive}
  1806.  
  1807.                 {block:IsDeactivated}
  1808.                 <span class="inactive">
  1809.                     <img src="{PortraitURL-64}" class="blog">
  1810.                     <span class="blog">{Username}</span><span class="de">deactivated</span>
  1811.                 </span>
  1812.                 {/block:IsDeactivated}
  1813.  
  1814.             </div>
  1815.             <div class="reblog-content">
  1816.                 {Body}
  1817.             </div>
  1818.     {/block:Reblogs}
  1819. </div>
  1820. {/block:RebloggedFrom}
  1821. </div>
  1822. {/block:Caption}
  1823.  
  1824. <!-- END PHOTO POST -->
  1825.  
  1826. {/block:Photo}
  1827.  
  1828. {block:Photoset}
  1829.  
  1830. <!-- START PHOTOSET POST -->
  1831.  
  1832. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}{block:LinkURL}{LinkOpenTag}{/block:LinkURL}<div><img src="{PhotoURL-500}" /></div>{block:LinkURL}{LinkCloseTag}{/block:LinkURL}{/block:Photos}</div>
  1833.  
  1834. {block:Caption}
  1835. <div class="caption">
  1836. {block:NotReblog}
  1837.     <figcaption>
  1838.         {Caption}
  1839.     </figcaption>
  1840. {/block:NotReblog}
  1841.  
  1842. {block:RebloggedFrom}
  1843. <div class="reblog-list">
  1844.     {block:Reblogs}
  1845.             <div class="reblog-header">
  1846.  
  1847.                 {block:IsActive}
  1848.                 <a href="{Permalink}" target="_blank" class="active">
  1849.                     <img src="{PortraitURL-64}" class="blog">
  1850.                     <span class="blog">{Username}</span>
  1851.                 </a>
  1852.                 {/block:IsActive}
  1853.  
  1854.                 {block:IsDeactivated}
  1855.                 <span class="inactive">
  1856.                     <img src="{PortraitURL-64}" class="blog">
  1857.                     <span class="blog">{Username}</span><span class="de">deactivated</span>
  1858.                 </span>
  1859.                 {/block:IsDeactivated}
  1860.  
  1861.             </div>
  1862.             <div class="reblog-content">
  1863.                 {Body}
  1864.             </div>
  1865.     {/block:Reblogs}
  1866. </div>
  1867. {/block:RebloggedFrom}
  1868. </div>
  1869. {/block:Caption}
  1870.  
  1871. <!-- END PHOTOSET POST -->
  1872.  
  1873. {/block:Photoset}
  1874.  
  1875. {block:Quote}
  1876.  
  1877. <!-- START QUOTE POST -->
  1878.  
  1879. <div class="quote">
  1880. {Quote}
  1881. </div>
  1882.  
  1883. {block:Source}
  1884. <div class="divide"></div>
  1885. <div class="qsource">{Source}</div>
  1886. {/block:Source}
  1887.  
  1888. <!-- END QUOTE POST -->
  1889.  
  1890. {/block:Quote}
  1891.  
  1892. {block:Link}
  1893.  
  1894. <!-- START LINK POST -->
  1895.  
  1896. <a href="{URL}"><h2 class="title"> <span class="text">{Name}</span> <span class="th th-link" aria-hidden="true"></span></h2></a>
  1897.  
  1898. {block:Description}
  1899. <div class="caption">
  1900. {block:NotReblog}
  1901.     <figcaption>
  1902.         {Description}
  1903.     </figcaption>
  1904. {/block:NotReblog}
  1905.  
  1906. {block:RebloggedFrom}
  1907. <div class="reblog-list">
  1908.     {block:Reblogs}
  1909.             <div class="reblog-header">
  1910.  
  1911.                 {block:IsActive}
  1912.                 <a href="{Permalink}" target="_blank" class="active">
  1913.                     <img src="{PortraitURL-64}" class="blog">
  1914.                     <span class="blog">{Username}</span>
  1915.                 </a>
  1916.                 {/block:IsActive}
  1917.  
  1918.                 {block:IsDeactivated}
  1919.                 <span class="inactive">
  1920.                     <img src="{PortraitURL-64}" class="blog">
  1921.                     <span class="blog">{Username}</span><span class="de">deactivated</span>
  1922.                 </span>
  1923.                 {/block:IsDeactivated}
  1924.  
  1925.             </div>
  1926.             <div class="reblog-content">
  1927.                 {Body}
  1928.             </div>
  1929.     {/block:Reblogs}
  1930. </div>
  1931. {/block:RebloggedFrom}
  1932. </div>
  1933. {/block:Description}
  1934.  
  1935. <!-- END LINK POST -->
  1936.  
  1937. {/block:Link}
  1938.  
  1939. {block:Chat}
  1940.  
  1941. <!-- START CHAT POST -->
  1942.  
  1943. {block:Title}<h2 class="title"><a href="{Permalink}">{Title}</a></h2>{/block:Title}
  1944.  
  1945. <ol class="chat">
  1946. {block:Lines}
  1947. <li class="line">
  1948. {block:Label}
  1949. <span class="label">
  1950. {Label}
  1951. </span>
  1952. {/block:Label}
  1953. {Line}
  1954. </li>
  1955. {/block:Lines}
  1956. </ol>
  1957.  
  1958. <!-- END CHAT POST -->
  1959.  
  1960. {/block:Chat}
  1961.  
  1962. {block:Video}
  1963.  
  1964. <!-- START VIDEO POST -->
  1965.  
  1966. <div class="video">
  1967. {Video-500}
  1968. </div>
  1969.  
  1970. {block:Caption}
  1971. <div class="caption">
  1972. {block:NotReblog}
  1973.     <figcaption>
  1974.         {Caption}
  1975.     </figcaption>
  1976. {/block:NotReblog}
  1977.  
  1978. {block:RebloggedFrom}
  1979. <div class="reblog-list">
  1980.     {block:Reblogs}
  1981.             <div class="reblog-header">
  1982.  
  1983.                 {block:IsActive}
  1984.                 <a href="{Permalink}" target="_blank" class="active">
  1985.                     <img src="{PortraitURL-64}" class="blog">
  1986.                     <span class="blog">{Username}</span>
  1987.                 </a>
  1988.                 {/block:IsActive}
  1989.  
  1990.                 {block:IsDeactivated}
  1991.                 <span class="inactive">
  1992.                     <img src="{PortraitURL-64}" class="blog">
  1993.                     <span class="blog">{Username}</span><span class="de">deactivated</span>
  1994.                 </span>
  1995.                 {/block:IsDeactivated}
  1996.  
  1997.             </div>
  1998.             <div class="reblog-content">
  1999.                 {Body}
  2000.             </div>
  2001.     {/block:Reblogs}
  2002. </div>
  2003. {/block:RebloggedFrom}
  2004. </div>
  2005. {/block:Caption}
  2006.  
  2007. <!-- END VIDEO POST -->
  2008.  
  2009. {/block:Video}
  2010.  
  2011. {block:Audio}
  2012.  
  2013. <!-- START AUDIO POST -->
  2014.  
  2015. {block:AudioEmbed}
  2016. <div class="audio">
  2017. {AudioEmbed-500}
  2018. </div>
  2019. {/block:AudioEmbed}
  2020.  
  2021. {block:AudioPlayer}
  2022.  
  2023. <div class="audio">
  2024.  
  2025. {block:AlbumArt}
  2026.     <div class="art">
  2027.         <img src="{AlbumArtURL}">
  2028.     </div>
  2029. {/block:AlbumArt}
  2030.  
  2031. <div class="player">
  2032.     {AudioPlayer}
  2033. </div>
  2034.  
  2035. <div class="auinfo">
  2036. <div class="inf">
  2037.     {block:TrackName}
  2038.         <span class="track">
  2039.             {TrackName}
  2040.         </span>
  2041.     {/block:TrackName}
  2042.  
  2043.     {block:Album}
  2044.         <span class="album">
  2045.             on {Album}
  2046.         </span>
  2047.     {/block:Album}
  2048.  
  2049.     {block:Artist}
  2050.         <span class="artist">
  2051.             from {Artist}
  2052.         </span>
  2053.     {/block:Artist}
  2054. </div>
  2055. </div>
  2056.  
  2057. </div>
  2058.  
  2059. {/block:AudioPlayer}
  2060.  
  2061. {block:Caption}
  2062. <div class="caption">
  2063. {block:NotReblog}
  2064.     <figcaption>
  2065.         {Caption}
  2066.     </figcaption>
  2067. {/block:NotReblog}
  2068.  
  2069. {block:RebloggedFrom}
  2070. <div class="reblog-list">
  2071.     {block:Reblogs}
  2072.             <div class="reblog-header">
  2073.  
  2074.                 {block:IsActive}
  2075.                 <a href="{Permalink}" target="_blank" class="active">
  2076.                     <img src="{PortraitURL-64}" class="blog">
  2077.                     <span class="blog">{Username}</span>
  2078.                 </a>
  2079.                 {/block:IsActive}
  2080.  
  2081.                 {block:IsDeactivated}
  2082.                 <span class="inactive">
  2083.                     <img src="{PortraitURL-64}" class="blog">
  2084.                     <span class="blog">{Username}</span><span class="de">deactivated</span>
  2085.                 </span>
  2086.                 {/block:IsDeactivated}
  2087.  
  2088.             </div>
  2089.             <div class="reblog-content">
  2090.                 {Body}
  2091.             </div>
  2092.     {/block:Reblogs}
  2093. </div>
  2094. {/block:RebloggedFrom}
  2095. </div>
  2096. {/block:Caption}
  2097.  
  2098. <!-- END AUDIO POST -->
  2099.  
  2100. {/block:Audio}
  2101.  
  2102. {block:Answer}
  2103.  
  2104. <!-- START ANSWER POST -->
  2105.  
  2106. <div class="ask">
  2107.  
  2108. <div class="askinf">
  2109.     <img src="{AskerPortraitURL-48}">
  2110.     <span>{Asker}</span>
  2111. </div>
  2112.  
  2113. </div>
  2114.  
  2115. <div class="queanswer">
  2116.  
  2117. <div class="que" {block:RebloggedFrom}style="margin-bottom:10px;"{/block:RebloggedFrom}>
  2118.     {Question}
  2119. </div>
  2120.  
  2121. <div class="caption">
  2122. {block:NotReblog}
  2123.     <figcaption>
  2124.         {Replies}
  2125.     </figcaption>
  2126. {/block:NotReblog}
  2127.  
  2128. {block:RebloggedFrom}
  2129. {block:Answerer}
  2130. <div class="reblog-header">
  2131.   <a href="{ReblogRootURL}" class="active">
  2132.     <img src="{AnswererPortraitURL-64}" class="blog">
  2133.     <span class="blog">{ReblogRootName}</span>
  2134.   </a>
  2135. </div>
  2136. <div class="reblog-content">
  2137.   {Answer}
  2138. </div>
  2139. {/block:Answerer}
  2140. <div class="reblog-list">
  2141.     {block:Reblogs}
  2142.             <div class="reblog-header">
  2143.  
  2144.                 {block:IsActive}
  2145.                 <a href="{Permalink}" target="_blank" class="active">
  2146.                     <img src="{PortraitURL-64}" class="blog">
  2147.                     <span class="blog">{Username}</span>
  2148.                 </a>
  2149.                 {/block:IsActive}
  2150.  
  2151.                 {block:IsDeactivated}
  2152.                 <span class="inactive">
  2153.                     <img src="{PortraitURL-64}" class="blog">
  2154.                     <span class="blog">{Username}</span><span class="de">deactivated</span>
  2155.                 </span>
  2156.                 {/block:IsDeactivated}
  2157.  
  2158.             </div>
  2159.             <div class="reblog-content">
  2160.                 {Body}
  2161.             </div>
  2162.     {/block:Reblogs}
  2163. </div>
  2164. {/block:RebloggedFrom}
  2165. </div>
  2166.  
  2167. </div>
  2168.  
  2169. <!-- END ANSWER POST -->
  2170.  
  2171. {/block:Answer}
  2172.  
  2173. {block:Date}
  2174.  
  2175. <div class="postinfo">
  2176.  
  2177. <a href="{Permalink}">
  2178. {ShortMonth} {DayOfMonth}{DayOfMonthSuffix}, {Year}
  2179. </a>
  2180.  
  2181. •
  2182.  
  2183. <a href="{Permalink}">
  2184. {NoteCountWithLabel}
  2185. </a>
  2186.  
  2187. •
  2188.  
  2189. <a href="#">{LikeButton}</a>
  2190.  
  2191. •
  2192.  
  2193. <a href="{ReblogURL}">reblog</a>
  2194.  
  2195. </div>
  2196.  
  2197. {/block:Date}
  2198.  
  2199. {block:HasTags}
  2200.  
  2201. <div class="tags">
  2202.  
  2203. {block:Tags}
  2204. <a href="{TagURL}"><span class="tag">.{Tag}</span></a>
  2205. {/block:Tags}
  2206.  
  2207. </div>
  2208.  
  2209. {/block:HasTags}
  2210.  
  2211. {block:RebloggedFrom}
  2212. <!-- <a href="{ReblogParentURL}" title="via: {ReblogParentName}"><img style="margin-bottom:-2px;" src="{ReblogParentPortraitURL-16}"></a> -->
  2213. {/block:RebloggedFrom}
  2214.  
  2215. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  2216.  
  2217. </article>
  2218.  
  2219. <!-- END POST -->
  2220.  
  2221. {/block:Posts}
  2222.  
  2223. {block:PostNotes}
  2224.  
  2225. <!-- START POST NOTES -->
  2226.  
  2227. {PostNotes-64}
  2228.  
  2229. <!-- END POST NOTES -->
  2230.  
  2231. {/block:PostNotes}
  2232.  
  2233. </section>
  2234.  
  2235. {block:Pagination}
  2236.  
  2237. <!-- START PAGINATION -->
  2238.  
  2239. <div id="pagination" >
  2240.  
  2241. {block:PreviousPage}
  2242. <a href="{PreviousPage}" class="pg">
  2243. <span class="sq">
  2244. <span class="fas fa-chevron-left" aria-hidden="true"></span>
  2245. </span>
  2246. </a>
  2247. {/block:PreviousPage}
  2248.  
  2249. {block:JumpPagination length="4"}
  2250.  
  2251. {block:CurrentPage}
  2252. <a href="#" class="pg" style="cursor:default;">
  2253. <span class="sq" style="padding:10px 11px;">
  2254. <span class="fas fa-sun" aria-hidden="true"></span>
  2255. </span>
  2256. </a>
  2257. {/block:CurrentPage}
  2258.  
  2259. {block:JumpPage}
  2260. <a href="{URL}" class="pg">
  2261. <span class="sq">
  2262. {PageNumber}
  2263. </span>
  2264. </a>
  2265. {/block:JumpPage}
  2266.  
  2267. {/block:JumpPagination}
  2268.  
  2269. {block:NextPage}
  2270. <a href="{NextPage}" class="pg">
  2271. <span class="sq">
  2272. <span class="fas fa-chevron-right" aria-hidden="true"></span>
  2273. </span>
  2274. </a>
  2275. {/block:NextPage}
  2276.  
  2277. </div>
  2278.  
  2279. <!-- END PAGINATION -->
  2280.  
  2281. {/block:Pagination}
  2282.  
  2283. <!-- END POSTS -->
  2284.  
  2285. </div>
  2286.  
  2287. <!-- END POSTS CONTAINER -->
  2288.  
  2289. <!-- CREDIT. DO NOT TOUCH -->
  2290.  
  2291. <a href="https://cactusthemes.tumblr.com" title="by cactusthemes">
  2292. <div id="credz" class="fade-in two">
  2293. </div>
  2294. </a>
  2295.  
  2296. </body>
  2297.  
  2298. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!