From b1a9e231adb7911a9097e61cb333c2582853f2f7 Mon Sep 17 00:00:00 2001
From: eight <eight04@gmail.com>
Date: Wed, 22 Nov 2017 14:14:47 +0800
Subject: [PATCH] Add: responsive layout

---
 install-usercss.html                | 15 ++++++-----
 install-usercss/install-usercss.css | 42 +++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/install-usercss.html b/install-usercss.html
index ca301b1d..2ec83a3c 100644
--- a/install-usercss.html
+++ b/install-usercss.html
@@ -68,18 +68,21 @@
         </label>
       </div>
       <p class="meta-description"></p>
-      <div>
+      <div class="meta-group">
         <h3 i18n-text="author"></h3>
         <span class="meta-author"></span>
       </div>
-      <div>
+      <div class="meta-group">
         <h3 i18n-text="license"></h3>
         <span class="meta-license"></span>
       </div>
-      <h3 i18n-text="appliesLabel"></h3>
-      <ul class="applies-to">
-      </ul>
-      <div class="external-link"></div>
+      <div class="meta-group">
+        <h3 i18n-text="appliesLabel"></h3>
+        <ul class="applies-to">
+        </ul>
+      </div>
+      <div class="meta-group external-link">
+      </div>
     </div>
     <div class="main">
       <div class="code">
diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css
index eb4df0a6..cb3c1dbc 100644
--- a/install-usercss/install-usercss.css
+++ b/install-usercss/install-usercss.css
@@ -119,3 +119,45 @@ h1 small {
 .main .CodeMirror {
   height: 100%;
 }
+
+@media (max-width: 800px) {
+  .container {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .header {
+    flex: 1 1 auto;
+    border-right: none;
+    border-bottom: 1px dashed #AAA;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 4px 0;
+  }
+  .actions label {
+    margin: 0 0 0 8px;
+  }
+
+  h1,
+  h3,
+  .meta-group {
+    margin: 12px 0;
+  }
+
+  h3 {
+    margin-bottom: 8px;
+  }
+
+  .main {
+    max-height: 100vh;
+  }
+
+  p,
+  ul {
+    margin: 8px 0;
+  }
+}