liser/src/modules/text-transform.css

functional css help to optimizing design work and building responsive websites

.ttc {
  text-transform: capitalize;
}
.ttl {
  text-transform: lowercase;
}
.ttu {
  text-transform: uppercase;
}
.ttn {
  text-transform: none;
}

@media screen and (min-width: 30em) {
  .ttc-ns {
    text-transform: capitalize;
  }
  .ttl-ns {
    text-transform: lowercase;
  }
  .ttu-ns {
    text-transform: uppercase;
  }
  .ttn-ns {
    text-transform: none;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .ttc-m {
    text-transform: capitalize;
  }
  .ttl-m {
    text-transform: lowercase;
  }
  .ttu-m {
    text-transform: uppercase;
  }
  .ttn-m {
    text-transform: none;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .ttc-ml {
    text-transform: capitalize;
  }
  .ttl-ml {
    text-transform: lowercase;
  }
  .ttu-ml {
    text-transform: uppercase;
  }
  .ttn-ml {
    text-transform: none;
  }
}

@media screen and (min-width: 60em) {
  .ttc-l {
    text-transform: capitalize;
  }
  .ttl-l {
    text-transform: lowercase;
  }
  .ttu-l {
    text-transform: uppercase;
  }
  .ttn-l {
    text-transform: none;
  }
}