first themes

8/16/2019 First Themes

http://slidepdf.com/reader/full/first-themes 1/20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>

<head> <meta name="color:Background Color" content="#eeeeee" /><meta name="color:Post Background Color" content="#ffffff" /><meta name="color:Text Color" content="#888888" /><meta name="color:Accent" content="#e89e8c"> <meta name="image:Header" content="" /> <meta name="text:Main Title" content="{Title}" /><meta name="text:Link 1 Title" content="message" /><meta name="text:Link 1 Url" content="/ask" />

<meta name="text:Link 2 Title" content="" /><meta name="text:Link 2 Url" content="" /><meta name="text:Link 3 Title" content="" /><meta name="text:Link 3 Url" content="" /><meta name="text:Link 4 Title" content="" /><meta name="text:Link 4 Url" content="" /><meta name="text:Link 5 Title" content="" /><meta name="text:Link 5 Url" content="" />

<meta name="text:Sidelink 1 Title" content="" /><meta name="text:Sidelink 1 Url" content="" /><meta name="text:Sidelink 2 Title" content="" /><meta name="text:Sidelink 2 Url" content="" /><meta name="text:Sidelink 3 Title" content="" /><meta name="text:Sidelink 3 Url" content="" /><meta name="text:Sidelink 4 Title" content="" /><meta name="text:Sidelink 4 Url" content="" />

<meta name="select:Sidelink 1 Icon" content="star" title="Star"><meta name="select:Sidelink 1 Icon" content="heart" title="Heart"><meta name="select:Sidelink 1 Icon" content="beamed-note" title="Beamed-note"><meta name="select:Sidelink 1 Icon" content="image" title="Image"><meta name="select:Sidelink 1 Icon" content="tag" title="Tag"><meta name="select:Sidelink 1 Icon" content="twitter" title="Twitter"><meta name="select:Sidelink 1 Icon" content="instagram" title="Instagram">

<meta name="select:Sidelink 1 Icon" content="facebook" title="Facebook"><meta name="select:Sidelink 1 Icon" content="youtube" title="YouTube">

<meta name="select:Sidelink 2 Icon" content="heart" title="Heart"><meta name="select:Sidelink 2 Icon" content="star" title="Star"><meta name="select:Sidelink 2 Icon" content="beamed-note" title="Beamed-note"><meta name="select:Sidelink 2 Icon" content="image" title="Image"><meta name="select:Sidelink 2 Icon" content="tag" title="Tag"><meta name="select:Sidelink 2 Icon" content="twitter" title="Twitter"><meta name="select:Sidelink 2 Icon" content="instagram" title="Instagram"><meta name="select:Sidelink 2 Icon" content="facebook" title="Facebook"><meta name="select:Sidelink 2 Icon" content="youtube" title="YouTube">

<meta name="select:Sidelink 3 Icon" content="beamed-note" title="Beamed-note"><meta name="select:Sidelink 3 Icon" content="star" title="Star"><meta name="select:Sidelink 3 Icon" content="heart" title="Heart">



} a{color:{color:Accent};text-decoration:none;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} a:hover, a:active{color:{color:Text Color};-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;

}/* SCROLLBAR */ ::-webkit-scrollbar-thumb {width:9px;border:2px solid {color:Background Color};background-color:{color:Accent};} ::-webkit-scrollbar {width:9px;border:4px solid {color:Background Color};background-color:{color:Accent};} /* SELECTION */ ::-moz-selection {color:{color:Post Background Color};background-color:{color:Accent};} ::selection {color:{color:Post Background Color};background-color:{color:Accent};}

/* FIGURE */ figure{margin-top:10px;max-width:100%;height:auto;}

/* TUMBLR CONTROLS */

.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{white-space:nowrap;-webkit-filter: invert(100%);



-moz-filter: invert(100%);-o-filter: invert(100%);-ms-filter: invert(100%);filter: invert(100%);opacity:0.2;top:5px !important;z-index:99999 !important;}

/*----------- HEADER -----------*/ #header{width:100%;height:500px;margin-top:-40px;position:absolute;top:0px;left:0px;

background-color:{color:Accent};background-image:url('{image:Header}');background-position:bottom center;background-repeat:no-repeat;}

/* TOPBAR */

