WordPress Headless + Astro | Recursos de la clase 04

Angela Sofía Osorio

Tiempo de lectura 2 minutes

Bienvenidos a una nueva clase del curso de WordPress Headlesss + Astro con wpWraphQL (Wastro para los amigos 🦝). El día de hoy veremos como agregaregar varios bloques dentro de un artículo para estilar diferentes casos que se nos pueden presentar (Los más comunes).

Recuerda que este curso esta disponible para miembros del canal con nivel Sofiers (Videos VIP)
en mi canal de Youtube.

Estilos para artículo

Esta es mi configuración base para los erstilos del artículo:

<div class="progress"></div>

HTML

<style  is:global>
   .progress {
    height: 0.3rem;
    width: 100%;
    background: rgb(125, 7, 199);
    position: fixed;
    top: 0;
    left: 0;
    transform-origin: 0 50%;
    animation: progressStatus auto linear;
    animation-timeline: scroll(root);
  }
  .dark {
    .progress {
      background: rgb(3, 38, 167);
    }
  }

  @keyframes progressStatus {
    0% {
      transform: scaleX(0);
    }
    100% {
      transform: scaleX(1);
    }
  }

  #post {

     h2 {
      font-weight: bold;
      font-size: 2rem;
    }
    h3{
      font-weight: bold;
      font-size: 1.8rem;
    }
    h4{
      font-weight: bold;
      font-size: 1.5rem;
    }
    h5{
      font-weight: bold;
      font-size: 1.3rem;
    }
    h6{
      font-weight: bold;
      font-size: 1.2rem;
    }
    a{
      word-wrap: break-word;
    }
    margin-top: 0;
    figure {
      width: 100%;
      overflow-x: auto;
    }
    img{
      width: 100%;
      height: auto;
      border-radius: 0.5rem;
      margin:0 auto;
    }
    code {
      font-size: 1.1rem;
      background-color: #1f1f1f;
      padding: 0.1rem 0.3rem;
      color: lime;
      border-radius: 0.3rem;
      span{
        text-wrap: auto;
      }
    }
    pre{
      padding: 1rem;
    }
    [data-code-block-pro-font-family="Code-Pro-JetBrains-Mono"]{
      span:first-child{
        border-radius: 9px  9px 0 0;
      }
      span:last-child{
        border-radius:0 0 9px  9px ;
      }
    }

    table {
      width: 100%;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-collapse: collapse;
    }

    tr:nth-of-type(odd) {
      background: rgba(0, 0, 0, 0.05);
    }

    table thead th,
    table tfoot th {
      font-size: 1.8rem;
      font-weight: bold;
      background: rgba(0, 0, 0, 0.1);
    }
    table caption {
      padding: 1rem;
    }
    table th,
    table td {
      font-size: 1.5rem;
      font-weight: 700;
      padding: 1rem;
      border: 1px solid lightgrey;
    }
  }
</style>

CSS