Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

530 lines (441 sloc) 9.68 kb
// Import Hatena-origin styles
// -------------------------
@import url("http://d.st-hatena.com/statics/css/base.css");
@import url("http://d.st-hatena.com/statics/css/headerstyle_de.css");
// Web fonts
// -------------------------
@import url(http://fonts.googleapis.com/css?family=Canata+One);
// Container
// -------------------------
@bodyWidth: 80%;
@bodyMaxWidth: 800px;
@bodyMinWidth: 300px;
// Colors
// -------------------------
@white: #fff;
@black: #000;
@beige: #efedea;
@gray: #333;
@lightGray: #727374;
@bruiseBlue: #293587;
@darkBlue: #314a64;
// @grass: #557933;
@grass: #719a4e;
@lightGrass: #bbdb90;
@skyblue: #00afd8;
@vermilion: #ec3925;
@hotWater: #0ca5b0;
@coffeeBeans: #4e3f30;
@milk: #fefeeb;
@sugar: #f8f4e4;
@stlrrlngSpoon: #a5b3aa;
@qwhite: #eeeeee;
@loversGray: #515151;
@metroBlue: #00B4ff;
// Text and background colors
// -------------------------
@bodyBackground: @qwhite;
// @footerBackground: darken(@beige, 10%);
@footerBackground: darken(@beige, 10%);
@textColor: @gray;
@footerTextColor: @black;
@borderColor: #cdcdcc;
// Links
// -------------------------
@linkColor: @bruiseBlue;
@linkColorHover: darken(@linkColor, 15%);
@footerLinkColor: @linkColor;
@footerLinkColorHover: darken(@footerLinkColor, 15%);
// Dates
// -------------------------
@dateColor: @grass;
// Typography
// -------------------------
@sansFontFamily: Corbel, 'Helvetica Neue', Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@quoteFontFamily: "Constantia", Georgia, 'Hoefler Text', 'Times New Roman', serif;
@monoFontFamily: Monaco, Consolas, "Courier New", monospace;
// @titleFontFamily: 'Cantata One', serif;
@titleFontFamily: @sansFontFamily;
@baseFontSize: 1.2em;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 1.7em;
@titleFontColor: @textColor;
@titleFontSize: @baseFontSize + 1.5;
@titleFontColor: @lightGray;
@titleFontSize: 14px;
@sectionFooterColor: @lightGray;
@sectionFooterFontSize: @baseFontSize - 0.3;
@headingsFontFamily: @sansFontFamily;
@headingsColor: @black;
// Mixins
// -------------------------
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
}
.letter-press(@deep: 1px) {
text-shadow: 0 @deep 0 @white;
}
.quoteMargin() {
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
// Container
// ------
body {
margin: 0;
padding: 0;
background-color: @bodyBackground;
color: @textColor;
}
div.hatena-body, h1, div#admin {
margin-right: auto;
margin-left: auto;
max-width: @bodyMaxWidth;
width: @bodyWidth;
}
div#footer {
background-color: @footerBackground;
font-family: @serifFontFamily;
color: @footerTextColor;
padding-top: 20px;
padding-bottom: 50px;
margin-top: 2em;
border: 1px solid darken(@footerBackground, 2%);
.footer-wrapper {
margin-left: auto;
margin-right: auto;
max-width: @bodyMaxWidth;
width: @bodyWidth;
}
.footer-section {
.flexbox();
}
#footer-column01 {
width: 80px;
img {
max-width: 64px;
.border-radius(5px);
}
}
#footer-column02 {
width: 400px;
}
ul {
margin-top: 0;
padding-top: 5px;
margin-left: 0;
padding-left: 0;
}
ul li {
display: inline;
color: darken(@footerBackground, 10%);
}
}
// Links
// -----
a {
color: @linkColor;
// text-decoration: none;
}
a:hover {
color: @linkColorHover;
}
a.keyword {
color: @textColor;
text-decoration: none;
border-bottom: 1px solid @borderColor;
}
a.keyword:hover {
color: darken(@textColor, 10%);
// text-decoration: underline;
border-bottom: 1px solid @grass;
}
div#footer {
a {
color: @footerLinkColor;
text-decoration: none;
}
a:hover {
color: @footerLinkColorHover;
text-decoration: underline;
}
}
// Body Text
// ---------
div.hatena-body {
font-size: @baseFontSize;
p {
font-family: @baseFontFamily;
line-height: @baseLineHeight;
margin: 1.2em 0;
}
p.description {
color: @lightGray;
font-size: @baseFontSize - 0.4;
font-weight: normal;
// border-bottom: 1px solid @borderColor;
margin-top: 0;
padding-left: 3px;
text-indent: 0;
text-align: left;
.letter-press(1px);
}
p.sectionfooter {
text-indent: 0;
font-size: @sectionFooterFontSize;
color: @sectionFooterColor;
text-align: right;
}
ul {
// font-size: @baseFontSize;
font-family: @baseFontFamily;
}
ul li {
line-height: 150%;
}
blockquote {
display: block;
position: relative;
margin: 1.5em 4em;
line-height: 1.45em;
p {
}
cite {
font-size: @baseFontSize - 0.3em;
}
}
blockquote::before {
font-family: @quoteFontFamily;
left: -.5em;
position: absolute;
top: .25em;
content: '\201C';
font-size: 4em;
opacity: .2;
}
}
div.body {
ul li {
padding-top: 5px;
padding-bottom: 5px;
}
}
// HEADINGS
// --------
h1, h2, h3, h4, h5, h6 {
font-family: @headingsFontFamily;
color: @headingsColor;
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
}
h1 {
font-weight: normal;
.letter-press(1px);
font-size: @titleFontSize;
font-family: @titleFontFamily;
text-align: left;
//text-transform: uppercase;
margin-top: 30px;
margin-bottom: 0;
padding-bottom: 0;
// padding-left: 30px;
// background-image: url("http://naoya.dyndns.org/images/gapple_trans.png");
// background-repeat: no-repeat;
// background-position: left;
// padding-top: 5px;
// padding-bottom: 5px;
// padding-left: 29px;
a {
color: @titleFontColor;
}
}
h1::first-letter {
// color: @vermilion;
// background-color: @skyblue;
// padding: 5px;
// margin-right: 2px;
// .letter-press(3);
}
h2 {
font-weight: normal;
font-size: @baseFontSize - 0.1;
font-family: @sansFontFamily;
.letter-press(1px);
margin-top: 10px;
a {
// color: @dateColor;
color: @dateColor;
}
a:hover {
color: darken(@dateColor, 15%)
}
.edit {
color: @lightGray;
font-size: 70%;
}
.edit:hover {
color: darken(@lightGray, 15%);
}
}
#footer h2 {
color: @footerTextColor;
font-family: @titleFontFamily;
font-size: @baseFontSize + 0.2;
font-weight: bold;
// text-shadow: 0 1px 0 @lightGrass;
.letter-press(1px);
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
h3 {
font-family: @serifFontFamily;
font-size: @baseFontSize + 0.2;
.letter-press(1px);
margin-top: 0;
margin-bottom: 0;
padding-top: 0.8em;
padding-bottom: 0.8em;
border-top: 1px solid @borderColor;
border-bottom: 1px solid @borderColor;
.sanchor {
color: @bodyBackground;
text-decoration: none;
background-image: url("http://naoya.dyndns.org/images/gapple_trans.png");
background-repeat: no-repeat;
background-position: bottom left;
padding: 25px 23px 0 0;
margin-right: 3px;
font-size: 0px;
color: @bodyBackground;
.letter-press(0px);
}
}
h4 {
font-size: @baseFontSize;
// .letter-press(1px);
}
h5 {
// .letter-press(1px);
}
#footer h3 {
background-image: none;
padding-left: 0;
color: @footerTextColor;
font-family: @serifFontFamily;
font-weight: normal;
font-size: @baseFontSize - 0.2;
.letter-press(0);
padding-top: 5px;
border-top: 0;
border-bottom: 0;
}
// Comments
// --------
div.comment, div.refererlist {
margin-top: 40px;
margin-bottom: 40px;
font-size: 0.9em;
div.caption {
// font-weight: bold;
font-size: 1.1em;
.letter-press(1px);
border-bottom: 1px solid @borderColor;
a {
color: @textColor;
}
}
ul {
list-style-type: disc;
margin-left: 0;
padding-left: 10px;
}
ul li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
textarea {
width: 70%;
height: 10em;
border: 1px solid @borderColor;
}
input[type="submit"] {
// border: 1px solid d;
border: 1px solid @white;
// color: @white;
background: darken(@beige, 10%);
font-size: @baseFontSize - 0.4;
padding-top: 5px;
paddin-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
.letter-press(1px);
.border-radius(5px);
}
input[type="checkbox"] {
border: 1px solid @white;
}
p.commentmessage, p.commentdelete {
color: @lightGray;
font-size: smaller;
.letter-press(1px);
}
}
// Inline and block code styles
// --------
code, pre {
font-family: @monoFontFamily;
font-size: @baseFontSize - 0.4;
}
pre {
display: block;
// padding: (@baseLineHeight - 1) / 2;
// margin: 0 0 @baseLineHeight / 2;
padding: 1em;
margin: 0.5em;
word-break: break-all;
word-wrap : break-word;
white-space: pre;
white-space: pre-wrap;
background-color: @white;
// color: #f5f5f5;
border: 1px solid rgba(0,0,0,.15);
.border-radius(4px);
}
// Misc
// ------
div.calendar {
font-family: @sansFontFamily;
font-size: @baseFontSize - 0.3;
text-align: right;
}
#pager-top {
display: none;
}
// Admin
// ------
div#admin {
margin-top: 1em;
margin-bottom: 1em;
}
div#admin textarea {
width: 100%;
height: 20em;
}
Jump to Line
Something went wrong with that request. Please try again.