Guams/my_photo_album
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: modal

Browse Source
This commit is contained in:
guamss 2026-06-04 22:55:12 +02:00
parent 43ad397654
commit 16e679db52
7 changed files with 130 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/camera.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

2
src/components/Layout.astro
View File

@ -1,6 +1,7 @@
---
import Font from "astro/components/Font.astro";
import Nav from "./Nav.astro";
import Modal from "./Modal.astro";
---
<!doctype html>
@ -25,5 +26,6 @@ import Nav from "./Nav.astro";
sur cet album photo.
</footer>
</div>
<Modal />
</body>
</html>

22
src/components/Modal.astro Normal file
View File

@ -0,0 +1,22 @@
---
import "../styles/modal.css";
---
<dialog id="a-propos-modal">
<h1>À propos de cet album</h1>
<p>C'est mon album photo !</p>
<p>
Dans cet album je montre les photos type <span>vintage</span>. On peut y
voir des photos de sortie entre amis, de vacances, d'un arbre, un peu de
n'importe quoi. Le but est principalement de répertorier des souvenirs dans
cet album photo. Vous trouverez sous (presque) chaque image une description
du contexte de la photo.
</p>
<p>
Si vous cherchez à acheter le même appareil que le mien, voici la référence
: <span>Canon Digital IXUS V</span>
</p>
<img src="/camera.jpg" alt="Mon appareil photo" />
<button commandfor="a-propos-modal" command="close">Fermer</button>
</dialog>

2
src/components/Nav.astro
View File

@ -2,7 +2,7 @@
<a href="/">
<h1>Mon album photo</h1>
</a>
<button type="button">
<button command="show-modal" commandfor="a-propos-modal" type="button">
<h2>À propos</h2>
</button>
</nav>

41
src/styles/global.css
View File

@ -9,6 +9,17 @@
box-sizing: border-box;
}
button {
background-color: transparent;
border: none;
margin: 0;
padding: 0;
text-align: inherit;
font: inherit;
border-radius: 0;
appearance: none;
}
html,
body {
color: var(--font-color);
@ -30,21 +41,10 @@ body {
display: flex;
align-items: baseline;
justify-content: space-between;
border-radius: 2rem;
border-radius: 8px;
margin: 2rem 0;
background-color: var(--secondary-background-color);
> button {
background-color: transparent;
border: none;
margin: 0;
padding: 0;
text-align: inherit;
font: inherit;
border-radius: 0;
appearance: none;
}
> a,
button {
padding: 0 1rem;
@ -65,6 +65,23 @@ body {
margin: 4rem;
}
}
> dialog button {
align-self: flex-end;
border-radius: 8px;
color: var(--primary-background-color);
background-color: var(--font-color);
padding: 0.8rem 1.2rem;
text-decoration: none;
transition: 0.2s;
&:hover {
scale: 1.02;
cursor: pointer;
background-color: var(--font-hover);
color: var(--secondary-background-color);
}
}
}
@media screen and (max-width: 450px) {

2
src/styles/index.css
View File

@ -6,7 +6,7 @@ main {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
a img {
> a img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;

75
src/styles/modal.css Normal file
View File

@ -0,0 +1,75 @@
@keyframes slideUp {
from {
transform: translateY(500px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
dialog {
max-width: 30%;
display: flex;
flex-direction: column;
gap: 1rem;
color: var(--font-color);
border-radius: 1rem;
background-color: var(--secondary-background-color);
border: 3px solid var(--font-color);
transition:
opacity 0.5s,
display 0.5s allow-discrete,
overlay 0.5s allow-discrete;
> p span {
font-weight: bold;
font-style: italic;
}
> img {
width: 100%;
}
}
dialog::backdrop {
backdrop-filter: blur(0.25rem);
transition:
background-color 0.4s,
backdrop-filter 0.4s,
display 0.4s allow-discrete,
overlay 0.4s allow-discrete;
}
@starting-style {
dialog[open]::backdrop {
background-color: transparent;
backdrop-filter: blur(0);
}
}
dialog {
display: none;
}
dialog[open] {
display: flex;
animation: slideUp 0.4s ease-out forwards;
}
h1 {
margin: 0;
}
@media screen and (min-width: 900px) and (max-width: 1200px) {
dialog {
max-width: 45%;
}
}
@media screen and (max-width: 900px) {
dialog {
max-width: 60%;
}
}