#topbar{position:fixed;top:0px;left:0px;width:100%;height:60px;background-color:{color:Accent};text-align:center;z-index:9999;}

#topbar:before{left:calc(50% - 425px);top:29px;width:850px;float:left;display:block;position:absolute;content:'';border-top:1px solid {color:Post Background Color};}

#topbar .title{font-family: 'Montserrat', sans-serif;position:absolute;display:block;height:60px;padding-right:10px;line-height:60px;top:0px;left:calc(50% - 425px);text-align:left;font-size:16px;



font-weight:normal;text-transform:uppercase;background-color:{color:Accent};}

#topbar .title a{color:{color:Post Background Color};}

#topbar .title a:hover{opacity:0.9;}

#topbar .links{position:absolute;right:calc(50% - 425px);background-color:{color:Accent};}

#topbar .links a{display:inline-block;float:right;font-size:9px;font-family: 'Montserrat', sans-serif;letter-spacing:2px;text-transform:uppercase;height:20px;line-height:20px;color:{color:Post Background Color};padding:0px 0px 0px 3px;margin:19px 7px;border-top:1px solid transparent;border-bottom:1px solid transparent;}

#topbar .links a:hover{border-top:1px solid {color:Post Background Color};border-bottom:1px solid {color:Post Background Color};}

#topbar .links a:first-child{margin-right:0px;}

/*----------- MAIN -----------*/

#entries{position:absolute;top:420px;left:calc(50% - 425px);width:810px;background-color:{color:Background Color};padding:20px;border-top-left-radius:3px;border-top-right-radius:3px;}

/*----------- SIDEBAR -----------*/



.sidebar{position:absolute;width:250px;left:calc(50% - 405px);top:380px;padding-top:60px;z-index:999;} #sidebar{text-align:left;overflow:hidden;margin-bottom:50px;}

.sticky{position:fixed;top:20px;left:calc(50% - 405px);

z-index:999;}

/* DESCRIPTION */ #desc{font-weight:400;min-height:55px;text-align:left;display:block;padding:15px;line-height:150%;font-size:9.5px;color:{color:Text Color};letter-spacing:0.5px;border-bottom:1px solid {color:Background Color};margin-bottom:10px;border-radius:3px;background:{color:Post Background Color};box-shadow:1px 2px 1px rgba(0,0,0,0.03);}

#desc img.avatar{float:left;width:55px;margin:0px 10px 10px 0px;border-radius:3px;}

/* SIDE LINKS */

#navi{background:{color:Post Background Color};border-radius:3px;{block:ifSidelink1Title}margin-bottom:10px;{/block:ifSidelink1Title}overflow:hidden;box-shadow:1px 2px 1px rgba(0,0,0,0.03);} #navi a{font-family: 'Montserrat', sans-serif;



display:block;padding:15px 20px;text-align:left;color:{color:Text Color};text-transform:uppercase;font-size:7.5px;letter-spacing:2px;line-height:100%;border-bottom:1px solid {color:Background Color};} #navi a:last-child{border:none;} a.star::before{content: "\e900";}

a.heart::before{content: "\e901";} a.beamed-note::before{content: "\e902";} a.image::before{content: "\e903";}

a.tag::before{content: "\e904";}

a.twitter::before{content: "\e905";}

a.instagram::before{content: "\e906";}

a.facebook::before{content: "\e907";}

a.youtube::before{content: "\e908";}

a.link::before{font-family:'icons';font-size:12px;float:left;margin-right:10px;color:{color:Accent};-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;



-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}

a.link:hover::before{color:{color:Post Background Color};-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} #navi a:hover{color:{color:Post Background Color};background-color:{color:Accent};}

/* SEARCH */

#search{margin-bottom:10px;display:block;padding:15px;background:{color:Post Background Color};border-radius:3px;box-shadow:1px 2px 1px rgba(0,0,0,0.03);} #search input{display:block;width:200px;font-size:10px;letter-spacing:1px;padding:10px;text-align:left;color:{color:Text Color};border:1px solid {color:Background Color};outline:none;} #search input.sbutton{position:absolute;margin-left:185px;margin-top:-35px;cursor:pointer;width:30px;outline:none;border:none;font-family:'icons';line-height:18px;font-size:16px;color:{color:Accent};z-index:9;background:transparent;} ::-webkit-input-placeholder{color:{color:Color One};opacity:0.5;text-transform:uppercase;letter-spacing:2px;}::-moz-input-placeholder{color:{color:Color One};opacity:0.5;text-transform:uppe



rcase;letter-spacing:2px;}::-o-input-placeholder{color:{color:Color One};opacity:0.5;text-transform:uppercase;letter-spacing:2px;}::-ms-input-placeholder{color:{color:Color One};opacity:0.5;text-transform:uppercase;letter-spacing:2px;}

/* PAGINATION */

#pagination{border-top:1px solid {color:Background Color};display:block;padding:0px 20px;text-align:center;font-size:9px;background:{color:Post Background Color};border-radius:3px;box-shadow:1px 2px 1px rgba(0,0,0,0.03);}

#pagination a{display:inline-block;padding:10px 5px 8px 5px;width:5px;font-size:8px;color:{color:Text Color};border-bottom:2px solid transparent;}

#pagination a:hover{border-bottom:2px solid {color:Accent};} .current_page{color:{color:Text Color};display:inline-block;padding:10px 5px 8px 5px;width:5px;font-size:8px;border-bottom:2px solid {color:Accent};}

#pagination a.jump{font-family:Helvetica;font-size:9px;}

/*----------- POSTS -----------*/

#posts{width:540px;top:0px;margin-left:270px;} #post{font-weight:400;font-size:10.5px;width:500px;padding:20px;



background-color:{color:Post Background Color};color:{color:Text Color};text-align:justify;line-height:150%;margin-bottom:20px;letter-spacing:0.5px;overflow:hidden;border:1px solid {color:Background Color};border-radius:3px;box-shadow:1px 2px 1px rgba(0,0,0,0.03);}

/* POST BASIC */ #post img{max-width:100%;height:auto;}

#post a{color:{color:Accent};}

#post a:hover{color:{color:Text Color};} .posttitle{font-family: 'Montserrat', sans-serif;font-weight:400;font-size:14px;letter-spacing:0px;width:500px;text-align:justify;margin:0px 0px 10px 0px;color:{color:Text Color};} blockquote{width:calc(100% - 23px);max-width:calc(100% - 23px);margin-left:0px;padding-left:10px;border-left:2px solid {color:Accent};} p{margin-top:3px;} ol {margin-left:-15px;} ul {list-style-type:disc;margin-left:-15px;}

/* LINKS */



.link-button {background:#f2f2f2;word-break:break-word;overflow:hidden;display:block;position:relative;text-decoration:none;margin-bottom:10px;}

.info-container {padding:20px 20px 0;overflow:hidden;}

.publisher-container{margin-top:-4px;margin-bottom:17px;

display:block;font-size:13px;line-height:16px;font-weight:700;word-break:break-all;position:absolute;top:20px;left:20px;right:20px;}

.publisher-container .publisher{line-height:16px;font-size:8px;font-weight:500;color:{color:Post Background Color};text-shadow:1px 1px 0px rgba(0,0,0,0.1);text-transform:uppercase;letter-spacing:2px;display:inline-block;margin:0px;}

.publisher-container .publisher:before{font-size:14px;float:left;margin-right:5px;font-family:'icons';content:'\e909';}

.info-container{padding:20px 20px 0;overflow:hidden;}

.info-container .title{margin-top:-5px;margin-bottom:14px;display:block;font-family: 'Montserrat', sans-serif;



font-size:14px;letter-spacing:0px;line-height:130%;color:{color:Accent};}

.info-container .title:after{padding-left:5px;white-space:nowrap;display:inline;vertical-align:middle;font-family:'icons';content: "\e90d";}

.info-container .excerpt {margin-top:-5px;margin-bottom:14px;display:block;

font-size:10px;line-height:130%;color:{color:Text Color};}

/* QUOTES */ .quotes{font-family: 'Montserrat', sans-serif;font-weight:400;font-size:14px;letter-spacing:0px;letter-spacing:0px;width:500px;line-height:130%;color:{color:Text Color};}

.quotes:before{font-family:'icons';content:'\e90b';margin-right:8px;}

.quotes:after{font-family:'icons';content:'\e90c';margin-left:8px;} .asker{font-size:7px;text-transform:uppercase;text-align:left;line-height:100%;color:{color:Text Color};letter-spacing:2px;} .asker span{font-family: 'Montserrat', sans-serif;



font-weight:400;text-transform:lowercase;font-size:14px;line-height:100%;letter-spacing:0px;} .asker a{color:{color:Accent};font-family: 'Montserrat', sans-serif;font-weight:400;text-transform:lowercase;font-size:14px;line-height:100%;letter-spacing:0px;} .asker a:hover{color:{color:Text Color};

} .askimg img{width:25px;height:25px;margin-right:10px;border-radius:50%;float:left;} .question{width:470px;margin-left:12px;margin-bottom:10px;padding:20px 0px 10px 20px;border-left:1px solid {color:Accent};margin-top:-5px;}

/* CHAT */ ul.chat, .chat ol, .chat li .chat li{list-style:none;line-height:180%;margin-left:-35px;}

/* POSTNOTES */ #postnotes{width:500px;padding:20px;color:{color:Text Color};background:{color:Post Background Color};font-size:8px;text-align:justify;line-height:150%;margin-top:20px;letter-spacing:1px;



text-transform:uppercase;box-shadow:1px 2px 1px rgba(0,0,0,0.03);border-radius:3px;} ol.notes {padding:0px;margin:25px 0px;list-style-type:none;border-bottom:solid 1px {color:Background Color};} ol.notes li.note {border-top:solid 1px {color:Background Color};padding:10px;} ol.notes li.note img.avatar {vertical-align:-4px;

margin-right:10px;width:16px;height:16px;border-radius:50%;}

/* PERMALINK */ #permalink{width:500px;text-align:left;text-transform:uppercase;font-size:8px;line-height:100%;border-bottom:solid 1px {color:Background Color};color:{color:Post Background Color};padding:0px 20px 20px 20px;margin-bottom:20px;margin-left:-20px;letter-spacing:1px;} #permalink a{font-weight:300 !important;color:{color:Text Color};margin:0px 5px;} #permalink a:first-child{margin-left:0px;} #permalink a:hover{color:{color:Accent};} #permalink a.notes{font-family: 'Montserrat', sans-serif;font-size:10px;letter-spacing:1px;



}

.like_and_reblog_buttons{list-style:none;margin-top:-13px;} .like_and_reblog_buttons li{float:right;margin:0px;margin-left:10px;height:20px;cursor:pointer !important;} #tags{width:500px;text-align:right;line-height:100%;

border-top:solid 1px {color:Background Color};color:{color:Post Background Color};padding:20px 20px 0px 20px;margin-top:20px;margin-left:-20px;letter-spacing:0.5px;line-height:150%;font-weight:400 !important;font-size:8px;}

#tags a{display:inline-block;color:{color:Text Color};margin-left:10px;opacity:0.5;}

#tags a:hover{color:{color:Accent};opacity:1;} #tags a:before {font-family:'icons';font-size:7px;content: "\e90a";margin-right:5px;float:left;}

/*------» do no? re?ove «------*/ #credit {font-family:Helvetica;font-weight:300;font-size:12px;position:fixed;bottom:10px;right:10px;z-index:99999;

} #credit a{display:block;color:#fff;background:{color:Accent};padding:5px;line-height:97%;height:10px;width:10px;overflow:hidden !important;text-align:center;} #credit a:hover{padding-right:90px;text-decoration:none;}

#thememaker{margin-left:15px;margin-top:-11px;font-size:7px;letter-spacing:3px;} /*------» ????? ??? «------*/

</style> </head> <body>

<div id="header"></div>

<div id="topbar"><div class="title"><a href="/">{text:Main Title}</a></div><div class="links">{block:ifLink5Title}<a href="http://andreeadeliu.com/contact">{text:Link 5 Title}</a>{/block:ifLink5Title}{block:ifLink4Title}<a href="http://andreeadeliu.com/tagged/blog">BLOG</a>{/block:ifLink4Title}{block:ifLink3Title}<a href="http://andreeadeliu.com/tagged/design">{text:Link 3 Title}</a>{/block:ifLink3Title}{block:ifLink2Title}<a href="http://andreeadeliu.com/tagged/illustration">Illustration</a>{/block:ifLink2Title}{block:ifLink1Title}<a href="{text:Link 1 Url}">{text:Link 1 Title}</a>{/block:ifLink1Title}</div></div>

