La Ferme du Bois Gasnier

La Ferme du Bois Gasnier is a small business website for a pork producer in France.

Built with

Astro | HTML | SCSS | JavaScript

The Brief

Build a simple one-page informative website, with a contact form and photo gallery. Photos and text copy supplied by the client.

Method

Take a licensed template that I own and rebuild from scratch, optimising for web core vital scores. I removed almost all animations and built some features (catalog banner and product cards) with the help of AI.

Astro’s built-in tools allowed me to generate WEBp and JPG images easily and at varying screen sizes, for compatibility across browsers and speed considerations.

Learning Opportunities

Viewing this website on an old iPad showed me just how far we have come along with web standards in such a short period of time. Versions of iOS Safari before 14.5 do not allow the gap CSS property to be used within Flexbox or Grid layouts.

/* The below SCSS code does not work in iOS Safari <14.5 */
.nav-items {
  ul {
    display: flex;
    gap: 4rem;
    list-style-type: none;
    li {
      position: relative;
      cursor: pointer;
      padding: 2rem 0;
    }
  }
}

 

/* Margin used to provide the gap between nav items */
.nav-items {
  ul {
    display: flex;
    list-style-type: none;
    li {
      position: relative;
      cursor: pointer;
      padding: 2rem 0;
      margin-right: 4rem;
      &:last-child {
        margin-right: 0; /* The last nav item does not need a right margin */
      }
    }
  }
}

In these situations we could normally use the @supports tag to check if the browser is capable of using specific CSS properties, and supply a fallback if not. However, the code below does not work due to the particular contraints here where gap and flex are both supported, but not where gap is inside the Flexbox.

/* Does not work for gap inside Flexbox */
@supports (display: flex) and (gap: 4rem) {
  .nav-items ul {
    margin-right: 0;
    gap: 4rem;
    li {
      margin-right: 0;
    }
  }
}