Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!-- theme by nuclearthemes || base code by seyche -->
- <!-- consider supporting me on ko-fi >> https://ko-fi.com/cameroni -->
- <!--
- || CREDITS ||
- • Base code from seyche, thank you!! >> https://seyche.tumblr.com/
- • Chat bubbles with Bubbly >> http://projects.verou.me/bubbly/
- • Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
- • Fonts from Google >> https://fonts.google.com/
- • Hidden tags by lmthemes >> https://lmthemes.tumblr.com/
- • Icons from Font Awesome >> https://fontawesome.com/
- • Tumblr controls fix by odeysseus >> https://odeysseus.tumblr.com/
- -->
- <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">
- <link href="https://fonts.googleapis.com/css?family=Courgette:400,400i,700,700i|Cabin:400,400i,700,700i|Nunito:400,400i,700,700i|Poppins:400,400i,700,700i|PT+Serif:400,400i,700,700i|Roboto+Slab:400,400i,700,700i|Work+Sans:400,400i,700,700i" rel="stylesheet">
- <script src="https://kit.fontawesome.com/802dca85f3.js" crossorigin="anonymous"></script>
- <!------------------------------- variables -------------------------------->
- <meta name="image:Menu" content=""/>
- <meta name="color:Background" content="#ffffff"/>
- <meta name="color:Title" content="#000000"/>
- <meta name="color:Text" content="#000000"/>
- <meta name="color:Menu" content="#f5f5f5"/>
- <meta name="color:Menu Icons" content="#b0b0b0"/>
- <meta name="color:Posts" content="#f5f5f5"/>
- <meta name="color:Accent 1" content="#cf8f8f"/>
- <meta name="color:Accent 2" content="#9e4444"/>
- <meta name="color:Link" content="#cf8f8f"/>
- <meta name="text:Post Margin" content="50"/>
- <meta name="select:font" title="Cabin" content="Cabin" />
- <meta name="select:font" title="Nunito" content="Nunito" />
- <meta name="select:font" title="Poppins" content="Poppins" />
- <meta name="select:font" title="PT Serif" content="PT Serif" />
- <meta name="select:font" title="Roboto Slab" content="Roboto Slab" />
- <meta name="select:font" title="Work Sans" content="Work Sans" />
- <meta name="select:font size" title="14px" content="14px" />
- <meta name="select:font size" title="15px" content="15px" />
- <meta name="select:font size" title="16px" content="16px" />
- <meta name="text:Home Link Hover" content="home"/>
- <meta name="text:Ask Link" content="ask"/>
- <meta name="text:Ask Link Hover" content="ask"/>
- <meta name="text:Archive Link" content="archive"/>
- <meta name="text:Archive Link Hover" content="archive"/>
- <meta name="text:Navigation Link Hover" content="nav"/>
- <meta name="text:Link 1 URL" content="/"/>
- <meta name="text:Link 1" content="link1"/>
- <meta name="text:Link 2 URL" content="/"/>
- <meta name="text:Link 2" content="link2"/>
- <meta name="text:Link 3 URL" content="/"/>
- <meta name="text:Link 3" content="link3"/>
- <style type="text/css">
- * {margin:0; padding:0;}
- /* ----------------------------------------------------------------------- */
- /* --------------------------- tumblr controls --------------------------- */
- .tmblr-iframe {
- filter: invert(100%);
- -o-filter: invert(100%);
- -moz-filter: invert(100%);
- -ms-filter: invert(100%);
- -webkit-filter: invert(100%);
- opacity: 0.2;
- position: fixed;
- right: 5px;
- top: 5px;
- transform: scale(0.7,0.7);
- transform-origin: 100% 0%;
- -ms-transform-origin: 100% 0%;
- -webkit-transform-origin: 100% 0%;
- transition: 0.4s;
- -o-transition: 0.4s;
- -moz-transition: 0.4s;
- -ms-transition: 0.4s;
- -webkit-transition: 0.4s;
- white-space: nowrap;
- }
- .tmblr-iframe:hover {
- opacity: 1;
- }
- .tmblr-iframe-compact .tmblr-iframe--unified-controls {
- z-index: 999999999!important;
- }
- /* ----------------------------------------------------------------------- */
- /* --------------------------- custom tooltips --------------------------- */
- .tippy-tooltip.custom-theme {
- background-color: {color:accent 2};
- border-radius: 0;
- color: {color:background};
- font-family: inherit;
- font-size: inherit;
- text-align: center;
- }
- /* ----------------------------------------------------------------------- */
- /* -------------------- custom selection & scrollbar --------------------- */
- ::-moz-selection {background: {color:background}; color: {color:accent 1};}
- ::selection {background: {color:background}; color: {color:accent 1};}
- ::-webkit-scrollbar-thumb {background: {color:accent 1}; border: 5px solid {color:background}; border-radius: 10px;}
- ::-webkit-scrollbar-track {background: {color:menu}; border: 7px solid {color:background};}
- ::-webkit-scrollbar {width: 15px;}
- /* ----------------------------------------------------------------------- */
- /* ----------------------------- page layout ----------------------------- */
- body {
- background-color: {color:background};
- color: {color:text};
- letter-spacing: 0.04em;
- line-height: 160%;
- font-family: '{select:font}';
- font-size: {select:font size};
- text-align: justify;
- word-wrap: break-word;
- }
- main {
- margin-bottom: {text:post margin}px;
- margin-left: auto;
- margin-right: auto;
- width: 500px;
- }
- section {
- position: relative;
- width: 500px;
- }
- article {
- background: {color:posts};
- margin: 0 auto;
- position: relative;
- width: 100%;
- }
- .posts {
- padding: 20px;
- width: calc(100% - 40px);
- width: -moz-calc(100% - 40px);
- width: -webkit-calc(100% - 40px);
- }
- .tumblr_video_container {max-height: 500px !important; overflow: hidden !important;}
- .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe {max-width: 100%;}
- /* ----------------------------------------------------------------------- */
- /* --------------------------------- menu -------------------------------- */
- #menu {
- background: {color:menu};
- font-family: '{select:font}';
- height: 235px;
- line-height: 26px;
- margin: 50px auto;
- text-align: center;
- width: 500px;
- }
- #menutitle {
- background: {color:accent 1};
- height: 95px;
- padding: 10px;
- width: calc(100% - 20px);
- width: -moz-calc(100% - 20px);
- width: -webkit-calc(100% - 20px);
- }
- {block:ifMenuImage}
- #menuimg {
- background: {color:menu};
- border-radius: 100%;
- margin: auto;
- padding: 6px;
- width: 50px;
- }
- {/block:ifMenuImage}
- .menutitle {
- font-size: 24px;
- font-weight: bold;
- letter-spacing: 2px;
- line-height: 145%;
- text-align: center;
- text-transform: uppercase;
- }
- .menutitle a {
- color: {color:background};
- }
- #menutext {
- font-size: {select:font size};
- height: 30px;
- overflow: auto;
- padding: 15px;
- text-align: center;
- width: calc(100% - 30px);
- width: -moz-calc(100% - 30px);
- width: -webkit-calc(100% - 30px);
- -moz-overflow-style: none;
- -ms-overflow-style: none;
- -o-overflow-style: none;
- }
- #menutext::-webkit-scrollbar {
- display: none;
- }
- #menunav {
- border-top: 2px solid {color:accent 1};
- height: 60px;
- }
- nav {
- height: calc(100% - 15px);
- height: -moz-calc(100% - 15px);
- height: -webkit-calc(100% - 15px);
- text-align: left;
- }
- nav a {
- color: {color:menu icons};
- font-size: 22px;
- padding: 16px 0;
- }
- nav a:hover {
- color: {color:accent 2};
- }
- .menubuttons {
- align-items: center;
- border-right: 2px solid {color:accent 1};
- display: flex;
- float: left;
- margin-top: -1px;
- height: 59px;
- justify-content: center;
- width: calc(25% - 1px);
- width: -moz-calc(25% - 1px);
- width: -webkit-calc(25% - 1px);
- }
- /* ----------------------------------------------------------------------- */
- /* ------------------------------- dropdown ------------------------------ */
- .dropdown {
- display: block;
- float: right;
- position: relative;
- width: calc(25% - 3px);
- width: -moz-calc(25% - 3px);
- width: -webkit-calc(25% - 3px);
- }
- .dropbtn {
- background: none;
- border: none;
- color: {color:menu icons};
- cursor: help;
- display: block;
- line-height: 160%;
- font-family: '{select:font}';
- font-size: 22px;
- outline: none;
- padding: 10px 0px;
- transition: 0.4s;
- -moz-transition: 0.4s;
- -ms-transition: 0.4s;
- -o-transition: 0.4s;
- -webkit-transition: 0.4s;
- width: 100%;
- }
- .dropbtn:hover, .dropbtn:focus {
- color: {color:accent 2};
- transition: 0.4;
- -moz-transition: 0.4s;
- -ms-transition: 0.4s;
- -o-transition: 0.4s;
- -webkit-transition: 0.4s;
- }
- .dropdown-content {
- background-color: {color:menu};
- display: none;
- overflow: auto;
- position: absolute;
- text-align: center;
- transform: translate(135px, -55px);
- -moz-transform: translate(135px, -55px);
- -ms-transform: translate(135px, -55px);
- -o-transform: translate(135px, -55px);
- -webkit-transform: translate(135px, -55px);
- width: 175px;
- z-index: 1;
- }
- .dropdown-content a {
- border: none;
- color: {color:accent 1};
- display: block;
- line-height: 160%;
- font-family: 'Cabin';
- font-size: {select:font size};
- padding: 7px 10px;
- text-decoration: none;
- transition: 0.4s;
- -moz-transition: 0.4s;
- -ms-transition: 0.4s;
- -o-transition: 0.4s;
- -webkit-transition: 0.4s;
- }
- .dropdown a:hover {
- background-color: {color:accent 1};
- color: {color:background};
- transition: 0.4s;
- -moz-transition: 0.4s;
- -ms-transition: 0.4s;
- -o-transition: 0.4s;
- -webkit-transition: 0.4s;
- }
- .show {
- display: block;
- }
- /* ----------------------------------------------------------------------- */
- /* -------------------------------- text --------------------------------- */
- a {
- color: {color:link};
- text-decoration: none;
- transition: 0.4s;
- -moz-transition: 0.4s;
- -ms-transition: 0.4s;
- -o-transition: 0.4s;
- -webkit-transition: 0.4s;
- }
- a:hover {
- color: {color:accent 2};
- transition: 0.4s;
- -moz-transition: 0.4s;
- -ms-transition: 0.4s;
- -o-transition: 0.4s;
- -webkit-transition: 0.4s;
- }
- p a {
- border-bottom: 2px solid {color:accent 2};
- }
- blockquote {
- border-left: 2px solid {color:accent 2};
- margin: 1em 0 1em 1.5em;
- padding: 0 0 0 1em;
- }
- h1, h2, h3, h4, h5, .title {
- color: {color:title};
- letter-spacing: 0.06em;
- line-height: 145%;
- font-weight: bold;
- }
- h1 a, h2 a, h3 a, h4 a, h5 a, .title a {color: {color:title};}
- h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .title a:hover {color: {color:accent 2}}
- h1, .title {font-size: 1.5em;}
- h2 {font-size: 1.3em; margin-top: 0.5em;}
- h3 {font-size: 1.25em;}
- h4 {font-size: 1.1em;}
- h5 {font-size: 1em;}
- small {font-size: 0.9em;}
- big {font-size: 1.1em;}
- hr {
- background-color: {color:accent 2};
- border: none;
- box-shadow: none;
- height: 1px;
- }
- pre {
- font-size: inherit;
- line-height: inherit;
- white-space: pre-wrap;
- white-space: -moz-pre-wrap;
- white-space: -o-pre-wrap;
- white-space: -pre-wrap;
- word-wrap: break-word;
- }
- li {list-style-type: circle; max-width: 100%;}
- /* ----------------------------------------------------------------------- */
- /* ------------------------- post information ---------------------------- */
- .topinformation {
- background: {color:accent 1};
- font-size: 0.8em;
- margin: {text:post margin}px auto 0 auto;
- padding: 10px 25px;
- }
- .topinformation a {color: {color:title};}
- .topinformation a:hover {color: {color:accent 2};}
- .info {
- align-items: flex-start;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- }
- .likeb {
- display: inline-block;
- height: 1.6em;
- margin-bottom: -1px;
- position: relative;
- }
- .likeb .like_button iframe {
- bottom: 0;
- left: 0;
- opacity: 0;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 2;
- }
- .like_button iframe {height: 100% !important; width: 100% !important;}
- .likeb .liked + .actual-button {color: #cf2929;}
- .likeb .liked + .actual-button:after {content: '';}
- .info-left a, .tags a {margin-right: 0.75em;}
- .post-controls a {margin-left: 0.75em;}
- .source-info li {list-style-type: none;}
- .source-info {
- border-left: 1px solid {color:accent 2};
- display: flex;
- font-style: italic;
- justify-content: space-between;
- margin-left: 5px;
- padding-left: 10px;
- width: 100%;
- }
- a.pinned-post {font-weight: bold; color: {color:accent 1};}
- .tag-day {font-weight: bold; color: {color:accent 1};}
- .tagday-page {
- background: none;
- color: {color:text};
- text-align: center;
- }
- .bottominformation {
- border-top: 2px solid {color:accent 2};
- font-size: 0.8em;
- height: 45px;
- }
- .bottomtags {
- background: {color:posts};
- float: left;
- max-height: 25px;
- overflow: hidden;
- padding: 10px 25px;
- transition: 1s;
- -moz-transition: 1s;
- -ms-transition: 1s;
- -o-transition: 1s;
- -webkit-transition: 1s;
- width: calc(100% - 50px);
- width: -moz-calc(100% - 50px);
- width: -webkit-calc(100% - 50px);
- }
- .bottomtags:hover {
- height: auto;
- max-height: 200px;
- transition: 1s;
- -moz-transition: 1s;
- -ms-transition: 1s;
- -o-transition: 1s;
- -webkit-transition: 1s;
- }
- .bottomnotes {
- background: {color:posts};
- border-left: 2px solid {color:accent 2};
- height: 25px;
- padding: 10px 25px;
- position: absolute;
- right: 0;
- text-align: right;
- width: calc(50% - 50px);
- width: -moz-calc(50% - 50px);
- width: -webkit-calc(50% - 50px);
- z-index: 9999;
- }
- .revealonhover {
- margin-top: 1em;
- font-style: italic;
- }
- /* ----------------------------------------------------------------------- */
- /* ---------------------------- text posts ------------------------------- */
- h1.post-title {
- border-bottom: 1px solid {color:title};
- margin-bottom: 10px;
- margin-top: 0;
- padding-bottom: 0.2em;
- text-align: center;
- text-transform: uppercase;
- }
- /* ----------------------------------------------------------------------- */
- /* ----------------------------- captions -------------------------------- */
- .caption {list-style-type: none; margin-top: 1em;}
- .caption p {margin-bottom: 1em;}
- .caption p:last-of-type {margin-bottom: 0;}
- .caption li {margin-left: 1.5em; padding-left: 1em;}
- .caption li:last-of-type {margin-bottom: 1em;}
- .caption img {margin-bottom: 10px;}
- .original-caption p:first-of-type {margin-top: 0;}
- .text-caption:first-of-type {margin-top: 0;}
- .caption iframe, .caption img {max-width: 100%;}
- p.tmblr-attribution {margin-top: 1em !important;}
- .user-icon {
- border-radius: 100%;
- display: inline-block;
- height: 2em;
- margin-right: 0.5em;
- vertical-align: middle;
- width: 2em;
- }
- .username {
- display: inline-block;
- font-weight: bold;
- margin-top: 1px;
- vertical-align: top;
- }
- .deactive::after {
- color: {color:text};
- content: '(deactivated)';
- margin-left: 1em;
- opacity: 0.75;
- }
- /* ----------------------------------------------------------------------- */
- /* ---------------------------- quote posts ------------------------------ */
- .quote, p.npf_quote {
- border: 1px solid {color:link};
- border-bottom: none;
- font-family: 'Courgette';
- font-size: 1.25em;
- line-height: 160%;
- padding: 25px 10px;
- text-align: center;
- }
- .quote p:first-of-type {margin-top: 0;}
- .quote p:last-of-type {margin-bottom: 0;}
- p.npf_quote {font-family: inherit; margin-bottom: 1em;}
- .source {
- border: 1px solid {color:link};
- border-top: none;
- padding: 0px 20px 20px 0px;
- text-align: right;
- text-transform: uppercase;
- }
- /* ----------------------------------------------------------------------- */
- /* ----------------------------- chat posts ------------------------------ */
- p.npf_chat {font-family: inherit; margin-top: 1em;}
- p.npf_chat b {font-family: inherit;}
- .chat {
- font-size: 1.1em;
- margin: 0;
- padding: 0;
- padding-bottom: 15px;
- }
- .chat li {
- border-radius: 20px;
- list-style-type: none;
- margin-bottom: 10px;
- margin-top: 1em;
- padding: 10px 20px;
- }
- .chat li:first-of-type {margin-top: 0;}
- .chat li:nth-of-type(odd) {
- border: 4px solid {color:accent 1};
- margin-left: 25%;
- position: relative;
- text-align: right;
- }
- .chat li:nth-of-type(odd):after {
- border: 30px solid transparent;
- border-bottom: 0;
- border-right: 0;
- border-top-color: {color:accent 1};
- bottom: 0;
- content: '';
- height: 0;
- left: 50%;
- margin-bottom: -30px;
- margin-left: 35%;
- position: absolute;
- width: 0;
- }
- .chat li:nth-of-type(even) {
- border: 4px solid {color:link};
- margin-right: 25%;
- position: relative;
- }
- .chat li:nth-of-type(even):after {
- border: 30px solid transparent;
- border-bottom: 0;
- border-left: 0;
- border-top-color: {color:link};
- bottom: 0;
- content: '';
- height: 0;
- left: 50%;
- margin-bottom: -30px;
- margin-left: -45%;
- position: absolute;
- width: 0;
- }
- .chatlabel {
- font-style: italic;
- text-transform: uppercase;
- }
- /* ----------------------------------------------------------------------- */
- /* ----------------------------- ask posts ------------------------------- */
- .question {
- background-color: {color:background};
- border-radius: 20px;
- padding: 20px 20px 30px 20px;
- }
- .asker {
- color: {color:link};
- margin-bottom: 10px;
- text-transform: uppercase;
- }
- .asker-question {
- background-color: {color:posts};
- border-radius: 20px;
- margin-top: 1em;
- padding: 10px 20px;
- width: 70%;
- }
- .asker-question p:first-of-type {margin-top: 0;}
- .asker-question p:last-of-type {margin-bottom: 0;}
- .asker-pic {
- border: 4px solid {color:posts};
- border-radius: 100%;
- float: right;
- margin: 0px;
- max-width: 40px;
- padding: 5px;
- }
- .answer {
- background-color: {color:posts};
- border-radius: 20px;
- padding: 20px 20px 30px 20px;
- }
- .answerer-answer img {
- border-radius: 20px;
- margin: 10px 0;
- }
- .answerer {
- color: {color:link};
- margin-bottom: 10px;
- text-align: right;
- text-transform: uppercase;
- }
- .answerer-answer {
- background-color: {color:background};
- border-radius: 20px;
- margin: 0px 0px 0px 19%;
- padding: 10px 20px;
- }
- .answerer-pic {
- border: 4px solid {color:background};
- border-radius: 100%;
- float: left;
- margin: 0px;
- max-width: 40px;
- padding: 5px;
- }
- /* ----------------------------------------------------------------------- */
- /* ---------------------------- link posts ------------------------------- */
- a.link-wrap {border: 1px solid {color:accent 2}; display: block;}
- .link {padding: 2em;}
- .link-host, .link-txt {margin-top: 1.5em;}
- .npf-link-block {
- background-color: initial;
- border-radius: 0;
- margin-top: 1.5em;
- }
- .npf-link-block .poster .title {padding: 1.5em;}
- .npf-link-block.no-poster .title {padding: 1.5em 1.5em 0 1.5em;}
- .npf-link-block .title {border-bottom: none; font-size: 1.25em;}
- .npf-link-block .bottom {padding: 1.5em !important;}
- /* ----------------------------------------------------------------------- */
- /* --------------------------- picture posts ----------------------------- */
- img {
- display: block;
- height: auto;
- margin: 0;
- max-width: 100%;
- }
- .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 {
- border-radius: 0 !important;
- box-shadow: none !important;
- max-width: none;
- }
- #tumblr_lightbox_caption, .lightbox-caption {
- color: #fff !important;
- font-family: inherit;
- margin-top: 1em !important;
- }
- .post-content div.npf_row, .post div.npf_row, body div.npf_row {
- margin-left: 0 !important;
- margin-right: 0 !important;
- }
- /* ----------------------------------------------------------------------- */
- /* ---------------------------- audio posts ------------------------------ */
- .audiopost {border: 1px solid {color:accent 1}; padding: 2em;}
- .audiobox {
- background-color: #f2f2f2;
- border-radius: 50%;
- margin: 28px 0 0 28px;
- position: absolute;
- z-index: 3;
- }
- .button {
- height: 30px;
- margin: 7px;
- overflow: hidden;
- position: relative;
- width: 30px;
- z-index: 2;
- }
- .album-art {
- display: inline-block;
- float: left;
- height: 100px;
- vertical-align: middle;
- width: 100px;
- z-index: 1;
- }
- .audioinfo {
- box-sizing: border-box;
- display: inline-block;
- display: flex;
- flex-direction: column;
- height: 100px;
- justify-content: center;
- padding-left: 130px;
- }
- .audioinfo li {list-style-type: none;}
- .track {font-weight: bold;}
- .spotify_audio_player {height: 80px!important;}
- .soundcloud_audio_player {height: 150px!important; width: 100%!important;}
- /* ----------------------------------------------------------------------- */
- /* ------------------------------- notes --------------------------------- */
- .notes {margin: {text:post margin}px 0;}
- ol.notes {
- margin: 2em 0 0 0;
- max-width: 100%;
- padding: 0;
- }
- ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
- ol.notes li.note img.avatar {
- border-radius: 50%;
- display: inline-block;
- height: 1.25em;
- margin-right: 1em;
- vertical-align: middle;
- width: 1.25em;
- }
- /* ----------------------------------------------------------------------- */
- /* ----------------------------- pagination ------------------------------ */
- #page-navigation {
- margin-top: {text:post margin}px;
- padding: 20px 0;
- text-align: center;
- }
- #page-navigation a {margin: 0 0.5em;}
- .current-page {
- color: {color:accent 1};
- font-weight: bold;
- margin: 0 0.5em;
- }
- /* ----------------------------------------------------------------------- */
- /* ------------------------------- credits ------------------------------- */
- #credit, #othercredit {
- background-color: {color:background};
- color: {color:accent 1};
- bottom: 0;
- font-size: 20px;
- font-style: italic;
- margin: 10px;
- padding: 7px 1px;
- position: fixed;
- text-align: center;
- transition: 0.4s;
- -moz-transition: 0.4s;
- -ms-transition: 0.4s;
- -o-transition: 0.4s;
- -webkit-transition: 0.4s;
- width: 40px;
- }
- #credit {padding: 7px 1px; right: 0;}
- #othercredit {left: 0; padding: 7px 1px 7px 2px;}
- #credit:hover, #othercredit:hover {
- background-color: {color:accent 1};
- color: {color:background};
- transition: 0.4s;
- -moz-transition: 0.4s;
- -ms-transition: 0.4s;
- -o-transition: 0.4s;
- -webkit-transition: 0.4s;
- }
- /* ----------------------------------------------------------------------- */
- /* ----------------------------- responsive ------------------------------ */
- @media only screen and (max-width: 1100px) { }
- @media only screen and (max-width: 550px) {
- main, section, #menu {width: 450px;}
- nav a {}
- .dropbtn {}
- .dropdown-content {
- transform: translate(-65px, 0px);
- -moz-transform: translate(-65px, 0px);
- -ms-transform: translate(-65px, 0px);
- -o-transform: translate(-65px, 0px);
- -webkit-transform: translate(-65px, 0px);
- }
- .dropbtn i {
- transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- -o-transform: rotate(90deg);
- -webkit-transform: rotate(90deg);
- }
- }
- {CustomCSS}
- </style>
- </head>
- <body>
- <!--------------------------- START MAIN CONTENT---------------------------->
- <main>
- <!----------------------------- start sidebar ------------------------------>
- <aside id="menu">
- <div id="menutitle">
- {block:ifMenuImage}
- <a href="/"><img src="{image:Menu}" id="menuimg" alt="Menu image" title="{Name}"/></a>
- {/block:ifMenuImage}
- <div class="menutitle"><a href="/">{Title}</a></div>
- </div>
- <div id="menutext">
- {block:Description}<div id="description">{Description}</div>{/block:Description}
- </div>
- <div id="menunav">
- <nav>
- <div class="menubuttons"><a href="/" title="{text:Home Link Hover}"><i class="fas fa-home"></i></a></div>
- <div class="menubuttons"><a href="/{text:Ask Link}" title="{text:Ask Link Hover}"><i class="fas fa-envelope"></i></a></div>
- <div class="menubuttons"><a href="/{text:Archive Link}" title="{text:Archive Link Hover}"><i class="fas fa-folder"></i></a></div>
- <div class="dropdown">
- <button onclick="dropDownMenu()" class="dropbtn" title="{text:Navigation Link Hover}">
- <i class="fas fa-chevron-circle-right"></i>
- </button>
- <div id="myDropdown" class="dropdown-content">
- {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
- {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
- {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
- {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
- </div>
- </div>
- </nav>
- </div>
- </aside>
- <!------------------------------ end sidebar ------------------------------->
- <!------------------------- start post container --------------------------->
- <section>
- <!------------------------ start tags / day pages -------------------------->
- {block:TagPage}
- <article class="tagday-page">
- Viewing posts filed under <span class="tag-day">#{Tag}</span>
- </article>
- {/block:TagPage}
- {block:DayPage}
- <article class="tagday-page">
- Viewing posts made on <span class="tag-day">{Month} {DayOfMonth}, {Year}</span>
- </article>
- {/block:DayPage}
- <!------------------------- end tags / day pages --------------------------->
- <!----------------------------- start posts -------------------------------->
- {block:Posts}
- <!--------------------------- start top info ------------------------------->
- <div class="topinformation">
- {block:Date}
- <div class="info">
- <div class="info-left">
- {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post">{PinnedPostLabel}</a>{/block:PinnedPostLabel}
- <a href="{Permalink}"><i class="fas fa-clock"></i> {TimeAgo}</a>
- {block:PermalinkPage}
- <div class="source-info">
- {block:RebloggedFrom}
- <li><i class="fas fa-sync"></i> <a href="{ReblogParentURL}">{ReblogParentName}</a></li>
- <li><i class="fas fa-user"></i> <a href="{ReblogRootURL}">{ReblogRootName}</a></li>
- {/block:RebloggedFrom}
- {block:ContentSource}<li><i class="fas fa-map-marker-alt"></i> <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}
- </div>
- {/block:PermalinkPage}
- </div>
- <div class="post-controls">
- <a href="{ReblogURL}" target="_blank" title="reblog"><i class="fas fa-redo-alt"></i></a>
- <a class="likeb" href="#" title="like">{LikeButton}<span class="actual-button"><i class="fas fa-heart"></i></span></a>
- </div>
- </div>
- {/block:Date}
- </div>
- <!----------------------------- end top info ------------------------------->
- <article class="posts" id="{PostID}">
- <!--------------------------- start text post ------------------------------>
- {block:Text}
- {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
- {block:NotReblog}
- <li class="caption original-caption text-caption">
- <div class="caption-text">{Body}</div>
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <div class="reblog-wrap">
- {block:Reblogs}
- <li class="caption text-caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}">
- <a href="{Permalink}">{Username}</a>
- </div>
- <div class="caption-text">{Body}</div>
- </li>
- {/block:Reblogs}
- </div>
- {/block:RebloggedFrom}
- {/block:Text}
- <!---------------------------- end text post ------------------------------->
- <!-------------------------- start quote post ------------------------------>
- {block:Quote}
- <div class="quote">
- <i class="fas fa-quote-left"></i> {Quote} <i class="fas fa-quote-right"></i>
- </div>
- {block:Source}<div class="source">- {Source}</div>{/block:Source}
- {/block:Quote}
- <!--------------------------- end quote post ------------------------------->
- <!--------------------------- start chat post ------------------------------>
- {block:Chat}
- {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
- <ul class="chat">
- {block:Lines}
- <li>
- {block:Label}<div class="chatlabel">{Label}</div>{/block:Label}
- <div class="chatline">{Line}</div>
- </li>
- {/block:Lines}
- </ul>
- {/block:Chat}
- <!---------------------------- end chat post ------------------------------->
- <!--------------------------- start ask post ------------------------------->
- {block:Answer}
- <div class="question">
- <img class="asker-pic" src="{AskerPortraitURL-128}">
- <div class="asker">{Asker} said</div>
- <div class="asker-question">{Question}</div>
- </div>
- {block:Answerer}
- <div class="answer">
- <img class="answerer-pic" src="{AnswererPortraitURL-128}">
- <div class="answerer"><a href="{Permalink}">{Answerer} said</a></div>
- <div class="answerer-answer">{Answer}</div>
- </div>
- {/block:Answerer}
- {block:NotReblog}
- <li class="caption original-caption">
- <div class="caption-text">{Replies}</div>
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <div class="reblog-wrap">
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- <div class="caption-text">{Body}</div>
- </li>
- {/block:Reblogs}
- </div>
- {/block:RebloggedFrom}
- {/block:Answer}
- <!---------------------------- end ask post -------------------------------->
- <!-------------------------- start link post ------------------------------->
- {block:Link}
- <a href="{URL}" class="link-wrap">
- {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
- <div class="link">
- <div class="title">{Name}</div>
- {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
- {block:Host}<div class="link-host">{Host}</div>{/block:Host}
- </div>
- </a>
- {block:Description}
- {block:NotReblog}
- <li class="caption original-caption">
- <div class="caption-text">{Description}</div>
- </li>
- {/block:NotReblog}
- {/block:Description}
- {block:RebloggedFrom}
- <div class="reblog-wrap">
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- <div class="caption-text">{Body}</div>
- </li>
- {/block:Reblogs}
- </div>
- {/block:RebloggedFrom}
- {/block:Link}
- <!--------------------------- end link post -------------------------------->
- <!---------------------- start photo & video post -------------------------->
- {block:Photo}
- <div class="photo">
- {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
- </div>
- {block:Caption}
- {block:NotReblog}
- <li class="caption original-caption">
- <div class="caption-text">{Caption}</div>
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <div class="reblog-wrap">
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- <div class="caption-text">{Body}</div>
- </li>
- {/block:Reblogs}
- </div>
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Photo}
- {block:Photoset}
- <div class="photo">{Photoset-700}</div>
- {block:Caption}
- {block:NotReblog}
- <li class="caption original-caption">
- <div class="caption-text">{Caption}</div>
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <div class="reblog-wrap">
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- <div class="caption-text">{Body}</div>
- </li>
- {/block:Reblogs}
- </div>
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Photoset}
- {block:Video}
- <div class="video">{Video-500}</div>
- {block:Caption}
- {block:NotReblog}
- <li class="caption original-caption">
- <div class="caption-text">{Caption}</div>
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <div class="reblog-wrap">
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- <div class="caption-text">{Body}</div>
- </li>
- {/block:Reblogs}
- </div>
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Video}
- <!----------------------- end photo & video post --------------------------->
- <!-------------------------- start audio post ------------------------------>
- {block:Audio}
- <div class="audiopost">
- <div class="audiobox"><div class="button">
- {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
- </div></div>
- {block:AlbumArt}
- <img src="{AlbumArtURL}" class="album-art">
- {/block:AlbumArt}
- <div class="audioinfo">
- {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
- {block:Artist}<li>{Artist}</li>{/block:Artist}
- {block:Album}<li>{Album}</li>{/block:Album}
- </div>
- </div>
- {block:Caption}
- {block:NotReblog}
- <li class="caption original-caption">
- <div class="caption-text">{Caption}</div>
- </li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <div class="reblog-wrap">
- {block:Reblogs}
- <li class="caption">
- <img src="{PortraitURL-64}" class="user-icon">
- <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
- <div class="caption-text">{Body}</div>
- </li>
- {/block:Reblogs}
- </div>
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Audio}
- <!--------------------------- end audio post ------------------------------->
- </article>
- <!-------------------------- start bottom info ----------------------------->
- <div class="bottominformation">
- {block:Date}
- <div class="bottomtags">
- <span style="float:left;margin-right:8px"><i class="fas fa-tags"></i></span>
- {block:HasTags}
- <div class="tags">
- show tags
- <div class="revealonhover">{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>
- </div>
- {/block:HasTags}
- </div>
- <div class="bottomnotes">
- <span style="float:right;margin-left:8px"><i class="fas fa-comments"></i></span>
- {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
- </div>
- {/block:Date}
- </div>
- <!--------------------------- end bottom info ------------------------------>
- {block:PermalinkPage}{block:Date}
- {block:NoteCount}{block:PostNotes}
- <div class="notes">
- <div class="title">{NoteCountWithLabel}</div>
- {PostNotes-64}
- </div>
- {/block:PostNotes}{/block:NoteCount}
- {/block:Date}{/block:PermalinkPage}
- {/block:Posts}
- </section>
- <!-------------------------- end post container ---------------------------->
- <!--------------------------- start pagination ----------------------------->
- {block:Pagination}
- <article id="page-navigation">
- {block:PreviousPage}<a href="{PreviousPage}"><i class="fas fa-arrow-left"></i></a>{/block:PreviousPage}
- {block:JumpPagination length="5"}
- {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
- {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
- {/block:JumpPagination}
- {block:NextPage}<a href="{NextPage}"><i class="fas fa-arrow-right"></i></a>{/block:NextPage}
- </article>
- {/block:Pagination}
- <!---------------------------- end pagination ------------------------------>
- </main>
- <!---------------------------- END MAIN CONTENT----------------------------->
- <!-- don't edit beyond this point please! colors can be modified in <style> -->
- <a id="othercredit" target="blank" title="base code by seyche" href="https://seyche.tumblr.com/">&.</a>
- <a id="credit" target="blank" title="theme by bones" href="https://nuclearthemes.tumblr.com/"><i class="fas fa-skull"></i></a>
- <script src="https://unpkg.com/popper.js@1"></script>
- <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
- <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
- <script>
- function dropDownMenu() {
- document.getElementById("myDropdown").classList.toggle("show");
- }
- window.onclick = function(event) {
- if (!event.target.matches('.dropbtn')) {
- var dropdowns = document.getElementsByClassName("dropdown-content");
- var i;
- for (i = 0; i < dropdowns.length; i++) {
- var openDropdown = dropdowns[i];
- if (openDropdown.classList.contains('show')) {
- openDropdown.classList.remove('show');
- }
- }
- }
- }
- tippy('[title]', {
- theme: 'custom',
- arrow: false,
- delay: [200, 0],
- zIndex: 9999999999,
- maxWidth: 300,
- content(reference) {
- const title = reference.getAttribute('title');
- reference.removeAttribute('title');
- return title;
- },
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment