summaryrefslogtreecommitdiffstats
path: root/sass
diff options
context:
space:
mode:
Diffstat (limited to 'sass')
-rw-r--r--sass/base/_layout.scss20
-rw-r--r--sass/parts/_archive.scss39
-rw-r--r--sass/parts/_article.scss18
-rw-r--r--sass/parts/_header.scss115
-rw-r--r--sass/parts/_post.scss29
5 files changed, 93 insertions, 128 deletions
diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss
index 7aaafbb..b50dcbb 100644
--- a/sass/base/_layout.scss
+++ b/sass/base/_layout.scss
@@ -10,6 +10,12 @@ body{
font-size: 14px;
background: $background;
color: $gray01;
+ @media screen and (max-width: 1040px){
+ margin: 0 20px;
+ }
+ @media screen and (max-width: 600px){
+ font-size: 13px;
+ }
}
h1{
font-size: 1.8em;
@@ -37,19 +43,7 @@ a{
.inner{
width: $max-width;
margin: 0 auto;
-}
-
-@media screen and (max-width: 1030px){
- body{
- margin: 0 30px;
- }
- .inner{
+ @media screen and (max-width: 1040px){
width: 100%;
}
-}
-
-@media screen and (max-width: 600px){
- body{
- font-size: 13px;
- }
} \ No newline at end of file
diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss
index e2e3aea..6b5ee75 100644
--- a/sass/parts/_archive.scss
+++ b/sass/parts/_archive.scss
@@ -32,9 +32,23 @@ section.archive{
width: 100%;
border-top: 1px solid $gray04;
}
+ @media screen and (max-width: 600px){
+ position: relative;
+ width: 100%;
+ & + article.archive{
+ border-top: none;
+ h1{
+ padding-top: 15px;
+ }
+ }
+ }
}
article.archive{
margin-left: 200px;
+ @media screen and (max-width: 600px){
+ margin-left: 0;
+ padding: 15px 0;
+ }
h1{
margin-bottom: 0;
}
@@ -42,6 +56,9 @@ section.archive{
color: $gray02;
line-height: 2;
margin-top: 15px;
+ @media screen and (max-width: 600px){
+ display: none;
+ }
span{
margin-right: 30px;
padding-left: 30px;
@@ -65,26 +82,4 @@ section.archive{
}
}
}
-}
-
-@media screen and (max-width: 600px){
- section.archive{
- h1.archive-title{
- position: relative;
- width: 100%;
- & + article.archive{
- border-top: none;
- h1{
- padding-top: 15px;
- }
- }
- }
- article.archive{
- margin-left: 0;
- padding: 15px 0;
- .meta{
- display: none;
- }
- }
- }
} \ No newline at end of file
diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss
index 4a7ba6b..ba14807 100644
--- a/sass/parts/_article.scss
+++ b/sass/parts/_article.scss
@@ -3,6 +3,12 @@ article{
border-top: 1px solid $gray05;
padding: 30px 0;
position: relative;
+ @media screen and (max-width: 800px){
+ padding-bottom: 15px;
+ }
+ @media screen and (max-width: 600px){
+ padding: 15px 0;
+ }
h1.title{
font-weight: 300;
line-height: 35px;
@@ -115,16 +121,4 @@ article{
.share{
padding: 15px 0;
@include border-shadow();
-}
-
-@media screen and (max-width: 800px){
- article{
- padding-bottom: 15px;
- }
-}
-
-@media screen and (max-width: 600px){
- article{
- padding: 15px 0;
- }
} \ No newline at end of file
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
index 32893ad..67ebf84 100644
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@@ -3,6 +3,16 @@ header{
padding: 30px 0;
border-bottom: 1px solid $gray04;
line-height: 30px;
+ @media screen and (max-width: 1040px){
+ height: auto;
+ position: relative;
+ padding-bottom: 10px;
+ >.right{
+ position: absolute;
+ top: 30px;
+ right: 0;
+ }
+ }
a{
color: $gray01;
@include transition(0.3s);
@@ -13,13 +23,31 @@ header{
h1{
font-weight: 300;
font-size: 30px;
+ @media screen and (max-width: 1040px){
+ float: none !important;
+ }
}
nav{
margin-left: 30px;
+ @media screen and (max-width: 1040px){
+ margin-left: 0;
+ margin-top: 15px;
+ float: none !important;
+ }
>ul{
+ @media screen and (max-width: 600px){
+ display: none;
+ }
>li{
- @include inline-block;
margin-left: 50px;
+ @include inline-block;
+ @media screen and (max-width: 1040px){
+ margin-left: 0;
+ margin-right: 50px;
+ &:last-of-type{
+ margin-right: 0;
+ }
+ }
&:hover{
>a{
color: $main;
@@ -29,6 +57,13 @@ header{
padding: 38px 30px 38px 0;
margin-top: -38px;
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;
+ }
+ }
&:only-child{
padding-right: 0;
background: none;
@@ -45,6 +80,9 @@ header{
border: 1px solid $gray03;
list-style: none;
display: none;
+ @media screen and (max-width: 1040px){
+ top: 40px;
+ }
@include box-shadow(0 4px 8px rgba(0,0,0,0.1));
@include border-radius(0 0 5px 5px);
ul{
@@ -94,6 +132,9 @@ header{
select{
display: none;
margin-bottom: 10px;
+ @media screen and (max-width: 600px){
+ display: block;
+ }
}
}
.search{
@@ -106,17 +147,26 @@ header{
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;
outline: none;
+ @media screen and (max-width: 600px){
+ width: 100px;
+ }
}
}
}
.social{
margin-right: 15px;
+ @media screen and (max-width: 600px){
+ display: none;
+ }
a{
@include border-radius(50%);
@include inline-block;
@@ -158,67 +208,4 @@ header{
}
}
}
-}
-
-@media screen and (max-width: 1030px){
- header{
- height: auto;
- position: relative;
- padding-bottom: 10px;
- h1{
- float: none !important;
- }
- nav{
- margin-left: 0;
- margin-top: 15px;
- float: none !important;
- >ul{
- >li{
- margin-left: 0;
- margin-right: 50px;
- &:last-of-type{
- margin-right: 0;
- }
- >a{
- padding: 18px 30px 18px 0;
- &:only-child{
- padding-right: 0;
- }
- }
- }
- ul{
- top: 40px;
- }
- }
- }
- >.right{
- position: absolute;
- top: 30px;
- right: 0;
- }
- }
-}
-
-@media screen and (max-width: 600px){
- header{
- nav{
- >ul{
- display: none;
- }
- select{
- display: block;
- }
- }
- .social{
- display: none;
- }
- .search{
- input[type="text"]{
- width: 60px;
- &:focus, &:active{
- width: 100px;
- }
- }
- }
- }
} \ No newline at end of file
diff --git a/sass/parts/_post.scss b/sass/parts/_post.scss
index 1b5f554..de9c78c 100644
--- a/sass/parts/_post.scss
+++ b/sass/parts/_post.scss
@@ -1,6 +1,9 @@
.post{
h1.title, .entry{
margin-left: 200px;
+ @media screen and (max-width: 800px){
+ margin-left: 0;
+ }
}
.meta{
position: absolute;
@@ -9,12 +12,21 @@
font-size: $meta-size;
color: $gray02;
width: 170px;
+ @media screen and (max-width: 800px){
+ margin-top: 15px;
+ position: static;
+ width: auto;
+ }
a{
@include link-colors($gray02, $gray01);
@include transition(0.3s);
}
.date, .tags, .comments{
padding-left: 30px;
+ @media screen and (max-width: 800px){
+ @include inline-block;
+ margin-right: 30px;
+ }
}
.date{
background: image-url('date.png') 0 center no-repeat;
@@ -26,21 +38,4 @@
background: image-url('comments.png') 0 center no-repeat;
}
}
-}
-
-@media screen and (max-width: 800px){
- .post{
- h1.title, .entry{
- margin-left: 0;
- }
- .meta{
- margin-top: 15px;
- position: static;
- width: auto;
- .date, .tags, .comments{
- @include inline-block;
- margin-right: 30px;
- }
- }
- }
} \ No newline at end of file
generated by cgit v1.1-2-g2b99 at 2024-11-21 18:41:49 +0100