Creazione galleria immagini

Galleria con effetto hover del testo, creato file gitignore, sistemazione link articoli
This commit is contained in:
PicciHud 2022-06-04 10:52:55 +02:00
parent 5d261663fe
commit 2cb73960e2
7 changed files with 867 additions and 346 deletions

5
.gitignore vendored Normal file
View File

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

BIN
Img/Cellulare/degoogle.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

View File

@ -46,6 +46,16 @@
<div class="lista_articol"> <div class="lista_articol">
<div class="max_spacer"></div> <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> <h2>Codice sorgente</h2>
<div class="border"></div> <div class="border"></div>
<p class="piccihud">23-05-2022</p> <p class="piccihud">23-05-2022</p>

File diff suppressed because it is too large Load Diff

View File

@ -61,13 +61,13 @@
supporto di un server centralizzato.</p> supporto di un server centralizzato.</p>
<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 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. ci si può registrare ed inserire il proprio progetto.
</p> </p>
<p> Il codice sorgente è disponibile a questo link: </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> </div>
@ -77,7 +77,6 @@
<h2>#Note</h2> <h2>#Note</h2>
<p>-<a href="https://wikiless.sethforprivacy.com/wiki/Gitea?lang=en">Gitea - Wikipedia [ENG]</a></p> <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://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://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> <p>-<a href="https://devol.it/servizi/testo_e_codice.html">Gitea - Devol</a></p>
</div> </div>

View File

@ -404,6 +404,24 @@ nav a:hover {
line-height: 30px; 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 { .container_img {
width: 100%; width: 100%;
display: flex; display: flex;
@ -416,15 +434,66 @@ nav a:hover {
.container_img img { .container_img img {
max-width: 100%; max-width: 100%;
height: auto; 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*/ /*Immagini di elevate dimensioni. Sarebbe corretto ridimensionarle a monte*/
.max_img { .max_img {
width: 50%; width: 50%;
height: auto; height: auto;
aspect-ratio: 16 / 9;
} }
.author { .author {
@ -650,6 +719,14 @@ h1 {
width: 95%; width: 95%;
} }
.gallery {
width: 60%;
}
.galleryText {
font-size: 18px;
}
.privacy { .privacy {
font-size: 13px; font-size: 13px;
} }
@ -660,6 +737,8 @@ h1 {
margin-top: 20px; margin-top: 20px;
} }
.contacts { .contacts {
display: flex; display: flex;
justify-content: space-between; 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*/ /*TABELLE*/
.styled-table { .styled-table {