From 06ac77abfe444d72e451bd31ba1df9149d791f21 Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Sun, 9 Dec 2018 10:37:58 +0900
Subject: [PATCH] refactor: fix table margin in demo page

---
 index.html | 78 ++++++++++++++++++++++++++++--------------------------
 style.css  | 21 +++++++++++++++
 2 files changed, 61 insertions(+), 38 deletions(-)

diff --git a/index.html b/index.html
index 35d4ac9..b33b579 100644
--- a/index.html
+++ b/index.html
@@ -132,44 +132,46 @@
       </div>
     </section>
 
-    <section class="container with-title" style="display:flex">
+    <section class="container with-title">
       <h2 class="title">Table</h2>
-      <table class="table is-bordered is-centered" style="margin:15px 15px 5px 0;">
-        <thead>
-          <tr>
-            <th>Table.is-bordered</th>
-            <th>Table.is-centered</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-          </tr>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-          </tr>
-        </tbody>
-      </table>
-      <table class="table is-bordered is-dark" style="margin:15px 4px 5px 15px">
-        <thead>
-          <tr>
-            <th>Table.is-dark</th>
-            <th>Table.is-bordered</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good morning</td>
-          </tr>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="tables">
+        <table class="table is-bordered is-centered">
+          <thead>
+            <tr>
+              <th>Table.is-bordered</th>
+              <th>Table.is-centered</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good afternoon</td>
+            </tr>
+            <tr>
+              <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good afternoon</td>
+            </tr>
+          </tbody>
+        </table>
+        <table class="table is-bordered is-dark">
+          <thead>
+            <tr>
+              <th>Table.is-dark</th>
+              <th>Table.is-bordered</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good morning</td>
+            </tr>
+            <tr>
+              <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good afternoon</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </section>
 
     <section class="container with-title">
@@ -223,7 +225,7 @@
           <i class="icon twitch"></i>
           <i class="icon twitch is-medium"></i>
           <i class="icon twitch is-large"></i>
-        
+
           <i class="icon reddit"></i>
           <i class="icon reddit is-medium"></i>
           <i class="icon reddit is-large"></i>
diff --git a/style.css b/style.css
index 340459b..d437528 100644
--- a/style.css
+++ b/style.css
@@ -16,6 +16,27 @@ div.containers > .container {
   max-width: 400px;
 }
 
+div.tables {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+div.tables > .table {
+  min-width: 350px;
+  max-width: calc(50% - 2rem);
+}
+div.tables > .table:first-child {
+  margin-right: 2rem;
+  margin-bottom: 2rem;
+}
+
+@media screen and (max-width: 768px) {
+  div.tables > .table {
+    max-width: 100%;
+    margin-right: 0;
+  }
+}
+
 .balloon.container .balloon {
   max-width: 600px;
   margin: 2rem 2rem;