<div class="sidebar"><div id="sidebar">

<div id="desc"><img src="{PortraitURL-64}" class="avatar">{description}</div>

<div id="search"><form action="/search" method="get"><input type="text" name="q" value="" placeholder="search blog" /><input type="submit" value="" class="sbutton" /></form></div>

<div id="navi">{block:ifSidelink1Title}<a href="{text:Sidelink 1 Url}" class="link {select:Sidelink 1 Icon}">{text:Sidelink 1 Title}</a>{/block:ifSidelink1Title}{block:ifSidelink2Title}<a href="{text:Sidelink 2 Url}" class="link {select:Sidelink 2 Icon}">{text:Sidelink 2 Title}</a>{/block:ifSidelink2Title}{block:ifSidelink3Title}<a href="{text:Sidelink 3 Url}" class="link {select:Sidelink 3 Icon}">{text:Sidelink 3 Title}</a>{/block:ifSidelink3Title}

{block:ifSidelink4Title}<a href="{text:Sidelink 4 Url}" class="link {select:Sidelink 4 Icon}">{text:Sidelink 4 Title}</a>{/block:ifSidelink4Title}</div> {block:Pagination}<div id="pagination">{block:PreviousPage}<a href="{PreviousPage}" class="jump"> </a>{/block:PreviousPage}{block:JumpPagination length="7"}{block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{block:NextPage}<a href="{NextPage}" class="jump"> </a>{/block:NextPage}</div>{/block:Pagination} </div></div>

<script>var header = document.querySelector('.sidebar');var origOffsetY = header.offsetTop;

function onScroll(e) { window.scrollY >= origOffsetY ? header.classList.add('sticky') : header.classList.remove('sticky');}

document.addEventListener('scroll', onScroll);</script>

<div id="entries">

<div id="posts">

{block:Posts}

<div id="post">

{block:Date}<div id="permalink">{block:NoteCount}<a class="notes" href="{Permalink}">{NoteCount}</a>{/block:NoteCount}<a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/">{ShortMonth} {DayOfMonthWithZero} {Year}</a>{block:RebloggedFrom}<a href="{ReblogParentURL}" target="_blank" title="{ReblogParentName}">via</a>/<a href="{ReblogRootURL}" target="_blank" title="{ReblogRootName}">src</a>{/block:RebloggedFrom}<ul class="like_and_reblog_buttons"><li>{LikeButton size="13"}</li><li>{ReblogButton size="13"}</li></ul></div>{/block:Date}

{block:Text}

{block:Title}<div class="posttitle">{Title}</div>{/block:Title}{Body}{/block:Text} {block:Link}<a href="{Url}" target="_blank" class="link-button">{block:Thumbnail}<img src="{Thumbnail}" width="540px">{/block:Thumbnail}<div class="info-container">{block:Host}<div class="publisher-container"><div class="publisher">{Host}</div></div>{/block:Host}<div class="title">{Name}</div>{block:Excerpt}<div class="excerpt">{Excerpt}</div>{/block:Excerpt}</div></a>{block:Description}{Description}{/block:Description}{/block:Link} {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{block:ContentSource}{/block:ContentSource}{block:ReblogParentURL}{/block:ReblogParentURL}{/block:Photo} {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset} {block:Quote}<div class="quotes">{Quote}</div>{block:Source}<br><div style="font-size:9px;"> {Source}</div>

{/block:Source}<br>{/block:Quote} {block:Chat}{block:Title}<div class="posttitle">{Title}</div>{/block:Title}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label" style="color:{color:Color One}"><b>{Label}</b></span>{/block:Label} {Line}</li>{/block:Lines}

</ul>{/block:Chat} {block:Audio}{AudioEmbed-500}{block:caption}{Caption}{/block:caption}{/block:Audio} {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video} {block:Answer}<div class="askimg"><img src="{AskerPortraitURL-48}"></div><div class="asker"><span>{Asker}</span><br>sent a message</div><div class="question">{Question}</div>{Answer}{/block:Answer} {block:HasTags}<div id="tags">{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}

</div> {block:PostNotes}<div id="postnotes">{PostNotes}</div>{/block:PostNotes} {/block:Posts}

</div>

</div> </body> </html>

first themes

Documents