Creazione galleria immagini

Galleria con effetto hover del testo, creato file gitignore, sistemazione link articoli

.gitignore

@@ -0,0 +1,5 @@
+# Ignorare la cartella di 'bozza'
+
+bozza_articoli/
+
+ 

articoli.html

@@ -46,6 +46,16 @@
         <div class="lista_articol">
             <div class="max_spacer"></div>
 
+            <h2>Un cellulare senza Google!?</h2>
+            <div class="border"></div>
+            <p class="piccihud">02-06-2022</p>
+            <p class="tag">#nogoolag #degoogle #freedom #floss #eos #opinion</p>
+            <p>Nel 2022 è possibile vivere senza i <em>GSF</em>, utilizzando solo (o quasi) app <em>FLOSS</em>? Parlo della mia esperienza</p>
+            <a href="./cellulare.html" class="read_more">
+                <p>Read more</p> <img src="./Icon/arrow-right.svg" alt="Read more">
+            </a>
+            <div class="max_spacer"></div>
+
             <h2>Codice sorgente</h2>
             <div class="border"></div>
             <p class="piccihud">23-05-2022</p>

gitea.html

@@ -61,13 +61,13 @@
                 supporto di un server centralizzato.</p>
             <p>
                 Ho scelto Gitea per pubblicare il codice di BeOpen, poiché è una delle migliori alternative <em>libere</em> a GitHub, è un progetto FLOSS e chiunque
-                può installare una propria istanza, ovunque lo desideri. Esiste un'istanza italiana su <a href="https://gitea.it/explore/repos" style="margin: 0; padding: 0; color: #4dafff" target="_blank">gitea.it</a> dove
+                può installare una propria istanza, ovunque lo desideri. Esiste un'istanza italiana su <a href="https://gitea.it/explore/repos" target="_blank">gitea.it</a> dove
                 ci si può registrare ed inserire il proprio progetto.
             </p>
 
             <p> Il codice sorgente è disponibile a questo link: </p>
 
-            <p><a href="https://gitea.it/PicciHud/beopen-code" style="margin: 0; padding: 0; color: #4dafff" target="_blank">codice sorgente</a></p>
+            <p><a href="https://gitea.it/PicciHud/beopen-code" target="_blank">codice sorgente</a></p>
 
 
         </div>
@@ -77,7 +77,6 @@
             <h2>#Note</h2>
             <p>-<a href="https://wikiless.sethforprivacy.com/wiki/Gitea?lang=en">Gitea - Wikipedia [ENG]</a></p>
             <p>-<a href="https://wiki.froth.zone/wiki/GitHub?lang=it">GitHub - Wikipedia</a></p>
-
             <p>-<a href="https://www.lealternative.net/2020/11/13/alternative-a-github/">Alternative a GitHub</a></p>
             <p>-<a href="https://devol.it/servizi/testo_e_codice.html">Gitea - Devol</a></p>
         </div>

style.css

@@ -404,6 +404,24 @@ nav a:hover {
     line-height: 30px;
 }
 
+/*link articolo principale*/
+
+.articol a {
+    color: rgb(255, 196, 0);
+    padding: 0;
+    margin: 0;
+    font-weight: bold;
+}
+
+.articol a:hover {
+    color: #ee6ef1;
+    transition: .2s;
+}
+
+.articol a:visited {
+    color: #69cece;
+}
+
 .container_img {
     width: 100%;
     display: flex;
@@ -416,15 +434,66 @@ nav a:hover {
 .container_img img {
     max-width: 100%;
     height: auto;
-    aspect-ratio: 16 / 9;
+}
-    /*Forza l'aspect-ratio a 16:9 per le immagini*/
+
+/*Immagini verticali, come screen da cellulare: visualizzazione a galleria*/
+#gallery {
+    width: 100%;
+    /*del Div in cui è contenuta*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.gallery {
+    width: 300px;
+    aspect-ratio: 9 / 16;
+    border-radius: 10px;
+    margin: 20px auto;
+    background-size: cover;
+    background-position: center;
+    overflow: hidden;
+}
+
+.galleryInfo {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 80%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+}
+
+.galleryInfo:hover {
+    opacity: 1;
+}
+
+.galleryInfo:hover .galleryText {
+    transform: translateY(0px);
+    /*Effetto di scrolling*/
+}
+
+.galleryText {
+    color: #fff;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 22px;
+    text-align: center;
+    font-weight: 600;
+    width: 100%;
+    margin: 20% auto;
+    transition: all 0.2s ease-in-out;
+    transform: translateY(-20px);
+    /*Di default sono 20 px più in alto*/
 }
 
 /*Immagini di elevate dimensioni. Sarebbe corretto ridimensionarle a monte*/
 .max_img {
     width: 50%;
     height: auto;
-    aspect-ratio: 16 / 9;
 }
 
 .author {
@@ -650,6 +719,14 @@ h1 {
         width: 95%;
     }
 
+    .gallery {
+        width: 60%;
+    }
+
+    .galleryText {
+        font-size: 18px;
+    }
+
     .privacy {
         font-size: 13px;
     }
@@ -660,6 +737,8 @@ h1 {
         margin-top: 20px;
     }
 
+
+
     .contacts {
         display: flex;
         justify-content: space-between;
@@ -683,6 +762,18 @@ h1 {
     }
 }
 
+@media (hover:none) {
+
+    /*Quando l'effetto hover non esiste, come sui dispositivi mobile*/
+    .galleryInfo {
+        opacity: 1;
+    }
+
+    .galleryText {
+        transform: translateY(0);
+    }
+}
+
 /*TABELLE*/
 
 .styled-table {