@import '_variables.css';

/* Blog Post List Styles */
.year {
  margin-left: 0;
}

.month {
  margin-left: 20px; 
}

.posts-list {
  margin-left: 40px; 
}

.post-preview {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
  transition: background-color 0.3s;

  &:hover {
    background-color: var(--highlight-background);
  }

  a {
    color: var(--special);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      color: var(--link-underline);
    }
  }

  h4 {
    margin-bottom: 5px;
  }

  p {
    color: var(--meta-color);
    font-size: 0.9em;
  }
}

/* Media Queries for Responsiveness */
@media screen and (max-width: 600px) {
  .post-preview {
    padding: 10px;
  }
}

@media (max-width: 37.5em) { 
  .projects-grid, 
  .posts-list {
    grid-template-columns: 1fr; 
  }
}