012 :// allison
<!--
12: allison / cryothemes
-->
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<!-- IMAGES -->
<meta name="image:sidebar" content="http://static.tumblr.com/747hq6z/XuNmktxin/untitled-4.png">
<meta name="image:background" content="">
<!-- CUSTOM COLORS -->
<meta name="color: background" content="#ffffff">
<meta name="color: text" content="#000000">
<meta name="color: link" content="#333333">
<meta name="color: hover" content="#999999">
<meta name="color: scrollbar" content="#999999">
<meta name="color: border" content="#f0f0f0">
<meta name="color: blockquote border" content="#f0f0f0">
<meta name="color: sidebar" content="#000000">
<meta name="color: description" content="#ffffff">
<meta name="color: navigate links" content="#e7e7e7">
<meta name="color: navigate hover" content="#f0f0f0">
<meta name="color: blog title" content="#000000">
<meta name="color: post date" content="#555555">
<meta name="color: pagination" content="#000000">
<meta name="color: pagination background" content="#000000">
<!-- VARIOUS -->
<meta name="if:Hover Sidebar for Description" content="1">
<meta name="text:Sidebar Width" content="380">
<!-- LINKS -->
<meta name="text:Link 0 URL" content="/">
<meta name="text:Link 0" content="home">
<meta name="text:Link 1 URL" content="/ask">
<meta name="text:Link 1" content="ask">
<meta name="text:Link 2 URL" content="/archive">
<meta name="text:Link 2" content="archive">
<meta name="text:Link 3 URL" content="#?w=500">
<meta name="text:Link 3" content="links">
<meta name="text:Link 4 URL" content="">
<meta name="text:Link 4" content="">
<meta name="text:Link 5 URL" content="">
<meta name="text:Link 5" content="">
<meta name="text:Link 6 URL" content="">
<meta name="text:Link 6" content="">
<meta name="text:Link 7 URL" content="">
<meta name="text:Link 7" content="">
<meta name="text:Link 8 URL" content="">
<meta name="text:Link 8" content="">
<meta name="text:Link 9 URL" content="">
<meta name="text:Link 9" content="">
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
</head>
<style>
/* SCROLLBAR */
::-webkit-scrollbar {width:3px; height:auto; background:transparent;}
::-webkit-scrollbar-corner {background:{color: scrollbar};}
::-webkit-scrollbar-thumb:vertical {background:{color: scrollbar};}
::-webkit-scrollbar-thumb:horizontal {background:{color: scrollbar};}
/*------- Body, Links, Main, etc -------*/
body {
background:{color: background} url('{image:background}') repeat;
color:{color: text};
font-family: times;
font-size: 10px;
line-height: 150%;
padding:0;
margin:0; }
a, a:active, a:visited {
text-decoration: none;
color:{color: link};
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out; }
a:hover {
color:{color: hover};
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
}
small { font-size:10px; }
blockquote {
margin-left:10px;
padding-left:10px;
border-left:3px solid {color: blockquote border}; }
blockquote img {
max-width:400px; }
.main-wrap {
width: 900px;
margin:auto; }
/*------- Sidebar, Description, Links -------*/
#sidebar {
position:fixed;
width:{text:Sidebar Width}px;
left:130px;
height:100%;
background: url('{image:sidebar}') top center repeat;
}
.cover {
width:100%;
height:100%;
position: absolute;
{block:ifHoverSidebarforDescription}
opacity: 0;
{/block:ifHoverSidebarforDescription}
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
}
.about {
width:210px;
padding:2px;
margin:100px auto 0 auto;
}
.desc {
width:150px;
margin:auto;
background-color: {color: description};
text-align: justify;
padding:30px; }
.letter {
display:inline-block;
font-family:petit formal script;
font-size:18px;
padding-bottom: 10px;
float: right; }
.allison {
display: inline-block;
line-height: 120%;
}
.links {
text-align: center;
margin-top:15px;
padding-bottom:3px;
border-bottom:1px double {color: border}; }
.links a {
padding:0 2px;
font-family: times;
font-size:7px;
text-transform: uppercase;
letter-spacing: 1px; }
.links a:hover { font-style: italic; font-weight: bold; }
#sidebar:hover .cover { opacity:1;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out; }
#pagination {
position: fixed;
width:120px;
margin-top:50%;
text-align: right;
}
#pagination a {
font-size: 9px;
display:block;
color:{color: pagination};
width:120px;
padding-right:10px;
font-family: playfair display;
}
#pagination a:hover {
background-color: {color: pagination background};
color:white;
}
/* POSTS */
#entry {
float:right;
margin-top:80px; }
.post {
width:500px;
background-color:transparent;
margin-bottom:80px;
overflow:hidden; }
.post blockquote img {
width:500px;
max-height:400px; }
.title {
font-size:15px;
font-family:{text: Blog Title Font};
margin:5px 0 15px 5px;
font-style:italic;
letter-spacing:1px;}
.quote {
font-size:17px;
font-style:italic;
font-family:Petit Formal Script;
text-align:center; }
.source {
width:400px;
float:center;
margin:auto;
margin-top:10px;
padding-top:10px;
text-align:center;
border-top:3px double {color: border}; }
/* AUDIO POSTS */
.aud {
width:100%;
background-color:#f3f3f3;
background-image: url('http://static.tumblr.com/747hq6z/un0mk8g22/subtle_grunge.png');
background-attachment:repeat;
background-color:; }
.aud2{
height:26px;
width:6.5%;
margin-left: 45%;
overflow:hidden;
opacity:.75;}
/* ASKS */
.ques { display:block; margin-bottom: 30px; }
.answer { display:block; margin-top:20px; }
.ques asker {
font-family: petit formal script;
font-size:19px;
display:block;
margin-top:5px;
padding:5px;
text-transform: lowercase;
color: #757575; }
.ques asker a { color: ; }
.zach { padding:2px 0 5px 0; border-bottom: 1px solid #efefef; }
/* DATE, TAGS, NOTES */
.tags {
margin:15px 0;
background-color:;
background-image: url('');
padding: 7px 0px;
max-width: 100%;
font-style:italic;
text-transform: lowercase;
}
.date {
text-transform:uppercase;
letter-spacing:1px;
font-style:normal;
font-size:8px; }
/* POP UP */
#fade {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none;
background: #FFFFFF;
padding: 20px;
float: left;
line-height:150%;
font-size:10px;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
#navigate { text-align: center; }
#navigate a {
display:inline-block;
background-color: {color: navigate links};
padding:10px 0;
width:160px;
font-size: 10px;
font-family:times;
margin:3px 1px;
text-align:center;
text-transform:uppercase;
}
#navigate a:hover {
background-color: {color: navigate hover}; }
/* --- 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 id="pagination">
{block:Pagination}
{block:NextPage}
<a href="{NextPage}">forward</a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}">backward</a>
{/block:PreviousPage}
{/block:Pagination}
</div>
<div id="sidebar">
<div class="cover">
<div class="about">
<div class="desc">
<div class="letter">— {Title}</div>
<div class="allison">{Description}</div>
<div class="links">
<a href="{text:Link 0 URL}">{text:Link 0}</a>
<a href="{text:Link 1 URL}">{text:Link 1}</a>
<a href="{text:Link 2 URL}">{text:Link 2}</a>
<a href="{text:Link 3 URL}" rel="popup_links" class="poplight">{text:Link 3}</a>
</div>
</div>
</div>
</div>
</div>
<div class="main-wrap">
<div id="entry">
{block:Posts}
<div class="post">
{block:Text}
{block:Title}
<div class="title"><a href="{Permalink}">{Title}</a></div>
{/block:Title}
{Body}
{/block:Text}
{block:Photo}
<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Photo}
{block:Photoset}
<center>{Photoset-500}</center>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Photoset}
{block:Quote}
<div class="quote">"{Quote}"</div>
{block:Source}
<div class="source">- {Source}</div>
{/block:Source}
{/block:Quote}
{block:Link}
<center><div class="title"><a href="{URL}" class="link" {Target}>{Name}</a></div></center>
{block:Description}
{Description}
{/block:Description}
{/block:Link}
{block:Chat}{block:Title}<div class="title">{Title}</div>{/block:Title}<p>
<div style="margin:-10px 0px;">
{block:Lines}<div style="padding:7px 3px; border-bottom: 1px solid {color: border}; ">{block:Label}<span style="color: {color: link}; text-transform: uppercase; letter-spacing: 1px;">{Label}</span>{/block:Label} {Line}<br></div>{/block:Lines}</div><br />{/block:Chat}
{block:Video}
<center>{Video-500}</center>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}
{block:Answer}
<div class="ques">
<asker>{Asker}:</asker><div class="zach">{Question}</div>
<div class="answer">{Answer}</div>
</div>
{/block:Answer}
{block:Audio}
<div style="border-top:1px solid #fff;"></div>
<div class="aud"><div class="aud2"><center>{AudioPlayerWhite}</center></div></div><div style="border-top:1px solid #fff;"></div>{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
{/block:Audio}
{block:IndexPage}
<div class="tags">
<div class="date">
<a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}</a>
{block:NoteCount} ∙ <a href="{Permalink}">{NoteCount}</a>{/block:NoteCount}
</div>
{block:HasTags}
{block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}
{/block:HasTags}
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div style="text-align:right;">
<div class="tags">
<div class="date">
<a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}</a>
{block:NoteCount} ∙ <a href="{Permalink}">{NoteCount}</a>{/block:NoteCount}<br>
{block:ContentSource}
<a href="{SourceURL}">originally</a> {block:RebloggedFrom}/ <a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}{/block:ContentSource}</div>
{block:HasTags}tagged: <i>
{block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags} </i>
{/block:HasTags}
</div></div>
{/block:PermalinkPage}
{block:PostNotes}
<div style="height:30px; width:100%; "></div>
{PostNotes}
{/block:PostNotes}
{block:ContentSource}<!-- <div class="from">
<a href="{SourceURL}">originally</a> {block:RebloggedFrom}/ <a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}</div> -->{/block:ContentSource}
</div>
{/block:Posts}
</div>
</div>
<!------ POP UP NAVIGATION ----->
<div id="popup_links" class="popup_block">
<div id="navigate">
<a href="{text:Link 4 URL}">{text:Link 4}</a>
<a href="{text:Link 5 URL}">{text:Link 5}</a>
<a href="{text:Link 6 URL}">{text:Link 6}</a><br>
<a href="{text:Link 7 URL}">{text:Link 7}</a>
<a href="{text:Link 8 URL}">{text:Link 8}</a>
<a href="{text:Link 9 URL}">{text:Link 9}</a>
</div>
</div>
<!------ POP UP JAVASCRIPT ------->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
</body>
</html> Pasted: May 8, 2014, 1:58:38 pm
Views: 443