Skip to content

Instantly share code, notes, and snippets.

@ryderr

ryderr/gist:4049290

Created November 10, 2012 00:47
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryderr/4049290 to your computer and use it in GitHub Desktop.
Save ryderr/4049290 to your computer and use it in GitHub Desktop.
Download ZIP
3 col webe.at theme im workin on
Raw
gistfile1.txt
<html>
<head>
<title>
{{#text.title}}
{{text.title}}
{{/text.title}}
{{^text.title}}
{{title}}
{{/text.title}} {{#single_event}} - {{name}}{{/single_event}} - webe.at</title>
</head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js'></script>
<script>
$(function(){
$(".pasttoggle").click(function(){
$(".future").toggleClass("hideit");
$(".past").toggleClass("showit");
$('.texttoggler').toggleClass("futuretxt");
return false;
});
$(window).scroll(function(){
if($(window).scrollTop()<100){
$('header').stop(true,true).css("opacity","1");
$('header').css("pointer-events","auto");
} else {
$('header').stop(true,true).css("opacity","0");
$('header').css("pointer-events","none");
}
});
});
</script>
<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Serif:400,700,400italic,700italic|Nosifer);
@font-face {
font-family: 'modern_pictogramsnormal';
src: url('http://4tunemall.com/font/modernpics-webfont.eot');
src: url('http://4tunemall.com/font/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
url('http://4tunemall.com/font/modernpics-webfont.woff') format('woff'),
url('http://4tunemall.com/font/modernpics-webfont.ttf') format('truetype'),
url('http://4tunemall.com/modernpics-webfont.svg#modern_pictogramsnormal') format('svg');
font-weight: normal;
font-style: normal;
}
body{ background:white url({{text.background_image}})fixed;
font-family: 'Droid Sans', serif;
{{#if.serif_fonts}}font-family: 'Droid Serif', sans-serif;{{/if.serif_fonts}}
font-size:100%;
padding-bottom:50px;
}
{{#if.toggle_goth}}
body{
font-family: 'Nosifer', cursive;
font-size:200%;
}
{{/if.toggle_goth}}
#rapper {
width: 940px;
margin: 0 auto;
padding: 0 60px 60px 0;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
position: relative;
overflow: hidden;
}
#content {
position: relative;
padding-top: 390px;
}
header {
width: 1000px;
position: fixed;
top: 0px;
min-height: 85px!important;
height: auto;
border-top: none;
border-bottom: none;
overflow: hidden;
z-index: 2;
background-image:url(https://s3.amazonaws.com/luckyplop/c80946b778db51957af58738f54353bf9e4d7515.png);
padding-bottom:40px;
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity .3s ease;
-moz-transition: opacity .3s ease;
transition: opacity .3s ease;
}
#headline {
font-size: 27px;
font-size: 35px;
font-style: italic;
font-weight:800;
text-shadow:-1px 1px #eee;
}
.hideit {
display: none!important;
}
.showit {
display: inline-block!important;
}
.pasttoggle {
color: blue;
cursor: pointer;
margin-left:55px;
}
.texttoggler:before {
content: "past "
}
.texttoggler.futuretxt:before {
content: "future "
}
.event.contact {
border-bottom:0px dashed rgba(0, 0, 0, 0.2);
margin:10px 30px;
display:inline-block;
font-style:italic;
font-size:16px;
margin-left:55px;
}
.event {
font-size: 13px;
line-height: 21px;
margin-bottom: 65px;
position: relative;
clear:both;
display: inline-block;
padding-bottom: 40px;
border-bottom: 1px solid #eee;
width: 100%;
}
.info {
font-size: 11px ;
padding-top: 8px;
display:inline-block;
font-weight:normal;
margin-bottom: 20px;
width:100%;
}
a{color:#6B00F7;text-decoration:none;}
a:visited{color:#6B00F7;text-decoration:none;}
h1 {
font-size: 12px;
color: #000000!important;
float: left;
font-weight:normal;
}
h3 {
font-size: 13px;
color: #848484!important;
margin: 0px 0 10px 0;
display:inline-block;
font-weight:normal;
}
.icon {
font-family: 'modern_pictogramsnormal'!important;
}
.buttons {
display: inline-block;
width: 100%;
text-align: left;
font-size: 13px;
border-bottom: 1px solid #eee;
margin:8px 0;
padding-bottom:15px;
}
.recal {
color: #848484!important;
float: left;
margin-right: 15px;
}
.recal:before {
content: "R";
font-family: 'modern_pictogramsnormal';
font-style: normal;
padding-right: 5px;
font-size: 16px;
}
.permalink {
float: left;
color: #848484!important;
}
.permalink:before {
color: #999;
font-family: 'modern_pictogramsnormal';
content: ">";
font-style: normal;
padding-right: 5px;
font-size: 16px;
}
.from b{
color: #848484;
font-weight:100;
}
.leftcol {
float:left;
width:185px;
font-family: "Menlo", "Monaco", "Lucida Console", Monospace;
font-weight: normal;
font-size: 10px;
line-height: 20px;
color: #999999;
margin-left: 60px;
margin-right: 40px;
}
.from a {
color: #848484;
font-size: 11px;
font-style: normal;
}
.from a:after {
content: ",";color:black;
}
.from a:last-child:after {
content: ".";color:black;
}
.from.past {
display: none;
}
.eventimage {
width:400px;
float: right;
margin-bottom: 65px;
}
.inner {
font-weight: normal;
font-size: 10px;
line-height: 20px;
color: #999999;
width: 210px;
float: left;
padding-right: 40px;
}
.inner p{ font-family: "Menlo", "Monaco", "Lucida Console", Monospace;
}
.user-recaled img{
width:10px; margin:0 4px;
}
/*custom param stylez*/
#headline, .contact {
color: {{color.headline}}!important;
background: {{color.headline_background}};
}
.date{
color: {{color.date}}!important;
}
.past {
display:none;
}
.title {
background:transparent!important;
font-size: 21px;
line-height: 35px;
font-style: italic;
margin-top: 0;
color: {{color.title}}!important;
}
.description {
color: {{color.description}};
text-overflow: ellipsis;
word-wrap: break-word;
}
a{color: {{color.link_color}}!important;}
a:visited{color:{{color.link_color}}!important
}
@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
html{max-width:480px;}
.event {
text-align:left;
width:300px;
padding-left:10px;
margin-left:10px;
}
.description {
width: 300px;
}
#headline{margin:35px 0 5px 5px;}
.title {font-size:20px;line-height: 28px;}
h3 {margin:0;}
.recal{display:none;}
.permalink{display:none;}
.ui-accordion .ui-accordion-content.inner{padding:10px 0 0px 30px}
}
}
</style>
<meta name="text:title" value="">
<meta name="text:sub_heading" value="">
<meta name="text:background_image" value="">
<meta name="color:headline" value="#B8B8B8">
<meta name="color:date" value="#B8B8B8">
<meta name="color:title" value="#B8B8B8">
<meta name="color:title_background" value="#B8B8B8">
<meta name="color:link_color" value="#000">
<meta name="if:serif_fonts" value="false">
<meta name="if:toggle_goth" value="false">
<body>
<div id="rapper">
<header>
<a href="{{path}}">
<h1 id="headline">
<img src="{{owner_avatar.small}}">
{{#text.title}}
{{text.title}}
{{/text.title}}
{{^text.title}}
{{title}}
{{/text.title}}
</h1>
</a>
{{#text.sub_heading}}
<span class="event contact">{{text.sub_heading}}</span>
{{/text.sub_heading}}
{{^text.sub_heading}}
{{/text.sub_heading}}
<div href="#"class="pasttoggle">view <span class="texttoggler">events</span></div>
</header>
<div id="content">
{{#has_events}}
{{#single_event}}
<style>
.pasttoggle{display:none;}
</style>
<div class="event future">
<img src="{{image}}"class="eventimage">
<div class="leftcol">
<h1 class="weekday">{{start_weekday}}</h1>
<h1 class="date">{{start_date_text}} {{start_time_text}}</h1>
<div class="buttons">
<span data-id='{{id}}'><a href="#"class="recal">recal</a></span>
<a href="{{permalink}}"class="permalink">permalink</a>
</div>
{{#recal_from_username}}
<p>recaled from: <a href="{{recal_path}}">{{recal_from_username}}</a></p>
{{/recal_from_username}}
</div>
<div class="inner">
<a href="{{path}}"><h2 class="title">{{name}}</h2></a>
<a href="{{maps_link}}"target="_blank">
<img src="http://maps.googleapis.com/maps/api/staticmap?center={{latitude}} ,{{longitude}}&zoom=15&size=160x160&sensor=false"><br>
<span id ="local">{{linked_location}}</span>
</a>
{{#description}}
<h3 class="description">{{linked_description}}</h3>
{{/description}}
{{^description}}
<p></p>
{{/description}}
<div class="info">
{{#has_recals}}
<span class="from">
<b class="recaledtxt">recaled by:</b>
{{#recals}}
<a href="{{cal.path}}"class="user-recaled"><img src="{{cal.avatar.small}}">{{cal.name}}</a>
{{/recals}}
</span>
{{/has_recals}}
</div>
</div>
</div>
{{/single_event}}
{{^single_event}}
{{#future_events}}
<div class="event future">
<img src="{{image}}"class="eventimage">
<div class="leftcol">
<h1 class="weekday">{{start_weekday}}</h1>
<h1 class="date">{{start_date_text}} {{start_time_text}}</h1>
<div class="buttons">
<span data-id='{{id}}'><a href="#"class="recal">recal</a></span>
<a href="{{permalink}}"class="permalink">permalink</a>
</div>
{{#recal_from_username}}
<p>recaled from: <a href="{{recal_path}}">{{recal_from_username}}</a></p>
{{/recal_from_username}}
</div>
<div class="inner">
<a href="{{path}}"><h2 class="title">{{name}}</h2></a>
<a href="{{maps_link}}"target="_blank">
<img src="http://maps.googleapis.com/maps/api/staticmap?center={{latitude}} ,{{longitude}}&zoom=15&size=160x160&sensor=false"><br>
<span id ="local">{{linked_location}}</span>
</a>
{{#description}}
<h3 class="description">{{linked_description}}</h3>
{{/description}}
{{^description}}
<p></p>
{{/description}}
<div class="info">
{{#has_recals}}
<span class="from">
<b class="recaledtxt">recaled by:</b>
{{#recals}}
<a href="{{cal.path}}"class="user-recaled"><img src="{{cal.avatar.small}}">{{cal.name}}</a>
{{/recals}}
</span>
{{/has_recals}}
</div>
</div>
</div>
{{/future_events}}
{{^future_events}}
<style>
.pasttoggle{display:none}
.past{display:block;}
</style>
{{/future_events}}
{{#past_events}}
<div class="event past">
<img src="{{image}}"class="eventimage">
<div class="leftcol">
<h1 class="weekday">{{start_weekday}}</h1>
<h1 class="date">{{start_date_text}} {{start_time_text}}</h1>
<div class="buttons">
<span data-id='{{id}}'><a href="#"class="recal">recal</a></span>
<a href="{{permalink}}"class="permalink">permalink</a>
</div>
{{#recal_from_username}}
<p>recaled from: <a href="{{recal_path}}">{{recal_from_username}}</a></p>
{{/recal_from_username}}
</div>
<div class="inner">
<a href="{{path}}"><h2 class="title">{{name}}</h2></a>
<a href="{{maps_link}}"target="_blank">
<img src="http://maps.googleapis.com/maps/api/staticmap?center={{latitude}} ,{{longitude}}&zoom=15&size=160x160&sensor=false"><br>
<span id ="local">{{linked_location}}</span>
</a>
{{#description}}
<h3 class="description">{{linked_description}}</h3>
{{/description}}
{{^description}}
<p></p>
{{/description}}
<div class="info">
{{#has_recals}}
<span class="from">
<b class="recaledtxt">recaled by:</b>
{{#recals}}
<a href="{{cal.path}}"class="user-recaled"><img src="{{cal.avatar.small}}">{{cal.name}}</a>
{{/recals}}
</span>
{{/has_recals}}
</div>
</div>
</div>
{{/past_events}}
{{^past_events}}
<style>
.pasttoggle{display:none}
</style>
{{/past_events}}
{{/single_event}}
{{/has_events}}
{{^has_events}}
<p>no events :( </p>
{{/has_events}}
</div>
</div>
</body>
</html>
@yyolk
Copy link

yyolk commented Nov 11, 2012

what template is this for?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment