Add table styling to markdown css

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)
+The player will have lunar items shuffled into the item pool on their behalf. (enable_lunar = true)

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;
+}

WebHostLib/static/styles/tutorial.css

@@ -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;
-}

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 %}