Recipe page, no media query , no flex or grid!

What are you most proud of, and what would you do differently next time?

In this challenge I learned a lot of new stuffs about CSS. Especially usage of min(), max() and clamp() functions.

Of course, this challenge can be done by using Flex layout, Grid or media query, but I personally preferred not using them.

The other important thing I learned during this project is called nested or scoped styling. So it helps to improve readability, maintainability, and modularity of styles.

ol,ul{
    padding-left: var(--space-300);

    li{
        padding-left: var(--space-150);
        margin-bottom: var(--space-150);
        line-height: 1.5;
        
    }

    li::marker{
        color: var(--Rose-800);
        font-weight: var(--font-weight-semibold);
    }
    
}

What challenges did you encounter, and how did you overcome them?

The thing I found it difficult is making page, border-radius, padding, and margin properties responsive.

And as always image styling. At the beginning I CSS properties on image to add padding and border radius. Unfortunately, they do not go well together.

So as said : "Set the padding on "wrap" not on the image (setting paddings on images does not make much sense :)), that should fix your problem."

You can also find example of min(), max() functions usage, see below:

  <div class="image-container">
    <img class="card-image" src="/recipe-page-main/assets/images/image-omelette.jpeg" alt="omelette photo">
  </div>

.image-container{
    margin-bottom: 0;
    /* Responsive padding */
    padding-inline:max(0rem,min(2rem, 50vw - var(--max-width) / 2));
    padding-top: max(0rem,min(2rem, 50vw - var(--max-width) / 2));
}

.card-image{

    /* Responsive border-radius from 0px to 12px */
    /* border-radius: clamp(0px, calc((100vw - 375px) / 20), 12px); */

    border-radius:max(0rem,min(12px, 50vw - var(--max-width) / 2));

    /* border-radius: var(--border-radius-100); */
}

What specific areas of your project would you like help with?

I am open for any advice, idea to improve this project