html += '</style>';
html += '</head>';
html += '<body>';
+ html += '<div class="foodcard">';
html += this.createHtmlTitles(foodcard.Titles);
+ html += '<p>Fragen zu Allergenen beantwortet Ihnen gerne unser Servicepersonal</p>';
+ html += '</div>';
html += '</body>'
html += '</html>';
let result = this.sanitizer.bypassSecurityTrustUrl("data:text/html;charset=UTF-8," + html);
stylestring += '@import url("https://fonts.googleapis.com/css?family=Tangerine");';
stylestring += '@font-face { font-family: "Tangerine"; }';
- // Body
- stylestring += 'body { max-width: 60em; margin: 0 auto; }';
+ // foodcard
+ stylestring += '.foodcard { max-width: 60em; margin: 0 auto; }';
+ stylestring += 'p { font-style: italic; text-align: center; }';
+
+ // Grid
+ stylestring += '.grid { display: grid;';
+ stylestring += 'grid-template-column: repeat(12, 1fr) }';
// Title
stylestring += 'h1 { font-family: "Tangerine", serif;';
stylestring += 'h2 { font-family: "Tangerine", serif;';
stylestring += 'text-align: center; font-size: 2em; }';
+ // FoodMenu
+ stylestring += '.foodmenu { text-align: center; }';
+
+ // Food
+ stylestring += '.food { grid-row: 1; grid-column: 1/13;';
+ stylestring += 'font-size: 1.2em; font-weight: bold; }';
+
+ // SideDish
+ stylestring += '.sideDish { grid-row: 2; grid-column: 1/13;';
+ stylestring += 'fond-style: italic; }';
+
+ // Price
+ stylestring += '.price { grid-row: 3; grid-column: 1/13;';
+ stylestring += 'margin-top: 0.5em; }';
+
// Bigger Media
stylestring += '@media only screen and (min-width: 46.875em) {';
+
+ // Title
stylestring += 'h1 { text-align: left; }';
+
+ // Subtitle
stylestring += 'h2 { text-align: left; }';
+
+ // FoodMenu
+ stylestring += '.foodmenu { padding: 0.5em 0;';
+ stylestring += 'border-bottom: 0.125em solid gray;';
+ stylestring += 'text-align: left; }';
+
+ // Food
+ stylestring += '.food { grid-row: 1; grid-column: 1/9;';
+ stylestring += 'font-size: 1.5em; }';
+
+ // SideDish
+ stylestring += '.sideDish { grid-row: 2; grid-column: 1/13; }';
+
+ // Price
+ stylestring += '.price { grid-row: 1; grid-column: 9/13;';
+ stylestring += 'text-align: right; font-size: 1.1em; }';
+
stylestring += '}';
return stylestring;