From 7f474775f9540c7fe9b0d41ba26aebe9684b41b2 Mon Sep 17 00:00:00 2001
From: Andrea <andrearicci@users.noreply.github.com>
Date: Sat, 4 Feb 2017 20:10:59 +0100
Subject: [PATCH 1/8] Update default.css

going responsive, It would work better with a new html5 layout
---
 data/style/default.css | 195 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 180 insertions(+), 15 deletions(-)

diff --git a/data/style/default.css b/data/style/default.css
index ae2d0183f..a30d53edb 100644
--- a/data/style/default.css
+++ b/data/style/default.css
@@ -1,19 +1,184 @@
-body {background-color: #3E2723; color: #fff}
-div.recipe, div.index { font-family: Times, serif; font-size: 10pt; margin: auto; max-width: 760px; background-color: #FFF8E1; padding: 1em; margin-top: 1em; color: rgba(0,0,0,0.7)}
+body {
+    /*font-size: 160%;*/
+    font:160% Georgia, "Times New Roman", Times, serif;
+line-height: 1.6;
+}
 
-div.recipe img {border-radius: 10%; height: 200px; float: right;}
-div.recipe img:hover {border: 1px solid black;}
-foo {height: initial; position: absolute; top: 10px; left: 10px}
-span.label { font-weight: bold }
+h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    font-family: "georgia" serif;
+    text-transform: capitalize;
+    page-break-after: avoid;
+    -webkit-column-span: all;
+    /* Chrome, Safari, Opera */
+    column-span: all;
+    margin-bottom: 0;
+}
 
-h3 {font-family: Calibri, Sans-Serif; font-size: 120%; font-weight: bold; color: #6d4c41; border-bottom: 1px solid #ffa000; margin-top: 0px; margin-bottom: 0px;}
+h1 {
+    font-size: 2rem;
+}
 
+h2 {
+    font-size: 1.8rem;
+}
 
-div.header p {margin-top: 0; margin-bottom: 0.2em}
-div.ing { padding: 1em; background-color: #FFE57F}
-ul.ing { margin-top: 0px; padding-left: 0px; color: rgba(0,0,0,1); font-size: 100%;}
-li.ing { list-style: none; border-top: 0.3em }
-div.header p.title { font-family: Calibri, Sans-Serif; font-size: 35pt; font-weight: bold; color: #3E2723; border-bottom: 8px solid #ff6f00; min-height: 200px; vertical-align: bottom; margin-bottom: 20px; position: relative; padding-top: 30px}
-div.header p.title span.label {display: none}
-div.recipe div {margin-bottom: 20px;}
-div.recipe div p {margin-top: 0}
\ No newline at end of file
+h3 {
+    font-size: 1.6rem;
+}
+
+h4 {
+    font-size: 1.4rem;
+}
+
+h5 {
+    font-size: 1.2rem;
+}
+
+h6 {
+    font-size: 1rem;
+}
+
+.instruction p+p, .modifications p+p {
+    text-indent: 2rem;
+}
+
+div.recipe, div.index {
+    font-size: 1rem;
+    max-width: 45rem;
+    margin: auto;
+    padding: 1em;
+    margin-top: 1em;
+}
+
+
+div.recipe img {
+    float: left;
+    padding: .5rem;
+    max-width: 30%;
+    height: auto;
+}
+
+span.label {
+    font-weight: bold;
+}
+
+p.title {
+    font-size: 180%;
+    text-align: center;
+    font-weight: 400;
+}
+
+p.title span.label {
+    /*display: none;*/
+     visibility: hidden;
+}
+
+div.header p {
+    margin-top: 0;
+    margin-bottom: 0.2em;
+}
+
+div.ing {
+    /*padding: 1rem;
+    margin: .5rem;*/
+    border-top: solid 2px;
+    border-bottom: solid 2px;
+    margin: 1rem 0;
+    padding: 1rem 0;
+
+}
+
+ul.ing {
+    margin: 0;
+    padding: 0;
+}
+
+li.ing {
+    list-style: none;
+    border-top: 0.3em;
+}
+
+ul li {
+    margin: 0;
+    padding: 0;
+    text-indent: 0;
+}
+
+.inggroup {
+    font-weight: bold;
+    list-style: none;
+}
+
+.ing {
+    font-weight: normal;
+}
+
+.ing .inggroup {
+    margin-left: 2rem
+}
+
+.ing .inggroup .ing {
+    margin-left: -1rem
+}
+
+div.header {
+    display: table;
+    text-align: center;
+}
+
+div.header p {
+    display: table-row;
+}
+
+div.header p span {
+    display: table-cell;
+    text-align: left;
+}
+
+div.header p span.label {
+    text-align: right;
+    padding-right: 1rem;
+}
+
+div.header p.title {
+    display:table-header-group;
+    width: 100%;
+}
+
+div.header p.title span {
+    display: inline-block;
+    width: 100%;
+    text-align: right;
+    margin: 0;
+    padding: 0;
+}
+
+div.header p.title span.label {
+    width: 0%;
+    /*display: none;*/
+     visibility: hidden;
+     margin: 0; padding: 0;
+}
+
+@media print {
+    * {
+        color: black;
+        background-color: white;
+    }
+    div.recipe, div.index {
+        font-size: 10px;
+        max-width: 100%;
+    }
+    div.ing {
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+    div.recipe img {
+        max-width: 4.5cm;
+    }
+     a:link:after { content: " (" attr(href) ") "; }
+     @page {margin: 0.5cm;}
+
+}

From d60002d0d2a46b65aa82e88aa2f6ed298f56af60 Mon Sep 17 00:00:00 2001
From: Andrea <andrearicci@users.noreply.github.com>
Date: Sat, 4 Feb 2017 20:20:02 +0100
Subject: [PATCH 2/8] testing to move to HTML5

I'm not a programmer, nor I'm abl eto compile so theese mods are not tested.
Please read mi comments, they start as # AR...
These are my proposal for a more semantic (html5) output:
NAV (index button)
ARTICLE (the full recipe)
    HEADER the title
    FIGURE the image
    ASIDE
        TABLE of header elements
    SECTION
         TABLE of ingredients
    SECTION instructions
    SECTION notes
First and most important - the title is an H1 elment, not a P
moving DIVs to Html5 semantic tags
adding an "index" button that shall disappear in a one-page
head formatted as table - I wish to do it also for the ingredients but I wasn't able, sorry.
---
 .../html_plugin/html_exporter.py              | 101 +++++++++++++-----
 1 file changed, 74 insertions(+), 27 deletions(-)

diff --git a/gourmet/plugins/import_export/html_plugin/html_exporter.py b/gourmet/plugins/import_export/html_plugin/html_exporter.py
index b137cdf87..f524063e4 100644
--- a/gourmet/plugins/import_export/html_plugin/html_exporter.py
+++ b/gourmet/plugins/import_export/html_plugin/html_exporter.py
@@ -46,7 +46,7 @@ def __init__ (self, rd, r, out, conv=None,
                                change_units=change_units,
                                do_markup=True,
                                use_ml=True)
-        
+
     def htmlify (self, text):
         t=text.strip()
         #t=xml.sax.saxutils.escape(t)
@@ -64,6 +64,9 @@ def write_head (self):
         if self.start_html:
             self.out.write(HTML_HEADER_START)
             self.out.write("<title>%s</title>"%self.get_title())
+            # AR add html5shiv #
+	        self.out.write("<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->")
+
             if self.css:
                 if self.embed_css:
                     self.out.write("<style type='text/css'><!--\n")
@@ -76,8 +79,17 @@ def write_head (self):
                     self.out.write("<link rel='stylesheet' href='%s' type='text/css'>"%self.make_relative_link(self.css))
             self.out.write(HTML_HEADER_CLOSE)
             self.out.write('<body>')
-        self.out.write('<div class="recipe" itemscope itemtype="http://schema.org/Recipe">')
-        
+
+            ########## AR we should set an IF statement: only if multi-page export + can the word 'Index' be translated to different languages?
+            self.out.write('<nav><a href="index.html">Index</a></nav>')
+
+
+        self.out.write('<article id="%s" class="recipe" itemscope itemtype="http://schema.org/Recipe">'%self.get_title()) ############ changed DIV to ARTICLE: does the software close the tags by its own? can't find the corresponding </div> + trying to set an ID matching the title but still we need to make shure it's unique for multi-recipe output !!!
+
+        ############# insert recipe title h1 ###############
+            def write_title (self):
+            self.out.write("<header><h1>%s</h1></header>"%self.get_title())
+
     def write_image (self, image):
         imgout = os.path.join(self.imagedir_absolute,"%s.jpg"%self.imgcount)
         while os.path.isfile(imgout):
@@ -89,7 +101,8 @@ def write_image (self, image):
         o.write(image)
         o.close()
         # we use urllib here because os.path may fsck up slashes for urls.
-        self.out.write('<img src="%s" itemprop="image" alt="%s">'%(
+        #### AR added FIGURE wrapper
+        self.out.write('<figure><img src="%s" itemprop="image" alt="%s"></figure>'%(
                                                                             self.make_relative_link("%s%s.jpg"%(self.imagedir,
                                                                                     self.imgcount)
                                                                             ),
@@ -97,23 +110,23 @@ def write_image (self, image):
                                                                   )
                        )
         self.images.append(imgout)
-        
+
     def write_inghead (self):
-        self.out.write('<div class="ing"><h3>%s</h3><ul class="ing">'%_('Ingredients'))
+        self.out.write('<section class="ing"><h3>%s</h3><ul class="ing">'%_('Ingredients')) # AR changed DIV to SECTION
 
     def write_text (self, label, text):
         attr = gglobals.NAME_TO_ATTR.get(label,label)
         if attr == 'instructions':
-            self.out.write('<div class="%s"><h3 class="%s">%s</h3><div itemprop="recipeInstructions">%s</div></div>' % (attr,label,label,self.htmlify(text)))
+            self.out.write('<section class="%s"><h3 class="%s">%s</h3><div itemprop="recipeInstructions">%s</div></section>' % (attr,label,label,self.htmlify(text))) # AR changed DIV to SECTION
         else:
-            self.out.write('<div class="%s"><h3 class="%s">%s</h3>%s</div>' % (attr,label,label,self.htmlify(text)))
+            self.out.write('<section class="%s"><h3 class="%s">%s</h3>%s</section>' % (attr,label,label,self.htmlify(text))) # AR changed DIV to SECTION
 
     def handle_italic (self, chunk): return "<em>" + chunk + "</em>"
     def handle_bold (self, chunk): return "<strong>" + chunk + "</strong>"
     def handle_underline (self, chunk): return "<u>" + chunk + "</u>"
 
     def write_attr_head (self):
-        self.out.write("<div class='header'>")
+        self.out.write("<aside><table>") ##### AR changed DIV to ASIDE and P structure to TABLE, with TH and TD
 
     def write_attr (self, label, text):
         attr = gglobals.NAME_TO_ATTR.get(label,label)
@@ -125,12 +138,14 @@ def write_attr (self, label, text):
                            '</a>\n')
         elif attr == 'rating':
             rating, rest = text.split('/', 1)
-            self.out.write('<p class="%s" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"><span class="label">%s:</span> <span itemprop="ratingValue">%s</span><span>/%s</span></p>\n' % (attr, label.capitalize(), rating, rest))
+            # AR with the TH tag we don't need the label class any more to style it. I leave it for compatibility with the CSS
+            # AR WISH -  change the rating numbers to stars, filled: &#x2605; and empty: &#x2606;
+            self.out.write('<tr class="%s" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"><th scope="row" class="label">%s:</th> <td><span itemprop="ratingValue">%s</span>/%s</td></tr>\n' % (attr, label.capitalize(), rating, rest))
         else:
             itemprop = None
-            if attr == 'title':
-                itemprop = 'name'
-            elif attr == 'category':
+            #if attr == 'title':         ############## AR removed (hopefully being moved to H1)
+            #    itemprop = 'name'
+            if attr == 'category':
                 itemprop = 'recipeCategory'
             elif attr == 'cuisine':
                 itemprop = 'recipeCuisine'
@@ -143,19 +158,20 @@ def write_attr (self, label, text):
             elif attr == 'instructions':
                 itemprop = 'recipeInstructions'
             if itemprop:
-                self.out.write('<p class="%s"><span class="label">%s:</span> <span itemprop="%s">%s</span></p>\n' % (attr, label.capitalize(), itemprop, xml.sax.saxutils.escape(text)))
+                # AR with the TH tag we don't need the label class any more to style it. I leave it for compatibility with the CSS
+                self.out.write('<tr class="%s"><th scope="row" class="label">%s:</th> <td itemprop="%s">%s</td></tr>\n' % (attr, label.capitalize(), itemprop, xml.sax.saxutils.escape(text)))
             else:
-                self.out.write("<p class='%s'><span class='label'>%s:</span> %s</p>\n"%(attr, label.capitalize(), xml.sax.saxutils.escape(text)))
-        
+                self.out.write("<tr class='%s'><th scope="row" class='label'>%s:</th> <td>%s</td></tr>\n"%(attr, label.capitalize(), xml.sax.saxutils.escape(text)))
+
     def write_attr_foot (self):
-        self.out.write("</div>")
-    
+        self.out.write("</table></aside>")
+
     def write_grouphead (self, name):
         self.out.write("<li class='inggroup'>%s:<ul class='ing'>"%name)
 
     def write_groupfoot (self):
         self.out.write("</ul></li>")
-                            
+
     def write_ingref (self, amount, unit, item, refid, optional):
         link=False
         if self.link_generator:
@@ -170,6 +186,38 @@ def write_ingref (self, amount, unit, item, refid, optional):
                 self.out.write("'>")
         self.write_ing (amount, unit, item, optional=optional)
         if link: self.out.write("</a>")
+## AR WISH: could we separate amount and unit from ingredient? for different styling. Maybe in a table like:
+			# <table class="ing">
+			# 	<caption>Ingredienti</caption>           # multi-language
+			# 	<thead>
+			# 	<tr>
+			# 		<th scope="col">quantità</th>        # multi-language
+			# 		<th scope="col">ingrediente</th>     # multi-language
+			# 	</tr>
+			# </thead>
+            # <tbody
+			# 	<tr itemprop="recipeIngredient">        # ingredient line
+			# 		<td>12 g</td>
+			# 		<td>onion</td>
+			# 	</tr>
+			# 	<tr itemprop="recipeIngredient">
+			# 		<td>2 cloves</td>
+			# 		<td>garlic</td>
+			# 	</tr>
+            				# <tr class="group">                          # a line that separates groups in the same table
+            				# 	<th colspan="2">theh group title </th>
+            				# </tr>
+			# 	<tr itemprop="recipeIngredient">        # ingredient line
+			# 		<td>4</td>
+			# 		<td>tomato</td>
+			# 	</tr>
+			# 	<tr itemprop="recipeIngredient">        # ingredient line
+			# 		<td>2 cups</td>
+			# 		<td>olive oil</td>
+			# 	</tr>
+			# </tbody>
+            # </table>
+
 
     def write_ing (self, amount=1, unit=None,
                    item=None, key=None, optional=False):
@@ -177,14 +225,14 @@ def write_ing (self, amount=1, unit=None,
         for o in [amount, unit, item]:
             if o: self.out.write(xml.sax.saxutils.escape("%s "%o))
         if optional:
-            self.out.write("(%s)"%_('optional'))
+            self.out.write("(%s)"%_('optional')) ### AR WISH: also give to he LI a class="optional" to allow a different styling of optional ingredients
         self.out.write("</li>\n")
-    
+
     def write_ingfoot (self):
-        self.out.write('</ul>\n</div>\n')
+        self.out.write('</ul>\n</section>\n') # AR closing SECTION tag
 
     def write_foot (self):
-        self.out.write("</div>\n")
+        self.out.write("</article>\n") # AR closing ARTICLE tag
         if self.end_html:
             self.out.write('\n</body>\n</html>')
 
@@ -235,7 +283,7 @@ def __init__ (self, rd, recipe_table, out, conv=None, ext='htm', copy_css=True,
                                   ext=self.ext,
                                   exporter=html_exporter,
                                   exporter_kwargs=self.exportargs)
-        
+
     def write_header (self):
         self.indexfn = os.path.join(self.outdir,'index%s%s'%(os.path.extsep,self.ext))
         self.indexf = open(self.indexfn,'w')
@@ -255,12 +303,12 @@ def write_header (self):
         self.indexf.write('<div class="index"><table class="index">\n<tr>')
         for r in self.index_rows:
             self.indexf.write('<th class="%s">%s</th>'%(r,gglobals.REC_ATTR_DIC[r]))
-        self.indexf.write('</tr>\n')    
+        self.indexf.write('</tr>\n')
 
     def recipe_hook (self, rec, filename, exporter):
         """Add index entry"""
         # we link from the first row
-        
+
         self.indexf.write(
             """<tr><td class="%s">
                      <a href="%s">%s</a>
@@ -301,4 +349,3 @@ def linkify (filename):
     ret = filename.replace('\\','/')
     ret = filename.replace(' ','%20')
     return xml.sax.saxutils.escape(filename)
-    

From 7095a07fc9d6d0e7cd78e953821333a128f5eeca Mon Sep 17 00:00:00 2001
From: Andrea <andrearicci@users.noreply.github.com>
Date: Sun, 5 Feb 2017 19:34:10 +0100
Subject: [PATCH 3/8] Update html_exporter.py

---
 .../html_plugin/html_exporter.py              | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/gourmet/plugins/import_export/html_plugin/html_exporter.py b/gourmet/plugins/import_export/html_plugin/html_exporter.py
index f524063e4..a9ec188a0 100644
--- a/gourmet/plugins/import_export/html_plugin/html_exporter.py
+++ b/gourmet/plugins/import_export/html_plugin/html_exporter.py
@@ -6,6 +6,7 @@
 HTML_HEADER_START = """<!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8">
   """
 HTML_HEADER_CLOSE = """<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
      </head>"""
@@ -64,8 +65,7 @@ def write_head (self):
         if self.start_html:
             self.out.write(HTML_HEADER_START)
             self.out.write("<title>%s</title>"%self.get_title())
-            # AR add html5shiv #
-	        self.out.write("<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->")
+	        # self.out.write('<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->') # AR want to add html5shiv but can't get it work :-( says indent error?
 
             if self.css:
                 if self.embed_css:
@@ -80,15 +80,16 @@ def write_head (self):
             self.out.write(HTML_HEADER_CLOSE)
             self.out.write('<body>')
 
-            ########## AR we should set an IF statement: only if multi-page export + can the word 'Index' be translated to different languages?
+            ########## AR we should set an IF statement: only if multi-page export + can the word 'Index' be translated to different languages? Also we have to check if the ouput is correct: *.htm? *.html?
             self.out.write('<nav><a href="index.html">Index</a></nav>')
 
-
-        self.out.write('<article id="%s" class="recipe" itemscope itemtype="http://schema.org/Recipe">'%self.get_title()) ############ changed DIV to ARTICLE: does the software close the tags by its own? can't find the corresponding </div> + trying to set an ID matching the title but still we need to make shure it's unique for multi-recipe output !!!
+ ############ changed DIV to ARTICLE
+ # but we shall give it an unique ID  - how's the unique filename created?
+            self.out.write('<article class="recipe" itemscope itemtype="http://schema.org/Recipe">')
 
         ############# insert recipe title h1 ###############
-            def write_title (self):
-            self.out.write("<header><h1>%s</h1></header>"%self.get_title())
+        #    def write_title (self):
+            self.out.write('<header><h1  itemprop="name">%s</h1></header>'%self.get_title())
 
     def write_image (self, image):
         imgout = os.path.join(self.imagedir_absolute,"%s.jpg"%self.imgcount)
@@ -112,14 +113,14 @@ def write_image (self, image):
         self.images.append(imgout)
 
     def write_inghead (self):
-        self.out.write('<section class="ing"><h3>%s</h3><ul class="ing">'%_('Ingredients')) # AR changed DIV to SECTION
+        self.out.write('<section class="ing"><h2>%s</h2><ul class="ing">'%_('Ingredients')) # AR changed DIV to SECTION
 
     def write_text (self, label, text):
         attr = gglobals.NAME_TO_ATTR.get(label,label)
         if attr == 'instructions':
-            self.out.write('<section class="%s"><h3 class="%s">%s</h3><div itemprop="recipeInstructions">%s</div></section>' % (attr,label,label,self.htmlify(text))) # AR changed DIV to SECTION
+            self.out.write('<section class="%s"><h2 class="%s">%s</h2><div itemprop="recipeInstructions">%s</div></section>' % (attr,label,label,self.htmlify(text))) # AR changed DIV to SECTION
         else:
-            self.out.write('<section class="%s"><h3 class="%s">%s</h3>%s</section>' % (attr,label,label,self.htmlify(text))) # AR changed DIV to SECTION
+            self.out.write('<section class="%s"><h2 class="%s">%s</h2>%s</section>' % (attr,label,label,self.htmlify(text))) # AR changed DIV to SECTION
 
     def handle_italic (self, chunk): return "<em>" + chunk + "</em>"
     def handle_bold (self, chunk): return "<strong>" + chunk + "</strong>"
@@ -139,11 +140,12 @@ def write_attr (self, label, text):
         elif attr == 'rating':
             rating, rest = text.split('/', 1)
             # AR with the TH tag we don't need the label class any more to style it. I leave it for compatibility with the CSS
-            # AR WISH -  change the rating numbers to stars, filled: &#x2605; and empty: &#x2606;
-            self.out.write('<tr class="%s" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"><th scope="row" class="label">%s:</th> <td><span itemprop="ratingValue">%s</span>/%s</td></tr>\n' % (attr, label.capitalize(), rating, rest))
+            # AR WISH -  change the rating numbers to stars (filled: &#x2605; and empty: &#x2606;)
+            # AR we have to fix itemprop="ratinCount" span to have only "5" and not the word "stars"
+            self.out.write('<tr class="%s" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"><th scope="row" class="label">%s:</th> <td><span itemprop="ratingValue">%s</span>/<span itemprop="ratingCount">%s</span></td></tr>\n' % (attr, label.capitalize(), rating, rest))
         else:
             itemprop = None
-            #if attr == 'title':         ############## AR removed (hopefully being moved to H1)
+            # if attr == 'title':         ############## AR how to COMPLETELY remove? (it has been moved to H1)
             #    itemprop = 'name'
             if attr == 'category':
                 itemprop = 'recipeCategory'
@@ -161,7 +163,7 @@ def write_attr (self, label, text):
                 # AR with the TH tag we don't need the label class any more to style it. I leave it for compatibility with the CSS
                 self.out.write('<tr class="%s"><th scope="row" class="label">%s:</th> <td itemprop="%s">%s</td></tr>\n' % (attr, label.capitalize(), itemprop, xml.sax.saxutils.escape(text)))
             else:
-                self.out.write("<tr class='%s'><th scope="row" class='label'>%s:</th> <td>%s</td></tr>\n"%(attr, label.capitalize(), xml.sax.saxutils.escape(text)))
+                self.out.write('<tr class="%s"><th scope="row" class="label">%s:</th> <td>%s</td></tr>\n'%(attr, label.capitalize(), xml.sax.saxutils.escape(text)))
 
     def write_attr_foot (self):
         self.out.write("</table></aside>")
@@ -191,7 +193,7 @@ def write_ingref (self, amount, unit, item, refid, optional):
 			# 	<caption>Ingredienti</caption>           # multi-language
 			# 	<thead>
 			# 	<tr>
-			# 		<th scope="col">quantità</th>        # multi-language
+			# 		<th scope="col">quantita'</th>        # multi-language
 			# 		<th scope="col">ingrediente</th>     # multi-language
 			# 	</tr>
 			# </thead>
@@ -246,7 +248,7 @@ def make_relative_link (self, filename):
         return linkify(filename)
 
 class website_exporter (ExporterMultirec):
-    def __init__ (self, rd, recipe_table, out, conv=None, ext='htm', copy_css=True,
+    def __init__ (self, rd, recipe_table, out, conv=None, ext='html', copy_css=True, # AR changed to *.html
                   css=os.path.join(gglobals.style_dir,'default.css'),
                   imagedir='pics' + os.path.sep,
                   index_rows=['title','category','cuisine','rating','yields'],
@@ -299,8 +301,8 @@ def write_header (self):
         else:
             self.indexf.write("<link rel='stylesheet' href='%s' type='text/css'>"%self.make_relative_link(self.css))
         self.indexf.write(HTML_HEADER_CLOSE)
-        self.indexf.write('<body>')
-        self.indexf.write('<div class="index"><table class="index">\n<tr>')
+        self.indexf.write('<body class="index">')
+        self.indexf.write('<table class="index">\n<tr>') # removed the DIV and moved its class to BODY
         for r in self.index_rows:
             self.indexf.write('<th class="%s">%s</th>'%(r,gglobals.REC_ATTR_DIC[r]))
         self.indexf.write('</tr>\n')
@@ -324,7 +326,7 @@ def recipe_hook (self, rec, filename, exporter):
         self.added_dict[rec.id]=filename
 
     def write_footer (self):
-        self.indexf.write('</table></div></body></html>')
+        self.indexf.write('</table></body></html>')
         self.indexf.close()
 
     def generate_link (self, id):

From 3f97e89a99aec21c950fefe116c5dd43735d6f2d Mon Sep 17 00:00:00 2001
From: Andrea <andrearicci@users.noreply.github.com>
Date: Sun, 5 Feb 2017 19:40:27 +0100
Subject: [PATCH 4/8] Update default.css

thi is companion of the new html_exporter that I proposed
---
 data/style/default.css | 214 ++++++++++++++++++++++++-----------------
 1 file changed, 128 insertions(+), 86 deletions(-)

diff --git a/data/style/default.css b/data/style/default.css
index a30d53edb..3092e4c14 100644
--- a/data/style/default.css
+++ b/data/style/default.css
@@ -1,7 +1,14 @@
+html {
+    background-color: #ccc
+}
+
 body {
     /*font-size: 160%;*/
-    font:160% Georgia, "Times New Roman", Times, serif;
-line-height: 1.6;
+    font: 160% Georgia, "Times New Roman", Times, serif;
+    line-height: 1.6;
+    max-width: 40rem;
+    margin: 0 auto;
+    background-color: #fff;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -20,39 +27,34 @@ h1 {
 }
 
 h2 {
-    font-size: 1.8rem;
-}
-
-h3 {
-    font-size: 1.6rem;
-}
-
-h4 {
     font-size: 1.4rem;
 }
 
-h5 {
+h3 {
     font-size: 1.2rem;
 }
 
-h6 {
-    font-size: 1rem;
+p {
+    margin: 0;
+    padding: 0;
 }
-
-.instruction p+p, .modifications p+p {
+p+p {
     text-indent: 2rem;
+    margin: 0;
+    padding: 0;
 }
 
-div.recipe, div.index {
-    font-size: 1rem;
+div.recipe, div.index {}
+
+article {
+    font-size: 1.2rem;
     max-width: 45rem;
     margin: auto;
-    padding: 1em;
-    margin-top: 1em;
+    padding: 1rem;
+    margin-top: 1rem;
 }
 
-
-div.recipe img {
+figure {
     float: left;
     padding: .5rem;
     max-width: 30%;
@@ -63,122 +65,162 @@ span.label {
     font-weight: bold;
 }
 
-p.title {
-    font-size: 180%;
-    text-align: center;
+
+/*INDEX button*/
+nav {
+    display: inline-block;
+    width: auto;
+    float: right;
+}
+nav a {
+    font-family: verdana, sans-serif;
+    font-size: .8em;
     font-weight: 400;
+    text-transform: uppercase;
+    text-decoration: none;
+    margin: .5em;
+    padding: 0 .3em;
+    color: white;
+    -webkit-border-radius: .3em;
+    -moz-border-radius: .3em;
+    border-radius: .3em;
+    background-color: rgba(125, 125, 125, 0.5);
+}
+
+nav a:visited {
+    background-color: rgba(125, 125, 125, 0.5);
+}
+
+nav a:hover, nav a:focus {
+    background-color: rgba(125, 0, 100, 0.5);
 }
 
-p.title span.label {
-    /*display: none;*/
-     visibility: hidden;
+header {
+    /*display: block;
+  width: 100%;
+  position: fixed;*/
+    z-index: 100;
+    padding: 1em;
+    background-color: rgba(255, 255, 125, 0.5);
+    text-align: left;
 }
 
-div.header p {
-    margin-top: 0;
-    margin-bottom: 0.2em;
+aside {
+    text-align: center;
+}
+aside table {
+  border-collapse: collapse;
+  width: auto;
+  margin: auto;
+  background-color: pink;
 }
+aside tr, aside td, aside th {
+  margin: 0;
+  padding: 0;
+}
+aside td {
+    text-align: left;
+}
+
+aside th {
+    text-align: right;
+    padding-right: 1rem;
+}
+
+
+/*INGREDIENTS*/
 
-div.ing {
+section.ing {
     /*padding: 1rem;
     margin: .5rem;*/
     border-top: solid 2px;
     border-bottom: solid 2px;
     margin: 1rem 0;
     padding: 1rem 0;
-
 }
 
-ul.ing {
+.ing li:nth-child(odd) {
+    background-color: #eee;
+}
+.ing li:nth-child(even) {
+    background-color: #fff;
+}
+ul li {
     margin: 0;
     padding: 0;
+    text-indent: 0;
 }
-
 li.ing {
     list-style: none;
     border-top: 0.3em;
 }
-
-ul li {
+ul.ing {
     margin: 0;
     padding: 0;
-    text-indent: 0;
 }
 
+/*SUBGROUP*/
 .inggroup {
     font-weight: bold;
     list-style: none;
+    text-indent: 2rem;
+    background-color: transparent !important;
 }
-
-.ing {
+.inggroup .ing {
     font-weight: normal;
 }
 
-.ing .inggroup {
-    margin-left: 2rem
-}
+/*INDEX styles*/
 
-.ing .inggroup .ing {
-    margin-left: -1rem
+.index tr:nth-child(odd) {
+    background-color: #eee;
 }
-
-div.header {
-    display: table;
-    text-align: center;
+.index table {
+  border-collapse: collapse;
+  position: relative;
 }
-
-div.header p {
-    display: table-row;
+.index th {
+  position: fixed;
+  display: table-cell;
+  display: inline-block;
 }
 
-div.header p span {
-    display: table-cell;
-    text-align: left;
-}
+/*DEBUG*/
 
-div.header p span.label {
-    text-align: right;
-    padding-right: 1rem;
-}
-
-div.header p.title {
-    display:table-header-group;
-    width: 100%;
-}
-
-div.header p.title span {
-    display: inline-block;
-    width: 100%;
-    text-align: right;
-    margin: 0;
-    padding: 0;
-}
-
-div.header p.title span.label {
-    width: 0%;
-    /*display: none;*/
-     visibility: hidden;
-     margin: 0; padding: 0;
-}
+/*figure {
+    display: none;
+}*/
 
 @media print {
     * {
         color: black;
         background-color: white;
     }
-    div.recipe, div.index {
-        font-size: 10px;
+    body {
+      font-size: 12pt;
+    }
+    nav {
+        display: none;
+    }
+    .recipe, .index {
+        font-size: 10pt;
         max-width: 100%;
     }
-    div.ing {
+    .ing {
         border: none;
         margin: 0;
         padding: 0;
     }
-    div.recipe img {
+    figure {
         max-width: 4.5cm;
     }
-     a:link:after { content: " (" attr(href) ") "; }
-     @page {margin: 0.5cm;}
-
+    a:link:after {
+        content: " (" attr(href) ") ";
+    }
+    .ing li::before {content: "☐ "}
+    li.inggroup::before {content: ""}
+    .inggroup .ing  li::before {content: "☐ "}
+    @page {
+        margin: 0.5cm;
+    }
 }

From 820150c2c061150889db3e3e03072d69bd609f37 Mon Sep 17 00:00:00 2001
From: Andrea <andrearicci@users.noreply.github.com>
Date: Mon, 6 Feb 2017 17:00:20 +0100
Subject: [PATCH 5/8] an HTML5 exporter

Hello, this is my html5 export proposal (some bug fixed since my last committ).
Please read the comments # AR... for modifications and wishes that I cuoldn't fix myself, like giving to BODY an univoque ID (maybe the filename) or how to implement the ingredients in a table instead of a list.
I made also a CSS that works with this ouput, that is responsive and has also an @MEDIA PRINT statement (which doesn't work when embedded (single recipe export)).
Feedback and help to improve it would be appreciated.

BUG: I noticed a bug in the original plug-in wich I couldn't fix: the href of an image file comes with both forward and back slashes.
---
 .../import_export/html_plugin/html_exporter.py   | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/gourmet/plugins/import_export/html_plugin/html_exporter.py b/gourmet/plugins/import_export/html_plugin/html_exporter.py
index a9ec188a0..a99d6d88a 100644
--- a/gourmet/plugins/import_export/html_plugin/html_exporter.py
+++ b/gourmet/plugins/import_export/html_plugin/html_exporter.py
@@ -52,8 +52,10 @@ def htmlify (self, text):
         t=text.strip()
         #t=xml.sax.saxutils.escape(t)
         t="<p>%s</p>"%t
-        t=re.sub('\n\n+','</p><p>',t)
-        t=re.sub('\n','<br>',t)
+        # AR I want P and not break
+        # t=re.sub('\n\n+','</p><p>',t)
+        # t=re.sub('\n','<br>',t)
+        t=re.sub('\n+','</p><p>',t)
         return t
 
     def get_title (self):
@@ -134,9 +136,9 @@ def write_attr (self, label, text):
         if attr=='link':
             webpage = text.strip('http://')
             webpage = webpage.split('/')[0]
-            self.out.write('<a href="%s">'%text +
+            self.out.write('<tr><td colspan="2"><a href="%s">'%text +
                            _('Original Page from %s')%webpage +
-                           '</a>\n')
+                           '</a></td></tr>\n')
         elif attr == 'rating':
             rating, rest = text.split('/', 1)
             # AR with the TH tag we don't need the label class any more to style it. I leave it for compatibility with the CSS
@@ -302,10 +304,10 @@ def write_header (self):
             self.indexf.write("<link rel='stylesheet' href='%s' type='text/css'>"%self.make_relative_link(self.css))
         self.indexf.write(HTML_HEADER_CLOSE)
         self.indexf.write('<body class="index">')
-        self.indexf.write('<table class="index">\n<tr>') # removed the DIV and moved its class to BODY
+        self.indexf.write('<table class="index">\n<thead>\n<tr>') # removed the DIV and moved its class to BODY
         for r in self.index_rows:
             self.indexf.write('<th class="%s">%s</th>'%(r,gglobals.REC_ATTR_DIC[r]))
-        self.indexf.write('</tr>\n')
+        self.indexf.write('</tr></thead>\n<tbody>\n')
 
     def recipe_hook (self, rec, filename, exporter):
         """Add index entry"""
@@ -326,7 +328,7 @@ def recipe_hook (self, rec, filename, exporter):
         self.added_dict[rec.id]=filename
 
     def write_footer (self):
-        self.indexf.write('</table></body></html>')
+        self.indexf.write('</tbody></table></body></html>')
         self.indexf.close()
 
     def generate_link (self, id):

From 23927dce827634eb1095315f82c39e6bd7706507 Mon Sep 17 00:00:00 2001
From: Andrea <andrearicci@users.noreply.github.com>
Date: Mon, 6 Feb 2017 17:06:07 +0100
Subject: [PATCH 6/8] Update default.css

---
 data/style/default.css | 250 ++++++++++++++++++++++++++++++++---------
 1 file changed, 199 insertions(+), 51 deletions(-)

diff --git a/data/style/default.css b/data/style/default.css
index 3092e4c14..4ac0f558b 100644
--- a/data/style/default.css
+++ b/data/style/default.css
@@ -1,14 +1,15 @@
-html {
-    background-color: #ccc
-}
+@charset "UTF-8";
+
+/* this stylesheet is designed to work with the modified "html5" html_exporter.py by andrearicci
+    unluckilly all the @media print statement at the end doesn't work when the CSS is embedded (single recipe export)
+                                                         */
+
+html {}
 
 body {
     /*font-size: 160%;*/
     font: 160% Georgia, "Times New Roman", Times, serif;
     line-height: 1.6;
-    max-width: 40rem;
-    margin: 0 auto;
-    background-color: #fff;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -24,6 +25,7 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
     font-size: 2rem;
+    margin-top: 0;
 }
 
 h2 {
@@ -38,39 +40,114 @@ p {
     margin: 0;
     padding: 0;
 }
+
 p+p {
     text-indent: 2rem;
     margin: 0;
     padding: 0;
 }
 
+a {
+    text-decoration: none;
+    color: black;
+    /*font-family: verdana,sans-serif;*/
+    display: inline-block;
+    width: 100%;
+    font-style: italic;
+}
+
+aside a {
+    font-size: 1rem;
+}
+
+a:hover {
+    color: #fff;
+    background-color: #666;
+}
+
 div.recipe, div.index {}
 
 article {
     font-size: 1.2rem;
-    max-width: 45rem;
+    max-width: 80%;
     margin: auto;
     padding: 1rem;
     margin-top: 1rem;
+    display: -webkit-box;
+    /* OLD - iOS 6-, Safari 3.1-6 */
+    display: -moz-box;
+    /* OLD - Firefox 19- (buggy but mostly works) */
+    display: -ms-flexbox;
+    /* TWEENER - IE 10 */
+    display: -webkit-flex;
+    /* NEW - Chrome */
+    display: flex;
+    /* NEW, Spec - Opera 12.1, Firefox 20+ */
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    align-content: -content: space-between;
+}
+
+
+/*flexbox elements*/
+
+header {
+    width: 100%;
+    margin-top: 0;
+}
+
+figure {}
+
+aside {}
+
+section {}
+
+
+/*section.ing {width: 100%;}*/
+
+section.instructions {
+    width: 100%;
+    -webkit-column-gap: 3em;
+    /* Chrome, Safari, Opera */
+    -moz-column-gap: 3em;
+    /* Firefox */
+    column-gap: 3em;
+    -webkit-column-rule: 1px solid silver;
+    /* Chrome, Safari, Opera */
+    -moz-column-rule: 1px solid silver;
+    /* Firefox */
+    column-rule: 1px solid silver;
+    page-break-inside: avoid;
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    break-inside: avoid;
+    -webkit-columns: 30rem 3;
+    -moz-columns: 30rem 3;
+    columns: 30rem 3;
 }
 
-figure {
-    float: left;
-    padding: .5rem;
-    max-width: 30%;
-    height: auto;
+
+}
+section.modifications {
+    width: 100%;
 }
 
+/**** Styling *****/
+figure {}
 span.label {
     font-weight: bold;
 }
 
-
 /*INDEX button*/
 nav {
-    display: inline-block;
+    /*display: inline-block;*/
+
     width: auto;
     float: right;
+    position: fixed;
+    right: 0;
+    margin-right: .5rem;
 }
 nav a {
     font-family: verdana, sans-serif;
@@ -86,59 +163,51 @@ nav a {
     border-radius: .3em;
     background-color: rgba(125, 125, 125, 0.5);
 }
-
 nav a:visited {
     background-color: rgba(125, 125, 125, 0.5);
 }
-
 nav a:hover, nav a:focus {
     background-color: rgba(125, 0, 100, 0.5);
 }
-
 header {
-    /*display: block;
-  width: 100%;
-  position: fixed;*/
+    width: 100%;
     z-index: 100;
     padding: 1em;
-    background-color: rgba(255, 255, 125, 0.5);
     text-align: left;
 }
-
 aside {
     text-align: center;
 }
 aside table {
-  border-collapse: collapse;
-  width: auto;
-  margin: auto;
-  background-color: pink;
+    border-collapse: collapse;
+    width: auto;
+    margin: auto;
+    text-align: center;
 }
 aside tr, aside td, aside th {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 aside td {
     text-align: left;
+    vertical-align: baseline;
 }
-
 aside th {
     text-align: right;
+    font-size: .8rem;
     padding-right: 1rem;
+    vertical-align: baseline;
 }
 
-
 /*INGREDIENTS*/
-
 section.ing {
     /*padding: 1rem;
-    margin: .5rem;*/
+    margin: .5rem;
     border-top: solid 2px;
-    border-bottom: solid 2px;
-    margin: 1rem 0;
-    padding: 1rem 0;
+    border-bottom: solid 2px;*/
+    /*margin: 1rem 0;
+    padding: 1rem 0;*/
 }
-
 .ing li:nth-child(odd) {
     background-color: #eee;
 }
@@ -171,55 +240,134 @@ ul.ing {
 }
 
 /*INDEX styles*/
-
+body.index {
+    text-align: center;
+    background-color: #fff;
+}
+.index table {
+    font-size: 1.2rem;
+    border-collapse: collapse;
+    position: relative;
+    text-align: left;
+    margin: auto;
+}
 .index tr:nth-child(odd) {
     background-color: #eee;
 }
-.index table {
-  border-collapse: collapse;
-  position: relative;
+.index td {
+    padding: 0 .6em;
+    vertical-align: baseline;
 }
-.index th {
-  position: fixed;
-  display: table-cell;
-  display: inline-block;
+.index thead tr {
+    position: sticky;
+    background-color: #fff !important;
+    font-variant: small-caps;
+}
+.index .category, .index .cuisine, .index .rating, .index .yields {
+    font-size: .8rem;
+}
+.index a:hover {
+    margin-left: -.8rem;
+    padding-left: .8rem;
 }
 
 /*DEBUG*/
+@media all and (max-width: 1200px) {
+    article {
+        -webkit-flex-flow: column wrap;
+        flex-flow: column wrap;
+        max-width: 90%;
+        width: 90%;
+    }
 
-/*figure {
-    display: none;
-}*/
+    section.ing {
+        width: 90%;
+        border-top: 2px dotted silver;
+        border-bottom: 2px dotted silver;
+        margin-top: 1rem;
+    }
+}
+@media all and (max-width: 800px) {
+    article {
+        -webkit-flex-flow: column wrap;
+        flex-flow: column wrap;
+        max-width: 100%;
+        width: 100%;
+    }
 
+    section.ing {
+        width: 100%;
+    }
+}
+
+/*PRINT STYLES*/
 @media print {
     * {
         color: black;
         background-color: white;
     }
+
+    h1, h2, h3, h4, h5, h6 {
+        break-after: avoid;
+    }
+
+    section {
+        break-inside: avoid;
+        widows: 3;
+        orphans: 3;
+    }
+
     body {
-      font-size: 12pt;
+        font-size: 12pt;
     }
+
     nav {
         display: none;
     }
+
     .recipe, .index {
         font-size: 10pt;
         max-width: 100%;
     }
+
     .ing {
         border: none;
         margin: 0;
         padding: 0;
     }
+
     figure {
         max-width: 4.5cm;
     }
+
+    a {
+        text-decoration: none;
+    }
+
     a:link:after {
         content: " (" attr(href) ") ";
     }
-    .ing li::before {content: "☐ "}
-    li.inggroup::before {content: ""}
-    .inggroup .ing  li::before {content: "☐ "}
+
+    .ing li::before {
+        content: "☐ "
+    }
+
+    li.inggroup::before {
+        content: ""
+    }
+
+    .inggroup .ing li::before {
+        content: "☐ "
+    }
+
+    .index tr {
+        border-bottom: .1pt dotted silver
+    }
+
+    .index a:link:after {
+        content: "";
+    }
+
     @page {
         margin: 0.5cm;
     }

From 665900f076e92e020a7a31e0032602aa587a09a6 Mon Sep 17 00:00:00 2001
From: Andrea <andrearicci@users.noreply.github.com>
Date: Mon, 6 Feb 2017 17:09:32 +0100
Subject: [PATCH 7/8] CSS for the HTML5 exporter

Tis is a CSS that works with my HTML5 proposed exporter.
At the end there's an @MEDIA PRINT statement that only works in an exported stylesheet, not when embedded (single recipe export), so printing a single recipe is ugly. I can't fix this.
---
 data/style/default.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/data/style/default.css b/data/style/default.css
index 4ac0f558b..0be3d5467 100644
--- a/data/style/default.css
+++ b/data/style/default.css
@@ -2,9 +2,6 @@
 
 /* this stylesheet is designed to work with the modified "html5" html_exporter.py by andrearicci
     unluckilly all the @media print statement at the end doesn't work when the CSS is embedded (single recipe export)
-                                                         */
-
-html {}
 
 body {
     /*font-size: 160%;*/
@@ -35,7 +32,6 @@ h2 {
 h3 {
     font-size: 1.2rem;
 }
-
 p {
     margin: 0;
     padding: 0;

From feef8adbde4248f221729352f3c96c589ca16cfe Mon Sep 17 00:00:00 2001
From: Andrea <andrearicci@users.noreply.github.com>
Date: Sat, 26 Aug 2017 19:02:31 +0200
Subject: [PATCH 8/8] Update default.css

fixed small typo error
---
 data/style/default.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/data/style/default.css b/data/style/default.css
index 0be3d5467..8f0bf590c 100644
--- a/data/style/default.css
+++ b/data/style/default.css
@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 /* this stylesheet is designed to work with the modified "html5" html_exporter.py by andrearicci
-    unluckilly all the @media print statement at the end doesn't work when the CSS is embedded (single recipe export)
+    unluckilly all the @media print statement at the end doesn't work when the CSS is embedded (single recipe export)*/
 
 body {
     /*font-size: 160%;*/