Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!---
- --->
- <!DOCTYPE html>
- <html data-theme="">
- <head>
- <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!----- VARIABLES AND OPTIONS ----->
- <meta name="image:Sidebar Image" content=""/>
- <meta name="image:Background Image" content=""/>
- <meta name="color:Theme Background Color" content="#f9f9f9" />
- <meta name="color:Posts Background Color" content="#ffffff" />
- <meta name="color:Theme Link Color" content="#494848" />
- <meta name="color:Theme Text Color" content="#201f1f" />
- <meta name="color:Theme Link Hover Color" content="#3e3d3d" />
- <meta name="color:Borders Color" content="#eaeaea" />
- <meta name="color:Dark Theme Background Color" content="#0f0f0f" />
- <meta name="color:Dark Posts Background Color" content="#151515" />
- <meta name="color:Dark Theme Link Color" content="#bbc56f" />
- <meta name="color:Dark Theme Text Color" content="#dad8d8" />
- <meta name="color:Dark Theme Link Hover Color" content="#a6b060" />
- <meta name="color:Dark Borders Color" content="#272727" />
- <meta name="select:Post Width" content="540px" title="540px"/>
- <meta name="select:Post Width" content="400px" title="400px"/>
- <meta name="select:Post Width" content="500px" title="500px"/>
- <!-- -------------- THEME: customizations -------------- -->
- <meta name="text:Theme Font Family" content="Arial" />
- <meta name="text:Theme Text Spacing" content="0px"/>
- <!-- -------------- THEME: body styling -------------- -->
- <meta name="select:Theme Font Size" content="1.1rem" title="11px" />
- <meta name="select:Theme Font Size" content="1rem" title="10px" />
- <meta name="select:Theme Font Size" content="1.2rem" title="12px" />
- <meta name="select:Theme Font Size" content="1.3rem" title="13px" />
- <meta name="select:Theme Font Size" content="1.4rem" title="14px" />
- <meta name="select:Date Font Size" content="1.2rem" title="12px" />
- <meta name="select:Date Font Size" content="1rem" title="10px" />
- <meta name="select:Date Font Size" content="1.1rem" title="11px" />
- <meta name="select:Date Font Size" content="1.3rem" title="13px" />
- <meta name="select:Date Font Size" content="1.4rem" title="14px" />
- <meta name="select:Date Font Weight" content="700" title="bold" />
- <meta name="select:Date Font Weight" content="600" title="medium" />
- <meta name="select:Date Font Weight" content="400" title="normal" />
- <meta name="select:Date Text Transform" content="lowercase" />
- <meta name="select:Date Text Transform" content="uppercase" />
- <meta name="select:Date Text Transform" content="capitalize" />
- <meta name="select:Date Text Transform" content="none" />
- <meta name="text:Theme Container Size" content="140rem" />
- <meta name="text:Posts Margin" content="9.5rem" />
- <meta name="text:Posts Padding" content="1em" />
- <meta name="text:Sidebar Margin" content="22rem" />
- <meta name="text:Sidebar Posts Spacing Between" content="0rem" />
- <meta name="select:Sidebar Content Position" content="flex-start" title="top">
- <meta name="select:Sidebar Content Position" content="center" title="center">
- <meta name="text:Box Shadow Color" content="234, 234, 234, 0.5" />
- <meta name="text:Dark Box Shadow Color" content="62, 62, 61.0.5" />
- <meta name="text:Box Shadow Size" content="0px 0.4rem 1rem" />
- <meta name="select:Borders Size" content="0.1rem" title="1px" />
- <meta name="select:Borders Size" content="0rem" title="0px" />
- <meta name="select:Borders Size" content="0.2rem" title="2px" />
- <meta name="select:Borders Size" content="0.3rem" title="3px" />
- <meta name="select:Borders Size" content="0.4rem" title="4px" />
- <meta name="select:Borders Size" content="0.5rem" title="5px" />
- <meta name="select:Borders Style" content="solid" />
- <meta name="select:Borders Style" content="dotted" />
- <meta name="select:Borders Style" content="dashed" />
- <meta name="select:Borders Style" content="double" />
- <meta name="select:Borders Style" content="ridge" />
- <!-- -------------- SIDEBAR: conditionals -------------- -->
- <meta name="if:Dark Theme Default" content="1"/>
- <meta name="if:Show Top Borders" content="1"/>
- <meta name="if:Show All Borders" content="0"/>
- <meta name="if:Show Box Shadow" content="1" />
- <meta name="if:Enable Font Smoothing" content="0" />
- <meta name="if:Show Theme Toggle" content="1" />
- <meta name="if:Show Theme Icon Toggle" content="1" />
- <meta name="if:Show Icon Pagination" content="1" />
- <meta name="if:Show Date Information" content="1" />
- <meta name="if:Right Sidebar Position" content="0" />
- <meta name="if:Sidebar Image" content="1"/>
- <meta name="if:Sidebar Title" content="1"/>
- <meta name="if:Sidebar Pages Link" content="1"/>
- <meta name="if:Sidebar Archive Link" content="1"/>
- <meta name="if:Sidebar Submit Link" content="1"/>
- <meta name="if:Sidebar Link 1" content="1" />
- <meta name="if:Sidebar Link 2" content="1" />
- <meta name="if:Sidebar Link 3" content="1" />
- <meta name="if:Sidebar Link 4" content="1" />
- <!-- -------------- SIDEBAR: links -------------- -->
- <meta name="text:Home URL" content="/" />
- <meta name="text:Home Text" content="Home" />
- <meta name="text:Ask URL" content="/ask" />
- <meta name="text:Ask Text" content="Ask" />
- <meta name="text:Archive URL" content="archive"/>
- <meta name="text:Archive Text" content="Archive" />
- <meta name="text:Submit URL" content="/submit"/>
- <meta name="text:Submit Text" content="Submit" />
- <meta name="text:Sidebar Link 1 URL" content="/" />
- <meta name="text:Sidebar Link 1 Text" content="Link 1" />
- <meta name="text:Sidebar Link 2 URL" content="/" />
- <meta name="text:Sidebar Link 2 Text" content="Link 2" />
- <meta name="text:Sidebar Link 3 URL" content="/" />
- <meta name="text:Sidebar Link 3 Text" content="Link 3" />
- <meta name="text:Sidebar Link 4 URL" content="/" />
- <meta name="text:Sidebar Link 4 Text" content="Link 4" />
- <!-- RESOURCES: custom font / by: https://fonts.google.com/ -->
- <link href="https://fonts.googleapis.com/css2?family={text:Theme Font Family}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
- <!-- RESOURCES: jquery used for: tippyjs tooltips -->
- <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
- <!-- RESOURCES: tippyjs tooltips / by: https://atomiks.github.io/tippyjs/
- uses: css/js -->
- <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
- <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
- <script>
- // Check stored theme or system preference
- const storedTheme = localStorage.getItem("theme");
- // Apply it immediately to <html> to avoid flash
- if (storedTheme) {
- document.documentElement.setAttribute("data-theme", storedTheme);
- }
- </script>
- <style type="text/css">
- :root {
- /* -------------- THEME -------------- */
- --themeFontFamily: {text:Theme Font Family};
- --themeTextSpacing: {text:Theme Text Spacing};
- --bordersStyle: {select:Borders Style};
- --bordersSize: {select:Borders Size};
- --boxShadowSize:{text:Box Shadow Size};
- --boxShadowOpacity:{select:Box Shadow Opacity};
- --themeFontSize: {select:Theme Font Size};
- --themeFontLineHeight: calc(var(--themeFontSize) * 1.4);
- --borderRadius: 0.4rem;
- --themeContainerSize: {text:Theme Container Size};
- --sidebarPostsSpacingGap: {text:Sidebar Margin};
- --sidebarContentPosition: {select:Sidebar Content Position};
- --postsMargin: {text:Posts Margin};
- --postsPadding: {text:Posts Padding};
- --postWidth: {select:Post Width};
- --dateFontSize:{select:Date Font Size};
- --dateFontWeight:{select:Date Font Weight};
- --dateTextTransform:{select:Date Text Transform};
- }
- {block:ifDarkThemeDefault}
- :root, html[data-theme='dark'] {
- {/block:ifDarkThemeDefault}
- {block:ifNotDarkThemeDefault}
- html[data-theme='dark'] {
- {/block:ifNotDarkThemeDefault}
- --light-on: none;
- --light-off: block;
- --themeBackgroundColor: {color:Dark Theme Background Color};
- --postsBackgroundColor: {color:Dark Posts Background Color};
- --themeLinkColor: {color:Dark Theme Link Color};
- --themeTextColor: {color:Dark Theme Text Color};
- --themeLinkHoverColor: {color:Dark Theme Link Hover Color};
- --bordersColor: {color:Dark Borders Color};
- --boxShadowColor:{text:Dark Box Shadow Color};
- }
- {block:ifNotDarkThemeDefault}
- :root, html[data-theme='light'] {
- {/block:ifNotDarkThemeDefault}
- {block:ifDarkThemeDefault}
- html[data-theme='light'] {
- {/block:ifDarkThemeDefault}
- --light-on: block;
- --light-off: none;
- --themeBackgroundColor: {color:Theme Background Color};
- --postsBackgroundColor: {color:Posts Background Color};
- --themeLinkColor: {color:Theme Link Color};
- --themeLinkHoverColor: {color:Theme Link Hover Color};
- --themeTextColor: {color:Theme Text Color};
- --bordersColor: {color:Borders Color};
- --boxShadowColor:{text:Box Shadow Color};
- }
- html.theme-transition,
- html.theme-transition * {
- transition: transform .3s cubic-bezier(0,2.18,.64,.69) !important;
- }
- .light-on {
- display: var(--light-on);
- }
- .light-off {
- display: var(--light-off);
- }
- .theme-toggle {
- cursor: pointer;
- font-weight: bold;
- color: var(--themeLinkColor);
- text-decoration: none;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- .theme-toggle svg,
- .pagination-links svg {
- padding: 0.5rem 0.5rem 0;
- width: 1.2em;
- height: 1.2em;
- }
- * {
- margin: 0;
- padding: 0;
- -webkit-box-sizing: inherit;
- box-sizing: inherit;
- }
- html {
- font-size: 62.5%;
- }
- body {
- font-family: var(--themeFontFamily), sans-serif;
- font-size: var(--themeFontSize);
- line-height: var(--themeFontLineHeight);
- color: var(--themeTextColor);
- letter-spacing: var(--themeTextSpacing);
- background:var(--themeBackgroundColor) url({image:Background Image});
- background-color:var(--themeBackgroundColor);
- word-wrap: break-word;
- margin: 0;
- padding: 0;
- {block:ifEnableFontSmoothing}
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- {/block:ifEnableFontSmoothing}
- }
- a {
- color: var(--themeLinkColor);
- text-decoration: none;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- a:hover {
- color: var(--themeLinkHoverColor);
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- blockquote {
- padding: 0 0 0 1.5em;
- border-left:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
- margin: 1.5em 0 1.5em 1.5em;
- }
- h1, h2, h3, h4, h5 {
- line-height: 145%;
- font-weight: bold;
- }
- h1 { font-size: 1.5em }
- h2 { font-size: 1.3em }
- h3 { font-size: 1.25em }
- h4 { font-size: 1.1em }
- h5 { font-size: 1em }
- small {font-size: 0.9em;}
- big {font-size: 1.1em;}
- strong, b {
- color: var(--themeLinkColor);
- }
- hr {
- width:16rem;
- height: 0.1rem;
- border: none;
- box-shadow: none;
- margin-block: 1em;
- background-color: var(--bordersColor);
- }
- pre {
- line-height: inherit;
- font-size: monospace;
- white-space: pre-wrap;
- white-space: -moz-pre-wrap;
- white-space: -pre-wrap;
- white-space: -o-pre-wrap;
- word-wrap: break-word;
- }
- ul, ul li {
- list-style: none;
- margin: 0;
- padding: 0;
- }
- .posts ul, .posts ol {
- margin-block: 1em;
- }
- #scrollToTop {
- display: none;
- opacity: 0;
- transition: opacity 150ms ease;
- pointer-events: none;
- }
- #scrollToTop.is-visible {
- display: block;
- opacity: 1;
- pointer-events: auto;
- line-height: 0;
- }
- .feather {
- display: inline-block;
- width: 1.6em;
- height: 1.6em;
- }
- /* tooltips */
- .tippy-box[data-theme~='custom'] {
- text-align: center;
- font-size: var(--themeFontSize);
- color: var(--themeBackgroundColor);
- background-color: var(--themeLinkColor);
- font-weight: bold;
- }
- .theme-container {
- width: 100%;
- max-width: var(--themeContainerSize);
- display: grid;
- justify-content: left;
- grid-template-columns: calc(26.8rem + var(--postsPadding)) auto;
- grid-template-rows:1fr;
- grid-template-areas:
- "sidebar posts";
- {block:ifRightSidebarPosition}
- justify-content: right;
- grid-template-columns: auto calc(26.8rem + var(--postsPadding));
- grid-template-areas:
- "posts sidebar";
- {/block:ifRightSidebarPosition}
- gap: var(--sidebarPostsSpacingGap);
- margin: 5rem auto;
- }
- .posts-container {
- grid-area: posts;
- display: flex;
- justify-content: flex-start;
- flex-direction: column;
- }
- .posts, .posts-tag-page, .posts-day-page {
- width: var(--postWidth);
- padding: var(--postsPadding);
- text-align:var(--postsTextPosition);
- background-color: var(--postsBackgroundColor);
- border-radius: var(--borderRadius);
- {block:ifShowAllBorders}
- outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
- {/block:ifShowAllBorders}
- {block:ifShowBoxShadow}
- -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
- box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
- {/block:ifShowBoxShadow}
- }
- .posts-content {
- {block:ifShowBoxShadow}
- -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
- box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
- {/block:ifShowBoxShadow}
- }
- .posts-content:not(:last-of-type),
- .posts-tag-page:not(:last-of-type),
- .posts-day-page:not(:last-of-type) {
- margin-bottom: var(--postsMargin);
- }
- .posts-tag-page:not(:last-of-type),
- .posts-day-page:not(:last-of-type) {
- margin-bottom: 2rem;
- }
- .posts-tag-page .posts-tag-item .tag,
- .posts-day-page .posts-tag-item .tag {
- font-weight: bold;
- color: var(--themeLinkColor);
- }
- .posts-content p:not(last-child) {
- margin-block-end: 1em;
- }
- .posts ul li, ol li {
- margin-bottom: 0.4em;
- }
- .posts ul li::before {
- content: '';
- width: 0.4rem;
- height: 0.4rem;
- margin: 0em 1em;
- display:inline-block;
- border-radius: 50%;
- border: 1px solid var(--themeLinkColor);
- margin-right:0.8em;
- vertical-align:middle;
- color: var(--bordersColor);
- }
- .posts ol {
- margin:1.5rem 0;
- padding: 0 3rem;
- }
- .posts ol li {
- list-style-type: decimal;
- }
- .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
- /*----- SIDEBAR -----*/
- .sidebar-container {
- width: calc(26.8rem + var(--postsPadding) * 2);
- height: 100vh;
- display: flex;
- align-items: var(--sidebarContentPosition);
- {block:ifRightSidebarPosition}
- margin: 0 0 0 0;
- {/block:ifRightSidebarPosition}
- grid-area: sidebar;
- }
- .sidebar-content {
- position: fixed;
- width: 26.8rem;
- background-color:var(--postsBackgroundColor);
- padding: var(--postsPadding);
- border-radius: var(--borderRadius);
- {block:IfSidebarIconImage}
- margin-top: 4em;
- {/block:IfSidebarIconImage}
- {block:ifShowAllBorders}
- outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
- {/block:ifShowAllBorders}
- {block:ifShowBoxShadow}
- -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
- box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
- {/block:ifShowBoxShadow}
- }
- .sidebar-title {
- margin-bottom: 1rem;
- font-weight: bold;
- text-transform: uppercase;
- font-size: 1.4em;
- line-height: calc(var(--themeFontSize) * 1.8);
- color: var(--themeLinkColor);
- }
- .sidebar-navigation ul {
- display: flex;
- gap: 0.4em 1.2em;
- flex-wrap: wrap;
- }
- .sidebar-content a {
- font-weight: bold;
- text-transform: lowercase;
- }
- {block:ifSidebarImage}
- #side-img {margin-bottom: 1.25em;}
- {/block:ifSidebarImage}
- .description {
- background-color: var(--postsBackgroundColor);
- border-radius: var(--borderRadius);
- padding: 1em;
- {block:ifShowTopBorders}
- margin: 1em 0 0;
- border-top:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
- {/block:ifShowTopBorders}
- {block:ifShowAllBorders}
- margin: 1em 0 0;
- outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
- {/block:ifShowAllBorders}
- }
- /*---- PAGINATION -----*/
- #page-navigation {
- {block:ifShowAllBorders}
- margin: 1em 0 0;
- {/block:ifShowAllBorders}
- width: 100%;
- display: inline-flex;
- justify-content: space-between;
- gap: 0.4rem 0.8rem;
- flex-wrap: wrap;
- }
- .pagination-links {
- display: flex;
- gap: 1em;
- }
- /*----- POSTS -----*/
- .posts {
- {block:ifShowTopBorders}
- border-top:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
- {/block:ifShowTopBorders}
- {block:ifShowAllBorders}
- outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
- {/block:ifShowAllBorders}
- }
- .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
- /*----- CAPTIONS -----*/
- .caption {margin-top: 2em; list-style-type: none;}
- .text-caption:first-of-type {margin-top: 0;}
- .npf-photos {
- margin-bottom: 2em;
- }
- .user-icon, .ask-icon {
- display: inline-block;
- vertical-align: middle;
- width: 2em;
- height: 2em;
- margin-right: 1em;
- }
- .username-content {
- margin-block-end: 1em;
- }
- .username-content .username {
- display: inline-block;
- vertical-align: middle;
- font-weight: bold;
- }
- .deactive::after {
- content: '(deactivated)';
- margin-left: 1em;
- opacity: 0.75;
- color: var(--themeTextColor);
- }
- p.tmblr-attribution {margin-top: 1em !important;}
- h1.post-title {margin-top: 0;margin-bottom: 1em;}
- a.link-wrap {display: block; border: 1px solid color: var(--bordersColor);}
- .link {padding: 2em;}
- .link-host, .link-txt {margin-top: 1.5em;}
- .npf-link-block {
- margin-top: 1.5em;
- background-color: inherit;
- border: 1px solid inherit;
- color: inherit;
- }
- /*----- PHOTO -----*/
- img {
- margin: 0;
- display: block;
- height: auto;
- max-width: 100%;
- border-radius: var(--borderRadius);
- }
- .photo img {width: 100%;}
- .vignette, #vignette {opacity: 0;}
- .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
- .lightbox-image, #tumblr_lightbox img {
- box-shadow: none !important;
- border-radius: 0 !important;
- max-width: none;
- }
- #tumblr_lightbox_caption, .lightbox-caption {
- color: #fff !important;
- font-family: inherit;
- margin-top: 1em !important;
- }
- /*----- PHOTOSET -----*/
- .post-content div.npf_row, .post div.npf_row, body div.npf_row {
- margin-left: 0 !important;
- margin-right: 0 !important;
- }
- /*----- QUOTE -----*/
- .quote {line-height: 160%; font-size: 1.25em;}
- .quote p:first-of-type {margin-top: 0;}
- .quote p:last-of-type {margin-bottom: 0;}
- .source {margin-top: 1.5em;}
- /*----- CHAT -----*/
- .chat {padding: 0; margin: 0;}
- .chat li {list-style-type: none; margin-top: 1em;}
- .chat li:first-of-type {margin-top: 0;}
- .chatter {font-weight: bold;}
- p.npf_chat, p.npf_chat b {font-family: inherit;}
- /*----- ANSWER -----*/
- .question-wrapper {margin-top: 1em;}
- .question-wrapper p:first-of-type {margin-top: 0;}
- .question-wrapper p:last-of-type {margin-bottom: 0;}
- .question-wrapper .question p {
- display: inline;
- }
- .asker-wrapper {
- margin-bottom: 1em;
- }
- .ask .replies
- { padding-top: 1em;}
- .ask-user {
- color:var(--themeLinkColor);
- font-weight:var(--boldFontWeight);
- text-transform:lowercase;
- margin-top: 0.5em;
- display: inline-block;
- }
- .ask-user a {
- color:var(--themeLinkColor);
- font-weight:var(--boldFontWeight);
- }
- .ask-user a:hover {
- color:var(--themeLinkHoverColor);
- }
- .ask-question p {
- margin: 0 0 5px;
- }
- .ask .feather {
- width:var(--themeFontSize);
- height:var(--themeFontSize);
- stroke:var(--themeLinkColor);
- display:inline-block;
- vertical-align: middle;
- margin-right: 10px;
- margin-top: 2px;
- }
- .ask-answer.caption-content::after {
- content: '';
- height: 0px;
- }
- /*----- AUDIO -----*/
- .audiopost {padding: 2em; border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);}
- .album-art {
- z-index: 1;
- display: inline-block;
- vertical-align: middle;
- float: left;
- width: 100px;
- height: 100px;
- }
- .audio-player-wrap {
- width: 100px;
- height: 100px;
- display: inline-block;
- }
- .button {
- width: 30px;
- height: 30px;
- overflow: hidden;
- position: relative;
- z-index: 2;
- margin: 7px;
- }
- .audiobox {
- background-color: #f2f2f2;
- z-index: 3;
- position: absolute;
- margin: 28px 0 0 28px;
- border-radius: 50%;
- }
- .audioinfo {
- display: inline-block;
- height: 100px;
- max-width: calc(100% - 100px);
- margin-left: 100px;
- display: flex;
- justify-content: center;
- flex-direction: column;
- box-sizing: border-box;
- padding-left: 2em;
- }
- .audioinfo li {list-style-type: none;}
- .track {font-weight: bold;}
- /*----- INFO -----*/
- .info {
- font-size: var(--dateFontSize);
- text-transform: var(--dateTextTransform);
- display: flex;
- flex-direction: column;
- align-items: start;
- margin-top: 1.5em;
- border-radius: var(--borderRadius);
- {block:ifShowTopBorders}
- padding: 1em 0 0;
- border-top:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
- {/block:ifShowTopBorders}
- {block:ifShowAllBorders}
- padding: 1em;
- outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
- {/block:ifShowAllBorders}
- }
- .info a {
- display: inline-block; vertical-align: middle;}
- .info .date a {
- font-weight: var(--dateFontWeight);
- .info-month {
- font-weight: 600;
- }
- .info-hour {
- opacity: 60%;
- margin-left: 0.5rem;
- }
- }
- .info .date {
- display: flex;
- }
- .info a, .tags a {margin-right: 0.85em;}
- .tags a {
- color: var(--themeLinkColor);
- }
- .tags {
- text-transform: none;
- margin-top: 0.4em;
- -webkit-transition:0.7s ease;
- transition-behavior: allow-discrete;
- }
- .posts:hover .tags {
- -webkit-transition: all 0.5s ease-out;
- -moz-transition: all 0.5s ease-out;
- transition: all 0.5s ease-out;
- }
- .tags a {
- opacity: 65%;
- }
- .tags a:hover {
- opacity: 100%;
- color: var(--themeLinkHoverColor);
- }
- a.pinned-post {font-weight: bold; color: var(--themeLinkColor);}
- .likeb {
- position: relative;
- display: inline-block;
- margin-bottom: -1px;
- }
- .likeb .like_button iframe {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: 2;
- opacity: 0;
- }
- .like_button iframe {width: 100% !important; height: 100% !important;}
- .likeb .liked + .actual-button {color: var(--themeLinkColor);}
- .likeb .liked + .actual-button:after {content: 'd';}
- /*---- POST NOTES -----*/
- .notes {margin: {text:post margin}px 0;}
- ol.notes {
- max-width: 100%;
- padding: 0;
- margin: 2em 0 0 0;
- }
- ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
- ol.notes li.note img.avatar {
- margin-right: 1em;
- vertical-align: middle;
- display: inline-block;
- width: 1.25em;
- height: 1.25em;
- }
- /*---- CREDIT -----*/
- .maziekeen {
- background-color: var(--postsBackgroundColor);
- position: fixed;
- bottom: 20px;
- right: 20px;
- font-weight: bold;
- border-radius: var(--borderRadius);
- color: var(--themeLinkColor);
- padding: 1rem;
- display: flex;
- gap: 1em;
- align-items: center;
- }
- /* maziekeen's theme 221 - MASONRY NAVIGATION CSS PART */
- .masonry-navigation {
- width: 100%;
- border-bottom:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
- margin-bottom:15px;
- }
- .masonry-navigation:last-child {
- border:none;
- }
- .masonry-navigation-item.one-column {
- width: 100%;
- padding: 0 5px;
- margin-bottom: 10px;
- }
- .masonry-navigation-item.one-column ul {
- display: flex;
- flex-wrap: wrap;
- margin: 0;
- padding: 0;
- }
- /* if you have any problem with one colum lists (ul li) you edit here */
- .masonry-navigation-item.one-column ul li {
- margin: 4px 15px;
- padding: 0;
- }
- /* if they don't display two columns correctly, try to decrease the value on width: 240px */
- .masonry-navigation-item.two-columns {
- width: 240px;
- padding: 0 5px;
- margin-bottom: 10px;
- }
- /* if they don't display three columns correctly, try to decrease the value on width: 160px */
- .masonry-navigation-item.three-columns {
- width: 160px;
- padding: 0 5px;
- margin-bottom: 10px;
- }
- /* edit height: 215px to adjust the box height if you add the class scroll in the html */
- .masonry-navigation-item.scroll {
- height:215px;
- overflow-y: scroll;
- }
- /* maziekeen's theme 221 - MASONRY NAVIGATION CSS PART */
- {CustomCSS}
- </style>
- </head>
- <body>
- <main class="theme-container">
- <aside class="sidebar-container">
- <div class="sidebar-content">
- {block:ifSidebarTitle}
- <div class="sidebar-title">{Title}</div>
- {/block:ifSidebarTitle}
- {block:ifSidebarImage}
- <a href="/"><img src="https://static.tumblr.com/0siu224/bUqt4b10d/6-2.gif" id="side-img" alt="Sidebar image"/></a>
- {/block:ifSidebarImage}
- <nav class="sidebar-navigation">
- <ul class="sidebar-links">
- <li>
- <a href="{text:Home URL}">
- {text:Home Text}
- </a>
- </li>
- <li>
- <a href="{text:Ask URL}">
- {text:Ask Text}
- </a>
- </li>
- {block:ifSidebarArchiveLink}
- <li>
- <a href="{text:Archive URL}">
- {text:Archive Text}
- </a>
- </li>
- {/block:ifSidebarArchiveLink}
- {block:ifSidebarSubmitLink}
- <li>
- <a href="{text:Submit URL}">
- {text:Submit Text}
- </a>
- </li>
- {/block:ifSidebarSubmitLink}
- {block:ifSidebarPagesLink}
- {block:HasPages}
- {block:Pages}
- <li>
- <a href="{URL}">{Label}</a>
- </li>
- {/block:Pages}
- {/block:HasPages}
- {/block:ifSidebarPagesLink}
- {block:ifSidebarLink1}
- <li>
- <a href="{text:Sidebar Link 1 URL}">
- {text:Sidebar Link 1 Text}
- </a>
- </li>
- {/block:ifSidebarLink1}
- {block:ifSidebarLink2}
- <li>
- <a href="{text:Sidebar Link 2 URL}">
- {text:Sidebar Link 2 Text}
- </a>
- </li>
- {/block:ifSidebarLink2}
- {block:ifSidebarLink3}
- <li>
- <a href="{text:Sidebar Link 3 URL}">
- {text:Sidebar Link 3 Text}
- </a>
- </li>
- {/block:ifSidebarLink3}
- {block:ifSidebarLink4}
- <li>
- <a href="{text:Sidebar Link 4 URL}">
- {text:Sidebar Link 4 Text}
- </a>
- </li>
- {/block:ifSidebarLink4}
- </ul>
- </nav>
- {block:Description}
- <div id="description" class="description">
- <strong>luciane. 30s. she/her. brazil.</strong> i don't come here often these days cause i'm in a forever hiatus, but enjoy this mess, always a new obsession from time to time.
- </div>
- {/block:Description}
- <div id="page-navigation">
- {block:Pagination}
- <span class="pagination-links">
- {block:ifShowIconPagination}
- {block:PreviousPage}
- <a href="{PreviousPage}" title="{lang:Previous page}">
- <i class="feather" data-feather="chevron-left"></i>
- </a>
- {/block:PreviousPage}
- {block:NextPage}
- <a href="{NextPage}" title="{lang:Next page}">
- <i class="feather" data-feather="chevron-right"></i>
- </a>
- {/block:NextPage}
- {/block:ifShowIconPagination}
- {block:ifNotShowIconPagination}
- {block:PreviousPage}
- <a href="{PreviousPage}">
- {lang:Previous page}
- </a>
- {/block:PreviousPage}
- {block:NextPage}
- <a href="{NextPage}">
- {lang:Next page}
- </a>
- {/block:NextPage}
- {/block:ifNotShowIconPagination}
- </span>
- {/block:Pagination}
- {block:ifShowThemeToggle}
- <span class="navigation-toggle-theme">
- {block:ifNotShowThemeIconToggle}
- <div class="theme-toggle" aria-label="toggle dark & light mode" type="button" role="button">
- <span class="light-on" title="toggle dark mode">dark</span>
- <span class="light-off" title="toggle light mode">light</span>
- </div>
- {/block:ifNotShowThemeIconToggle}
- {block:ifShowThemeIconToggle}
- <div class="theme-toggle light-on" title="toggle dark mode" aria-label="toggle dark & light mode" type="button" role="button">
- <i class="feather" data-feather="moon"></i>
- </div>
- <div class="theme-toggle light-off" title="toggle light mode" aria-label="toggle dark & light mode" type="button" role="button">
- <i class="feather" data-feather="sun"></i>
- </div>
- </span>
- {/block:ifShowThemeIconToggle}
- {/block:ifShowThemeToggle}
- </div>
- </div>
- </aside>
- <section class="posts-container">
- {block:SearchPage}
- <article class="posts posts-day-page">
- {block:SearchResults}
- <p class="posts-tag-item">{lang:Search results for SearchQuery 2}</p>
- {/block:SearchResults}
- {block:NoSearchResults}
- <p class="posts-tag-item">{lang:Sorry no results for SearchQuery 2}</p>
- {/block:NoSearchResults}
- </article>
- {/block:SearchPage}
- {block:TagPage}
- <article class="posts posts-tag-page">
- <p class="posts-tag-item">{lang:Showing TagResultCount posts tagged Tag 2}</p>
- </article>
- {/block:TagPage}
- {block:Posts}
- <article class="posts-content">
- <article id="post-{PostID}" class="{posttype}-post posts">
- {block:Photo}
- <div class="legacy-photo"><img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos"></div>
- {/block:Photo}
- {block:Photoset}
- <div class="legacy-photoset">{Photoset}</div>
- {/block:Photoset}
- {block:Panorama}
- <div class="legacy-photo"><img src="{photourl-panorama}" alt="{photoalt}"></div>
- {/block:Panorama}
- {block:Quote}
- <div class="quote">
- "{Quote}"
- </div>
- <div class="source">
- -{Source}
- </div>
- {/block:Quote}
- {block:Chat}
- <ul class="chat">
- {block:Lines}
- <li>
- {block:Label}{Label}{/block:Label}
- {Line}
- </li>
- {/block:Lines}
- </ul>
- {/block:Chat}
- {block:link}
- <div class="npf-link-block">
- <a href="{URL}">
- {Name}
- </a>
- </div>
- {/block:link}
- {block:Video}
- {Video-500}
- {/block:Video}
- {block:Audio}
- {audioembed}
- {/block:Audio}
- {block:Answer}
- <div class="ask">
- <div class="question-wrapper">
- <i data-feather="mail" class="feather"></i>
- <span class="question">
- {Question}
- </span>
- </div>
- <div class="asker-wrapper">
- <i data-feather="message-circle"></i>
- <span class="ask-user">
- {lang:Asked by Asker 2}
- </span>
- </div>
- {block:Answerer}
- <div class="answer">
- {Answerer} answered: {Answer}
- </div>
- {/block:Answerer}
- {block:NotReblog}
- <div class="replies">
- {Replies}
- </div>
- {/block:NotReblog}
- </div>
- {/block:Answer}
- <div class="captions {block:notreblog} original-post {/block:notreblog}">
- {block:Text}
- {block:Title}
- <h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>
- {/block:Title}
- {block:NotReblog}
- <li class="caption text-caption">
- {Body}
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <li class="caption text-caption">
- <div class="username-content">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- </div>
- {Body}
- </li>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Text}
- {block:Caption}
- {block:NotReblog}
- <li class="caption">
- {Caption}
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <li class="caption">
- <div class="username-content">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- </div>
- {Body}
- </li>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Caption}
- </div>
- <div class="info">
- {block:Date}
- <div class="date">
- {block:PinnedPostLabel}
- <a href="{Permalink}" class="pinned-post">{PinnedPostLabel}</a>
- {/block:PinnedPostLabel}
- <a href="{Permalink}">
- <span class="info-month" title="{DayOfMonthWithZero}{DayOfMonthSuffix}, {Year}">{ShortMonth}</span>
- <span class="info-hour" title="{CapitalAmPm}">{12HourWithZero}:{Minutes}</span>
- </a>
- {block:PermalinkPage}
- <div class="reblog-link">
- {block:NotReblog}
- <a target="_blank" href="{Permalink}" title="Original post">{Name}</a>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <a target="_blank" href="{ReblogParentURL}" title="{lang:Reblogged from} {ReblogParentName}">{ReblogParentName}</a>
- {/block:RebloggedFrom}
- <a target="_blank" href="{ReblogRootURL}" title="{lang:Originally from ReblogRootName}">{ReblogRootName}</a>
- </div>
- {block:ifNotShowDateInformation}
- {block:NoteCount}
- <a href="{Permalink}" class="notecount" title="{NoteCountWithLabel}">{NoteCount}</a>
- {/block:NoteCount}
- <a href="{ReblogURL}" target="_blank">reblog</a>
- <a class="likeb" href="#">{LikeButton}<span class="actual-button">like</span></a>
- {/block:ifNotShowDateInformation}
- {/block:PermalinkPage}
- {block:ifShowDateInformation}
- {block:NoteCount}
- <a href="{Permalink}" class="notecount" title="{NoteCountWithLabel}">{NoteCount}</a>
- {/block:NoteCount}
- <a href="{ReblogURL}" target="_blank">reblog</a>
- <a class="likeb" href="#">{LikeButton}<span class="actual-button">like</span></a>
- {/block:ifShowDateInformation}
- </div>
- {/block:Date}
- {block:HasTags}
- <div class="tags">
- {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
- </div>
- {/block:HasTags}
- </div>
- {PostNotes}
- </article>
- </article>
- {/block:Posts}
- <!-- end of posts container -->
- </section>
- </main>
- <div class="maziekeen">
- <a class="scrolltop" href="javascript:;" id="scrollToTop" title="Scroll to top">
- <i data-feather="arrow-up" class="feather"></i>
- </a>
- <a href="/" title="theme 225 by maziekeen" id="credit">maziekeen</a>
- </div>
- </body>
- <!-- RESOURCES: feather icons / by: https://github.com/feathericons/feather
- uses: css/js -->
- <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
- <!-- RESOURCES: smooth scroll / by: https://github.com/gblazex/smoothscroll-for-websites
- uses: js -->
- <script
- src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.5.1/SmoothScroll.min.js"></script>
- <!-- RESOURCES: polyfill for css anchor positioning / by: https://github.com/oddbird/css-anchor-positioning
- uses: css/js -->
- <script
- src="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest"
- crossorigin="anonymous"
- defer
- >
- </script>
- <!-- RESOURCES: photoset npf / by: eggdesign https://github.com/cornetespoir/npf-theme-base/tree/main
- uses: html/css/js -->
- <script defer src="https://maziecodes.github.io/tumblr/themes/scripts/vendors/eggdesign/eggdesign-npf-reverse.min.js"></script>
- <!-- masonry navigation -->
- <script defer src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
- <script defer src="https://maziecodes.github.io/tumblr/themes/scripts/resources/note-count/note-count.min.js"></script>
- <script type="text/javascript">
- /* RESOURCES: feather icons / by: https://github.com/feathericons/feather
- uses: css/js */
- feather.replace();
- /* RESOURCES: tippyjs tooltips / by: https://atomiks.github.io/tippyjs/
- uses: css/js */
- tippy('a[title], span[title], button[title], div[title], i[title]', {
- theme: 'custom',
- arrow: false,
- zIndex: 9999999999,
- maxWidth: 300,
- content(reference) {
- const title = reference.getAttribute('title');
- reference.removeAttribute('title');
- return title;
- },
- });
- const themeToggleButtons = document.querySelectorAll(".theme-toggle");
- themeToggleButtons.forEach((btn) => {
- // Determine initial theme
- const storedTheme = localStorage.getItem("theme");
- // Set initial ARIA attributes
- btn.setAttribute("aria-label", storedTheme === "dark" ? "Enable light mode" : "Enable dark mode");
- btn.setAttribute("aria-pressed", storedTheme === "dark");
- // Set the initial theme on <html>
- document.documentElement.setAttribute("data-theme", storedTheme);
- // Click handler
- btn.addEventListener("click", function () {
- const currentTheme = document.documentElement.getAttribute("data-theme");
- const targetTheme = currentTheme === "light" ? "dark" : "light";
- // Snappy transition
- document.documentElement.classList.add("theme-transition");
- setTimeout(() => {
- document.documentElement.classList.remove("theme-transition");
- }, 50);
- // Apply new theme and store preference
- document.documentElement.setAttribute("data-theme", targetTheme);
- localStorage.setItem("theme", targetTheme);
- // Update ARIA attributes
- btn.setAttribute("aria-label", targetTheme === "dark" ? "Enable light mode" : "Enable dark mode");
- btn.setAttribute("aria-pressed", targetTheme === "dark");
- });
- });
- document.addEventListener('DOMContentLoaded', function () {
- var link = document.getElementById('scrollToTop');
- var isVisible = false; // estado interno para evitar trabalho desnecessário
- var isTransitioning = false; // evita conflitos durante transições
- // Scroll suave para o topo
- link.addEventListener('click', function (e) {
- e.preventDefault();
- window.scrollTo({ top: 0, behavior: 'smooth' });
- });
- // Função para mostrar com fade-in
- function show() {
- if (isVisible || isTransitioning) return;
- isTransitioning = true;
- // Garantir que o elemento entre no fluxo antes da transição
- link.style.display = 'block';
- // Forçar um reflow para o navegador aplicar o novo display
- // e reconhecer a transição de opacity 0 -> 1
- // eslint-disable-next-line no-unused-expressions
- link.offsetHeight;
- link.classList.add('is-visible');
- var onEnd = function (e) {
- if (e.propertyName === 'opacity') {
- link.removeEventListener('transitionend', onEnd);
- isVisible = true;
- isTransitioning = false;
- }
- };
- link.addEventListener('transitionend', onEnd, { once: false });
- }
- // Função para esconder com fade-out e depois remover do layout
- function hide() {
- if (!isVisible || isTransitioning) return;
- isTransitioning = true;
- link.classList.remove('is-visible');
- var onEnd = function (e) {
- if (e.propertyName === 'opacity') {
- link.style.display = 'none';
- link.removeEventListener('transitionend', onEnd);
- isVisible = false;
- isTransitioning = false;
- }
- };
- link.addEventListener('transitionend', onEnd, { once: false });
- }
- function updateVisibility() {
- var scrolled = window.pageYOffset || document.documentElement.scrollTop;
- if (scrolled <= 0) {
- hide();
- } else {
- show();
- }
- }
- // Estado inicial
- // Caso a página carregue já rolada, ajusta corretamente
- if ((window.pageYOffset || document.documentElement.scrollTop) > 0) {
- link.style.display = 'block';
- // Força estado final visível sem transição inicial
- link.classList.add('is-visible');
- isVisible = true;
- }
- window.addEventListener('scroll', updateVisibility, { passive: true });
- });
- document.addEventListener("DOMContentLoaded", () => {
- initNoteCountFormatting();
- // masonry navigation
- var elements = document.getElementsByClassName('masonry-navigation');
- var msnry;
- var nElements = elements.length;
- for(var i = 0; i < nElements; i++){
- msnry = new Masonry( elements[i], {
- // columnWidth: 268,
- gutter: 10,
- itemSelector: '.masonry-navigation-item',
- });
- }
- /* RESOURCES: photoset npf / by: eggdesign https://github.com/cornetespoir/npf-theme-base/tree/main
- uses: html/css/js */
- let posts = []
- {block:Posts}
- posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}})
- {/block:Posts}
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment