Skip to content

Instantly share code, notes, and snippets.

@celadevra

celadevra/main.css

Last active December 16, 2015 14:39
Show Gist options
  • Save celadevra/5449818 to your computer and use it in GitHub Desktop.
Save celadevra/5449818 to your computer and use it in GitHub Desktop.
Download ZIP
My Scriptogr.am HTML and CSS
Raw
main.css
/* HTML5 Boilerplate */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #33ccdd; color: #fff; text-shadow: none; }
::selection { background: #33ccdd; color: #fff; text-shadow: none; }
a { color: #33ccdd; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #eee; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
Primary styles
Author: Kasper Mikiewicz
========================================================================== */
body {
background: #fff;
border-top: 3px solid #33ccdd;
color: #535353;
font: 90%/1.5 'Donegal One', serif;
}
/* Links & Typography */
a { text-decoration: none; }
a:link, a:active { color: #33ccdd; }
a:visited { color: #33ccdd; }
a:link:hover, a:active:hover, a:visited:hover { text-decoration: underline; }
a:link:hover, a:active:hover { color: #33c1b3; }
a:visited:hover { color: #33c1b3; }
a > img { margin-bottom: -1px; }
a.img {
border: none;
background: transparent !important;
}
p, ul, ol, pre, blockquote, hr, object { margin: 1em 0; }
img { border:none; vertical-align:bottom; }
strong { font-weight:bold; }
hr { height:1px; border:none; background-color:#eee; }
blockquote {
direction: block;
padding-left: 10px;
font-family: "Georgia", sans-serif;
}
blockquote:before {
display: block;
font-size: 700%;
content: open-quote;
content: "\201C";
color: #cccccc;
height: 1px;
margin-left: -10%;
position:relative;
top:-25px;
}
blockquote:after {
display: block;
font-size: 700%;
content: close-quote;
content: "\201D";
color: #cccccc;
height: 1px;
position:relative;
margin-left:100%;
top:-60px;
}
strong, b {
font-family: 'Donegal One', serif;
color: #333;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
code,pre {padding:0 3px 2px;font-family:Monaco,Andale Mono,Courier New,monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
code {background-color:#fcc9cc;color:rgba(0,0,0,0.75);padding:1px 3px}pre{background-color:#e5e5e5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word}
pre code {background: transparent; display: block;}
pre {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
width: 540px;
position: relative;
padding-bottom: 30.5px;
}
pre:after {
content: 'Click on code to select it.';
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 11px;
color: #aaa;
border-top: 1px solid #ddd;
display: block;
width: 100%;
height: 22px;
line-height: 22px;
text-align: right;
}
/*pre:hover { width: 670px; margin-left: -130px; }*/
pre textarea {
width: 100%;
border: none;
background: transparent;
color: #777;
padding: 0;
display: block;
overflow: hidden;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre textarea:focus { outline: none; }
/* Headlines */
h1 > a, h2 > a,
h3 > a, h4 > a,
h5 > a, h6 > a,
h1 > a:hover, h2 > a:hover,
h3 > a:hover, h4 > a:hover,
h5 > a:hover, h6 > a:hover {
color:inherit !important;
background-color:transparent !important;
}
h1, h2,
h3, h4 {
color:#333;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
h1, h2, h3 {
font-family: 'ABeeZee', sans-serif;
}
.wrapper {
padding: 50px 0;
margin: 0 auto;
max-width: 670px;
width: 100%;
clear: both;
}
#logo { margin: 0; }
.blog-description { font-size: 110%; }
#menu {
border-bottom: 1px solid #EEE;
border-top: 1px solid #EEE;
margin-top: 20px;
padding: 10px 0;
}
#menu a {
padding: 4px 8px;
}
.post { margin-top: 20px; }
.post:after {
display: block;
content: '';
clear: both;
}
.post { padding-left: 130px; }
.post .body { float:right; width:100%; }
.post .meta { float:left; width:130px; margin-left:-130px;}
.post .title h3 { margin: 0; }
.post .body img { max-width: 100%; }
.post.page { padding-left: 0; }
.post.page .body { float: none; }
.pagination ul { list-style-type: none; text-align: center; }
.pagination li { display: inline-block; margin-right: 5px;}
.pagination .active a{ text-decoration: underline; }
.pagination .prev a:before { content: '\00AB \0020'; }
.pagination .next a:after { content: '\0020 \00BB'; }
#footer {
border-top: 1px solid #eee;
margin-top: 20px;
padding: 15px 10px;
line-height: 24px;
color: #aaa;
font-size: 11px;
}
#footer .copyrights { text-align: center; display: block;}
#footer .social { text-align: center; display: block;}
ul.tags {
border-top: 1px solid #eee;
margin: 0;
padding: 0;
}
ul.tags li { display: inline-block; list-style: none; }
ul.tags li a {
margin: 0 15px 0 0;
font-size: 12px;
}
/* Lists */
ul {
margin: 0 0 20px;
padding: 0
}
li {
color: #333;
margin-top: 20px;
margin-bottom: 0;
}
/* Share buttons */
.share-buttons {
border-top: 1px solid #eee;
margin: 20px 0;
padding: 20px 0;
}
.share-buttons:after {
display: table;
content: '';
clear: both;
}
.share-buttons div { float: left; }
.share-buttons > .share-facebook, .share-buttons > .share-twitter, .share-buttons > .share-gplus {
opacity: .5;
}
.share-buttons:hover > .share-facebook,
.share-buttons:hover > .share-twitter,
.share-buttons:hover > .share-gplus {
opacity: 1
}
.share-twitter {
float: left;
}
/* Google Prettify */
.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #268bd2; }
.kwd, .tag { color: #195f91; }
.typ, .atn, .dec, .var { color: #CB4B16; }
.pln { color: #93a1a1; }
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin: 0 0 0 40px;
}
/* IE indents via margin-left */
ol.linenums li {
padding: 0 5px;
color: rgba(0,0,0,.15);
line-height: 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
/* Alternate shading for lines */
li.L1, li.L3, li.L5, li.L7, li.L9 { }
/* =============================================================================
========================================================================== */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
@media (max-width: 480px) {
#logo, .blog-description,
#menu, .post { padding: 0 20px !important; }
.blog-description { text-align: center; }
.post .body { float: none; width: 100%; }
.post .meta { float: right; width: 100%; margin-left: 0;}
pre { width: auto; }
pre:hover { width: auto; margin-left: 0; }
}
@media (max-width: 768px) {
#footer .social,
#footer .copyrights { float: none; clear: both; text-align: center; }
pre { width: auto; }
pre:hover { width: auto; margin-left: 0; }
}
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
Raw
main.html
<!DOCTYPE html>
<!-- scriptogr.am theme info
Theme : Linearian
Author: Kasper Mikiewicz @Idered
Url : http://idered.pl
== README ================================================================
1. Add custom favicon
2. Change links in "Follow me on" section
3. Change UA-XXXXX-X to custome Google Analytics ID
4. Remove README section but leave info before it.
5. Also please don't remove author info in footer.
6. Customization done.
== README END ============================================================
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{#posts}}{{#is_post}}{{title}} - {{/is_post}}{{/posts}}{{author}}</title>
<meta name="description" content="{{author}} {{blog_title}}" />
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1.0;">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="ROBOTS" content="INDEX,FOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="{{author}} | {{blog_title}}">
<!-- (1) Optimize for mobile versions -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- (1) Moot look and feel -->
<link rel="stylesheet" href="https://cdn.moot.it/1.1/moot.css"/>
<meta property="og:title" content="{{#posts}}{{#is_post}}{{title}} - {{/is_post}}{{/posts}}{{author}}" />
<meta property="og:site_name" content="{{#posts}}{{#is_post}}{{title}} - {{/is_post}}{{/posts}}{{author}}">
<meta property="og:url" content="{{#posts}}{{#is_post}}{{permalink}}{{/is_post}}{{/posts}}">
<meta property="og:description" content="{{author}} | {{blog_title}}" />
<!-- <meta property="og:image" content="https://twimg0-a.akamaihd.net/profile_images/1733970682/scriptogram.png" /> -->
<meta property="og:type" content="article" />
<link rel="shortcut icon" href="https://dl.dropboxusercontent.com/s/0344bhesxt4v4xa/ico?token_hash=AAGXc5FXsrVIb1Niw8B7ap5bifJMJd7HoatlBp5wmKJfbg" type="image/png">
<link href='http://fonts.googleapis.com/css?family=ABeeZee|Donegal+One' rel='stylesheet' type='text/css'>
<link rel='canonical' href='{{#posts}}{{#is_post}}{{permalink}}{{/is_post}}{{/posts}}' />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{home_link}}/feed" />
{{css}}
<!-- (1) Moot depends on jQuery v1.7 or greater -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- (1) Moot client application -->
<script src="https://cdn.moot.it/1.1/moot.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<div class="wrapper">
<h1 id="logo"><a href="{{home_link}}">{{author}}</a></h1>
<p class="blog-description">{{blog_title}}</p>
<div id="menu">
{{#pages}}<a href="{{permalink}}">{{title}}</a>{{/pages}}
<a href="http://celadevra.github.com/blog/">Old Blog</a>
</div>
<div class="container">
{{#posts}}
<!-- index -->
{{#is_index}}
<div class="post single">
<div class="content">
{{#date}}<div class="meta"><span class="date">{{prettydate}}</span></div>{{/date}}
<div class="body">
<div class="title">
<h3>
<a href="{{permalink}}">{{title}}</a>
{{#post_permalink}}<a href="{{post_permalink}}">#</a>{{/post_permalink}}
</h3>
</div>
{{#excerpt}}<span class="introduction">{{excerpt}}</span>{{/excerpt}}
{{content}}
{{#if_tags}}
<ul class="tags">
{{#tags}}<li><a href="{{base_url}}/tag/{{name}}">#{{name}}</a></li>{{/tags}}
</ul>
{{/if_tags}}
</div>
</div>
</div>
{{/is_index}}
<!-- post permalink -->
{{#is_post}}
<div class="post permalink">
<div class="content">
{{#date}}<div class="meta"><span class="date">{{prettydate}}</span></div>{{/date}}
<div class="body-post">
<div class="title"><h3><a href="{{permalink}}">{{title}}</a></h3></div>
{{#excerpt}}<span class="introduction">{{excerpt}}</span>{{/excerpt}}
{{content}}
{{#if_tags}}
<ul class="tags">
{{#tags}}<li><a href="{{base_url}}/tag/{{name}}">#{{name}}</a></li>{{/tags}}
</ul>
{{/if_tags}}
<div class="share-buttons">
<div class="share-twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-text="{{title}}">Tweet</a>
</div>
<div class="share-gplus">
<g:plusone size="medium" href="{{permalink}}"></g:plusone>
</div>
<div class="share-facebook">
<div class="fb-like" data-href="{{permalink}}" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false" data-font="arial"></div>
</div>
</div>
</div>
</div>
<div class="share-moot">
<a class="moot" href="https://api.moot.it/idenizen/blog#{{prettydate}}-{{title}}"></a>
</div>
</div>
{{/is_post}}
<!-- page permalink -->
{{#is_page}}
<div class="post page">
<div class="content">
<div class="title"><h3>{{title}}</h3></div>
<div class="body">
{{#excerpt}}<span class="introduction">{{excerpt}}</span>{{/excerpt}}
{{content}}
{{#if_tags}}
<ul class="tags">
{{#tags}}<li><a href="{{base_url}}/tag/{{name}}">#{{name}}</a></li>{{/tags}}
</ul>
{{/if_tags}}
</div>
</div>
</div>
{{/is_page}}
<!-- archive -->
{{#is_archive}}
<div class="post archive">
{{#archive_divider}}
<div class="divider {{archive_divider_index}}"><h2>{{archive_divider}}</h2></div>
{{/archive_divider}}
<div class="content">
<div class="meta"><span class="date">{{prettydate}}</span></div>
<div class="title"><h3><a href="{{permalink}}">{{title}}</a></h3></div>
</div>
</div>
{{/is_archive}}
{{/posts}}
{{^posts}}
<!-- Poor man's 404 -->
<h3>Sorry, but this is not the post you are looking for.</h3>
<script type="text/javascript" src="http://www.qq.com/404/search_children.js?edition=small" charset="utf-8"></script>
{{/posts}}
<div class="pagination">{{pagination}}</div>
<footer id="footer">
<div class="copyrights"><a href="http://creativecommons.org/licenses/by-nc/3.0/cn/">CC-BY-NC</a> <a href="{{home_link}}">{{author}}</a>. Blog powered by <a href="http://scriptogr.am/">scriptogr.am</a>. Theme by <a href="http://twitter.com/Idered">@Idered</a></div>
<div class="social">
Follow me on:
<a href="http://www.quora.com/Haoyang-Xu">Quora</a> •
<a href="https://twitter.com/celadevra">Twitter</a> •
<a href="http://www.douban.com/people/celadevra/">豆瓣</a>
</div>
</footer>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/themes/{{theme}}/app.js"></script>
<script type="text/javascript">
var scripts = {
'facebook-jssdk': '//connect.facebook.net/en_US/all.js#xfbml=1',
'googleplus' : 'https://apis.google.com/js/plusone.js',
'twitter-wjs' : '//platform.twitter.com/widgets.js',
'analytics' : ('https:'==location.protocol?'//ssl':'//www') + '.google-analytics.com/ga.js'
}, script, _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
for (var id in scripts) {
script = document.createElement('script');
script.src = scripts[id]; script.id = id;
script.type = 'text/javascript';
script.async = true;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment