style: better <blockquote> style for mobile

2 files changed, 43 insertions, 32 deletions

diff --git a/assets/sass/_partial/_post/_blockquote.scss b/assets/sass/_partial/_post/_blockquote.scss
new file mode 100644
index 0000000..41f8fd2
--- /dev/null
+++ b/assets/sass/_partial/_post/_blockquote.scss
@@ -0,0 +1,42 @@
+// ==============================
+// Post blockquote
+// ==============================
+
+blockquote {
+  margin: 1em auto;
+  color: #555555;
+  background-color: #F6F6F6;
+  border-left: 4px solid #999;
+  position: relative;
+  line-height: 1.6;
+  font-family: Open Sans;
+
+  @include min-screen() {
+    padding: 0.2em 2em 0.2em 3em;
+
+    &::before {
+      font-family: Arial;
+      content: "\201C";
+      color: #999;
+      font-size: 4em;
+      position: absolute;
+      left: 10px;
+      top: -10px;
+    }
+  }
+
+  @include max-screen() {
+    padding: 0.2em 1em;
+  }
+
+  footer {
+    color: #333333;
+    margin-bottom: 1em;
+  }
+
+  cite:before {
+    content: '\2014';
+    padding-right: .3em;
+    padding-left: .3em;
+  }
+}
diff --git a/assets/sass/_partial/_post/_content.scss b/assets/sass/_partial/_post/_content.scss
index 169819b..2c3fa3c 100644
--- a/assets/sass/_partial/_post/_content.scss
+++ b/assets/sass/_partial/_post/_content.scss
@@ -37,38 +37,6 @@
     }
   }
 
-  blockquote {
-    margin: 1em auto;
-    padding: 0.2em 2em 0.2em 3em;
-    color: #555555;
-    background-color: #F6F6F6;
-    border-left: 4px solid #999;
-    position: relative;
-    line-height: 1.6;
-    font-family: Open Sans;
-
-    &::before {
-      font-family: Arial;
-      content: "\201C";
-      color: #999;
-      font-size: 4em;
-      position: absolute;
-      left: 10px;
-      top: -10px;
-    }
-
-    footer {
-      color: #333333;
-      margin-bottom: 1em;
-    }
-
-    cite:before {
-      content: '\2014';
-      padding-right: .3em;
-      padding-left: .3em;
-    }
-  }
-
   iframe {
     margin: 0 auto;
     display: block;
@@ -142,6 +110,7 @@
 
   @import 'code';
   @import 'image';
+  @import 'blockquote';
 }
 
 .header-link {