Replace 'About Me' tables with lists

5 files changed, 54 insertions, 106 deletions

diff --git a/docs/index.html b/docs/index.html
index cb98807..3574a1a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -21,51 +21,29 @@
     <main>
         
 <h2>About Me</h2>
-
 <main>
-     <div class="about-me">
-         <div class="card">
-             <h3>Skills</h3>
-             <table>
-                <tr>
-                    <td>Spoken Languages:</td>
-                    <td>German, English, Tamil</td>
-                </tr>
-                <tr>
-                    <td>Programming Languages:</td>
-                    <td>Rust, Python</td>
-                </tr>
-                <tr>
-                    <td>Interests:</td>
-                    <td>Software development, writing</td>
-                </tr>
-            </table>
+    <div class="about-me">
+        <div class="card">
+            <h3>Skills</h3>
+            <ul>
+                <li><span>Spoken Languages:</span> German, English, Tamil</li>
+                <li><span>Programming Languages:</span> Rust, Python</li>
+                <li><span>Interests:</span> Software development, writing</li>
+            </ul>
         </div>
         <div class="card">
             <h3>Education & Work</h3>
-            <table>
-                <tr>
-                    <td>2010 - 2018:</td>
-                    <td>Abitur: Maria-Theresia-Gymnasium Munich</td>
-                </tr>
-                <tr>
-                    <td>2022 - ?:</td>
-                    <td>Software development apprenticeship at Dontenwill AG</td>
-                </tr>
-            </table>
+            <ul>
+                <li><span>2010 - 2018:</span> Abitur - Maria-Theresia-Gymnasium Munich</li>
+                <li><span>2022 - ?:</span> Software development apprenticeship at Dontenwill AG</li>
+            </ul>
         </div>
         <div class="card">
             <h3>Contact & Social Media</h3>
-            <table>
-                <tr>
-                    <td>E-Mail:</td>
-                    <td><a href="mailto:primary-v2@protonmail.com">primary-v2@protonmail.com</a></td>
-                </tr>
-                <tr>
-                    <td>Github:</td>
-                    <td><a href="https://github.com/WriterV2">WriterV2</a></td>
-                </tr>
-            </table>
+            <ul>
+                <li><span>E-Mail:</span> <a href="mailto:primary-v2@protonmail.com">primary-v2@protonmail.com</a></li>
+                <li><span>Github:</span> <a href="https://github.com/WriterV2">WriterV2</a></li>
+            </ul>
         </div>
     </div>
 </main>
diff --git a/docs/style.css b/docs/style.css
index 1dc8d13..32fae8b 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -97,6 +97,16 @@ h3 {
   border-radius: 0.3em;
   border: 1px solid #131313;
 }
