Contents

@use "../variables";

.post-card-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(variables.$card-min-height, 1fr);

  justify-items: center;

  height: fit-content;

  @media (max-width: 1100px) and (min-width: 800px) {
    grid-template-columns: 1fr 1fr;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  @media (max-width: 800px) and (min-width: 600px) {
    grid-template-columns: 1fr 1fr;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  @media (max-width: 600px) {
    grid-template-columns: 1fr;
  }

}

.post-card {
  max-width: variables.$card-max-width;
  

  vertical-align: middle;

  border: 3px solid transparent;
  border-image: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)) 1;

  transition: 0.4s ease;
  &:hover {
    box-shadow: 0 0 10px 0 var(--border-primary);
    border-image: linear-gradient(45deg, var(--accent-secondary), var(--accent-primary)) 1;
  }

  .post-card--link {
    vertical-align: top;
    text-decoration: none;
    color: var(--text-primary);
  }

  .post-card--flex {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    padding: 1rem;
  }

  .post-card--image {
    vertical-align: top;
  }

  .post-card--content {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
  }

  .post-card--title {
    font-size: 1.5rem;
    margin-block-end: 0rem;
  }

  .post-card--subtitle {
    font-size: 0.95em;
    margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
    flex-grow: 1;
  }

  .post-card--date {
    opacity: 0.7;
    font-size: 0.8em;
    margin-block-end: 0.5rem;
    vertical-align: bottom;
  }
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
jekyll-theme-tallneck-0.3.1	_sass/tallneck/components/post-card.scss
jekyll-theme-tallneck-0.3.0	_sass/tallneck/components/post-card.scss
jekyll-theme-tallneck-0.2.11	_sass/tallneck/components/post-card.scss