Masthead

Ready

HTML
View
Context
Info
Notes


        
        <style>
    .masthead {
        --masthead-height: 30px;
        margin: 0 auto;
        width: 100%;
        height: auto;
        max-width: 1400px;
        min-height: var(--masthead-height);
        position: relative;
        overflow: hidden;
    }

    @media (min-width: 600px) {
        .masthead {
            --masthead-height: 35px;
        }
    }

    @media (min-width: 740px) {
        .masthead {
            --masthead-height: 48px;
        }
    }

    @media (min-width: 992px) {
        .masthead {
            --masthead-height: 73px;
        }
    }

    .masthead input[type=checkbox]:checked~label {
        top: auto;
        bottom: 0;
    }

    .masthead input[type=checkbox]:checked~label::after {
        content: "Chiudi";
    }

    .masthead input[type=checkbox]:checked~figure {
        transition: opacity 0.3s ease-in;
    }

    .masthead input[type=checkbox]:checked~figure:first-of-type {
        display: none;
    }

    .masthead input[type=checkbox]:checked~figure:only-child,
    .masthead input[type=checkbox]:checked~figure:last-of-type {
        display: block;
    }

    .masthead__img {
        margin: 0 auto;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .masthead figure {
        margin: 0;
        transition: opacity, margin 0.3s ease-out;
    }

    .masthead figure:last-of-type:not(:only-child) {
        display: none;
    }

    .masthead figure:only-child {
        display: block;
    }

    .masthead label {
        --label-bg: white;
        --label-color: black;
        transition: top, bottom 0.9s ease-out;
        position: absolute;
        z-index: 9;
        top: 0;
        right: 0;
        cursor: pointer;
        background-color: var(--label-bg);
        padding: 0.25rem 0.5rem;
    }

    .masthead label::after {
        content: "Apri";
        color: var(--label-color);
        text-transform: uppercase;
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.3;
    }

    .masthead input {
        display: none;
    }
</style>
<div class="masthead">

    <input id="trigger" type="checkbox" checked>
    <label for="trigger"></label>

    <figure>
        <a href="#">
            <picture>
                <source media="(min-width: 960px)" srcset="https://ad.citynews.it/2023/masthead/06/autoimport-terni/desk/assets/image/chiuso.png">
                <img class="masthead__img" src="https://ad.citynews.it/2023/masthead/06/autoimport-terni/mobile/images/chiuso.jpg" />
            </picture>
    </figure>
    <figure>
        <picture>
            <source media="(min-width: 960px)" srcset="https://ad.citynews.it/2023/masthead/06/autoimport-terni/desk/assets/image/aperto.jpg">
            <img class="masthead__img" src="https://ad.citynews.it/2023/masthead/06/autoimport-terni/mobile/images/aperto.jpg" />
        </picture>
        </a>
    </figure>
</div>


        <style>


  .masthead {
    --masthead-height: 30px;
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 1400px;
    min-height: var(--masthead-height);
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 600px) {
    .masthead {
      --masthead-height: 35px;
    }
  }
  @media (min-width: 740px) {
    .masthead {
      --masthead-height: 48px;
    }
  }
  @media (min-width: 992px) {
    .masthead {
      --masthead-height: 73px;
    }
  }
  .masthead input[type=checkbox]:checked ~ label {
    top: auto;
    bottom: 0;
  }
  .masthead input[type=checkbox]:checked ~ label::after {
    content: "Chiudi";
  }
  .masthead input[type=checkbox]:checked ~ figure {
    transition: opacity 0.3s ease-in;
  }
  .masthead input[type=checkbox]:checked ~ figure:first-of-type {
    display: none;
  }
  .masthead input[type=checkbox]:checked ~ figure:only-child, .masthead input[type=checkbox]:checked ~ figure:last-of-type {
    display: block;
  }
  .masthead__img {
    margin: 0 auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
  .masthead figure {
    margin: 0;
    transition: opacity, margin 0.3s ease-out;
  }
  .masthead figure:last-of-type:not(:only-child) {
    display: none;
  }
  .masthead figure:only-child {
    display: block;
  }
  .masthead label {
    --label-bg: white;
    --label-color: black;
    transition: top, bottom 0.9s ease-out;
    position: absolute;
    z-index: 9;
    top: 0;
    right: 0;
    cursor: pointer;
    background-color: var(--label-bg);
    padding: 0.25rem 0.5rem;
  }
  .masthead label::after {
    content: "Apri";
    color: var(--label-color);
    text-transform: uppercase;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3;
  }
  .masthead input {
    display: none;
  }
  </style>
  <div class="masthead">
    
    <input id="trigger" type="checkbox" checked>		
    <label for="trigger"></label>
    
    <figure>
      <a href="#">
      <picture>
        <source media="(min-width: 960px)" srcset="https://ad.citynews.it/2023/masthead/06/autoimport-terni/desk/assets/image/chiuso.png">
        <img class="masthead__img" src="https://ad.citynews.it/2023/masthead/06/autoimport-terni/mobile/images/chiuso.jpg" />
      </picture> 
    </figure>
    <figure>	
      <picture>
        <source media="(min-width: 960px)" srcset="https://ad.citynews.it/2023/masthead/06/autoimport-terni/desk/assets/image/aperto.jpg">
        <img class="masthead__img" src="https://ad.citynews.it/2023/masthead/06/autoimport-terni/mobile/images/aperto.jpg" />
      </picture> 
      </a>
    </figure>	
  </div>


        
            
            {
  "limit": 9,
  "stories": [
    {
      "index": 1,
      "title": "Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire",
      "label": "Emergenza Coronavirus",
      "date": "ieri pomeriggio, 15:51",
      "author": "Violetto Gorrasi",
      "number": 1,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 2,
      "title": "Casa di riposo degli orrori: anziani legati e bastonati. Le immagini shock",
      "label": "Sei arresti",
      "date": "ieri pomeriggio, 15:51",
      "author": "Matteo Scarlino",
      "number": 2,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 3,
      "title": "Coronavirus, negli Usa 2.500 morti in un giorno ma Trump \"ha fretta\" di riaprire",
      "label": "Esteri",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 3,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 4,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 4,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 5,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Veronica Altimari",
      "number": 5,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 6,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Alberto Berlini",
      "number": 6,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 7,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 7,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 8,
      "title": "Muore annegato nella piscina comunale il giorno prima di compiere 7 anni",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 8,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    },
    {
      "index": 9,
      "title": "Riceve il reddito di cittadinanza, ma ha 40 case e percepisce 120mila euro d'affitto",
      "label": "Economia",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 9,
      "summary": "L'uomo è stato denunciato dalla Guardia di finanza a Lanciano, in provincia di Chieti. Gli immobili affittati, oltre quindici, secondo le Fiamme Gialle rendevano alla famiglia del beneficiario del sussidio oltre 120mila euro all'anno",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "square": "https://www.romatoday.it/~media/square-hi/28324255677065/podcast-cover_9-16_2-2.jpg"
      }
    }
  ],
  "opinions": [
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "17 luglio, 2020",
      "author": "Carlo Sala"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "12 luglio, 2020",
      "author": "Massimiliano Dona"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "30 giugno, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 giugno, 2020",
      "author": "Marilia Parente"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "27 maggio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "13 aprile, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "11 aprile, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "04 marzo, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "18 febbraio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "01 febbraio, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "25 gennaio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 gennaio, 2020",
      "author": "Luciano Lanna"
    }
  ]
}

Handle: @masthead
Preview:
- With layout
- Component only
Filesystem Path: src/lib/templates/adv/masthead.njk
Referenced by (2): @item--approfondimento, @item--approfondimento-close

No notes defined.