Sección principal del blog y blogposts

Clase 13 de 35 • Curso de Desarrollo Web con Svelte y Sapper

Ernesto Cruz Bravo

student•

Estilos de Post.svelte

.Post-item{
        color: #191a22;
        position: relative;
    }
    .Post-content{
        font-size: 16px;
        font-weight: 300;
        display: grid;
        justify-content: space-between;
        grid-gap:5px;
        grid-template-columns: 1fr ;   
     }
     .Post-title{
         font-size: 20px;
         margin: 0;
         padding: 0;
     }
     .Post-title p{
         color: #333;
         font-size: 13px;
         font-weight: 300;
         margin-top: 5px;
         padding: 0;
     }

     a{
         text-decoration: none;
         color: #22215b
     }
     .Post-desc p{
         color:#333;
         font-size: 16px;
         line-height: 28px;
         margin: 0 auto;
         word-break: break-word;
     }
     .dot{
      font-weight: 700;
     }```

Luis Alejandro Vera Hernandez

student•

Gracias crack

Gonzalo Pimentel

student•

Que buena clase!

Eric Gomez

student•

Post.svelte

<script>
  export let post; 
</script>

<div class="Post-item">
  <div class="Post-content">
    <div class="Post-head">
      <div class="Post-title">
        <h3>
          <a rel="prefetch" href="blog/{post.slug}">{post.title}</a>
        </h3>
        <p>
          <time datetime={post.createdAt}>{post.createdAt}</time>
          <span class="dot">.</span>
          <span>5 min</span>
        </p>
      </div>
      <div class="Post-tags" />
      <div class="Post-desc">
        <p>{post.desc}</p>
      </div>
    </div>
  </div>
</div>

<style>
  .Post-item {
    color: #191a22;
    position: relative;
  }
  .Post-content {
    font-size: 16px;
    font-weight: 300;
    display: grid;
    justify-content: space-between;
    grid-gap: 5px;
    grid-template-columns: 1fr;
  }
  .Post-title {
    font-size: 20px;
    margin: 0;
    padding: 0;
  }
  .Post-title p {
    color: #333;
    font-size: 13px;
    font-weight: 300;
    margin-top: 5px;
    padding: 0;
  }

  a {
    text-decoration: none;
    color: #22215b;
  }
  .Post-desc p {
    color: #333;
    font-size: 16px;
    line-height: 28px;
    margin: 0 auto;
    word-break: break-word;
  }
  .dot {
    font-weight: 700;
  }
</style>

Andrés Gómez

student•

¿Ya se unieron a la comunidad de Svelte?

Julian David Alzate Cuervo

student•

gracias por el dato

Daniel González

student•

Oscar tiene un typo en la fecha de los posts, por eso le aparece como "undefined". Escribió "createdAT" y no "createdAt" en la siguiente linea del archivo Post.svelte:

<time datetime="{post.createdAt}">{post.createdAt}</time>

Octa Luna Vargas

student•

Disculpen, estoy teniendo un error al posicionar el contenido de mi blog,

La parte de mi titulo de mi blog esta a la izquierda pero el contenido se va a la derecha con el Sidebar... Gracias