add: styling

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 995c69c8a47d569e6c2a4f32dd10de71a90a17f9..db34983c53961e87fef27eda44c6650d5ef3ac4c 100644 (file)
--- 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 ee8d91c32126891290ae803be71f149f81f4cc8e..371fb96432427315e8761ea49d6dac189f8de4cc 100644 (file)
--- 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>