- [Obsidian - Style for Recent Posts in Obsidian Publish Blog](LEARNING/SNIPPETS/CSS/Obsidian%20-%20Style%20for%20Recent%20Posts%20in%20Obsidian%20Publish%20Blog.md)
- [Obsidian - Style for All Posts in Obsidian Publish Blog](LEARNING/SNIPPETS/CSS/Obsidian%20-%20Style%20for%20All%20Posts%20in%20Obsidian%20Publish%20Blog.md)
```css
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");
/*---------------------------------------------------------------------------------------------------
1. DEFINIZIONI GLOBALI E VARIABILI ROOT
---------------------------------------------------------------------------------------------------*/
:root,
.theme-light {
--footer-display: none !important; /* Considera se !important è indispensabile */
--font-text-theme: "Titillium Web";
--font-interface-theme: "Titillium Web";
--font-text-size: 1.2rem;
/* Variabili Tema Chiaro (Default) */
--background-primary: rgb(240, 240, 240);
--text-color: #333333;
--text-muted: #555555;
--link-color: #6d3eda;
--link-color-hover: #0056b3;
--border-color: #e0e0e0;
--metadata-background-alt: #f8f9fa;
/* --metadata-background-alt: rgb(246, 246, 246); */
--metadata-border-accent: var(
--link-color
); /* Usa variabile link per coerenza */
--tag-color: #0056b3; /* Blu più scuro per leggibilità su sfondo chiaro */
--tag-background: #e0e9f5;
--tag-background-hover: #cdd9e8;
}
/*---------------------------------------------------------------------------------------------------
2. DEFINIZIONI TEMA SCURO (.theme-dark)
---------------------------------------------------------------------------------------------------*/
.theme-light {
--background-primary: rgb(230, 230, 230);
}
.theme-dark {
--background-primary: #1e1e1e; /* Colore di sfondo principale per il tema scuro */
--text-color: #dcdcdc;
--text-muted: #b0b0b0;
--border-color: #4a4a4a;
--metadata-background-alt: #2c2c2c;
/* --metadata-background-alt: #333333; */
--metadata-border-accent: var(
--link-color
); /* Usa variabile link per coerenza */
/* Variabili specifiche del tema scuro */
--bold-color: orange;
--italic-color: goldenrod;
--link-color: #20b2aa;
--link-decoration: #20b2aa underline dotted;
--link-color-hover: mediumaquamarine;
--link-decoration-hover: mediumaquamarine underline dotted;
--link-unresolved-color: red;
--link-unresolved-decoration-style: wavy underline;
--link-external-color: #20b2aa; /* Già definite, va bene */
--link-external-color-hover: mediumaquamarine;
--link-external-decoration: underline;
--tag-color: #87c9ff;
--tag-color-hover: #dcd7ff;
--tag-background: transparent; /* Sfondo trasparente per i tag nel tema scuro */
--tag-background-hover: rgba(
119,
136,
153,
0.2
); /* Leggero sfondo su hover */
--checkbox-color: steelblue;
--checkbox-border-color-hover: steelblue;
--text-highlight-bg: gold;
--text-highlight-color: black;
--font-text-theme: "Titillium Web";
--font-interface-theme: "Titillium Web";
--font-text-size: 1.2rem;
}
/*---------------------------------------------------------------------------------------------------
3. STILI GENERALI COMPONENTI OBSIDIAN (Adattati per entrambi i temi dove possibile)
---------------------------------------------------------------------------------------------------*/
body {
font-family: "Titillium Web", sans-serif !important;
--font-text-theme: "Titillium Web";
font-size: var(--font-text-size);
background-color: var(--background-primary); /* Default per tema chiaro */
color: var(--text-color); /* Default per tema chiaro */
--font-text-theme: "Titillium Web";
--font-interface-theme: "Titillium Web";
--font-text-size: 1.2rem;
}
/* Rimuovi la ridefinizione di --font-text-size se è uguale a quella del body */
.site-body-left-column,
.site-body-right-column {
--font-text-size: 1.2rem;
}
.site-footer {
display: none !important;
/* display: var(--footer-display); Usa la variabile */
}
/* Telefono */
.tel::before {
content: "☎️";
margin-right: 0.3em;
}
.tel {
color: var(--bold-color); /* Solo in tema scuro, o definisci --tel-color */
}
/* Immagini */
img {
/* Stile base per immagini, se necessario */
max-width: 100%;
height: auto;
border-radius: 4px; /* Leggero radius di default */
}
img {
border: 4px solid ivory; /* Sovrascrivi per tema scuro */
border-radius: 8px;
}
img:hover {
border-color: var(--italic-color);
}
/* Stili per il logo - rimuovono il bordo delle immagini generiche */
.site-body-left-column-site-logo > img,
.site-body-left-column-site-logo > img:hover {
border: none;
}
.site-body-left-column-site-name {
display: none; /* Se vuoi mostrare solo il logo */
}
/* Testo Quotes */
.cm-s-obsidian span.cm-quote.cm-strong,
span.cm-quote.cm-em {
/* Raggruppato per leggibilità */
color: var(--bold-color); /* Era orange, usa variabile se corrisponde */
}
/* Testo Evidenziato (mark) */
mark,
.markdown-rendered mark,
.cm-s-obsidian span.cm-highlight,
mark > strong,
mark > em {
/* Stile unificato per <mark> */
background-color: var(
--text-highlight-bg,
gold
); /* Usa variabile, fallback gold */
color: var(--text-highlight-color, black); /* Usa variabile, fallback black */
padding: 0.1em 0.4em; /* Spaziatura più standard */
// border-radius: 3px; /* Radius più sottile */
border-radius: 0 8px 0 8px;
}
.is-flashing {
background-color: var(--text-highlight-bg, gold);
color: var(--text-highlight-color, black);
}
/* Stili per Embed MD */
.markdown-embed-title,
.markdown-embed-link {
display: none;
}
.markdown-embed.is-loaded {
padding: 0; /* Rimuovi padding o imposta valore specifico */
border-inline-start: none; /* Rimuovi bordo o imposta stile specifico */
/* background-color: var(--background-secondary); */ /* Esempio: per dare uno sfondo all'embed */
/* border-radius: 4px; */
}
/* Nascondi elementi nel File Explorer (Tree Item) */
.tree-item:has(> .tree-item-self > .tree-item-inner > a[href*="--hidden"]) {
display: none;
}
.nav-view-outer .tree-item-self.mod-active {
color: var(--link-color);
}
.maiuscoletto {
font-variant: small-caps;
}
/*---------------------------------------------------------------------------------------------------
4. STILI PER METADATI DINAMICI (Blocchi generati da JS)
---------------------------------------------------------------------------------------------------*/
/* Contenitore Generale Metadati */
.dynamic-meta-container {
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color); /* Default tema chiaro */
}
.dynamic-meta-container {
border-bottom-color: var(--border-color); /* Tema scuro */
}
/* Box Info Corso */
.course-info-box {
background-color: var(--metadata-background-alt);
border-left: 4px solid var(--metadata-border-accent);
padding: 12px 18px;
margin-bottom: 15px;
border-radius: 4px;
font-size: 1em; /* Eredita o imposta una base leggermente più piccola di .body se vuoi */
color: var(--text-muted);
}
.course-info-box p {
margin-top: 0;
margin-bottom: 10px;
font-weight: 600; /* Più leggibile di 'bold' */
color: var(--text-color);
}
.course-info-box ul {
margin: 0;
padding-left: 5px;
list-style: none;
}
.course-info-box ul li {
margin-bottom: 7px;
}
.course-info-box ul li:last-child {
margin-bottom: 0;
}
.course-info-box ul li strong {
color: var(--text-color); /* O un colore accento per tema chiaro */
margin-right: 8px;
}
.course-info-box ul li a {
color: var(--link-color);
text-decoration: none;
transition: color 0.2s ease, text-decoration 0.2s ease;
}
.course-info-box ul li a:hover {
color: var(--link-color-hover);
text-decoration: underline dotted;
}
.course-info-box {
background-color: var(--metadata-background-alt);
border-left-color: var(--metadata-border-accent);
color: var(--text-color);
}
.course-info-box p {
font-weight: normal; /* Già presente e corretto */
color: var(--text-muted);
}
.course-info-box ul li strong {
color: var(--bold-color); /* Usa variabile tema scuro */
}
.course-info-box ul li a {
color: var(--link-external-color);
}
.course-info-box ul li a:hover {
color: var(--link-external-color-hover);
text-decoration: var(--link-decoration-hover);
}
/* Contenitore Date & Tag */
.properties-container {
margin-top: 10px;
padding: 10px 15px;
background-color: var(--metadata-background-alt);
border-radius: 4px;
font-size: 0.85em;
color: var(--text-muted);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.properties {
display: flex;
gap: 20px;
}
.created,
.updated {
/* Stili specifici se necessari, ereditano colore da .properties-container */
}
.properties-container {
background-color: var(--metadata-background-alt);
color: var(--text-muted);
}
.created,
.updated {
color: var(
--text-muted
); /* O un grigio leggermente diverso se vuoi distinguerli ancora di più */
}
/* Stili per i Tag */
.tagsproperty a.tag {
color: var(--tag-color);
background-color: var(--tag-background);
padding: 3px 7px;
margin-left: 6px;
text-decoration: none;
border-radius: 10px;
font-size: 1em; /* Relativo a .properties-container */
font-weight: 500;
transition: color 0.2s ease, background-color 0.2s ease;
}
.tagsproperty a.tag:hover {
color: var(--link-color-hover); /* O un colore specifico per tag hover */
background-color: var(--tag-background-hover);
}
.tagsproperty a.tag {
color: var(--tag-color);
background-color: var(--tag-background); /* Ora trasparente nel tema scuro */
/* padding: 2px 4px; /* Riduci padding se senza sfondo evidente */
}
.tagsproperty a.tag:hover {
color: var(--tag-color-hover);
background-color: var(--tag-background-hover);
}
/* Stili per Link Alternativi */
.alternate-links-container {
background-color: var(
--metadata-background-alt
); /* Usa lo stesso sfondo degli altri box o uno dedicato */
/* border-left: 4px solid var(--metadata-border-accent); Potresti usare un bordo diverso o nessuno */
padding: 10px 15px;
margin-top: 15px; /* Spazio sopra, se non è il primo */
margin-bottom: 15px; /* Spazio sotto, se non è l'ultimo */
border-radius: 4px;
font-size: 0.9em;
color: var(--text-muted);
}
.alternate-links-container p {
margin-top: 0;
margin-bottom: 8px;
font-weight: 600; /* O 'normal' */
color: var(--text-color);
}
.alternate-links-container ul {
margin: 0;
padding-left: 5px; /* O 20px se vuoi più indentazione */
list-style: none; /* O un tipo di lista se preferisci */
}
.alternate-links-container ul li {
margin-bottom: 5px;
}
.alternate-links-container ul li:last-child {
margin-bottom: 0;
}
.alternate-links-container ul li a {
color: var(--link-color);
text-decoration: none;
transition: color 0.2s ease, text-decoration 0.2s ease;
}
.alternate-links-container ul li a:hover {
color: var(--link-color-hover);
text-decoration: underline;
}
/* Override per Tema Scuro per Link Alternativi */
.theme-dark .alternate-links-container {
background-color: var(
--metadata-background-alt
); /* Già definito, dovrebbe funzionare */
/* border-left-color: var(--some-other-accent-color); Se hai un bordo diverso */
color: var(--text-muted);
}
.theme-dark .alternate-links-container p {
color: var(--text-color);
}
.theme-dark .alternate-links-container ul li a {
color: var(--link-color); /* Usa le variabili del tema scuro */
}
.theme-dark .alternate-links-container ul li a:hover {
color: var(--link-color-hover);
text-decoration: var(
--link-decoration-hover
); /* Usa la decorazione specifica se definita */
}
/* Avviso AI */
.ai-notice {
font-size: 0.8em;
color: var(--text-muted);
padding-top: 12px;
margin-top: 12px;
border-top: 1px dashed var(--border-color);
display: flex;
align-items: center;
gap: 8px;
}
.ai-icon {
display: inline-block;
font-size: 1.1em;
opacity: 0.75;
}
.dynamic-meta-container .dynamic-meta-item:last-child {
/* Rimuovi margine inferiore dall'ultimo item nel container */
margin-bottom: 0;
}
.dynamic-meta-container .ai-notice:last-child {
/* Padding specifico se l'avviso AI è l'ultimo */
padding-bottom: 5px;
}
.ai-notice {
color: var(--text-muted);
border-top-color: var(--border-color);
}
/* 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;
}
*/
}
/* 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; */
}
```