From 61b875256fba7fac3fa06e7af63a2271d85a1e0a Mon Sep 17 00:00:00 2001
From: Chris Wilson <chris@legendserver.info>
Date: Tue, 7 Sep 2021 19:41:04 -0400
Subject: [PATCH] Add table styling to markdown css

---
 .../static/assets/tutorial/ror2/setup_en.md   |   2 +-
 WebHostLib/static/styles/markdown.css         |  18 +++
 WebHostLib/static/styles/tutorial.css         | 120 ------------------
 WebHostLib/templates/tutorial.html            |   4 +-
 4 files changed, 21 insertions(+), 123 deletions(-)
 delete mode 100644 WebHostLib/static/styles/tutorial.css

diff --git a/WebHostLib/static/assets/tutorial/ror2/setup_en.md b/WebHostLib/static/assets/tutorial/ror2/setup_en.md
index 6dfdc5ed..4763a43c 100644
--- a/WebHostLib/static/assets/tutorial/ror2/setup_en.md
+++ b/WebHostLib/static/assets/tutorial/ror2/setup_en.md
@@ -66,4 +66,4 @@ They will have 4 of the items which other players can grant them replaced with `
 
 The player will also start with a `Dio's Best Friend`. (start_with_revive = true)
 
-The player will have lunar items shuffled into the item pool on their behalf. (enable_lunar = true)
\ No newline at end of file
+The player will have lunar items shuffled into the item pool on their behalf. (enable_lunar = true)
diff --git a/WebHostLib/static/styles/markdown.css b/WebHostLib/static/styles/markdown.css
index a00f1b1c..f82b6e1f 100644
--- a/WebHostLib/static/styles/markdown.css
+++ b/WebHostLib/static/styles/markdown.css
@@ -118,3 +118,21 @@
     width: 100%;
     text-align: right;
 }
+
+.markdown table{
+    border-collapse: collapse;
+    margin-bottom: 0.5rem;
+}
+
+.markdown table th{
+    text-align: left;
+    font-weight: bold;
+    border: 1px solid #eeffeb;
+    padding: 0.25rem;
+}
+
+.markdown table td{
+    text-align: left;
+    border: 1px solid #eeffeb;
+    padding: 0.25rem;
+}
diff --git a/WebHostLib/static/styles/tutorial.css b/WebHostLib/static/styles/tutorial.css
deleted file mode 100644
index 55717fdc..00000000
--- a/WebHostLib/static/styles/tutorial.css
+++ /dev/null
@@ -1,120 +0,0 @@
-#tutorial-wrapper{
-    display: flex;
-    flex-direction: column;
-    max-width: 70rem;
-    margin-left: auto;
-    margin-right: auto;
-    background-color: rgba(0, 0, 0, 0.15);
-    border-radius: 8px;
-    padding: 1rem 1rem 3rem;
-    color: #eeffeb;
-}
-
-#tutorial-wrapper img{
-    max-width: 100%;
-    border-radius: 6px;
-}
-
-#tutorial-wrapper p{
-    margin-top: 0;
-}
-
-#tutorial-wrapper a{
-    color: #ffef00;
-}
-
-#tutorial-wrapper h1{
-    font-size: 2.5rem;
-    font-weight: normal;
-    border-bottom: 1px solid #ffffff;
-    cursor: pointer;
-    width: 100%;
-    margin-bottom: 0.5rem;
-    color: #ffffff;
-    text-shadow: 1px 1px 4px #000000;
-}
-
-#tutorial-wrapper h2{
-    font-size: 2rem;
-    font-weight: normal;
-    border-bottom: 1px solid #ffffff;
-    cursor: pointer;
-    width: 100%;
-    margin-bottom: 0.5rem;
-    color: #ffe993;
-    text-transform: lowercase;
-    text-shadow: 1px 1px 2px #000000;
-}
-
-#tutorial-wrapper h3{
-    font-size: 1.70rem;
-    font-weight: normal;
-    text-align: left;
-    cursor: pointer;
-    width: 100%;
-    margin-bottom: 0.5rem;
-}
-
-#tutorial-wrapper h4{
-    font-size: 1.5rem;
-    font-weight: normal;
-    cursor: pointer;
-    margin-bottom: 0.5rem;
-}
-
-#tutorial-wrapper h5{
-    font-size: 1.25rem;
-    font-weight: normal;
-    cursor: pointer;
-}
-
-#tutorial-wrapper h6{
-    font-size: 1.25rem;
-    font-weight: normal;
-    cursor: pointer;
-    color: #434343;
-}
-
-#tutorial-wrapper h3, #tutorial-wrapper h4, #tutorial-wrapper h5,#tutorial-wrapper h6{
-    color: #ffffff;
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-}
-
-#tutorial-wrapper ul{
-
-}
-
-#tutorial-wrapper ol{
-
-}
-
-#tutorial-wrapper li{
-
-}
-
-#tutorial-wrapper pre{
-    margin-top: 0;
-    padding: 0.5rem 0.25rem;
-    background-color: #ffeeab;
-    border: 1px solid #9f916a;
-    border-radius: 6px;
-    color: #000000;
-}
-
-#tutorial-wrapper code{
-    background-color: #ffeeab;
-    border-radius: 4px;
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-    color: #000000;
-}
-
-#tutorial-wrapper #tutorial-video-container{
-    width: 100%;
-    text-align: center;
-}
-
-#tutorial-wrapper #language-selector-wrapper{
-    width: 100%;
-    text-align: right;
-}
diff --git a/WebHostLib/templates/tutorial.html b/WebHostLib/templates/tutorial.html
index bc516ddc..b4d95c4c 100644
--- a/WebHostLib/templates/tutorial.html
+++ b/WebHostLib/templates/tutorial.html
@@ -3,7 +3,7 @@
 {% block head %}
     {% include 'header/grassHeader.html' %}
     <title>Archipelago</title>
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/tutorial.css") }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/markdown.css") }}" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"
             integrity="sha512-L03kznCrNOfVxOUovR6ESfCz9Gfny7gihUX/huVbQB9zjODtYpxaVtIaAkpetoiyV2eqWbvxMH9fiSv5enX7bw=="
             crossorigin="anonymous"></script>
@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block body %}
-    <div id="tutorial-wrapper" data-game="{{ game }}" data-file="{{ file }}" data-lang="{{ lang }}">
+    <div id="tutorial-wrapper" class="markdown" data-game="{{ game }}" data-file="{{ file }}" data-lang="{{ lang }}">
         <!-- Content generated by JavaScript -->
     </div>
 {%  endblock %}