<html> <head> <style> body { {{ print_options.grayscale }}; padding: 0; margin: 0; font-size: {{ template_options.font_size }}vw; line-height: {{ template_options.line_spacing }}; font-family: {{ template_options.font }}; } h1 { float: left; font-size: {{ template_options.font_size }}vw; } p { float: left; font-size: {{ template_options.font_size }}vw; } table { -webkit-box-sizing: border-box; box-sizing: border-box; border-width: {{ template_options.borderwidth }}px; border-style:solid; border-color: {{ template_options.color6 }}; } td { padding-left: 0.5vw; padding-right: 0.5vw; } #body_div { background-color: {{ template_options.color1 }}; } .mainContainer { width: 100%; margin-left: 0%; margin-right: 0%; margin-top: 0%; margin-bottom: 2%; overflow: hidden; border-width: 0; page-break-inside: avoid; } .innerContainer { width: 100%; padding: 0%; overflow: hidden; } .diveDetails { width: 100%; float: left; } .dataSection { width: 100%; } .fieldTitle { background-color: {{ template_options.color2 }}; overflow: hidden; color: {{ template_options.color4 }}; } .fieldData { color: {{ template_options.color5 }}; background-color: {{ template_options.color3 }}; } .table_class { float: left; width: 49.25%; margin: 0.5%; } .notes_table_class { overflow: hidden; width: 99%; margin: 0.5%; } .textArea { line-height: {{ template_options.line_spacing }}; max-height: 19vh; overflow: hidden; color: {{ template_options.color4 }}; } </style> </head> <body data-numberofdives = 0> <div id="body_div"> {% block main_rows %} {% for dive in dives %} <div class="mainContainer dontbreak"> <div class="innerContainer"> <div class="diveDetails"> <div class="dataSection"> <table class="table_class"> <tbody><tr> <td class="fieldTitle"> <h1> Dive No. </h1> </td> <td class="fieldData"> <p> {{ dive.number }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Date </h1> </td> <td class="fieldData"> <p> {{ dive.date }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Location </h1> </td> <td class="fieldData"> <p> {{ dive.location }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Max. depth </h1> </td> <td class="fieldData"> <p> {{ dive.depth }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Duration </h1> </td> <td class="fieldData"> <p> {{ dive.duration }} </p> </td> </tr> </tbody></table> <table class="table_class"> <tbody><tr> <td class="fieldTitle"> <h1> Time </h1> </td> <td class="fieldData"> <p> {{ dive.time }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Air Temp. </h1> </td> <td class="fieldData"> <p> {{ dive.airTemp }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Water Temp. </h1> </td> <td class="fieldData"> <p> {{ dive.waterTemp }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Buddy </h1> </td> <td class="fieldData"> <p> {{ dive.buddy }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Divemaster </h1> </td> <td class="fieldData"> <p> {{ dive.divemaster }} </p> </td> </tr> </tbody> </table> <table class="notes_table_class"> <tbody> <tr> <td class="fieldTitle"> <h1> Notes </h1> </td> </tr> <tr> <td class="fieldData"> <div class="textArea"> <p> {{ dive.notes|safe }} </p> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> {% endfor %} {% endblock %} </div> </body> </html>