From b02c90337a6e9deef6c0f39b03c22249a47e791f Mon Sep 17 00:00:00 2001
From: Bastian Dehn <hhaalo@arcor.de>
Date: Mon, 6 Jun 2022 20:23:06 +0200
Subject: [PATCH] add: styling

---
 src/app/app.component.css  | 104 +++++++++++++++++++++++++++++++++++++
 src/app/app.component.html |   7 ++-
 2 files changed, 110 insertions(+), 1 deletion(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 995c69c..db34983 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,3 +1,8 @@
+@import url('https://fonts.googleapis.com/css?family=Tangerine');
+@font-face {
+	font-family: 'Tangerine';
+}
+
 .button {
 	display: block;
 	margin: 0.5em 0;
@@ -18,3 +23,102 @@
 	width: 80%;
 	margin: 0.5em 0;
 }
+
+h1, h2 {
+	font-family: 'Tangerine', serif;
+	text-align: center;
+}
+
+h1 {
+	font-size: 2.5em;
+	margin: 1em 0;
+}
+
+h2 {
+	font-size: 2em;
+}
+
+.grid {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+}
+
+.foodmenu {
+	text-align: center;
+}
+
+.food {
+	grid-row: 1;
+	grid-column: 1/13;
+	font-size: 1.2em;
+	font-weight: bold;
+}
+
+.sideDish {
+	grid-row: 2;
+	grid-column: 1/13;
+	font-style: italic;	
+}
+
+.price {
+	grid-row: 3;
+	grid-column: 1/13;
+	margin-top: 0.5em;
+}
+
+.foodmenu .button:nth-child(odd) {
+	grid-column: 7/8;
+	text-align: center;
+}
+
+.foodmenu .button:nth-child(even) {
+	grid-column: 6/7;
+	text-align: center;
+}
+
+@media only screen and (min-width: 46.875em) {
+	h1, h2 {
+		text-align: left;
+	}
+
+	.foodmenu {
+		padding: 0.5em 0;
+		border-bottom: 0.125em solid gray;
+		text-align: left;
+	}
+
+	.food {
+		grid-row: 1;
+		grid-column: 1/9;
+		font-size: 1.5em;
+	}
+
+	.sideDish {
+		grid-row: 2;
+		grid-column: 1/13;
+	}
+
+	.price {
+		grid-row: 1;
+		grid-column: 9/13;
+		text-align: right;
+		font-size: 1.1em;
+	}
+
+	.foodmenu .button:nth-child(odd) {
+		grid-column: 2/3;
+		text-align: center;
+	}
+
+	.foodmenu .button:nth-child(even) {
+		grid-column: 1/2;
+		text-align: center;
+	}
+}
+
+@media only screen and (min-width: 60.625em) {
+	.foodcardeditor {
+		max-width: 60em;
+		margin: 0 auto;
+	}
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index ee8d91c..371fb96 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,5 @@
+<div class=foodcardeditor>
+
 <input type="file"
 	name="fileupload"
 	(change)="fileEvent($event)" />
@@ -85,7 +87,8 @@
 		<button class="button"
 			type="button"
 			(click)="editSubtitle(subtitle)">Bearbeiten</button>
-		<div *ngFor="let food of subtitle.Foods; let i = index">
+		<div *ngFor="let food of subtitle.Foods; let i = index"
+			class="foodmenu grid">
 			<div class="food">{{food.Food}}</div>
 			<div class="sideDish">{{food.sideDish}}</div>
 			<div class="price">{{food.price}}</div>
@@ -98,3 +101,5 @@
 		</div>
 	</div>
 </div>
+
+</div>
-- 
2.39.5