### Version 1.0
```css
/* ALL POSTS */
/* Style for the 'All Posts' page with a compact view */
/* The main container for this page has the class .all-posts */
/* General table styling within .all-posts */
.all-posts .el-table table {
border: none; /* Remove default table borders */
width: 100%; /* Table occupies all available width */
border-collapse: collapse; /* Standard table behavior */
/* table-layout: fixed; Removed as grid on TR handles layout */
}
/* Hide the table header (Date, Post, Lang, Hashtags) */
.all-posts .el-table table thead {
display: none;
}
/* Style for each table row (each post entry) using CSS Grid */
.all-posts .el-table table tbody tr {
display: grid;
grid-template-columns: auto 1fr; /* Column 1 for Date/Lang (auto width), Column 2 for Title/Tags (takes rest) */
grid-template-rows: auto auto; /* Row 1 for Date/Title, Row 2 for Lang/Tags */
gap: 0.1em 0.8em; /* Small gap between rows, larger between columns (row-gap column-gap) */
align-items: baseline; /* Align items on their baseline */
margin-bottom: 1em; /* Space between post entries */
padding-bottom: 1em; /* Internal space before the bottom border */
border-bottom: 1px solid; /* Separator line - color can be customized later */
}
/* Remove border and margin for the last post entry */
.all-posts .el-table table tbody tr:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
/* Base style for all cells (td) within these rows */
.all-posts .el-table table tbody tr td {
border: none; /* Remove default cell borders */
padding: 0; /* Padding is handled by grid gap */
margin-right: 0; /* Not needed with grid */
}
/* --- Grid Layout --- */
/* Date (td:nth-child(1)) */
.all-posts .el-table table tbody tr td:nth-child(1) {
grid-column: 1 / 2; /* First column */
grid-row: 1 / 2; /* First row */
font-size: 0.85em;
white-space: nowrap; /* Prevent date from wrapping */
}
/* Language (td:nth-child(3)) */
.all-posts .el-table table tbody tr td:nth-child(3) {
grid-column: 1 / 2; /* First column */
grid-row: 2 / 3; /* Second row (under Date) */
font-size: 0.8em; /* Slightly smaller */
text-transform: uppercase; /* Optional: makes lang code stand out */
}
/* Post Title (td:nth-child(2)) */
.all-posts .el-table table tbody tr td:nth-child(2) {
grid-column: 2 / 3; /* Second column */
grid-row: 1 / 2; /* First row */
font-size: 1em;
font-weight: bold; /* Make title stand out */
}
.all-posts .el-table table tbody tr td:nth-child(2) a {
text-decoration: none;
/* Color will be inherited or set later */
}
.all-posts .el-table table tbody tr td:nth-child(2) a:hover {
text-decoration: underline;
}
/* Hashtags (td:nth-child(4)) */
.all-posts .el-table table tbody tr td:nth-child(4) {
grid-column: 2 / 3; /* Second column (under Title) */
grid-row: 2 / 3; /* Second row */
justify-self: end; /* Aligns the TD cell itself to the right of its grid area */
font-size: 0.8em;
width: 100%; /* Ensure the TD takes full width of its grid area to allow internal right alignment */
}
/* Style for the hashtag container (ul) */
.all-posts .el-table table tbody tr td:nth-child(4) ul {
list-style-type: none; /* Remove bullet points */
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-end; /* Aligns tags to the right within the UL */
}
/* Style for individual hashtags (li) */
.all-posts .el-table table tbody tr td:nth-child(4) ul li {
margin-left: 0.6em; /* Space before each tag (except the first, handled below) */
margin-bottom: 0.3em; /* Space if tags wrap */
}
.all-posts .el-table table tbody tr td:nth-child(4) ul li:first-child {
margin-left: 0; /* No left margin for the first tag in the list */
}
.all-posts .el-table table tbody tr td:nth-child(4) ul li a.tag {
text-decoration: none;
/* Padding/border for tags can be added here later for styling */
/* Example: padding: 0.1em 0.4em; border-radius: 3px; */
}
```