react-wind-compass/styles.css

Compass component for displaying wind direction

:root {
  --accent-color: #be4d45;
  --dark-color: #2a3539;
}

.compass {
  width: 100%;
  height: 100%;
  min-width: 200px;
  min-height: 200px;
  position: relative;
  aspect-ratio: 1;
}

.compass__windrose {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--dark-color);
  position: relative;
  transition: transform 0.3s ease;
}

.compass__mark--direction-h,
.compass__mark--direction-v,
.compass__mark--direction-d1,
.compass__mark--direction-d2 {
  width: 4px;
  height: 100%;
  left: calc(50% - 2px);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;

  &:before,
  &:after {
    content: "";
    position: absolute;
    width: auto;
    height: auto;
    font-size: clamp(1.2rem, 80%, 3rem);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-weight: 100;
    font-family: "Roboto Slab", serif;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.35);
    font-weight: 600;
  }

  &:before {
    top: 5.5%;
  }

  &:after {
    bottom: 5.5%;
    transform: rotate(180deg);
  }
}

.compass__mark--direction-h {
  &:before {
    content: "N";
  }

  &:after {
    content: "S";
  }
}

.compass__mark--direction-d1 {
  transform: rotate(45deg);
  &:before {
    content: "NE";
  }

  &:after {
    content: "SW";
  }
}

.compass__mark--direction-d2 {
  transform: rotate(-45deg);
  &:before {
    content: "NW";
  }

  &:after {
    content: "SE";
  }
}

.compass__mark--direction-v {
  transform: rotate(90deg);

  &:before {
    content: "E";
  }

  &:after {
    content: "W";
  }
}

.compass__arrow-container {
  width: 68%;
  height: 80%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.compass__arrow {
  position: relative;
  width: 71%;
  height: 71%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* // Top triangle (pointing north) */
  &:before {
    content: "";
    position: absolute;
    top: 0;
    clip-path: polygon(50% 0%, 10% 100%, 90% 100%);
    background-color: var(--accent-color);
    width: 25%;
    height: 50%;
  }

  /* // Bottom triangle (pointing south) */
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    transform: rotate(180deg);
    clip-path: polygon(50% 0%, 10% 100%, 90% 100%);
    background-color: #fff;
    width: 25%;
    height: 50%;
  }
}