Styling and add missing features.

src/app/app.css

@@ -0,0 +1,23 @@
+#main-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    padding-inline: var(--main-padding);
+}
+
+@media screen and (min-width: 900px) {
+    #main-container {
+        grid-template-columns: 1fr 3fr;
+    }
+}
+
+@media screen and (min-width: 1300px) {
+    #main-container {
+        grid-template-columns: 1fr 4fr;
+    }
+}
+
+@media screen and (min-width: 1700px) {
+    #main-container {
+        grid-template-columns: 1fr 5fr;
+    }
+}

src/app/app.html

@@ -1,5 +1,7 @@
 <app-header />
-<app-nav />
-<main>
-    <router-outlet />
-</main>
+<div id="main-container">
+    <app-nav />
+    <main>
+        <router-outlet />
+    </main>
+</div>

src/app/header/header.css

@@ -0,0 +1,18 @@
+header {
+    padding: var(--main-padding);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--primary-red);
+    color: var(--primary-white);
+}
+
+#header-login {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+h1 {
+    color: var(--primary-white);
+}

src/app/header/header.html

@@ -1,9 +1,13 @@
 <header>
     <h1>Meals Made Easy</h1>
     @if (isLoggedIn()) {
-        <p>Welcome {{ username() }}!</p>
-        <button (click)="logoutClick()">Logout</button>
+        <div id="header-login">
+            <p>Welcome {{ username() }}!</p>
+            <button (click)="logoutClick()">Logout</button>
+        </div>
     } @else {
-        <button (click)="loginClick()">Login</button>
+        <div id="header-login">
+            <button (click)="loginClick()">Login</button>
+        </div>
     }
 </header>

src/app/recipe-page/recipe-page-content/recipe-page-content.css

@@ -0,0 +1,28 @@
+article {
+    max-width: 80ch;
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+}
+
+#recipe-header {
+    display: flex;
+    flex-direction: column;
+}
+
+#recipe-header > div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#star {
+    display: flex;
+    align-items: center;
+    column-gap: 3px;
+}
+
+#main-image {
+    width: 100%;
+    object-fit: cover;
+}

src/app/recipe-page/recipe-page-content/recipe-page-content.html

@@ -1,22 +1,36 @@
 @let recipe = recipeView().recipe;
 <article>
     <div id="recipe-header">
-        <h1>{{ recipe.title }}</h1>
-        @if (isLoggedIn()) {
-            <button id="star" (click)="starMutation.mutate()">
-                <fa-icon [icon]="faStar" />
-                <span>Star</span>
-                <span id="star-count">{{ recipe.starCount }}</span>
-            </button>
-        } @else {
+        <div>
+            <h1>{{ recipe.title }}</h1>
+            @if (isLoggedIn()) {
+                <button id="star" (click)="starMutation.mutate()">
+                    <fa-icon [icon]="faStar" />
+                    <span>Star</span>
+                    <span id="star-count">{{ recipe.starCount }}</span>
+                </button>
+            } @else {
+                <div>
+                    <fa-icon [icon]="faStar" />
+                    <span id="star-count">{{ recipe.starCount }}</span>
+                </div>
+            }
+        </div>
+        <div>
             <div>
-                <fa-icon [icon]="faStar" />
-                <span id="star-count">{{ recipe.starCount }}</span>
+                <fa-icon [icon]="faUser" />
+                <span>{{ recipe.owner.username }}</span>
             </div>
-        }
+            @if (recipe.isPublic) {
+                <fa-icon [icon]="faGlobe" />
+            } @else {
+                <fa-icon [icon]="faLock" />
+            }
+        </div>
     </div>
     @if (mainImageUrl.isSuccess()) {
         <img
+            id="main-image"
             [src]="mainImageUrl.data()"
             [alt]="recipe.mainImage.alt"
             [height]="recipe.mainImage.height"

src/app/recipe-page/recipe-page-content/recipe-page-content.ts

@@ -2,7 +2,7 @@ import { Component, computed, inject, input } from '@angular/core';
 import { RecipeView } from '../../model/Recipe.model';
 import { injectMutation, injectQuery } from '@tanstack/angular-query-experimental';
 import { ImageService } from '../../service/image.service';
-import { faStar } from '@fortawesome/free-solid-svg-icons';
+import { faGlobe, faLock, faStar, faUser } from '@fortawesome/free-solid-svg-icons';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { RecipeService } from '../../service/recipe.service';
 import { AuthService } from '../../service/auth.service';
@@ -35,4 +35,7 @@ export class RecipePageContent {
     }));
 
     protected readonly faStar = faStar;
+    protected readonly faUser = faUser;
+    protected readonly faGlobe = faGlobe;
+    protected readonly faLock = faLock;
 }

src/app/recipes-page/recipes-page.css

@@ -1,5 +1,17 @@
 .recipe-card-grid {
     display: grid;
     gap: 20px;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(2, 1fr);
+}
+
+@media screen and (min-width: 1300px) {
+    .recipe-card-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media screen and (min-width: 1700px) {
+    .recipe-card-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
 }

src/index.html

@@ -2,10 +2,18 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <title>MealsMadeEasyApp</title>
+        <title>Meals Made Easy</title>
         <base href="/" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
+
+        <!-- Inter font -->
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+            rel="stylesheet"
+        />
     </head>
     <body>
         <app-root></app-root>

src/styles.css

@@ -1 +1,53 @@
-/* You can add global styles to this file, and also import other style files */
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+:root {
+    --primary-white: #ffffff;
+    --primary-red: #91351d;
+    --primary-yellow: #ffb61d;
+    --primary-black: #252525;
+    --off-white-1: #eee;
+    --off-white-2: #ddd;
+    --off-white-3: #ccc;
+    --off-white-4: #bbb;
+    --off-white-5: #aaa;
+    --main-padding: 20px;
+}
+
+body {
+    margin: 0;
+    font-family: 'Inter', sans-serif;
+    box-sizing: border-box;
+    color: var(--primary-black);
+}
+
+a {
+    color: var(--primary-red);
+}
+
+a:visited {
+    color: var(--primary-red);
+}
+
+a:hover {
+    color: hsl(from var(--primary-red) h s l / 0.9);
+}
+
+button {
+    background-color: var(--off-white-2);
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+button:hover {
+    background-color: var(--off-white-1);
+    cursor: pointer;
+}
+
+fa-icon {
+    color: var(--primary-red);
+}
+
+.fa-star {
+    color: var(--primary-yellow);
+}