Fence panels

by Laura Kishimoto

HTML

<section class="wall"></section>

SCSS

$colour-sky: #b5dae8;
$colour-wood: #555;
$colour-grass: #527a2d;
$colour-brick: #7d1f1f;
$wall-length: 82.35em; // 823.5cm
$panel-height: 6em; // 60cm
$panel-width: 18em; // 180cm

html {
  box-sizing: border-box;
  font-size: 1.2vw;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background-color: $colour-sky;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: 5rem solid $colour-grass;
}

.bricks {  background-color: silver;
  background-image: linear-gradient(335deg, $colour-brick 1.15em, transparent 1.15em),
    linear-gradient(155deg, lighten($colour-brick, 5%) 1.15em, transparent 1.15em),
    linear-gradient(335deg, $colour-brick 1.15em, transparent 1.15em),
    linear-gradient(155deg, lighten($colour-brick, 5%)  1.15em, transparent 1.15em);
  background-size: 2.9em 2.9em;
  background-position: 0 -0.1em, 0.2em 1.55em, 1.45em 1.35em, 1.6em 0.1em;
}

.fence {
  background-image:
    linear-gradient(to left, $colour-sky 0.5px, transparent 0.5px), // gap
    linear-gradient($colour-wood 75%, transparent 75%), // slats
    linear-gradient(to left, 
      darken($colour-wood, 7%) 3%, transparent 3%,
      transparent 24%, darken($colour-wood, 7%) 24%, darken($colour-wood, 7%) 27%, transparent 27%,
      transparent 48.5%, darken($colour-wood, 7%) 48.5%, darken($colour-wood, 7%) 51.5%, transparent 51.5%,
      transparent 73%, darken($colour-wood, 7%) 73%, darken($colour-wood, 7%) 76%, transparent 76%,
      transparent 97%, darken($colour-wood, 7%) 97%, darken($colour-wood, 7%) 100%, transparent 100%
    ), // supports
  ;
  background-size: $panel-width $panel-height, $panel-width $panel-height/10, $panel-width $panel-height;
  background-position: right, top, right;
}

.wall {
  display: flex;
  flex-direction: column;
  
  &::before {
    content: '';
    @extend .fence;
    height: $panel-height;
    width: $wall-length;
  }
  
  &::after {
    content: '';
  ...