Skip to content

Instantly share code, notes, and snippets.

@kazupon

kazupon/Makefile

Created February 21, 2012 05:17
Show Gist options
  • Save kazupon/1873913 to your computer and use it in GitHub Desktop.
Save kazupon/1873913 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Makefile
LESS_FILE = ./style.less
CSS_FILE = ./style.css
CSS_COMPRESS_FILE = ./style.min.css
LESS = lessc
build:
${LESS} ${LESS_FILE} | sed -e s/\'__\{/\{/g -e s/\}__\'/\}/g > ${CSS_FILE}
${LESS} --compress ${LESS_FILE} | sed -e s/\'__\{/\{/g -e s/\}__\'/\}/g > ${CSS_COMPRESS_FILE}
clean:
rm ${CSS_FILE}
rm ${CSS_COMPRESS_FILE}
.PHONY: clean build
Raw
style.css
body {
background: {color:Background};
}
#posts .text {
background: {color:TextContent};
}
#posts .photo {
background: {color:PhotoContent};
}
#posts .photoset {
background: {color:PhotosetContent};
}
#posts .quote {
background: {color:QuoteContent};
}
#posts .link {
background: {color:LinkContent};
}
#posts .chat {
background: {color:ChatContent};
}
#posts .video {
background: {color:VideoContent};
}
#posts .audio {
background: {color:AudioContent};
}
Raw
style.less
@main_bg_color: '__{color:Background}__';
@text_content_bg_color: '__{color:TextContent}__';
@photo_content_bg_color: '__{color:PhotoContent}__';
@photoset_content_bg_color: '__{color:PhotosetContent}__';
@quote_content_bg_color: '__{color:QuoteContent}__';
@link_content_bg_color: '__{color:LinkContent}__';
@chat_content_bg_color: '__{color:ChatContent}__';
@video_content_bg_color: '__{color:VideoContent}__';
@audio_content_bg_color: '__{color:AudioContent}__';
@text_color: '__{color:Text}__';
body {
background: @main_bg_color;
}
#posts {
.text {
background: @text_content_bg_color;
}
.photo {
background: @photo_content_bg_color;
}
.photoset {
background: @photoset_content_bg_color;
}
.quote {
background: @quote_content_bg_color;
}
.link {
background: @link_content_bg_color;
}
.chat {
background: @chat_content_bg_color;
}
.video {
background: @video_content_bg_color;
}
.audio {
background: @audio_content_bg_color;
}
}
Raw
style.min.css
body{background:{color:Background};}
#posts .text{background:{color:TextContent};}
#posts .photo{background:{color:PhotoContent};}
#posts .photoset{background:{color:PhotosetContent};}
#posts .quote{background:{color:QuoteContent};}
#posts .link{background:{color:LinkContent};}
#posts .chat{background:{color:ChatContent};}
#posts .video{background:{color:VideoContent};}
#posts .audio{background:{color:AudioContent};}
Raw
template.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<!-- S:tumblr template engine variables -->
<meta name="color:Background" content="#3b627e" />
<meta name="color:TextContent" content="#5a308d" />
<meta name="color:PhotoContent" content="#90deec" />
<meta name="color:PhotosetContent" content="#01dded" />
<meta name="color:QuoteContent" content="#73b8c4" />
<meta name="color:LinkContent" content="#8abd50" />
<meta name="color:ChatContent" content="#e1e1e1" />
<meta name="color:VideoContent" content="#bb225a" />
<meta name="color:AudioContent" content="#cf4039" />
<meta name="color:Text" content="#000000"/>
<!-- E:tumblr template engine variables -->
<title>{Title}</title>
<style type="text/css"></style>
</head>
<body>
<h1>{Title}</h1>
<ol id="posts">
{block:Posts}
{block:Text}
<li class="post text">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</li>
{/block:Text}
{block:Photo}
<li class="post photo">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}
{block:Photoset}
<li class="post photoset">
{Photoset-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photoset}
{block:Quote}
<li class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
{/block:Quote}
{block:Link}
<li class="post link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</li>
{/block:Link}
{block:Chat}
<li class="post chat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</li>
{/block:Chat}
{block:Video}
<li class="post video">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
{block:Audio}
<li class="post audio">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Audio}
{/block:Posts}
</ol>
<p id="footer">
{block:PreviosePage}
<a href="{PreviousPage}">&#171; Previous</a>
{/block:PreviosePage}
{block:NextPage}
<a href="{NextPage}">Next &#187;</a>
{/block:NextPage}
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment