diff --git a/public/camera.jpg b/public/camera.jpg new file mode 100644 index 0000000..795cc7c Binary files /dev/null and b/public/camera.jpg differ diff --git a/src/components/Layout.astro b/src/components/Layout.astro index 74fc07c..2d8cc68 100644 --- a/src/components/Layout.astro +++ b/src/components/Layout.astro @@ -1,6 +1,7 @@ --- import Font from "astro/components/Font.astro"; import Nav from "./Nav.astro"; +import Modal from "./Modal.astro"; --- @@ -25,5 +26,6 @@ import Nav from "./Nav.astro"; sur cet album photo. + diff --git a/src/components/Modal.astro b/src/components/Modal.astro new file mode 100644 index 0000000..95d958b --- /dev/null +++ b/src/components/Modal.astro @@ -0,0 +1,22 @@ +--- +import "../styles/modal.css"; +--- + + +

À propos de cet album

+

C'est mon album photo !

+

+ Dans cet album je montre les photos type vintage. 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. +

+ +

+ Si vous cherchez à acheter le même appareil que le mien, voici la référence + : Canon Digital IXUS V +

+ Mon appareil photo + + diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 6df2435..c4049d6 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -2,7 +2,7 @@

Mon album photo

 - diff --git a/src/styles/global.css b/src/styles/global.css index 7dd2b7a..793120d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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) { diff --git a/src/styles/index.css b/src/styles/index.css index 1ee99ef..9d25797 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -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; diff --git a/src/styles/modal.css b/src/styles/modal.css new file mode 100644 index 0000000..a5e08e9 --- /dev/null +++ b/src/styles/modal.css @@ -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%; + } +}