summaryrefslogtreecommitdiffstats
path: root/sass/parts
diff options
context:
space:
mode:
Diffstat (limited to 'sass/parts')
-rw-r--r--sass/parts/_archive.scss48
-rw-r--r--sass/parts/_article.scss27
-rw-r--r--sass/parts/_footer.scss4
-rw-r--r--sass/parts/_header.scss85
-rw-r--r--sass/parts/_post.scss8
-rw-r--r--sass/parts/_syntax.scss22
-rw-r--r--sass/parts/_twitter.scss6
7 files changed, 101 insertions, 99 deletions
diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss
index 6b5ee75..1a2009c 100644
--- a/sass/parts/_archive.scss
+++ b/sass/parts/_archive.scss
@@ -1,24 +1,15 @@
-section.archive{
+.archives{
position: relative;
- &:first-of-type{
- border-top: 1px solid $gray05;
- article.archive{
- border-top: none;
- }
- h1.archive-title{
- border-top: none;
- &:before{
- border-top: none;
- }
- }
- }
&:last-of-type{
- border-bottom: 1px solid $gray04;
- article.archive{
- border-bottom: none;
+ &:before{
+ content: "";
+ position: absolute;
+ bottom: 0;
+ width: 200px;
+ border-top: 1px solid $color-gray04;
}
}
- h1.archive-title{
+ .year{
line-height: 35px;
width: 200px;
position: absolute;
@@ -30,30 +21,27 @@ section.archive{
position: absolute;
top: -2px;
width: 100%;
- border-top: 1px solid $gray04;
+ border-top: 1px solid $color-gray04;
}
@media screen and (max-width: 600px){
position: relative;
width: 100%;
- & + article.archive{
- border-top: none;
- h1{
- padding-top: 15px;
- }
- }
}
}
- article.archive{
+ article{
margin-left: 200px;
@media screen and (max-width: 600px){
margin-left: 0;
- padding: 15px 0;
+ &:first-of-type{
+ border-top: none;
+ padding-top: 30px;
+ }
}
- h1{
+ .title{
margin-bottom: 0;
}
.meta{
- color: $gray02;
+ color: $color-gray02;
line-height: 2;
margin-top: 15px;
@media screen and (max-width: 600px){
@@ -65,10 +53,10 @@ section.archive{
@include inline-block;
}
a{
- color: $gray02;
+ color: $color-gray02;
@include transition(0.3s);
&:hover{
- color: $gray01;
+ color: $color-gray01;
}
}
.date{
diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss
index ba14807..91f6273 100644
--- a/sass/parts/_article.scss
+++ b/sass/parts/_article.scss
@@ -1,6 +1,6 @@
article{
- border-bottom: 1px solid $gray04;
- border-top: 1px solid $gray05;
+ border-bottom: 1px solid $color-gray04;
+ border-top: 1px solid $color-gray05;
padding: 30px 0;
position: relative;
@media screen and (max-width: 800px){
@@ -14,10 +14,10 @@ article{
line-height: 35px;
margin-bottom: 20px;
a{
- color: $gray01;
+ color: $color-gray01;
}
}
- .entry{
+ .entry-content{
line-height: 2;
text-align: justify;
a{
@@ -51,13 +51,13 @@ article{
}
h2{
font-weight: 300;
- border-bottom: 1px solid $gray04;
+ border-bottom: 1px solid $color-gray04;
position: relative;
&:before{
content: "";
position: absolute;
bottom: -2px;
- border-bottom: 1px solid $gray05;
+ border-bottom: 1px solid $color-gray05;
width: 100%;
}
}
@@ -66,8 +66,8 @@ article{
height: auto;
}
blockquote{
- background: $gray04;
- border-left: 5px solid $gray03;
+ background: $color-gray04;
+ border-left: 5px solid $color-gray03;
padding: 15px 20px;
margin-top: 10px;
& > p:first-of-type{
@@ -78,12 +78,12 @@ article{
border: none;
}
table{
- background: $gray04;
- border: 1px solid $gray03;
+ background: $color-gray04;
+ border: 1px solid $color-gray03;
border-spacing: 0;
margin-top: 10px;
th{
- background: $gray03;
+ background: $color-gray03;
padding: 0 15px;
}
td{
@@ -98,8 +98,8 @@ article{
.caption{
background: image-url('caption.png') 0 4px no-repeat;
display: block;
- font-size: $meta-size;
- color: $gray02;
+ font-size: 0.9em;
+ color: $color-gray02;
padding-left: 25px;
}
.video-container{
@@ -114,6 +114,7 @@ article{
left: 0;
width: 100%;
height: 100%;
+ margin-top: 0;
}
}
}
diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss
index 74f5e41..6d47846 100644
--- a/sass/parts/_footer.scss
+++ b/sass/parts/_footer.scss
@@ -1,6 +1,6 @@
footer{
padding: 15px 0;
- border-top: 1px solid $gray05;
+ border-top: 1px solid $color-gray05;
text-align: center;
- font-size: $meta-size;
+ font-size: 0.9em;
} \ No newline at end of file
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
index b22b1e0..41cd977 100644
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@@ -1,38 +1,42 @@
-header{
- height: 30px;
+$header-height: 30px;
+
+#header{
+ height: $header-height;
padding: 30px 0;
- border-bottom: 1px solid $gray04;
- line-height: 30px;
+ border-bottom: 1px solid $color-gray04;
+ line-height: $header-height;
@media screen and (max-width: 1040px){
height: auto;
position: relative;
padding-bottom: 10px;
- >.right{
+ >.alignright{
position: absolute;
top: 30px;
right: 0;
}
}
a{
- color: $gray01;
- @include transition(0.3s);
+ color: $color-gray01;
+ @include transition(color 0.3s);
&:hover{
- color: $main;
+ color: $color-main;
}
}
h1{
+ float: left;
font-weight: 300;
font-size: 30px;
@media screen and (max-width: 1040px){
- float: none !important;
+ float: none;
}
}
- nav{
+ .menu{
+ float: left;
margin-left: 30px;
@media screen and (max-width: 1040px){
+ float: none;
margin-left: 0;
margin-top: 15px;
- float: none !important;
}
>ul{
@media screen and (max-width: 600px){
@@ -50,7 +54,7 @@ header{
}
&:hover{
>a{
- color: $main;
+ color: $color-main;
}
}
>a{
@@ -59,7 +63,6 @@ header{
background: image-url('detail.png') right center no-repeat;
@media screen and (max-width: 1040px){
padding: 18px 30px 18px 0;
- /* Todo */
&:only-child{
padding-right: 0;
}
@@ -76,8 +79,8 @@ header{
left: -15px;
z-index: 10;
white-space: nowrap;
- background: $gray04;
- border: 1px solid $gray03;
+ background: $color-gray04;
+ border: 1px solid $color-gray03;
list-style: none;
display: none;
@media screen and (max-width: 1040px){
@@ -89,7 +92,7 @@ header{
@include border-radius(0 5px 5px 5px);
}
li{
- @include border-shadow($background, $gray03);
+ @include border-shadow($color-background, $color-gray03);
&:hover{
background: #d5d5d5;
}
@@ -107,7 +110,7 @@ header{
display: block;
padding: 5px 30px 5px 15px;
&:hover{
- color: $gray01;
+ color: $color-gray01;
}
&:only-child{
background: none;
@@ -138,32 +141,42 @@ header{
}
}
.search{
+ float: left;
+ margin-top: 1px;
+ @media screen and (max-width: 1040px){
+ float: none;
+ margin-top: 15px;
+ }
+ @media screen and (max-width: 600px){
+ margin-top: 40px;
+ }
input[type="text"]{
background: image-url('search.png') 10px center no-repeat #f2f2f2;
- color: $gray02;
- border: 1px solid $gray04;
- font: 13px $default;
+ color: $color-gray02;
+ border: 1px solid $color-gray04;
+ font: 13px $font-default;
padding: 6px 15px 6px 35px;
width: 100px;
@include transition(0.3s);
@include border-radius(15px);
- @media screen and (max-width: 600px){
- width: 60px;
- }
&:focus, &:active{
background: image-url('search.png') 10px center no-repeat #fff;
- width: 150px;
- border-top: 1px solid $gray03;
- color: $gray01;
+ border-top: 1px solid $color-gray03;
+ color: $color-gray01;
outline: none;
- @media screen and (max-width: 600px){
- width: 100px;
- }
}
}
}
.social{
+ float: left;
margin-right: 15px;
+ @media screen and (max-width: 1040px){
+ float: none;
+ margin-right: 0;
+ a:last-of-type{
+ margin-right: 0;
+ }
+ }
@media screen and (max-width: 600px){
display: none;
}
@@ -179,49 +192,49 @@ header{
opacity: 1;
}
&.facebook{
- background: image-url('facebook.png') center no-repeat #3B5998;
+ background: image-url('social/facebook.png') center no-repeat #3B5998;
border: 1px solid #3B5998;
&:hover{
border: 1px solid darken(#3B5998, 10%);
}
}
&.google{
- background: image-url('google.png') center no-repeat #C83D20;
+ background: image-url('social/google.png') center no-repeat #C83D20;
border: 1px solid #C83D20;
&:hover{
border: 1px solid darken(#C83D20, 10%);
}
}
&.twitter{
- background: image-url('twitter.png') center no-repeat #55CFF8;
+ background: image-url('social/twitter.png') center no-repeat #55CFF8;
border: 1px solid #55CFF8;
&:hover{
border: 1px solid darken(#55CFF8, 10%);
}
}
&.github{
- background: image-url('github.png') center no-repeat rgb(175,182,202);
+ background: image-url('social/github.png') center no-repeat rgb(175,182,202);
border: 1px solid rgb(175,182,202);
&:hover{
border: 1px solid darken(rgb(175,182,202), 10%);
}
}
&.pinterest{
- background: image-url('pinterest.png') center no-repeat rgb(190,64,55);
+ background: image-url('social/pinterest.png') center no-repeat rgb(190,64,55);
border: 1px solid rgb(190,64,55);
&:hover{
border: 1px solid darken(rgb(190,64,55), 10%);
}
}
&.delicious{
- background: image-url('delicious.png') center no-repeat rgb(50,113,203);
+ background: image-url('social/delicious.png') center no-repeat rgb(50,113,203);
border: 1px solid rgb(50,113,203);
&:hover{
border: 1px solid darken(rgb(50,113,203), 10%);
}
}
&.rss{
- background: image-url('rss.png') center no-repeat #EF7522;
+ background: image-url('social/rss.png') center no-repeat #EF7522;
border: 1px solid #EF7522;
&:hover{
border: 1px solid darken(#EF7522, 10%);
diff --git a/sass/parts/_post.scss b/sass/parts/_post.scss
index de9c78c..fc4bf6d 100644
--- a/sass/parts/_post.scss
+++ b/sass/parts/_post.scss
@@ -1,5 +1,5 @@
.post{
- h1.title, .entry{
+ h1.title, .entry-content{
margin-left: 200px;
@media screen and (max-width: 800px){
margin-left: 0;
@@ -9,8 +9,8 @@
position: absolute;
top: 85px;
line-height: 2;
- font-size: $meta-size;
- color: $gray02;
+ font-size: 0.9em;
+ color: $color-gray02;
width: 170px;
@media screen and (max-width: 800px){
margin-top: 15px;
@@ -18,7 +18,7 @@
width: auto;
}
a{
- @include link-colors($gray02, $gray01);
+ @include link-colors($color-gray02, $color-gray01);
@include transition(0.3s);
}
.date, .tags, .comments{
diff --git a/sass/parts/_syntax.scss b/sass/parts/_syntax.scss
index 8777000..0a95988 100644
--- a/sass/parts/_syntax.scss
+++ b/sass/parts/_syntax.scss
@@ -38,17 +38,17 @@ $solarized: light !default;
$base3: $_base03;
}
-$pre-bg: $gray04;
-$pre-border: $gray03;
+$pre-bg: $color-gray04;
+$pre-border: $color-gray03;
article{
code, pre{
background: $pre-bg;
border: 1px solid $pre-border;
- font-family: $monospace;
+ font-family: $font-mono;
}
code{
- font-size: $meta-size;
+ font-size: 0.9em;
padding: 1px 3px;
margin: 0 3px;
@include border-radius(5px);
@@ -77,7 +77,7 @@ figure.code{
padding: 5px 15px;
@include border-radius(5px);
figcaption{
- font-size: $meta-size;
+ font-size: 0.9em;
position: relative;
span{
margin: -5px -15px 0;
@@ -106,7 +106,7 @@ figure.code{
}
.line-numbers{
border-right: 1px solid $pre-border;
- font-family: $monospace;
+ font-family: $font-mono;
padding-right: 15px;
text-align: right;
}
@@ -124,9 +124,9 @@ figure.code{
overflow-x: auto;
}
}
-.entry .gist{
+.entry-content .gist{
background: $pre-bg;
- color: $gray01;
+ color: $color-gray01;
padding: 30px 15px 5px;
margin-top: 10px;
border: 1px solid $pre-border;
@@ -139,18 +139,18 @@ figure.code{
background: none;
border: none;
pre{
- font: $meta-size $monospace;
+ font: 0.9em $font-mono;
line-height: 1.5;
}
}
.gist-meta{
- font: 300 $meta-size $default;
+ font: 300 0.9em $font-default;
line-height: 1.5;
margin: 0 -16px -6px;
padding: 5px 15px;
@include background(linear-gradient(top, $pre-bg, $pre-border));
a{
- color: $main;
+ color: $color-main;
&:first-of-type{
position: absolute;
top: 5px;
diff --git a/sass/parts/_twitter.scss b/sass/parts/_twitter.scss
index e6a7736..6a8e6a1 100644
--- a/sass/parts/_twitter.scss
+++ b/sass/parts/_twitter.scss
@@ -1,5 +1,5 @@
#banner{
- color: $gray02;
+ color: $color-gray02;
padding: 30px 0;
line-height: 30px;
text-align: center;
@@ -8,11 +8,11 @@
@include border-shadow();
&:hover{
a{
- color: $main;
+ color: $color-main;
}
}
a{
- color: $gray02;
+ color: $color-gray02;
@include transition(0.3s);
&:hover{
text-decoration: underline;
generated by cgit v1.1-2-g2b99 at 2024-11-22 21:32:22 +0100