From: Bastian Dehn Date: Fri, 10 Jun 2022 20:11:28 +0000 (+0200) Subject: add: style for food X-Git-Tag: v1.0^2~5^2 X-Git-Url: https://gitweb.hhaalo.de/?a=commitdiff_plain;h=cd1caf6162e6a58ec224068becbe9e16d9a8d976;p=speisekarten-editor.git add: style for food --- 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;