Skip to content

Instantly share code, notes, and snippets.

@mithicher

mithicher/mlemon.html

Created September 17, 2013 13:56
Show Gist options
  • Save mithicher/6594660 to your computer and use it in GitHub Desktop.
Save mithicher/6594660 to your computer and use it in GitHub Desktop.
Download ZIP
A simple Tumblr template based on Lemonade Grid.
Raw
mlemon.html
<!doctype html>
<html>
<head>
<!--
Theme: MLemon
Created by : Mithicher B.
Twitter: @mithicher
Version: 1.0
-->
<meta name="color:Background" content="#bdc3c7">
<meta name="color:Body Title" content="#34495e">
<meta name="color:Body Title Hover" content="#3498db">
<meta name="color:Body Text" content="#434343">
<meta name="font:Title" content='Verdana, sans-serif'>
<meta name="font:Body" content='Helvetica, Arial, serif'>
<meta name="if:Infinite scroll" content="1"/>
<meta name="if:Show Search Bar" content="1">
<meta name="if:Show People I Follow" content="1">
<meta name="text:Google Analytics ID" content=''/>
<meta name="text:Disqus Shortname" content="">
<meta name="text:Twitter Username" content="">
<meta name="text:Facebook Username" content="">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{block:TagPage}{Tag} posts - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<style>
/*******************************
RESET
********************************/
* {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
line-height: 1.5;
background: {color:Background};
font-family: {font:Body};
color: {color:Body Text};
margin: 2%;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
color: #3498db;
border-bottom: 1px solid #ddd;
}
a:hover { border-bottom-color: #3498db; }
h1>a, h2>a, footer p>a, .photo>a, .blogroll li>a {
border: none;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ddd;
margin-bottom: 1em;
padding: 0;
}
input, select {
vertical-align: middle;
}
ul { padding-left: 18px; }
ul, li { margin: 0; padding: 0;}
li {
color: {color:Body Text};
font-size: 1em;
}
iframe, img, embed, object, video {
max-width: 100%;
text-align: center;
}
img {
height: auto;
width: auto;
}
.frame {
width: 95%;
margin: 0 auto;
}
blockquote {
font-style: italic;
font-size: 1.5em;
line-height: 1em; /* 24 / 24 */
margin-bottom: 1em; /* 24 / 24 */
color: #3498db;
}
blockquote:before { content: "\201C";
display: inline-block;
padding-right: .4em; }
/*******************************
Typography
********************************/
h1,h2,h3,h4,h5, h2>a {
font-family: {font:Title};
font-weight: bold;
color: {color:Body Title};
}
h1 {
font-size: 3em; /* 48 / 16 */
line-height: 1em; /* 48 / 48 */
margin-bottom: .5em; /* 24 / 48 */
}
h2 {
font-size: 2.25em; /* 36 / 16 */
line-height: 1.333333333333333em; /* 48 / 36 */
margin-bottom: .6666666666666667em; /* 24 / 36 */
}
h3 {
font-size: 1.5em; /* 24 / 16 */
line-height: 1em; /* 24 / 24 */
margin-bottom: 1em; /* 24 / 24 */
}
h4 {
font-size: 1.3125em; /* 21 / 16 */
line-height: 1.142857142857143em; /* 24 / 21 */
margin-bottom: 1.142857142857143em; /* 24 / 21 */
}
h5 {
font-size: 1.125em; /* 18 / 16 */
line-height: 1.333333333333333em; /* 24 / 18 */
margin-bottom: 1.333333333333333em; /* 24 / 18 */
}
h6 {
font-size: 1em; /* 16 / 16 */
line-height: 1.5em; /* 24 / 16 */
margin-bottom: 1.5em; /* 24 / 16 */
}
p {
font-size: 1em; /* 16 / 16 */
line-height: 1.5em; /* 24 / 16 */
margin-bottom: 1.5em; /* 24 / 16 */
color: {color:Body Text};
font-family: {font:Body};
}
.small, small {
margin-bottom: 0;
font-size: 14px;
}
/*******************************
Alignment
********************************/
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
/*******************************
Wrapper
********************************/
#wrapper {
max-width: 900px;
margin: 1em auto;
background-color: #fff;
}
/*******************************
Header
********************************/
header {
}
header h1 {
margin-bottom: 0;
height: 60px;
line-height: 60px;
font-size: 2em;
font-weight: 300;
}
header h1 a:hover {
color: #2980b9;
}
/*************************************************
social
*************************************************/
.social { margin-top: 4px; padding-bottom: 0; vertical-align: middle; padding-left: 0; }
.social li { margin-right: 2%;
display: inline-block; list-style-type: none; }
.social li a { border: none; opacity: 0.70; vertical-align: middle; }
.social li a:hover { opacity: 1; }
/*******************************
Desc
********************************/
.desc {
background-color: #3498db;
margin-bottom: 1em;
}
.desc p {
margin-bottom: 0;
color: #fff;
text-shadow: 2px 2px 0 #666;
padding: 1em 0 1em 0;
font-size: 1.5em;
letter-spacing: 1px;
}
/*******************************
Main
********************************/
.metadata { display: block; color: #888; }
article {
margin: 1em 0 2em 0;
border-bottom: 1px solid #ddd;
padding-bottom: 1em;
}
article ul { margin-bottom: 1em; padding-left: 18px; }
article h2 a { color: {color:Body Title}; }
article h2 a:hover { color: {color:Body Title Hover}; }
.padding { padding: 20px 30px 20px 30px }
.photo img { margin: 1em 0 1em 0; box-shadow: 6px 6px 0 #ddd; }
.quote blockquote {
font-size: 2em; margin-top: 1%;
text-shadow: 1px 0 0 #444;
color: #3498db;
}
.chat ul {
list-style: none;
list-style-image: none;
margin: 0;
padding-left: 0;
padding-bottom: 1em;
}
.chat p { margin-bottom: 0; }
.chat li { padding: 1%; }
.chat li:nth-child(2n) { color: #3498db; }
.chat li:nth-child(2n+1) { color: #e67e22; }
#tags a {
margin-top: 0;
border: none;
display: inline-block;
margin-right: 1%;
background-color: #2980b9;
color: #fff;
padding: 0 4px 0 4px;
border-radius: 3px;
}
#notes {
clear: both;
padding: 0;
}
.blogroll { padding-left: 0; }
.blogroll li {
list-style-type: none;
display: inline-block;
margin-right: 1%;
}
/*************************************************
Search form
*************************************************/
.search {
padding-bottom: 1em;
}
.search input[type=text] {
display: inline-block;
padding: 1px 2px;
height: 40px;
border: 1px solid #ddd;
width: 100%;
vertical-align: middle;
margin-bottom: 8px;
}
.search input[type=text]:focus {
box-shadow: 0 0 0 4px #ddd;
}
/*******************************
Sidebar
********************************/
.sidebar {
margin-top: 2em;
background-color: #ecf0f1;
}
.sidebar article {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
/*******************************
Footer
********************************/
footer {
background-color: #2980b9;
}
footer p {
color: #eee;
vertical-align: middle;
margin-top: 1em
}
footer a:hover {
border-bottom: 1px dotted #3498db;
color: #fff;
}
/*************************************************
Navigation menu
*************************************************/
nav {
margin-bottom: 0;
margin-top: 6px;
}
.vertical-menu , .vertical-menu li,
.menu, .menu li {
margin: 0; padding: 0;
}
.menu li {
list-style-type: none;
display: inline-block;
}
.menu li a {
display: inline-block;
padding: 12px 14px;
text-decoration: none;
font-family: Verdana, sans-serif;
font-weight: 300;
color: #ccc;
border: none;
}
.menu li a.active,
.menu li a:hover,
.menu li a:focus {
background-color: #3498db;
color: #fff;
border-radius: 3px;
}
.vertical-menu li {
display: block;
list-style-type: none;
}
.vertical-menu li a {
display: inline-block;
text-decoration: none;
font-family: arial, sans-serif;
font-weight: 300;
color: #ccc;
border: none;
outline: none;
}
.vertical-menu li a.active,
.vertical-menu li a:hover,
.vertical-menu li a:focus {
color: #3498db;
border-bottom: 1px solid #3498db;
}
/*************************************************
Pagination
*************************************************/
#pagination { margin: 1em 0 1em 0; }
#pagination a {
font-size: 20px;
text-transform: uppercase;
}
/*************************************************
buttons
*************************************************/
.btn {
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 18px 0 18px;
color: #f8f8f8;
text-decoration: none;
text-transform: uppercase;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 16px;
font-weight: 300;
letter-spacing: 1px;
position: relative;
outline: none;
-webkit-transition: none;
-moz-transition: none;
transition: none;
border-radius: 2px;
}
.btn-blue { background: #3498db; box-shadow: 0 4px #2980b9; }
.btn-blue:hover { box-shadow: 0 2px #2980b9; top: 2px; color: #fff; }
.btn-blue:active { box-shadow: 0 0 #2980b9; top: 6px; }
/*************************************************
Go To Top
*************************************************/
.goToTop {
position: fixed;
right: 2em;
bottom: 2em;
outline: none;
border-radius: 50%;
background-color: #3498db;
padding: 0.8em 0.8em;
color: #eee;
border: none;
display: none;
text-decoration: none;
}
.goToTop:hover, .goToTop:focus {
color: #fff;
box-shadow: 0 0 0 4px #2980b9;
border: none;
}
/*******************************
Grid
********************************/
/*
*
* Lemonade v1.1
* Copyright 2013, Joey
* lemonade.im
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
*/
*,
*:after,
*:before {
margin: 0;
padding: 0;
/* Removes padding behavior on widths */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Targets all elements */
[class*='bit-'] {
float: left;
padding: 10px;
}
/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
padding-right: 10px;
float: left;
}
/* Clearfix */
.frame:after {
content: "";
display: table;
clear: both;
}
/* Main Widths */
.bit-100 {width: 100%; }
.bit-66 {width: 66.1%; }
.bit-50 {width: 50%; }
.bit-33 {width: 33.33%; }
.bit-25 {width: 25%; }
/* Landscape mobile & down
===============================*/
@media (max-width: 480px) {
.bit-100,
.bit-66,
.bit-50,
.bit-33,
.bit-25{
width: 100%;
}
article h2 { font-size: 2em; }
header h1, footer p, .description { text-align: center; }
}
/* Mobile to Tablet Portrait
===============================*/
@media (min-width: 480px) and (max-width: 800px) {
.bit-100,
.bit-66,
.bit-50,
.bit-25{
width: 100%;
}
header h1, footer p, .description { text-align: center; }
.menu li {
display: inline-block;
}
}
/* Landscape Tablet to Desktop
===============================*/
@media (min-width: 800px) and (max-width: 1100px) {
.bit-100,
.bit-66,
.bit-50,
.bit-25{
width: 100%;
}
header h1, footer p, .description { text-align: center; }
}
/* Custom CSS */
{CustomCSS}
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class="frame">
<div class="bit-50">
<h1><a href="/">{Title}</a></h1>
</div>
<div class="bit-50">
<nav class="center">
<ul class="menu">
<li><a href="/">Home</a></li>
{block:HasPages}
{block:Pages}
<li> <a href="{URL}">{Label}</a></li>
{/block:Pages}
{/block:HasPages}
<li><a href="/archive">Archives</a></li>
<li><a href="{RSS}">RSS</a></li>
</ul>
</nav>
</div>
</div>
</header><!-- Header ends -->
<div class="desc">
<div class="frame">
<div class="bit-100">
{block:Description}
<p class="description">{Description}</p>
{/block:Description}
</div>
</div>
</div>
<div class="search">
<div class="frame">
<div class="bit-100">
{block:SearchPage}
<article>
<h2 id="searchItemsFound">
Search results for: &#8220;{SearchQuery}&#8221;
<p class="small">{SearchResultCount} items found.</p>
</h2>
{block:NoSearchResults}
<div id="searchResults">
<section class="search">
<form action="/search" method="get">
<h5>Search for something else... </h5>
<input type="text" name="q" value="{SearchQuery}" />
<input class="btn btn-blue" type="submit" value="Search" />
</form>
</section>
</div>
{/block:NoSearchResults}
</article>
{/block:SearchPage}
</div>
</div>
</div>
<div class="main">
<div class="frame">
<section class="main_content">
<div class="bit-100">
{block:Posts}
<article>
<!--Metadata: date, note count, content source-->
<header class="metadata">
{block:Date}
<time title="{TimeAgo}" datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{ShortMonth} {DayOfMonthWithZero}, {Year}</time>
{/block:Date}
{block:NoteCount}
&bull;
<a class="notecount" href="{Permalink}#notes">{NoteCountWithLabel}</a>
{/block:NoteCount}
</header>
<!--Unique code for each post type-->
{block:Text}
<div class="text">
{block:Title}
<h2 class="title"><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
{block:More}
<div class="more">
<a class="btn btn-blue" href="{Permalink}">
Read More
</a>
</div>
{/block:More}
</div>
{/block:Text}
{block:Photo}
<div class="photo">
{LinkOpenTag}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}">
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Photo}
{block:Photoset}
<div class="photoset">
{block:IndexPage}{Photoset-700}{/block:IndexPage}
{block:PermalinkPage}
{Photoset-700}
{/block:PermalinkPage}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Photoset}
{block:Quote}
<div class="quote">
<blockquote>{Quote}</blockquote>
{block:Source}<cite> {Source} </cite>{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="link">
<h2 class="title"><a href="{URL}">{Name}</a></h2>
{block:Description}
{Description}
{/block:Description}
{block:More}
<div class="more">
<a class="btn btn-blue" href="{Permalink}">Read More</a>
</div>
{/block:More}
</div>
{/block:Link}
{block:Chat}
<div class="chat">
<ul>
{block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
</ul>
</div>
{/block:Chat}
{block:Audio}
<div class="audio">
{block:TrackName}<h2 class="title"><a href="{Permalink}">{TrackName}</a></h2>{/block:TrackName}
<div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}</div>
<div class="player">{AudioPlayerBlack}</div>
{block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Audio}
{block:Video}
<div class="video">
<div class="video-player">{Video-700}</div>
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Video}
{block:Answer}
<div class="answer">
<h2 class="title">{Question}</h2>
<div class="user">
<img src="{AskerPortraitURL-96}"/>
<p>{Asker}</p>
</div>
{Answer}
</div>
{/block:Answer}
<!--Post footer (tags and notes) on displayed on permalink pages-->
{block:Permalink}
<div class="details">
{block:HasTags}
<div id="tags">
{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
</div>
{/block:HasTags}
{block:PostNotes}
<h5>Notes</h5>
<div id="notes">
{PostNotes}
</div>
{/block:PostNotes}
</div>
{/block:Permalink}
</article>
{/block:Posts}
<!--Close of article-->
<!-- Disqus -->
{block:PermalinkPagination}
{block:IfDisqusShortname}
<script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>
{block:Permalink}
<div id="disqus_thread"></div>
<script type="text/javascript">
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://{text:Disqus Shortname}.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript={text:Disqus Shortname}">comments powered by Disqus.</a></noscript>
{/block:Permalink}
<script type="text/javascript">
var disqus_shortname = '{text:Disqus Shortname}';
(function () {
var s = document.createElement('script'); s.async = true;
s.src = 'http://{text:Disqus Shortname}.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
{/block:IfDisqusShortname}
{/block:PermalinkPagination}
<!--Pagination: previous/next page links-->
{block:Pagination}
<div id="pagination">
{block:PreviousPage}
<a class="btn btn-blue" href="{PreviousPage}">Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a class="btn btn-blue" href="{NextPage}">Next</a>
{/block:NextPage}
</div>
{/block:Pagination}
</div>
</section>
</div>
</div>
<aside class="sidebar">
<div class="frame">
<div class="bit-33">
<article>
<h3>Search for</h3>
<!--Search form (optional)-->
<div class="search">
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="Enter your search..."/>
<input class="btn btn-blue" type="submit" value="{lang:Search}" />
</form>
</div>
</article>
</div>
<div class="bit-33">
<article>
<h3>Follow Me</h3>
<ul class="social">
{block:IfTwitterUsername}
<li>
<a href="http://www.twitter.com/{text:Twitter Username}" title="Follow me at twitter"><img src="http://static.tumblr.com/0k22btb/lUZmsa7mf/twitter.png" alt="twitter" ></a>
</li>
{/block:IfTwitterUsername}
{block:IfFacebookUsername}
<li>
<a href="http://www.facebook.com/{text:Facebook Username}" title="Facebook"><img src="http://static.tumblr.com/0k22btb/bH5msjddz/facebook.png" alt="facebook"></a>
</li>
{/block:IfFacebookUsername}
<li><a href="{RSS}" title="rss"><img src="http://static.tumblr.com/0k22btb/Njwmsm0ff/rss.png" alt="rss"></a></li>
</ul>
</article>
</div>
<div class="bit-33">
<article>
{block:IfShowPeopleIFollow}
{block:Following}
<h3>{lang:Following}:</h3>
<ul class="blogroll">
{block:Followed}
<li>
<a href="{FollowedURL}" title="{FollowedTitle}">
<img src="{FollowedPortraitURL-48}"/>
</a>
</li>
{/block:Followed}
</ul>
{/block:Following}
{/block:IfShowPeopleIFollow}
</article>
</div>
</div>
</aside>
<footer class="footer">
<div class="frame">
<div class="bit-100">
<p>
Powered by
<a title="Tumblr" href="http://tumblr.com">Tumblr</a>.
Theme created by
<a title="Follow me at twitter" href="http://twitter.com/mithicher">mithicher</a>.
Social icons by <a title="damojothemes.com" href="http://damojothemes.com">damojothemes.com</a>.
</p>
</div>
<a class="goToTop" href="#">Top</a>
</div>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 200)
{
$('.goToTop').fadeIn(200);
}
else
{
$('.goToTop').fadeOut(200);
}
});
$('.goToTop').click(function(event){
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 600);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment