Pico CSS Personal Theme Style Preferences

pico-theme-tweaks.css

/*Fix oversize fonts */
@media (min-width: 576px) {
  :root,
  :host {
    --pico-font-size: 97%;
  }
}
@media (min-width: 768px) {
  :root,
  :host {
    --pico-font-size: 100%;
  }
}
@media (min-width: 1024px) {
  :root,
  :host {
    --pico-font-size: 100%;
  }
}
@media (min-width: 1280px) {
  :root,
  :host {
    --pico-font-size: 100%;
  }
}
@media (min-width: 1536px) {
  :root,
  :host {
    --pico-font-size: 100%;
  }
}

h1 {
  --pico-font-size: 1.4rem;
}

h2 {
  --pico-font-size: 1.3rem;
}

h3 {
  --pico-font-size: 1.2rem;
}

h4 {
  --pico-font-size: 1.15rem;
}

h5 {
  --pico-font-size: 1.1rem;
}

h6 {
  --pico-font-size: 1rem;
}

/* Add Simple Grid Layouts */
.grid-2 {
   grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
   grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
   grid-template-columns: repeat(4, 1fr);
}
.grid-5 {
   grid-template-columns: repeat(5, 1fr);
}
.grid-6 {
   grid-template-columns: repeat(6, 1fr);
}
.grid-8 {
   grid-template-columns: repeat(8, 1fr);
}

@media only screen and (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-8 {
     grid-template-columns: repeat(1, 1fr);
  }
}

/* Utility Classes to Show/Hide on Breakpoints */
@media screen and (max-width:728px){
  .hide-md {
    display:none;
  }
}

@media screen and (min-width:728px){
  .show-md {
    display:block;
  }
}