+.card ul {
+  list-style: none;
+}
+.card ul li {
+  padding: 0.5em;
+}
+.card ul li span {
+  background-color: #131313;
+  padding: 0.2em;
+}
 .card.work-card {
   display: flex;
   flex-direction: column;
@@ -160,17 +170,4 @@ h3 {
   font-size: 0.9em;
 }
 
-table {
-  border-collapse: collapse;
-  width: 100%;
-  background-color: #131313;
-  margin: 0.8em 0;
-}
-table tr td {
-  border: 1px solid #333;
-  text-align: left;
-  padding: 1em;
-  font-size: 0.9em;
-}
-
 /*# sourceMappingURL=style.css.map */
diff --git a/docs/style.css.map b/docs/style.css.map
index f2813cb..fcba9b2 100644
--- a/docs/style.css.map
+++ b/docs/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EAMA;;AALA;EACI;EACA;EACA;;;AAKR;EACI,kBAlBe;EAmBf,OAjBS;EAkBT;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA,kBA7Ce;;;AAgDnB;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;AAEJ;EAPJ;IAQQ;;;AAGR;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;;AAKZ;EACI;EACA;EACA,kBA1EQ;;;AA6EZ;EACI;EACA;;AACA;EACI,cA/EO;EAgFP;;;AAIR;EACI;EACA,OAtFW;;;AAyFf;EACI;EACA,kBA7FQ;EA8FR;EACA;;AAEA;EACI;EACA;EACA;EAcA;;AAbA;EACI;EACA;;AACA;EACI,kBA1GG;EA2GH;EACA;EACA;;AAGR;EACI;;AAGJ;EAlBJ;IAmBQ;;;AAEJ;EArBJ;IAsBQ;;;AAEJ;EAxBJ;IAyBQ;;;;AAMZ;EACI;EACA;;AACA;EAHJ;IAIQ;;;AAEJ;EACI;EACA,OAvIK;;AAyIT;EACI,kBA3II;EA4IJ,OA1IO;EA2IP;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA,kBA9Je;EA+Jf;;AAEI;EACI;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EAMA;;AALA;EACI;EACA;EACA;;;AAKR;EACI,kBAlBe;EAmBf,OAjBS;EAkBT;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA,kBA7Ce;;;AAgDnB;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;AAEJ;EAPJ;IAQQ;;;AAGR;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;;AAKZ;EACI;EACA;EACA,kBA1EQ;;;AA6EZ;EACI;EACA;;AACA;EACI,cA/EO;EAgFP;;;AAIR;EACI;EACA,OAtFW;;;AAyFf;EACI;EACA,kBA7FQ;EA8FR;EACA;;AAEA;EACI;;AACA;EACI;;AACA;EACI,kBAvGG;EAwGH;;AAKZ;EACI;EACA;EACA;EAcA;;AAbA;EACI;EACA;;AACA;EACI,kBArHG;EAsHH;EACA;EACA;;AAGR;EACI;;AAGJ;EAlBJ;IAmBQ;;;AAEJ;EArBJ;IAsBQ;;;AAEJ;EAxBJ;IAyBQ;;;;AAKZ;EACI;EACA;;AACA;EAHJ;IAIQ;;;AAEJ;EACI;EACA,OAjJK;;AAmJT;EACI,kBArJI;EAsJJ,OApJO;EAqJP;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/sass/style.scss b/sass/style.scss
index dafaba0..957d63d 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -96,6 +96,17 @@ h3 {
     border-radius: 0.3em;
     border: 1px solid $background-color;
     
+    ul {
+        list-style: none;
+        li {
+            padding: 0.5em;
+            span {
+                background-color: $background-color;
+                padding: 0.2em;
+            }
+        }
+    }
+
     &.work-card {
         display: flex;
         flex-direction: column;
@@ -123,7 +134,6 @@ h3 {
         @media screen and (min-width: 1024px) {
             height: 350px;
         }
-
     }
 }
 
@@ -152,18 +162,3 @@ h3 {
     border: 1px solid $box-color;
     font-size: 0.9em;
 }
-
-table {
-    border-collapse: collapse;
-    width: 100%;
-    background-color: $background-color;
-    margin: 0.8em 0;
-    tr {
-        td {
-            border: 1px solid $box-color;
-            text-align: left;
-            padding: 1em;
-            font-size: 0.9em;
-        }
-    }
-}
diff --git a/templates/index.html b/templates/index.html
index efb0295..800d539 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,51 +2,29 @@
 {% block title %}Home{% endblock title %}
 {% block content %}
 <h2>About Me</h2>
-
 <main>
-     <div class="about-me">
-         <div class="card">
-             <h3>Skills</h3>
-             <table>
-                <tr>
-                    <td>Spoken Languages:</td>
-                    <td>German, English, Tamil</td>
-                </tr>
-                <tr>
-                    <td>Programming Languages:</td>
-                    <td>Rust, Python</td>
-                </tr>
-                <tr>
-                    <td>Interests:</td>
-                    <td>Software development, writing</td>
-                </tr>
-            </table>
+    <div class="about-me">
+        <div class="card">
+            <h3>Skills</h3>
+            <ul>
+                <li><span>Spoken Languages:</span> German, English, Tamil</li>
+                <li><span>Programming Languages:</span> Rust, Python</li>
+                <li><span>Interests:</span> Software development, writing</li>
+            </ul>
         </div>
         <div class="card">
             <h3>Education & Work</h3>
-            <table>
-                <tr>
-                    <td>2010 - 2018:</td>
-                    <td>Abitur: Maria-Theresia-Gymnasium Munich</td>
-                </tr>
-                <tr>
-                    <td>2022 - ?:</td>
-                    <td>Software development apprenticeship at Dontenwill AG</td>
-                </tr>
-            </table>
+            <ul>
+                <li><span>2010 - 2018:</span> Abitur - Maria-Theresia-Gymnasium Munich</li>
+                <li><span>2022 - ?:</span> Software development apprenticeship at Dontenwill AG</li>
+            </ul>
         </div>
         <div class="card">
             <h3>Contact & Social Media</h3>
-            <table>
-                <tr>
-                    <td>E-Mail:</td>
-                    <td><a href="mailto:primary-v2@protonmail.com">primary-v2@protonmail.com</a></td>
-                </tr>
-                <tr>
-                    <td>Github:</td>
-                    <td><a href="https://github.com/WriterV2">WriterV2</a></td>
-                </tr>
-            </table>
+            <ul>
+                <li><span>E-Mail:</span> <a href="mailto:primary-v2@protonmail.com">primary-v2@protonmail.com</a></li>
+                <li><span>Github:</span> <a href="https://github.com/WriterV2">WriterV2</a></li>
+            </ul>
         </div>
     </div>
 </main>