From cd1caf6162e6a58ec224068becbe9e16d9a8d976 Mon Sep 17 00:00:00 2001 From: Bastian Dehn Date: Fri, 10 Jun 2022 22:11:28 +0200 Subject: [PATCH] add: style for food --- src/app/html-export.service.ts | 48 ++++++++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/src/app/html-export.service.ts b/src/app/html-export.service.ts index 995e89d..6f801c2 100644 --- a/src/app/html-export.service.ts +++ b/src/app/html-export.service.ts @@ -27,7 +27,10 @@ export class HtmlExportService html += ''; html += ''; html += ''; + html += '

'; html += this.createHtmlTitles(foodcard.Titles); + html += '

Fragen zu Allergenen beantwortet Ihnen gerne unser Servicepersonal

'; + html += '

'; html += '' html += ''; let result = this.sanitizer.bypassSecurityTrustUrl("data:text/html;charset=UTF-8," + html); @@ -44,8 +47,13 @@ export class HtmlExportService 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;'; @@ -56,10 +64,46 @@ export class HtmlExportService 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; -- 2.39.5