.posts { display: grid; grid-gap: 1rem; grid-template-columns: 1fr 1fr; } @media(max-width: 800px) { .posts { grid-template-columns: 1fr; } } .post-card { display: flex; flex-direction: column; gap: 1rem; padding: 8px; background-color: var(--bg-color-secondary); box-shadow: 2px 2px 4px var(--shadow-color); justify-content: space-between; transition: background-color 0.3s; } .post-card h2 { margin-top: 0; margin-bottom: 0rem; } .post-card .title-text { margin-top: 1rem; } .post-card .excerpt { flex-grow: 1; } .post-metadata { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 1rem 2rem; } .post-metadata .tag, .post-metadata .serie { border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--bg-color-secondary); padding: 0 0.25rem; transition: background-color 0.3s, border-color 0.3s; white-space: nowrap; } .post-metadata svg.icon { margin-right: 0.25rem; } .pagination { margin-top: 1rem; } .pagination ul { list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: space-between; max-width: 25rem; margin-left: auto; margin-right: auto; } .pagination li { display: inline-block; flex-grow: 1; max-width: 3rem; } .pagination li a, .pagination li span { display: block; padding: 10px 0px; text-align: center; border: 1px solid var(--border-color); transition: color 0.3s, box-shadow 0.3s; text-decoration: none; font-weight: bold; color: var(--text-color); } .pagination li a { cursor: pointer; background-color: var(--bg-color-secondary); box-shadow: 0 2px 4px var(--shadow-color); } .pagination li span { background-color: var(--bg-color); } .pagination li:hover a { color: var(--link-color-hover); text-decoration: none; box-shadow: 0 2px 4px 2px var(--shadow-color); } .pagination li.active a { color: var(--link-color); }