2014-07-09 09:46:24 +09:00
|
|
|
$grid-unit:70px;
|
2014-08-05 12:25:26 +09:00
|
|
|
$grid-margin:10px;
|
2014-07-09 09:46:24 +09:00
|
|
|
$grid-padding:15px;
|
|
|
|
$break-small:500px;
|
|
|
|
|
|
|
|
$small-break: 30em;
|
|
|
|
$medium-break: 50em;
|
|
|
|
|
|
|
|
@mixin small(){
|
|
|
|
@media screen and (max-width: $small-break) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@mixin small-medium(){
|
|
|
|
@media screen and (max-width: $medium-break) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@mixin medium(){
|
|
|
|
@media screen and (min-width: $small-break) and (max-width: $medium-break) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@mixin medium-large(){
|
|
|
|
@media screen and (min-width: $small-break) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@mixin large(){
|
|
|
|
@media screen and (min-width: $medium-break) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
2012-08-25 11:20:17 +09:00
|
|
|
|
2014-07-09 09:46:24 +09:00
|
|
|
.content-wrapper{
|
|
|
|
padding: 0 10px;
|
2014-07-14 10:12:02 +09:00
|
|
|
@include small{
|
|
|
|
overflow-x: hidden;
|
|
|
|
}
|
2014-07-09 09:46:24 +09:00
|
|
|
}
|
2012-08-25 11:20:17 +09:00
|
|
|
.grid{
|
2014-07-09 09:46:24 +09:00
|
|
|
width:100%;
|
|
|
|
max-width: 1000px;
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
2012-08-25 11:20:17 +09:00
|
|
|
}
|
|
|
|
.grid-small{
|
2014-07-10 11:45:34 +09:00
|
|
|
width: 100%;
|
|
|
|
max-width:320px;
|
2012-08-25 11:20:17 +09:00
|
|
|
margin:0 auto;
|
|
|
|
}
|