### Version 1.1
```css
/* RECENT POSTS */
/* Stile per i post recenti nel blog Obsidian Publish */
/* Selettore generale che ora usa lo span specifico */
.recent-posts--hidden .el-table table {
border: none; /* Rimuove i bordi predefiniti della tabella */
width: 100%; /* Fa sì che la tabella occupi tutta la larghezza disponibile */
border-collapse: collapse; /* Comportamento standard per tabelle */
}
/* Nasconde l'intestazione della tabella (Date, Post, Lang, Description, Cover, Hashtags) */
.recent-posts--hidden .el-table table thead {
display: none;
}
/* Stile per ogni riga della tabella (ogni post) */
.recent-posts--hidden .el-table table tbody tr {
display: flex; /* Usa Flexbox per riordinare facilmente le celle */
flex-wrap: wrap; /* Permette agli elementi di andare a capo */
margin-bottom: 2em; /* Spazio tra un post e l'altro */
padding-bottom: 1.5em; /* Spazio interno prima del bordo inferiore */
border-bottom: 1px solid; /* Linea separatrice tra i post - PUOI PERSONALIZZARE IL COLORE QUI, es. border-bottom: 1px solid #ccc; */
}
/* Rimuove il bordo e il margine per l'ultimo post della lista */
.recent-posts--hidden .el-table table tbody tr:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Stile base per tutte le celle (td) dentro queste righe */
.recent-posts--hidden .el-table table tbody tr td {
border: none; /* Rimuove i bordi predefiniti delle celle */
padding: 0; /* Rimuove il padding predefinito delle celle */
margin-right: 0.5em; /* Aggiunge un piccolo spazio a destra per gli elementi sulla stessa linea (Lingua, Data) */
/* La larghezza sarà gestita dalle proprietà flex o da override specifici */
}
/* Rimuove il margine destro per l'ultimo elemento flessibile su una riga se necessario */
.recent-posts--hidden .el-table table tbody tr td:last-of-type {
margin-right: 0;
}
/* --- Stile per il Titolo del Post --- */
/* La cella del titolo è la seconda (td:nth-child(2)) nell'HTML originale */
.recent-posts--hidden .el-table table tbody tr td:nth-child(2) {
order: 1; /* Appare per primo */
width: 100%; /* Occupa tutta la larghezza, mandando a capo gli elementi successivi */
margin-bottom: 0.25em; /* Spazio ridotto tra il titolo e la riga meta sottostante */
margin-right: 0; /* Assicura che il titolo non abbia margine destro extra */
}
.recent-posts--hidden .el-table table tbody tr td:nth-child(2) a {
font-size: 1.4em; /* Simile a un H3, puoi aggiustarlo */
font-weight: bold;
text-decoration: none; /* Rimuove la sottolineatura standard del link */
display: block; /* Fa sì che il link si comporti come un blocco */
}
.recent-posts--hidden .el-table table tbody tr td:nth-child(2) a:hover {
text-decoration: underline; /* Aggiunge sottolineatura al passaggio del mouse */
}
/* --- Stile per la riga Meta (Lingua - Data) --- */
/* Lingua e Data ora sono su una riga sotto il titolo */
/* Lingua (la terza cella (td:nth-child(3)) nell'HTML originale) */
.recent-posts--hidden .el-table table tbody tr td:nth-child(3) {
order: 2; /* Appare dopo il titolo */
font-size: 0.9em;
width: auto; /* Permette a lingua e data di stare sulla stessa riga se c'è spazio */
margin-bottom: 0.75em; /* Spazio dopo la riga Lingua/Data prima della Cover */
}
/* Data (la prima cella (td:nth-child(1)) nell'HTML originale) */
.recent-posts--hidden .el-table table tbody tr td:nth-child(1) {
order: 3; /* Appare dopo la lingua */
font-size: 0.9em;
width: auto; /* Permette a lingua e data di stare sulla stessa riga se c'è spazio */
margin-bottom: 0.75em; /* Spazio dopo la riga Lingua/Data prima della Cover */
}
/* --- Stile per l'Immagine di Copertina --- */
/* La cella della Cover è la quinta (td:nth-child(5)) */
.recent-posts--hidden .el-table table tbody tr td:nth-child(5) {
order: 4; /* Appare dopo Lingua/Data */
width: 100%; /* Occupa tutta la larghezza */
margin-bottom: 0.75em; /* Spazio tra la cover e la descrizione sottostante */
margin-right: 0; /* Assicura che la cover non abbia margine destro extra */
}
.recent-posts--hidden .el-table table tbody tr td:nth-child(5) img {
max-width: 100%; /* Immagine responsiva */
height: auto; /* Mantiene le proporzioni */
display: block; /* Rimuove spazio extra sotto l'immagine */
border-radius: 4px; /* Angoli leggermente arrotondati per l'immagine */
}
/* --- Stile per la Descrizione del Post --- */
/* La cella della descrizione è la quarta (td:nth-child(4)) */
.recent-posts--hidden .el-table table tbody tr td:nth-child(4) {
order: 5; /* Appare dopo la Cover */
width: 100%; /* Occupa tutta la larghezza */
font-size: 0.95em; /* Dimensione del testo per la descrizione */
margin-bottom: 0.5em; /* Spazio dopo la descrizione, prima degli hashtag */
margin-right: 0; /* Assicura che la descrizione non abbia margine destro extra */
}
/* --- Stile per gli Hashtag --- */
/* La cella degli Hashtag è la sesta (td:nth-child(6)) */
.recent-posts--hidden .el-table table tbody tr td:nth-child(6) {
order: 6; /* Appare dopo la Descrizione */
width: 100%; /* Occupa tutta la larghezza */
font-size: 0.9em; /* Dimensione del testo per gli hashtag, puoi aggiustarla */
margin-bottom: 0.5em; /* Spazio dopo gli hashtag */
margin-right: 0; /* Assicura che gli hashtag non abbiano margine destro extra */
}
/* Stile per il contenitore degli hashtag (es. ul) dentro la cella */
.recent-posts--hidden .el-table table tbody tr td:nth-child(6) ul {
list-style-type: none; /* Rimuove i puntini */
padding: 0; /* Rimuove il padding predefinito della lista */
margin: 0; /* Rimuove il margine predefinito della lista */
display: flex; /* Dispone gli li in orizzontale */
flex-wrap: wrap; /* Permette agli li di andare a capo */
}
/* Stile per i singoli hashtag (es. li) */
.recent-posts--hidden .el-table table tbody tr td:nth-child(6) ul li {
margin-right: 0.75em; /* Spazio orizzontale tra un hashtag e l'altro */
margin-bottom: 0.4em; /* Spazio verticale se vanno a capo */
/* Se gli hashtag sono link, puoi stilizzare l'elemento <a> interno qui */
/* Esempio:
.recent-posts--hidden .el-table table tbody tr td:nth-child(6) ul li a {
text-decoration: none;
}
*/
}
```
### Version 1.0
```css
/* Style for recent posts in Obsidian Publish blog */
/* General selector now using the specific span */
span[alt="recent-new-post--hidden"] .el-table table {
border: none; /* Removes default table borders */
width: 100%; /* Makes the table occupy all available width */
border-collapse: collapse; /* Standard table behavior */
}
/* Hides the table header (Date, Post, Lang, Description, Cover, Hashtags) */
span[alt="recent-new-post--hidden"] .el-table table thead {
display: none;
}
/* Style for each table row (each post) */
span[alt="recent-new-post--hidden"] .el-table table tbody tr {
display: flex; /* Uses Flexbox to easily reorder cells */
flex-wrap: wrap; /* Allows elements to wrap to the next line */
margin-bottom: 2em; /* Space between posts */
padding-bottom: 1.5em; /* Internal space before the bottom border */
border-bottom: 1px solid; /* Separator line between posts - YOU CAN CUSTOMIZE THE COLOR HERE, e.g., border-bottom: 1px solid #ccc; */
}
/* Removes border and margin for the last post in the list */
span[alt="recent-new-post--hidden"] .el-table table tbody tr:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Base style for all cells (td) within these rows */
span[alt="recent-new-post--hidden"] .el-table table tbody tr td {
border: none; /* Removes default cell borders */
padding: 0; /* Removes default cell padding */
margin-right: 0.5em; /* Adds a small right margin for elements on the same line (Language, Date) */
/* Width will be handled by flex properties or specific overrides */
}
/* Removes right margin for the last flex item on a line if necessary */
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:last-of-type {
margin-right: 0;
}
/* --- Style for Post Title --- */
/* The title cell is the second (td:nth-child(2)) in the original HTML */
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(2) {
order: 1; /* Appears first */
width: 100%; /* Occupies full width, pushing subsequent elements to the next line */
margin-bottom: 0.25em; /* Reduced space between title and the meta row below */
margin-right: 0; /* Ensures the title has no extra right margin */
}
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(2) a {
font-size: 1.4em; /* Similar to an H3, you can adjust it */
font-weight: bold;
text-decoration: none; /* Removes standard link underline */
display: block; /* Makes the link behave like a block element */
}
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(2) a:hover {
text-decoration: underline; /* Adds underline on hover */
}
/* --- Style for Meta Row (Language - Date) --- */
/* Language and Date are now on a line below the title */
/* Language (the third cell (td:nth-child(3)) in the original HTML) */
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(3) {
order: 2; /* Appears after the title */
font-size: 0.9em;
width: auto; /* Allows language and date to be on the same line if there's space */
margin-bottom: 0.75em; /* Space after the Language/Date row before the Cover */
}
/* Date (the first cell (td:nth-child(1)) in the original HTML) */
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(1) {
order: 3; /* Appears after the language */
font-size: 0.9em;
width: auto; /* Allows language and date to be on the same line if there's space */
margin-bottom: 0.75em; /* Space after the Language/Date row before the Cover */
}
/* --- Style for Cover Image --- */
/* The Cover cell is the fifth (td:nth-child(5)) */
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(5) {
order: 4; /* Appears after Language/Date */
width: 100%; /* Occupies full width */
margin-bottom: 0.75em; /* Space between cover and description below */
margin-right: 0; /* Ensures the cover has no extra right margin */
}
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(5) img {
max-width: 100%; /* Responsive image */
height: auto; /* Maintains aspect ratio */
display: block; /* Removes extra space below the image */
border-radius: 4px; /* Slightly rounded corners for the image */
}
/* --- Style for Post Description --- */
/* The description cell is the fourth (td:nth-child(4)) */
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(4) {
order: 5; /* Appears after the Cover */
width: 100%; /* Occupies full width */
font-size: 0.95em; /* Text size for the description */
margin-bottom: 0.5em; /* Space after description, before hashtags */
margin-right: 0; /* Ensures the description has no extra right margin */
}
/* --- Style for Hashtags --- */
/* The Hashtags cell is the sixth (td:nth-child(6)) */
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(6) {
order: 6; /* Appears after the Description */
width: 100%; /* Occupies full width */
font-size: 0.9em; /* Text size for hashtags, you can adjust it */
margin-bottom: 0.5em; /* Space after hashtags */
margin-right: 0; /* Ensures hashtags have no extra right margin */
}
/* Style for the hashtag container (e.g., ul) within the cell */
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(6) ul {
list-style-type: none; /* Removes bullet points */
padding: 0; /* Removes default list padding */
margin: 0; /* Removes default list margin */
display: flex; /* Arranges li items horizontally */
flex-wrap: wrap; /* Allows li items to wrap to the next line */
}
/* Style for individual hashtags (e.g., li) */
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(6) ul li {
margin-right: 0.75em; /* Horizontal space between hashtags */
margin-bottom: 0.4em; /* Vertical space if they wrap */
/* If hashtags are links, you can style the <a> element inside here */
/* Example:
span[alt="recent-new-post--hidden"] .el-table table tbody tr td:nth-child(6) ul li a {
text-decoration: none;
}
*/
}
```