From 60c17959aa00d944168551db7520e1a5120c089a Mon Sep 17 00:00:00 2001
From: Bruno Bord <bruno@jehaisleprintemps.net>
Date: Sat, 14 May 2016 16:07:34 +0200
Subject: [PATCH] "Converting saves" section table displayed nicely

---
 CHANGELOG.md        |  1 +
 README.md           | 27 +++++++++++++++++++++++++++
 templates/base.html | 13 +++++++++++++
 3 files changed, 41 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d5005d7..bce1fbe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 * Added a `.htaccess` file to serve `.md` files with the utf-8 encoding (#23).
 * Indicate the translation version if mentioned in the `meta.yaml` file (#20).
 * Added an anchor in the headers from h1 to h6 (#26).
+* Aligned the "converting save" tables to make them prettier (#17).
 
 ## 1.0.1 (2016-05-03)
 
diff --git a/README.md b/README.md
index 5373082..ab4d64e 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,33 @@ version: '1.1.2'
 * None of the fields are required you can only specify one, two or all of them ; your choice.
 * even though the `author` information is optional, although I'd recommend to provide it, in order to receive feedback (including praises from the community).
 
+### Specific styles
+
+**Note:** If you think that the following is too complicated for you, don't worry, I'll take care of this.
+
+In order to get the "Converting saves" tables aligned and pretty, we're using the following CSS style:
+
+```css
+#converting-saves + p + table, #converting-saves + p + table + table {
+    display: table;
+}
+```
+
+It might look a bit complicated, but it goes like this: it's using the *anchor name* of the "Converting saves" header, skips the next paragraph, and changes the `display` CSS attribute for the next two tables.
+
+Whenever you're adding a new language directory, or if you're modifiying your translation of "Converting saves", the anchor name also changes, if you want the styles to fit.
+
+Let's say I'm adding French. The translation reads "Conversion des jets de sauvegarde". The anchor name will be: `conversion-des-jets-de-sauvegarde`. To check it, just build the HTML files and go to this specific section. The anchor link would appear when you roll your mouse over the "¶" sign next to the title.
+
+In order to have the next two tables correctly aligned, here's my new CSS instructions:
+
+```css
+#converting-saves + p + table, #converting-saves + p + table + table,
+#conversion-des-jets-de-sauvegarde + p + table, #conversion-des-jets-de-sauvegarde + p + table + table {
+    display: table;
+}
+```
+
 ----
 
 ## References
diff --git a/templates/base.html b/templates/base.html
index 07b14ca..8ae5eff 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -52,6 +52,19 @@
 a.headerlink:hover {
     color: #888;
 }
+/* Converting saves trick to have tables aligned */
+/* english */
+    #converting-saves + p + table,
+    #converting-saves + p + table + table,
+/* french */
+    #conversion-des-jets-de-sauvegarde + p + table,
+    #conversion-des-jets-de-sauvegarde + p + table + table,
+/* spanish */
+    #convirtiendo-tiradas-de-salvacion + p + table,
+    #convirtiendo-tiradas-de-salvacion + p + table + table
+{
+    display: table;
+}
 /**
  * Tables
  */