<!--- 15: verboten / cryothemes ---> <html> <head> <html> <head> <title>{Title}</title> <link rel="shortcut icon" href="{Favicon}"> <link rel="altertnate" type="application/rss+xml" href="{RSS}"> <!--- COLOUR CONTROL ---> <meta name="color:Background Color" content="#fbfbfb"> <meta name="color:Font Color" content="#000000"> <meta name="color:Link Color" content="#2e2e2e"> <meta name="color:Link Hover Color" content="#666666"> <meta name="color:Scrollbar Thumb" content="#000000"> <meta name="color:Scrollbar Background" content="#ffffff"> <meta name="color:Blockquote Background" content="#f3f3f3"> <meta name="color:Header Background" content="#fbfbfb"> <meta name="color:Header Title" content="#000000"> <meta name="color:Menu Link Color" content="#000000"> <meta name="color:Menu Link Hover" content="#dadada"> <meta name="color:Menu Background" content="#fbfbfb"> <meta name="color:Post Border" content="#eaeaea"> <meta name="color:Post Background" content="#ffffff"> <!--- TEXT INPUTS + FONTS ---> <meta name="text:Header Font" content="Lato"> <meta name="text:Before Tags" content="filed under"> <meta name="text:Pop Up Link" content="more"> <meta name="font:Main Font" content="Helvetica"> <!--- SHOW/HIDE ELEMENTS ---> <meta name="if:400px Posts" content="0"> <meta name="if:250px Posts" content="1"> <!--- GOOGLE FONTS ---> <link href='http://fonts.googleapis.com/css?family=Lato:100,200,300,400,700,900' rel='stylesheet' type='text/css'> <!--- LINK INPUTS ---> <meta name="text:Link 1" content="/"> <meta name="text:Link 1 URL" content="/"> <meta name="text:Link 2" content="/"> <meta name="text:Link 2 URL" content="/"> <meta name="text:Link 3" content="/"> <meta name="text:Link 3 URL" content="/"> <meta name="text:Link 4" content="/"> <meta name="text:Link 4 URL" content="/"> <meta name="text:Link 5" content="/"> <meta name="text:Link 5 URL" content="/"> <meta name="text:Link 6" content="/"> <meta name="text:Link 6 URL" content="/"> <!--- SCRIPT CODES | DO NOT ALTER BELOW ---> <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script> $(function(){ var shrinkHeader = 50; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= shrinkHeader ) { $('.header, .menu').addClass('shrink'); } else { $('.header, .menu').removeClass('shrink'); } }); function getCurrentScroll() { return window.pageYOffset; } }); </script> <!--- END SCRIPT CODES | DO NOT ALTER ABOVE ---> </head> <style type="text/css"> /*---- MAIN BODY ----*/ ::-webkit-scrollbar{ width: 11px; height: 11px; } ::-webkit-scrollbar-track { background-color: {color:Scrollbar Background}; } ::-webkit-scrollbar-thumb{ border: 5px solid {color:Scrollbar Background}; background-color: {color:Scrollbar Thumb}; } ::-webkit-scrollbar-track-piece { height: 30px; width: 30px; } body { background-color: {color:Background Color}; background-image: url('{image:Background Image}'); background-position: left bottom; background-repeat: no-repeat; font-family: {font:Main Font}; font-size: 11px; font-weight:normal; color: {color:Font Color} padding:0; margin:0; } a { color: {color:Link Color}; text-decoration: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:hover { color: transparent; text-shadow: 0 0 1px rgba(0,0,0,0.5); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } b, strong { font-weight: 900; } i, em { font-style: italic; } small { font-size:9px; } big { font-size: 13px; font-weight: 700; } blockquote { margin:10px; padding:10px; background-color: {color:Blockquote Background}; } /*---- HEADER ----*/ .header { position: fixed; top: 0; left: 0; width: 100%; background: {color:Header Background}; color:{color:Header Title}; z-index: 1000; height: 170px; overflow: hidden; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; text-align:center; } .header.shrink { height:30px; } .header h1 { font-size:31px; font-family: {text:Header Font}; font-weight:900; letter-spacing:1px; padding:60px 0 0 0; color:{color:Header Background}; text-transform: none; cursor:pointer; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .header h1 a { color:{color:Header Background}; -webkit-text-stroke-width: 0.05em; -webkit-text-stroke-color: {color:Header Title};} .header.shrink h1 { font-size:0px; height:0; padding:0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /* MENU / NORMAL */ .menu { display:block; width:100%; padding:12px 0 0px 0; margin:auto; background-color:{color:Menu Background}; font-size:7px; font-weight:900; letter-spacing:1px; text-align:center; -webkit-backface-visibility: hidden; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .menu a { display:inline-block; color: {color:Menu Link Color}; text-transform:uppercase; text-align:left; margin-right:10px; padding-bottom:10px; -webkit-backface-visibility: hidden; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .menu a:last-child { margin-right:0; } .menu a:hover { color: transparent; text-shadow: 0 0 1px rgba(0,0,0,0.5); -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /* MENU / SHRINK */ .menu.shrink { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } /* CONTENT + POSTS */ .content { width:100%; height:auto; background-color:transparent; } #entries { display: block; {block:IndexPage} {block:if400pxPosts} width: 416px; {/block:if400pxPosts} {block:if250pxPosts} width: 266px; {/block:if250pxPosts} {/block:IndexPage} {block:PermalinkPage} width:416px; {/block:PermalinkPage} margin:290px auto 0 auto; text-align:center; } .post { display:block; {block:IndexPage} {block:if400pxPosts} width:400px; {/block:if400pxPosts} {block:if250pxPosts} width: 250px; {/block:if250pxPosts} {/block:IndexPage} {block:PermalinkPage} width:400px; {/block:PermalinkPage} text-align: justify; padding:8px; font-weight:lighter; line-height:170%; margin-top:130px; background-color:{color:Post Background}; {block:IndexPage} border:1px solid {color:Post Border}; {/block:IndexPage} } .post img { margin-bottom:-5px; max-width:100%; } .photoset { display:block; width:100%; } .photoset img { width:100%; } .caption { padding:0; {block:IndexPage}display:none;{/block:IndexPage} } .title { display:block; font-size:15px; font-family:{text:Header Font}; font-weight:900; letter-spacing:1px; text-transform:uppercase; padding:5px; } .post-info { font-weight:normal; {block:IndexPage} position:absolute; opacity:0; font-size:8px; {block:if400pxPosts} width: 400px; {/block:if400pxPosts} {block:if250pxPosts} width: 250px; {/block:if250pxPosts} text-align:center; padding-top:20px; {/block:IndexPage} {block:PermalinkPage} position:absolute; width:400px; opacity:1; margin-bottom:30px; font-size:10px; {/block:PermalinkPage} font-family:Lato; text-transform:uppercase; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .tags { display:block; margin-top:20px; text-transform:lowercase; font-size:10px; } .tags a:after { content: ","; } .tags a:last-child:after { content:""; } .post:hover .post-info { opacity:1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;} .post-notes { display:block; width:400px; margin:130px auto; height:300px; overflow-y:auto; text-align:left; overflow-x:hidden; font-size:9px; padding:0 20px; background-color: transparent; } .notes img { display:none; } ol.notes, .notes li { width:400px; list-style:none; padding:3px; } .post-notes h1 {display:block; font-family:Lato; font-weight:900; text-transform:uppercase; padding:10px 5px; margin:0; font-size:12px; } /* MISC */ #pagi { display:block; width:100%; font-size:11px; text-transform:lowercase; margin-top:100px; padding-top:10px; text-align:left; height:100px; } #pagi a { display:inline-block; font-family:Lato; font-weight:900; text-transform:uppercase; font-size:9px; } #pagi a:last-child { float:right; } /* AUDIO */ .aud { width:110px; height:110px; margin:0; background-color: {color:Font Color}; display:inline-block; background-attachment:repeat; } .aud2{ height:26px; width:20px; margin-left: 41%; padding:40px 0; overflow:hidden; opacity:1;} .audinfo { display:inline-block; margin-left:10px; vertical-align:top; } .audline { display:block; width:120px; text-transform:uppercase; margin-bottom:10px; font-family:Lato; font-weight:700; font-size:8px; letter-spacing:1px; border-bottom:1px solid rgba(00,00,00,0.1); } /* QUOTE */ .quote { display:block; font-family:Lato; text-transform:uppercase; font-size:9px; font-weight:900; letter-spacing:1px; } .source { display:block; text-align:right; padding-top:10px; } /* ASK POSTS */ .ask { display:block; background-color: {color:Blockquote Background}; padding:10px; margin:5px; } .asker { display:block; text-align:center; font-weight:900; font-family:Lato; text-transform:uppercase; font-size:9px; letter-spacing:1px; } .answer { padding:0 10px; } /* POP UP */ .box { background-color: rgba(00,00,00,0.5); position:fixed; top: 0; display:none; left: 0; width: 100%; height: 100%; z-index:9999; } .inbox { background-color:rgba(255,255,255,0.4); position:absolute; top: 50%; left: 50%; margin-left:-200px; margin-top:-200px; width: 400px; height: 300px; z-index:999999; } .show { display:inline-block; color: {color:Menu Link Color}; text-transform:uppercase; text-align:left; padding-bottom:10px; cursor:pointer; -webkit-backface-visibility: hidden; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .show:hover { color: transparent; text-shadow: 0 0 1px rgba(0,0,0,0.5); -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .inbox a.hide { position: absolute; top: 10px; right: 10px; width: 40px; padding:7px 0; background-color:{color:Post Border}; text-align: center; font-size: 7px; letter-spacing:1px; font-family:Lato; cursor:pointer; font-weight:900; text-transform:uppercase; display: block; } .stuff { margin: 10px; padding: 20px; background-color:white; height: 240px; width: 340px; font-size: 11px; letter-spacing: 1px; line-height: 170%; overflow: auto; text-align: justify; } .stufftext { display:block; letter-spacing:0; margin-right:25px; max-height:170px; overflow:auto; padding-right:10px;} .stufflinks { position:absolute; width:330px; display:block; top:205px; } .stufflinks a { display:inline-block; text-align:center; padding:3px 0px; width:150px; font-weight:900; font-family:Lato; font-size:9px; text-transform:uppercase; margin:5px 5px 5px 0; border:1px solid {color:Post Border}; } .stufflinks a:hover { background-color:rgba(00,00,00,0.4); color:{color:Background Color}; } /* --- DO NOT REMOVE OR ALTER --- */ .credit { position:fixed; bottom:0; right:0; font-weight: bold; color:black; padding:20px; font-size:13px; } .cryo { display:inline-block; font-size:7px; color:black; letter-spacing:1px; float:left; text-transform:uppercase; padding-right:15px; padding-bottom:1px; opacity:0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} .credit a, .credit a:hover { color:black; } .credit:hover .cryo { opacity:1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} </style> <body> <!-- do not remove --> <div class="credit"><div class="cryo">cryothemes</div><a class="cr" href="http://cryothemes.tumblr.com/"><i class="ion-android-radio-button-on"></i></a></div> <!-- do not remove --> <div class="box"> <div class="inbox"> <a class="hide">exit</a> <div class="stuff"> <div class="stufftext">{Description}</div> <div class="stufflinks"> <a href="{text:Link 3 URL}">{text:Link 3}</a> <a href="{text:Link 4 URL}">{text:Link 4}</a><br> <a href="{text:Link 5 URL}">{text:Link 5}</a> <a href="{text:Link 6 URL}">{text:Link 6}</a> </div> </div> </div> </div> <div class="header"> <h1><a href="/">{Title}</a></h1> <div class="menu"> <a href="/">home</a> <a href="{text:Link 1 URL}">{text:Link 1}</a> <a href="{text:Link 2 URL}">{text:Link 2}</a> <div class="show">{text:Pop Up Link}</div> </div> </div> <div class="content"> <div id="entries"> {block:Posts} <div class="post"> <!-- TEXT --> {block:Text} {block:Title} <div class="title"><a href="{Permalink}">{Title}</a></div> {/block:Title} <div style="padding:0px 5px;"> {Body} </div> {/block:Text} <!-- PHOTO --> {block:Photo} <center> {block:IndexPage} {block:if400pxPosts} <img src="{PhotoURL-400}" alt="{PhotoAlt}"/> {/block:if400pxPosts} {block:if250pxPosts} <img src="{PhotoURL-250}" alt="{PhotoAlt}"/> {/block:if250pxPosts} {/block:IndexPage} {block:PermalinkPage} <img src="{PhotoURL-400}" alt="{PhotoAlt}"/> {/block:PermalinkPage} </center> {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} {/block:Photo} <!-- PHOTOSET --> {block:Photoset} <center> {block:IndexPage} {block:if400pxPosts} {Photoset-400} {/block:if400pxPosts} {block:if250pxPosts} {Photoset-250} {/block:if250pxPosts} {/block:IndexPage} {block:PermalinkPage} {Photoset-400} {/block:PermalinkPage} </center> {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} {/block:Photoset} <!-- QUOTE --> {block:Quote} <div class="quote">{Quote}</div> {block:Source} <div class="source">— {Source}</div> {/block:Source} {/block:Quote} <!-- LINK --> {block:Link} <center><div class="title"><a href="{URL}" class="link" {Target}>{Name}</a></div></center> {block:Description} <div class="post-in"> {Description} </div> {/block:Description} {/block:Link} <!-- CHAT --> {block:Chat} {block:Lines}<div style="padding:4px 3px; text-align:left; ">{block:Label}<span style="text-transform: uppercase; font-size:9px; letter-spacing: 1px;"><b>{Label}</b></span>{/block:Label}<span style="padding-left:5px; font-size:11px;">{Line}</span><br></div>{/block:Lines} {/block:Chat} <!-- AUDIO --> {block:Audio} <div class="aud"><div class="aud2"><center>{AudioPlayerBlack}</center></div></div> <div class="audinfo"> <div class="audline"> {block:Artist}{Artist}{/block:Artist} </div> <div class="audline"> {block:TrackName} {TrackName} {/block:TrackName} </div> <div class="audline"> {block:PlayCount} {PlayCount} plays{/block:PlayCount} </div> </div> </span> {/block:Audio} <!-- VIDEO --> {block:Video} <center> {block:IndexPage} {block:if400pxPosts} {Video-400} {/block:if400pxPosts} {block:if250pxPosts} {Video-250} {/block:if250pxPosts} {/block:IndexPage} {block:PermalinkPage} {Video-500} {/block:PermalinkPage} </center> {block:Caption} {Caption} {/block:Caption} {/block:Video} <!-- ANSWER --> {block:Answer} <div class="asker">{Asker}</div> <div class="ask"> {Question}</div> <div class="answer">{Answer}</div> {/block:Answer} {block:IndexPage} <div class="post-info"> <div class="date"> {block:Date} <b> <a href="{Permalink}"> {DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a> </b> <br> {block:NoteCount} <a href="{Permalink}">{NoteCount}</a><br> {/block:NoteCount} {/block:Date} </div> </div> {/block:IndexPage} {block:PermalinkPage} <div class="post-info"><br><center> <div class="date"> {block:Date} <b> <a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} </a> </b> {block:NoteCount} <a href="{Permalink}">{NoteCountWithLabel}</a><br> {/block:NoteCount} {/block:Date} {block:ContentSource} <a href="{SourceURL}">source</a> {block:RebloggedFrom} / <a href="{ReblogParentURL}">via</a> {/block:RebloggedFrom} {/block:ContentSource} </div> {block:HasTags} <div class="tags"> <b>{text:Before Tags}</b>: {block:Tags} <a href="{TagURL}">{Tag}</a> {/block:Tags} </div> {/block:HasTags} </center></div> {/block:PermalinkPage} </div> {block:PostNotes} <div class="post-notes"> {block:NoteCount}<h1>{NoteCountWithLabel}</h1> {/block:NoteCount} {PostNotes} </div> {/block:PostNotes} {/block:Posts} <div id="pagi"> {block:PreviousPage} <a href="{PreviousPage}">back</a> {/block:PreviousPage} {block:NextPage} <a href="{NextPage}">forth</a> {/block:NextPage} {/block:Pagination} </div> </div> </div> <script> $(document).ready(function(){ $(".show").click(function(){ $(".box").fadeToggle("slow"); }); $(".hide").click(function(){ $(".box").fadeToggle("slow"); }); }); </script> </body> </html>