Created
April 2, 2012 05:46
-
-
Save hirocaster/2281082 to your computer and use it in GitHub Desktop.
MarsEdit Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<title>#weblogName#: #title#</title> | |
<style type="text/css"> | |
<!-- | |
/* | |
* HTML5 Boilerplate | |
* | |
* What follows is the result of much research on cross-browser styling. | |
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, | |
* Kroc Camen, and the H5BP dev community and team. | |
*/ | |
/* ============================================================================= | |
HTML5 element display | |
========================================================================== */ | |
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } | |
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; } | |
/* ============================================================================= | |
Base | |
========================================================================== */ | |
/* | |
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units | |
* http://clagnut.com/blog/348/#c790 | |
* 2. Force vertical scrollbar in non-IE | |
* 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted | |
* www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/ | |
* 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom | |
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ | |
*/ | |
html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } | |
body { margin: 0; font-size: 13px; line-height: 1.231; } | |
body, button, input, select, textarea { font-family: sans-serif; color: #222; } | |
/* | |
* These selection declarations have to be separate | |
* No text-shadow: twitter.com/miketaylr/status/12228805301 | |
* Also: hot pink! | |
*/ | |
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } | |
::selection { background: #fe57a1; color: #fff; text-shadow: none; } | |
/* ============================================================================= | |
Links | |
========================================================================== */ | |
a { color: #7e99c4; } | |
a:visited { color: #7e99c4; } | |
a:focus { outline: thin dotted; } | |
/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */ | |
a:hover, a:active { outline: 0; } | |
/* ============================================================================= | |
Typography | |
========================================================================== */ | |
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 #ccc; margin: 1em 0; padding: 0; } | |
ins { background: #ff9; color: #000; text-decoration: none; } | |
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } | |
/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ | |
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } | |
/* Improve readability of pre-formatted text in all browsers */ | |
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%; } | |
/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */ | |
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } | |
sup { top: -0.5em; } | |
sub { bottom: -0.25em; } | |
/* ============================================================================= | |
Lists | |
========================================================================== */ | |
ul, ol { margin: 1em 0; padding: 0 0 0 40px; } | |
dd { margin: 0 0 0 40px; } | |
nav ul, nav ol { list-style: none; margin: 0; padding: 0; } | |
/* ============================================================================= | |
Embedded content | |
========================================================================== */ | |
/* | |
* Improve image quality when scaled in IE7 | |
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ | |
*/ | |
img { border: 0; -ms-interpolation-mode: bicubic; } | |
/* | |
* Correct overflow displayed oddly in IE9 | |
*/ | |
svg:not(:root) { | |
overflow: hidden; | |
} | |
/* ============================================================================= | |
Figures | |
========================================================================== */ | |
figure { margin: 0; } | |
/* ============================================================================= | |
Forms | |
========================================================================== */ | |
form { margin: 0; } | |
fieldset { border: 0; margin: 0; padding: 0; } | |
/* | |
* 1. Correct color not inheriting in IE6/7/8/9 | |
* 2. Correct alignment displayed oddly in IE6/7 | |
*/ | |
legend { border: 0; *margin-left: -7px; padding: 0; } | |
/* Indicate that 'label' will shift focus to the associated form element */ | |
label { cursor: pointer; } | |
/* | |
* 1. Correct font-size not inheriting in all browsers | |
* 2. Remove margins in FF3/4 S5 Chrome | |
* 3. Define consistent vertical alignment display in all browsers | |
*/ | |
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } | |
/* | |
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) | |
* 2. Correct inner spacing displayed oddly in IE6/7 | |
*/ | |
button, input { line-height: normal; *overflow: visible; } | |
/* | |
* 1. Display hand cursor for clickable form elements | |
* 2. Allow styling of clickable form elements in iOS | |
*/ | |
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } | |
/* | |
* Consistent box sizing and appearance | |
*/ | |
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } | |
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } | |
/* | |
* Remove inner padding and border in FF3/4 | |
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ | |
*/ | |
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } | |
/* Remove default vertical scrollbar in IE6/7/8/9 */ | |
textarea { overflow: auto; vertical-align: top; } | |
/* Colors for form validity */ | |
input:valid, textarea:valid { } | |
input:invalid, textarea:invalid { background-color: #f0dddd; } | |
/* ============================================================================= | |
Tables | |
========================================================================== */ | |
table { border-collapse: collapse; border-spacing: 0; } | |
/* ============================================================================= | |
Primary styles | |
Author: | |
========================================================================== */ | |
/* =================================================== | |
Initializr styles | |
http://verekia.com/initializr/responsive-template | |
Author: Jonathan Verrecchia | |
=================================================== */ | |
/* body{ font:16px/26px Helvetica, Helvetica Neue, Arial; } | |
*/ | |
body{ font:14px/18px "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Helvetica,Arial,Sans-Serif; } | |
.wrapper{ | |
width:95%; | |
he | |
margin:0 5%; | |
} | |
/* =================== | |
ALL: Orange Theme | |
=================== */ | |
/* #header-container{ border-bottom: 20px solid #e44d26; } */ | |
/* #footer-container{ border-top: 20px solid #e44d26; } */ | |
/* #main aside { border-top: 20px solid #e44d26; } */ | |
#header-container{ border-bottom: 20px solid #3e3e3e; } | |
#footer-container{ border-top: 20px solid #3e3e3e; } | |
#main aside { border-top: 20px solid #3e3e3e; } | |
#header-container, | |
#footer-container, | |
#main aside{ | |
/* background:#f16529; | |
*/ | |
background:#ffffff; | |
} | |
/* #title{ color:white; } */ | |
#title{ | |
color:#3e3e3e; | |
height: 30px; | |
} | |
.twitterBadge{ | |
position:fixed; | |
top: 180px; | |
right:0; | |
width:30px; | |
font-size:20px; | |
font-family:Verdana, Geneva, sans-serif;-webkit-transform: | |
rotate(-90deg);-moz-transform: rotate(-90deg); | |
} | |
.twitterBadge a{ | |
/* background-image:url("./images/twitterBadge.png"); */ | |
background-repeat:no-repeat; | |
background-position:top right; | |
text-decoration:none; | |
/* background-color:#3C3C3C; */ | |
background-color:#33ccff; | |
color:#FFFFFF; | |
padding: 0px 5px 5px 10px; | |
} | |
.rssBadge{ | |
position:fixed; | |
top: 250px; | |
right:0; | |
width:30px; | |
font-size:20px; | |
font-family:Verdana, Geneva, sans-serif;-webkit-transform: | |
rotate(-90deg);-moz-transform: rotate(-90deg); | |
} | |
.rssBadge a{ | |
/* background-image:url("./images/rssBadge.png"); */ | |
background-repeat:no-repeat; | |
background-position:top right; | |
text-decoration:none; | |
background-color:#ff6501; | |
color:#FFFFFF; | |
padding: 0px 5px 5px 10px; | |
} | |
.fbBadge{ | |
position:fixed; | |
top: 370px; | |
right:0; | |
width:30px; | |
font-size:20px; | |
font-family:Verdana, Geneva, sans-serif;-webkit-transform: | |
rotate(-90deg);-moz-transform: rotate(-90deg); | |
} | |
.fbBadge a{ | |
/* background-image:url("./images/rssBadge.png"); */ | |
background-repeat:no-repeat; | |
background-position:top right; | |
text-decoration:none; | |
background-color:#3b5998; | |
color:#FFFFFF; | |
padding: 0px 5px 5px 10px; | |
} | |
/* ::-moz-selection { background: #f16529; color: #fff; text-shadow: none; } */ | |
/* ::selection { background: #f16529; color: #fff; text-shadow: none; } */ | |
::-moz-selection { background: #3e3e3e; color: #fff; text-shadow: none; } | |
::selection { background: #3e3e3e; color: #fff; text-shadow: none; } | |
/* ============== | |
MOBILE: Menu | |
============== */ | |
nav a{ | |
display:block; | |
margin-bottom:10px; | |
padding:15px 0; | |
/* background:#e44d26; | |
*/ | |
/* color:white; | |
*/ | |
background:#3e3e3e; | |
color:white; | |
text-align:center; | |
text-decoration:none; | |
font-weight:bold; | |
} | |
nav a:hover, nav a:visited{ | |
color:white; | |
} | |
nav a:hover{ | |
text-decoration:underline; | |
} | |
/* ============== | |
MOBILE: Main | |
============== */ | |
#main{ | |
padding:30px 0; | |
} | |
#main article h1{ | |
line-height: 110%; | |
font-size:1.8em; | |
} | |
#main article h2 { | |
/* clear: both; */ | |
/* padding-top: 1em; */ | |
/* margin-top: 1em; */ | |
/* border-bottom: 1px solid #C3C3C3; */ | |
/* margin-bottom: 0.5em; */ | |
line-height: 110%; | |
background: #fff; | |
border-top:1px solid #ddd; | |
border-right:1px solid #ddd; | |
border-bottom:1px solid #ddd; | |
border-left:3px solid #3e3e3e; | |
padding: 5px 0 5px 10px; | |
background: -moz-linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); /* firefox */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#eee), color-stop(51%,#ddd), color-stop(100%,#fff)); /* webkit */ | |
-pie-background:linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); /* ie */ | |
behavior: url(images/PIE.htc); /* ie */ | |
} | |
#main article h3 { | |
clear: both; | |
padding-top: 1em; | |
margin-top: 1em; | |
border-bottom: 1px solid #C3C3C3; | |
margin-bottom: 0.5em; | |
} | |
#main article .aligncenter {display: block;text-align: center;margin: 0 auto;} | |
#main article .alignleft {float: left;padding: .9em .5em .5em;} | |
#main article .alignright {float: right;padding: .9em 0 .5em .5em;} | |
#main article .aligncenter p {text-align: center; font-size: 85%;} | |
#main article .alignleft p {text-align: center; font-size: 85%;} | |
#main article .alignright p {text-align: center; font-size: 85%;} | |
#main article .syntaxhighlighter { | |
padding-top: 5px; | |
padding-bottom: 5px; | |
} | |
#main article blockquote { | |
position: relative; | |
padding: 20px 10px 5px 30px; /* Quote の文字を入れるためのスペースを確保 */ | |
border: 1px solid; | |
border-color: #bbb #fff #fff #bbb; | |
border-radius: 5px; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
background: #ddd; | |
quotes: none; | |
} | |
#main article blockquote:before { | |
position: absolute; | |
top: -10px; | |
left: -30px; | |
z-index: 1; | |
width: 100px; | |
transform: rotate(-25deg); /* 反時計回りに25度回転 */ | |
-moz-transform: rotate(-25deg); | |
-webkit-transform: rotate(-25deg); | |
-o-transform: rotate(-25deg); | |
color: #a3a3a3; | |
content: "Quote"; /* 文字列を生成 */ | |
font-size: 36px; | |
font-weight: 700; | |
font-style: oblique; | |
font-family: Georgia normal, "Times New Roman", Times, serif; | |
text-align: center; | |
text-shadow: 3px 5px 5px rgba(0, 0, 0, .2); /* 文字にドロップシャドウ */ | |
} | |
#main article blockquote:after { | |
display: block; /* border用 */ | |
padding-top: 5px; | |
border-top: 1px solid #fff; | |
color: #555; | |
font-size: 12px; | |
text-align: right; | |
text-shadow: 1px 1px 0 #eee; | |
line-height: 1.6; | |
content: attr(title) "\a" attr(cite); /* title + 改行 + cite */ | |
white-space: pre-wrap; /* 以下長いURL対策 */ | |
white-space: -moz-pre-wrap; | |
word-wrap: break-word; | |
} | |
/* 最後の子要素 border指定用 */ | |
#main article blockquote > :last-child { | |
margin-bottom: 0; | |
padding-bottom: 1em; | |
border-bottom: 1px solid #999; | |
} | |
#main ul.amz{ | |
list-style: none; | |
padding: 0px; | |
margin: 0px; | |
text-align: center; | |
} | |
#main ul.amz li{ | |
display: -moz-inline-box; | |
display: inline-block; | |
/display: inline; | |
/zoom: 1; | |
padding-right: 30px; | |
} | |
#main aside{ | |
color:3e3e3e; | |
padding:0px 5% 10px; | |
} | |
#main aside ul{ | |
list-style: none; | |
padding: 0px; | |
margin: 0px; | |
} | |
#main aside ul blockquote{ | |
margin: 0px; | |
} | |
#main aside ul blockquote { | |
position: relative; | |
padding: 20px 10px 5px 30px; /* Quote の文字を入れるためのスペースを確保 */ | |
border: 1px solid; | |
border-color: #bbb #fff #fff #bbb; | |
border-radius: 5px; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
background: #ddd; | |
quotes: none; | |
} | |
#main aside ul blockquote:before { | |
position: absolute; | |
top: -10px; | |
left: -30px; | |
z-index: 1; | |
width: 100px; | |
transform: rotate(-25deg); /* 反時計回りに25度回転 */ | |
-moz-transform: rotate(-25deg); | |
-webkit-transform: rotate(-25deg); | |
-o-transform: rotate(-25deg); | |
color: #a3a3a3; | |
content: "Quote"; /* 文字列を生成 */ | |
font-size: 36px; | |
font-weight: 700; | |
font-style: oblique; | |
font-family: Georgia normal, "Times New Roman", Times, serif; | |
text-align: center; | |
text-shadow: 3px 5px 5px rgba(0, 0, 0, .2); /* 文字にドロップシャドウ */ | |
} | |
#main aside ul blockquote:after { | |
/* display: block; /\* border用 *\/ */ | |
/* padding-top: 5px; */ | |
/* border-top: 1px solid #fff; */ | |
/* color: #555; */ | |
/* font-size: 12px; */ | |
/* text-align: right; */ | |
/* text-shadow: 1px 1px 0 #eee; */ | |
/* line-height: 1.6; */ | |
/* content: attr(title) "\a" attr(cite); /\* title + 改行 + cite *\/ */ | |
/* white-space: pre-wrap; /\* 以下長いURL対策 *\/ */ | |
/* white-space: -moz-pre-wrap; */ | |
/* word-wrap: break-word; */ | |
} | |
/* 最後の子要素 border指定用 */ | |
#main aside ul blockquote > :last-child { | |
margin-bottom: 0; | |
padding-bottom: 1em; | |
border-bottom: 1px solid #999; | |
} | |
#main aside ul a.tumblr_link{ | |
display: block; | |
text-align: right; | |
} | |
#main div.amazlink-list { | |
float: left; | |
} | |
#footer-container footer{ | |
/* color:white; */ | |
color:3e3e3e; | |
padding:20px 0; | |
} | |
/* =============== | |
ALL: IE Fixes | |
=============== */ | |
.ie7 #title{ padding-top:20px; } | |
/* ============================================================================= | |
Non-semantic helper classes | |
Please define your styles before this section. | |
========================================================================== */ | |
/* For image replacement */ | |
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } | |
.ir br { display: none; } | |
/* Hide for both screenreaders and browsers: | |
css-discuss.incutio.com/wiki/Screenreader_Visibility */ | |
.hidden { display: none; visibility: hidden; } | |
/* Hide only visually, but have it available for screenreaders: by Jon Neal. | |
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ | |
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } | |
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ | |
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } | |
/* Hide visually and from screenreaders, but maintain layout */ | |
.invisible { visibility: hidden; } | |
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ | |
.clearfix:before, .clearfix:after { content: ""; display: table; } | |
.clearfix:after { clear: both; } | |
.clearfix { zoom: 1; } | |
/* ==|== media queries ====================================================== */ | |
@media only screen and (min-width: 480px) { | |
/* ==================== | |
INTERMEDIATE: Menu | |
==================== */ | |
nav a{ | |
float:left; | |
width:27%; | |
margin:0 1.7%; | |
padding:25px 2%; | |
margin-bottom:0; | |
} | |
nav#nav-below { | |
width: 100%; | |
} | |
nav#nav-below a { | |
float:left; | |
width:40%; | |
margin:0 1.7%; | |
padding:25px 2%; | |
margin-bottom:0; | |
} | |
nav li:first-child a{ margin-left:0; } | |
nav li:last-child a{ margin-right:0; } | |
/* ======================== | |
INTERMEDIATE: IE Fixes | |
======================== */ | |
nav ul li{ | |
display:inline; | |
} | |
.oldie nav a{ | |
margin:0 0.7%; | |
} | |
} | |
@media only screen and (min-width: 768px) { | |
/* ==================== | |
WIDE: CSS3 Effects | |
==================== */ | |
#header-container, | |
#main aside{ | |
-webkit-box-shadow:0 5px 10px #aaa; | |
-moz-box-shadow:0 5px 10px #aaa; | |
box-shadow:0 5px 10px #aaa; | |
} | |
/* ============ | |
WIDE: Menu | |
============ */ | |
#title{ | |
float:left; | |
} | |
nav{ | |
float:right; | |
width:38%; | |
} | |
/* ============ | |
WIDE: Main | |
============ */ | |
#main article{ | |
/* float:left; | |
*/ | |
/* width:57%; | |
*/ | |
clear: both; | |
margin-bottom: 100px; | |
} | |
div#article-area{ | |
float:left; | |
width:57%; | |
} | |
#main aside{ | |
float:right; | |
width:28%; | |
} | |
.clearRight { | |
clear:right; | |
} | |
.clearLeft { | |
clear:left; | |
} | |
} | |
@media only screen and (min-width: 1140px) { | |
/* =============== | |
Maximal Width | |
=============== */ | |
.wrapper{ | |
width:1026px; /* 1140px - 10% for margins */ | |
margin:0 auto; | |
} | |
} | |
/* ============================================================================= | |
Print styles. | |
Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ | |
========================================================================== */ | |
@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; } | |
} | |
--> | |
</style> | |
</head> | |
<body style="margin:0; background-color:#FFF;"> | |
<div style="padding:10px 20px; color:#DDD; background-color:#333; margin:0;"> | |
<span style="font-size:2em;">#title#</span> | |
</div> | |
<div style="padding:10px 20px;"> | |
#body# | |
#extended# | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment