From 0b08948a6a29b87e51b2ed8963be5960c9b3d688 Mon Sep 17 00:00:00 2001 From: Hadeed Ahmad Date: Wed, 3 Jul 2024 00:15:21 +0500 Subject: [PATCH] Add some css --- index.html | 175 ++++++++++++++++++++++++++------------------- package-lock.json | 72 +++++++++++++++++++ package.json | 2 + styles.css | 64 +++++++++++++++++ tailwind.config.js | 17 ++++- 5 files changed, 256 insertions(+), 74 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index f313fa3..067fdf9 100644 --- a/index.html +++ b/index.html @@ -12,97 +12,126 @@ /> Recipe page + - -

Simple Omelette Recipe

+ +
+

Simple Omelette Recipe

-

- An easy and quick dish, perfect for any meal. This classic omelette - combines beaten eggs cooked to perfection, optionally filled with your - choice of cheese, vegetables, or meats. -

+

+ An easy and quick dish, perfect for any meal. This classic omelette + combines beaten eggs cooked to perfection, optionally filled with your + choice of cheese, vegetables, or meats. +

-
-

Preparation time

+
+

Preparation time

+ +
    +
  • +

    Total: Approximately 10 minutes

    +
    • +
  • +

    Preparation: 5 minutes

    +
    • +
  • +

    Cooking: 5 minutes

    +
    • +
+
+ +

Ingredients

    -
  • Total: Approximately 10 minutes
    • -
  • Preparation: 5 minutes
    • -
  • Cooking: 5 minutes
    • +

  • 2-3 large eggs

    • +

  • Salt, to taste

    • +

  • Pepper, to taste

    • +

  • 1 tablespoon of butter or oil

    • +
  • +

    + Optional fillings: cheese, diced vegetables, cooked meats, herbs +

    +
-
-

Ingredients

+

Instructions

- +
    +
  1. +

    + Beat the eggs: In a bowl, beat the eggs with a + pinch of salt and pepper until they are well mixed. You can add a + tablespoon of water or milk for a fluffier texture. +

    +
    2. -

    Instructions

    +
  2. +

    + Heat the pan: Place a non-stick frying pan over + medium heat and add butter or oil. +

    +
    3. -
      -
    1. - Beat the eggs: In a bowl, beat the eggs with a pinch of salt and pepper - until they are well mixed. You can add a tablespoon of water or milk for - a fluffier texture. -
      2. +
    2. +

      + Cook the omelette: Once the butter is melted and + bubbling, pour in the eggs. Tilt the pan to ensure the eggs evenly + coat the surface. +

      +
      3. -
    3. - Heat the pan: Place a non-stick frying pan over medium heat and add - butter or oil. -
      4. +
    4. +

      + Add fillings (optional): When the eggs begin to set + at the edges but are still slightly runny in the middle, sprinkle + your chosen fillings over one half of the omelette. +

      +
      5. -
    5. - Cook the omelette: Once the butter is melted and bubbling, pour in the - eggs. Tilt the pan to ensure the eggs evenly coat the surface. -
      6. +
    6. +

      + Fold and serve: As the omelette continues to cook, + carefully lift one edge and fold it over the fillings. Let it cook + for another minute, then slide it onto a plate. +

      +
      7. -
    7. - Add fillings (optional): When the eggs begin to set at the edges but are - still slightly runny in the middle, sprinkle your chosen fillings over - one half of the omelette. -
      8. +
    8. +

      + Enjoy: Serve hot, with additional salt and pepper + if needed. +

      +
      9. +
    -
  3. - Fold and serve: As the omelette continues to cook, carefully lift one - edge and fold it over the fillings. Let it cook for another minute, then - slide it onto a plate. -
    4. +

    Nutrition

    -
  4. Enjoy: Serve hot, with additional salt and pepper if needed.
    5. -
+

+ The table below shows nutritional values per serving without the + additional fillings. +

-

Nutrition

+ + + + + -

- The table below shows nutritional values per serving without the - additional fillings. -

+ + + + -
Calories277kcal
Carbs0g
- - - - + + + + - - - - - - - - - - - - - - -
Calories277kcal
Protein20g
Carbs0g
Protein20g
Fat22g
+ + Fat + 22g + + +
diff --git a/package-lock.json b/package-lock.json index 8064077..f82897f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "autoprefixer": "^10.4.19", "postcss": "^8.4.39", "prettier": "^3.3.2", + "prettier-plugin-css-order": "^2.1.2", "prettier-plugin-tailwindcss": "^0.6.5", "tailwindcss": "^3.4.4", "vite": "^5.3.2" @@ -1050,6 +1051,19 @@ "node": ">= 8" } }, + "node_modules/css-declaration-sorter": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz", + "integrity": "sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==", + "dev": true, + "license": "ISC", + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.0.9" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -1717,6 +1731,19 @@ "postcss": "^8.4.21" } }, + "node_modules/postcss-less": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-6.0.0.tgz", + "integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "postcss": "^8.3.5" + } + }, "node_modules/postcss-load-config": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", @@ -1786,6 +1813,33 @@ "postcss": "^8.2.14" } }, + "node_modules/postcss-scss": { + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz", + "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss-scss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "engines": { + "node": ">=12.0" + }, + "peerDependencies": { + "postcss": "^8.4.29" + } + }, "node_modules/postcss-selector-parser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz", @@ -1823,6 +1877,24 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-plugin-css-order": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/prettier-plugin-css-order/-/prettier-plugin-css-order-2.1.2.tgz", + "integrity": "sha512-vomxPjHI6pOMYcBuouSJHxxQClJXaUpU9rsV9IAO2wrSTZILRRlrxAAR8t9UF6wtczLkLfNRFUwM+ZbGXOONUA==", + "dev": true, + "license": "ISC", + "dependencies": { + "css-declaration-sorter": "^7.1.1", + "postcss-less": "^6.0.0", + "postcss-scss": "^4.0.9" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "prettier": "3.x" + } + }, "node_modules/prettier-plugin-tailwindcss": { "version": "0.6.5", "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz", diff --git a/package.json b/package.json index 42a64ed..7f3364c 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,14 @@ "autoprefixer": "^10.4.19", "postcss": "^8.4.39", "prettier": "^3.3.2", + "prettier-plugin-css-order": "^2.1.2", "prettier-plugin-tailwindcss": "^0.6.5", "tailwindcss": "^3.4.4", "vite": "^5.3.2" }, "prettier": { "plugins": [ + "prettier-plugin-css-order", "prettier-plugin-tailwindcss" ] }, diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..70614b3 --- /dev/null +++ b/styles.css @@ -0,0 +1,64 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + @font-face { + font-weight: 100 900; + src: url("/fonts/Outfit-VariableFont_wght.ttf") format("truetype"); + font-family: "Outfit"; + } + + @font-face { + font-weight: 100 900; + src: url("/fonts/YoungSerif-Regular.ttf") format("truetype"); + font-family: "Young Serif"; + } + + h1, + h2 { + font-weight: 400; + line-height: 100%; + font-family: theme("fontFamily.serif"); + } + + h1 { + color: theme("colors.dark-charcoal"); + font-size: 2.5rem; + } + + h2 { + color: theme("colors.brandy-red"); + font-size: 1.75rem; + } + + h3 { + color: theme("colors.dark-raspberry"); + font-weight: 600; + font-size: 1.25rem; + line-height: 100%; + } + + p { + color: theme("colors.wenge-brown"); + font-weight: 400; + font-size: 1rem; + line-height: 150%; + + > strong { + font-weight: 700; + } + } + + td { + color: theme("colors.wenge-brown"); + font-weight: 400; + font-size: 1rem; + line-height: 150%; + + &:last-child { + color: theme("colors.brandy-red"); + font-weight: 700; + } + } +} diff --git a/tailwind.config.js b/tailwind.config.js index d6cfed4..4da7d37 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,19 @@ export default { content: ["index.html"], - theme: {}, + theme: { + colors: { + "brandy-red": "#854632", + "dark-charcoal": "#312E2C", + "dark-raspberry": "#7A284E", + "wenge-brown": "#5F564D", + "white-coffee": "#E3DDD7", + eggshell: "#F3E5D7", + snow: "#FFF7FB", + white: "#FFFFFF", + }, + fontFamily: { + sans: ["Outfit", "sans-serif"], + serif: ["Young\\ Serif", "serif"], + }, + }, };