-

Co-authored-by: Copilot <copilot@github.com>

Resistere_in_silenzio.md

@@ -1,4 +1,5 @@
-<span id="intro">
+
+<span id="intro">
 
 ## Le protagoniste invisibili della storia:
 </span>

content/css/style.css

@@ -136,6 +136,27 @@ a {
     margin-bottom: 20px;
 }
 
+.header-logo {
+    cursor: pointer;
+    height: 45px; /* Dimensione controllata */
+    width: auto;
+    border-radius: 50%; /* Se vuoi un taglio circolare */
+    object-fit: cover;
+    transition: transform 0.3s ease;
+    padding: 2px;
+}
+
+.header-logo:hover {
+    transform: scale(1.1);
+    border-color: var(--accent);
+}
+
+.logo-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+}
+
 /* --- FOOTER --- */
 .footer {
     background: var(--bg-footer);
@@ -200,12 +221,27 @@ a {
 }
 
 @media (max-width: 768px) {
-
+    /* Nasconde la navigazione e altri pulsanti */
     .nav-menu, 
     .cta-btn {
-        display: none;
+        display: none !important;
     }
 
+    .header-content {
+        justify-content: space-between; /* Spinge logo e immagine ai lati */
+        padding: 0 15px;
+    }
+
+    .logo {
+        font-size: 1.1rem; /* Riduce leggermente il titolo su schermi piccoli */
+    }
+
+    .header-logo {
+        display: block; /* Si assicura che l'immagine sia visibile */
+        height: 35px;   /* Leggermente più piccola su mobile */
+    }
+
+    /* Regole footer esistenti */
     .footer-grid {
         grid-template-columns: 1fr;
         gap: 40px;
@@ -218,6 +254,7 @@ a {
     }
 }
 
+
 .iframe-background {
     position: fixed;
     top: 0;
@@ -413,10 +450,15 @@ a {
     }
 }
 
-/* --- STILE LISTE MARKDOWN --- */
+/* --- CONFIGURAZIONE VARIABILI --- */
+:root {
+    --accent: #f92727;
+    --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
 
+/* --- STILE LISTE MARKDOWN --- */
 .markdown-body ul {
-    list-style: none; /* Rimuoviamo i pallini standard */
+    list-style: none;
     padding-left: 10px;
     margin-bottom: 2rem;
 }
@@ -429,78 +471,80 @@ a {
     color: #bdbdbd;
     line-height: 1.6;
     transition: var(--transition);
+    will-change: transform, opacity;
 }
 
-/* Creiamo un bullet personalizzato (un quadratino rosso) */
 .markdown-body li::before {
     content: "";
     position: absolute;
     left: 0;
-    top: 10px; /* Allineamento verticale */
+    top: 10px;
     width: 6px;
     height: 6px;
     background-color: var(--accent);
-    transform: rotate(45deg); /* Effetto diamante */
+    transform: rotate(45deg);
     transition: var(--transition);
 }
 
-/* Effetto hover sulla riga */
+.markdown-body li:hover,
-.markdown-body li:hover {
+.markdown-body li.active {
     color: #ffffff;
-    transform: translateX(5px);
+    transform: translateX(10px);
 }
 
-.markdown-body li:hover::before {
+.markdown-body li:hover::before,
+.markdown-body li.active::before {
     box-shadow: 0 0 10px var(--accent);
     transform: rotate(45deg) scale(1.2);
 }
 
-/* Gestione liste annidate (opzionale) */
+/* --- ANIMAZIONE PARAGRAFI (Escluso il primo) --- */
-.markdown-body ul ul {
+
-    margin-top: 10px;
+/* Stile base per tutti i paragrafi */
-    margin-bottom: 10px;
+.markdown-body p {
+    color: #bdbdbd;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+}
+
+/* Applica effetti solo dal secondo paragrafo in poi */
+.markdown-body p:not(:first-of-type) {
+    position: relative;
     padding-left: 20px;
+    transition: var(--transition);
+    border-left: 2px solid transparent;
+    will-change: transform, border-left;
 }
 
-.markdown-body ul ul li::before {
+/* Effetto Hover/Active solo per i paragrafi non esclusi */
-    background-color: transparent;
+.markdown-body p:not(:first-of-type):hover,
-    border: 1px solid var(--accent); /* Bullet vuoto per le sottoliste */
+.markdown-body p:not(:first-of-type).active {
+    color: #ffffff;
+    transform: translateX(10px);
+    border-left: 2px solid var(--accent);
+    background: linear-gradient(90deg, rgba(249, 39, 39, 0.08) 0%, transparent 100%);
+    box-shadow: -5px 0 15px -5px rgba(249, 39, 39, 0.4);
+}
+
+/* --- FIX E OTTIMIZZAZIONI --- */
+
+/* Evita conflitti se un p è dentro un li */
+.markdown-body li p {
+    padding-left: 0 !important;
+    border-left: none !important;
+    background: none !important;
+    transform: none !important;
+    box-shadow: none !important;
 }
 
-/* Mobile check */
 @media (max-width: 768px) {
     .markdown-body li {
         font-size: 1rem;
         padding-left: 25px;
     }
-}
     
-/* --- ANIMAZIONE PARAGRAFI --- */
+    .markdown-body p:not(:first-of-type).active,
-
+    .markdown-body li.active {
-.markdown-body p {
+        transform: translateX(5px);
-    position: relative;
-    padding-left: 20px; /* Spazio costante per non far saltare il testo */
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Curva più fluida */
-    border-left: 2px solid transparent;
-}
-
-.markdown-body p:hover {
-    color: #ffffff;
-    transform: translateX(8px); /* Spostamento elegante */
-    border-left: 2px solid var(--accent);
-    /* Effetto glow soffuso sul bordo */
-    box-shadow: -5px 0 15px -5px rgba(249, 39, 39, 0.4); 
-}
-
-/* Opzionale: aggiungiamo un leggerissimo gradiente di sfondo all'hover */
-.markdown-body p:hover {
-    background: linear-gradient(90deg, rgba(249, 39, 39, 0.05) 0%, transparent 100%);
-}
-
-/* --- MOBILE --- */
-@media (max-width: 768px) {
-    .markdown-body p:hover {
-        transform: translateX(4px); /* Movimento ridotto su mobile */
     }
 }
-

index.php

@@ -37,6 +37,10 @@
                     <li><a href="#lette" class="nav-link">La Ciociara</a></li>
                 </ul>
             </nav>
+
+            <a href="index.php" class="logo-link">
+                <img src="img/woman-hair.png" alt="Logo" class="header-logo">
+            </a>
         </div>
     </header>
 
@@ -95,6 +99,28 @@
             </div>
         </div>
     </footer>
+
+    <script>
+        const observerOptions = {
+            root: null,
+            rootMargin: '-30% 0px -35% 0px', // Attiva l'effetto quando l'elemento è nella fascia centrale
+            threshold: 0
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('active');
+                } else {
+                    entry.target.classList.remove('active');
+                }
+            });
+        }, observerOptions);
+
+        document.querySelectorAll('.markdown-body p, .markdown-body li').forEach(el => {
+            observer.observe(el);
+        });
+    </script>
 </body>
 
 </html>