/* ------------------------------------------------------------------ adattivo.css — Heritage of Tibet Adatta l'impaginato agli schermi stretti. Va caricato DOPO tema.css. Sopra i 980 px non fa assolutamente nulla: da computer il sito resta ancorato a 940 px centrati, identico a prima. Per annullare tutto: togliere il a questo file e rimettere nel delle pagine content="width=940, user-scalable=yes". ------------------------------------------------------------------ */ /* =========== 1. sotto i 980 px: l'impaginato si scioglie =========== */ @media (max-width: 979px) { /* la pagina non pretende piu' una larghezza minima di 940 px */ #art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare { min-width: 0 !important; } .art-sheet { width: auto !important; max-width: 940px; margin-left: 6px; margin-right: 6px; } .art-content-layout { width: 100% !important; } /* la fotografia di testata si adatta invece di essere tagliata */ /* il margine automatico impediva alla testata di prendere la larghezza quando la pila diventa flessibile: qui si azzera. */ div.art-header { width: 100% !important; margin: 0 !important; height: auto !important; aspect-ratio: 940 / 340; } div.art-header-jpeg { width: 100% !important; height: 100% !important; background-size: cover; background-position: center center; } .art-logo { width: auto !important; right: 10px; } /* niente fuoriuscite orizzontali */ img, .art-postcontent img, .art-blockcontent img { max-width: 100%; height: auto; } } /* =========== 2. sotto i 760 px: una colonna sola =========== */ @media (max-width: 759px) { /* la fotografia di testata viene prima del menu: chi arriva vede il sito, non un elenco di voci. Sul computer l'ordine resta quello originale. */ .art-sheet-body { display: flex !important; flex-direction: column; } .art-header { order: 1; } .art-nav { order: 2; } .art-content-layout { order: 3; } .art-footer { order: 4; } .art-sheet-body > .cleared { display: none; } /* la struttura a tabella diventa una pila; la colonna laterale scende SOTTO il contenuto pur restando prima nel codice */ .art-content-layout { display: flex !important; flex-direction: column; } .art-content-layout-row { display: contents !important; } .art-layout-cell { display: block !important; width: auto !important; } .art-sidebar1 { order: 2; } .art-content { order: 1; } /* le voci di menu avevano height fissa e overflow:hidden: il testo a capo veniva tagliato. Qui l'altezza torna a dipendere dal contenuto. */ ul.art-vmenu a, .art-menu a, .art-menu ul a, ul.art-vmenu ul a, .art-button-wrapper { height: auto !important; overflow: visible !important; } /* --- menu in alto -------------------------------------------- La barra arancione era alta 30 px fissi: ora copre tutta l'altezza. Le tre voci principali diventano righe; le tendine, che col dito non si possono aprire, restano visibili sotto la loro voce ma disposte in linea, cosi' occupano quattro righe invece di dodici. */ .art-nav { height: auto !important; overflow: visible; } .art-nav .l { height: 100% !important; } .art-menu > li { float: none !important; display: block !important; width: auto !important; } .art-menu > li > a { display: block; } .art-menu > li > a .t { line-height: 1.3 !important; padding: 11px 16px !important; text-align: left !important; height: auto !important; font-weight: bold; } .art-menu ul { visibility: visible !important; position: static !important; padding: 6px 10px 10px !important; margin: 0 !important; width: auto !important; display: flex !important; flex-wrap: wrap; gap: 6px; } /* le voci di tendina avevano width:180px e clear:both, che le costringeva una per riga. Liberate, si dispongono in linea e vanno a capo da sole. */ .art-menu ul li { float: none !important; display: block !important; margin: 0 !important; clear: none !important; } .art-menu ul a { display: block; height: auto !important; overflow: visible !important; line-height: 1.3 !important; padding: 8px 12px !important; text-indent: 0 !important; margin: 0 !important; border-radius: 3px; width: auto !important; white-space: normal !important; text-align: left !important; } .art-menu-separator, .art-nav .art-menu-separator { display: none !important; } /* voci del menu laterale: bersagli piu' grandi */ ul.art-vmenu a .t { line-height: 1.35 !important; padding: 12px 10px 12px 36px !important; } /* Le voci del sottomenu laterale usavano un'immagine alta 60 px con tre bande impilate: crescendo in altezza si vedeva anche la banda scura sottostante. Qui l'immagine viene tolta e il quadratino che faceva da segno di elenco (3x3 px, #5E6D6E) e' ridisegnato in CSS, centrato verticalmente qualunque sia l'altezza della riga. */ ul.art-vmenu ul a { height: auto !important; line-height: 1.35 !important; padding-top: 9px !important; padding-bottom: 9px !important; background-image: none !important; background-color: #DDECF8 !important; position: relative; } ul.art-vmenu ul a::before { content: ""; position: absolute; left: 25px; top: 50%; margin-top: -2px; width: 3px; height: 3px; background-color: #5E6D6E; } ul.art-vmenu ul li a:hover, ul.art-vmenu ul li:hover > a { background-color: #5998B1 !important; } /* respiro interno ridotto: su schermo stretto 18 px per lato sono tanti */ .art-post-body { padding: 12px !important; } /* le tabelle dell'archivio non si impilano da sole */ .art-postcontent table, .art-postcontent tbody, .art-postcontent tr, .art-postcontent td { display: block !important; width: auto !important; height: auto !important; } .art-postcontent td { padding: 8px 10px !important; } .art-postcontent tr { margin-bottom: 14px; } /* il modulo di iscrizione: campi comodi da toccare */ .art-block input[type="text"], .art-block input[type="email"] { width: 100% !important; box-sizing: border-box; font-size: 16px; padding: 8px; } .art-block input[type="radio"] { width: 18px; height: 18px; vertical-align: middle; } } /* =========== 3. sotto i 560 px: testo alla sua dimensione =========== */ @media (max-width: 559px) { .art-post, .art-post p, .art-post li, .art-post td, .art-postcontent, .art-postcontent p, .art-blockcontent, .art-blockcontent p { font-size: 16px !important; line-height: 1.55 !important; } ul.art-vmenu a .t { font-size: 15px !important; } .art-menu a .t { font-size: 15px !important; } /* il testo giustificato su colonna stretta apre voragini fra le parole */ .art-post p, .art-postcontent p, .art-post td, .art-postcontent div { text-align: left !important; } .art-sheet { margin-left: 0; margin-right: 0; } .art-post { margin: 0 !important; } }