<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; } table { -webkit-box-sizing: border-box; box-sizing: border-box; border:max(1px, 0.1vw); border-style:solid; } td { padding-left: 0.5vw; padding-right: 0.5vw; } #body_div { background-color: {{ template_options.color1 }}; } .mainContainer { width: 96%; height: 100%; margin-left: 2%; margin-right: 2%; margin-top: 0%; margin-bottom: 0%; overflow: hidden; border-width: 0; page-break-inside: avoid; } .innerContainer { width: 98%; height: 98%; padding: 1%; overflow: hidden; } .diveDetails { width: 98%; height: 98%; -webkit-box-sizing: border-box; box-sizing: border-box; border:max(1px, 0.1vw); border-style:solid; float: left; } .diveProfile { width: 96%; height: 40%; margin: 2%; } .dataSection { width: 98%; height: 40%; margin: 1%; } .fieldTitle { background-color: {{ template_options.color2 }}; overflow: hidden; } .table_class { float: left; margin: 1%; width: 48%; } .notes_table_class { overflow: hidden; width: 98%; margin: 1%; } .textArea { line-height: {{ template_options.line_spacing }}; max-height: 19vh; overflow: hidden; } </style> </head> <body data-numberofdives = 1> <div id="body_div"> {% block main_rows %} {% for dive in dives %} <div class="mainContainer"> <div class="innerContainer"> <div class="diveDetails"> <div class="diveProfile" id="dive_{{ dive.number }}"> </div> <div class="dataSection"> <table class="table_class"> <tbody><tr> <td class="fieldTitle"> <h1> Dive No. </h1> </td> <td> <h1> {{ dive.number }} </h1> </td> </tr> <tr> <td class="fieldTitle"> <h1> Date </h1> </td> <td><h1> {{ dive.date }} </h1> </td> </tr> <tr> <td class="fieldTitle"> <h1> Location </h1> </td> <td> <h1> {{ dive.location }} </h1> </td> </tr> <tr> <td class="fieldTitle"> <h1> Max depth </h1> </td> <td> <h1> {{ dive.depth }} </h1> </td> </tr> <tr> <td class="fieldTitle"> <h1> Duration </h1> </td> <td> <h1> {{ dive.duration }} </h1> </td> </tr> </tbody></table> <table class="table_class"> <tbody><tr> <td class="fieldTitle"> <h1> Time. </h1> </td> <td> <h1> {{ dive.time }} </h1> </td> </tr> <tr> <td class="fieldTitle"> <h1> Air Temp. </h1> </td> <td><h1> {{ dive.airTemp }} </h1> </td> </tr> <tr> <td class="fieldTitle"> <h1> Water Temp. </h1> </td> <td> <h1> {{ dive.waterTemp }} </h1> </td> </tr> <tr> <td class="fieldTitle"> <h1> Buddy </h1> </td> <td> <h1> {{ dive.buddy }} </h1> </td> </tr> <tr> <td class="fieldTitle"> <h1> Dive Master </h1> </td> <td> <h1> {{ dive.divemaster }} </h1> </td> </tr> </tbody> </table> <table class="notes_table_class"> <tbody> <tr> <td class="fieldTitle"> <h1> Notes </h1> </td> </tr> <tr> <td> <div class="textArea"> <h1> {{ dive.notes }} </h1> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> {% endfor %} {% endblock %} </div> </body> </html>