Merge pull request #11 from dotcomaki/main

Fix tables and code blocks contrast

Author: dotcomaki

_sass/color_schemes/codeday-dark.scss

@@ -11,10 +11,12 @@ $nav-child-link-color: $gray-400;
 $sidebar-color: $gray-900;
 $base-button-color: $modes-dark-placeholder;
 $btn-primary-color: $blue-200;
-$code-background-color: $modes-dark-border;
-$code-linenumber-color: $modes-dark-textLight;
+$code-background-color: $gray-900;
+$code-linenumber-color: $gray-400;
 $feedback-color: $gray-800;
-$table-background-color: $modes-dark-placeholder;
+$table-background-color: $gray-700;
 $search-background-color: $modes-dark-placeholder;
 $search-result-preview-color: $modes-dark-textLight;
 $border-color: $modes-dark-border;
+
+@import "./vendor/accessible-pygments/github-dark";

_sass/color_schemes/codeday-light.scss

@@ -11,10 +11,10 @@ $nav-child-link-color: $modes-light-textLight;
 $sidebar-color: $gray-100;
 $base-button-color: $modes-light-placeholder;
 $btn-primary-color: $blue-200;
-$code-background-color: $modes-light-border;
+$code-background-color: $gray-50;
 $code-linenumber-color: $modes-light-textLight;
 $feedback-color: $gray-50;
-$table-background-color: $modes-light-placeholder;
+$table-background-color: $red-50;
 $search-background-color: $modes-light-placeholder;
 $search-result-preview-color: $modes-light-textLight;
 $border-color: $modes-light-border;

mentor-training/when2meet-guide.md

@@ -57,11 +57,23 @@ As mentees fill in their availability, the grid updates in real time.
 
 ### Understanding the color grid
 
-| Color | Meaning |
-| --- | --- |
-| **Dark green** | Highest overlap - everyone is available |
-| **Light green** | Partial overlap - hover to see who is free |
-| **White** | No overlap at this time |
+<style>
+  .w2m-table { border-collapse: collapse; width: 100%; }
+  .w2m-table th { background-color: #3a3a3a !important; color: #ffffff !important; padding: 0.5em 1em; text-align: left; }
+  .w2m-table td { padding: 0.5em 1em; border: 1px solid #555 !important; }
+  .w2m-dark  td { background-color: #267326 !important; color: #ffffff !important; }
+  .w2m-light td { background-color: #8ec97d !important; color: #0e2e08 !important; }
+  .w2m-white td { background-color: #ffffff !important; color: #000000 !important; }
+</style>
+
+<table class="w2m-table">
+  <thead><tr><th>Color</th><th>Meaning</th></tr></thead>
+  <tbody>
+    <tr class="w2m-dark"><td><strong>Dark green</strong></td><td>Highest overlap — everyone is available</td></tr>
+    <tr class="w2m-light"><td><strong>Light green</strong></td><td>Partial overlap — hover to see who is free</td></tr>
+    <tr class="w2m-white"><td><strong>White</strong></td><td>No overlap at this time</td></tr>
+  </tbody>
+</table>
 
 **Hover over any block to see a list of exactly who is available at that time.**