From 5803ed4897f5ef7240e9a69808b5b2cbe4370e64 Mon Sep 17 00:00:00 2001 From: Maddy Date: Wed, 23 Feb 2022 09:22:08 +0100 Subject: [PATCH 1/4] Changes to recipe blog --- lesson-04/remix-site/app/db/db.json | 25 ++++++++++++---- lesson-04/remix-site/app/db/db.server.js | 2 +- lesson-04/remix-site/app/root.jsx | 10 +++---- lesson-04/remix-site/app/routes/index.jsx | 2 +- .../app/routes/{posts.jsx => recipes.jsx} | 2 +- .../$postId.jsx => recipes/$recipeId.jsx} | 30 ++++++++++++------- .../app/routes/{posts => recipes}/index.jsx | 18 +++++------ .../app/routes/{posts => recipes}/new.jsx | 20 ++++++++----- 8 files changed, 70 insertions(+), 39 deletions(-) rename lesson-04/remix-site/app/routes/{posts.jsx => recipes.jsx} (69%) rename lesson-04/remix-site/app/routes/{posts/$postId.jsx => recipes/$recipeId.jsx} (53%) rename lesson-04/remix-site/app/routes/{posts => recipes}/index.jsx (54%) rename lesson-04/remix-site/app/routes/{posts => recipes}/new.jsx (58%) diff --git a/lesson-04/remix-site/app/db/db.json b/lesson-04/remix-site/app/db/db.json index 33b7bbba..1d04d259 100644 --- a/lesson-04/remix-site/app/db/db.json +++ b/lesson-04/remix-site/app/db/db.json @@ -1,19 +1,34 @@ { - "posts": [ + "recipes": [ { "id": "1", - "title": "Post 1", + "title": "Spaghetti", "body": "This is test post #1" }, { "id": "2", - "title": "Post 2", + "title": "Muffins", "body": "This is test post #2" }, { "id": "3", - "title": "Post 3", + "title": "Tomato Soup", "body": "This is test post #3" + }, + { + "id": "17f259f2ef0", + "title": "Lasagne", + "body": "This is lasagne" + }, + { + "id": "17f25a5e53a", + "title": "Apple pie", + "body": "Apple pie", + "seperatedIngredients": [ + "apples", + " cinamon", + " dough" + ] } ] -} +} \ No newline at end of file diff --git a/lesson-04/remix-site/app/db/db.server.js b/lesson-04/remix-site/app/db/db.server.js index 5c592eb3..8175aef2 100644 --- a/lesson-04/remix-site/app/db/db.server.js +++ b/lesson-04/remix-site/app/db/db.server.js @@ -6,5 +6,5 @@ const adapter = new JSONFileSync(file); const db = new LowSync(adapter); db.read(); -db.data = db.data || { posts: [] }; +db.data = db.data || { recipes: [] }; export default db; diff --git a/lesson-04/remix-site/app/root.jsx b/lesson-04/remix-site/app/root.jsx index bb49e187..fae7c273 100644 --- a/lesson-04/remix-site/app/root.jsx +++ b/lesson-04/remix-site/app/root.jsx @@ -9,13 +9,13 @@ export const links = () => [ ]; export const meta = () => ({ - description: "An example blog", - keywords: "remix, javascript", + description: "A recipe blog", + keywords: "recipes, food, jummy", }); export default function App() { return ( - + @@ -47,10 +47,10 @@ function Layout({ children }) { <>
{children}
diff --git a/lesson-04/remix-site/app/routes/index.jsx b/lesson-04/remix-site/app/routes/index.jsx index 597cfb22..95518a18 100644 --- a/lesson-04/remix-site/app/routes/index.jsx +++ b/lesson-04/remix-site/app/routes/index.jsx @@ -2,7 +2,7 @@ export default function Home() { return (

Welcome

-

This site is full of great posts. Enjoy!

+

This site is full of great recipes. Enjoy!

); } diff --git a/lesson-04/remix-site/app/routes/posts.jsx b/lesson-04/remix-site/app/routes/recipes.jsx similarity index 69% rename from lesson-04/remix-site/app/routes/posts.jsx rename to lesson-04/remix-site/app/routes/recipes.jsx index 8bbcb268..b22e0acd 100644 --- a/lesson-04/remix-site/app/routes/posts.jsx +++ b/lesson-04/remix-site/app/routes/recipes.jsx @@ -1,6 +1,6 @@ import { Outlet } from "remix"; -export default function Posts() { +export default function Recipes() { return ( <> diff --git a/lesson-04/remix-site/app/routes/posts/$postId.jsx b/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx similarity index 53% rename from lesson-04/remix-site/app/routes/posts/$postId.jsx rename to lesson-04/remix-site/app/routes/recipes/$recipeId.jsx index 91744f43..7b4aebe0 100644 --- a/lesson-04/remix-site/app/routes/posts/$postId.jsx +++ b/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx @@ -3,37 +3,47 @@ import { useLoaderData } from "remix"; import db from "~/db/db.server"; export const loader = async function ({ params }) { - const post = db.data.posts.find((p) => p.id === params.postId); + const recipe = db.data.recipes.find((p) => p.id === params.recipeId); - if (!post) { - throw new Error("Post not found"); + if (!recipe) { + throw new Error("recipe not found"); } return { - post, + recipe, }; }; export const action = async function ({ request, params }) { const form = await request.formData(); if (form.get("_method") === "delete") { - db.data.posts = db.data.posts.filter((p) => p.id !== params.postId); + db.data.recipes = db.data.recipes.filter((p) => p.id !== params.recipeId); db.write(); - return redirect("/posts"); + return redirect("/recipes"); } }; -export default function Post() { - const { post } = useLoaderData(); +export default function Recipe() { + const { recipe } = useLoaderData(); return (
-

{post.title}

+

{recipe.title}

Back
-

{post.body}

+

Description

+

{recipe.body}

+

Ingredients

+
    + {recipe.seperatedIngredients.map((ingredient) => { + return ( +
  • + {ingredient} +
    • + ) + })}
diff --git a/lesson-04/remix-site/app/routes/posts/index.jsx b/lesson-04/remix-site/app/routes/recipes/index.jsx similarity index 54% rename from lesson-04/remix-site/app/routes/posts/index.jsx rename to lesson-04/remix-site/app/routes/recipes/index.jsx index 39bab4ed..5c34eee1 100644 --- a/lesson-04/remix-site/app/routes/posts/index.jsx +++ b/lesson-04/remix-site/app/routes/recipes/index.jsx @@ -2,25 +2,25 @@ import { Link, useLoaderData } from "remix"; import db from "~/db/db.server.js"; export async function loader() { - return db.data.posts; + return db.data.recipes; } export default function PostItems() { - const posts = useLoaderData(); + const recipes = useLoaderData(); return (
-

Posts

- - New post +

Recipes

+ + New recipe
    - {posts.map((post) => ( -
  • - -

    {post.title}

    + {recipes.map((recipe) => ( +
  • + +

    {recipe.title}

    • ))} diff --git a/lesson-04/remix-site/app/routes/posts/new.jsx b/lesson-04/remix-site/app/routes/recipes/new.jsx similarity index 58% rename from lesson-04/remix-site/app/routes/posts/new.jsx rename to lesson-04/remix-site/app/routes/recipes/new.jsx index 8b144a56..e7ef9adb 100644 --- a/lesson-04/remix-site/app/routes/posts/new.jsx +++ b/lesson-04/remix-site/app/routes/recipes/new.jsx @@ -5,19 +5,21 @@ export const action = async ({ request }) => { const form = await request.formData(); const title = form.get("title"); const body = form.get("body"); + const ingredients = form.get("ingredients"); + const seperatedIngredients = ingredients.split(","); const uuid = new Date().getTime().toString(16); - db.data.posts.push({ id: uuid, title, body }); + db.data.recipes.push({ id: uuid, title, body, seperatedIngredients }); db.write(); - return redirect(`/posts/${uuid}`); + return redirect(`/recipes/${uuid}`); }; -export default function NewPost() { +export default function NewRecipe() { return ( <>
    -

    New Post

    - +

    New Recipe

    + Back
    @@ -28,11 +30,15 @@ export default function NewPost() {
- +
+
+ + +
From cdce2e73a4d08a849195246e9abcf1cfaff98d5e Mon Sep 17 00:00:00 2001 From: Maddy Date: Wed, 23 Feb 2022 10:40:35 +0100 Subject: [PATCH 2/4] Adding new features --- lesson-04/remix-site/app/db/db.json | 55 +++++++++++++++++-- lesson-04/remix-site/app/routes/index.jsx | 4 +- .../app/routes/recipes/$recipeId.jsx | 3 + .../remix-site/app/routes/recipes/index.jsx | 2 + .../remix-site/app/routes/recipes/new.jsx | 12 +++- 5 files changed, 68 insertions(+), 8 deletions(-) diff --git a/lesson-04/remix-site/app/db/db.json b/lesson-04/remix-site/app/db/db.json index 1d04d259..5005083d 100644 --- a/lesson-04/remix-site/app/db/db.json +++ b/lesson-04/remix-site/app/db/db.json @@ -3,22 +3,53 @@ { "id": "1", "title": "Spaghetti", - "body": "This is test post #1" + "body": "This is test post #1", + "seperatedIngredients": [ + "apples", + " cinamon", + " dough" + ], + "author": "Kasia", + "img": "https://ocdn.eu/pulscms-transforms/1/iGxk9kpTURBXy8wYTQ2YmY1M2NlYTVlMTM2NWU2MjdiMmRjODExZTUxZi5qcGeTlQMAH80D6M0CMpMJpjA2NTMzYgaTBc0EsM0CdoGhMAE/spaghetti-puttanesca.jpg" }, { "id": "2", "title": "Muffins", - "body": "This is test post #2" + "body": "This is test post #2", + "seperatedIngredients": [ + "flour", + " eggs", + " milk", + "chocolate" + ], + "author": "Kasia", + "img": "https://www.valdemarsro.dk/wp-content/2021/01/vaniljemuffins.jpg" }, { "id": "3", "title": "Tomato Soup", - "body": "This is test post #3" + "body": "This soup is everything I want tomato soup to be! It’s rich and creamy, yet doesn’t weigh me down. It’s bursting with amazing tomato flavor, yet it’s made from canned tomatoes.", + "seperatedIngredients": [ + "tomatos", + " peper", + " salt", + "onion", + "olive oil" + ], + "author": "Kasia", + "img": "https://images.unsplash.com/photo-1547592166-23ac45744acd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" }, { "id": "17f259f2ef0", "title": "Lasagne", - "body": "This is lasagne" + "body": "This is lasagne", + "seperatedIngredients": [ + "tomatos", + " lasagne pasta", + " meat" + ], + "author": "Magda", + "img": "https://images.unsplash.com/photo-1614961909013-1e2212a2ca87?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" }, { "id": "17f25a5e53a", @@ -28,7 +59,21 @@ "apples", " cinamon", " dough" - ] + ], + "author": "Magda", + "img": "https://images.unsplash.com/photo-1587248720327-8eb72564be1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" + }, + { + "id": "17f25e97ee3", + "title": "Curry Ramen", + "body": "Curry", + "seperatedIngredients": [ + "ramen pasta", + " curry", + " coconut milk" + ], + "author": "Magda", + "img": "https://www.kwestiasmaku.com/sites/v123.kwestiasmaku.com/files/curry_ramen_01.jpg" } ] } \ No newline at end of file diff --git a/lesson-04/remix-site/app/routes/index.jsx b/lesson-04/remix-site/app/routes/index.jsx index 95518a18..84ca7e84 100644 --- a/lesson-04/remix-site/app/routes/index.jsx +++ b/lesson-04/remix-site/app/routes/index.jsx @@ -1,8 +1,8 @@ export default function Home() { return (
-

Welcome

-

This site is full of great recipes. Enjoy!

+

Welcome to our Recipes Blog

+

This site is full of great recipes. Enjoy! By Kasia&Magda

); } diff --git a/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx b/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx index 7b4aebe0..ebc06a1b 100644 --- a/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx +++ b/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx @@ -33,6 +33,7 @@ export default function Recipe() { Back
+

Description

{recipe.body}

Ingredients

@@ -44,6 +45,8 @@ export default function Recipe() { ) })} +

Author

+

{recipe.author}

diff --git a/lesson-04/remix-site/app/routes/recipes/index.jsx b/lesson-04/remix-site/app/routes/recipes/index.jsx index 5c34eee1..c317f4ae 100644 --- a/lesson-04/remix-site/app/routes/recipes/index.jsx +++ b/lesson-04/remix-site/app/routes/recipes/index.jsx @@ -21,6 +21,8 @@ export default function PostItems() {

  • {recipe.title}

    + +

    Author: {recipe.author}

    • ))} diff --git a/lesson-04/remix-site/app/routes/recipes/new.jsx b/lesson-04/remix-site/app/routes/recipes/new.jsx index e7ef9adb..9579caa4 100644 --- a/lesson-04/remix-site/app/routes/recipes/new.jsx +++ b/lesson-04/remix-site/app/routes/recipes/new.jsx @@ -7,9 +7,11 @@ export const action = async ({ request }) => { const body = form.get("body"); const ingredients = form.get("ingredients"); const seperatedIngredients = ingredients.split(","); + const author = form.get("author"); + const img = form.get("img"); const uuid = new Date().getTime().toString(16); - db.data.recipes.push({ id: uuid, title, body, seperatedIngredients }); + db.data.recipes.push({ id: uuid, title, body, seperatedIngredients, author, img }); db.write(); return redirect(`/recipes/${uuid}`); }; @@ -37,6 +39,14 @@ export default function NewRecipe() {
    +
    + + +
    +
    + + +
    From a72903ffa01b2ac60b04f24e2aba02945c52faf9 Mon Sep 17 00:00:00 2001 From: Maddy Date: Wed, 23 Feb 2022 12:28:25 +0100 Subject: [PATCH 3/4] Open Props styling --- lesson-04/remix-site/app/db/db.json | 12 ++ lesson-04/remix-site/app/routes/recipes.jsx | 2 + .../app/routes/recipes/$recipeId.jsx | 42 ++-- .../remix-site/app/routes/recipes/index.jsx | 16 +- .../remix-site/app/routes/recipes/new.jsx | 12 +- lesson-04/remix-site/app/styles/Home.css | 0 lesson-04/remix-site/app/styles/NewRecipe.css | 35 +++ lesson-04/remix-site/app/styles/Recipe.css | 39 ++++ lesson-04/remix-site/app/styles/Recipes.css | 37 ++++ lesson-04/remix-site/app/styles/global.css | 203 ++---------------- 10 files changed, 195 insertions(+), 203 deletions(-) create mode 100644 lesson-04/remix-site/app/styles/Home.css create mode 100644 lesson-04/remix-site/app/styles/NewRecipe.css create mode 100644 lesson-04/remix-site/app/styles/Recipe.css create mode 100644 lesson-04/remix-site/app/styles/Recipes.css diff --git a/lesson-04/remix-site/app/db/db.json b/lesson-04/remix-site/app/db/db.json index 5005083d..f203094c 100644 --- a/lesson-04/remix-site/app/db/db.json +++ b/lesson-04/remix-site/app/db/db.json @@ -74,6 +74,18 @@ ], "author": "Magda", "img": "https://www.kwestiasmaku.com/sites/v123.kwestiasmaku.com/files/curry_ramen_01.jpg" + }, + { + "id": "17f2653bdd0", + "title": "Sandwich", + "body": "This is a sandwich hihihihiihihi", + "seperatedIngredients": [ + "bread", + " lettuce", + " cheese" + ], + "author": "Kasia", + "img": "https://assets.epicurious.com/photos/5d3770225c5cb8000935d1db/6:4/w_3272,h_2181,c_limit/crispy-green-goddess-sandwich-recipe-BA-071119.jpg" } ] } \ No newline at end of file diff --git a/lesson-04/remix-site/app/routes/recipes.jsx b/lesson-04/remix-site/app/routes/recipes.jsx index b22e0acd..1ce93980 100644 --- a/lesson-04/remix-site/app/routes/recipes.jsx +++ b/lesson-04/remix-site/app/routes/recipes.jsx @@ -1,5 +1,7 @@ import { Outlet } from "remix"; + + export default function Recipes() { return ( <> diff --git a/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx b/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx index ebc06a1b..caf8c02a 100644 --- a/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx +++ b/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx @@ -1,6 +1,7 @@ import { Link, redirect } from "remix"; import { useLoaderData } from "remix"; import db from "~/db/db.server"; +import RecipeStylesUrl from "~/styles/Recipe.css"; export const loader = async function ({ params }) { const recipe = db.data.recipes.find((p) => p.id === params.recipeId); @@ -22,6 +23,15 @@ export const action = async function ({ request, params }) { } }; +export function links() { + return [ + { + rel: "stylesheet", + href: RecipeStylesUrl, + }, + ]; +} + export default function Recipe() { const { recipe } = useLoaderData(); @@ -33,20 +43,24 @@ export default function Recipe() { Back - -

    Description

    -

    {recipe.body}

    -

    Ingredients

    -
      - {recipe.seperatedIngredients.map((ingredient) => { - return ( -
    • - {ingredient} -
      • - ) - })}
    -

    Author

    -

    {recipe.author}

    +
    + +
    +

    Description

    +

    {recipe.body}

    +

    Ingredients

    +
      + {recipe.seperatedIngredients.map((ingredient) => { + return ( +
    • + {ingredient} +
      • + ) + })}
    +

    Author

    +

    {recipe.author}

    +
    +
    diff --git a/lesson-04/remix-site/app/routes/recipes/index.jsx b/lesson-04/remix-site/app/routes/recipes/index.jsx index c317f4ae..d052de55 100644 --- a/lesson-04/remix-site/app/routes/recipes/index.jsx +++ b/lesson-04/remix-site/app/routes/recipes/index.jsx @@ -1,10 +1,20 @@ import { Link, useLoaderData } from "remix"; import db from "~/db/db.server.js"; +import RecipesStylesUrl from "~/styles/Recipes.css"; export async function loader() { return db.data.recipes; } +export function links() { + return [ + { + rel: "stylesheet", + href: RecipesStylesUrl, + }, + ]; +} + export default function PostItems() { const recipes = useLoaderData(); @@ -16,12 +26,12 @@ export default function PostItems() { New recipe
    -
      +
        {recipes.map((recipe) => ( -
      • +

      • {recipe.title}

        - +

        Author: {recipe.author}

        • diff --git a/lesson-04/remix-site/app/routes/recipes/new.jsx b/lesson-04/remix-site/app/routes/recipes/new.jsx index 9579caa4..f22e9e99 100644 --- a/lesson-04/remix-site/app/routes/recipes/new.jsx +++ b/lesson-04/remix-site/app/routes/recipes/new.jsx @@ -1,5 +1,15 @@ import { Link, redirect } from "remix"; import db from "~/db/db.server"; +import NewRecipeStylesUrl from "~/styles/NewRecipe.css"; + +export function links() { + return [ + { + rel: "stylesheet", + href: NewRecipeStylesUrl, + }, + ]; +} export const action = async ({ request }) => { const form = await request.formData(); @@ -47,7 +57,7 @@ export default function NewRecipe() { - diff --git a/lesson-04/remix-site/app/styles/Home.css b/lesson-04/remix-site/app/styles/Home.css new file mode 100644 index 00000000..e69de29b diff --git a/lesson-04/remix-site/app/styles/NewRecipe.css b/lesson-04/remix-site/app/styles/NewRecipe.css new file mode 100644 index 00000000..457cb5d4 --- /dev/null +++ b/lesson-04/remix-site/app/styles/NewRecipe.css @@ -0,0 +1,35 @@ +.page-header{ + display: flex; + flex-direction: column-reverse; +} + +input, textarea { + background-color: var(--gray-8); + border: none; + border-radius: var(--radius-2); + padding: var(--size-2); + color: var(--gray-0); +} + +input:focus-visible, textarea:focus-visible { + outline: 1px solid var(--indigo-7); +} + +.form-control { + display: flex; + flex-direction: column; + margin-bottom: var(--size-4); + gap: 4px; + width: var(--size-15); +} + +.btn-block { + background-color: var(--indigo-7); + text-decoration: none; + padding: var(--size-2) var(--size-5); + color: var(--gray-0); + border-radius: var(--radius-round); + text-transform: uppercase; + height: fit-content; + border: none; +} \ No newline at end of file diff --git a/lesson-04/remix-site/app/styles/Recipe.css b/lesson-04/remix-site/app/styles/Recipe.css new file mode 100644 index 00000000..69d1e522 --- /dev/null +++ b/lesson-04/remix-site/app/styles/Recipe.css @@ -0,0 +1,39 @@ +.page-header{ + display: flex; + flex-direction: column-reverse; +} + +img { + border-radius: var(--radius-2); + height: 400px; + width: 700px; + object-fit: cover; +} + +.recipe-info { + display: flex; + flex-direction: column; + background-color: var(--gray-8); + margin-left: 24px; + width: 50%; + padding: var(--size-5) var(--size-8); + border-radius: var(--radius-2); +} + +.recipe-content { + display: flex; + flex-direction: row; + gap: 32px; +} + +.btn-delete { + background-color: var(--red-7); + text-decoration: none; + padding: var(--size-2) var(--size-5); + color: var(--gray-0); + border-radius: var(--radius-round); + text-transform: uppercase; + height: fit-content; + border: none; + margin: var(--size-6) 0; +} \ No newline at end of file diff --git a/lesson-04/remix-site/app/styles/Recipes.css b/lesson-04/remix-site/app/styles/Recipes.css new file mode 100644 index 00000000..fd2315a7 --- /dev/null +++ b/lesson-04/remix-site/app/styles/Recipes.css @@ -0,0 +1,37 @@ +.btn { + background-color: var(--indigo-7); + text-decoration: none; + padding: var(--size-2) var(--size-5); + color: var(--gray-0); + border-radius: var(--radius-round); + text-transform: uppercase; + height: fit-content; +} + +.page-header{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.recipe-item{ + background-color: var(--gray-8); + padding: var(--size-2) var(--size-5); + list-style-type: none; + width: 28%; + border-radius: var(--radius-2); + box-shadow: var(--shadow-3); +} + +.recipe-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 34px; + padding: 0 !important; +} + +.img { + border-radius: var(--radius-2); +} \ No newline at end of file diff --git a/lesson-04/remix-site/app/styles/global.css b/lesson-04/remix-site/app/styles/global.css index c0c63d07..4c6da159 100644 --- a/lesson-04/remix-site/app/styles/global.css +++ b/lesson-04/remix-site/app/styles/global.css @@ -1,203 +1,36 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap"); - -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} +@import "https://unpkg.com/open-props"; body { - font-family: "Poppins", sans-serif; + font-family: var(--font-sans); + margin: var(--size-6) var(--size-9); + background-color: var(--gray-9); + color: var(--gray-0); } a { text-decoration: none; - color: #000; + color: var(--gray-0); } -ul { - list-style: none; -} - -p { - margin: 10px 0; -} - -.container { - width: 100%; - max-width: 960px; - margin: auto; - padding: 0 30px; -} - -.logo { - font-size: x-large; - text-transform: uppercase; -} - -.navbar { +.navbar{ display: flex; - justify-content: space-between; + flex-direction: row; align-items: center; - margin-bottom: 30px; - background-color: #f4f4f4; - padding: 10px 30px; - text-transform: uppercase; -} - -.navbar ul { - display: flex; justify-content: space-between; - align-items: center; } -.navbar li { - margin-left: 20px; +.nav a { + color: var(--gray-4); } -.navbar ul li a { - color: #000; +.logo { text-transform: uppercase; - font-size: 14px; - font-weight: bold; + color: var(--indigo-4); + font-size: var(--font-size-3); + font-weight: var(--font-weight-7); + font-family: var(--font-mono); } -.navbar ul li a:hover { - color: #333; - border-bottom: 1px solid #333; -} - -.btn { - display: inline-block; - background: #000; - color: #fff; - border: none; - padding: 10px 20px; - margin: 5px; - border-radius: 5px; - cursor: pointer; - text-decoration: none; - font-size: 15px; - font-family: inherit; -} - -.btn-reverse { - background: #fff; - color: #000; - border-color: #000; -} - -.btn:focus { - outline: none; -} - -.btn:active { - transform: scale(0.98); -} - -.btn-block { - display: block; - width: 100%; -} - -.btn-delete { - background: darkred; - color: #fff; - border-color: darkred; - font-size: 13px; - padding: 5px 10px; -} - -.page-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 30px; -} - -.page-footer { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 30px; -} - -.form-control { - margin: 20px 0; -} - -.form-control label { - display: block; -} - -.form-control input, -.form-control textarea { - width: 100%; - height: 40px; - margin: 5px; - padding: 3px 7px; - font-size: 17px; -} - -.form-control textarea { - height: 200px; -} - -.form-control-check { - display: flex; - align-items: center; - justify-content: space-between; -} - -.form-control-check label { - flex: 1; -} - -.form-control-check input { - flex: 2; - height: 20px; -} - -.posts-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 20px; - justify-content: space-between; - align-items: flex-start; -} - -.posts-list li { - padding: 20px; - border: 1px #333 solid; - border-radius: 5px; -} - -.posts-list li h3 { - margin-bottom: 5px; -} - -.error { - color: darkred; -} - -.auth-container { - max-width: 600px; - margin: auto; -} - -.auth-container h1 { - text-align: center; -} - -.auth-container .pageHeader { - display: block; -} - -.auth-container fieldset { - padding: 15px; - border-radius: 5px; -} - -.auth-container fieldset label { - margin-right: 10px; -} +p, ul{ + margin: 0; +} \ No newline at end of file From af0e739104e8202db90e3ab54bb4946f28aaf1ee Mon Sep 17 00:00:00 2001 From: Kasia Laniecka Date: Wed, 23 Feb 2022 13:35:01 +0100 Subject: [PATCH 4/4] Tailwind styling Co-Authored-By: Magda <55574979+Madeele@users.noreply.github.com> --- lesson-04/remix-site/.gitignore | 1 + lesson-04/remix-site/app/root.jsx | 17 +- .../remix-site/app/routes/recipes/index.jsx | 36 +- lesson-04/remix-site/app/styles/tailwind.css | 13 + lesson-04/remix-site/package-lock.json | 6259 ++--------------- lesson-04/remix-site/package.json | 54 +- lesson-04/remix-site/tailwind.config.js | 8 + 7 files changed, 749 insertions(+), 5639 deletions(-) create mode 100644 lesson-04/remix-site/app/styles/tailwind.css create mode 100644 lesson-04/remix-site/tailwind.config.js diff --git a/lesson-04/remix-site/.gitignore b/lesson-04/remix-site/.gitignore index 3f7bf98d..a825da4e 100644 --- a/lesson-04/remix-site/.gitignore +++ b/lesson-04/remix-site/.gitignore @@ -4,3 +4,4 @@ node_modules /build /public/build .env +/app/tailwind.css diff --git a/lesson-04/remix-site/app/root.jsx b/lesson-04/remix-site/app/root.jsx index fae7c273..47b5b47b 100644 --- a/lesson-04/remix-site/app/root.jsx +++ b/lesson-04/remix-site/app/root.jsx @@ -1,12 +1,9 @@ import { Link, Outlet, LiveReload, Links, Meta, Scripts } from "remix"; -import globalStylesUrl from "~/styles/global.css"; +import styles from "./tailwind.css"; -export const links = () => [ - { - rel: "stylesheet", - href: globalStylesUrl, - }, -]; +export function links() { + return [{ rel: "stylesheet", href: styles }]; +} export const meta = () => ({ description: "A recipe blog", @@ -33,7 +30,7 @@ function Document({ children, title }) { {title} - + {children} {process.env.NODE_ENV === "development" ? : null} @@ -45,8 +42,8 @@ function Document({ children, title }) { function Layout({ children }) { return ( <> -