API tools faq
paste
Advertisement
skypxllar

Blockout Tumblr Theme

skypxllar
May 8th, 2023 (edited)
165
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 96.51 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3.    BLOCKOUT THEME: A simple and functional theme
  4.    AUTHOR: © SKYE TRICKSTER (Vincent)
  5.    TUMBLR: @mxstball
  6.    GITHUB: @skye-trickster
  7.    VERSION: 2.1.0
  8.    RELEASE DATE: 21 August 2024
  9.    GET THE THEME: https://raw.githubusercontent.com/skye-trickster/tumblr-custom-theme/main/blockout.html
  10.    TEXT ICON CREDIT: GOOGLE MATERIAL
  11.  
  12.    Credits:
  13.        - NPF Format rendering based on eggdesign: https://npftemplate.tumblr.com/
  14.  
  15.    Please do not remove the credit.
  16. -->
  17. <html>
  18.     <head>
  19.         <meta name="viewport" content="width=device-width, initial-scale=1" />
  20.         <title>{Title}</title>
  21.  
  22.         {block:Hidden}
  23.  
  24.         <!-- VARIABLES -->
  25.         <!-- COLOR OPTIONS -->
  26.         <meta name="color:Background" content="#111111">
  27.         <meta name="color:Accent Color" content="#56bc8a">
  28.         <meta name="color:Dark Accent Color" content="#0f2017">
  29.         <meta name="color:Text Color" content="white">
  30.         <meta name="color:Subtext Color" content="#808080">
  31.         <meta name="color:Nav Color" content="#333333">
  32.         <meta name="color:Content Color" content="#222222">
  33.         <meta name="color:Avatar Border Color" content="white">
  34.         <meta name="color:Blog Footer Color" content="black">
  35.         <meta name="color:Side Background Color" content="#121212">
  36.         <meta name="if:White Like and Reblog" content="1">
  37.         <meta name="color:Main Border Color" content="white">
  38.         <meta name="color:Search Background Color" content="white">
  39.         <meta name="color:Search Text Color" content="black">
  40.  
  41.         <!-- FOOTER TRANSPARENCY -->
  42.         <meta name="color:Post Footer Color" content="white">
  43.         <meta name="select:Post Footer Transparency" content="0.05" title="5% (Default)">
  44.         <meta name="select:Post Footer Transparency" content="0" title="0%">
  45.         <meta name="select:Post Footer Transparency" content="0.1" title="10%">
  46.         <meta name="select:Post Footer Transparency" content="0.25" title="25%">
  47.         <meta name="select:Post Footer Transparency" content="0.5" title="50%">
  48.         <meta name="select:Post Footer Transparency" content="0.75" title="75%">
  49.         <meta name="select:Post Footer Transparency" content="0.9" title="90%">
  50.         <meta name="select:Post Footer Transparency" content="1" title="100%">
  51.        
  52.         <!-- FONT SIZE -->
  53.         <meta name="select:Font Size" content="15px" title="15px (Default)">
  54.         <meta name="select:Font Size" content="14px" title="14px">
  55.         <meta name="select:Font Size" content="16px" title="16px">
  56.         <meta name="select:Font Size" content="18px" title="18px">
  57.        
  58.         <!-- POST SIZE -->
  59.         <meta name="select:Post Size" content="650px" title="650px (Default)">
  60.         <meta name="select:Post Size" content="500px" title="500px">
  61.         <meta name="select:Post Size" content="600px" title="600px">
  62.         <meta name="select:Post Size" content="700px" title="700px">
  63.        
  64.         <!-- SIDEBAR SIZE -->
  65.         <meta name="select:Sidebar Size" content="350px" title="350px (Default)">
  66.         <meta name="select:Sidebar Size" content="250px" title="250px">
  67.         <meta name="select:Sidebar Size" content="300px" title="300px">
  68.         <meta name="select:Sidebar Size" content="400px" title="400px">
  69.        
  70.         <!-- ADDITIONAL TEXT -->
  71.         <meta name="if:Show Description" content="1">
  72.         <meta name="if:Show Subtext" content="1">
  73.         <meta name="text:Subtext" content="">
  74.         <meta name="text:Custom Ask Label" content="Ask">
  75.         <meta name="text:Custom Submit Label" content="Submit">
  76.         <meta name="text:Page Icons" content="">
  77.  
  78.         <!-- POST VARIABLES -->
  79.         <meta name="if:Sticky Post Headers" content="0">
  80.         <meta name="if:Show Additional Photo Info" content="1">
  81.         <meta name="font:Title" content="{TitleFont}">
  82.         <meta name="font:Body" content="Helvetica Neue">
  83.  
  84.         <!-- SIDENAV VARIABLES -->
  85.         <meta name="if:Show Sidebar" content="1">
  86.         <meta name="text:Updates Title" content="Updates">
  87.         <meta name="text:Updates Tag" content="Tag">
  88.         <meta name="text:Updates Text" content="Feel free to use this to post updates!">
  89.         <meta name="text:Guest Tag Title" content="Guest Tags">
  90.         <meta name="text:Guest Tags" content="red, blue, leaf">
  91.         <meta name="text:Main Tag Title" content="Main Tags">
  92.         <meta name="text:Main Tags" content="venusaur, squirtle, charizard">
  93.        
  94.         <meta name="if:Copyright Years" content="1">
  95.         <meta name="if:Filled Icons" content="1">
  96.        
  97.         <!--  CUSTOM LINKS -->
  98.         <meta name="if:Open custom links in a new tab" content="1">
  99.         <meta name="text:Link 1 Name" content="">
  100.         <meta name="text:Link 1 URL" content="">
  101.         <meta name="text:Link 1 Symbol" content="">
  102.  
  103.         <meta name="text:Link 2 Name" content="">
  104.         <meta name="text:Link 2 URL" content="">
  105.         <meta name="text:Link 2 Symbol" content="">
  106.  
  107.         <meta name="text:Link 3 Name" content="">
  108.         <meta name="text:Link 3 URL" content="">
  109.         <meta name="text:Link 3 Symbol" content="">
  110.  
  111.         <meta name="text:Link 4 Name" content="">
  112.         <meta name="text:Link 4 URL" content="">
  113.         <meta name="text:Link 4 Symbol" content="">
  114.  
  115.         <!-- VARIABLES -->
  116.         {/block:Hidden}
  117.  
  118.         <link rel="shortcut icon" href="{Favicon}">
  119.         {block:IfFilledIcons}
  120.         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,1,0">
  121.         {/block:IfFilledIcons}
  122.         {block:IfNotFilledIcons}
  123.         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0">
  124.         {/block:IfNotFilledIcons}
  125.  
  126.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  127.         {block:Description}
  128.         <meta name="description" content="{MetaDescription}">
  129.         {/block:Description}
  130.  
  131.         <style>
  132.             /* GLOBAL VARIABLES */
  133.             :root {
  134.                 --main-background-color: {color:Background};
  135.                 --accent-color: {color:Accent Color};
  136.                 --accent-color-dark: {color:Dark Accent Color};
  137.                 --main-text-color: {color:Text Color};
  138.                 --main-far-color: {color:Blog Footer Color};
  139.                 --side-bg-color: {color:Side Background Color};
  140.                 --subtext-color: {color:Subtext Color};
  141.                 --content-color: {color:Content Color};
  142.                 --font: {font:Body}, Arial, Helvetica, sans-serif;
  143.                 --title-font: {font:Title};
  144.                 --font-size: {select:Font Size};
  145.                 --extreme-margin: 30px;
  146.                 --large-margin: 20px;
  147.                 --mobile-margin: 15px;
  148.                 --standard-margin: 10px;
  149.                 --tip-x: calc(-1 * var(--standard-margin) - 5px);
  150.                 --tip-y: 10px;
  151.                 --small-margin: 5px;
  152.                 --tiny-margin: 3px;
  153.                 --nav-color: {color:Nav Color};
  154.                 --border-standard: 1px solid var(--border-color);
  155.                 --border-thick: 1px solid var(--border-desktop-color);
  156.                 --max-post-list-width: {select:Post Size};
  157.                 --search-background-color: {color:Search Background Color};
  158.                 --search-text-color: {color:Search Text Color};
  159.             }
  160.            
  161.             :root {
  162.                 --border-color: rgba(255, 255, 255, 0.05);
  163.                 --border-color: rgba({RGBcolor:Main Border Color}, 0.05);
  164.  
  165.                 --border-desktop-color: rgba(255, 255, 255, 0.2);
  166.                 --border-desktop-color: rgba({RGBcolor:Main Border Color}, 0.2);
  167.             }
  168.            
  169.             body {
  170.                 --pushdown-amount: 0px;
  171.             }
  172.            
  173.             body.tmblr-iframe-pushdown {
  174.                 --pushdown-amount: 54px;
  175.             }
  176.  
  177.             * {
  178.                 margin: 0;
  179.                 padding: 0;
  180.                 box-sizing: border-box;
  181.             }
  182.  
  183.             *:visited{
  184.                 color: inherit;
  185.             }
  186.  
  187.             a {
  188.                 color: var(--accent-color);
  189.                 text-decoration: none;
  190.             }
  191.  
  192.             a:hover { text-decoration: underline;}
  193.  
  194.             body {
  195.                 font-size: var(--font-size);
  196.                 line-height: 1.4;
  197.                 color: var(--main-text-color);
  198.                 background-color: var(--main-background-color);
  199.                 font-family: var(--font), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  200.             }
  201.  
  202.             img {
  203.                 inline-size: 100%;
  204.             }
  205.  
  206.             .flex {
  207.                 display: flex;
  208.                 flex-direction: column;
  209.             }
  210.  
  211.             /* HEADING */
  212.  
  213.             #heading .title:hover { text-decoration: none;}
  214.             #heading .title:link { color:var(--main-text-color); }
  215.  
  216.             #heading {
  217.                 background-color: var(--content-color);
  218.             }
  219.  
  220.             #heading .information {
  221.                 text-align: center;
  222.                 background-color: var(--content-color);
  223.             }
  224.            
  225.             #heading .header-image {
  226.                 display: flex;
  227.             }
  228.  
  229.             #heading h1 {
  230.                 padding: var(--mobile-margin);
  231.                 font-size: 2.5rem;
  232.                 font-family: {font:Title};
  233.             }
  234.            
  235.             {block:IfNotShowDescription}
  236.             {block:IfNotShowSubtext}
  237.             #heading .description {
  238.                 display: none;
  239.             }
  240.             {/block:IfNotShowSubtext}
  241.             {/block:IfNotShowDescription}
  242.  
  243.             #heading .description {
  244.                 padding-inline: var(--mobile-margin);
  245.                 padding-block-start: var(--mobile-margin);
  246.                 max-width: 100%;
  247.                 text-align: start;
  248.             }
  249.  
  250.             #heading .description a {
  251.                 color: var(--accent-color);
  252.             }
  253.  
  254.             .writer {
  255.                 text-align: center;
  256.                 margin-block: var(--mobile-margin);
  257.                 display: flex;
  258.                 flex-direction: row;
  259.                 justify-content: center;
  260.                 column-gap: var(--small-margin);
  261.                 align-items: center;
  262.             }
  263.            
  264.             .tumblr-controls-desktop {
  265.                 display: none;
  266.             }
  267.  
  268.             /* NAVBAR */
  269.  
  270.             #heading .navigation {
  271.                 background-color: var(--nav-color);
  272.                 padding: var(--small-margin);
  273.                 border-block: var(--border-standard);
  274.             }
  275.  
  276.             #heading .navigation ul {
  277.                 overflow: auto;
  278.                 white-space: nowrap;
  279.                 text-align: center;
  280.             }
  281.  
  282.             #heading .navigation .material-symbols-outlined,
  283.             .nav-left .no-icon {
  284.                 display: none;
  285.             }
  286.  
  287.             #heading .navigation ul li {
  288.                 display: inline-block;
  289.                 list-style-type: none;
  290.             }
  291.  
  292.             #heading .navigation a {
  293.                 padding: var(--mobile-margin);
  294.             }
  295.  
  296.             /* Navigation and Footer */
  297.             nav a {
  298.                 text-decoration: none;
  299.                 display: inline-block;
  300.                 inline-size: 100%;
  301.                 font-weight: 700;
  302.                 font-size: 1.1rem;
  303.                 color: var(--subtext-color);
  304.             }
  305.  
  306.             nav a:hover {
  307.                 background-color: var(--accent-color-dark);
  308.                 text-decoration: none;
  309.                 color: var(--accent-color);
  310.                 transition: 0.5s;
  311.             }
  312.  
  313.             nav a:visited {
  314.                 color: var(--subtext-color);
  315.             }
  316.  
  317.             nav a:visited:hover {
  318.                 color: var(--accent-color);
  319.             }
  320.  
  321.             /* Items with secondary color */
  322.             .secondary {
  323.                 color: var(--subtext-color)
  324.             }
  325.  
  326.             #menu:hover { cursor: pointer; }
  327.  
  328.             /* MAIN CONTENT: MOBILE */
  329.             .post {
  330.                 background-color: var(--content-color);
  331.                 border-block-end: var(--border-thick);
  332.             }
  333.  
  334.             .post img {
  335.                 inline-size: auto;
  336.                 max-inline-size: 100%;
  337.                 object-fit: contain;
  338.             }
  339.  
  340.             .post header {
  341.                 padding: var(--mobile-margin);
  342.             }
  343.            
  344.             .post header.sticky {
  345.                 position: sticky;
  346.                 top: var(--pushdown-amount);
  347.                 z-index: 20;
  348.                 background-color: var(--content-color);
  349.             }
  350.            
  351.             .post header h1 {
  352.                 text-align: center;
  353.             }
  354.  
  355.             .content blockquote {
  356.                 border-inline-start: var(--border-thick);
  357.                 border-block-end: var(--border-thick);
  358.                 border-radius: 0;
  359.                 border-end-start-radius: 0.5em;
  360.                 padding-inline: var(--large-margin);
  361.                 padding-block-end: var(--standard-margin);
  362.                 margin-block-end: var(--standard-margin);
  363.             }
  364.  
  365.             .content br {
  366.                 margin: 0;
  367.             }
  368.  
  369.             .post-info {
  370.                 color: var(--subtext-color);
  371.                 font-weight: 700;
  372.                 font-size: 0.8em;
  373.                 display: flex;
  374.                 justify-content: space-between;
  375.                 align-items: center;
  376.             }
  377.            
  378.             .post-meta {
  379.                 display: flex;
  380.                 flex-direction: row;
  381.                 column-gap: var(--small-margin);
  382.                 align-items: center;
  383.             }
  384.  
  385.             .post-info div, .post-info a {
  386.                 font-size: 1.1em;
  387.                 text-decoration: none;
  388.                 color: var(--subtext-color);
  389.             }
  390.  
  391.             .post h1 {
  392.                 font-size: 1.9em;
  393.             }
  394.  
  395.             .post h1 a {
  396.                 color: inherit;
  397.                 text-decoration: none;
  398.             }
  399.  
  400.             .post .content {
  401.                 text-align: start;
  402.             }
  403.  
  404.             .content a {
  405.                 color: var(--accent-color);
  406.             }
  407.  
  408.             .content figure {
  409.                 border: none;
  410.                 line-height: 0;
  411.             }
  412.            
  413.             .content figure.tmblr-full {
  414.                 text-align: center;
  415.             }
  416.            
  417.             .content figure p {
  418.                 line-height: 1.4;
  419.             }
  420.  
  421.             .content ol, .content ul {
  422.                 padding-inline-start: 40px;
  423.             }
  424.  
  425.             .content ol li, .content ul li {
  426.                 margin-block-end: var(--standard-margin);
  427.             }
  428.  
  429.             .post-body {
  430.                 padding: var(--mobile-margin);
  431.             }
  432.  
  433.             .post-body > *,
  434.             .asker-question > *,
  435.             .answerer-answer > * {
  436.                 margin-block-end: var(--standard-margin);
  437.             }
  438.            
  439.             .post-body > *:last-child,
  440.             .asker-question > *:last-child,
  441.             .answerer-answer > *:last-child {
  442.                 margin-block-end: 0;
  443.             }
  444.  
  445.             .post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
  446.                 font-weight: normal;
  447.             }
  448.  
  449.             .post-body h1 a {
  450.                 color: var(--accent-color);
  451.             }
  452.  
  453.             .post-body h1 a:hover {
  454.                 text-decoration: underline;
  455.             }
  456.  
  457.             .post-body h1 a:visited {
  458.                 color: inherit;
  459.             }
  460.  
  461.             .post-body ul, .post-body ol {
  462.                 /* To keep the original ordered list */
  463.                 padding-inline-start: 40px;
  464.             }
  465.            
  466.             .reblog-item .post-body {
  467.                 padding-block: 0;
  468.             }
  469.            
  470.             .post .post-source {
  471.                 border-block-start: var(--border-standard);
  472.                 justify-content: space-between;
  473.                 background-color: var(--border-color);
  474.                 padding: var(--small-margin);
  475.                 background-color: rgba(255, 255, 255, 0.1);
  476.                 background-color: rgba({RGBcolor:Post Footer Color}, {select:Post Footer Transparency});
  477.                 font-size: 0.9em;
  478.                 text-align: center;
  479.                 color: var(--subtext-color);
  480.             }
  481.            
  482.             .post .post-source a, .post .post-source a:visited {
  483.                 color: var(--accent-color);
  484.             }
  485.  
  486.             .post footer {
  487.                 border-block-start: var(--border-standard);
  488.                 display: flex;
  489.                 justify-content: space-between;
  490.                 background-color: var(--border-color);
  491.                 padding: var(--mobile-margin);
  492.                 flex-direction: column;
  493.                
  494.                 background-color: rgba(255, 255, 255, 0.1);
  495.                 background-color: rgba({RGBcolor:Post Footer Color}, {select:Post Footer Transparency});
  496.             }
  497.            
  498.             .post-tags {
  499.                 flex: 2;
  500.                 list-style: none;
  501.                 border-block-end: var(--border-thick);
  502.                 padding-block-end: var(--mobile-margin);
  503.                 margin-block-end: var(--mobile-margin);
  504.             }
  505.  
  506.  
  507.             .post-tags li {
  508.                 display: inline-block;
  509.                 margin-inline-end: var(--small-margin);
  510.  
  511.             }
  512.  
  513.             .post-tags li > a {
  514.                 color: var(--subtext-color);
  515.             }
  516.  
  517.             .post-tags li > a:hover {
  518.                 text-decoration: none;
  519.                 color: var(--accent-color);
  520.                 transition: 0.5s;
  521.             }
  522.  
  523.             .post-controls {
  524.                 flex: 1;
  525.                 display: flex;
  526.                 justify-content: space-evenly;
  527.                 align-items: center;
  528.             }
  529.  
  530.             /* NOTE INFORMATIOIN */
  531.             .note-info {
  532.                 display: flex;
  533.                 flex-direction: column;
  534.                 margin-block: var(--large-margin);
  535.             }
  536.  
  537.             .note-count {
  538.                 background-color: var(--nav-color);
  539.                 text-align: center;
  540.                 font-size: 1.2em;
  541.                 font-weight: bold;
  542.                 padding: var(--standard-margin);
  543.                 border-radius: 0;
  544.             }
  545.  
  546.             .notes {
  547.                 background-color: var(--content-color);
  548.                 list-style: none;
  549.                 padding: 0;
  550.                 border-radius: 0;
  551.             }
  552.  
  553.             .note {
  554.                 display: block;
  555.                 margin-block-end: var(--small-margin);
  556.                 padding: var(--standard-margin);
  557.             }
  558.  
  559.             .note:nth-child(2n) {
  560.                 background-color: #333;
  561.             }
  562.  
  563.             .note .avatar {
  564.                 display: inline;
  565.                 inline-size: initial;
  566.             }
  567.  
  568.             .note .action {
  569.                 display: block;
  570.             }
  571.  
  572.             .note .action a:visited {
  573.                 color: var(--accent-color);
  574.             }
  575.  
  576.             .note .clear {
  577.                 margin-block-start: 2px;
  578.             }
  579.  
  580.             .note blockquote {
  581.                 border-inline-start: 2px solid rgba(255, 255, 255, 0.4);
  582.                 padding-inline-start: 5px;
  583.             }
  584.  
  585.             .note:last-child {
  586.                 margin-block-end: 0;
  587.             }
  588.  
  589.             /* PAGINATION */
  590.             .pagination {
  591.                 display: flex;
  592.                 justify-content: space-around;
  593.                 margin-inline: var(--mobile-margin);
  594.                 margin-block-start: var(--mobile-margin);
  595.                 max-inline-size: var(--max-post-list-width);
  596.                 margin-inline: auto;
  597.             }
  598.  
  599.             .page {
  600.                 display: flex;
  601.                 border: 2px solid var(--accent-color);
  602.                 height: 1.7em;
  603.                 font-size: 1em;
  604.                 font-weight: bold;
  605.                 text-align: center;
  606.                 justify-content: center;
  607.                 align-items: center;
  608.                 padding: var(--small-margin);
  609.                 border-radius: 0.3em;
  610.             }
  611.  
  612.             .page:hover {
  613.                 cursor: pointer;
  614.                 text-decoration: none;
  615.                 color: var(--accent-color-dark);
  616.                 background-color: var(--accent-color);
  617.                 transition: 0.5s;
  618.             }
  619.  
  620.             .page:visited { color: var(--accent-color)}
  621.             .page:visited:hover { color: var(--accent-color-dark)}
  622.  
  623.             .sidenav { display: none; }
  624.  
  625.             /* FOOTER */
  626.  
  627.             body > footer {
  628.                 padding: var(--mobile-margin);
  629.                 color: var(--subtext-color);
  630.             }
  631.  
  632.             .avatar { display: none; }
  633.  
  634.             body > footer div {
  635.                 text-align: center;
  636.             }
  637.  
  638.             body > footer nav {
  639.                 padding: var(--small-margin);
  640.                 text-align: center;
  641.             }
  642.             body > footer ul {
  643.                 width: 100%;
  644.                 display: flex;
  645.                 justify-content: space-around;
  646.                 align-items: center;
  647.             }
  648.  
  649.             body > footer nav li {
  650.                 list-style: none;
  651.                 text-align: center;
  652.             }
  653.  
  654.             body > footer nav a {
  655.                 display: inline;
  656.                 color: var(--subtext-color);
  657.                 font-size: 1rem;
  658.             }
  659.  
  660.             body > footer nav li a:hover {
  661.                 color: var(--accent-color);
  662.                 background-color: inherit;
  663.             }
  664.  
  665.             /* POST TYPES */
  666.             .reblog-item {
  667.                 padding: 0;
  668.                 border-block-end: var(--border-thick);
  669.                 padding-block: var(--mobile-margin);
  670.             }
  671.            
  672.             .reblog-item:last-child {
  673.                 border-block-end: none;
  674.             }
  675.  
  676.             .reblog-header {
  677.                 margin: 0;
  678.                 padding-inline: var(--mobile-margin);
  679.                 padding-block-end: var(--small-margin);
  680.             }
  681.            
  682.             .reblog-wrapper {
  683.                 display: flex;
  684.                 justify-content: start;
  685.                 align-items: center;
  686.                 column-gap: var(--standard-margin);
  687.             }
  688.            
  689.             .reblog-avatar {
  690.                 inline-size: 3em;
  691.             }
  692.            
  693.             .reblog-username {
  694.                 text-transform: uppercase;
  695.                 font-weight: bold;
  696.                 font-size: 1.2em;
  697.             }
  698.  
  699.             /* PHOTO TYPE */
  700.             .photo-info {
  701.                 margin: auto;
  702.             }
  703.            
  704.             .featured-photo {
  705.                 text-align: center;
  706.             }
  707.            
  708.             .featured-photo .featured-image {
  709.                 width: 100%;
  710.             }
  711.            
  712.             .featured-photo img:hover {
  713.                 cursor: pointer;
  714.             }
  715.  
  716.             .featured-photo figcaption {
  717.                 width: 100%;
  718.                 border-block-end: var(--border-thick);
  719.                 border-block-start: none;
  720.                 padding: var(--small-margin);
  721.                 text-align: center;
  722.             }
  723.  
  724.             .featured-photo figcaption > *:last-child {
  725.                 margin-block-end: 0;
  726.             }
  727.            
  728.             .post-caption {
  729.                 margin: var(--mobile-margin);
  730.             }
  731.            
  732.             .post-caption * {
  733.                 line-height: 1.4;
  734.             }
  735.            
  736.             .post-caption > * {
  737.                 margin-bottom: 10px;
  738.             }
  739.            
  740.             .post-caption > *:last-child {
  741.                 margin-bottom: 0;
  742.             }
  743.            
  744.             .exif-photo {
  745.                 position: relative;
  746.                 top: 0;
  747.                 bottom: 0;
  748.             }
  749.            
  750.             .exif-photo .exif-info {
  751.                 font-size: 0.75em;
  752.                 line-height: 1.4;
  753.                 display: flex;
  754.                 position: absolute;
  755.                 bottom: 0;
  756.                 background-color: black;
  757.                 width: 0%;
  758.                 padding: 4px;
  759.                 justify-content: space-between;
  760.                 gap: 8px;
  761.                 transition-duration: 1s;
  762.                 transition-timing-function: linear;
  763.                 opacity: 0;
  764.                 transition: ease-in;
  765.                 visibility: collapse;
  766.                 background-color: rgba(0, 0, 0, 0.7);
  767.                 transition: visibility 0s linear 0.5s, opacity 0.5s linear, width 0.5s linear;
  768.             }
  769.  
  770.             .exif-photo:hover .exif-info {
  771.                 visibility: visible;
  772.                 opacity: 1;
  773.                 width: calc(100% - 4px);
  774.                 transition-delay: 0s;
  775.             }
  776.            
  777.             .exif-photo:hover:first-child .exif-info,
  778.             .exif-photo:hover:last-child .exif-info {
  779.                 width: calc(100% - 2px);
  780.             }
  781.             .exif-photo:hover:first-child:last-child .exif-info {
  782.                 width: 100%;
  783.             }
  784.            
  785.             .post div.npf_row div.npf_col.exif-photo figure.tmblr-full.exif-figure {
  786.                 padding-right: 0;
  787.             }
  788.            
  789.             .post div.npf_row div.npf_col.exif-photo figure.tmblr-full.exif-figure {
  790.                 padding-right: 0;
  791.             }
  792.            
  793.             .exif-info ul {
  794.                 list-style: none;
  795.                 padding-inline-start: 0;
  796.             }
  797.            
  798.             .exif-info ul li {
  799.                 margin-block-end: 0;
  800.                 color: white;
  801.             }
  802.            
  803.             .exif-info .action-link a {
  804.                 color: white;
  805.                 opacity: 0.8;
  806.                 transition: 0.5s;
  807.             }
  808.            
  809.             .exif-info .action-link a:hover {
  810.                 opacity: 1;
  811.                 color: var(--accent-color);
  812.                 text-decoration: none;
  813.                 transition: 0.5s;
  814.             }
  815.            
  816.             .with-click-through .click-through {
  817.                 max-height: 0;
  818.                 visibility: hidden;
  819.                 opacity: 0;
  820.                 transition: visibility 0s linear 0.5s, opacity 0.5s linear, max-height 0.5s linear
  821.             }
  822.            
  823.             .with-click-through:hover .click-through {
  824.                 max-height: 3em;
  825.                 visibility: visible;
  826.                 opacity: 1;
  827.                 transition-delay: 0s;
  828.             }
  829.            
  830.             .click-through {
  831.                 line-height: 1.4;
  832.                 text-align: center;
  833.                 background-color: var(--nav-color);
  834.                 width: 100%;
  835.             }
  836.            
  837.             .click-through a {
  838.                 color: var(--subtext-color);
  839.                 overflow: hidden;
  840.                 display: block;
  841.                 width: 100%;
  842.                 text-overflow: ellipsis;
  843.                 white-space: nowrap;
  844.                 padding: 4px;
  845.                 font-size: 0.9em;
  846.                 border: var(--border-thick);
  847.                 border-top: none;
  848.                 transition: 0.5s;
  849.             }
  850.            
  851.             .npf_col:last-child .click-through a {
  852.                 border-inline-end: none;
  853.             }
  854.            
  855.             .npf_col:first-child .click-through a {
  856.                 border-inline-start: none;
  857.             }
  858.            
  859.             .click-through a:hover {
  860.                 background-color: var(--accent-color-dark);
  861.                 text-decoration: none;
  862.                 color: var(--accent-color);
  863.                 transition: 0.5s;
  864.             }
  865.  
  866.             /* PHOTOSET TYPE*/
  867.  
  868.             .photoset {
  869.                 display: flex;
  870.                 flex-direction: column;
  871.                 align-items: center;
  872.             }
  873.  
  874.             .photoset .npf_row {
  875.                 width: 100%;
  876.             }
  877.            
  878.             .photoset .npf_col {
  879.                 max-width: 100%;
  880.             }
  881.  
  882.             .photoset .post_media_photo_anchor {
  883.                 width: 100%;
  884.             }
  885.            
  886.             .slideshow {
  887.                 display: flex;
  888.                 flex-direction: column;
  889.             }
  890.  
  891.             .slideshow .row {
  892.                 display: flex;
  893.                 margin-block-start: var(--small-margin);
  894.             }
  895.  
  896.             .slideshow .row:first-child{
  897.                 margin-block-start: 0;
  898.             }
  899.  
  900.             .slideshow .row .image {
  901.                 width: 100%;
  902.                 display: flex;
  903.                 margin-inline-start: 5px;
  904.                 flex-direction: column;
  905.             }
  906.            
  907.             .slideshow .row .image:first-child {
  908.                 margin-inline-start: 0;
  909.             }
  910.  
  911.             .slideshow .row .image:hover {
  912.                 cursor: pointer;
  913.             }
  914.            
  915.             .slideshow .image figcaption {
  916.                 text-align: center;
  917.                 padding: var(--small-margin);
  918.             }
  919.  
  920.  
  921.             .slideshow img {
  922.                 inline-size: 100%;
  923.                 object-fit: cover;
  924.             }
  925.            
  926.             .photoset .caption {
  927.                 margin-block-start: var(--standard-margin);
  928.                 inline-size: 100%;
  929.             }
  930.  
  931.             /* QUOTE TYPE */
  932.  
  933.             .post-quote blockquote {
  934.                 padding: var(--standard-margin);
  935.                 text-align: center;
  936.                 border: none;
  937.             }
  938.  
  939.             .quote > h2, .quote > h3 {
  940.                 margin: 0;
  941.             }
  942.            
  943.             .quotation::before {
  944.                 content: "“";
  945.             }
  946.            
  947.             .quotation::after {
  948.                 content: "”";
  949.             }
  950.            
  951.             .source::before {
  952.                 content: "-";
  953.                 margin-inline-end: 5px;
  954.             }
  955.  
  956.             /* LINK TYPE */
  957.             .link-wrapper > a {
  958.                 display: flex;
  959.                 justify-content: center;
  960.                 margin-block-end: var(--large-margin);
  961.                 margin-block-start: var(--large-margin);
  962.                 padding: 0;
  963.                 background-color: var(--nav-color);
  964.             }
  965.  
  966.             .link-wrapper > a * {
  967.                 margin-block-start: 0;
  968.             }
  969.  
  970.             .link-wrapper > a:hover {
  971.                 text-decoration: none;
  972.             }
  973.  
  974.             .link-thumbnail {
  975.                 flex-grow: 1;
  976.                 flex-basis: 20%;
  977.                 display: flex;
  978.                 align-items: center;
  979.             }
  980.            
  981.             div.featured-link.npf-link-block {
  982.                 border-radius: 0px;
  983.                 border-block: var(--border-thick);
  984.                 transition: 0.3s;
  985.                 border-inline: none;
  986.                 margin-block: 0;
  987.             }
  988.            
  989.             div.featured-link.npf-link-block:hover {
  990.                 background-color: var(--accent-color-dark);
  991.                 color: var(--accent-color);
  992.             }
  993.            
  994.             div.featured-link.npf-link-block .poster {
  995.                 border-bottom: var(--border-thick);
  996.             }
  997.            
  998.             div.featured-link.npf-link-block .bottom .description {
  999.                 text-wrap: nowrap;
  1000.             }
  1001.  
  1002.             .link-details {
  1003.                 flex-grow: 3;
  1004.                 padding: 0 var(--standard-margin);
  1005.             }
  1006.  
  1007.             .link-details > * {
  1008.                 color: var(--main-text-color);
  1009.                 padding-block-end: var(--small-margin);    
  1010.             }
  1011.  
  1012.             .link-details .link-title {
  1013.                 font-size: x-large;
  1014.                 text-align: center;
  1015.                 color: var(--main-text-color);
  1016.                 padding-block-end: var(--standard-margin);
  1017.                 margin-block-end: var(--small-margin);
  1018.                 border-block-end: var(--border-thick);
  1019.             }
  1020.  
  1021.             .link-source {
  1022.                 color: var(--accent-color);
  1023.             }
  1024.  
  1025.             .link-source:hover {
  1026.                 text-decoration: underline;
  1027.             }
  1028.  
  1029.             /* CHAT POSTS */
  1030.  
  1031.             .conversation {
  1032.                 list-style: none;
  1033.                 font-family: 'Courier New', Courier, monospace;
  1034.                 font-size: 1.1em;
  1035.             }
  1036.  
  1037.             .chat-item {
  1038.                 margin: 0;
  1039.                 padding: var(--small-margin) var(--standard-margin);
  1040.             }
  1041.  
  1042.             .chat-odd {
  1043.                 background-color: var(--border-color);
  1044.             }
  1045.  
  1046.             .chat-label {
  1047.                 font-weight: bold;
  1048.             }
  1049.  
  1050.             /* AUDIO POSTS */
  1051.             .tmblr-embed {
  1052.                 width: 100%;
  1053.             }
  1054.            
  1055.             .featured-audio {
  1056.                 text-align: center;
  1057.             }
  1058.            
  1059.             .featured-audio figcaption {
  1060.                 text-align: start;
  1061.             }
  1062.            
  1063.             .featured-audio iframe {
  1064.                 width: 100%;
  1065.             }
  1066.            
  1067.             /* spotify iframe has a weird gap so we're setting it manually */
  1068.             .featured-audio .spotify_audio_player {
  1069.                 height: 160px;
  1070.             }
  1071.            
  1072.             .audio-embed, .video-embed {
  1073.                 display: flex;
  1074.                 justify-content: center;
  1075.             }
  1076.  
  1077.             .audio-embed {
  1078.                 background-color: var(--nav-color);
  1079.                 margin-block-end: var(--standard-margin);
  1080.             }
  1081.  
  1082.             .video-embed {
  1083.                 margin-block-end: var(--standard-margin);
  1084.             }
  1085.            
  1086.             .npf-post .tmblr-embed .embed_iframe {
  1087.                 width: 100%;
  1088.             }
  1089.            
  1090.             .audio-caption, .video-caption {
  1091.                 margin: var(--mobile-margin);
  1092.             }
  1093.  
  1094.             /* ANSWER POSTS */
  1095.             .asker > .asker {
  1096.                 display: inline;
  1097.                 font-size: 1em;
  1098.             }
  1099.  
  1100.             .answerer {
  1101.                 display: inline;
  1102.                 font-size: 1em;
  1103.             }
  1104.            
  1105.             .answerer-answer {
  1106.                 margin-block-start: var(--standard-margin);
  1107.             }
  1108.            
  1109.             .asker-question {
  1110.                 padding-top: var(--standard-margin);
  1111.             }
  1112.  
  1113.             .answer, .question {
  1114.                 display: flex;
  1115.                 margin-inline: var(--mobile-margin);
  1116.                 margin-block: var(--standard-margin);
  1117.             }
  1118.            
  1119.             .replies {
  1120.                 margin-inline: var(--mobile-margin);
  1121.                 margin-block-end: var(--mobile-margin);
  1122.             }
  1123.            
  1124.             .replies > * {
  1125.                 margin-block-end: var(--standard-margin);
  1126.             }
  1127.            
  1128.             .replies > *:last-child {
  1129.                 margin-block-end: 0;
  1130.             }
  1131.  
  1132.             .ask-contents {
  1133.                 background-color: var(--main-background-color);
  1134.                 padding: var(--standard-margin);
  1135.                 margin: 0;
  1136.                 flex: 1;
  1137.                 position: relative;
  1138.                 border-radius: 0.3em;
  1139.             }
  1140.  
  1141.             .ask-contents::after {
  1142.                 content: '';
  1143.                 position: absolute;
  1144.                 inset-inline-end: var(--tip-x);
  1145.                 inset-block-start: var(--tip-y);
  1146.                 border-color: transparent;
  1147.                 border-inline-start-color:var(--main-background-color);
  1148.                 border-width: var(--standard-margin);
  1149.                 border-style: solid;
  1150.             }
  1151.  
  1152.             .ask-contents .asker {
  1153.                 color: var(--main-text-color);
  1154.                 margin: 0;
  1155.                 display: block;
  1156.                 background-color: var(--nav-color);
  1157.                 text-align: center;
  1158.                 font-size: 1.3em;
  1159.                 text-transform: uppercase;
  1160.                 font-weight: bold;
  1161.                 padding: var(--small-margin);
  1162.             }
  1163.  
  1164.             .answerer-avatar, .asker-avatar {
  1165.                 margin: 0;
  1166.                 height: 35px;
  1167.             }
  1168.  
  1169.             .answerer-avatar {
  1170.                 margin-inline-end: var(--standard-margin);
  1171.                 position: relative;
  1172.                 top: 10px;
  1173.             }
  1174.  
  1175.             .asker-avatar {
  1176.                 margin-inline-start: var(--standard-margin);
  1177.             }
  1178.  
  1179.             .answer-contents {
  1180.                 background-color: var(--main-background-color);
  1181.                 padding: var(--standard-margin);
  1182.                 margin: 0;
  1183.                 flex: 1;
  1184.                 position: relative;
  1185.                 border-radius: 0.3em;
  1186.             }
  1187.  
  1188.             .answer-contents::after {
  1189.                 content: '';
  1190.                 position: absolute;
  1191.                 inset-inline-start: var(--tip-x);
  1192.                 inset-block-start: 20px;
  1193.                 border-color: transparent;
  1194.                 border-inline-end-color: var(--main-background-color);
  1195.                 border-width: 10px;
  1196.                 border-style: solid;
  1197.             }
  1198.  
  1199.             .answer-contents > .answerer {
  1200.                 color: var(--main-text-color);
  1201.                 margin: 0;
  1202.                 display: block;
  1203.                 background-color: var(--nav-color);
  1204.                 text-align: center;
  1205.                 font-size: 1.3em;
  1206.                 text-transform: uppercase;
  1207.                 font-weight: bold;
  1208.                 padding: var(--small-margin);
  1209.             }
  1210.  
  1211.             aside {
  1212.                 display: none;
  1213.             }
  1214.  
  1215.             /* EXTRA TUMBLR FEATURES */
  1216.             .like_button {
  1217.                 display: flex;
  1218.                 margin: 0 var(--standard-margin);
  1219.             }
  1220.            
  1221.             .copyright:before {
  1222.                 content: '\00A9';
  1223.             }
  1224.  
  1225.  
  1226.             /* desktop view once at 700px as long as your device is tall enough */
  1227.             @media only screen and (min-width: 700px) and (min-height:475px) {
  1228.  
  1229.                 :root{
  1230.                     --far-width: 10%;
  1231.                     --info-width: 25%;
  1232.                     --content-margin: calc(var(--info-width) + var(--far-width));
  1233.                     --sidebar-width: {select:Sidebar Size};
  1234.                     --header-height: 80px;
  1235.                     --avatar-border: 2px solid var(--main-text-color, var(--main-text-color));
  1236.                 }
  1237.  
  1238.  
  1239.                 #heading .information {
  1240.                     position: fixed;
  1241.                     z-index: 30;
  1242.                     block-size: 100%;
  1243.                     inline-size: var(--info-width);
  1244.                     margin-inline-start:var(--far-width);
  1245.                     border-inline-end: var(--border-thick);
  1246.                     inset-block-start: 0;
  1247.                     margin-top: var(--pushdown-amount);
  1248.                 }
  1249.  
  1250.                 #heading .title {
  1251.                     min-height: var(--header-height);
  1252.                     display: flex;
  1253.                     justify-content: center;
  1254.                     align-items: center;
  1255.                     border-block-end: var(--border-thick);
  1256.                     padding: var(--small-margin);
  1257.                 }
  1258.  
  1259.                 #heading .title h1 {
  1260.                     font-size: 1.6em;
  1261.                     display:inline;
  1262.                     padding: 0;
  1263.                 }
  1264.  
  1265.                 #heading .description {
  1266.                     padding: var(--small-margin);
  1267.                 }
  1268.  
  1269.                 #heading .writer {
  1270.                     margin-block: var(--small-margin);
  1271.                     font-size: 0.8em;
  1272.                 }
  1273.  
  1274.                 #heading .navigation {
  1275.                     padding: 0;
  1276.                 }
  1277.  
  1278.                 #heading .navigation ul {
  1279.                     padding: 0;
  1280.                 }
  1281.  
  1282.                 /* Change to row navigation once gets enough space */
  1283.                 @media (min-height: 575px) {
  1284.  
  1285.                     #heading .information {
  1286.                         display: flex;
  1287.                         flex-direction: column;
  1288.                     }
  1289.  
  1290.                     #heading .information > * {
  1291.                         flex-shrink: 0;
  1292.                     }
  1293.  
  1294.                     #heading .navigation {
  1295.                         flex-shrink: 1;
  1296.                         overflow-y: auto;
  1297.                     }
  1298.  
  1299.                     #heading .navigation ul {
  1300.                         display: block;
  1301.                         white-space: initial;
  1302.                         overflow: initial;  
  1303.                     }
  1304.                    
  1305.                     #heading .navigation ul li {
  1306.                         display: list-item;
  1307.                         margin: 0;
  1308.                     }
  1309.                    
  1310.                     #heading .navigation a {
  1311.                         padding-inline: var(--mobile-margin);
  1312.                         padding-block: var(--standard-margin);
  1313.                         display: flex;
  1314.                         justify-content: space-between;
  1315.                         align-items: center;
  1316.                     }
  1317.                    
  1318.                     .nav-left {
  1319.                         display: flex;
  1320.                         align-items: center;
  1321.                     }
  1322.                    
  1323.                     #heading .navigation .material-symbols-outlined,
  1324.                     .nav-left .no-icon,
  1325.                     .nav-left p {
  1326.                         display: inline;
  1327.                     }
  1328.                    
  1329.                     .nav-left .no-icon {
  1330.                         width: 24px;
  1331.                     }
  1332.  
  1333.                     .nav-left p {
  1334.                         font-size: 0.9rem;
  1335.                         padding-inline-start: var(--mobile-margin);
  1336.                         text-align: start;
  1337.                     }
  1338.  
  1339.                 }
  1340.  
  1341.                 .tumblr-controls-desktop {
  1342.                     display: flex;
  1343.                     inline-size: calc(100% - var(--content-margin));
  1344.                     position: fixed;
  1345.                     z-index: 30;
  1346.                     background-color: var(--content-color);
  1347.                     border-block-end: var(--border-thick);
  1348.                     margin-inline-start: var(--content-margin);
  1349.                     block-size: 80px;
  1350.                     justify-content: space-between;
  1351.                     inset-block-start: 0;
  1352.                     margin-top: var(--pushdown-amount);
  1353.                 }
  1354.  
  1355.                 .controls, .search {
  1356.                     flex: 1;
  1357.                     display: flex;
  1358.                     align-items: center;
  1359.                 }
  1360.  
  1361.                 .search {
  1362.                     padding-inline-start: var(--standard-margin);
  1363.                 }
  1364.                
  1365.                 .search form {
  1366.                     display: flex;
  1367.                     flex-direction: row;
  1368.                 }
  1369.                
  1370.                 .search form input {
  1371.                     border-radius: 3px;
  1372.                     border: none;
  1373.                     padding-inline: var(--standard-margin);
  1374.                     padding-block: var(--tiny-margin);
  1375.                     background-color: var(--search-background-color);
  1376.                     color: var(--search-text-color);
  1377.                 }
  1378.  
  1379.                 .controls {
  1380.                     justify-content: flex-end;
  1381.                 }
  1382.  
  1383.                 .controls > .menu {
  1384.                     margin-inline-start: var(--small-margin);
  1385.                     margin-inline-end: var(--large-margin);
  1386.                 }
  1387.  
  1388.                 .controls > .additonal-controls > * {
  1389.                     margin-inline-end: var(--small-margin);
  1390.                 }
  1391.  
  1392.                 main {
  1393.                     margin-inline-start: var(--content-margin);
  1394.                     margin-block-start: 80px;
  1395.                     margin-block-end: var(--large-margin);
  1396.                 }
  1397.  
  1398.                 .post {
  1399.                     margin-block-end: var(--large-margin);
  1400.                     border: var(--border-standard);
  1401.                     overflow: clip;
  1402.                 }
  1403.  
  1404.                 .post header {
  1405.                     border-block-end: var(--border-standard);
  1406.                     padding-block-end: var(--mobile-margin);
  1407.                 }
  1408.                
  1409.                 .post header.sticky {
  1410.                     top: calc(80px + var(--pushdown-amount));
  1411.                 }
  1412.  
  1413.                 .post header h1 {
  1414.                     margin-block-end: 0;
  1415.                     margin-block-start: var(--small-margin);
  1416.                 }
  1417.  
  1418.                 .post header .icon {
  1419.                     display: inline-block;
  1420.                 }
  1421.  
  1422.                 .post footer {
  1423.                     flex-direction: row;
  1424.                 }
  1425.                
  1426.                 .post-tags {
  1427.                     border-inline-end: var(--border-thick);
  1428.                     border-block-end: none;
  1429.                     padding-inline-end: var(--small-margin);
  1430.                     margin-block-end: 0;
  1431.                     padding-block-end: 0;
  1432.                 }
  1433.  
  1434.                 .note-count {
  1435.                     border-radius: var(--small-margin) var(--small-margin) 0 0;
  1436.                 }
  1437.  
  1438.                 .notes {
  1439.                     border-radius: 0 0 var(--small-margin) var(--small-margin);
  1440.                 }
  1441.  
  1442.                 .note:last-child {
  1443.                     border-radius: 0 0 var(--small-margin) var(--small-margin);
  1444.                 }
  1445.  
  1446.                 body > footer {
  1447.                     display: flex;
  1448.                     position: fixed;
  1449.                     flex-direction: column;
  1450.                     justify-content: space-between;
  1451.                     inline-size: var(--far-width);
  1452.                     background-color: var(--main-far-color);
  1453.                     block-size: 100%;
  1454.                     inset-block-start: 0;
  1455.                     padding-inline: 0;
  1456.                     align-items: center;
  1457.                     padding-top: calc(var(--mobile-margin) + var(--pushdown-amount));
  1458.                 }
  1459.  
  1460.                 .avatar {
  1461.                     display: block;
  1462.                     inline-size: 75%;
  1463.                 }
  1464.  
  1465.                 .avatar img {
  1466.                     inline-size: 100%;
  1467.                     border: var(--avatar-border);
  1468.                     border-radius: 50%;
  1469.                 }
  1470.  
  1471.                 body > footer nav ul {
  1472.                     flex-direction: column;
  1473.                 }
  1474.  
  1475.                 body > footer nav li {
  1476.                     inline-size: 100%;
  1477.                     display: block;
  1478.                 }
  1479.  
  1480.                 aside {
  1481.                     display: flex;
  1482.                     position: fixed;
  1483.                     z-index: 30;
  1484.                     inset-inline-end: 0px;
  1485.                     inset-block-start: 80px;
  1486.                     block-size: 100%;
  1487.                     margin-top: var(--pushdown-amount);
  1488.                 }
  1489.  
  1490.                 .menu {
  1491.                     display: flex;
  1492.                     padding: var(--small-margin);
  1493.                     block-size: 30px;
  1494.                     align-items: center;
  1495.                 }
  1496.  
  1497.  
  1498.                 .sidenav {
  1499.                     inline-size: var(--sidebar-width);
  1500.                     block-size: 100%;
  1501.                     border-inline-start: var(--border-thick);
  1502.                     background-color: var(--content-color);
  1503.                 }
  1504.  
  1505.                 .sidenav > div {
  1506.                     background-color: var(--side-bg-color);
  1507.                 }
  1508.  
  1509.                 .sidenav > div > * {
  1510.                     padding: var(--small-margin) var(--mobile-margin)
  1511.                 }
  1512.  
  1513.                 .sidenav > div > .trend-tags {
  1514.                     padding: inherit;
  1515.                 }
  1516.  
  1517.                 .updates {
  1518.                     border-block-end: var(--border-thick);
  1519.                 }
  1520.  
  1521.  
  1522.                 {block:IfNotUpdatesTitle}
  1523.                 {block:IfNotUpdatesText}
  1524.                 .updates {
  1525.                     display: none;
  1526.                 }
  1527.                 {/block:IfNotUpdatesText}
  1528.                 {/block:IfNotUpdatesTitle}
  1529.  
  1530.                 .updates h2 {
  1531.                     display: block;
  1532.                     padding: var(--standard-margin);
  1533.                     text-align: center;
  1534.                     text-decoration: none;
  1535.                 }
  1536.                
  1537.                 {block:IfUpdatesText}
  1538.                 .updates h2 {
  1539.                     border-block-end: var(--border-thick);                    
  1540.                 }
  1541.                 {/block:IfUpdatesText}
  1542.  
  1543.                 .updates h2 a {
  1544.                     color: var(--accent-color);
  1545.                 }
  1546.  
  1547.                 .updates p {
  1548.                     padding-block: var(--small-margin);
  1549.                     text-align: start;
  1550.                 }
  1551.  
  1552.                 .trend-title {
  1553.                     display: flex;
  1554.                     border-block-end: var(--border-thick);
  1555.                     align-items: center;
  1556.                 }
  1557.  
  1558.                 .trend-title:hover {
  1559.                     cursor: pointer;
  1560.                 }
  1561.  
  1562.                 .trend-title .icon {
  1563.                     display: inline-block;
  1564.                     padding: var(--small-margin);
  1565.                     block-size: 100%;
  1566.                 }
  1567.  
  1568.                 .trend-title h2 {
  1569.                     padding-inline-start: var(--standard-margin);
  1570.                 }
  1571.  
  1572.                 .trend-tags {
  1573.                     display: flex;
  1574.                     flex-wrap: wrap;
  1575.                 }
  1576.  
  1577.                 .trend-tags a {
  1578.                     inline-size: 50%;
  1579.                     border-inline-start: var(--border-thick);
  1580.                     border-block-end: var(--border-thick);
  1581.                     padding: var(--mobile-margin);
  1582.                     text-align: center;
  1583.                     flex-grow: 1;
  1584.                 }
  1585.  
  1586.                 .trend-tags a:link { color: var(--main-text-color);}
  1587.  
  1588.                 .trend-tags a:nth-child(2n+1) {
  1589.                     border-inline-start: none;
  1590.                 }
  1591.  
  1592.                 .trend-tags a:hover {
  1593.                     text-decoration: none;
  1594.                     background-color: var(--accent-color-dark);
  1595.                     color: var(--accent-color);
  1596.                     transition: 0.5s;
  1597.                 }
  1598.  
  1599.                 .trend-tags h3 {
  1600.                     line-height: 1em;
  1601.                     padding-block-end: 0.2em;
  1602.                 }
  1603.  
  1604.                 .trend-tags h4 {
  1605.                     color: var(--subtext-color);
  1606.                     line-height: 1em;
  1607.                 }
  1608.  
  1609.                 @media (min-width:1000px) {
  1610.                     :root{
  1611.                         --far-width: 100px;
  1612.                         --info-width: 250px;
  1613.                         --max-main-margin: 105px;
  1614.                     }
  1615.  
  1616.                     main {
  1617.                         margin-block-start: calc(5% + 30px);
  1618.                     }
  1619.  
  1620.                     .post-list {
  1621.                         inline-size: 100%;
  1622.                         max-inline-size: var(--max-post-list-width);
  1623.                         margin: auto;
  1624.                     }
  1625.                     .post {
  1626.                         border-radius: var(--small-margin);
  1627.                     }
  1628.                 }
  1629.  
  1630.                 @media (min-width:1500px) {
  1631.                    
  1632.                     .search, .controls {
  1633.                         flex-grow: revert;
  1634.                     }
  1635.  
  1636.                     .search {
  1637.                         flex-basis: calc(100% - var(--sidebar-width));
  1638.                     }
  1639.  
  1640.                     .controls {
  1641.                         flex-basis: var(--sidebar-width);
  1642.                         {block:IfShowSidebar}
  1643.                         border-inline-start: var(--border-thick);
  1644.                         {/block:IfShowSidebar}
  1645.                     }
  1646.  
  1647.                     main {
  1648.                         margin-block-start: var(--max-main-margin);
  1649.                         {block:IfShowSidebar}
  1650.                         margin-inline-end: var(--sidebar-width);
  1651.                         {/block:IfShowSidebar}
  1652.                     }
  1653.  
  1654.                     .sidenav {
  1655.                         display: flex;
  1656.                         flex-direction: column;
  1657.                     }
  1658.                 }
  1659.  
  1660.             }
  1661.  
  1662.             .audio-player {
  1663.                 display: flex;
  1664.                 flex-direction: column;
  1665.             }
  1666.            
  1667.             .audio-player * {
  1668.                 inline-size: 100%;
  1669.                 margin: 0;
  1670.             }
  1671.  
  1672.             {CustomCSS}
  1673.         </style>
  1674.  
  1675.     </head>
  1676.  
  1677.     <body>
  1678.         <header id="heading">
  1679.             <div class="information">
  1680.                 <a href="/" class="title">
  1681.                     <h1>{Title}</h1>
  1682.                 </a>
  1683.  
  1684.                 <div class="introduction">
  1685.                     {block:ShowHeaderImage}
  1686.                     <div class="header-image">
  1687.                         <img src="{HeaderImage}" alt="heading image"/>
  1688.                     </div>
  1689.                     {/block:ShowHeaderImage}
  1690.                    
  1691.                     <div class="description"> <!--Description-->
  1692.                         {block:IfShowDescription}
  1693.                         <p>{Description}</p>
  1694.                         {/block:IfShowDescription}
  1695.                         {block:IfShowSubtext}
  1696.                         <p class="secondary writer"><span class="material-symbols-outlined">person</span>{text:Subtext}</p>
  1697.                         {/block:IfShowSubtext}
  1698.                     </div>
  1699.                 </div>
  1700.                 <nav class="navigation">
  1701.                     <ul>
  1702.                         <li>
  1703.                             <a href="/">
  1704.                                 <div class="nav-left">
  1705.                                     <span class="material-symbols-outlined">home</span>
  1706.                                     <p>{lang:Home}</p>
  1707.                                 </div>
  1708.                                 <span class="material-symbols-outlined">arrow_forward</span>
  1709.                             </a>
  1710.                         </li>
  1711.                         {block:AskEnabled}
  1712.                         <li>
  1713.                             <a href="/ask">
  1714.                                 <div class="nav-left">
  1715.                                     <span class="material-symbols-outlined">help</span>
  1716.                                     {block:IfCustomAskLabel}
  1717.                                     <p>{text:Custom Ask Label}</p>
  1718.                                     {/block:IfCustomAskLabel}
  1719.                                     {block:IfNotCustomAskLabel}
  1720.                                     <p>{AskLabel}</p>
  1721.                                     {/block:IfNotCustomAskLabel}
  1722.                                 </div>
  1723.                                 <span class="material-symbols-outlined">arrow_forward</span>
  1724.                             </a>
  1725.                         </li>
  1726.                         {/block:AskEnabled}
  1727.                         {block:SubmissionsEnabled}
  1728.                         <li>
  1729.                             <a href="/submit">
  1730.                                 <div class="nav-left">
  1731.                                     <span class="material-symbols-outlined">mail</span>
  1732.                                     {block:IfCustomSubmitLabel}
  1733.                                     <p>{text:Custom Submit Label}</p>
  1734.                                     {block:IfCustomSubmitLabel}
  1735.                                     {block:IfNotCustomSubmitLabel}
  1736.                                     <p>{SubmitLabel}</p>
  1737.                                     {/block:IfNotCustomSubmitLabel}
  1738.                                 </div>
  1739.                                 <span class="material-symbols-outlined">arrow_forward</span>
  1740.                             </a>
  1741.                         </li>
  1742.                         {/block:SubmissionsEnabled}
  1743.                         {block:HasPages}
  1744.                             {block:Pages}
  1745.                             <li class="nav-page">
  1746.                                 <a href="{URL}">
  1747.                                     <div class="nav-left">
  1748.                                         <div class="no-icon"></div>
  1749.                                         <p>{Label}</p>
  1750.                                     </div>
  1751.                                     <span class="material-symbols-outlined">arrow_forward</span>
  1752.                                 </a>
  1753.                             </li>
  1754.                             {/block:Pages}
  1755.                         {/block:HasPages}
  1756.                         {block:IfLink1Name}
  1757.                             {block:IfLink1URL}
  1758.                             <li>
  1759.                                 <a href="{text:Link 1 URL}" {block:IfOpenCustomLinksInANewTab}target="_blank" rel="noreferrer"{/block:IfOpenCustomLinksInANewTab}>
  1760.                                     <div class="nav-left">
  1761.                                         {block:IfLink1Symbol}
  1762.                                         <span class="material-symbols-outlined">{text:Link 1 Symbol}</span>
  1763.                                         {/block:IfLink1Symbol}
  1764.                                         {block:IfNotLink1Symbol}
  1765.                                         <div class="no-icon"></div>
  1766.                                         {/block:IfNotLink1Symbol}
  1767.                                         <p>{text:Link 1 Name}</p>
  1768.                                     </div>
  1769.                                     <span class="material-symbols-outlined">arrow_forward</span>
  1770.                                 </a>
  1771.                             </li>
  1772.                             {/block:IfLink1URL}
  1773.                         {/block:IfLink1Name}
  1774.                         {block:IfLink2Name}
  1775.                             {block:IfLink2URL}
  1776.                             <li>
  1777.                                 <a href="{text:Link 2 URL}" {block:IfOpenCustomLinksInANewTab}target="_blank" rel="noreferrer"{/block:IfOpenCustomLinksInANewTab}>
  1778.                                     <div class="nav-left">
  1779.                                         {block:IfLink2Symbol}
  1780.                                         <span class="material-symbols-outlined">{text:Link 2 Symbol}</span>
  1781.                                         {/block:IfLink2Symbol}
  1782.                                         {block:IfNotLink2Symbol}
  1783.                                         <div class="no-icon"></div>
  1784.                                         {/block:IfNotLink2Symbol}
  1785.                                         <p>{text:Link 2 Name}</p>
  1786.                                     </div>
  1787.                                     <span class="material-symbols-outlined">arrow_forward</span>
  1788.                                 </a>
  1789.                             </li>
  1790.                             {/block:IfLink2URL}
  1791.                         {/block:IfLink2Name}
  1792.                         {block:IfLink3Name}
  1793.                             {block:IfLink3URL}
  1794.                             <li>
  1795.                                 <a href="{text:Link 3 URL}" {block:IfOpenCustomLinksInANewTab}target="_blank" rel="noreferrer"{/block:IfOpenCustomLinksInANewTab}>
  1796.                                     <div class="nav-left">
  1797.                                         {block:IfLink3Symbol}
  1798.                                         <span class="material-symbols-outlined">{text:Link 3 Symbol}</span>
  1799.                                         {/block:IfLink3Symbol}
  1800.                                         {block:IfNotLink3Symbol}
  1801.                                         <div class="no-icon"></div>
  1802.                                         {/block:IfNotLink3Symbol}
  1803.                                         <p>{text:Link 3 Name}</p>
  1804.                                     </div>
  1805.                                     <span class="material-symbols-outlined">arrow_forward</span>
  1806.                                 </a>
  1807.                             </li>
  1808.                             {/block:IfLink3URL}
  1809.                         {/block:IfLink3Name}
  1810.                         {block:IfLink4Name}
  1811.                             {block:IfLink4URL}
  1812.                             <li>
  1813.                                 <a href="{text:Link 4 URL}" {block:IfOpenCustomLinksInANewTab}target="_blank" rel="noreferrer"{/block:IfOpenCustomLinksInANewTab}>
  1814.                                     <div class="nav-left">
  1815.                                         {block:IfLink4Symbol}
  1816.                                         <span class="material-symbols-outlined">{text:Link 4 Symbol}</span>
  1817.                                         {/block:IfLink4Symbol}
  1818.                                         {block:IfNotLink4Symbol}
  1819.                                         <div class="no-icon"></div>
  1820.                                         {/block:IfNotLink4Symbol}
  1821.                                         <p>{text:Link 4 Name}</p>
  1822.                                     </div>
  1823.                                     <span class="material-symbols-outlined">arrow_forward</span>
  1824.                                 </a>
  1825.                             </li>
  1826.                             {/block:IfLink4URL}
  1827.                         {/block:IfLink4Name}
  1828.                     </ul>
  1829.                 </nav>
  1830.             </div>
  1831.             <div class="tumblr-controls-desktop">
  1832.  
  1833.                 <div class="search">
  1834.  
  1835.                     <form action="/search" method="get">
  1836.                         <span class="material-symbols-outlined">search</span>
  1837.                         <input type="text" name="q" placeholder="Search"/>
  1838.                     </form>
  1839.                 </div>
  1840.  
  1841.                 <div class="controls">
  1842.  
  1843.                 </div>
  1844.             </div>
  1845.         </header>
  1846.  
  1847.         <main>
  1848.             <div class="post-list">
  1849.  
  1850.                 <!-- Posts -->
  1851.                 {block:Posts}
  1852.                
  1853.                 <article class="post post-{PostType}" id="{PostId}">
  1854.                     <header {block:IfStickyPostHeaders}class="sticky"{/block:IfStickyPostHeaders}>
  1855.                         {block:Date}
  1856.                         <div class="post-info">
  1857.  
  1858.                             <div class="post-meta">
  1859.                                 <a href="{Permalink}" title="{lang:Posted on DayOfWeek DayOfMonth Month Year}">{TimeAgo}</a>
  1860.                                 {block:RebloggedFrom}
  1861.                                     <span class="material-symbols-outlined">cached</span>
  1862.                                     <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1863.                                 {/block:RebloggedFrom}
  1864.                             </div>
  1865.                             {block:PinnedPostLabel}
  1866.                             <div class="pin">
  1867.                                 {PinnedPostLabel}
  1868.                             </div>
  1869.                             {/block:PinnedPostLabel}
  1870.                         </div>
  1871.                         {/block:Date}
  1872.                         {block:Title}
  1873.                         <h1><a href="{Permalink}">{Title}</a></h1>
  1874.                         {/block:Title}
  1875.                     </header>
  1876.                     <div class="content">
  1877.                    
  1878.                         {block:Photo}
  1879.                         <div class="photo-info">
  1880.                             <div class="photo-header{block:exif} exif-photo{/block:exif}">
  1881.                                 <figure
  1882.                                    class="featured-photo{block:HighRes} high-res{/block:HighRes}"
  1883.                                    {block:HighRes}
  1884.                                    data-full-width="{PhotoWidth-HighRes}"
  1885.                                    data-full-height="{PhotoHeight-HighRes}"
  1886.                                    data-full-url="{PhotoURL-HighRes}"
  1887.                                    data-orig-url="{PhotoURL-HighRes}"
  1888.                                    {/block:HighRes}
  1889.                                >
  1890.                                     <img
  1891.                                        loading="lazy"
  1892.                                        alt="{PhotoAlt}"
  1893.                                        src="{PhotoURL-HighRes}"
  1894.                                        class="featured-image"
  1895.                                    >
  1896.                                     {block:LinkURL}
  1897.                                     <figcaption class="click-through">
  1898.                                         <a href="{LinkURL}">
  1899.                                             {LinkURL}
  1900.                                         </a>
  1901.                                     </figcaption>
  1902.                                     {/block:LinkURL}
  1903.                                 </figure>
  1904.                                 {block:exif}
  1905.                                 <div class="exif-info">
  1906.                                     <ul>
  1907.                                         {block:Camera}
  1908.                                         <li>Camera: <a href="https://www.dpreview.com/search/?query={Camera}" target="_blank" rel="noreferrer">{Camera}</a></li>
  1909.                                         {/block:Camera}
  1910.                                         {block:FocalLength}
  1911.                                         <li>Focal Length: {FocalLength}</li>
  1912.                                         {/block:FocalLength}
  1913.                                         {block:Exposure}
  1914.                                         <li>Exposure: {Exposure}</li>
  1915.                                         {/block:Exposure}
  1916.                                         {block:Aperture}
  1917.                                         <li>Aperture: {Aperture}</li>
  1918.                                         {/block:Aperture}
  1919.                                     </ul>
  1920.                                     <div class="action-link">
  1921.                                         <a href="https://www.cambridgeincolour.com/tutorials/camera-exposure.htm" class="material-symbols-outline" title="What is all of this information?">info</a>
  1922.                                     </div>
  1923.                                 </div>
  1924.                                 {/block:exif}
  1925.                             </div>
  1926.                             {block:NotReblog}
  1927.                             <div class="post-body">
  1928.                                 {block:Caption}
  1929.                                 {Caption}
  1930.                                 {/block:Caption}
  1931.                             </div>
  1932.                             {/block:NotReblog}
  1933.                         </div>
  1934.                         {/block:Photo}
  1935.  
  1936.                         {block:Photoset}
  1937.                         <div class="photoset">
  1938.                             <div
  1939.                                class="slideshow"
  1940.                                data-layout="{PhotosetLayout}">
  1941.                                 {block:Photos}
  1942.                                 <figure
  1943.                                    class="image"
  1944.                                    data-full-width="{PhotoWidth-HighRes}"
  1945.                                    data-full-height="{PhotoHeight-HighRes}"
  1946.                                    data-full-url="{PhotoURL-HighRes}"
  1947.                                    data-orig-url="{PhotoURL-HighRes}"
  1948.                                >
  1949.                                     <img
  1950.                                        loading="lazy"
  1951.                                        alt="{PhotoAlt}"
  1952.                                        src="{PhotoURL-HighRes}"
  1953.                                    >
  1954.                                     <figcaption>
  1955.                                     {block:Caption}
  1956.                                         {Caption}
  1957.                                     {/block:Caption}
  1958.                                     </figcaption>
  1959.  
  1960.                                 </figure>
  1961.                                 {/block:Photos}
  1962.                             </div>
  1963.                             {block:NotReblog}
  1964.                             {block:Caption}
  1965.                             <div class="caption">
  1966.                                 {Caption}
  1967.                             </div>
  1968.                            
  1969.                             {/block:Caption}
  1970.                             {/block:NotReblog}
  1971.                         </div>
  1972.                         {/block:Photoset}
  1973.  
  1974.                         {block:Quote}
  1975.                         <!-- quote posts -->
  1976.                         <blockquote class="quote">
  1977.                             <h2 class="quotation">{Quote}</h2>
  1978.                             {block:Source}
  1979.                             <h3 class="source">{Source}</h3>
  1980.                             {/block:Source}
  1981.                         </blockquote>
  1982.                         {/block:Quote}
  1983.                        
  1984.                         {block:Link}
  1985.                         <div class="link-wrapper">
  1986.                             <a {Target} href="{URL}">
  1987.                                 {block:Thumbnail}
  1988.                                 <div class="link-thumbnail">
  1989.                                     <img src="{Thumbnail}" alt="{Name}"/>
  1990.                                 </div>
  1991.                                 {/block:Thumbnail}
  1992.                                 <div class="link-details">
  1993.                                     <div class="link-title">{Name}</div>
  1994.                                     {block:Excerpt}
  1995.                                     <div class="link-exerpt">{Excerpt}</div>
  1996.                                     {/block:Excerpt}
  1997.                                     {block:Author}
  1998.                                     <div class="link-author">{lang:Authors}: {Author}</div>
  1999.                                     {/block:Author}
  2000.                                     {block:Host}
  2001.                                     <div class="link-host">{lang:Link}: <span class="link-source">{Host}</span></div>
  2002.                                     {/block:Host}
  2003.                                 </div>
  2004.  
  2005.                             </a>
  2006.                         </div>
  2007.                         {/block:Link}
  2008.                         {block:Chat}
  2009.                             <ul class="conversation">
  2010.                                 {block:Lines}
  2011.                                     <li class="chat-item chat-{Alt}">
  2012.                                         {block:Label}
  2013.                                         <span class="chat-label">{Label}</span>
  2014.                                         {/block:Label}
  2015.                                         <span class="chat-text">{Line}</span>
  2016.                                     </li>                                
  2017.                                 {/block:Lines}
  2018.                             </ul>
  2019.                         {/block:Chat}
  2020.                         {block:Audio}
  2021.                             {block:AudioEmbed}
  2022.                                 <div class="audio-embed">
  2023.                                     {AudioEmbed}
  2024.                                 </div>
  2025.                             {/block:AudioEmbed}
  2026.                             {block:AudioPlayer}
  2027.                             <div class="audio-player" style="display: flex;">
  2028.                                 {block:AlbumArt}
  2029.                                 <img src="{AlbumArtURL}">
  2030.                                 {/block:AlbumArt}
  2031.                                 {AudioPlayer}
  2032.                             </div>
  2033.                             {/block:AudioPlayer}
  2034.                             {block:NotReblog}
  2035.                             {block:Caption}
  2036.                             <div class="video-caption">
  2037.                                 {Caption}
  2038.                             </div>
  2039.                             {/block:Caption}
  2040.                             {/block:NotReblog}
  2041.                         {/block:Audio}
  2042.                         {block:Video}
  2043.                                 <div class="video-embed">
  2044.                                     {VideoEmbed-500}
  2045.                                 </div>
  2046.                             {block:NotReblog}
  2047.                             {block:Caption}
  2048.                                 <div class="video-caption">
  2049.                                     {Caption}
  2050.                                 </div>
  2051.                             {/block:Caption}
  2052.                             {/block:NotReblog}
  2053.                         {/block:Video}
  2054.                         {block:Answer}
  2055.                             <div class="question">
  2056.                                 <div class="ask-contents">
  2057.                                     <div class="asker">{lang:Asker asked 2}</div>
  2058.                                     <div class="asker-question">{Question}</div>
  2059.                                 </div>
  2060.  
  2061.                                 <img class="asker-avatar" src="{AskerPortraitURL-96}" alt="">
  2062.                             </div>
  2063.                        
  2064.                             {block:Answerer}
  2065.                             <div class="answer">
  2066.                                 <img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt="">
  2067.                                 <div class="answer-contents">
  2068.                                     <div class="answerer">{Answerer} {lang:Answer}</div>
  2069.                                     <div class="answerer-answer">{Answer}</div>
  2070.                                 </div>
  2071.                             </div>
  2072.                             {/block:Answerer}
  2073.                             {block:NotReblog}
  2074.                             <div class="replies">
  2075.                                 {Replies}
  2076.                             </div>
  2077.                             {/block:NotReblog}
  2078.                         {/block:Answer}
  2079.                        
  2080.                         {block:RebloggedFrom}
  2081.                         <div class="reblog-list">
  2082.                             {block:Reblogs}
  2083.                             <div class="reblog-item">
  2084.                                 <div class="reblog-header">
  2085.                                     <div class="reblog-wrapper">
  2086.                                         {block:IsDeactivated}
  2087.                                         <div class="reblog-avatar">
  2088.                                             <img src="{PortraitURL-64}" alt="{Username} Profle Picture">
  2089.                                         </div>
  2090.                                         <span class="inactive reblog-username">{Username}</span>
  2091.                                         {/block:IsDeactivated}
  2092.                                         {block:IsActive}
  2093.                                         <a href="{Permalink}" class="reblog-avatar">
  2094.                                             <img src="{PortraitURL-64}" alt="{Username}" />
  2095.                                         </a>
  2096.                                         <a class="active reblog-username" href="{Permalink}">{Username}</a>
  2097.                                         {/block:IsActive}
  2098.                                     </div>
  2099.                                 </div>
  2100.                                 <div class="reblog-body post-body">
  2101.                                     {body}
  2102.                                 </div>
  2103.                             </div>
  2104.                             {/block:Reblogs}
  2105.                         </div>
  2106.                         {/block:RebloggedFrom}
  2107.                        
  2108.                         {block:NotReblog}
  2109.                         {block:Text}
  2110.                         <div class="post-body">
  2111.                             {block:Link}
  2112.                                 {Description}
  2113.                             {/block:Link}
  2114.                             {Caption}
  2115.                             {Body}
  2116.                         </div>
  2117.                         {/block:Text}
  2118.                         {/block:NotReblog}
  2119.  
  2120.  
  2121.                     </div>
  2122.                     {block:ContentSource}
  2123.                     <div class="post-source">
  2124.                         {lang:Source}:
  2125.                         <a href="{SourceURL}" target="_blank" rel="noreferrer" title="{SourceTitle}">{SourceTitle}</a>
  2126.                     </div>
  2127.                     {/block:ContentSource}
  2128.     {block:Date}
  2129.                     <footer>
  2130.  
  2131.                         <ul class="post-tags">
  2132.                             {block:HasTags}
  2133.                             {block:Tags}
  2134.                                 <li><a href="{TagURL}">#{Tag}</a></li>
  2135.                             {/block:Tags}
  2136.                             {/block:HasTags}
  2137.                         </ul>
  2138.  
  2139.  
  2140.                         <div class="post-controls">
  2141.                         <div class="like_button">
  2142.                             {block:IfWhiteLikeandReblog}
  2143.                             {LikeButton color="white"}
  2144.                             {/block:IfWhiteLikeandReblog}
  2145.                             {block:IfNotWhiteLikeandReblog}
  2146.                             {LikeButton}
  2147.                             {/block:IfNotWhiteLikeandReblog}
  2148.                             <span>{NoteCount}</span>
  2149.                         </div>
  2150.                             {block:IfWhiteLikeandReblog}
  2151.                             {ReblogButton color="white"}
  2152.                             {/block:IfWhiteLikeandReblog}
  2153.                             {block:IfNotWhiteLikeandReblog}
  2154.                             {ReblogButton}
  2155.                             {/block:IfNotWhiteLikeandReblog}
  2156.                         </div>
  2157.                     </footer>
  2158.     {/block:Date}
  2159.                 </article>
  2160.  
  2161.                 {block:PostNotes}
  2162.                 <!-- POST NOTES -->
  2163.                 <div class="note-info">
  2164.                 {block:NoteCount}
  2165.                 <div class="note-count">
  2166.                     {NoteCountWithLabel}
  2167.                 </div>
  2168.                 {/block:NoteCount}
  2169.                     {PostNotes-64}    
  2170.                 </div>
  2171.                 {/block:PostNotes}
  2172.  
  2173.                 {/block:Posts}
  2174.  
  2175.             </div> <!-- /post-list -->
  2176.  
  2177.             <!-- Navigation -->
  2178.             {block:Pagination}
  2179.             <div class="pagination">
  2180.                 {block:PreviousPage}
  2181.                 <a href="{PreviousPage}" class="page previous-page">
  2182.                     <p>Previous</p>
  2183.                 </a>
  2184.                 {/block:PreviousPage}
  2185.  
  2186.                 {block:NextPage}
  2187.                 <a href="{NextPage}" class="page next-page">
  2188.                     <p>Next</p>
  2189.                 </a>
  2190.                 {/block:NextPage}
  2191.             </div>
  2192.             {/block:Pagination}
  2193.  
  2194.         </main>
  2195.    
  2196.         {block:ifShowSidebar}
  2197.         <aside>
  2198.             <div id="menu" class="menu">
  2199.                 <span class="material-symbols-outlined">menu</span>
  2200.             </div>
  2201.  
  2202.  
  2203.             <div id="sidenav" class="sidenav">
  2204.                 <div class="updates">
  2205.                     {block:IfUpdatesTitle}
  2206.                     <h2>
  2207.                         {block:IfUpdatesTag}
  2208.                         <a href="/tagged/{text:Updates Tag}">
  2209.                         {/block:IfUpdatesTag}
  2210.                             {text:Updates Title}
  2211.                         {block:IfUpdatesTag}
  2212.                         </a>
  2213.                         {/block:IfUpdatesTag}
  2214.                     </h2>
  2215.                     {/block:IfUpdatesTitle}
  2216.                     {block:IfUpdatesText}
  2217.                     <p>{text:Updates Text}</p>
  2218.                     {/block:IfUpdatesText}
  2219.                 </div>
  2220.                 <div class="trending">
  2221.                     <div class="trend-title">
  2222.                         <span class="icon material-symbols-outlined">expand_less</span>
  2223.                         <h2>{text:Guest Tag Title}</h2>
  2224.                     </div>
  2225.                     <div class="trend-tags">
  2226.                     </div>
  2227.                 </div>
  2228.                 <div class="trending">
  2229.                     <div class="trend-title">
  2230.                         <span class="icon material-symbols-outlined">expand_less</span>
  2231.                         <h2>{text:Main Tag Title}</h2>
  2232.                     </div>
  2233.                     <div class="trend-tags"></div>
  2234.                 </div>
  2235.             </div>
  2236.         </aside>
  2237.         {/block:ifShowSidebar}        
  2238.  
  2239.         <footer class="footer">
  2240.            
  2241.             <a href="/" class="avatar">
  2242.                 <img src="{PortraitURL-96}" alt="avatar"/>
  2243.             </a>
  2244.  
  2245.             <nav>
  2246.                 <ul>
  2247.                     {block:IfCopyrightYears}
  2248.                     <li class="copyright">
  2249.                         {CopyrightYears}
  2250.                     </li>
  2251.                     {block:IfCopyrightYears}
  2252.                     <li>
  2253.                         <a href="/">{lang:Home}</a>
  2254.                     </li>
  2255.                     <li>
  2256.                         <a href="/archive">{lang:Archive}</a>
  2257.                     </li>
  2258.                     {block:English}
  2259.                     <li>
  2260.                         <a target="_blank" rel="noreferrer" href="https://skyetrick-blockout.tumblr.com/">Credit</a>
  2261.                     </li>
  2262.                     {/block:English}
  2263.                     {block:NotEnglish}
  2264.                     <li>
  2265.                         <a class="material-symbols-outlined" target="_blank" rel="noreferrer" href="https://skyetrick-blockout.tumblr.com/">code</a>
  2266.                     </li>
  2267.                     {/block:NotEnglish}
  2268.                 </ul>
  2269.             </nav>
  2270.         </footer>
  2271.  
  2272.         <!-- JQuery -->
  2273.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  2274.  
  2275.         <!-- NPF Rendering -->
  2276.         <script>
  2277.             (function() {
  2278.                 // remove empty p tags
  2279.                 for (const p of document.querySelectorAll('p')) {
  2280.                     if (p.innerHTML.trim() === '') {
  2281.                         p.remove()
  2282.                     }
  2283.                 }
  2284.                 // create posts array
  2285.                 const posts = [];
  2286.                 {block:Posts}
  2287.                 posts.push({ npf: {NPF}, id: "{PostId}"});
  2288.                 {/block:Posts}
  2289.                
  2290.                 function updateTypes(type, article) {
  2291.                     article.classList.remove('post-text');
  2292.                     const postName = "post-" + type;
  2293.                     article.classList.add(postName, 'npf-post');
  2294.                 }
  2295.                
  2296.                 function cleanupPost(article) {
  2297.                     const postBody = article.querySelector('.post-body');
  2298.                     if (postBody && postBody.innerHTML.trim() === '') {
  2299.                        postBody.remove();
  2300.                     }
  2301.                    
  2302.                     // clean up any potential stray reblog headers
  2303.                     let reblogHeader = article.querySelector('.reblog-header')
  2304.                     let reblogBody = article.querySelector('.reblog-body')
  2305.                     if (reblogHeader?.nextElementSibling === reblogBody && reblogBody?.childElementCount === 0) {
  2306.                        reblogHeader.remove()
  2307.                        reblogBody.remove()
  2308.                    }
  2309.                    
  2310.                    // clean up any potential stray captions
  2311.                    let captions = article.querySelectorAll('figcaption');
  2312.                     for (const caption of captions) {
  2313.                         if (caption.innerHTML.trim() === '') {
  2314.                             caption.remove();
  2315.                         }
  2316.                     }
  2317.                 }
  2318.                
  2319.                 {block:IfShowAdditionalPhotoInfo}
  2320.                 function handlePhotos(photoset, postContent) {
  2321.                     const photos = photoset.querySelectorAll('.npf_col');
  2322.                    
  2323.                     photos.forEach((photo, index) => {
  2324.                         const content = postContent[index];
  2325.                        
  2326.                         // checks for exif content
  2327.                         const {exif, attribution} = content;
  2328.                         if (exif) {
  2329.                             const {
  2330.                                 Aperture,
  2331.                                 aperture,
  2332.                                 CameraMake,
  2333.                                 cameramake,
  2334.                                 CameraModel,
  2335.                                 cameramodel,
  2336.                                 ExposureTime,
  2337.                                 exposuretime,
  2338.                                 FocalLength,
  2339.                                 focallength
  2340.                             } = exif
  2341.                            
  2342.                             photo.classList.add('exif-photo');
  2343.                             const exifFigure = photo.querySelector('figure');
  2344.                             exifFigure.classList.add('exif-figure');
  2345.                             const exifWrapper = document.createElement('div');
  2346.                             exifWrapper.classList.add('exif-info');
  2347.                             const exifList = document.createElement('ul');
  2348.                            
  2349.                             const cameraName = (cameramake ?? CameraMake ?? '') + ' ' + (cameramodel ?? CameraModel ?? '');
  2350.                             if (cameraName.trim()) {
  2351.                                 const link = document.createElement('a');
  2352.                                 link.innerText = cameraName;
  2353.                                 const href = 'https://www.dpreview.com/search/?query=' + cameraName;
  2354.                                 link.href = href;
  2355.                                 const cameraItem = document.createElement('li');
  2356.                                 cameraItem.innerText = 'Camera: '
  2357.                                 cameraItem.append(link);
  2358.                                 exifList.append(cameraItem);
  2359.                             }
  2360.                            
  2361.                             const focalLength = focallength ?? FocalLength;
  2362.                             if (focalLength) {
  2363.                                 const focalItem = document.createElement('li');
  2364.                                 focalItem.innerText = "Focal Length: " + focalLength;
  2365.                                 exifList.append(focalItem);
  2366.                             }
  2367.                            
  2368.                             const exposureTime = exposuretime ?? ExposureTime;
  2369.                             if (exposureTime) {
  2370.                                 const exposureItem = document.createElement('li');
  2371.                                 exposureItem.innerText = "Exposure: " + exposureTime;
  2372.                                 exifList.append(exposureItem);
  2373.                             }
  2374.                            
  2375.                             const camAperture = aperture ?? Aperture;
  2376.                             if (camAperture) {
  2377.                                 const apertureItem = document.createElement('li');
  2378.                                 apertureItem.innerText = "Aperture: " + camAperture;
  2379.                                 exifList.append(apertureItem);
  2380.                             }
  2381.  
  2382.                             if (exifList.childElementCount) {
  2383.                                 exifWrapper.append(exifList);
  2384.                                 const actionDiv = document.createElement('div');
  2385.                                 actionDiv.classList.add('action-link');
  2386.                                 actionDiv.innerHTML = '<a href="https://www.cambridgeincolour.com/tutorials/camera-exposure.htm" class="material-symbols-outlined" title="What is all of this information?">info</a>';
  2387.                                 exifWrapper.append(actionDiv);
  2388.                                 photo.append(exifWrapper);
  2389.                             } else {
  2390.                                 exifList.remove();
  2391.                                 exifWrapper.remove();
  2392.                             }
  2393.                         }
  2394.                        
  2395.                         if (attribution && attribution.type === 'link') {
  2396.                            photo.classList.add('with-click-through');
  2397.                             const figure = photo.querySelector('figure');
  2398.                             const attrElement = document.createElement('div');
  2399.                             attrElement.classList.add('click-through');
  2400.                             const anchor = document.createElement('a');
  2401.                             anchor.innerText = attribution.url;
  2402.                             anchor.href = attribution.url;
  2403.                             attrElement.append(anchor);
  2404.                             figure.append(attrElement);
  2405.                         }
  2406.                     });
  2407.                 }
  2408.                 {/block:IfShowAdditionalPhotoInfo}
  2409.                
  2410.                
  2411.                 for (const {npf, id} of posts) {
  2412.                     const article = document.getElementById(id);
  2413.                     if (article === null) continue;
  2414.                     if (!article.classList.contains('post-text')) continue;
  2415.                    
  2416.                     const content = article?.querySelector(".content");
  2417.                     if (!content === null) continue;
  2418.    
  2419.                     const postContent = npf.trail[0]?.content?.length ? npf.trail[0].content : npf.content;
  2420.                    
  2421.                     const type = postContent[0]?.type;
  2422.                     const subtype = postContent[0]?.subtype;
  2423.                     switch(type) {
  2424.                         case 'image':
  2425.                             const parent = content.querySelector('.npf_row')?.parentElement;
  2426.                             const elements = [];
  2427.    
  2428.                             // gather all of the beginning rows of the photoset
  2429.                             let current = parent?.firstElementChild;
  2430.                             while(current?.classList.contains("npf_row")) {
  2431.                                 elements.push(current);
  2432.                                 current = current.nextElementSibling;
  2433.                             }
  2434.                            
  2435.                             if (elements.length === 0) continue;
  2436.                            
  2437.                             const photoset = document.createElement("div");
  2438.                             photoset.classList.add("photoset");
  2439.                             photoset.append(...elements);
  2440.                             content.prepend(photoset);
  2441.                            
  2442.                             // set post type to photoset if there are multiple photos in the photoset; otherwise, it's a singular photo
  2443.                             const newType = photoset.querySelectorAll('.npf_col').length > 1 ? 'photoset' : 'photo';
  2444.                             updateTypes(newType, article);
  2445.                             {block:IfShowAdditionalPhotoInfo}
  2446.                             handlePhotos(photoset, postContent);
  2447.                             {/block:IfShowAdditionalPhotoInfo}
  2448.                             cleanupPost(article);
  2449.                             break;
  2450.                         case 'video':
  2451.                             updateTypes('video', article);
  2452.                             let video = article.querySelector('figure');
  2453.                             if (video) {
  2454.                                 video.classList.add('featured-video');
  2455.                                 content.prepend(video);
  2456.                             }
  2457.                             cleanupPost(article);
  2458.                             break;
  2459.                         case 'link':
  2460.                             updateTypes('link', article);
  2461.                             const link = content.querySelector('.npf-link-block');
  2462.                             if (link) {
  2463.                                 link.classList.add('featured-link');
  2464.                                 content.prepend(link);
  2465.                             }
  2466.                             cleanupPost(article);
  2467.                             break;
  2468.                         case 'audio':
  2469.                             updateTypes('audio', article);
  2470.                             let audio = article.querySelector('figure');
  2471.                             if (audio) {
  2472.                                 audio.classList.add('featured-audio');
  2473.                                 content.prepend(audio);
  2474.                             }
  2475.                             cleanupPost(article);
  2476.                             break;
  2477.                         default: // 'text'
  2478.                             if (subtype === 'quote') {
  2479.                                 updateTypes('quote', article);
  2480.                             }
  2481.                     }
  2482.                 }
  2483.             })()
  2484.         </script>
  2485.  
  2486.         {block:HasPages}
  2487.         {block:IfPageIcons}
  2488.         <script>
  2489.             (function() {
  2490.                 const pages = document.querySelectorAll(".nav-page");
  2491.                 if (pages.length === 0) return;
  2492.                
  2493.                 const pageIcons = "{text:Page Icons}".split(',');
  2494.                 const pageIconList = pageIcons.map((icon) => icon.trim());
  2495.                
  2496.                 function setPageIcon(page, icon) {
  2497.                     if (!(page && icon)) return;
  2498.                     const element = page.querySelector('.no-icon');
  2499.                     if (!element) return;
  2500.                    
  2501.                     if (element.classList.replace('no-icon', 'material-symbols-outlined')) {
  2502.                         element.innerText = icon;
  2503.                     }
  2504.                 }
  2505.                
  2506.                 pageIconList.forEach((icon, index) => {
  2507.                     setPageIcon(pages[index], icon);
  2508.                 });
  2509.             })();
  2510.         </script>
  2511.         {/block:IfPageIcons}
  2512.         {/block:HasPages}
  2513.  
  2514.         {block:IfShowSidebar}
  2515.         <!-- tags setting script -->
  2516.         <script>
  2517.             (function() {
  2518.                 const trending = document.querySelectorAll(".trending")
  2519.                 if (trending.length === 0) {
  2520.                     return;
  2521.                 }
  2522.    
  2523.                 function setTags(tagString) {
  2524.                     if(tagString === "") return []
  2525.                     let list = tagString.split(',')
  2526.                     list = list.map((item) => item.trimStart().trimEnd())
  2527.                     return list
  2528.                 }
  2529.                 const guestTags = setTags("{text:Guest Tags}")
  2530.                 const mainTags = setTags("{text:Main Tags}")        
  2531.                 function createTrend(trendText, trend) {
  2532.                     const a = document.createElement("a")
  2533.                     a.href = "/tagged/" + trendText
  2534.                     const name = document.createElement("h3")
  2535.                     name.innerText = trendText
  2536.                     const seeTags = document.createElement("h4")
  2537.                     seeTags.innerText = "see tags"
  2538.                     a.appendChild(name)
  2539.                     a.appendChild(seeTags)
  2540.                    
  2541.                     trend.querySelector(".trend-tags").appendChild(a)
  2542.                     return a
  2543.                 }
  2544.                 if(guestTags.length === 0) {
  2545.                     trending[0].style.display = "none"
  2546.                 }
  2547.                 else {
  2548.                     guestTags.forEach((tag) => createTrend(tag, trending[0]))
  2549.                 }
  2550.                
  2551.                 if(mainTags.length === 0) {
  2552.                     trending[1].style.display = "none";
  2553.                 }
  2554.                 else
  2555.                     mainTags.forEach((tag) => createTrend(tag, trending[1]));
  2556.             })();
  2557.         </script>
  2558.  
  2559.         <!--Menu Toggle-->
  2560.         <script>
  2561.             $.fn.extend({
  2562.                 toggleText: function(a, b){
  2563.                     return this.text(this.text() == b ? a : b);
  2564.                 }
  2565.             });
  2566.             $(document).ready(function () {
  2567.                 $("#menu").click(function () {
  2568.                     $("#sidenav").toggle("flex");
  2569.                 })
  2570.                 $(".trend-title").click(function (event) {
  2571.                     const parent = $(event.target).closest(".trend-title");
  2572.                     $(parent).siblings(".trend-tags").slideToggle("fast");
  2573.                     $(parent).children(".icon").toggleText("expand_more", "expand_less");
  2574.                 })
  2575.                 $(window).resize(function () {
  2576.                     if ($(this).width() < 700)
  2577.                        $("#sidenav").hide();
  2578.                })
  2579.            })
  2580.        </script>
  2581.         {/block:IfShowSidebar}
  2582.  
  2583.         <!-- Minified functions for lightboxes and photosets-->
  2584.         <script src="https://static.tumblr.com/7ijwq6x/CPWrlisng/functions1.min.js"></script>
  2585.  
  2586.         <!-- Lightbox handling -->
  2587.         <script>
  2588.             $(document).ready(function () {
  2589.                 $(".high-res .featured-image").click(openLightbox);
  2590.                 $(".slideshow").each(setPhotosetLayout);
  2591.                 $(".slideshow .image").click(startSlideshow);
  2592.             });
  2593.         </script>
  2594.  
  2595.         <noscript>This page requires JavaScript.</noscript>
  2596.     </body>
  2597. </html>
Tags: tumblr theme
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!