From fdb14034008d5e8dca25dd4db71ce3108b6c9bed Mon Sep 17 00:00:00 2001
From: Kenshin <fxblog@gmail.com>
Date: Sat, 28 Dec 2019 12:02:13 +0800
Subject: [PATCH] Add theme mobile css.

---
 src/assets/css/theme_mobile.css | 181 ++++++++++++++++++++++++++++++++
 1 file changed, 181 insertions(+)
 create mode 100644 src/assets/css/theme_mobile.css

diff --git a/src/assets/css/theme_mobile.css b/src/assets/css/theme_mobile.css
new file mode 100644
index 00000000..881870e0
--- /dev/null
+++ b/src/assets/css/theme_mobile.css
@@ -0,0 +1,181 @@
+/**
+ * Mobile media
+ */
+@media (pointer: coarse) {
+    sr-read {
+        margin: 20px 5%!important;
+        min-width: initial!important;
+        max-width: 90%!important;
+    }
+
+    sr-rd-title {
+        margin-top: 0;
+        font-size: 2.7rem;
+    }
+
+    sr-rd-desc,
+    sr-rd-content sr-blockquote {
+        margin: 10 0!important;
+        padding: 0 0 0 10px !important;
+        width: 90%;
+
+        font-size: 1.8rem;
+        font-style: normal;
+        line-height: 1.7;
+        text-align: justify;
+    }
+
+    sr-rd-content {
+        font-size: 1.75rem;
+        font-weight: 300;
+    }
+
+    sr-rd-content figure {
+        margin: 0;
+        padding: 0;
+        text-align: center;
+    }
+
+    sr-rd-content a, sr-rd-content a:link {
+          font-size: inherit;
+    }
+
+    sr-rd-content li code, sr-rd-content p code {
+          font-size: inherit;
+    }
+
+    sr-rd-footer {
+          margin-top: 20px;
+    }
+
+    sr-blockquote, sr-blockquote * {
+          margin: 5px !important;
+          padding: 5px !important;
+    }
+
+    sr-rd-title, sr-rd-content h1, sr-rd-content h2, sr-rd-content h3, sr-rd-content h4, sr-rd-content h5, sr-rd-content h6 {
+        font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
+        color: #000;
+        font-weight: 100;
+        line-height: 1.35;
+    }
+
+    sr-rd-content h1, sr-rd-content h2, sr-rd-content h3, sr-rd-content h4, sr-rd-content h5, sr-rd-content h6,
+    sr-rd-content-h1, sr-rd-content-h2, sr-rd-content-h3, sr-rd-content-h4, sr-rd-content-h5, sr-rd-content-h6 {
+      margin-top: 1.2em;
+      margin-bottom: 0.6em;
+      line-height: 1.35;
+    }
+
+    sr-rd-content h1, sr-rd-content-h1 {
+      font-size: 1.8em;
+    }
+
+    sr-rd-content h2, sr-rd-content-h2 {
+      font-size: 1.6em;
+    }
+
+    sr-rd-content h3, sr-rd-content-h3 {
+      font-size: 1.4em;
+    }
+
+    sr-rd-content h4, sr-rd-content-h4 {
+      font-size: 1.2em;
+    }
+
+    sr-rd-content h5, sr-rd-content h6, sr-rd-content-h5, sr-rd-content-h6 {
+      font-size: 1.2em;
+    }
+
+    sr-rd-content ul, sr-rd-content-ul {
+        margin-left: 1.3em!important;
+        list-style: disc;
+    }
+
+    sr-rd-content ol, sr-rd-content-ol {
+        list-style: decimal;
+        margin-left: 1.9em!important;
+    }
+
+    sr-rd-content li ul, sr-rd-content li ol, sr-rd-content-ul ul, sr-rd-content-ul ol, sr-rd-content-ol ul, sr-rd-content-ol ol {
+        margin-bottom: 0.8em;
+        margin-left: 2em!important;;
+    }
+
+    sr-rd-content img {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        max-width: 100%!important;
+        height: auto;
+        box-shadow: 0 20px 20px -10px rgba(0,0,0,0.1);
+    }
+
+    sr-rd-mult {
+        min-width: initial;
+        background-color: #fff;
+        box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
+        border-radius: 8px;
+    }
+
+    sr-rd-mult sr-rd-mult-avatar div {
+        margin: 0;
+    }
+
+    sr-rd-mult sr-rd-mult-avatar .sr-rd-content-center-small {
+        margin: 7px 0!important;
+    }
+
+    sr-rd-mult sr-rd-mult-avatar span {
+        display: block;
+    }
+
+    sr-rd-mult sr-rd-mult-content {
+        padding-left: 0;
+    }
+
+    /**
+    * iPad pro 12 and below
+    */
+    @media only screen and (max-device-width: 1024px) {
+        html, .simpread-theme-root {
+            font-size: 80%!important;
+        }
+
+        sr-rd-mult sr-rd-mult-avatar img {
+            width: 50px;
+            height: 50px;
+            min-width: 50px;
+            min-height: 50px;
+        }
+    }
+
+    /**
+    * iPhone XS Max and below
+    */
+    @media only screen and (max-device-width: 414px) {
+        html, .simpread-theme-root {
+            font-size: 70%!important;
+        }
+
+        sr-rd-mult sr-rd-mult-avatar img {
+            width: 30px;
+            height: 30px;
+            min-width: 30px;
+            min-height: 30px;
+        }
+    }
+
+    /**
+    * iPhone SE and below
+    */
+    @media only screen and (max-device-width: 320px) {
+        html, .simpread-theme-root {
+            font-size: 90%!important;
+        }
+
+        sr-rd-content p {
+            margin-bottom: .5em;
+        }
+    }
+}