Skip to content

Instantly share code, notes, and snippets.

@ckunte

ckunte/r1.scss

Created December 14, 2014 10:17
Show Gist options
  • Save ckunte/8f6cd0604e9f26b8c4db to your computer and use it in GitHub Desktop.
Save ckunte/8f6cd0604e9f26b8c4db to your computer and use it in GitHub Desktop.
Download ZIP
Template + SASS file.
Raw
r1.scss
/*
(c) 2011 ckunte.
*/
// Widths for screens other than handhelds
$cwidth: 700px;
$pwidth: 640px;
// Side Margins
$smrg: ($cwidth - $pwidth) / 2;
// Font type and weight
@import url(http://fonts.googleapis.com/css?family=Merriweather:400,400italic,300);
$bff: "Merriweather", serif;
$hff: $bff;
$cff: monospace;
$fw: 400;
$fwb: 300;
// Type sizes
$fb: 18px; // body
$lhb: $fb * 1.6; // line height for body
$fh: $fb; // sub head
$fc: $fb - 2px; // code
$ff: $fb * 0.9; // footnote
$lhf: $ff * 1.6; // line height for footnote
// Font definition
@mixin font($family, $size, $weight, $lheight) {
font-family: $family;
font-size: $size;
font-weight: $weight;
line-height: $lheight;
}
// Colors
$fg: #fff; // foreground
$bg: $fg; // background
$c: #000; // body color
$lc: #bbb; // light color
// Reset paddings and margins
.rmp {
margin: 0;
padding: 0;
}
.db {
text-decoration:none;
border:none;
}
// Border radius tool
@mixin border-radius($radius) {
-moz-border-radius: $radius;
-o-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
body {
@include font($bff, $fb, $fw, $lhb);
@extend .rmp;
background-color: $bg;
color: $c;
}
h1 {
margin: 50px $smrg 0 $smrg;
text-align: left;
}
h1 a, h1 a:hover {
@extend .db;
color: $c;
}
h3 {
margin-left:$smrg;
margin-bottom:-9px;
}
p.f a, p.f a:hover, p.date a, p.date a:hover {
color: $c;
@extend .db;
}
h1 {
}
p.f {
margin: 20px auto 60px auto;
}
p, table, pre {
margin:12px 20px;
}
li {margin:9px 20px;}
h2 {
margin:0 20px 20px 20px;
@include font($hff, 30px, $fw, 45px);
}
p a, li a, h3 a {
color: $c;
@extend .db;
border-bottom:1px #aaa solid;
}
p a:hover, li a:hover, h3 a:hover {
color: $c;
border-bottom:1px #7B9C0A solid;
}
.post {
margin:45px 0 90px 0;
}
b, strong, h3, th, caption, abbr {
text-transform: uppercase;
font-size: 90%;
font-weight: $fw;
letter-spacing: 2px;
text-align:left;
}
sup {font: 14px/14px $bff;}
hr, .footnotes hr {
width: $pwidth * 0.3;
border-color: #ccc;
border-style: solid;
border-width: 1px 0 0;
}
hr { margin: 20px auto; }
.footnotes hr { margin: 20px 0 0 20px; }
.footnotes {
@include font($bff, $ff, $fw, $lhf);
}
.footnotes ol li p {margin-left:5px;margin-bottom:0;margin-top:-3px;}
blockquote {
border-left: 6px solid #efefef;
margin: 1em 1.5em;
}
blockquote p {
font-weight: $fwb;
}
th {
vertical-align: top;
padding: 9px;
}
td {
text-align: left;
vertical-align: top;
padding: 9px;
}
table {
border-spacing: 0;
text-align: left;
border-collapse: collapse;
}
tr:nth-child(odd) {
background-color: #f7f7f7;
}
tr:nth-child(even) {
background-color: transparent;
}
.post pre {
@include border-radius(3px);
background-color:#eee;
padding: 6px 9px 9px 9px;
}
.post pre code {
@include font($cff, $fc, normal, $fc);
}
.auto, .post pre, .post p code, blockquote p code, .post li code {
background-color: #efefef;
overflow: auto;
}
.MathJax_Display {overflow:auto;}
.logo {
@include border-radius(3px);
margin:0 3px -9px 0;
width:64px;
}
.post p code, blockquote p code, .post li code {
@include font($cff, $fc, normal, $fc);
@include border-radius(3px);
vertical-align: middle;
padding: 2px;
}
.post ol li > pre {
margin: 10px 0;
padding: 10px 0;
}
// For handhelds
@media screen, handheld {
#container {
margin:1.5em auto;
width:100%;
padding:0;
}
.post pre,.post h3,.post p,.post ul,.post ol,.post > .date,.post blockquote,th,td {
margin:0.9em 1.2em;
}
tr {
width:100%;
margin:1em 0;
}
.photo img {
width: 100%;
height: auto;
display:block;
padding:0;
}
iframe {
width:100%!important;
}
}
// For desktops
@media screen and (min-width:43em) {
#container {
margin:1.5em auto;
width:700px;
padding:0;
}
table {
width: $pwidth;
}
.photo img {
width: $cwidth;
height: auto;
display:block;
padding:0;
}
}
Raw
template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{Title}{block:SearchPage}: Search results for "{SearchQuery}"{/block:SearchPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}{block:PreviousPage}{block:Pagination}: Page {CurrentPage}{/block:Pagination}{/block:PreviousPage}{block:TagPage}: {URLSafeTag}{/block:TagPage}</title>
<link rel="icon" type="image/png" href="{Favicon}">
{block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="{Favicon}">
<link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/v335647/F7ingkhdg/radian1.css">
<!-- <link rel="stylesheet" type="text/css" href="http://yandex.st/highlightjs/8.0/styles/default.min.css"> -->
<style type="text/css">
{CustomCSS}
</style>
</head>
<body>
<div id="container">
<h1><a href="/"><img class="logo" src="{PortraitURL-128}"></a></h1>
{block:SearchPage}<p>Your search for <span class="query">&ldquo;{SearchQuery}&rdquo;</span> returned {SearchResultCount} result(s).</p>{/block:SearchPage}
{block:TagPage}<p>Posts tagged <a title="Latest first" href="/tagged/{URLSafeTag}">{tag}</a>.</p>{/block:TagPage}
{block:Posts}
<div class="post">
{block:RebloggedFrom}<p>Courtesy of <a href="{ReblogRootURL}">{ReblogRootTitle}</a>:</p>{/block:RebloggedFrom}
{block:Answer}
{AskerPortraitURL-16}&nbsp;<cite>{Asker}</cite> asks the following&#58;
<blockquote>{Question}</blockquote>
{Answer}
{/block:Answer}
{block:Audio}
<p>{AudioPlayerGrey}</p>
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}
{block:Text}
{block:Title}<h2>{Title}</h2>{/block:Title}
{Body}
{/block:Text}
{block:Quote}
{block:Source}<p>{Source}&#58;</p>{/block:Source}
<blockquote><p>{Quote}</p></blockquote>
{/block:Quote}
{block:Link}
<p><a href="{URL}" class="link" {Target}>{Name}</a></p>
{block:Description}{Description}{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<table>
{block:Lines}
<tr>
{block:Label}<th style="text-align:right;">{Label}</th>{/block:Label}
<td>{Line}</td>
</tr>
{/block:Lines}
</table>
{/block:Chat}
{block:Photo}
<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">{LinkCloseTag}
<!-- {block:Exif}<p class="credits">{block:Aperture}{Aperture}{/block:Aperture},&nbsp;{block:Exposure}{Exposure}{/block:Exposure},&nbsp;{block:FocalLength}{FocalLength}{/block:FocalLength}.&nbsp;{block:Camera}{Camera}{/block:Camera}</p>{/block:Exif} -->
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Photo}
{block:Photoset}
<div class="photoset">
{Photoset-700}
</div>
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}
{block:Video}
<div class="photo">
{VideoEmbed-700}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Video}
<p class="date"><em><a href="{Permalink}">{Month} {DayOfMonth}, {Year}</a>.</em></p>
</div>
{/block:Posts}
<p class="f" align="center">
{block:Pagination}
{block:NextPage}
<em><a rel="next" href="{NextPage}">Older</a></em>
{/block:NextPage}
{block:PreviousPage}
&nbsp;&bull;&nbsp;
<em><a rel="previous" href="{PreviousPage}">Newer</a></em>
{/block:PreviousPage}
{/block:Pagination}
{block:PermalinkPagination}
{block:PreviousPost}
<em><a rel="previous" href="{PreviousPost}">Older post</a></em>
{/block:PreviousPost}
{block:NextPost}
&nbsp;&bull;&nbsp;
<em><a rel="next" href="{NextPost}">Newer post</a></em>
{/block:NextPost}
{/block:PermalinkPagination}
</p>
<p class="f" align="center"><em><a href="/">{Title}</a> is {Description}</em></div>
</div>
<script type="text/javascript">
(function () {
var mjx = document.createElement('script');
mjx.type = 'text/javascript';
mjx.src = 'http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML';
mjx.async = true;
var k = document.getElementsByTagName('script')[0];
k.parentNode.insertBefore(mjx, k);
})();
</script>
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'http://yandex.st/highlightjs/8.0/styles/default.min.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment