From ee22ec643e0ecb5c5a360ff2f5e86a341aedda06 Mon Sep 17 00:00:00 2001
From: Noam <63012023+noam-y@users.noreply.github.com>
Date: Sat, 18 Sep 2021 01:30:08 +0300
Subject: [PATCH] switched the html table view to css flexbox. now it turns
 into 2 rows if the screen is big enough.

---
 css/brands.css         |  1 +
 css/normalize.css      |  6 ++++++
 css/skeleton-light.css |  3 ---
 index.html             | 16 ++++------------
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/css/brands.css b/css/brands.css
index a17bbf6..44dd58d 100644
--- a/css/brands.css
+++ b/css/brands.css
@@ -44,6 +44,7 @@ button {
   white-space: wrap;
   border-radius: 8px;
   cursor: pointer;
+  margin: 0.3rem;
 }
 button:hover,
 .button:focus {
diff --git a/css/normalize.css b/css/normalize.css
index 81c6f31..bdbbfa0 100644
--- a/css/normalize.css
+++ b/css/normalize.css
@@ -424,4 +424,10 @@ table {
 td,
 th {
   padding: 0;
+}
+
+.all-link-buttons {
+  display: inline-flex;
+  flex-flow: wrap;
+  justify-content: center;
 }
\ No newline at end of file
diff --git a/css/skeleton-light.css b/css/skeleton-light.css
index 478b731..1619d88 100644
--- a/css/skeleton-light.css
+++ b/css/skeleton-light.css
@@ -126,9 +126,6 @@ pre > code {
 
 /* Spacing
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-button,
-.button {
-  margin-bottom: 1rem; }
 input,
 textarea,
 select,
diff --git a/index.html b/index.html
index 2b18880..42a7b74 100644
--- a/index.html
+++ b/index.html
@@ -102,13 +102,7 @@
           3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers. 
 
         -->
-          <table>
-            <tr>
-              <th class="spacing tab-col">JODC</th>
-              <th class="tab-col">OSDC</th>
-            </tr>
-            <tr>
-              <td class="spacing">
+          <div class="all-link-buttons">
                 <!-- Github -->
                 <a
                   class="button button-github"
@@ -164,8 +158,7 @@
                   />Telegram</a
                 >
                 <br />
-              </td>
-              <td>
+
                 <!-- Github -->
                 <a
                   class="button button-github"
@@ -221,9 +214,6 @@
                   />Telegram</a
                 >
                 <br />
-              </td>
-            </tr>
-          </table>
           <br />
 
           <br />
@@ -236,6 +226,8 @@
             ❤️.
           </p>
         </div>
+
+        </div>
       </div>
     </div>