Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
1034 lines (891 sloc) 20 KB
---
---
// screen css
//
// This file is built with sass 3.2.0.alpha.275 & compass 0.12.2.
// Don't forget to set `lang=ja_JP.utf-8`.
@charset "utf-8";
@import "compass/reset";
@import "compass/css3/background-size";
@import "compass/css3/box-shadow";
@import "compass/css3/border-radius";
@import "compass/css3/text-shadow";
@import "compass/utilities/general/clearfix";
// font
$serif: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif;
$serif_ja: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","MS P明朝", serif;
$gothic: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"MS Pゴシック",Helvetica,Arial,Verdana,sans-serif;
$console: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
$code: "Courier New","Andale Mono",monospace,serif;
$monospace: Monaco, "Courier New", monospace;
// size
$width: 45em;
$body_margin: .5em;
$body_width: $width + $body_margin;
$breakpoint: 568px;
// color
$textcolor: #000000;
$bodybgcolor: #fef9ef;
$subcolor: #336699;
$quiet-color: #888888;
$footerbgcolor: #e9e9e9;
//////////////////////////////// common ////////////////////////////////
body{
font-family: $gothic;
line-height: 1.2;
background: $bodybgcolor;
-webkit-text-size-adjust: 100%;
}
h1,h2,h3,h4,h5,div.title{
font-family: $serif;
}
code{
font-family: $code;
background: #f8f8f8;
padding: 0 .3em;
border: 1px solid #e6e6e6;
@include border-radius(.2em, .2em);
}
strong code{
background: yellow;
}
.synIdentifier{color:#900;}
.synStatement{color:#00f;}
.synComment{color:#080;}
.synConstant{color:#f00;}
.synType{color:#00f;}
strong{
font-weight: normal;
background: yellow;
}
em{
font-weight: bold;
}
del,s{
color: #999999;
}
sub{
font-size: smaller;
}
sup{
vertical-align: super;
font-size: smaller;
}
.clearfix{
@include clearfix;
}
.center{
text-align: center;
}
.right{
text-align: right;
}
//////////////////////////////// layout ////////////////////////////////
footer.page-footer,
.wrap {
text-align: center;
clear: both;
}
.wrapped {
margin: 0 auto;
padding: 0 $body_margin;
width: $width;
text-align: left;
@media screen and (max-width: $body_width){
width: auto;
}
}
// seemore
p.seemore {
a {
padding-left: 22px;
background: url('http://tech.nitoyon.com/img/icon/play_on.gif') center left no-repeat;
}
}
//////////////////////////////// header ////////////////////////////////
header.page-header {
background: white;
border-bottom: 1px solid #dddddd;
margin-bottom: 1em;
@include single-box-shadow(0px, 0px, 20px, null, #dddddd);
.wrapped{
padding-top: 1.3em;
padding-bottom: 1.0em;
position: relative;
h1 a{
display: block;
text-indent: -9999px;
overflow: hidden;
width: 426px;
height: 121px;
@media screen and (max-width: $breakpoint){
@include background-size(213px, 60px);
width: 213px;
height: 60px;
}
&#logo-blog-en{background-image: url('/images/logo-blog-en.png');}
&#logo-blog-ja{background-image: url('/images/logo-blog-ja.png');}
&#logo-en{background-image: url('/images/logo-en.png');}
&#logo-ja{background-image: url('/images/logo-ja.png');}
}
}
nav {
ul{
position: absolute;
right: 0;
top: 0.2em;
&:hover a{
color: #666666
}
li{
display: inline;
a{
color: $quiet-color;
padding: 0 0.5em;
font-size: 0.9em;
font-family: serif;
text-decoration: none;
&:hover{
color: #000000;
@include single-text-shadow(#999999, 0, 0, .1em);
}
}
}
}
}
}
.alternate-notice {
display: none;
background: white;
border: .6em solid #3399ff;
@include border-radius(1em, 1em);
margin-top: 3em;
a {
display: block;
font-size: 150%;
line-height: 1.8;
text-decoration: none;
color: black;
padding: .8em;
}
a span{
color: blue;
word-break: break-all;
text-decoration: none;
}
a:hover span{
text-decoration: underline;
}
}
//////////////////////////////// entry ////////////////////////////////
div#entry {
position: relative;
}
@media screen and (max-width: $breakpoint){
div#entry { padding-top: 250px; }
}
div#post-ad{
margin: 2em 0 1em 0;
@include clearfix;
ins.my_adslot_1{
float: left;
padding-right: 30px;
margin-bottom: 1em;
width: 336px;
height: 280px;
@media screen and (max-width: $breakpoint){
width: 300px;
height: 250px;
float: none;
padding-right: 0;
position: absolute;
top: 0;
}
}
ins.my_adslot_2{
float: left;
width: 336px;
height: 280px;
@media screen and (max-width: $breakpoint){
width: 300px;
height: 250px;
}
}
}
div.entry-body {
margin-top: 1.8em;
margin-bottom: 2em;
}
body.ja article {
h1,h2,h3,h4,h5,div.title{
font-family: $serif_ja;
}
}
// entry header and entry list
article {
// entry title
ul.posts,
header {
.post-date {
vertical-align: middle;
display: inline;
color: $quiet-color;
margin-right: .5em;
}
.post-tags {
display: inline;
span.delimiter {
display: none;
}
a {
vertical-align: middle;
font-size: .8em;
@include border-radius(.4em, .4em);
padding: 0 .5em;
margin: 0 .3em 0 0;
background: lighten($quiet-color, 15%);
color: white;
text-decoration: none;
&:hover {
background-color: darken($quiet-color, 10%);
text-decoration: underline;
}
}
}
.share {
margin: .3em 0 0 0;
}
}
header {
padding-top: 1.8em;
margin-bottom: 1em; // don't delete for adsens margin in low width
h1{
margin: .25em 0 .2em 0;
@include single-text-shadow(#cccccc, .03em, 0, .08em);
font-size: 2.4em;
font-weight: normal;
color: black;
text-decoration: none;
@media screen and (max-width: $breakpoint){
font-size: 1.8em;
}
}
}
ul.posts{
list-style: none;
margin: .7em 0 0 0;
div.title a{
@include single-text-shadow(#cccccc, .03em, 0, .08em);
padding: .5em 0 .2em;
font-size: 1.4em;
font-weight: normal;
color: black;
text-decoration: none;
display: block;
line-height: 1.3;
}
div.title a:visited{
color: #939;
}
div.title a:hover{
text-decoration: underline;
}
li {
margin: 0;
padding: 0 0 .8em 0;
border-bottom: 1px solid white;
border-top: 1px solid #e3e3dc;
&:first-child{
border-top: none;
}
&:last-child{
border-bottom: none;
}
}
}
}
// entry body
article {
// tag container
p.sectionheader{
text-align: right;
margin: 0;
color: #696;
font-size: 0.9em;
position: relative;
top: -2em;
// tag
a.sectioncategory{
color: #696;
background: url('http://f.hatena.ne.jp/images/fotolife/n/nitoyon/20070123/20070123095201.gif') no-repeat center left;
padding: 0 0 0 20px;
text-decoration: none;
}
}
// **
h1{
font-size: 1.8em;
font-weight: bold;
margin: 1.5em 0 0 0;
}
// ***
h2{
font-size: 1.4em;
font-weight: bold;
color: #336699;
margin: 1.8em 0 0 0;
position: relative;
left: -0.1em;
}
h1+h2{
margin-top: 1.4em;
}
// ***
h3{
font-size: 1.2em;
font-weight: bold;
color: #666666;
margin: 2em 0 0 0;
}
h2+h3{
margin-top: 1.4em;
}
p, center{
margin: 1em 0;
line-height: 1.5;
}
p+p{
margin-top: 1.3em;
}
p img, center img, iframe.youtube{
padding: 10px;
background: white;
border: 1px solid #cccccc;
@include border-radius(6px, 6px);
@include single-box-shadow(0px, 4px, 10px, null, #cccccc);
@media screen and (max-width: $breakpoint){
max-width: 100%;
height: auto;
width: auto\9; // IE8 hack
background: transparent;
padding: 0;
border: 0;
@include border-radius(0, 0);
}
}
img.tex, img.no-border, img.http-bookmark, img.hatena-id-icon{
background: transparent;
padding: 0;
border: 0;
@include border-radius(0, 0);
@include single-box-shadow(0, 0, 0, null, #cccccc);
}
img.hatena-id-icon{
padding-right: .2em;
}
ul, ol{
margin: 1em 0 1em 1.5em;
}
li ul, li ol{
margin: 0 0 0 1em;
}
ol{
list-style: decimal outside;
}
ul{
list-style: disc outside;
ul{
list-style: circle outside;
}
}
li{
margin: .4em 0 .4em 1.0em;
line-height: 1.5;
}
dl{
margin: 1em;
dt{
color: #336699;
font-weight: bold;
margin: 0.2em 0;
}
dd{
margin: 0.2em 0 0.2em 2em;
line-height: 1.5;
}
}
blockquote{
margin: 1em 0;
background: white;
border: .4em solid #cccccc;
@include border-radius(1em, 1em);
padding: 0 1em;
cite{
display: block;
font-size: 0.9em;
text-align: right;
padding-bottom: 0.5em;
}
}
pre{
font-family: $console;
margin: 1em 0;
background: white;
border: .4em solid #cccccc;
@include border-radius(1em, 1em);
padding: 1em;
overflow: visible;
/*\*/
overflow: auto;
/**/
}
pre code{
background: inherit;
border: none;
padding: 0;
}
table{
border: 1px solid #666666;
border-collapse: collapse;
@include single-box-shadow(0px, 4px, 10px, null, #cccccc);
border-spacing: 0;
margin: 1em 1em 1em 2em;
th,td{
padding: 0.5em 1em;
border: 1px solid #666666;
}
th{
font-weight: bold;
background: #eeeee9;
text-align: center;
}
td{
background: white;
}
}
// seealso, toc
div.seealso, div.toc{
background:$footerbgcolor;
@include border-radius(.5em, .5em);
margin: 1em 0;
padding: 1em 1em .6em 1em;
h1, // <h1> is used in old *.htn entries
h4{
border: 0;
margin: 0 0 .4em 0;
color: black;
font-weight: bold;
font-family: $gothic;
font-size: 100%;
font-family: selif;
}
ul{
margin: 0;
padding: 0;
li{
background:url('http://tech.nitoyon.com/img/icon/item.gif') no-repeat 4px top;
display: block;
padding-left: 24px;
margin: .2em 0;
}
}
}
// amazon
div.hatena-asin-detail {
margin: 1em;
padding: 1em;
border: .4em solid #cccccc;
@include border-radius(1em, 1em);
background: white;
img.hatena-asin-detail-image {
float: left;
border: 0;
margin: 0 10px 0 0 ;
}
div.hatena-asin-detail-info{
margin: 0 0 0 140px;
word-break: break-all;
p.hatena-asin-detail-title{
font-weight: bold;
width: 100%;
margin: 0;
}
ul {
list-style-type: none;
margin: 5px 0 0 0;
padding: 0;
li {
margin: 0;
padding: 0;
}
}
}
div.hatena-asin-detail-foot{
clear: both;
}
p a{
border: 0;
}
}
// twitter
iframe.twitter-tweet {
margin: 1em auto !important;
}
// google gadget
table.gadget {
border-collapse: separate;
border: 1px solid #666666;
td {
border: none;
padding: 0 .5em;
img {
padding: 0;
background: transparent;
border: 0;
@include border-radius(0, 0);
@include single-box-shadow(0, 0, 0, null, #cccccc);
}
}
}
}
.share{
margin-bottom: 1em;
.hatena-bookmark-button-frame,
.twitter-share-button,
div.fb-like {
padding-right: .5em;
}
div.fb-like {
// fix Google Chrome layout in Zoom 125%
vertical-align: top;
}
.twitter-share-button { padding-right: .2em; }
}
.ja .share .twitter-share-button { width: 110px!important; }
.en .share .twitter-share-button { width: 85px!important; }
article footer{
div.share{
margin: 1em 0 1em 0;
}
div.entry-data{
margin: 1.2em 0;
color: $quiet-color;
div.post-date{
margin-bottom: .4em;
span.edit-history{
&:before { content: "("; }
&:after { content: ")"; }
}
}
a { color: $quiet-color; }
.ja & div.post-date:before{ content: "公開: "; }
.ja & div.post-tags:before{ content: "タグ: "; }
.en & div.post-date:before{ content: "Posted: "; }
.en & div.post-tags:before{ content: "Tags: "; }
}
div#pager{
margin: 2em 0 2.5em 0;
div.previous a b{
padding-right: .2em;
}
div.next{
text-align: right;
a b{
padding-left: .2em;
}
}
div.previous a,
div.next a{
padding: .2em 0;
text-decoration: none;
b{
color: #000;
}
}
a:hover span.title{
text-decoration: underline;
}
}
}
//////////////////////////////// about ////////////////////////////////
#aboutme {
margin-top: 1em;
img#aboutme_pic {
float: left;
padding: 5px;
width: 200px;
height: 150px;
background: white;
border: 1px solid #eeeeee;
@include border-radius(6px, 6px);
@include single-box-shadow(0px, 4px, 10px, null, #eeeeee);
@media screen and (max-width: $breakpoint){
float: right;
margin: 0 0 .5em .5em;
width: 100px;
height: 75px;
}
}
div#aboutme_text{
margin-left: 240px;
@media screen and (max-width: $breakpoint){
margin-left: 0;
}
}
h2:first-child {
margin-top: .8em;
}
p {
margin: .8em 0;
}
h2 {
margin-top: 1.5em;
}
div.icons {
margin-top: .5em;
}
}
#about-logo {
margin-top: 1em;
img {
float: left;
margin: 0 10px 10px 0;
width: 114px;
height: 114px;
@media screen and (max-width: $breakpoint){
width: 57px;
height: 57px;
}
}
div#about-logo-text{
margin-left: 124px;
@include clearfix;
@media screen and (max-width: $breakpoint){
margin-left: 0;
}
}
p {
margin: .8em 0;
}
}
//////////////////////////////// footer ////////////////////////////////
$footer_gap: 1.5em;
footer.page-footer {
margin-top: 3.5em;
background: $footerbgcolor;
@include single-box-shadow(0px, 0px, 20px, null, #aaaaaa);
h2{
margin: 0;
display: none;
}
.wrapped{
padding-top: $footer_gap;
}
h3{
font-size: 1.1em;
color: $subcolor;
font-family: $serif;
font-weight: bold;
margin-bottom: .4em;
@include text-shadow(white 0 1px 1px, darken($subcolor, 30%) 0 -1px 1px);
}
$column_gap: 2em;
$column_width: ($width - $column_gap) / 2;
div.column{
width: $column_width;
@media screen and (max-width: $body_width){
width: auto;
}
}
#recententries{
ul li{
border-bottom: darken($footerbgcolor, 5%) solid 1px;
a{
display: block;
color: black;
text-decoration: none;
padding: .4em .4em .4em 24px;
line-height: 1.4;
background: url('http://tech.nitoyon.com/img/icon/item.gif') no-repeat 4px 4px;
@include border-radius(.5em, .5em);
&:hover{
text-decoration: underline;
background-color: white;
}
}
}
}
#footer-right-column{
float: right;
@media screen and (max-width: $body_width){
float: none;
}
}
#profile{
margin-bottom: $footer_gap;
a#prof_pic{
img{
width: 64px;
height: 56px;
float: left;
}
}
p{
margin: 0 0 .7em 74px;
line-height: 1.3;
}
}
#subscribe{
@include clearfix;
margin-bottom: $footer_gap;
li{
display: inline;
float: left;
a{
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
margin-right: 4px;
}
}
}
#archive{
clear: both;
}
#archive_month_list{
li.year {
margin-bottom: .4em;
a.year {
color: $quiet-color;
padding: .1em .3em;
font-weight: bold;
text-decoration: none;
}
}
ul.monthes {
display: inline;
@media screen and (max-width: $body_width){
display: block;
margin-bottom: .8em;
}
li {
display: inline;
br {
display: none;
@media screen and (max-width: $body_width){
display: inline;
}
}
}
}
.month{
padding: .1em .3em;
color: #000000;
text-decoration: none;
padding: 0 0.3em;
}
span.month{
color: darken($footerbgcolor, 15%);
}
a:hover{
background: white;
@include border-radius(.5em, .5em);
text-decoration: underline;
}
}
div.copy{
margin-top: $footer_gap;
padding: 1em 0;
font-size: 0.8em;
font-weight: bold;
background: darken($footerbgcolor, 60%);
color: white;
@include single-box-shadow(0px, 0px, 20px, null, #888888);
}
}
//////////////////////////////// icon ////////////////////////////////
.twitter-icon32 { background: url('/images/profiles/twitter.gif') no-repeat left top; }
.facebook-icon32 { background: url('/images/profiles/facebook.gif') no-repeat left top; }
.rss-icon32 { background: url('/images/profiles/rss.png') no-repeat left top; }
//////////////////////////////// highlight ////////////////////////////////
// https://github.com/richleland/pygments-css/blob/master/default.css
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f8f8f8; }
.highlight span.c { color: #408080; font-style: italic } // Comment
.highlight .err { border: 1px solid #FF0000 } // Error
.highlight .k { color: #008000; font-weight: bold } // Keyword
.highlight .o { color: #666666 } // Operator
.highlight .cm { color: #408080; font-style: italic } // Comment.Multiline
.highlight .cp { color: #BC7A00 } // Comment.Preproc
.highlight .c1 { color: #408080; font-style: italic } // Comment.Single
.highlight .cs { color: #408080; font-style: italic } // Comment.Special
.highlight .gd { color: #A00000 } // Generic.Deleted
.highlight .ge { font-style: italic } // Generic.Emph
.highlight .gr { color: #FF0000 } // Generic.Error
.highlight .gh { color: #000080; font-weight: bold } // Generic.Heading
.highlight .gi { color: #00A000 } // Generic.Inserted
.highlight .go { color: #808080 } // Generic.Output
.highlight .gp { color: #000080; font-weight: bold } // Generic.Prompt
.highlight .gs { font-weight: bold } // Generic.Strong
.highlight .gu { color: #800080; font-weight: bold } // Generic.Subheading
.highlight .gt { color: #0040D0 } // Generic.Traceback
.highlight .kc { color: #008000; font-weight: bold } // Keyword.Constant
.highlight .kd { color: #008000; font-weight: bold } // Keyword.Declaration
.highlight .kn { color: #008000; font-weight: bold } // Keyword.Namespace
.highlight .kp { color: #008000 } // Keyword.Pseudo
.highlight .kr { color: #008000; font-weight: bold } // Keyword.Reserved
.highlight .kt { color: #B00040 } // Keyword.Type
.highlight .m { color: #666666 } // Literal.Number
.highlight .s { color: #BA2121 } // Literal.String
.highlight .na { color: #7D9029 } // Name.Attribute
.highlight .nb { color: #008000 } // Name.Builtin
.highlight .nc { color: #0000FF; font-weight: bold } // Name.Class
.highlight .no { color: #880000 } // Name.Constant
.highlight .nd { color: #AA22FF } // Name.Decorator
.highlight .ni { color: #999999; font-weight: bold } // Name.Entity
.highlight .ne { color: #D2413A; font-weight: bold } // Name.Exception
.highlight .nf { color: #0000FF } // Name.Function
.highlight .nl { color: #A0A000 } // Name.Label
.highlight .nn { color: #0000FF; font-weight: bold } // Name.Namespace
.highlight .nt { color: #008000; font-weight: bold } // Name.Tag
.highlight .nv { color: #19177C } // Name.Variable
.highlight .ow { color: #AA22FF; font-weight: bold } // Operator.Word
.highlight .w { color: #bbbbbb } // Text.Whitespace
.highlight .mf { color: #666666 } // Literal.Number.Float
.highlight .mh { color: #666666 } // Literal.Number.Hex
.highlight .mi { color: #666666 } // Literal.Number.Integer
.highlight .mo { color: #666666 } // Literal.Number.Oct
.highlight .sb { color: #BA2121 } // Literal.String.Backtick
.highlight .sc { color: #BA2121 } // Literal.String.Char
.highlight .sd { color: #BA2121; font-style: italic } // Literal.String.Doc
.highlight .s2 { color: #BA2121 } // Literal.String.Double
.highlight .se { color: #BB6622; font-weight: bold } // Literal.String.Escape
.highlight .sh { color: #BA2121 } // Literal.String.Heredoc
.highlight .si { color: #BB6688; font-weight: bold } // Literal.String.Interpol
.highlight .sx { color: #008000 } // Literal.String.Other
.highlight .sr { color: #BB6688 } // Literal.String.Regex
.highlight .s1 { color: #BA2121 } // Literal.String.Single
.highlight .ss { color: #19177C } // Literal.String.Symbol
.highlight .bp { color: #008000 } // Name.Builtin.Pseudo
.highlight .vc { color: #19177C } // Name.Variable.Class
.highlight .vg { color: #19177C } // Name.Variable.Global
.highlight .vi { color: #19177C } // Name.Variable.Instance
.highlight .il { color: #666666 } // Literal.Number.Integer.Long
//////////////////////////////// cloud ////////////////////////////////
.tag-cloud {
margin-top: .7em;
}
.tag-cloud a {
text-decoration: none;
margin-right: .2em;
}
.tag-cloud a:hover {
text-decoration: underline;
}
.tag-cloud-0 { font-size: 2.4em; }
.tag-cloud-1 { font-size: 2.2em; }
.tag-cloud-2 { font-size: 2.0em; }
.tag-cloud-3 { font-size: 1.8em; }
.tag-cloud-4 { font-size: 1.4em; }
.tag-cloud-5 { font-size: 1em; }
You can’t perform that action at this time.