From 4c8839158571bcf666b062c04045f9bd48aacdf0 Mon Sep 17 00:00:00 2001
From: Sebastian Korotkiewicz <skorotkiewicz@gmail.com>
Date: Wed, 30 Mar 2022 18:07:24 +0200
Subject: [PATCH] table to div

---
 css/palelight.css |   9 +-
 css/site.css      |  23 ++--
 index.html        | 301 +++++++++++++++++++++-------------------------
 3 files changed, 157 insertions(+), 176 deletions(-)

diff --git a/css/palelight.css b/css/palelight.css
index 9414ce3..62c15d2 100644
--- a/css/palelight.css
+++ b/css/palelight.css
@@ -38,7 +38,8 @@ h3,
 h4,
 h5,
 th,
-label {
+label,
+.head {
   text-shadow: 2px 2px #3f435a;
 }
 
@@ -50,7 +51,8 @@ textarea {
 }
 
 table,
-div#body pre {
+div#body pre,
+.me {
   border: 1px solid #676e95;
 }
 
@@ -61,3 +63,6 @@ div#body pre {
 .ascii:hover {
   color: #676e95;
 }
+.me {
+  background-color: #2f3348;
+}
diff --git a/css/site.css b/css/site.css
index 803c3be..d5388a5 100644
--- a/css/site.css
+++ b/css/site.css
@@ -110,7 +110,8 @@ textarea {
   padding: 5px;
 }
 
-table {
+table,
+.me {
   text-align: left;
   width: 100%;
   padding: 5px;
@@ -140,14 +141,9 @@ div#patchlog p {
   margin-top: 0px;
 }
 
-th {
-  padding: 10px;
-}
-td {
-  padding-left: 30px;
-}
-table {
+.me {
   max-width: 500px;
+  padding: 10px;
 }
 .back {
   position: absolute;
@@ -157,3 +153,14 @@ table {
 .welcome {
   margin: 0 0 20px 0;
 }
+
+.head {
+  margin: 10px;
+  font-weight: 800;
+}
+.items {
+  margin-left: 30px;
+}
+.items li {
+  list-style: none;
+}
diff --git a/index.html b/index.html
index 6d64a4b..ced51b7 100644
--- a/index.html
+++ b/index.html
@@ -27,180 +27,149 @@
         <h4>have a great day!</h4>
       </div>
 
-      <table>
+      <div class="me">
         <!-- IRC -->
-        <tr>
-          <th>IRC</th>
-        </tr>
-        <tr>
-          <td>
-            <strong> grizzly on tilde.chat </strong>
-          </td>
-        </tr>
+        <div class="board">
+          <div class="head">IRC</div>
+          <div class="items">
+            <div class="item">
+              <ul>
+                <li><strong> grizzly on tilde.chat </strong></li>
+              </ul>
+            </div>
+          </div>
+        </div>
 
         <!-- Mail -->
-        <tr>
-          <th>Mail</th>
-        </tr>
-        <tr>
-          <td>
-            <strong>
-              <code>grizzly <em>at</em> ttm <em>dot</em> sh</code>
-            </strong>
-          </td>
-        </tr>
-
-        <tr>
-          <td>
-            <code>grizzly <em>at</em> envs <em>dot</em> net</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <code>grizzly <em>at</em> tilde <em>dot</em> club</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <code>grizzly <em>at</em> tilde <em>dot</em> institute</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <code>grizzly <em>at</em> thunix <em>dot</em> net</code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <code>grizzly <em>at</em> dimension <em>dot</em> sh</code>
-          </td>
-        </tr>
+        <div class="board">
+          <div class="head">Mail</div>
+          <div class="items">
+            <div class="item">
+              <strong>
+                <code>grizzly <em>at</em> ttm <em>dot</em> sh</code>
+              </strong>
+            </div>
+            <div class="item">
+              <code>grizzly <em>at</em> envs <em>dot</em> net</code>
+            </div>
+            <div class="item">
+              <code>grizzly <em>at</em> tilde <em>dot</em> club</code>
+            </div>
+            <div class="item">
+              <code>grizzly <em>at</em> tilde <em>dot</em> institute</code>
+            </div>
+            <div class="item">
+              <code>grizzly <em>at</em> thunix <em>dot</em> net</code>
+            </div>
+            <div class="item">
+              <code>grizzly <em>at</em> dimension <em>dot</em> sh</code>
+            </div>
+          </div>
+        </div>
 
         <!-- Tildeverse -->
-        <tr>
-          <th>Tildeverse</th>
-        </tr>
-        <tr>
-          <td>
-            <strong>
-              |-- <a href="https://tilde.team/~grizzly">~team/~grizzly</a>
-            </strong>
-          </td>
-        </tr>
-        <tr>
-          <td>|-- <a href="https://tilde.club/~grizzly">~club/~grizzly</a></td>
-        </tr>
-        <tr>
-          <td>
-            |--
-            <a href="https://grizzly.tilde.institute/">~institute/~grizzly</a>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            |-- <a href="https://tilde.guru/~grizzly/">~guru/~grizzly/</a>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            |-- <a href="https://tilde.pink/~grizzly/">~pink/~grizzly/</a>
-          </td>
-        </tr>
-        <tr>
-          <td>|-- <a href="https://envs.net/~grizzly">envs.net/~grizzly</a></td>
-        </tr>
-        <tr>
-          <td>
-            |--
-            <a href="https://heathens.club/~grizzly">heathens.club/~grizzly</a>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            |-- <a href="https://thunix.net/~grizzly">thunix.net/~grizzly</a>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            |--
-            <a href="https://dimension.sh/~grizzly/">dimension.sh/~grizzly</a>
-          </td>
-        </tr>
-        <tr>
-          <td>|-- <a href="http://rw.rs/~grizzly/">rw.rs/~grizzly</a></td>
-        </tr>
-        <tr>
-          <td>
-            |--
-            <a href="http://grizzly.de1.hashbang.sh/"
-              >grizzly.de1.hashbang.sh</a
-            >
-          </td>
-        </tr>
-        <tr>
-          <td>
-            |--
-            <a href="gemini://tilde.team/~grizzly"
-              >gemini://tilde.team/~grizzly</a
-            >
-          </td>
-        </tr>
-        <tr>
-          <td>
-            |--
-            <a href="https://cosmic.voyage/Grizzly/hello.html"
-              >cosmic.voyage/Grizzly/hello.html</a
-            >
-          </td>
-        </tr>
+        <div class="board">
+          <div class="head">Tildeverse</div>
+          <div class="items">
+            <div class="item">
+              <strong>
+                |-- <a href="https://tilde.team/~grizzly">~team/~grizzly</a>
+              </strong>
+            </div>
+            <div class="item">
+              |-- <a href="https://tilde.club/~grizzly">~club/~grizzly</a>
+            </div>
+            <div class="item">
+              |--
+              <a href="https://grizzly.tilde.institute/">~institute/~grizzly</a>
+            </div>
+            <div class="item">
+              |-- <a href="https://tilde.guru/~grizzly/">~guru/~grizzly/</a>
+            </div>
+            <div class="item">
+              |-- <a href="https://tilde.pink/~grizzly/">~pink/~grizzly/</a>
+            </div>
+            <div class="item">
+              |-- <a href="https://envs.net/~grizzly">envs.net/~grizzly</a>
+            </div>
+            <div class="item">
+              |--
+              <a href="https://heathens.club/~grizzly"
+                >heathens.club/~grizzly</a
+              >
+            </div>
+            <div class="item">
+              |-- <a href="https://thunix.net/~grizzly">thunix.net/~grizzly</a>
+            </div>
+            <div class="item">
+              |--
+              <a href="https://dimension.sh/~grizzly/">dimension.sh/~grizzly</a>
+            </div>
+            <div class="item">
+              |-- <a href="http://rw.rs/~grizzly/">rw.rs/~grizzly</a>
+            </div>
+            <div class="item">
+              |--
+              <a href="http://grizzly.de1.hashbang.sh/"
+                >grizzly.de1.hashbang.sh</a
+              >
+            </div>
+            <div class="item">
+              |--
+              <a href="gemini://tilde.team/~grizzly"
+                >gemini://tilde.team/~grizzly</a
+              >
+            </div>
+            <div class="item">
+              |--
+              <a href="https://cosmic.voyage/Grizzly/hello.html"
+                >cosmic.voyage/Grizzly/hello.html</a
+              >
+            </div>
+          </div>
+        </div>
 
-        <!-- Tildegit  -->
+        <!-- Tildegit -->
+        <div class="board">
+          <div class="head">Tildegit</div>
+          <div class="items">
+            <div class="item">
+              |--
+              <a href="https://tildegit.org/grizzly" target="_blank"
+                >tildegit.org/grizzly</a
+              >
+            </div>
+          </div>
+        </div>
 
-        <tr>
-          <th>Tildegit</th>
-        </tr>
-        <tr>
-          <td>
-            |--
-            <a href="https://tildegit.org/grizzly" target="_blank"
-              >tildegit.org/grizzly</a
-            >
-          </td>
-        </tr>
+        <!-- Projects -->
+        <div class="board">
+          <div class="head">Projects</div>
+          <div class="items">
+            <div class="item">- members site roulette at</div>
+            <div class="item">
+              |--
+              <a href="https://tilde.club/~grizzly/browser/" target="_blank"
+                >tilde.club</a
+              >
+            </div>
+            <div class="item">
+              |--
+              <a href="https://tilde.team/~grizzly/browser/" target="_blank"
+                >tilde.team</a
+              >
+            </div>
+            <div class="item">
+              |--
+              <a href="https://envs.net/~grizzly/browser/" target="_blank"
+                >envs.net</a
+              >
+            </div>
+          </div>
+        </div>
 
-        <!-- Projects  -->
-
-        <tr>
-          <th>Projects</th>
-        </tr>
-        <tr>
-          <td>- members site roulette at</td>
-        </tr>
-        <tr>
-          <td>
-            |--
-            <a href="https://tilde.club/~grizzly/browser/" target="_blank"
-              >tilde.club</a
-            >
-          </td>
-        </tr>
-        <tr>
-          <td>
-            |--
-            <a href="https://tilde.team/~grizzly/browser/" target="_blank"
-              >tilde.team</a
-            >
-          </td>
-        </tr>
-        <tr>
-          <td>
-            |--
-            <a href="https://envs.net/~grizzly/browser/" target="_blank"
-              >envs.net</a
-            >
-          </td>
-        </tr>
-      </table>
+        <!-- /me -->
+      </div>
     </div>
 
     <p class="back">