Skip to content

Instantly share code, notes, and snippets.

@ykhs
Created April 10, 2011 14:22
Show Gist options
  • Save ykhs/912381 to your computer and use it in GitHub Desktop.
Save ykhs/912381 to your computer and use it in GitHub Desktop.
個人サイトに Sass を導入してみた
@mixin clearfix {
clear: both;
zoom: 1;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
/*!
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/
Licensed under GPL and MIT.
*/
// Containers
//----------------------------------------------------------------------------------------------------
@mixin grid-container {
@include clearfix;
margin-left: auto;
margin-right: auto;
width: 660px;
}
// Grid >> Global
//----------------------------------------------------------------------------------------------------
@mixin grid {
display:inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
// Grid >> Children (Alpha ~ First, Omega ~ Last)
//----------------------------------------------------------------------------------------------------
@mixin grid-alpha {
margin-left: 0;
}
@mixin grid-omega {
margin-right: 0;
}
// Grid >> 6 Columns
//----------------------------------------------------------------------------------------------------
@mixin grid-span1 {
@include grid;
width:90px;
}
@mixin grid-span2 {
@include grid;
width:200px;
}
@mixin grid-span3 {
@include grid;
width:310px;
}
@mixin grid-span4 {
@include grid;
width:420px;
}
@mixin grid-span5 {
@include grid;
width:530px;
}
@mixin grid-span6 {
@include grid;
width:640px;
}
/******************************************************************************
* HTML5 elements
*/
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
//=============================================================================
// Site Mixin
//=============================================================================
// Headings
@mixin heading-lv1 {
font-size: $yui-48px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.16), 2px 2px 1px rgba(0,0,0,0.12);
background: url(./images/bg-site-title.gif) no-repeat 0 bottom;
}
@mixin heading-lv2 {
margin-top: 40px;
font-size: $yui-30px;
font-family: $fontSerif;
text-shadow: 1px 1px 1px rgba(255,255,255,0.16), 2px 2px 1px rgba(0,0,0,0.12);
border-bottom: 1px solid $borderColorLight;
background: none;
}
@mixin heading-lv3 {
margin-top: 40px;
font-size: $yui-24px;
font-family: $fontSerif;
text-shadow: none;
border-bottom: 1px solid $borderColorExLight;
}
@mixin heading-lv4 {
margin-top: 40px;
font-size: $yui-20px;
font-family: $fontSerif;
text-shadow: none;
border: 0;
}
//=============================================================================
// Site Variables
//=============================================================================
// リンクカラー
$linkColor: #0066cc;
// ボーダーカラー
$borderColorMain: #686868;
// ボーダーカラー 明るく
$borderColorLight: #acacac;
// ボーダーカラー さらに明るく
$borderColorExLight: #cccccc;
// テキストカラー
$textColorMain: #686868;
// セリフフォント指定
$fontSerif: "georgia", "Hiragino Mincho Pro", "MS PMincho", serif;
/*!
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
$yui-10px: 77%;
$yui-11px: 85%;
$yui-12px: 93%;
$yui-13px: 100%;
$yui-14px: 108%;
$yui-15px: 116%;
$yui-16px: 123.1%;
$yui-17px: 131%;
$yui-18px: 138.5%;
$yui-19px: 146.5%;
$yui-20px: 153.9%;
$yui-21px: 161.6%;
$yui-22px: 167%;
$yui-23px: 174%;
$yui-24px: 182%;
$yui-25px: 189%;
$yui-26px: 197%;
$yui-27px: 207.7%;
$yui-28px: 215.4%;
$yui-29px: 223.1%;
$yui-30px: 230.8%;
$yui-48px: 369.2%;
/*!
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
@import "yui-reset-min";
@import "yui-fonts-min";
@import "grid";
@import "html5";
@import "clearfix";
@import "site-mixin";
@import "site-variables";
/******************************************************************************
* Site Structure
*/
html {
height: 100%;
overflow-y: scroll;
}
body {
min-height: 100%;
height: auto !important;
height: 100%;
text-align: center;
line-height: 1.6;
color: $textColorMain;
background: #f9faf2 url(./images/bg-body.jpg) repeat-x center 0;
}
a {
color: $linkColor;
text-decoration: none;
&:hover { text-decoration: underline; }
}
.wrap {
@include grid-container;
text-align: left;
}
/******************************************************************************
* site-header
*/
.site-header {
@include grid-span6;
padding-top: 30px;
text-align: left;
font-family: $fontSerif;
h1 { @include heading-lv1; }
}
/******************************************************************************
* site-nav
*/
.site-nav {
h1 { @include heading-lv2; }
ul {
@include clearfix;
margin: 10px 0 0;
font-size: $yui-20px;
line-height: 1;
border: solid $borderColorLight;
border-width: 0 0 0 1px;
li {
float: left;
display: inline;
border: solid $borderColorLight;
border-width: 0 1px 0 0;
a {
display: block;
padding: 0 18px;
}
}
}
}
/******************************************************************************
* site-main
*/
.site-main {
@include grid-span6;
h1 { @include heading-lv2; }
}
/******************************************************************************
* site-footer
*/
.site-footer {
@include grid-span6;
@include clearfix;
margin-top: 80px;
padding-bottom: 30px;
text-align: left;
font-family: $fontSerif;
border-top: 1px solid $borderColorMain;
.copy {
margin: 10px 0 0;
}
}
/******************************************************************************
* mod-post (blog single view)
*/
.mod-post {
header {
margin: 40px 0;
h1 {
@include heading-lv3;
margin: 0;
}
}
.tags {
display: inline;
}
p, blockquote {
margin: 30px 0 0;
}
// headings
section h1 {
@include heading-lv4;
}
section section h1 {
font-size: $yui-16px;
}
// list
ul {
margin: 24px 0 0;
list-style-type: circle;
list-style-position: inside;
li { padding: 6px 0 0; }
ul { margin: 0 0 0 1em; }
}
// list with number
ol {
margin: 24px 0 0;
li {
padding: 6px 0 0;
list-style-type: decimal;
list-style-position: inside;
}
ol {
margin: 0 0 0 1em;
list-style-type: lower-latin;
ol { list-style-type: decimal; }
}
}
// list with definition
dl {
margin: 22px 0 0;
dt { padding: 8px 0 0; }
dd { margin: 0 0 0 1em; }
}
// quote
blockquote {
padding: 0 10px 10px;
border: 1px solid #e6e6e6;
background: #ececec;
p {
margin: 0;
padding: 10px 0 0;
}
}
// image
img {
margin: 40px 0 0;
}
.caption {
padding: 30px 0 0;
}
p img {
margin: 0;
}
// Gist
.gist {
margin-top: 30px;
}
// Syntax Highlighter
.syntaxhighlighter {
width: auto !important;
margin: 30px 0 0 !important;
}
}
/******************************************************************************
* mod-post-others (blog single view)
*/
.mod-post-others {
.old-and-new {
margin-top: 20px;
@include clearfix;
.newer {
@include grid-span3;
@include grid-alpha;
}
.older {
@include grid-span3;
@include grid-omega;
}
}
dt {
@include heading-lv3;
}
dd {
padding: 8px 0 0;
list-style: circle inside;
}
}
/******************************************************************************
* mod-post-summaries (blog summary view)
*/
.mod-post-summaries {
h1 { @include heading-lv3; }
.summary {
h1 { @include heading-lv4; }
.desc { margin-top: 6px; }
.date { margin-top: 3px; }
}
}
/******************************************************************************
* mod-post-tags (blog summary view)
*/
.mod-post-tags {
@include grid-span3;
@include grid-alpha;
h1 { @include heading-lv3; }
ul {
margin-top: 15px;
}
li {
display: inline;
padding-right: 8px;
}
}
/******************************************************************************
* mod-post-archives (blog summary view)
*/
.mod-post-archives {
@include grid-span3;
@include grid-omega;
h1 { @include heading-lv3; }
ul {
margin-top: 15px;
}
li {
display: inline;
padding-right: 8px;
}
}
/******************************************************************************
* paging
*/
.mod-paging {
margin-top: 40px;
p { @include grid-span3; }
.back { @include grid-alpha; }
.next { @include grid-omega; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment