summaryrefslogtreecommitdiffstats
path: root/sass
diff options
context:
space:
mode:
Diffstat (limited to 'sass')
-rw-r--r--sass/base/_color.scss9
-rw-r--r--sass/base/_layout.scss4
-rw-r--r--sass/parts/_archive.scss12
-rw-r--r--sass/parts/_article.scss27
-rw-r--r--sass/parts/_footer.scss2
-rw-r--r--sass/parts/_header.scss22
-rw-r--r--sass/parts/_post.scss6
-rw-r--r--sass/parts/_syntax.scss8
-rw-r--r--sass/parts/_twitter.scss4
9 files changed, 48 insertions, 46 deletions
diff --git a/sass/base/_color.scss b/sass/base/_color.scss
index 51efe3d..7dbee46 100644
--- a/sass/base/_color.scss
+++ b/sass/base/_color.scss
@@ -1,6 +1,7 @@
$background: #eee;
$main: #258fb8;
-$border: #ddd;
-$light-shadow: #fff;
-$font-main: #666;
-$font-meta: #999; \ No newline at end of file
+$gray01: #666;
+$gray02: #999;
+$gray03: #ccc;
+$gray04: #ddd;
+$gray05: #fff; \ No newline at end of file
diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss
index 71cb9f1..da9ad8a 100644
--- a/sass/base/_layout.scss
+++ b/sass/base/_layout.scss
@@ -11,7 +11,7 @@ $max-width: 1000px;
-o-user-select: $select;
user-select: $select;
}
-@mixin border-shadow($top: #fff, $bottom: #ddd){
+@mixin border-shadow($top: $gray05, $bottom: $gray04){
border-top: 1px solid $top;
border-bottom: 1px solid $bottom;
}
@@ -34,7 +34,7 @@ body{
font-weight: 300;
font-size: 14px;
background: $background;
- color: $font-main;
+ color: $gray01;
}
h1{
font-size: 1.8em;
diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss
index 694c0e2..405922d 100644
--- a/sass/parts/_archive.scss
+++ b/sass/parts/_archive.scss
@@ -1,7 +1,7 @@
section.archive{
position: relative;
&:first-of-type{
- border-top: 1px solid $light-shadow;
+ border-top: 1px solid $gray05;
article.archive{
border-top: none;
}
@@ -13,7 +13,7 @@ section.archive{
}
}
&:last-of-type{
- border-bottom: 1px solid $border;
+ border-bottom: 1px solid $gray04;
article.archive{
border-bottom: none;
}
@@ -30,7 +30,7 @@ section.archive{
position: absolute;
top: -2px;
width: 100%;
- border-top: 1px solid #ddd;
+ border-top: 1px solid $gray04;
}
}
article.archive{
@@ -39,7 +39,7 @@ section.archive{
margin-bottom: 0;
}
.meta{
- color: $font-meta;
+ color: $gray02;
line-height: 2;
margin-top: 15px;
span{
@@ -48,10 +48,10 @@ section.archive{
display: inline-block;
}
a{
- color: $font-meta;
+ color: $gray02;
@include transition(0.3s);
&:hover{
- color: $font-main;
+ color: $gray01;
}
}
.date{
diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss
index 953a337..5754fd1 100644
--- a/sass/parts/_article.scss
+++ b/sass/parts/_article.scss
@@ -1,6 +1,6 @@
article{
- border-bottom: 1px solid $border;
- border-top: 1px solid $light-shadow;
+ border-bottom: 1px solid $gray04;
+ border-top: 1px solid $gray05;
padding: 30px 0;
position: relative;
h1.title{
@@ -8,7 +8,7 @@ article{
line-height: 35px;
margin-bottom: 20px;
a{
- color: $font-main;
+ color: $gray01;
}
}
.entry{
@@ -42,13 +42,13 @@ article{
h2{
font-weight: 300;
margin-top: 10px;
- border-bottom: 1px solid $border;
+ border-bottom: 1px solid $gray04;
position: relative;
&:before{
content: "";
position: absolute;
bottom: -2px;
- border-bottom: 1px solid $light-shadow;
+ border-bottom: 1px solid $gray05;
width: 100%;
}
}
@@ -60,21 +60,22 @@ article{
height: auto;
}
blockquote{
- background: $border;
- border-left: 5px solid #ccc;
+ background: $gray04;
+ border-left: 5px solid $gray03;
padding: 15px 20px;
margin-top: 10px;
& > p:first-of-type{
margin-top: 0;
}
}
- iframe[src*="youtube"]{
+ iframe{
margin-top: 10px;
+ border: none;
}
ol, ul, p, blockquote{
code{
- background: $border;
- border: 1px solid #ccc;
+ background: $gray04;
+ border: 1px solid $gray03;
padding: 1px 3px;
margin: 0 3px;
@include border-radius(5px);
@@ -84,10 +85,10 @@ article{
font: $meta-size $monospace;
}
>pre{
- background: $border;
+ background: $gray04;
padding: 5px 15px;
margin-top: 10px;
- border: 1px solid #ccc;
+ border: 1px solid $gray03;
line-height: 1.5;
overflow-x: auto;
@include border-radius(5px);
@@ -96,7 +97,7 @@ article{
background: image-url('caption.png') 0 4px no-repeat;
display: block;
font-size: $meta-size;
- color: #999;
+ color: $gray02;
padding-left: 25px;
}
.video-container{
diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss
index c645a9e..74f5e41 100644
--- a/sass/parts/_footer.scss
+++ b/sass/parts/_footer.scss
@@ -1,6 +1,6 @@
footer{
padding: 15px 0;
- border-top: 1px solid $light-shadow;
+ border-top: 1px solid $gray05;
text-align: center;
font-size: $meta-size;
} \ No newline at end of file
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
index 7f76330..4af00e4 100644
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@@ -1,10 +1,10 @@
header{
height: 30px;
padding: 30px 0;
- border-bottom: 1px solid $border;
+ border-bottom: 1px solid $gray04;
line-height: 30px;
a{
- color: $font-main;
+ color: $gray01;
@include transition(0.3s);
&:hover{
color: $main;
@@ -42,14 +42,14 @@ header{
left: -15px;
z-index: 10;
white-space: nowrap;
- background: #ddd;
- border: 1px solid #ccc;
+ background: $gray04;
+ border: 1px solid $gray03;
@include border-radius(0 0 5px 5px);
- box-shadow: 0 4px 8px #DDDDDD;
+ box-shadow: 0 4px 8px $gray04;
list-style: none;
display: none;
li{
- @include border-shadow(#eee, #ccc);
+ @include border-shadow(#eee, $gray03);
&:hover{
background: #d5d5d5;
}
@@ -64,7 +64,7 @@ header{
padding: 5px 15px;
width: 100%;
&:hover{
- color: #666;
+ color: $gray01;
}
}
}
@@ -85,8 +85,8 @@ header{
.search{
input[type="text"]{
background: image-url('search.png') 10px center no-repeat #f2f2f2;
- color: #999;
- border: 1px solid $border;
+ color: $gray02;
+ border: 1px solid $gray04;
@include border-radius(15px);
font: 13px $default;
padding: 6px 15px 6px 35px;
@@ -95,8 +95,8 @@ header{
&:focus, &:active{
background: image-url('search.png') 10px center no-repeat #fff;
width: 150px;
- border-top: 1px solid #ccc;
- color: $font-main;
+ border-top: 1px solid $gray03;
+ color: $gray01;
outline: none;
}
}
diff --git a/sass/parts/_post.scss b/sass/parts/_post.scss
index 704096b..09a4491 100644
--- a/sass/parts/_post.scss
+++ b/sass/parts/_post.scss
@@ -7,13 +7,13 @@
top: 85px;
line-height: 2;
font-size: $meta-size;
- color: $font-meta;
+ color: $gray02;
width: 170px;
a{
- color: $font-meta;
+ color: $gray02;
@include transition(0.3s);
&:hover{
- color: $font-main;
+ color: $gray01;
}
}
.date, .tags, .comments{
diff --git a/sass/parts/_syntax.scss b/sass/parts/_syntax.scss
index d99bb54..2ea1a8f 100644
--- a/sass/parts/_syntax.scss
+++ b/sass/parts/_syntax.scss
@@ -44,10 +44,10 @@ $pre-border: darken($base02, 5) !default;
$pre-color: $base1 !default;
figure.code{
- background: $border;
+ background: $gray04;
padding: 5px 15px;
margin-top: 10px;
- border: 1px solid #ccc;
+ border: 1px solid $gray03;
line-height: 1.5;
overflow-x: auto;
@include border-radius(5px);
@@ -58,7 +58,7 @@ figure.code{
margin: -10px -15px 0;
padding: 10px 15px 5px;
display: block;
- @include background(linear-gradient(top, #ccc, #ddd));
+ @include background(linear-gradient(top, $gray03, $gray04));
&:empty{
display: none;
}
@@ -70,7 +70,7 @@ figure.code{
}
}
.line-numbers{
- border-right: 1px solid #ccc;
+ border-right: 1px solid $gray03;
color: #000;
padding-right: 15px;
}
diff --git a/sass/parts/_twitter.scss b/sass/parts/_twitter.scss
index 3aaea08..e6a7736 100644
--- a/sass/parts/_twitter.scss
+++ b/sass/parts/_twitter.scss
@@ -1,5 +1,5 @@
#banner{
- color: $font-meta;
+ color: $gray02;
padding: 30px 0;
line-height: 30px;
text-align: center;
@@ -12,7 +12,7 @@
}
}
a{
- color: #999;
+ color: $gray02;
@include transition(0.3s);
&:hover{
text-decoration: underline;