Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <!--
- ESPERANTO
- THEME #10 by silbrigthemes
- A theme inspired by Esperanto, a language meant to bring people all over the globe together! Today, on the 15th December, we celebrate the Zamenhof Day (Zamenhofa Tago) to remember the creator of Esperanto, Ludwik L. Zamenhof.
- Rules:
- 1) Do not steal (parts of) the code.
- 2) Do not redistribute on other websites.
- 3) Do not claim as your own.
- 4) Do not edit beyond recognition.
- 5) Do not alter or delete the credit.
- Useful comments to this code have been made. There is customization guide which can be accessed via esperantotheme.tumblr.com/customization-guide.
- If you need any help for a problem that is not listed in the customization guide or where you cannot find a solution, feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
- Amuziĝu!
- -->
- <head>
- <meta charset="utf-16">
- <title>{Title}</title>
- {block:Description}
- <meta name="description" content="{MetaDescription}" />
- {/block:Description}
- <link rel="shortcut icon" href="{Favicon}"/>
- <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
- <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
- <!-- Necessary for the theme to be responsive. -->
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- "Honeybee" icon font, by @themehive. -->
- <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
- <!-- Necessary for the scripts to work. -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <!-- Video Resizing Scripts by @shythemes -->
- <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
- <!-- Changes the toolbar color on mobile. -->
- <meta name="theme-color" content="{color:Background}"/>
- <!-- Tooltip Script -->
- <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:200,
- tip_fade_speed:300
- }
- );
- });
- })(jQuery);
- </script>
- <!-- Change Audio iframe color script, by @roxiesthemes. -->
- <script>
- $(document).ready(function() {
- $('iframe.tumblr_audio_player').load( function() {
- $('iframe.tumblr_audio_player').contents().find("head")
- .append($("<style type='text/css'> .audio-player{background:{color:Posts} !important} </style>"));
- });
- });
- </script>
- <!-- Other fonts. -->
- <!-- Roboto Mono -->
- <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
- <!-- Cormorant Garamond -->
- <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
- <!-- Dancing Script -->
- <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700&subset=latin-ext" rel="stylesheet">
- <meta name="select:Ordered List" content="decimal" title="decimal"/>
- <meta name="select:Ordered List" content="lower-greek" title="lower greek"/>
- <meta name="select:Ordered List" content="lower-latin" title="lower latin"/>
- <meta name="select:Ordered List" content="upper-roman" title="upper roman"/>
- <meta name="if:Show Link 1" content="0"/>
- <meta name="if:Show Link 2" content="0"/>
- <meta name="if:Show Link 3" content="0"/>
- <meta name="if:Show Link 4" content="0"/>
- <meta name="if:Show Link 5" content="0"/>
- <meta name="if:Show Captions" content="0"/>
- <meta name="text:Custom URL 1" content=""/>
- <meta name="text:Custom Link 1" content="Link 1"/>
- <meta name="text:Custom Icon 1" content="link-o"/>
- <meta name="text:Custom URL 2" content=""/>
- <meta name="text:Custom Link 2" content="Link 2"/>
- <meta name="text:Custom Icon 2" content="link-o"/>
- <meta name="text:Custom URL 3" content=""/>
- <meta name="text:Custom Link 3" content="Link 3"/>
- <meta name="text:Custom Icon 3" content="link-o"/>
- <meta name="text:Custom URL 4" content=""/>
- <meta name="text:Custom Link 4" content="Link 4"/>
- <meta name="text:Custom Icon 4" content="link-o"/>
- <meta name="text:Custom URL 5" content=""/>
- <meta name="text:Custom Link 5" content="Link 5"/>
- <meta name="text:Custom Icon 5" content="link-o"/>
- <meta name="text:Unordered List" content="e338"/>
- <meta name="select:Font" content="Open Sans" title="Open Sans"/>
- <meta name="select:Font" content="Roboto" title="Roboto"/>
- <meta name="select:Font" content="Source Sans Pro" title="Source Sans Pro"/>
- <meta name="select:Font Size" content="1em" title="16px"/>
- <meta name="select:Font Size" content="14px" title="14px"/>
- <meta name="select:Font Size" content="12px" title="12px"/>
- <meta name="color:Background" content="#009900"/>
- <meta name="color:Bold" content="#555"/>
- <meta name="color:Italic" content="#111"/>
- <meta name="color:Posts" content="#fff"/>
- <meta name="color:Text" content="#333"/>
- <style>
- body{
- margin:0;
- top:0;
- left:0;
- font-size:{select:Font Size};
- font-family:"{select:Font}", Verdana;
- background-color:{color:Background};
- color:{color:Text};
- overflow-x:hidden;
- }
- /* Custom Scrollbar */
- ::-webkit-scrollbar{
- width:10px;
- background-color:{color:Posts};
- border:4px solid {color:Background};
- }
- ::-webkit-scrollbar-thumb{
- width:10px;
- background-color:{color:Background};
- border:4px solid {color:Posts};
- border-radius:5px;
- }
- /* Custom Text Selection */
- ::selection{
- background-color:{color:Background};
- color:{color:Posts};
- text-decoration:none;
- text-shadow:none;
- }
- ::-moz-selection{
- background-color:{color:Background};
- color:{color:Posts};
- text-decoration:none;
- text-shadow:none;
- }
- ::-o-selection{
- background-color:{color:Background};
- color:{color:Posts};
- text-decoration:none;
- text-shadow:none;
- }
- ::-webkit-selection{
- background-color:{color:Background};
- color:{color:Posts};
- text-decoration:none;
- text-shadow:none;
- }
- /* Custom Tooltips */
- #s-m-t-tooltip{
- max-width:300px;
- margin:15px;
- padding:0.5em;
- background-color: {color:Posts};
- color:{color:Background};
- z-index:9999999999999;
- border:2px solid {color:Background};
- font-size:calc({select:Font Size} - 4px);
- text-transform:uppercase;
- font-weight:300;
- }
- a{
- text-decoration:none;
- color:{color:Background};
- border-bottom:2px solid {color:Background};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- a:hover{
- color:{color:Text};
- border-bottom:2px solid {color:Text};
- cursor:pointer;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- b, strong{
- font-weight:700;
- color:{color:Bold};
- }
- i, em{
- font-weight:300;
- font-style:italic;
- color:{color:Italic};
- }
- small{
- font-size:calc({select:Font Size} - 2px);
- }
- hr{
- width:80%;
- height:4px;
- border:none;
- background-color:{color:Background};
- }
- mark{
- padding:0.25em 0.5em;
- background-color:{color:Background};
- color:{color:Posts};
- line-height:1.75em;
- border-radius:1em;
- }
- p:empty{
- display:none;
- }
- u{
- text-decoration:none;
- border-bottom:2px solid {color:Text};
- }
- pre{
- font-size:calc({select:Font Size} - 2px);
- font-family:"Roboto Mono";
- padding-left:0.25em;
- padding-top:0.125em;
- padding-right:0.25em;
- padding-bottom:0.125em;
- color:{color:Background};
- word-wrap:break-all;
- white-space:pre-wrap;
- }
- /* Lists */
- /* Unordered List */
- ul{
- list-style-type:none;
- }
- ul li:before{
- content:"\{text:Unordered List}";
- font-family:"honeybee";
- font-weight:300;
- color:{color:Background};
- position:relative;
- font-size:{select:Font Size};
- z-index:10!important;
- margin-right:0.25em;
- margin-left:-1.5em;
- }
- /* Ordered List */
- ol{
- list-style-type:{select:Ordered List};
- }
- /* HEADINGS */
- /* Post Title */
- .title{
- font-size:calc(2 * {select:Font Size});
- color:{color:Background};
- border-bottom:4px solid {color:Background};
- text-align:center;
- padding-bottom:4px;
- margin-bottom:4px;
- width:80%;
- margin-left:10%;
- font-weight:700;
- font-family:"Raleway", Verdana;
- }
- /* Primary Heading */
- h1{
- font-size:calc(1.5 * {select:Font Size});
- font-weight:400;
- }
- /* Secondary Heading */
- h2{
- font-size:calc(1.25 * {select:Font Size});
- font-weight:300;
- }
- /* COLORED TEXT */
- /* Red Text */
- .npf_color_joey {
- color:#df031a;
- }
- /* Orange Text */
- .npf_color_monica {
- color:#f27603;
- }
- /* Yellow Text */
- .npf_color_phoebe {
- color:#f2c603;
- }
- /* Green Text */
- .npf_color_ross {
- color:#009900;
- }
- /* Blue Text */
- .npf_color_rachel {
- color:#0340df;
- }
- /* Purple Text */
- .npf_color_chandler {
- color:#7d03ff;
- }
- /* Pink Text */
- .npf_color_niles {
- color: #df03bf;
- }
- /** SPECIAL FONTS **/
- /* Quirky Font */
- p.npf_quirky{
- font-family: 'Dancing Script', cursive;
- font-size:calc(1.5 * {select:Font Size});
- }
- /* Chat Font */
- p.npf_chat{
- font-family:Courier;
- }
- /* Quote Font */
- p.npf_quote{
- font-family:"Cormorant Garamond", "Palatino";
- font-size:calc(1.5 * {select:Font Size});
- }
- #box{
- width:350px;
- height:350px;
- background-color:{color:Posts};
- position:fixed;
- top:0;
- left:0;
- display:flex;
- align-items:center;
- justify-content:center;
- }
- #star-five {
- margin: 50px 0;
- position: relative;
- display: block;
- color: {color:Background};
- width: 0px;
- height: 0px;
- border-right: 100px solid transparent;
- border-bottom: 70px solid {color:Background};
- border-left: 100px solid transparent;
- -moz-transform: rotate(35deg);
- -webkit-transform: rotate(35deg);
- -ms-transform: rotate(35deg);
- -o-transform: rotate(35deg);
- }
- #star-five:before {
- border-bottom: 80px solid {color:Background};
- border-left: 30px solid transparent;
- border-right: 30px solid transparent;
- position: absolute;
- height: 0;
- width: 0;
- top: -45px;
- left: -65px;
- display: block;
- content: '';
- -webkit-transform: rotate(-35deg);
- -moz-transform: rotate(-35deg);
- -ms-transform: rotate(-35deg);
- -o-transform: rotate(-35deg);
- }
- #star-five:after {
- position: absolute;
- display: block;
- color: {color:Background};
- top: 3px;
- left: -105px;
- width: 0px;
- height: 0px;
- border-right: 100px solid transparent;
- border-bottom: 70px solid {color:Background};
- border-left: 100px solid transparent;
- -webkit-transform: rotate(-70deg);
- -moz-transform: rotate(-70deg);
- -ms-transform: rotate(-70deg);
- -o-transform: rotate(-70deg);
- content: '';
- }
- /** SIDEBAR **/
- #sidebar{
- height:calc(100vh - 350px);
- width:350px;
- position:fixed;
- bottom:0;
- left:0;
- display:flex;
- flex-direction:column;
- align-items:center;
- justify-content:center;
- }
- /* Sidebar Title */
- #s-title{
- font-size:calc(2 * {select:Font Size});
- font-weight:bold;
- color:{color:Posts};
- width:80%;
- text-align:center;
- }
- /* Sidebar Description */
- #s-desc{
- color:{color:Posts};
- width:80%;
- text-align:center;
- }
- #searchbar{
- margin-top:8px;
- }
- .sfm input {
- width:80%;
- background-color: {color:Posts};
- font-size: calc({select:Font Size} - 6px);
- border: 0px;
- text-transform: uppercase;
- margin-top: 0px;
- color: {color:Background};
- letter-spacing: 1px;
- padding: 4px 8px;
- font-family:"{select:Font}", Verdana;
- border-radius:1.5em;
- border:4px double {color:Background};
- text-align:center;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- .sfm input:hover{
- border:4px double {color:Posts};
- background-color:{color:Background};
- color:{color:Posts};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- #s-nav{
- margin-top:8px;
- display:flex;
- align-items:center;
- justify-content:space-evenly;
- flex-wrap:wrap;
- width:80%;
- }
- a.navlink{
- text-decoration:none;
- border-bottom:none;
- }
- .navi{
- width:32px;
- height:32px;
- background-color:{color:Posts};
- margin:4px;
- color:{color:Background};
- border-radius:50%;
- border:4px double {color:Background};
- display:flex;
- align-items:center;
- justify-content:center;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- .navi:hover{
- transform:scale(1.05);
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- #content{
- width:50vw;
- margin-left:40vw;
- height:auto;
- }
- article{
- width:calc(40vw - 2em);
- padding:1em;
- background-color:{color:Posts};
- margin-top:3em;
- margin-bottom:3em;
- border-radius:1em;
- }
- article img{
- max-width:100%;
- }
- .audio > iframe{
- max-width:100%;
- width:100%;
- }
- .video > iframe{
- max-width:100%;
- width:100%;
- }
- /** QUOTES **/
- .quoted{
- font-size:calc(1.25 * {select:Font Size});
- color:{color:Background};
- text-align:center;
- font-style:italic;
- }
- .quote-source{
- margin-top:8px;
- }
- /** PHOTOSETS **/
- .photo-row {
- padding:0.2em 0;
- display:flex;
- }
- .photo-row:first-child {
- padding-top:0;
- }
- .photo-row:last-child {
- padding-bottom:0;
- }
- .image-container {
- cursor:pointer;
- padding:0 0.2em;
- }
- .image-container:first-child {
- padding-left:0;
- }
- .image-container:last-child {
- padding-right:0;
- }
- .image {
- width:100%;
- height:100%;
- display:block;
- object-fit:cover;
- }
- .photo-row-1 .image-container {
- width:100%;
- }
- .photo-row-2 .image-container {
- width:50%;
- }
- .photo-row-3 .image-container {
- width:33.3333333%;
- }
- /** CHAT **/
- /* Containers */
- .chatterbox{
- width:100%;
- overflow:hidden;
- }
- .chat{
- width:100%;
- }
- .chat .clear{
- clear:both;
- }
- /* Odd Chat Elements (1,3,5,…) */
- .chat .label_odd, .line_odd{
- height:auto;
- width:60%;
- margin-left:calc(10% );
- float:left;
- padding:0.25 1em;
- }
- /* Odd Chat Lines (1,3,5,…) */
- .chat .line_odd{
- margin-bottom:0.5em;
- padding:0.3em 0.625em;
- }
- /* Odd Chat Labels (1,3,5,…) */
- .chat .label_odd{
- font-weight:700;
- font-size:calc(1.25 * {select:Font Size});
- padding:0.25em 0.5em;
- margin-bottom:0.25em;
- border-bottom:4px solid {color:Background};
- color:{color:Background};
- }
- /* Even Chat Elements (2,4,6,…) */
- .chat .label_even, .line_even{
- width:60%;
- height:auto;
- float:right;
- text-align:right;
- padding:0.25 0.5em;
- margin-right:calc(10%);
- }
- /* Even Chat Lines (2,4,6,…) */
- .chat .line_even{
- padding:0.3em 0.625em;
- margin-bottom:0.5em;
- }
- /* Even Chat Labels (2,4,6,…) */
- .chat .label_even{
- font-weight:700;
- font-size:calc(1.25 * {select:Font Size});
- padding:0.25em 0.5em;
- margin-bottom:0.25em;
- border-bottom:4px solid {color:Background};
- color:{color:Background};
- }
- /** QUESTIONS **/
- /* ANSWER */
- .answer{
- padding:0.5em;
- border:2px solid {color:Background};
- border-radius:1em;
- text-align:justify;
- }
- .answer img{
- width:36px;
- height:35px;
- border-radius:50%;
- margin-left:0.5em;
- }
- .answer-username{
- display:flex;
- justify-content:flex-start;
- align-items:center;
- flex-direction:row-reverse;
- }
- .answer-username a{
- text-decoration:none;
- border-bottom:none;
- margin-right:0.5em;
- margin-top:2em;
- color:{color:Posts};
- }
- .answer-username a:hover{
- color:{color:Background};
- }
- .answer-username mark{
- padding:0 0.25em;
- background-color:{color:Background};
- color:{color:Posts};
- border:2px solid {color:Background};
- border-radius:1em;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- .answer-username mark:hover{
- background-color:{color:Posts};
- color:{color:Background};
- cursor:pointer;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* QUESTION */
- .question{
- background-color:{color:Background};
- border-radius:1em;
- color:{color:Posts};
- margin-bottom:0.5em;
- padding:0.5em;
- text-align:justify;
- }
- .question img{
- width:36px;
- height:36px;
- border-radius:50%;
- margin-right:0.5em;
- }
- .question-username{
- display:flex;
- justify-content:flex-start;
- align-items:center;
- flex-direction:row;
- }
- .question-username a{
- text-decoration:none;
- border-bottom:none;
- margin-right:0.5em;
- margin-top:2em;
- color:{color:Background};
- }
- .question-username a:hover{
- color:{color:Posts};
- }
- .question-username mark{
- padding:0 0.25em;
- background-color:{color:Posts};
- border:2px solid {color:Posts};
- text-align:center;
- color:{color:Background};
- border-radius:1em;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- .question-username mark:hover{
- background-color:{color:Background};
- color:{color:Posts};
- cursor:pointer;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /*** USER SPECIFICATIONS ***/
- .username{
- margin-top:1em;
- margin-bottom:0.25em;
- height:40px;
- width:auto;
- display:flex;
- align-items:center;
- justify-content:flex-start;
- }
- .username a{
- text-decoration:none;
- border-bottom:none;
- }
- img.cimg {
- width:36px;
- height:36px;
- border-radius:50%;
- margin-right:0.5em;
- }
- /* User Name Link */
- .user a{
- text-decoration:none;
- border-bottom:none;
- }
- /* Username Mark */
- .user mark{
- padding:0 0.25em;
- background-color:{color:Background};
- border:2px solid {color:Background};
- border-radius:1em;
- margin-right:0.5em;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Username Mark on Hover */
- .user mark:hover{
- background-color:{color:Posts};
- border:2px solid {color:Background};
- color:{color:Background};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /*** PERMALINK PAGE ***/
- /* User Avatar */
- img.avatar{
- display:none;
- }
- /* Notes List */
- ol.notes{
- list-style-type:none;
- margin-left:0px;
- border-bottom:none;
- }
- /* Notes List on Hover */
- ol.notes:hover{
- border-bottom:none;
- }
- /* Notes List Item */
- li.note{
- line-height:1.5em;
- margin-left:-2em;
- }
- /* Liked by … */
- li.like:before{
- content:"\e155";
- font-family:"honeybee";
- font-weight:400;
- position:relative;
- font-size:{select:Font Size};
- padding:0.25em;
- z-index:10!important;
- }
- /* Reblogged by … */
- li.reblog:before{
- content:"\e3f1";
- font-family:"honeybee";
- font-weight:400;
- position:relative;
- font-size:{select:Font Size};
- padding:0.25em;
- z-index:10!important;
- }
- /* User Replied to … */
- li.reply:before{
- content:"\e418";
- font-family:"honeybee";
- font-weight:400;
- position:relative;
- font-size:{select:Font Size};
- padding:0.25em;
- z-index:10!important;
- }
- /* User Reply */
- .answer_content{
- color:{color:Background};
- padding:0 0.25em;
- }
- /* Notes Link */
- .notes a{
- text-decoration:none;
- color:{color:Text};
- border-bottom:2px solid {color:Background};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- margin-bottom:0.25em;
- }
- /* Notes Link on Hover */
- .notes a:hover{
- border-bottom:2px solid {color:Text};
- color:{color:Background};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /** LINK POSTS **/
- .link-posts{
- width:calc(100% - 1.25em);
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- display:flex;
- align-items:center;
- justify-content:center;
- border:4px double {color:Background};
- border-radius:1em;
- padding:0.25em 0.5em;
- }
- .link-posts:hover{
- border:4px double {color:Text};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- .link-posts a{
- text-decoration:none;
- border-bottom:none;
- text-align:center;
- font-size:calc(1.5 * {select:Font Size});
- letter-spacing:1px;
- line-height: 1.5em;
- width:100%;
- }
- .link-posts a img{
- width:100%;
- max-width:100%;
- }
- /*** POST FOOTER ***/
- /* Complete Container */
- .post-footer{
- margin-top:1em;
- padding-top:0.5em;
- border-top:2px solid {color:Background};
- }
- .post-footer .clear{
- clear:both;
- }
- /* Info Container */
- .info{
- display:flex;
- justify-content:flex-start;
- flex-direction:row;
- flex-wrap:wrap;
- margin-bottom:0.5em;
- line-height:2em;
- }
- .info .clear{
- clear:both;
- }
- /* Links */
- a.specs{
- text-decoration:none;
- border-bottom:none;
- }
- /** TIME STAMP **/
- /* Time Mark */
- .time mark{
- padding:0.25em 0.5em;
- background-color:{color:Posts};
- color:{color:Background};
- border:2px solid {color:Background};
- line-height:2.25em;
- border-radius:1em;
- margin-right:0.5em;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Time Mark on Hover */
- .time mark:hover{
- background-color:{color:Background};
- color:{color:Posts};
- border:2px solid {color:Background};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /** NOTE COUNT **/
- /* Notes Mark */
- .notecount mark{
- padding:0.25em 0.5em;
- background-color:{color:Posts};
- color:{color:Background};
- border:2px solid {color:Background};
- line-height:2.25em;
- border-radius:1em;
- margin-right:0.5em;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Notes Mark on Hover */
- .notecount mark:hover{
- background-color:{color:Background};
- color:{color:Posts};
- border:2px solid {color:Background};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /** VIA **/
- /* Via Mark */
- .via mark{
- padding:0.25em 0.5em;
- background-color:{color:Posts};
- color:{color:Background};
- border:2px solid {color:Background};
- line-height:2.25em;
- border-radius:1em;
- margin-right:0.5em;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Via Mark on Hover */
- .via mark:hover{
- background-color:{color:Background};
- color:{color:Posts};
- border:2px solid {color:Background};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /** POST SOURCE **/
- /* Source Mark */
- .source mark{
- padding:0.25em 0.5em;
- background-color:{color:Posts};
- color:{color:Background};
- border:2px solid {color:Background};
- line-height:2.25em;
- border-radius:1em;
- margin-right:0.5em;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Source Mark on Hover */
- .source mark:hover{
- background-color:{color:Background};
- color:{color:Posts};
- border:2px solid {color:Background};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /** REBLOG BUTTON **/
- /* Reblog Button Mark */
- .reblogged mark{
- padding:0.25em 0.5em;
- background-color:{color:Posts};
- color:{color:Background};
- border:2px solid {color:Background};
- line-height:2.25em;
- border-radius:1em;
- margin-right:0.5em;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Reblog Button Mark on Hover */
- .reblogged mark:hover{
- background-color:{color:Background};
- color:{color:Posts};
- border:2px solid {color:Background};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /** LIKE BUTTON **/
- /* Like Button */
- .like_button {
- display:inline-block;
- position:relative;
- padding-right:3px;
- margin-top:-0.25em;
- }
- /* Like Button iFrame */
- .like_button iframe {
- height:100%;
- left:0;
- opacity:0;
- position:absolute;
- top:0;
- width:100%;
- z-index:10!important;
- border-bottom:none;
- }
- /* Like Button Before Element */
- .like_button::before{
- content:"\e155";
- font-family:"honeybee";
- font-weight:300;
- position:relative;
- font-size:{select:Font Size};
- z-index:10!important;
- margin-right:0.25em;
- }
- /* Like Button After Element */
- .like_button::after {
- content:'like';
- z-index:10!important;
- }
- /* Like Link */
- a.liked{
- border-bottom:none;
- }
- /* Like Mark */
- a.liked mark{
- padding:0.25em 0.5em;
- background-color:{color:Posts};
- color:{color:Background};
- border:2px solid {color:Background};
- line-height:2.25em;
- border-radius:1em;
- margin-right:0.5em;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Like Mark on Hover */
- a.liked mark:hover{
- background-color:{color:Background};
- color:{color:Posts};
- border:2px solid {color:Background};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /** TAGS **/
- /* Tag Container */
- .tag-c{
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- flex-direction:row;
- flex-wrap:wrap;
- width:100%;
- height:auto;
- }
- /* Tags Mark */
- .tags mark{
- padding:0.25em 0.5em;
- background-color:{color:Posts};
- color:{color:Background};
- border:2px solid {color:Background};
- line-height:2.25em;
- border-radius:1em;
- margin-right:0.5em;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Tags Mark on Hover */
- .tags mark:hover{
- background-color:{color:Background};
- color:{color:Posts};
- border:2px solid {color:Background};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /*** MORE ***/
- /* Hides the tumblr app button, by @yeoli-thm */
- .tmblr-iframe--app-cta-button {
- display: none!important;
- }
- /** CUSTOM LIGHTBOX **/
- /* Custom Lightbox */
- .vignette, #vignette {
- opacity:0;
- }
- .lightbox-image, #tumblr_lightbox img {
- box-shadow:none!important;
- border-radius:0!important;
- max-width:none;
- }
- .tmblr-lightbox, #tumblr_lightbox {
- background-color:{color:Posts}!important;
- }
- a.tumblr-box{
- border-bottom:none;
- }
- /** CUSTOM TUMBLR CONTROLS **/
- /* Hides standard tumblr controls */
- body > iframe:first-child {
- display: none !important;
- }
- #big-box{
- width:240px;
- right:0.5em;
- top:0.5em;
- position:fixed;
- display:flex;
- align-items:center;
- justify-content:space-evenly;
- }
- a.boxlink{
- text-decoration:none;
- border-bottom:none;
- }
- .box{
- width:36px;
- height:36px;
- border-radius:50%;
- margin-bottom:6px;
- background-color:{color:Posts};
- color:{color:Background};
- display:flex;
- align-items:center;
- justify-content:center;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- .box:hover{
- color:{color:Text};
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /** PAGINATION **/
- /* Container */
- #f-pagination{
- width:240px;
- height:auto;
- display:flex;
- align-items:center;
- justify-content:space-evenly;
- bottom:0.5em;
- right:0.5em;
- position:fixed;
- }
- /* Pagination Links */
- a.f-pagi-link{
- text-decoration:none;
- border-bottom:none;
- }
- .f-box{
- width:36px;
- height:36px;
- border-radius:50%;
- background-color:{color:Posts};
- color:{color:Background};
- display:flex;
- align-items:center;
- justify-content:center;
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- .f-box:hover{
- color:{color:Text};
- transform:scale(1.05);
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /*** RESPONSIVE LAYOUT ***/
- @media only screen and (max-width:800px){
- #box{
- display:none;
- }
- #sidebar{
- display:none;
- }
- #content{
- width:100vw;
- margin-left:0;
- }
- article{
- width:calc(80vw - 2em);
- margin-left:10vw;
- }
- #responsive-header{
- background-color:{color:Posts};
- width:calc(80vw - 2em);
- margin-left:10vw;
- padding:1em;
- border-radius:1em;
- margin-top:3em;
- }
- #rh-info{
- width:100%;
- display:flex;
- align-items:center;
- justify-content:space-around;
- border-bottom:4px solid {color:Background};
- padding-bottom:0.25em;
- margin-bottom:0.5em;
- }
- #rh-icon img{
- width:64px;
- height:64px;
- border-radius:50%;
- border:4px solid {color:Background};
- }
- #rh-specs{
- width:80%;
- }
- #rh-title{
- font-size:calc(2.5 * {select:Font Size});
- color:{color:Background};
- }
- #rh-desc{
- font-size:calc(1.25em * {select:Font Size});
- text-align:justify;
- }
- #rh-searchbar{
- margin-left:10%;
- }
- #rh-nav{
- width:100%;
- display:flex;
- align-items:center;
- justify-content:space-evenly;
- border-top:4px solid {color:Background};
- margin-top:0.5em;
- padding-top:0.25em;
- }
- #big-box{
- width:40px;
- height:240px;
- flex-direction:column;
- }
- #f-pagination{
- width:40px;
- height:240px;
- flex-direction:column;
- }
- }
- /* Disables responsive header on large screens. */
- @media only screen and (min-width:800px){
- #responsive-header{
- display:none;
- }
- }
- </style>
- </head>
- <body>
- <!-- PAGINATION -->
- <div id="f-pagination">
- {block:Pagination}
- <!-- Previous Page -->
- {block:PreviousPage}
- <a class="f-pagi-link" href="{PreviousPage}" title="previous">
- <div class="f-box">
- <span class="th th-backward-arrow"></span>
- </div>
- </a>
- {/block:PreviousPage}
- <!-- Jump Pagination -->
- {block:JumpPagination length="3"}
- {block:CurrentPage}
- <span class="current_page">
- <div class="f-box">{PageNumber}</div>
- </span>
- {/block:CurrentPage}
- {block:JumpPage}
- <a class="jump_page f-pagi-link" href="{URL}" title="Page {PageNumber}">
- <div class="f-box">{PageNumber}</div>
- </a>
- {/block:JumpPage}
- {/block:JumpPagination}
- <!-- Next Page -->
- {block:NextPage}
- <a class="f-pagi-link" href="{NextPage}" title="next">
- <div class="f-box">
- <span class="th th-skip-track"></span>
- </div>
- </a>
- {/block:NextPage}
- {/block:Pagination}
- </div>
- <!-- CUSTOM TUMBLR CONTROLS -->
- <div id="big-box">
- <!-- Dahsboard Link -->
- <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="boxlink">
- <div class="box">
- <span class="th th-house-2-o"></span>
- </div>
- </a>
- <!-- Chat Link -->
- <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="boxlink">
- <div class="box">
- <span class="th th-chat-bubble-o"></span>
- </div>
- </a>
- <!-- Customization -->
- <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize theme" class="boxlink">
- <div class="box">
- <span class="th th-pencil-1-o"></span>
- </div>
- </a>
- <!-- Settings -->
- <a href="https://www.tumblr.com/settings/blog/{Name}" title="change settings" class="boxlink">
- <div class="box">
- <span class="th th-settings-5-o"></span>
- </div>
- </a>
- <!-- Follow Link -->
- <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="boxlink">
- <div class="box">
- <span class="th th-plus-2-o"></span>
- </div>
- </a>
- </div>
- <!-- ESPERANTO FLAG -->
- <div id="box">
- <div id="star-five"></div>
- </div>
- <!-- SIDEBAR -->
- <div id="sidebar">
- <!-- Sidebar Title -->
- <div id="s-title">{Title}</div>
- <!-- Sidebar Description -->
- <div id="s-desc">{Description}</div>
- <!-- Sidebar Searchbar -->
- <div id="searchbar">
- <form action="/search" method="get" class="sfm" name="theform">
- <input type="text" name="q" value="SEARCH"/>
- </form>
- </div>
- <!-- Sidebar Navigation -->
- <div id="s-nav">
- <!-- Index Link -->
- <a href="/" title="index" class="navlink">
- <div class="navi">
- <span class="th th-house-2-o"></span>
- </div>
- </a>
- <!-- Ask Link -->
- <a href="/ask" title="{AskLabel}" class="navlink">
- <div class="navi">
- <span class="th th-envelope-o"></span>
- </div>
- </a>
- <!-- Submit Link -->
- <a href="/submit" title="{SubmitLabel}" class="navlink">
- <div class="navi">
- <span class="th th-send-1-o"></span>
- </div>
- </a>
- <!-- First Custom Link -->
- {block:IfShowLink1}
- <a href="{text:Custom URL 1}" title="{text:Custom Link 1}" class="navlink">
- <div class="navi">
- <span class="th th-{text:Custom Icon 1}"></span>
- </div>
- </a>
- {/block:IfShowLink1}
- <!-- Second Custom Link -->
- {block:IfShowLink2}
- <a href="{text:Custom URL 2}" title="{text:Custom Link 2}" class="navlink">
- <div class="navi">
- <span class="th th-{text:Custom Icon 2}"></span>
- </div>
- </a>
- {/block:IfShowLink2}
- <!-- Third Custom Link -->
- {block:IfShowLink3}
- <a href="{text:Custom URL 3}" title="{text:Custom Link 3}" class="navlink">
- <div class="navi">
- <span class="th th-{text:Custom Icon 3}"></span>
- </div>
- </a>
- {/block:IfShowLink3}
- <!-- Fourth Custom Link -->
- {block:IfShowLink4}
- <a href="{text:Custom URL 4}" title="{text:Custom Link 4}" class="navlink">
- <div class="navi">
- <span class="th th-{text:Custom Icon 4}"></span>
- </div>
- </a>
- {/block:IfShowLink4}
- <!-- Fifth Custom Link -->
- {block:IfShowLink5}
- <a href="{text:Custom URL 5}" title="{text:Custom Link 5}" class="navlink">
- <div class="navi">
- <span class="th th-{text:Custom Icon 5}"></span>
- </div>
- </a>
- {/block:IfShowLink5}
- <!-- Credit -->
- <!-- Do not delete or alter! -->
- <a href="https://silbrigthemes.tumblr.com" title="theme credit" class="navlink">
- <div class="navi">
- <span class="th th-star-o"></span>
- </div>
- </a>
- </div>
- </div>
- <!-- Content and Posts -->
- <div id="content">
- <div id="posts">
- <!-- Responsive Header -->
- <div id="responsive-header">
- <div id="rh-info">
- <!-- Header Icon -->
- <div id="rh-icon">
- <img src="{PortraitURL-96}" alt="{Name}'s icon"/>
- </div>
- <div id="rh-specs">
- <!-- Header Title -->
- <div id="rh-title">{Title}</div>
- <!-- Header Description -->
- <div id="rh-desc">{Description}</div>
- </div>
- </div>
- <!-- Header Searchbar -->
- <div id="rh-searchbar">
- <form action="/search" method="get" class="sfm" name="theform">
- <input type="text" name="q" value="SEARCH"/>
- </form>
- </div>
- <!-- Header Navigation -->
- <div id="rh-nav">
- <a href="/" title="index" class="navlink">
- <div class="navi">
- <span class="th th-house-2-o"></span>
- </div>
- </a>
- <a href="/ask" title="{AskLabel}" class="navlink">
- <div class="navi">
- <span class="th th-envelope-o"></span>
- </div>
- </a>
- <a href="/submit" title="{SubmitLabel}" class="navlink">
- <div class="navi">
- <span class="th th-send-1-o"></span>
- </div>
- </a>
- {block:IfShowLink1}
- <a href="{text:Custom URL 1}" title="{text:Custom Link 1}" class="navlink">
- <div class="navi">
- <span class="th th-{text:Custom Icon 1}"></span>
- </div>
- </a>
- {/block:IfShowLink1}
- {block:IfShowLink2}
- <a href="{text:Custom URL 2}" title="{text:Custom Link 2}" class="navlink">
- <div class="navi">
- <span class="th th-{text:Custom Icon 2}"></span>
- </div>
- </a>
- {/block:IfShowLink2}
- {block:IfShowLink3}
- <a href="{text:Custom URL 3}" title="{text:Custom Link 3}" class="navlink">
- <div class="navi">
- <span class="th th-{text:Custom Icon 3}"></span>
- </div>
- </a>
- {/block:IfShowLink3}
- {block:IfShowLink4}
- <a href="{text:Custom URL 4}" title="{text:Custom Link 4}" class="navlink">
- <div class="navi">
- <span class="th th-{text:Custom Icon 4}"></span>
- </div>
- </a>
- {/block:IfShowLink4}
- {block:IfShowLink5}
- <a href="{text:Custom URL 5}" title="{text:Custom Link 5}" class="navlink">
- <div class="navi">
- <span class="th th-{text:Custom Icon 5}"></span>
- </div>
- </a>
- {/block:IfShowLink5}
- <a href="https://silbrigthemes.tumblr.com" title="theme credit" class="navlink">
- <div class="navi">
- <span class="th th-star-o"></span>
- </div>
- </a>
- </div>
- </div>
- <!-- POSTS -->
- {block:Posts}
- <article>
- <!-- TEXT POSTS -->
- {block:Text}
- {block:Title}
- <div class="title">{Title}</div>
- {/block:Title}
- {block:Body}
- {block:NotReblog}
- <div class="text">{Body}</div>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="username">
- {block:HasAvatar}
- {block:HasPermalink}
- <a href="{Permalink}" target="_blank">
- <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <img class="cimg" src="{PortraitURL-64}" alt="user icon">
- {/block:HasNoPermalink}
- {/block:HasAvatar}
- {block:HasPermalink}
- <div class="user">
- <a target="_blank" class="user" href="{Permalink}">
- <mark>{Username}</mark>
- </a>
- </div>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <span class="user"><mark>{Username}</mark></span>
- {/block:HasNoPermalink}
- </div>
- <div class="text">{Body}</div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Body}
- {/block:Text}
- <!-- QUESTION POSTS -->
- {block:Answer}
- <div class="question">
- <div class="question-username">
- <img src="{AskerPortraitURL-96}" alt="user icon">
- <mark>{Asker}</mark>
- </div>
- {Question}
- </div>
- {block:Answerer}
- <div class="answer">
- <div class="answer-username">
- <img src="{AnswererPortraitURL-96}" alt="user icon">
- <mark>{Answerer}</mark>
- </div>
- {Answer}
- </div>
- {/block:Answerer}
- {block:NotReblog}
- <div>{Replies}</div>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="username">
- {block:HasAvatar}
- {block:HasPermalink}
- <a href="{Permalink}" target="_blank">
- <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <img class="cimg" src="{PortraitURL-64}" alt="user icon">
- {/block:HasNoPermalink}
- {/block:HasAvatar}
- {block:HasPermalink}
- <div class="user">
- <a target="_blank" class="user" href="{Permalink}">
- <mark>{Username}</mark>
- </a>
- </div>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <span class="user"><mark>{Username}</mark></span>
- {/block:HasNoPermalink}
- </div>
- <div class="text">{Body}</div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Answer}
- <!-- QUOTE POSTS -->
- {block:Quote}
- <div class="quoted">
- {Quote}
- </div>
- {block:Source}
- <div class="quote-source">
- – {Source}
- </div>
- {/block:Source}
- {/block:Quote}
- <!-- LINK POSTS -->
- {block:Link}
- <div class="link-posts">
- <a href="{URL}">
- <div class="link-cont">
- <div class="link-title">
- {Name}
- </div>
- </div>
- </a>
- </div>
- {block:Description}
- {block:NotReblog}
- {Description}
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="username">
- {block:HasAvatar}
- {block:HasPermalink}
- <a href="{Permalink}" target="_blank">
- <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <img class="cimg" src="{PortraitURL-64}" alt="user icon">
- {/block:HasNoPermalink}
- {/block:HasAvatar}
- {block:HasPermalink}
- <div class="user">
- <a target="_blank" class="user" href="{Permalink}">
- <mark>{Username}</mark>
- </a>
- </div>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <span class="user"><mark>{Username}</mark> </span>
- {/block:HasNoPermalink}
- </div>
- <div class="text">{Body}</div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Description}
- {/block:Link}
- <!-- CHAT POSTS -->
- <div class="chatterbox">
- {block:Chat}
- <div class="chat clear">
- {block:Title}
- <div class="title">{Title}</div>
- {/block:Title}
- {block:Lines}
- {block:Label}
- <span class="label_{alt}">
- {Label}
- </span>
- {/block:Label}
- <div class="line_{alt}">
- {Line}<br>
- </div>
- {/block:Lines}
- </div>
- {/block:Chat}
- </div>
- <!-- PHOTO POSTS -->
- {block:Photo}
- {LinkOpenTag}
- <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
- <div class="photo">
- <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
- </div>
- </a>
- {LinkCloseTag}
- {block:Caption}
- {block:IfShowCaptions}
- {block:NotReblog}{Caption}{/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="username">
- {block:HasAvatar}
- {block:HasPermalink}
- <a href="{Permalink}" target="_blank">
- <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <img class="cimg" src="{PortraitURL-64}" alt="user icon">
- {/block:HasNoPermalink}
- {/block:HasAvatar}
- {block:HasPermalink}
- <div class="user">
- <a target="_blank" class="user" href="{Permalink}">
- <mark>{Username}</mark>
- </a>
- </div>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <span class="user"><mark>{Username}</mark></span>
- {/block:HasNoPermalink}
- </div>
- <div class="text">{Body}</div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:IfShowCaptions}
- {/block:Caption}
- {/block:Photo}
- <!-- PANORAMA POSTS -->
- {block:Panorama}
- {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">
- <div class="panorama">
- <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
- </div>
- </a>
- {LinkCloseTag}
- {block:Caption}
- {block:IfShowCaptions}
- {block:NotReblog}
- {Caption}
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="username">
- {block:HasAvatar}
- {block:HasPermalink}
- <a href="{Permalink}" target="_blank" title="permalink page">
- <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <img class="cimg" src="{PortraitURL-64}" alt="user icon">
- {/block:HasNoPermalink}
- {/block:HasAvatar}
- {block:HasPermalink}
- <div class="user">
- <a target="_blank" class="user" href="{Permalink}" title="permalink page">
- <mark>{Username}</mark>
- </a>
- </div>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <span class="user"><mark>{Username}</mark></span>
- {/block:HasNoPermalink}
- </div>
- <div class="text">{Body}</div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:IfShowCaptions}
- {/block:Caption}
- {/block:Panorama}
- <!-- PHOTOSETS -->
- {block:Photoset}
- <div class="photoset" data-layout="{PhotosetLayout}">
- {block:Photos}
- <div class="image-container"
- data-width="{PhotoWidth-HighRes}"
- data-height="{PhotoHeight-HighRes}"
- data-lowres="{PhotoURL-500}"
- data-highres="{PhotoURL-HighRes}">
- <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="image"/>
- </div>
- {/block:Photos}
- </div><!-- photoset -->
- {block:Caption}
- {block:IfShowCaptions}
- {block:NotReblog}
- {Caption}
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="username">
- {block:HasAvatar}
- {block:HasPermalink}
- <a href="{Permalink}" target="_blank">
- <img class="cimg" src="{PortraitURL-64}"></a>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <img class="cimg" src="{PortraitURL-64}">
- {/block:HasNoPermalink}
- {/block:HasAvatar}
- {block:HasPermalink}
- <div class="user">
- <a target="_blank" class="user" href="{Permalink}">
- <mark>{Username}</mark>
- </a>
- </div>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <span class="user"><mark>{Username}</mark></span>
- {/block:HasNoPermalink}
- </div>
- <div class="text">{Body}</div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {block:IfShowCaptions}
- {/block:Caption}
- {/block:Photoset}
- <!-- AUDIO POSTS -->
- {block:Audio}
- {block:AudioEmbed}
- <div class="audio">
- {AudioEmbed}
- </div>
- {/block:AudioEmbed}
- {block:Caption}
- {block:NotReblog}
- {Caption}
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="username">
- {block:HasAvatar}
- {block:HasPermalink}
- <a href="{Permalink}" target="_blank">
- <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <img class="cimg" src="{PortraitURL-64}" alt="user icon">
- {/block:HasNoPermalink}
- {/block:HasAvatar}
- {block:HasPermalink}
- <div class="user">
- <a target="_blank" class="user" href="{Permalink}">
- <mark>{Username}</mark>
- </a>
- </div>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <span class="user"><mark>{Username}</mark></span>
- {/block:HasNoPermalink}
- </div>
- <div class="text">{Body}</div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Audio}
- <!-- VIDEO POSTS -->
- {block:Video}
- <div class="video">
- {Video-500}
- </div>
- {block:Caption}
- {block:NotReblog}
- {Caption}
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="username">
- {block:HasAvatar}
- {block:HasPermalink}
- <a href="{Permalink}" target="_blank">
- <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <img class="cimg" src="{PortraitURL-64}" alt="user icon">
- {/block:HasNoPermalink}
- {/block:HasAvatar}
- {block:HasPermalink}
- <div class="user">
- <a target="_blank" class="user" href="{Permalink}">
- <mark>{Username}</mark>
- </a>
- </div>
- {/block:HasPermalink}
- {block:HasNoPermalink}
- <span class="user"><mark>{Username}</mark></span>
- {/block:HasNoPermalink}
- </div>
- <div class="text">{Body}</div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Video}
- <!-- POST FOOTER -->
- <div class="post-footer clear">
- <div class="info clear">
- <!-- TIME STAMP -->
- {block:Date}
- <div class="time">
- <a class="specs" href="{Permalink}" title="{Month} {DayOfMonth}, {Year}">
- <mark><span class="th th-clock-o" aria-hidden="true"></span> {TimeAgo}</mark></a>
- </div>
- {/block:Date}
- <!-- NOTE COUNT -->
- {block:NoteCount}
- <div class="notecount">
- <a class="specs" href="{Permalink}" title="{NoteCountWithLabel}">
- <mark><span class="th th-information-o" aria-hidden="true"></span> {NoteCountWithLabel}</mark></a>
- </div>
- {/block:NoteCount}
- <!-- VIA -->
- {block:RebloggedFrom}
- <div class="via">
- <a class="specs" href="{ReblogParentURL}" title="via">
- <mark><span class="th th-right-arrow-curved" aria-hidden="true"></span> via</mark>
- </a>
- </div>
- {/block:RebloggedFrom}
- <!-- POST SOURCE -->
- {block:ContentSource}
- <div class="source">
- <a class="specs" href="{SourceURL}" title="source">
- <mark><span class="th th-placeholder-4-o" aria-hidden="true"></span> source</mark>
- </a>
- </div>
- {/block:ContentSource}
- <!-- REBLOG BUTTON -->
- <div class="reblogged">
- <a class="specs" href="{ReblogURL}" title="reblog this post">
- <mark><span class="th th-reload-arrow" aria-hidden="true"></span> reblog</mark>
- </a>
- </div>
- <!-- LIKE BUTTON -->
- <a class="liked" href="#" title="like this post">
- <mark>{LikeButton}</mark>
- </a>
- </div><!-- /info -->
- <!-- TAGS -->
- {block:HasTags}
- <div class="tags">
- {block:Tags}
- <a class="specs" href="{TagURL}" title="tagged as: {Tag}">
- <mark>
- <span class="th th-tag-o" aria-hidden="true"></span> {Tag}
- </mark>
- </a>
- {/block:Tags}
- </div><!-- /tags -->
- {/block:HasTags}
- </div><!-- /post footer -->
- {block:PermalinkPage}
- {block:NoteCount}
- {block:PostNotes}
- {PostNotes}
- {/block:PostNotes}
- {/block:NoteCount}
- {/block:PermalinkPage}
- </article>
- {/block:Posts}
- </div>
- </div>
- <!-- SCRIPTS -->
- <script>
- window.addEventListener('load', startup, false);
- function startup() {
- let photosets = document.getElementsByClassName("photoset");
- for (let i = 0, n = photosets.length; i < n; i++) {
- makeLightboxes(photosets[i]);
- makePhotoset(photosets[i]);
- }
- }
- function makeLightboxes(photoset) {
- // get image containers in photoset
- let image_containers = photoset.getElementsByClassName("image-container");
- // loop over image containers
- for (let i = 0, n = image_containers.length; i < n; i++) {
- // add click event to image container
- image_containers[i].addEventListener("click", function() {
- // current is the image's index in the photoset
- // due to tumblr reasons, it starts at 1
- let current = i + 1;
- // activate lightbox
- lightbox(image_containers, current);
- });
- }
- }
- function lightbox(image_containers, current) {
- // array of lightboxes for each image in photoset
- // lightbox is represented by an object
- let lightboxes = [];
- // loop over image containers
- for (let i = 0, n = image_containers.length; i < n; i++) {
- // create object for image container
- let image_container = image_containers[i]
- let arrayContents = {
- "width" : image_container.dataset.width,
- "height" : image_container.dataset.height,
- "low_res" : image_container.dataset.lowres,
- "high_res" : image_container.dataset.highres,
- }
- // add object to array
- lightboxes.push(arrayContents);
- }
- // activate built-in tumblr function
- Tumblr.Lightbox.init(lightboxes, current);
- }
- function makePhotoset(photoset) {
- // get image containers in photoset
- let images = photoset.getElementsByClassName("image-container");
- // get layout of photoset -- formatted as string of numbers of images per row
- // e.g "231" means row of 2 images, row of 3 images, row of 1 image
- let layout = photoset.dataset.layout;
- // loop over each row
- for (let i = 0, n = layout.length; i < n; i++) {
- // get number of images in row
- let cols = layout.charAt(i);
- // create row
- // row is a div with classes "photo-row" and "photo-row-n"
- let row = document.createElement("div");
- row.classList.add("photo-row-" + cols);
- row.classList.add("photo-row");
- // loop over number of images in row
- // move the right amount of images to row
- for (let j = 0; j < cols; j++) {
- row.appendChild(images[0]);
- }
- // add row to the photoset
- photoset.appendChild(row);
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment